\/* Define CSS variables (custom properties) in the :root selector *\/\n :root {\n --primary-color: #3498db; \/* Main theme color *\/\n --secondary-color: #2ecc71; \/* Accent color *\/\n --text-color: #333; \/* Default text color *\/\n --font-size: 16px; \/* Base font size *\/\n --padding: 10px; \/* Base padding *\/\n }\n\n \/* General styles using variables *\/\n body {\n font-family: Arial, sans-serif;\n font-size: var(--font-size);\n color: var(--text-color);\n margin: 0;\n padding: 0;\n background-color: #f9f9f9;\n }\n\n header {\n background-color: var(--primary-color);\n color: white;\n text-align: center;\n padding: var(--padding);\n }\n\n .card {\n background-color: white;\n border: 1px solid #ddd;\n border-radius: 5px;\n margin: 20px;\n padding: var(--padding);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .card h2 {\n color: var(--primary-color);\n }\n\n .card p {\n color: var(--text-color);\n }\n\n button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n border-radius: 5px;\n padding: calc(var(--padding) \/ 2) calc(var(--padding) * 2);\n cursor: pointer;\n font-size: var(--font-size);\n }\n\n button:hover {\n background-color: var(--primary-color);\n }\n\n \/* Dark mode example by overriding variables *\/\n body.dark-mode {\n --primary-color: #1abc9c;\n --secondary-color: #e74c3c;\n --text-color: #f9f9f9;\n background-color: #333;\n }\n<\/pre>\n\n\n\n\n \n \n 參考文獻(xiàn):\n<\/h3>\n\n\n- \nMDN Web ドキュメント - CSS カスタム プロパティ (変數(shù)) の使用 - CSS 変數(shù)の定義、使用、更新に関する例を示した、初心者向けの徹底した説明です。<\/li>\n
- \nW3Schools - CSS 変數(shù) - 簡(jiǎn)単な練習(xí)用のライブ コード例を使用して CSS 変數(shù)の基本をカバーします。<\/li>\n
- \nCSS のトリック - カスタム プロパティの完全ガイド - 実際の使用例と高度な変數(shù)の使用に関するヒントを紹介する包括的なガイドです。<\/li>\n
- \nFreecodecamp - CSS 変數(shù)フル ハンドブック - カスケード効果、メディア クエリベースの変數(shù)、スコープ管理などの強(qiáng)力なテクニックを探ります。<\/li>\n<\/ul>\n\n\n
\n\n\n \n \n アニメーションとトランジション \n<\/h2>\n\n
Web サイトに動(dòng)きを加えると、魅力的なユーザー エクスペリエンスが生まれます。 CSS では、アニメーションを作成する主な方法が 2 つあります:<\/p>\n\n
\n \n \n トランジション\n<\/h3>\n\n
単純な狀態(tài)変更に最適:
\n<\/p>
\/* Mobile-first approach *\/\n.container {\n width: 100%;\n padding: 10px;\n}\n\n\/* Tablet and larger *\/\n@media screen and (min-width: 768px) {\n .container {\n width: 750px;\n padding: 20px;\n }\n}\n\n\/* Desktop *\/\n@media screen and (min-width: 1024px) {\n .container {\n width: 960px;\n }\n}\n<\/pre>\n\n\n\n\n \n \n キーフレームアニメーション\n<\/h3>\n\n
より複雑な複數(shù)ステップのアニメーションの場(chǎng)合:
\n<\/p>\n\n
\n\n\n\nCSS:
\n<\/p>\n\n
\/* Mobile First Approach *\/\n.services {\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n text-align: center;\n color: #333;\n margin-bottom: 30px;\n}\n\n.services-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.service-card {\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nbutton {\n width: 100%;\n padding: 10px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n\/* Tablet *\/\n@media (min-width: 768px) {\n .services-container {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n .service-card {\n flex: 0 1 calc(50% - 20px);\n }\n}\n\n\/* Desktop *\/\n@media (min-width: 1024px) {\n .service-card {\n flex: 1;\n }\n\n button {\n width: auto;\n padding: 10px 20px;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 高度なアニメーション技術(shù)\n<\/h3>\n\n
アニメーションの CSS カスタム プロパティ:
\n<\/p>\n\n
\/* Base styles - Mobile First (320px and up) *\/\n.services {\n padding: 15px;\n max-width: 1200px;\n margin: 0 auto;\n overflow-x: hidden; \/* Prevent horizontal scroll *\/\n}\n\nh2 {\n text-align: center;\n color: #333;\n margin-bottom: 20px;\n font-size: clamp(1.5rem, 5vw, 2.5rem); \/* Fluid typography *\/\n}\n\n.services-container {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.service-card {\n padding: 15px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n transition: all 0.3s ease; \/* Smooth transitions for responsive changes *\/\n}\n\nbutton {\n width: 100%;\n padding: 8px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n}\n\n\/* Small phones (375px and up) *\/\n@media (min-width: 375px) {\n .services {\n padding: 20px;\n }\n\n .service-card {\n padding: 20px;\n }\n}\n\n\/* Large phones (480px and up) *\/\n@media (min-width: 480px) {\n .services-container {\n gap: 20px;\n }\n\n button {\n padding: 10px;\n font-size: 16px;\n }\n}\n\n\/* Small tablets (600px and up) *\/\n@media (min-width: 600px) {\n .services-container {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n .service-card {\n flex: 0 1 calc(50% - 10px); \/* Two cards per row with gap consideration *\/\n }\n}\n\n\/* Tablets (768px and up) *\/\n@media (min-width: 768px) {\n .services {\n padding: 30px;\n }\n\n .service-card {\n padding: 25px; \/* Improved spacing for larger screens *\/\n }\n\n button: hover {\n \/* Add hover effect for non-touch devices *\/\n background: #0056b3;\n transform: translateY(-2px);\n }\n}\n\n\/* Small laptops (1024px and up) *\/\n@media (min-width: 1024px) {\n .service-card {\n flex: 1; \/* Three cards per row *\/\n transition: transform 0.3s ease, box-shadow 0.3s ease; \/* Add subtle hover effect *\/\n }\n\n .service-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n }\n\n button {\n \/* Change to inline button *\/\n width: auto;\n padding: 10px 20px;\n }\n}\n\n\/* Desktops (1200px and up) *\/\n@media (min-width: 1200px) {\n .services {\n padding: 40px;\n }\n\n .services-container {\n gap: 30px;\n }\n\n .service-card {\n padding: 30px;\n }\n}\n\n\/* Extra large screens (1440px and up) *\/\n@media (min-width: 1440px) {\n .services {\n max-width: 1400px; \/* Max width to maintain readability *\/\n }\n\n .service-card {\n padding: 35px; \/* Larger padding for extra large screens *\/\n }\n}\n\n\/* Print styles *\/\n@media print {\n .services {\n padding: 0;\n }\n\n .service-card {\n break-inside: avoid;\n box-shadow: none;\n border: 1px solid #ddd;\n }\n\n button {\n display: none;\n }\n}\n\n\/* Reduced motion preferences *\/\n@media (prefers-reduced-motion: reduce) {\n .service-card,\n button {\n transition: none;\n }\n}\n\n\/* Dark mode support *\/\n@media (prefers-color-scheme: dark) {\n .service-card {\n background: #2a2a2a;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n h2 {\n color: #fff;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 高度なキーフレーム アニメーション:\n<\/h3>\n\n\n\n:root {\n --primary-color: #007bff;\n --secondary-color: #6c757d;\n --spacing-unit: 1rem;\n}\n\n.button {\n background-color: var(--primary-color);\n padding: var(--spacing-unit);\n}\n<\/pre>\n\n\n\n\n \n \n 実踐演習(xí): インタラクティブカード\n<\/h2>\n\n
ホバー効果のあるインタラクティブなカードを作成します:<\/p>\n\n
HTML:
\n<\/p>
\/* Mobile-first approach *\/\n.container {\n width: 100%;\n padding: 10px;\n}\n\n\/* Tablet and larger *\/\n@media screen and (min-width: 768px) {\n .container {\n width: 750px;\n padding: 20px;\n }\n}\n\n\/* Desktop *\/\n@media screen and (min-width: 1024px) {\n .container {\n width: 960px;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 參考文獻(xiàn):\n<\/h3>\n\n\n- \nMDN Web ドキュメント - CSS トランジション - CSS トランジションの明確な入門書であり、スタイルを変更するときにスムーズな効果を作成する方法を説明しています。<\/li>\n
- \nMDN Web ドキュメント - CSS アニメーション - キーフレーム、アニメーション プロパティ、複雑なアニメーションの作成に関するステップバイステップ ガイド。<\/li>\n
- \nW3Schools - CSS トランジション - トランジションとアニメーションをインタラクティブに練習(xí)できるライブ コード エディターを備えた初心者向け。<\/li>\n
- \nW3Schools - CSS アニメーション - キーフレームとトランジションを使用して Web サイトにアニメーションを追加するためのわかりやすいガイドです。<\/li>\n
- \nCSS トリック - アニメーション - 応答性の高いアニメーション、アクセシビリティのためのモーションの削減、メディア クエリの統(tǒng)合について説明します。<\/li>\n
- \nAnimate.css - プロジェクトに簡(jiǎn)単に追加できる、事前に構(gòu)築されたアニメーションを提供する人気の CSS ライブラリです。<\/li>\n<\/ul>\n\n\n
\n\n\n \n \n ベストプラクティスと組織 \n<\/h2>\n\n\n \n \n CSS アーキテクチャ\n<\/h3>\n\n\n- 一貫した命名規(guī)則を使用する<\/li>\n
- コンポーネント\/機(jī)能ごとに CSS ファイルを整理します<\/li>\n
- 可能な限り特異性を低く保ちます<\/li>\n
- コードを効果的にコメント化する\n<\/li>\n<\/ul>\n\n
\n\n\n\nCSS:
\n<\/p>\n\n
\/* Mobile First Approach *\/\n.services {\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n text-align: center;\n color: #333;\n margin-bottom: 30px;\n}\n\n.services-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.service-card {\n padding: 20px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nbutton {\n width: 100%;\n padding: 10px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n\/* Tablet *\/\n@media (min-width: 768px) {\n .services-container {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n .service-card {\n flex: 0 1 calc(50% - 20px);\n }\n}\n\n\/* Desktop *\/\n@media (min-width: 1024px) {\n .service-card {\n flex: 1;\n }\n\n button {\n width: auto;\n padding: 10px 20px;\n }\n}\n<\/pre>\n\n\n\n\n \n \n 実踐的な演習(xí): CSS アーキテクチャのベスト プラクティス\n<\/h2>\n\n\n\n\n\n\n <メタ文字セット=\"UTF-8\">\n \n CSS アーキテクチャ演習(xí)<\/title>\n <リンク rel=\"スタイルシート\" href=\"styles\/reset.css\"> <!-- デフォルトのブラウザスタイルをリセットします -->\n <リンク rel=\"スタイルシート\" href=\"styles\/layout.css\"> <!-- レイアウト関連のスタイル -->\n <リンク rel=\"スタイルシート\" href=\"styles\/components\/header.css\"> <!-- ヘッダーコンポーネントのスタイル -->\n <リンク rel=\"スタイルシート\" href=\"styles\/components\/card.css\"> <!-- カード コンポーネント スタイル -->\n <リンク rel=\"スタイルシート\" href=\"styles\/utilities.css\"> <!-- クイックフィックス用のユーティリティ クラス -->\n<\/head>\n\n \n\n\n\n<h3>\n \n \n 參考文獻(xiàn):\n<\/h3>\n\n<\/pre>\n<ul>\n<li>\nBEM - Block Element Modifier - CSS クラスに名前を付け、スタイルを構(gòu)築して再利用性と保守性を向上させるための一般的な方法論。<\/li>\n<li>\nSMACSS - CSS のスケーラブルなモジュラー アーキテクチャ - CSS を論理的で保守可能なカテゴリに編成するための詳細(xì)なフレームワーク。<\/li>\n<li>\nCSS ガイドライン (Harry Roberts 著) - 論理ファイル構(gòu)造と命名規(guī)則を備えた、スケーラブルで保守可能な CSS を作成するための高品質(zhì)なガイド。<\/li>\n<\/ul>\n\n\n<hr>\n\n<h2>\n \n \n 構(gòu)築する時(shí)間です! ?\n<\/h2>\n\n<p>今度はあなたが學(xué)んだことを?qū)g踐する番です!あなたの課題は次のとおりです:<\/p>\n<ul>\n<li>新しい CodePen を作成します (codepen.io で無料です)<\/li>\n<li>これまでに取り上げた例と演習(xí)を構(gòu)築します<\/li>\n<li>\n<strong>あなたの作品を共有してください!<\/strong> 以下のコメントに CodePen のリンクをドロップしてください<\/li>\n<\/ul>\n\n<p><strong>ボーナスポイント<\/strong>: デザインに獨(dú)自のクリエイティブなひねりを加えましょう!コメントで共有されたすべての CodePen を個(gè)人的に確認(rèn)して返信します。<\/p>\n\n<p>? <strong>プロのヒント<\/strong>: 自分の考えを説明するために、CSS にコメントを忘れずに追加してください。他の人があなたのコードから學(xué)ぶのに役立ちます!<\/p>\n\n\n<hr>\n\n<h2>\n \n \n 次は何ですか? ?\n<\/h2>\n\n<p>これは CSS Zero to Hero シリーズのパート 2 です。今後の投稿では、さらにエキサイティングな CSS の概念をさらに詳しく掘り下げていきます。お見逃しのないようにご注意ください:<\/p>\n\n<ol>\n<li>? <strong>この投稿をブックマーク<\/strong>すると、コーディング時(shí)にすぐに參照できます<\/li>\n<li>?? <strong>役に立ったと思ったら、この記事にいいね!<\/strong> (他の人も見つけやすくなります!)<\/li>\n<li>? <strong>フォローしてください<\/strong> シリーズの次の部分をご覧ください<\/li>\n<\/ol>\n\n<h3>\n \n \n つながろう！ ?\n<\/h3>\n\n<p>エクササイズは試しましたか？ご質(zhì)問がありますか?コメントであなたの経験を共有してください！私はすべてのコメントに返信し、あなたの進(jìn)歩を見るのが大好きです。<\/p>\n\n<p>パート 3 でお會(huì)いしましょう!コーディングを楽しんでください! ??????<\/p>\n\n\n \n\n \n \n\n \n "} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://m.miracleart.cn/ja/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="コミュニティ" class="head_nava head_nava-template1">コミュニティ</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/ja/article.html" title="記事" class="languagechoosea on">記事</a>
<a href="http://m.miracleart.cn/ja/faq/zt" title="トピックス" class="languagechoosea">トピックス</a>
<a href="http://m.miracleart.cn/ja/wenda.html" title="に質(zhì)問" class="languagechoosea">に質(zhì)問</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學(xué)ぶ" class="head_nava head_nava-template1_1">學(xué)ぶ</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/ja/course.html" title="コース" class="languagechoosea on">コース</a>
<a href="http://m.miracleart.cn/ja/dic/" title="プログラミング辭典" class="languagechoosea">プログラミング辭典</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="ツールライブラリ" class="head_nava head_nava-template1_2">ツールライブラリ</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/ja/toolset/development-tools" title="開発ツール" class="languagechoosea on">開発ツール</a>
<a href="http://m.miracleart.cn/ja/toolset/website-source-code" title="公式サイト" class="languagechoosea">公式サイト</a>
<a href="http://m.miracleart.cn/ja/toolset/php-libraries" title="PHP ライブラリ" class="languagechoosea">PHP ライブラリ</a>
<a href="http://m.miracleart.cn/ja/toolset/js-special-effects" title="JS特殊効果" class="languagechoosea on">JS特殊効果</a>
<a href="http://m.miracleart.cn/ja/toolset/website-materials" title="サイト素材" class="languagechoosea on">サイト素材</a>
<a href="http://m.miracleart.cn/ja/toolset/extension-plug-ins" title="拡張プラグイン" class="languagechoosea on">拡張プラグイン</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/ja/ai" title="AIツール" class="head_nava head_nava-template1_3">AIツール</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="レジャー" class="head_nava head_nava-template1_3">レジャー</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/ja/game" title="ゲームのダウンロード" class="languagechoosea on">ゲームのダウンロード</a>
<a href="http://m.miracleart.cn/ja/mobile-game-tutorial/" title="ゲームのチュートリアル" class="languagechoosea">ゲームのチュートリアル</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ja')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="検索" onclick="searchs('ja')"><img src="/static/imghw/find.png" alt="検索"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">日本語<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:;" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://m.miracleart.cn/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/ja/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSSチュートリアル</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/ja/member/1468492.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8147b1057383.png" src="/static/imghw/default1.png" alt="Mary-Kate Olsen">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://m.miracleart.cn/ja/member/1468492.html" class="author_name">Mary-Kate Olsen</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 03, 2025 pm 03:09 PM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173588818469095.jpg" class="lazy" alt="Mastering CSS in The Definitive CSS Guide for Everyone | Part-2"></p>
<h2>
目次
</h2>
<div><table>
<thead>
<tr>
<th>No.</th>
<th>Section</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Responsive Design Principles</td>
<td>Link</td>
</tr>
<tr>
<td>2</td>
<td>CSS Variables and Custom Properties</td>
<td>Link</td>
</tr>
<tr>
<td>3</td>
<td>Animations and Transitions</td>
<td>Link</td>
</tr>
<tr>
<td>4</td>
<td>Best Practices and Organization</td>
<td>Link</td>
</tr>
</tbody>
</table></div>
<hr>
<h2>
レスポンシブデザインの原則
</h2>
<p>今日のマルチデバイスの世界では、レスポンシブ デザインはオプションではなく、不可欠です。あなたのウェブサイトは、スマートフォンで見ても、デスクトップの大きなモニターで見ても、見栄えが良くなければなりません。</p>
<h3>
メディアクエリ
</h3>
<p>メディア クエリはレスポンシブ デザインのスーパーパワーです:<br>
</p>
<pre class="brush:php;toolbar:false">/* Mobile-first approach */
.container {
width: 100%;
padding: 10px;
}
/* Tablet and larger */
@media screen and (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Desktop */
@media screen and (min-width: 1024px) {
.container {
width: 960px;
}
}
</pre>
<h3>
対応ユニット
</h3>
<p>相対単位を使用すると、デザインが自然に応答性の高いものになります:</p>
<ul>
<li>
<strong>rem</strong>: ルート要素のフォント サイズとの相対値</li>
<li>
<strong>em</strong>: 親要素のフォント サイズを基準(zhǔn)</li>
<li>
<strong>vw/vh</strong>: ビューポートの寸法を基準(zhǔn)</li>
<li>
<strong>%</strong>: 親要素のサイズに対する相対値</li>
</ul>
<h2>
実踐演習(xí): レスポンシブ サービス セクション
</h2>
<p>メディア クエリと柔軟なユニットを使用して、さまざまな畫面サイズにシームレスに適応する応答性の高いサービス セクションを作成します。</p>
<p>HTML:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>CSS:<br>
</p>
<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.services-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.service-card {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Tablet */
@media (min-width: 768px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 20px);
}
}
/* Desktop */
@media (min-width: 1024px) {
.service-card {
flex: 1;
}
button {
width: auto;
padding: 10px 20px;
}
}
</pre>
<p>CSS: サービス セクションのより具體的なブレークポイントを見てみましょう。<br>
</p>
<pre class="brush:php;toolbar:false">/* Base styles - Mobile First (320px and up) */
.services {
padding: 15px;
max-width: 1200px;
margin: 0 auto;
overflow-x: hidden; /* Prevent horizontal scroll */
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}
.services-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.service-card {
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}
button {
width: 100%;
padding: 8px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
/* Small phones (375px and up) */
@media (min-width: 375px) {
.services {
padding: 20px;
}
.service-card {
padding: 20px;
}
}
/* Large phones (480px and up) */
@media (min-width: 480px) {
.services-container {
gap: 20px;
}
button {
padding: 10px;
font-size: 16px;
}
}
/* Small tablets (600px and up) */
@media (min-width: 600px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
}
}
/* Tablets (768px and up) */
@media (min-width: 768px) {
.services {
padding: 30px;
}
.service-card {
padding: 25px; /* Improved spacing for larger screens */
}
button: hover {
/* Add hover effect for non-touch devices */
background: #0056b3;
transform: translateY(-2px);
}
}
/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
.service-card {
flex: 1; /* Three cards per row */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
button {
/* Change to inline button */
width: auto;
padding: 10px 20px;
}
}
/* Desktops (1200px and up) */
@media (min-width: 1200px) {
.services {
padding: 40px;
}
.services-container {
gap: 30px;
}
.service-card {
padding: 30px;
}
}
/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
.services {
max-width: 1400px; /* Max width to maintain readability */
}
.service-card {
padding: 35px; /* Larger padding for extra large screens */
}
}
/* Print styles */
@media print {
.services {
padding: 0;
}
.service-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
button {
display: none;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.service-card,
button {
transition: none;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.service-card {
background: #2a2a2a;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
h2 {
color: #fff;
}
}
</pre>
<h3>
參考文獻(xiàn):
</h3>
<ul>
<li>
MDN Web ドキュメント - レスポンシブ デザインの基礎(chǔ) - ビューポート、ブレークポイント、柔軟なレイアウトをカバーする、レスポンシブ デザインの概念への優(yōu)れた入門書です。</li>
<li>
FreeCodeCamp - レスポンシブ Web デザイン認(rèn)定資格 - レスポンシブ デザインの原則、グリッド、メディア クエリ、アクセシビリティをカバーする完全なコース。</li>
<li>
使用できますか - メディア クエリやフレックスボックスなどのレスポンシブ デザイン機(jī)能に対するブラウザの互換性を確認(rèn)します。</li>
<li>
レスポンシブ デザインのチートシート - レスポンシブ デザインの主要なプロパティとテクニックを理解しやすい形式でカバーしています。</li>
</ul>
<hr>
<h2>
CSS 変數(shù)とカスタム プロパティ
</h2>
<p>CSS 変數(shù) (カスタム プロパティ) は、スタイルシートにプログラミングのような柔軟性をもたらします。メンテナンスが容易になり、ダイナミックなスタイリングが可能になります。<br>
</p>
<pre class="brush:php;toolbar:false">:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--spacing-unit: 1rem;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-unit);
}
</pre>
<h2>
実踐的な演習(xí): テーマと再利用性のための CSS 変數(shù)
</h2>
<pre class="brush:php;toolbar:false"><body>
<header>
<h1>CSS Variables & Custom Properties</h1>
</header>
<main>
<section>
<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
:root {
--primary-color: #3498db; /* Main theme color */
--secondary-color: #2ecc71; /* Accent color */
--text-color: #333; /* Default text color */
--font-size: 16px; /* Base font size */
--padding: 10px; /* Base padding */
}
/* General styles using variables */
body {
font-family: Arial, sans-serif;
font-size: var(--font-size);
color: var(--text-color);
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: var(--primary-color);
color: white;
text-align: center;
padding: var(--padding);
}
.card {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
margin: 20px;
padding: var(--padding);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card h2 {
color: var(--primary-color);
}
.card p {
color: var(--text-color);
}
button {
background-color: var(--secondary-color);
color: white;
border: none;
border-radius: 5px;
padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
cursor: pointer;
font-size: var(--font-size);
}
button:hover {
background-color: var(--primary-color);
}
/* Dark mode example by overriding variables */
body.dark-mode {
--primary-color: #1abc9c;
--secondary-color: #e74c3c;
--text-color: #f9f9f9;
background-color: #333;
}
</pre>
<h3>
參考文獻(xiàn):
</h3>
<ul>
<li>
MDN Web ドキュメント - CSS カスタム プロパティ (変數(shù)) の使用 - CSS 変數(shù)の定義、使用、更新に関する例を示した、初心者向けの徹底した説明です。</li>
<li>
W3Schools - CSS 変數(shù) - 簡(jiǎn)単な練習(xí)用のライブ コード例を使用して CSS 変數(shù)の基本をカバーします。</li>
<li>
CSS のトリック - カスタム プロパティの完全ガイド - 実際の使用例と高度な変數(shù)の使用に関するヒントを紹介する包括的なガイドです。</li>
<li>
Freecodecamp - CSS 変數(shù)フル ハンドブック - カスケード効果、メディア クエリベースの変數(shù)、スコープ管理などの強(qiáng)力なテクニックを探ります。</li>
</ul>
<hr>
<h2>
アニメーションとトランジション
</h2>
<p>Web サイトに動(dòng)きを加えると、魅力的なユーザー エクスペリエンスが生まれます。 CSS では、アニメーションを作成する主な方法が 2 つあります:</p>
<h3>
トランジション
</h3>
<p>単純な狀態(tài)変更に最適:<br>
</p><pre class="brush:php;toolbar:false">/* Mobile-first approach */
.container {
width: 100%;
padding: 10px;
}
/* Tablet and larger */
@media screen and (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Desktop */
@media screen and (min-width: 1024px) {
.container {
width: 960px;
}
}
</pre>
<h3>
キーフレームアニメーション
</h3>
<p>より複雑な複數(shù)ステップのアニメーションの場(chǎng)合:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>CSS:<br>
</p>
<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.services-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.service-card {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Tablet */
@media (min-width: 768px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 20px);
}
}
/* Desktop */
@media (min-width: 1024px) {
.service-card {
flex: 1;
}
button {
width: auto;
padding: 10px 20px;
}
}
</pre>
<h3>
高度なアニメーション技術(shù)
</h3>
<p>アニメーションの CSS カスタム プロパティ:<br>
</p>
<pre class="brush:php;toolbar:false">/* Base styles - Mobile First (320px and up) */
.services {
padding: 15px;
max-width: 1200px;
margin: 0 auto;
overflow-x: hidden; /* Prevent horizontal scroll */
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}
.services-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.service-card {
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}
button {
width: 100%;
padding: 8px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
/* Small phones (375px and up) */
@media (min-width: 375px) {
.services {
padding: 20px;
}
.service-card {
padding: 20px;
}
}
/* Large phones (480px and up) */
@media (min-width: 480px) {
.services-container {
gap: 20px;
}
button {
padding: 10px;
font-size: 16px;
}
}
/* Small tablets (600px and up) */
@media (min-width: 600px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
}
}
/* Tablets (768px and up) */
@media (min-width: 768px) {
.services {
padding: 30px;
}
.service-card {
padding: 25px; /* Improved spacing for larger screens */
}
button: hover {
/* Add hover effect for non-touch devices */
background: #0056b3;
transform: translateY(-2px);
}
}
/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
.service-card {
flex: 1; /* Three cards per row */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
button {
/* Change to inline button */
width: auto;
padding: 10px 20px;
}
}
/* Desktops (1200px and up) */
@media (min-width: 1200px) {
.services {
padding: 40px;
}
.services-container {
gap: 30px;
}
.service-card {
padding: 30px;
}
}
/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
.services {
max-width: 1400px; /* Max width to maintain readability */
}
.service-card {
padding: 35px; /* Larger padding for extra large screens */
}
}
/* Print styles */
@media print {
.services {
padding: 0;
}
.service-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
button {
display: none;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.service-card,
button {
transition: none;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.service-card {
background: #2a2a2a;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
h2 {
color: #fff;
}
}
</pre>
<h3>
高度なキーフレーム アニメーション:
</h3>
<pre class="brush:php;toolbar:false">:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--spacing-unit: 1rem;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-unit);
}
</pre>
<h2>
実踐演習(xí): インタラクティブカード
</h2>
<p>ホバー効果のあるインタラクティブなカードを作成します:</p>
<p>HTML:<br>
</p><pre class="brush:php;toolbar:false">/* Mobile-first approach */
.container {
width: 100%;
padding: 10px;
}
/* Tablet and larger */
@media screen and (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Desktop */
@media screen and (min-width: 1024px) {
.container {
width: 960px;
}
}
</pre>
<h3>
參考文獻(xiàn):
</h3>
<ul>
<li>
MDN Web ドキュメント - CSS トランジション - CSS トランジションの明確な入門書であり、スタイルを変更するときにスムーズな効果を作成する方法を説明しています。</li>
<li>
MDN Web ドキュメント - CSS アニメーション - キーフレーム、アニメーション プロパティ、複雑なアニメーションの作成に関するステップバイステップ ガイド。</li>
<li>
W3Schools - CSS トランジション - トランジションとアニメーションをインタラクティブに練習(xí)できるライブ コード エディターを備えた初心者向け。</li>
<li>
W3Schools - CSS アニメーション - キーフレームとトランジションを使用して Web サイトにアニメーションを追加するためのわかりやすいガイドです。</li>
<li>
CSS トリック - アニメーション - 応答性の高いアニメーション、アクセシビリティのためのモーションの削減、メディア クエリの統(tǒng)合について説明します。</li>
<li>
Animate.css - プロジェクトに簡(jiǎn)単に追加できる、事前に構(gòu)築されたアニメーションを提供する人気の CSS ライブラリです。</li>
</ul>
<hr>
<h2>
ベストプラクティスと組織
</h2>
<h3>
CSS アーキテクチャ
</h3>
<ul>
<li>一貫した命名規(guī)則を使用する</li>
<li>コンポーネント/機(jī)能ごとに CSS ファイルを整理します</li>
<li>可能な限り特異性を低く保ちます</li>
<li>コードを効果的にコメント化する
</li>
</ul>
<pre class="brush:php;toolbar:false"><section>
<p>CSS:<br>
</p>
<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.services-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.service-card {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Tablet */
@media (min-width: 768px) {
.services-container {
flex-direction: row;
flex-wrap: wrap;
}
.service-card {
flex: 0 1 calc(50% - 20px);
}
}
/* Desktop */
@media (min-width: 1024px) {
.service-card {
flex: 1;
}
button {
width: auto;
padding: 10px 20px;
}
}
</pre>
<h2>
実踐的な演習(xí): CSS アーキテクチャのベスト プラクティス
</h2>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="ja">
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>CSS アーキテクチャ演習(xí)</title>
<リンク rel="スタイルシート" href="styles/reset.css"> <!-- デフォルトのブラウザスタイルをリセットします -->
<リンク rel="スタイルシート" href="styles/layout.css"> <!-- レイアウト関連のスタイル -->
<リンク rel="スタイルシート" href="styles/components/header.css"> <!-- ヘッダーコンポーネントのスタイル -->
<リンク rel="スタイルシート" href="styles/components/card.css"> <!-- カード コンポーネント スタイル -->
<リンク rel="スタイルシート" href="styles/utilities.css"> <!-- クイックフィックス用のユーティリティ クラス -->
</head>
<h3>
參考文獻(xiàn):
</h3>
</pre>
<ul>
<li>
BEM - Block Element Modifier - CSS クラスに名前を付け、スタイルを構(gòu)築して再利用性と保守性を向上させるための一般的な方法論。</li>
<li>
SMACSS - CSS のスケーラブルなモジュラー アーキテクチャ - CSS を論理的で保守可能なカテゴリに編成するための詳細(xì)なフレームワーク。</li>
<li>
CSS ガイドライン (Harry Roberts 著) - 論理ファイル構(gòu)造と命名規(guī)則を備えた、スケーラブルで保守可能な CSS を作成するための高品質(zhì)なガイド。</li>
</ul>
<hr>
<h2>
構(gòu)築する時(shí)間です! ?
</h2>
<p>今度はあなたが學(xué)んだことを?qū)g踐する番です!あなたの課題は次のとおりです:</p>
<ul>
<li>新しい CodePen を作成します (codepen.io で無料です)</li>
<li>これまでに取り上げた例と演習(xí)を構(gòu)築します</li>
<li>
<strong>あなたの作品を共有してください!</strong> 以下のコメントに CodePen のリンクをドロップしてください</li>
</ul>
<p><strong>ボーナスポイント</strong>: デザインに獨(dú)自のクリエイティブなひねりを加えましょう!コメントで共有されたすべての CodePen を個(gè)人的に確認(rèn)して返信します。</p>
<p>? <strong>プロのヒント</strong>: 自分の考えを説明するために、CSS にコメントを忘れずに追加してください。他の人があなたのコードから學(xué)ぶのに役立ちます!</p>
<hr>
<h2>
次は何ですか? ?
</h2>
<p>これは CSS Zero to Hero シリーズのパート 2 です。今後の投稿では、さらにエキサイティングな CSS の概念をさらに詳しく掘り下げていきます。お見逃しのないようにご注意ください:</p>
<ol>
<li>? <strong>この投稿をブックマーク</strong>すると、コーディング時(shí)にすぐに參照できます</li>
<li>?? <strong>役に立ったと思ったら、この記事にいいね!</strong> (他の人も見つけやすくなります!)</li>
<li>? <strong>フォローしてください</strong> シリーズの次の部分をご覧ください</li>
</ol>
<h3>
つながろう！ ?
</h3>
<p>エクササイズは試しましたか？ご質(zhì)問がありますか?コメントであなたの経験を共有してください！私はすべてのコメントに返信し、あなたの進(jìn)歩を見るのが大好きです。</p>
<p>パート 3 でお會(huì)いしましょう!コーディングを楽しんでください! ??????</p>
<p>以上が誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796828723.html" title="Agnes Tachyonビルドガイド|かなりのダービーズメソム" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyonビルドガイド|かなりのダービーズメソム</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796827210.html" title="Oguri Cap Build Guide |かなりのダービーズメソム" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |かなりのダービーズメソム</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796821278.html" title="すべての日付：ダークとハーパーの関係ガイド" class="phpgenera_Details_mainR4_bottom_title">すべての日付：ダークとハーパーの関係ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796821436.html" title="砂丘：目覚め - 高度な惑星科醫(yī)クエストウォークスルー" class="phpgenera_Details_mainR4_bottom_title">砂丘：目覚め - 高度な惑星科醫(yī)クエストウォークスルー</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796821868.html" title="Palia：RasquellywagのRiches Questウォークスルー" class="phpgenera_Details_mainR4_bottom_title">Palia：RasquellywagのRiches Questウォークスルー</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットAIツール</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>脫衣畫像を無料で</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>リアルなヌード寫真を作成する AI 搭載アプリ</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>寫真から衣服を削除するオンライン AI ツール。</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類リムーバー</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796828723.html" title="Agnes Tachyonビルドガイド|かなりのダービーズメソム" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyonビルドガイド|かなりのダービーズメソム</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796827210.html" title="Oguri Cap Build Guide |かなりのダービーズメソム" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |かなりのダービーズメソム</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796821278.html" title="すべての日付：ダークとハーパーの関係ガイド" class="phpgenera_Details_mainR4_bottom_title">すべての日付：ダークとハーパーの関係ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796821436.html" title="砂丘：目覚め - 高度な惑星科醫(yī)クエストウォークスルー" class="phpgenera_Details_mainR4_bottom_title">砂丘：目覚め - 高度な惑星科醫(yī)クエストウォークスルー</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/1796821868.html" title="Palia：RasquellywagのRiches Questウォークスルー" class="phpgenera_Details_mainR4_bottom_title">Palia：RasquellywagのRiches Questウォークスルー</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットツール</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
<h3>メモ帳++7.3.1</h3>
</a>
<p>使いやすく無料のコードエディター</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國語版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中國語版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國語版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中國語版</h3>
</a>
<p>中國語版、とても使いやすい</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
<h3>ゼンドスタジオ 13.0.1</h3>
</a>
<p>強(qiáng)力な PHP 統(tǒng)合開発環(huán)境</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神レベルのコード編集ソフト（SublimeText3）</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>ホットトピック</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8640</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/java-tutorial" title="Java チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Java チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1786</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1729</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1581</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1448</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ja/faq/zt">もっと見る</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ja/faq/1796823628.html" title="「レンダリングブロッキングCSS」とは何ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="「レンダリングブロッキングCSS」とは何ですか？" />
</a>
<a href="http://m.miracleart.cn/ja/faq/1796823628.html" title="「レンダリングブロッキングCSS」とは何ですか？" class="phphistorical_Version2_mids_title">「レンダリングブロッキングCSS」とは何ですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">ブラウザは、特にインポートされたスタイルシート、ヘッダーのインラインCSS、および最適化されていないメディアクエリスタイルを使用して、ブラウザがインラインおよび外部CSSをデフォルトで主要なリソースとして表示するため、ページレンダリングをブロックします。 1.重要なCSSを抽出し、HTMLに埋め込みます。 2。JavaScriptを介して非クリティカルなCSSの読み込みを遅らせる。 3.メディア屬性を使用して、印刷スタイルなどのロードを最適化します。 4.リクエストを減らすためにCSSを圧縮およびマージします。ツールを使用してキーCSSを抽出し、REL = "Preload"非同期負(fù)荷を組み合わせ、過度の分割と複雑なスクリプト制御を避けるためにメディア遅延荷重を合理的に使用することをお?jiǎng)幛幛筏蓼埂?/p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ja/faq/1796822133.html" title="外部対內(nèi)部CSS：最良のアプローチは何ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="外部対內(nèi)部CSS：最良のアプローチは何ですか？" />
</a>
<a href="http://m.miracleart.cn/ja/faq/1796822133.html" title="外部対內(nèi)部CSS：最良のアプローチは何ですか？" class="phphistorical_Version2_mids_title">外部対內(nèi)部CSS：最良のアプローチは何ですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">TheBestAppRoachforCSDependsonTheProject'sSpecificNeeds.forLargerProjects、externalCssissisbetterduetoMaintainasiladability; forsmallerProjectsOrsingLe-PageApplications、internalcsSmightBemoresuitable.it</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ja/faq/1796821588.html" title="私のCSSは小文字でなければなりませんか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="私のCSSは小文字でなければなりませんか？" />
</a>
<a href="http://m.miracleart.cn/ja/faq/1796821588.html" title="私のCSSは小文字でなければなりませんか？" class="phphistorical_Version2_mids_title">私のCSSは小文字でなければなりませんか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">いいえ、CSSDOESNOTHAVETOBEINLOWERCASE。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ja/faq/1796821998.html" title="CSSケース感度：重要なことを理解する" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSケース感度：重要なことを理解する" />
</a>
<a href="http://m.miracleart.cn/ja/faq/1796821998.html" title="CSSケース感度：重要なことを理解する" class="phphistorical_Version2_mids_title">CSSケース感度：重要なことを理解する</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">cssismostlycase-inssensitive、buturlsandfontfamilynamesarecase-sensitive.1）propertiesandvalueslikecolor：red; areotcase-sensitive.2）urlsmustmatchtheserver'scase、例えば、/畫像/logo.png.3）</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ja/faq/1796828180.html" title="Autoprefixerとは何ですか？それはどのように機(jī)能しますか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Autoprefixerとは何ですか？それはどのように機(jī)能しますか？" />
</a>
<a href="http://m.miracleart.cn/ja/faq/1796828180.html" title="Autoprefixerとは何ですか？それはどのように機(jī)能しますか？" class="phphistorical_Version2_mids_title">Autoprefixerとは何ですか？それはどのように機(jī)能しますか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">Autoprefixerは、ターゲットブラウザスコープに基づいてCSS屬性にベンダープレフィックスを自動(dòng)的に追加するツールです。 1.エラーで接頭辭を手動(dòng)で維持する問題を解決します。 2. PostCSSプラグインフォーム、CSSを解析し、プレフィックスする必要がある屬性を分析し、構(gòu)成に従ってコードを生成する屬性を分析します。 3.使用手順には、プラグインのインストール、ブラウザーリストの設(shè)定、ビルドプロセスでそれらを有効にすることが含まれます。 4。メモには、接頭辭を手動(dòng)で追加しない、構(gòu)成の更新を保持すること、すべての屬性ではなくプレフィックスを維持することが含まれ、プリ??プロセッサでそれらを使用することをお?jiǎng)幛幛筏蓼埂?/p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ja/faq/1796821606.html" title="CSSカウンターとは何ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSカウンターとは何ですか？" />
</a>
<a href="http://m.miracleart.cn/ja/faq/1796821606.html" title="CSSカウンターとは何ですか？" class="phphistorical_Version2_mids_title">CSSカウンターとは何ですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">csScountersCantAnationally-bersectionSandLists.1）usecounter-resettoinitialize、counter-incrementtoincrease、andcounter（）orcounters（）todisplayvalues.2）を組み合わせたjavascriptfordynamiccontenttoensureaCurateupdatesと組み合わせます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ja/faq/1796821580.html" title="CSS：ケースはいつ重要ですか（いつそうではありませんか）？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS：ケースはいつ重要ですか（いつそうではありませんか）？" />
</a>
<a href="http://m.miracleart.cn/ja/faq/1796821580.html" title="CSS：ケースはいつ重要ですか（いつそうではありませんか）？" class="phphistorical_Version2_mids_title">CSS：ケースはいつ重要ですか（いつそうではありませんか）？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">CSSでは、セレクターと屬性名はケースに敏感ですが、値、名前の色、URL、およびカスタム屬性はケースに敏感です。 1.バックグラウンドカラーや背景色など、セレクターと屬性名はケース非感受性です。 2。値の16進(jìn)數(shù)色は大文字と小文字を區(qū)別しますが、赤と赤などの名前の色は無効です。 3. URLは癥例に敏感であり、ファイルロードの問題を引き起こす可能性があります。 4.カスタムプロパティ（変數(shù)）はケースに敏感であり、使用する場(chǎng)合はケースの一貫性に注意を払う必要があります。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/ja/faq/1796827610.html" title="conic-gradient（）関數(shù)とは何ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175130377175874.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="conic-gradient（）関數(shù)とは何ですか？" />
</a>
<a href="http://m.miracleart.cn/ja/faq/1796827610.html" title="conic-gradient（）関數(shù)とは何ですか？" class="phphistorical_Version2_mids_title">conic-gradient（）関數(shù)とは何ですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:16 AM</span>
<p class="Articlelist_txts_p">TheConic-Gradient（）functionsscreateScular勾配の勾配は、測(cè)定されていることを確認(rèn)してください</p>
</div>
</div>
<a href="http://m.miracleart.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 學(xué)習(xí)者の迅速な成長(zhǎng)を支援します！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://m.miracleart.cn/ja/about/us.html">私たちについて</a>
<a href="http://m.miracleart.cn/ja/about/disclaimer.html">免責(zé)事項(xiàng)</a>
<a href="http://m.miracleart.cn/ja/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="mep98" class="pl_css_ganrao" style="display: none;"><menuitem id="mep98"><nobr id="mep98"><tr id="mep98"></tr></nobr></menuitem><table id="mep98"><wbr id="mep98"><ul id="mep98"></ul></wbr></table><samp id="mep98"></samp><pre id="mep98"><strong id="mep98"><dd id="mep98"></dd></strong></pre><s id="mep98"></s><delect id="mep98"></delect><em id="mep98"><pre id="mep98"><b id="mep98"></b></pre></em><dfn id="mep98"><listing id="mep98"><dfn id="mep98"><menu id="mep98"></menu></dfn></listing></dfn><fieldset id="mep98"><output id="mep98"><fieldset id="mep98"><option id="mep98"></option></fieldset></output></fieldset><rt id="mep98"></rt><fieldset id="mep98"><center id="mep98"><th id="mep98"></th></center></fieldset><address id="mep98"></address><tt id="mep98"></tt><button id="mep98"><input id="mep98"><xmp id="mep98"></xmp></input></button><tt id="mep98"></tt><xmp id="mep98"><label id="mep98"></label></xmp><rt id="mep98"></rt><small id="mep98"><tfoot id="mep98"><dfn id="mep98"></dfn></tfoot></small><ol id="mep98"><font id="mep98"><menu id="mep98"><delect id="mep98"></delect></menu></font></ol><s id="mep98"></s><label id="mep98"><center id="mep98"></center></label><menu id="mep98"></menu><acronym id="mep98"><noframes id="mep98"><center id="mep98"><optgroup id="mep98"></optgroup></center></noframes></acronym><strong id="mep98"></strong><tbody id="mep98"><meter id="mep98"></meter></tbody><pre id="mep98"></pre><font id="mep98"></font><li id="mep98"></li><nobr id="mep98"><tr id="mep98"><noframes id="mep98"><center id="mep98"></center></noframes></tr></nobr><dd id="mep98"><abbr id="mep98"></abbr></dd><ruby id="mep98"></ruby><acronym id="mep98"><s id="mep98"><abbr id="mep98"></abbr></s></acronym><fieldset id="mep98"><rp id="mep98"></rp></fieldset><track id="mep98"><tfoot id="mep98"><noframes id="mep98"></noframes></tfoot></track><input id="mep98"><em id="mep98"></em></input><fieldset id="mep98"></fieldset><strike id="mep98"></strike><tt id="mep98"></tt><em id="mep98"><pre id="mep98"><em id="mep98"><s id="mep98"></s></em></pre></em><tfoot id="mep98"></tfoot><tr id="mep98"><noframes id="mep98"><thead id="mep98"></thead></noframes></tr><menu id="mep98"><dd id="mep98"></dd></menu><bdo id="mep98"><center id="mep98"><optgroup id="mep98"></optgroup></center></bdo><dd id="mep98"></dd><s id="mep98"></s><rt id="mep98"><small id="mep98"></small></rt><strong id="mep98"><dfn id="mep98"><listing id="mep98"></listing></dfn></strong><pre id="mep98"><em id="mep98"><s id="mep98"><form id="mep98"></form></s></em></pre><strong id="mep98"></strong><td id="mep98"></td><fieldset id="mep98"></fieldset><legend id="mep98"><li id="mep98"><tbody id="mep98"><th id="mep98"></th></tbody></li></legend><optgroup id="mep98"></optgroup><b id="mep98"><source id="mep98"></source></b><acronym id="mep98"></acronym><dl id="mep98"><sup id="mep98"><input id="mep98"></input></sup></dl><dd id="mep98"><small id="mep98"><progress id="mep98"></progress></small></dd><xmp id="mep98"><li id="mep98"><tbody id="mep98"></tbody></li></xmp><acronym id="mep98"></acronym><pre id="mep98"></pre><em id="mep98"></em><abbr id="mep98"><div id="mep98"></div></abbr><pre id="mep98"></pre><dfn id="mep98"></dfn><tr id="mep98"><noframes id="mep98"><thead id="mep98"></thead></noframes></tr><s id="mep98"><samp id="mep98"><source id="mep98"></source></samp></s><bdo id="mep98"><mark id="mep98"><strong id="mep98"><center id="mep98"></center></strong></mark></bdo><mark id="mep98"></mark><input id="mep98"></input><meter id="mep98"></meter><option id="mep98"></option><kbd id="mep98"><strong id="mep98"><rp id="mep98"></rp></strong></kbd><small id="mep98"></small><s id="mep98"></s><nobr id="mep98"><acronym id="mep98"><noframes id="mep98"><center id="mep98"></center></noframes></acronym></nobr><video id="mep98"></video><noframes id="mep98"></noframes><listing id="mep98"></listing><center id="mep98"><label id="mep98"><center id="mep98"></center></label></center><button id="mep98"></button><dfn id="mep98"></dfn><strong id="mep98"></strong><kbd id="mep98"></kbd><rt id="mep98"></rt><xmp id="mep98"></xmp><sup id="mep98"></sup><dl id="mep98"><video id="mep98"></video></dl><input id="mep98"><del id="mep98"><p id="mep98"></p></del></input><small id="mep98"><progress id="mep98"></progress></small><bdo id="mep98"><meter id="mep98"></meter></bdo><fieldset id="mep98"></fieldset><blockquote id="mep98"><pre id="mep98"><blockquote id="mep98"></blockquote></pre></blockquote><table id="mep98"><xmp id="mep98"><input id="mep98"></input></xmp></table><input id="mep98"></input><rp id="mep98"><th id="mep98"><noframes id="mep98"></noframes></th></rp><acronym id="mep98"></acronym><xmp id="mep98"></xmp><bdo id="mep98"></bdo><td id="mep98"></td><em id="mep98"><pre id="mep98"><em id="mep98"><td id="mep98"></td></em></pre></em></div>
</html>