| | |
<![CDATA[<track id="4hdsy"></track>]]>
|
| | |
|
|
<![CDATA[<abbr id="4hdsy"><strike id="4hdsy"></strike></abbr>]]> | | |
VSCode ウィンドウの右下隅に、ライブ配信<\/strong> ボタンがあることに注意してください。<\/p>\n\n![\"Fundamentals](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617271945701.jpg\")
<\/p>\n\n
このボタンをクリックすると、Live Server<\/strong> 拡張機能が有効になります。ローカル開発サーバーが起動し、作成したばかりのindex.htmlファイルをホストします。<\/p>\n\n![\"Fundamentals](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617272021543.jpg\")
<\/p>\n\n
もちろん、現(xiàn)時點ではファイルはまだ空なので、何も表示されません。
の間に何かを追加します。 <\/body>タグ。
\n<\/p>\n\n\n\n \n \n \n Document<\/title>\n <\/head>\n <body>\n Hello, world!\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>変更を保存すると、Web ページが新しいコンテンツで自動的に更新されます。<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617272129442.jpg\" alt=\"Fundamentals of HTML and CSS\"><\/p>\n\n<h2>\n \n \n HTML文書の構(gòu)造\n<\/h2>\n\n<p>典型的な HTML ドキュメントは常に次の構(gòu)造を持っています:<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n . . .\n <\/head>\n <body>\n . . .\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p><!DOCTYPE html>タグはドキュメントの種類を定義します。 Web ブラウザは <!DOCTYPE html> に遭遇すると、HTML 標準の最新バージョンである HTML5 の仕様に従ってページを解析して表示する必要があることを理解します。これにより、最新のブラウザが Web ページのコンテンツとレイアウトを正しく解釈できるようになります。<\/p>\n\n<p>ファイル內(nèi)のその他すべては <html> で囲む必要があります。要素。開始タグ (<html>) と終了タグ (<\/html>) で定義されます。<\/p>\n\n<p>lang は屬性と呼ばれ、値「en」を持ちます。これにより、ブラウザと検索エンジンに、この Web ページで使用される主言語が英語であることがわかります。<\/p>\n\n<p><html> 內(nèi)要素には、<\/p> という 2 つの子要素があります。そして。 HTML ドキュメントに関するメタデータとその他の情報が含まれています。この情報はブラウザには表示されませんが、SEO (検索エンジン最適化) の目的で検索エンジンによってよく使用されます。\n\n一方、<p><body> には、ユーザーに表示される Web ページのメイン コンテンツが含まれており、そのため、このコースで焦點を當てる HTML ファイルの部分でもあります。 .<\/p>\n\n<h2>\n \n \n 要素と屬性\n<\/h2>\n\n<p>前の例を詳しく見て、HTML ドキュメントが入れ子構(gòu)造のさまざまな要素で構(gòu)成されていることに注目してください。 HTML では、ほとんどの要素に開始タグと終了タグの両方があります:<br>\n<\/p>\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Document<\/title>\n <\/head>\n <body><\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>この場合、<タグ>は開始タグ、<\/tag> は開始タグです。は終了タグであり、これらが一緒になって HTML 要素を形成します。要素には、開始タグと終了タグの間にテキスト コンテンツを含めることができます。<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Document<\/title>\n <\/head>\n <body>\n Hello, world!\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>要素は他の要素を囲んで、入れ子構(gòu)造を形成することもできます。<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n . . .\n <\/head>\n <body>\n . . .\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>開始タグ內(nèi)で、クラス、ID などの要素に関する追加情報を指定するために使用される屬性を定義できます。<br>\n<\/p>\n\n<pre><tag>. . .<\/tag>\n<\/pre>\n\n\n\n<p>屬性は通常、キーと値のペアで構(gòu)成され、値は常に一致する引用符 (二重または一重) で囲む必要があります。<\/p>\n\n<p>これらの一般的な形式にはいくつかの例外があります。たとえば、<br>改行を作成する要素には終了タグは必要ありません。複數(shù)などの一部の屬性には値が必要ありません。これらの例外については、このコースの後半で遭遇したときに説明します。<\/p>\n\n<p>ただし、要素に終了タグが必要な場合は、決して省略しないでください。ほとんどの場合、Web ページは引き続き正しく表示されますが、HTML ドキュメントの構(gòu)造が複雑になるにつれて、予期しないエラーが発生する可能性があります。興味があれば、HTML と CSS を記述するためのベスト プラクティス ガイドラインをご覧ください。<\/p>\n\n<h2>\n \n \n さらに読む\n<\/h2>\n\n<ul>\n<li>カスケード スタイル シート (CSS) の紹介<\/li>\n<li>JavaScript の概要<\/li>\n<li>レスポンシブデザインとは<\/li>\n<li>HTML と CSS を使用してインタラクティブなフォームを構(gòu)築する方法<\/li>\n<\/ul>\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">
<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://www.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://www.miracleart.cn/ja/article.html" title="記事" class="languagechoosea on">記事</a>
<a href="http://www.miracleart.cn/ja/faq/zt" title="トピックス" class="languagechoosea">トピックス</a>
<a href="http://www.miracleart.cn/ja/wenda.html" title="に質(zhì)問" class="languagechoosea">に質(zhì)問</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學ぶ" class="head_nava head_nava-template1_1">學ぶ</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/course.html" title="コース" class="languagechoosea on">コース</a>
<a href="http://www.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://www.miracleart.cn/ja/toolset/development-tools" title="開発ツール" class="languagechoosea on">開発ツール</a>
<a href="http://www.miracleart.cn/ja/toolset/website-source-code" title="公式サイト" class="languagechoosea">公式サイト</a>
<a href="http://www.miracleart.cn/ja/toolset/php-libraries" title="PHP ライブラリ" class="languagechoosea">PHP ライブラリ</a>
<a href="http://www.miracleart.cn/ja/toolset/js-special-effects" title="JS特殊効果" class="languagechoosea on">JS特殊効果</a>
<a href="http://www.miracleart.cn/ja/toolset/website-materials" title="サイト素材" class="languagechoosea on">サイト素材</a>
<a href="http://www.miracleart.cn/ja/toolset/extension-plug-ins" title="拡張プラグイン" class="languagechoosea on">拡張プラグイン</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.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://www.miracleart.cn/ja/game" title="ゲームのダウンロード" class="languagechoosea on">ゲームのダウンロード</a>
<a href="http://www.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="簡體中文" class="languagechoosea">簡體中文</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://www.miracleart.cn/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ja/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSSチュートリアル</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>HTMLとCSSの基礎</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">HTMLとCSSの基礎</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ja/member/1468489.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8199266e8412.png" src="/static/imghw/default1.png" alt="Linda Hamilton">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ja/member/1468489.html" class="author_name">Linda Hamilton</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 06, 2025 pm 10:11 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>HTML と CSS は Web ページの最も基本的な構(gòu)成要素であり、Web 開発者になるための最初のステップでもあります。 HTML は Web ページのレイアウトとコンテンツを提供し、CSS はそのスタイルと外観を定義します。このチュートリアルでは、HTML と CSS の基本を説明します。最後には、あらゆるサイズのデバイスでシームレスに動作するレスポンシブ Web ページをデザインできるようになります。</p>
<h2>
HTMLとは何ですか?
</h2>
<p>HTML は、Web ページの作成に使用される標準のマークアップ言語です。見出し、段落、畫像、リンク、フォームなどの HTML 要素を使用して、Web ページの構(gòu)造とコンテンツを定義します。</p>
<p>HTML コードの作成を開始するには、以下の CodePen デモを使用できます。</p>
<p>コードデモ?</p>
<p>左側(cè)には HTML ソース コードが表示されます。これは基本的に、表示される內(nèi)容の設計図です。ブラウザはこのブループリントを右側(cè)に表示される Web ページに変換します。</p>
<p>ソース コードを直接変更して、表示される Web ページにどのような影響を與えるかを確認できます。</p>
<h2>
Web 開発用にコンピューターを準備する
</h2>
<p>もちろん、実際には、動作する完全な機能を備えた Web アプリケーションを作成するために CodePen などのツールに依存することはできません。もっと強力なものが必要なので、Web 開発用にコンピューターをセットアップしましょう。</p>
<p>まず、ブラウザがインストールされていることを確認してください。このコースには、Google Chrome、Microsoft Edge、Safari、Firefox などの一般的な Web ブラウザーで十分です。リンクされた Web サイトからブラウザをダウンロードしてインストールできます。</p>
<p>さらに、コードを作成および編集するにはコード エディターが必要です。 Visual Studio Code は、初心者 (さらに言えば専門家) にとって優(yōu)れたオプションです。世界で最も一般的に使用されているコード エディターです。公式 Web サイトからオペレーティング システムに適切なインストーラーをダウンロードするだけです。</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271157796.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>VSCode をインストールした後、必ず <strong>Live Server</strong> 拡張機能もインストールしてください。左側(cè)のサイドバーの <strong>拡張機能</strong> タブに移動し、検索ボックスに「<strong>ライブ サーバー</strong>」と入力します。そこから、拡張機能をダウンロードしてインストールできます。</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271255420.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p><strong>ライブサーバー</strong> は、自動リロード機能を備えたローカル開発サーバーを作成します。たとえば、新しい作業(yè)ディレクトリを作成し、VSCode を使用して開きます。</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271512988.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>このディレクトリの下に、index.html という名前の新しいファイルを作成します。 .html 拡張子は、これが HTML ドキュメントであることを示します。と入力してください！ VSCode で実行すると、次のような提案が表示されます:</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271776671.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>これは、HTML ドキュメントをすばやく作成するためのショートカットです。 ↑ または ↓ キーで移動できます。最初のオプションを選択すると、次のコードが生成されます。<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
</pre>
<p>VSCode ウィンドウの右下隅に、<strong>ライブ配信</strong> ボタンがあることに注意してください。</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271945701.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>このボタンをクリックすると、<strong>Live Server</strong> 拡張機能が有効になります。ローカル開発サーバーが起動し、作成したばかりのindex.htmlファイルをホストします。</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617272021543.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>もちろん、現(xiàn)時點ではファイルはまだ空なので、何も表示されません。 <body> の間に何かを追加します。
</body>タグ。<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
</pre>
<p>変更を保存すると、Web ページが新しいコンテンツで自動的に更新されます。</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617272129442.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<h2>
HTML文書の構(gòu)造
</h2>
<p>典型的な HTML ドキュメントは常に次の構(gòu)造を持っています:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
</pre>
<p><!DOCTYPE html>タグはドキュメントの種類を定義します。 Web ブラウザは <!DOCTYPE html> に遭遇すると、HTML 標準の最新バージョンである HTML5 の仕様に従ってページを解析して表示する必要があることを理解します。これにより、最新のブラウザが Web ページのコンテンツとレイアウトを正しく解釈できるようになります。</p>
<p>ファイル內(nèi)のその他すべては <html> で囲む必要があります。要素。開始タグ (<html>) と終了タグ (</html>) で定義されます。</p>
<p>lang は屬性と呼ばれ、値「en」を持ちます。これにより、ブラウザと検索エンジンに、この Web ページで使用される主言語が英語であることがわかります。</p>
<p><html> 內(nèi)要素には、</p> という 2 つの子要素があります。そして。 HTML ドキュメントに関するメタデータとその他の情報が含まれています。この情報はブラウザには表示されませんが、SEO (検索エンジン最適化) の目的で検索エンジンによってよく使用されます。
一方、<p><body> には、ユーザーに表示される Web ページのメイン コンテンツが含まれており、そのため、このコースで焦點を當てる HTML ファイルの部分でもあります。 .</p>
<h2>
要素と屬性
</h2>
<p>前の例を詳しく見て、HTML ドキュメントが入れ子構(gòu)造のさまざまな要素で構(gòu)成されていることに注目してください。 HTML では、ほとんどの要素に開始タグと終了タグの両方があります:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
</pre>
<p>この場合、<タグ>は開始タグ、</tag> は開始タグです。は終了タグであり、これらが一緒になって HTML 要素を形成します。要素には、開始タグと終了タグの間にテキスト コンテンツを含めることができます。<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
</pre>
<p>要素は他の要素を囲んで、入れ子構(gòu)造を形成することもできます。<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
</pre>
<p>開始タグ內(nèi)で、クラス、ID などの要素に関する追加情報を指定するために使用される屬性を定義できます。<br>
</p>
<pre class="brush:php;toolbar:false"><tag>. . .</tag>
</pre>
<p>屬性は通常、キーと値のペアで構(gòu)成され、値は常に一致する引用符 (二重または一重) で囲む必要があります。</p>
<p>これらの一般的な形式にはいくつかの例外があります。たとえば、<br>改行を作成する要素には終了タグは必要ありません。複數(shù)などの一部の屬性には値が必要ありません。これらの例外については、このコースの後半で遭遇したときに説明します。</p>
<p>ただし、要素に終了タグが必要な場合は、決して省略しないでください。ほとんどの場合、Web ページは引き続き正しく表示されますが、HTML ドキュメントの構(gòu)造が複雑になるにつれて、予期しないエラーが発生する可能性があります。興味があれば、HTML と CSS を記述するためのベスト プラクティス ガイドラインをご覧ください。</p>
<h2>
さらに読む
</h2>
<ul>
<li>カスケード スタイル シート (CSS) の紹介</li>
<li>JavaScript の概要</li>
<li>レスポンシブデザインとは</li>
<li>HTML と CSS を使用してインタラクティブなフォームを構(gòu)築する方法</li>
</ul>
<p>以上がHTMLとCSSの基礎の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當する法的責任を負いません。盜作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</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://www.miracleart.cn/ja/faq/1796821119.html" title="ガイド：Stellar Blade Save Fileの場所/ファイルを保存する/保存しない" class="phpgenera_Details_mainR4_bottom_title">ガイド：Stellar Blade Save Fileの場所/ファイルを保存する/保存しない</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.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://www.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>1週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.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>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821278.html" title="すべての日付：ダークとハーパーの関係ガイド" class="phpgenera_Details_mainR4_bottom_title">すべての日付：ダークとハーパーの関係ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.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://www.miracleart.cn/ja/faq/1796821119.html" title="ガイド：Stellar Blade Save Fileの場所/ファイルを保存する/保存しない" class="phpgenera_Details_mainR4_bottom_title">ガイド：Stellar Blade Save Fileの場所/ファイルを保存する/保存しない</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.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://www.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>1週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.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>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821278.html" title="すべての日付：ダークとハーパーの関係ガイド" class="phpgenera_Details_mainR4_bottom_title">すべての日付：ダークとハーパーの関係ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.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://www.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://www.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://www.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://www.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://www.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://www.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
<h3>ゼンドスタジオ 13.0.1</h3>
</a>
<p>強力な PHP 統(tǒng)合開発環(huán)境</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.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://www.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://www.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://www.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://www.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://www.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>8634</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://www.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>1783</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://www.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>1723</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://www.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>1577</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.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>1439</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://www.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://www.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://www.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"非同期負荷を組み合わせ、過度の分割と複雑なスクリプト制御を避けるためにメディア遅延荷重を合理的に使用することをお勧めします。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.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://www.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://www.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://www.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://www.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://www.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://www.miracleart.cn/ja/faq/1796828180.html" title="Autoprefixerとは何ですか？それはどのように機能しますか？" 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とは何ですか？それはどのように機能しますか？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796828180.html" title="Autoprefixerとは何ですか？それはどのように機能しますか？" class="phphistorical_Version2_mids_title">Autoprefixerとは何ですか？それはどのように機能しますか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">Autoprefixerは、ターゲットブラウザスコープに基づいてCSS屬性にベンダープレフィックスを自動的に追加するツールです。 1.エラーで接頭辭を手動で維持する問題を解決します。 2. PostCSSプラグインフォーム、CSSを解析し、プレフィックスする必要がある屬性を分析し、構(gòu)成に従ってコードを生成する屬性を分析します。 3.使用手順には、プラグインのインストール、ブラウザーリストの設定、ビルドプロセスでそれらを有効にすることが含まれます。 4。メモには、接頭辭を手動で追加しない、構(gòu)成の更新を保持すること、すべての屬性ではなくプレフィックスを維持することが含まれ、プリ??プロセッサでそれらを使用することをお勧めします。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.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://www.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://www.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://www.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進數(shù)色は大文字と小文字を區(qū)別しますが、赤と赤などの名前の色は無効です。 3. URLは癥例に敏感であり、ファイルロードの問題を引き起こす可能性があります。 4.カスタムプロパティ（変數(shù)）はケースに敏感であり、使用する場合はケースの一貫性に注意を払う必要があります。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796821622.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/175026469053848.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSの癥例感度：説明されたセレクター、プロパティ、および値" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796821622.html" title="CSSの癥例感度：説明されたセレクター、プロパティ、および値" class="phphistorical_Version2_mids_title">CSSの癥例感度：説明されたセレクター、プロパティ、および値</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:38 AM</span>
<p class="Articlelist_txts_p">cssselectors andpropertynamesarecase-inssensitive、whilevaluescanbecase-sensitivedingoncontext.1）selectorslike'div'andiv'areequivalent.2）propertiessuchas'background-color'and'background-color'arecase-sensens</p>
</div>
</div>
<a href="http://www.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 學習者の迅速な成長を支援します！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/ja/about/us.html">私たちについて</a>
<a href="http://www.miracleart.cn/ja/about/disclaimer.html">免責事項</a>
<a href="http://www.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://www.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="kfeb0" class="pl_css_ganrao" style="display: none;"><em id="kfeb0"></em><label id="kfeb0"></label><var id="kfeb0"></var><s id="kfeb0"><bdo id="kfeb0"><dd id="kfeb0"><del id="kfeb0"></del></dd></bdo></s><strike id="kfeb0"><input id="kfeb0"><progress id="kfeb0"><meter id="kfeb0"></meter></progress></input></strike><i id="kfeb0"></i><dfn id="kfeb0"></dfn><button id="kfeb0"><style id="kfeb0"></style></button><center id="kfeb0"></center><p id="kfeb0"><big id="kfeb0"><pre id="kfeb0"><button id="kfeb0"></button></pre></big></p><rt id="kfeb0"><meter id="kfeb0"></meter></rt><dfn id="kfeb0"><big id="kfeb0"></big></dfn><del id="kfeb0"></del><center id="kfeb0"><optgroup id="kfeb0"><fieldset id="kfeb0"></fieldset></optgroup></center><th id="kfeb0"></th><abbr id="kfeb0"><video id="kfeb0"></video></abbr><li id="kfeb0"></li><th id="kfeb0"><thead id="kfeb0"></thead></th><center id="kfeb0"></center><video id="kfeb0"><object id="kfeb0"><var id="kfeb0"><progress id="kfeb0"></progress></var></object></video><rt id="kfeb0"><source id="kfeb0"><menuitem id="kfeb0"></menuitem></source></rt><tfoot id="kfeb0"></tfoot><i id="kfeb0"></i><blockquote id="kfeb0"></blockquote><table id="kfeb0"><object id="kfeb0"><s id="kfeb0"></s></object></table><u id="kfeb0"><strong id="kfeb0"><cite id="kfeb0"><samp id="kfeb0"></samp></cite></strong></u><mark id="kfeb0"></mark><object id="kfeb0"></object><big id="kfeb0"></big><dd id="kfeb0"><form id="kfeb0"><ul id="kfeb0"></ul></form></dd><ruby id="kfeb0"><nobr id="kfeb0"></nobr></ruby><strong id="kfeb0"><acronym id="kfeb0"><pre id="kfeb0"></pre></acronym></strong><input id="kfeb0"><progress id="kfeb0"></progress></input><tbody id="kfeb0"><optgroup id="kfeb0"><fieldset id="kfeb0"></fieldset></optgroup></tbody><b id="kfeb0"><small id="kfeb0"><strong id="kfeb0"></strong></small></b><b id="kfeb0"><mark id="kfeb0"></mark></b><kbd id="kfeb0"></kbd><input id="kfeb0"><div id="kfeb0"><sup id="kfeb0"><option id="kfeb0"></option></sup></div></input><video id="kfeb0"><strike id="kfeb0"></strike></video><strike id="kfeb0"></strike><source id="kfeb0"></source><dl id="kfeb0"><legend id="kfeb0"><dfn id="kfeb0"></dfn></legend></dl><sub id="kfeb0"></sub><sub id="kfeb0"></sub><listing id="kfeb0"><sup id="kfeb0"></sup></listing><source id="kfeb0"></source><button id="kfeb0"></button><tbody id="kfeb0"></tbody><pre id="kfeb0"><dfn id="kfeb0"></dfn></pre></div>
</html>