もっと見る…<\/summary>\n ターミナルを使用すると、コントローラー ページなどからコントローラー (-c を使用) を指定してルートを表示できます
\n<\/p>\n\n
\n\n \n <%= content_for(:title) || \"Classless Css\" %><\/title>\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n <meta name=\"mobile-web-app-capable\" content=\"yes\">\n <%= csrf_meta_tags %>\n <%= csp_meta_tag %>\n\n <%= yield :head %>\n\n <%# Enable PWA manifest for installable apps (make sure to enable in config\/routes.rb too!) %>\n <%#= tag.link rel: \"manifest\", href: pwa_manifest_path(format: :json) %>\n\n <link rel=\"icon\" href=\"\/icon.png\" type=\"image\/png\">\n <link rel=\"icon\" href=\"\/icon.svg\" type=\"image\/svg+xml\">\n <link rel=\"apple-touch-icon\" href=\"\/icon.png\">\n\n <%# Includes all stylesheet files in app\/assets\/stylesheets %>\n <%= stylesheet_link_tag :app, \"data-turbo-track\": \"reload\" %>\n <%= javascript_importmap_tags %>\n <\/head>\n\n <body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <%= yield %>\n <\/body>\n<\/html>\n\n<\/pre>\n\n\n\n<p>または、<br> ですべてのルートを表示できます\n<\/p>\n<pre><summary\nclass=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n>\n<\/pre>\n\n\n\n<ul>\n<li>アドレス http:\/\/127.0.0.1:3000\/rails\/info\/routes を使用してブラウザ経由でルートにアクセスすることもできます。 bin\/dev で開発サーバーを起動するか、プロジェクトのルート ディレクトリから Rails Server で標準の Rails サーバーを起動することを忘れないでください。開発サーバーは、JavaScript ファイルと CSS ファイルの変更を「リッスン」して、ユーザーが利用できるようにするために必要な処理を?qū)g行します。<\/li>\n<li>これらのファイルに変更を加えてブラウザで即座に表示するには、Rails Livre Reload のような gem をインストールする必要があります。<\/li>\n<\/ul>\n\n\n\n<\/details><br>\n<\/p>\n\n<h3>\n \n \n CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成してみましょう。\n<\/h3>\n\n<p>Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクトの整理を開始します。コードの多くは次のフォルダーに編成されています:<\/p>\n\n<ul>\n<li>コードがドメイン\/ビジネス ロジックおよびデータに関連している場合は、app\/models フォルダーに保管します。<\/li>\n<li>ビューに関連するコード (HTML、JSON、XML など) は app\/views にあります。<\/li>\n<li>リクエストのライフサイクルに関連するコードは、アプリ\/コントローラーに含まれます。<\/li>\n<\/ul>\n\n<p> <\/p>\n\n<h3>\n \n \n html_test_1 ページのコンテンツを挿入します。\n<\/h3>\n\n<p><details>\n <summary>もっと見る…<\/summary>\n <ul>\n<li>リンク https:\/\/github.com\/dbohdan\/classless-css\/blob\/master\/screenshot-page.html にアクセスし、以下に示すようにメイン タグの內(nèi)容をすべてコピーします。\n<\/li>\n<\/ul>\n<pre>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-cdn --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n<ul>\n<li>\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n \n \n Rails サーバーを起動すると、見苦しい単純な HTML が表示されますか?\n<\/h3>\n\n<p><details>\n <summary>もっと見る…<\/summary>\n <ul>\n<li>Rails 開発サーバーを bin\/dev で起動するか、標準サーバーを Rails サーバーで起動し、ブラウザを 127.0.0.1:3000 で開きます。\n<\/li>\n<\/ul>\n<pre>$ cd classless-css-cdn && code .\n<\/pre>\n\n\n<ul>\n<li>ページを開くと、前に作成した html_test_1、html_test_2、html_test_3、html_test_4 ページに追加した 4 つのリンクが上部に表示されます。<\/li>\n<li>これまでのところ、たくさんの作業(yè)があります。それぞれを開くと、HTML がまだ CSS でスタイル設(shè)定されていないことがわかります。これは次に行います。\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n<h3>\n \n \n app\/views\/layouts\/application.html.erb ページを再度開き、CDN 経由でクラスレス CSS スタイルを含めます。\n<\/h3>\n\n<p><details>\n <summary>もっと見る…<\/summary>\n <ul>\n<li>以下のコンテンツの後\n<\/li>\n<\/ul>\n<pre><summary\nclass=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n>\n<\/pre>\n\n\n<ul>\n<li><\/head> の前に、次の內(nèi)容を貼り付けます。これらのスタイルはすべて必要なわけではありません。さまざまなオプションをテストできるように挿入されています。\n<\/li>\n<\/ul>\n\n<pre>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-cdn --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n\n<ul>\n<li>Normalize CSS と Pico CSS を除き、ほとんどのスタイルはコメントアウトされています\n<\/li>\n<li>ファイルを保存してページを更新するか、サーバーを再起動してください<\/li>\n<li>Pico CSS 以外のスタイルをテストするには、スタイルの CDN を構(gòu)成する行をコメント アウトします。この場合、行 <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelibr.net\/npm\/ @ picocss\/pico@2\/css\/pico.min.css\" \/>そして、別のスタイルの行 (たとえば、Simple CSS 行) のコメントを解除します。<\/li>\n<li>VSCode で行をコメントしたりコメント解除するには、Ctrl K C キーの組み合わせを使用します。\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n \n \n はい、スタイリッシュな HTML ですか?\n<\/h3>\n\n<p>上記のスタイルシートを保存して Rails サーバーを起動すると、選択した CSS フレームワークでスタイル設(shè)定された HTML が表示されます。<\/p>\n\n<h3>\n \n \n ダークモード\n<\/h3>\n\n<p>一部のスタイルにはダーク モードのオプションがあります。確認するには、色のカスタマイズ オプションでコンピュータのテーマを変更します。 Windows で「アプリのダーク モードを有効にする」を検索し、ダーク モードとライト モードを切り替えると、オペレーティング システムの変更後に HTML ページが自動的に変更されます。<\/p>\n\n<h3>\n \n \n 次のステップ\n<\/h3>\n\n<ul>\n<li>好みに応じてスタイルを整理します;<\/li>\n<li>フロントエンドにもう少し時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。<\/li>\n<li>Rails Live Reload を使用して、ブラウザ內(nèi)のプロジェクトに加えられた変更を動的に更新します。<\/li>\n<li>CDN を使用せずに、プロジェクト CSS ファイルのスタイルを使用します。<\/li>\n<li>Tailwind を使用してクラスレス CSS フレームワークの機能を複製します。<\/li>\n<\/ul>\n\n<h2>\n \n \n 參考文獻\n<\/h2>\n\n<ul>\n<li>https:\/\/dev.to\/leonardorafael\/the-classless-and-class-light-css-aproaches-2b98<\/li>\n<li>https:\/\/prismic.io\/blog\/best-css-frameworks<\/li>\n<li>\nhttps:\/\/saeedesmaili.com\/notes\/classless-css-libraries\/ <\/li>\n<li>https:\/\/dev.to\/logrocket\/comparing-classless-css-frameworks-3267<\/li>\n<li>https:\/\/github.com\/dbohdan\/classless-css<\/li>\n<li>https:\/\/github.com\/troxler\/awesome-css-frameworks<\/li>\n<\/ul>\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="學(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://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>Ruby on Rails フロントエンド Rápido com Frameworks CSS Classless ou Class-Light Usando CDN</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Ruby on Rails フロントエンド Rápido com Frameworks CSS Classless ou Class-Light Usando CDN</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ja/member/1246273.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/246/273/647834461a95f136.jpg" src="/static/imghw/default1.png" alt="DDD">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ja/member/1246273.html" class="author_name">DDD</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 04, 2025 pm 04:40 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/173598004387261.jpg" class="lazy" alt="Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light Usando CDN"></p>
<p>Web 向けの開発を始めていて、フロントエンドに特化することに重點を置いていない場合、最も困難となる可能性がある障壁の 1 つは、Web のスタイルを簡単に設(shè)定できることです。醜い HTML .</p>
<p>初めて接觸した人にとって、HTML にスタイルを適用するための事前定義されたユーティリティ クラスを備えた一連の文字と數(shù)字を含む HTML を理解しようとするのは、謎めいて神秘的で超自然的なことです。<br>
</p>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<p>ユーティリティ クラスを使用する CSS フレームワークは、優(yōu)れており、多用途で、応答性が高く、エレガントであり、その他多くの特性を備えていますが、Tailwind CSS が唯一のソリューションではありません。 <strong>もっと早くてシンプルなものが必要な場合は、クラスレスまたはクラスライトの CSS フレームワークを使用する方が良い解決策になります。</strong></p>
<p>クラスレス CSS フレームワークは、クラスを使用せずに、HTML 要素を直接スタイルします。クラスライト フレームワークは、自動スタイルといくつかのオプションのユーティリティ クラスを組み合わせてカスタマイズし、使用の汎用性を高めます。</p>
<p>クラスレスまたはクラスライトのアプローチを使用すると、1 行、2 行、または 3 行で HTML スタイルをすばやく解決できます。</p>
<h3>
以下で見てみましょう。
</h3>
<ul>
<li>バージョン 8 での Ruby on Rails フレームワークと Propshaft および Importmap の使用;</li>
<li>HTML ページの標準レイアウトのファイルについて理解する;</li>
<li>コンテンツを作成して 4 つの HTML ページに追加し、CSS でのスタイルをテストします。</li>
<li>ページ用に作成されたルートの簡単な説明</li>
<li>作成されたページへのリンクを含むようにデフォルトのレイアウトを変更します。</li>
<li>CDN 経由で 12 個の CSS フレームワークをデフォルトのレイアウトに追加します。</li>
<li>CSS フレームワークにデフォルトでライト モードとダーク モードが設(shè)定されているかどうかを確認する方法を理解します。</li>
<li>次のステップに関する提案;</li>
</ul>
<h3>
新しい Rails アプリケーションを開始する
</h3>
<ul>
<li>rails コマンドが実行終了時の実行時間を表示するために使用されるまでの時間。以下の例では、47 秒かかりました。
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<p>Rails 8 は、No Build の理念に基づいて、デフォルトで Propshaft をアセット パイプライン ライブラリとして使用し、Importmap を JavaScript ライブラリとして使用します。 --skip-test を使用してテスト ライブラリをスキップするようにお願いします。<br>
必要に応じて、 --javascript esbuild パラメータを渡すことで、esbuild を使用して JavaScript を処理できます。 Importmap は、JavaScript に対してビルドや処理を一切実行しません。</p>
<h3>
VSCode または好みのエディターでプロジェクトを開きます
</h3>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<p> </p>
<h3>
デフォルトの Rails レイアウト app/views/layouts/application.html.erb を理解する。
</h3>
<p><details>
<summary>もっと見る…</summary>
<ul>
<li>設(shè)定優(yōu)先規(guī)則 (CoC) により、Rails は application.html.erb をデフォルトのレイアウトとして使用してすべてのページをレンダリングします。</li>
<li>Rails 8 の元のファイルには、以下にコピーしたファイルと同じまたは類似したコンテンツが含まれている必要があります。
</li>
</ul>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li><head> 內(nèi)の上部… </head>これらには、ページがレンダリングされ、正しく機能するための重要な構(gòu)造要素が含まれています。 head タグは、ページの動作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関係、CSRF や CSP の保護などのセキュリティ設(shè)定を構(gòu)成するのに役立つ重要なメタデータとリソースを含めるために使用されます。</li>
<li>ページのメインコンテンツは <body> 內(nèi)にレンダリングされます。
</body>、ERB タグ <%= yield %> を介して。このタグは、Rails によって動的にレンダリングされるビューのコンテンツを含める統(tǒng)合ポイントとして機能します。
</li>
</ul>
</details>
</p>
<p> </p>
<h3>
コントローラー ページとアクション html_test_1、html_test_2、html_test_3、および html_test_4 を使用してテスト ページを生成します。
</h3>
<p><details>
<summary>もっと見る…</summary>
<br>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>上記のコントローラーとアクションの作成時と同様に、ルートも追加され、リンクから作成されたアクションにアクセスできるようになります。
<ul>
<li>localhost:3000/pages/html_test_1</li>
<li>localhost:3000/pages/html_test_2</li>
<li>localhost:3000/pages/html_test_3</li>
<li>localhost:3000/pages/html_test_4</li>
</ul>
</li>
</ul>
<p> </p>
<h3>
VSCode で config/routes.rb ファイルを開きます
</h3>
<ul>
<li>ファイルの最後に以下の行を追加して、ページ ルートを以前に作成したコントローラー ページとアクション html_test_1 に誘導(dǎo)します。したがって、Web サイトまたはシステムにアクセスするときに表示される最初のページは、コントローラー ページの html_test_1 ページになります。それ以外の場合は、デフォルトの Rails ページが表示されます。
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<ul>
<li>コントローラーの作成時に --skip-routes パラメーターを渡していた場合は、作成されたアクションへのルートの追加を無視することもできました。完全なコマンドは、rails gcontrollerpages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes になります。
</li>
</ul>
</details>
</p>
<p> </p>
<h3>
Railsのルートを表示する
</h3>
<p><details>
<summary>もっと見る…</summary>
<p>ターミナルを使用すると、コントローラー ページなどからコントローラー (-c を使用) を指定してルートを表示できます<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title><%= content_for(:title) || "Classless Css" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= yield :head %>
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
</pre>
<p>または、<br> ですべてのルートを表示できます
</p>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li>アドレス http://127.0.0.1:3000/rails/info/routes を使用してブラウザ経由でルートにアクセスすることもできます。 bin/dev で開発サーバーを起動するか、プロジェクトのルート ディレクトリから Rails Server で標準の Rails サーバーを起動することを忘れないでください。開発サーバーは、JavaScript ファイルと CSS ファイルの変更を「リッスン」して、ユーザーが利用できるようにするために必要な処理を?qū)g行します。</li>
<li>これらのファイルに変更を加えてブラウザで即座に表示するには、Rails Livre Reload のような gem をインストールする必要があります。</li>
</ul>
</details><br>
</p>
<h3>
CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成してみましょう。
</h3>
<p>Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクトの整理を開始します。コードの多くは次のフォルダーに編成されています:</p>
<ul>
<li>コードがドメイン/ビジネス ロジックおよびデータに関連している場合は、app/models フォルダーに保管します。</li>
<li>ビューに関連するコード (HTML、JSON、XML など) は app/views にあります。</li>
<li>リクエストのライフサイクルに関連するコードは、アプリ/コントローラーに含まれます。</li>
</ul>
<p> </p>
<h3>
html_test_1 ページのコンテンツを挿入します。
</h3>
<p><details>
<summary>もっと見る…</summary>
<ul>
<li>リンク https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html にアクセスし、以下に示すようにメイン タグの內(nèi)容をすべてコピーします。
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Rails サーバーを起動すると、見苦しい単純な HTML が表示されますか?
</h3>
<p><details>
<summary>もっと見る…</summary>
<ul>
<li>Rails 開発サーバーを bin/dev で起動するか、標準サーバーを Rails サーバーで起動し、ブラウザを 127.0.0.1:3000 で開きます。
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<ul>
<li>ページを開くと、前に作成した html_test_1、html_test_2、html_test_3、html_test_4 ページに追加した 4 つのリンクが上部に表示されます。</li>
<li>これまでのところ、たくさんの作業(yè)があります。それぞれを開くと、HTML がまだ CSS でスタイル設(shè)定されていないことがわかります。これは次に行います。
</li>
</ul>
</details><br>
<br>
</p>
<h3>
app/views/layouts/application.html.erb ページを再度開き、CDN 経由でクラスレス CSS スタイルを含めます。
</h3>
<p><details>
<summary>もっと見る…</summary>
<ul>
<li>以下のコンテンツの後
</li>
</ul>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li></head> の前に、次の內(nèi)容を貼り付けます。これらのスタイルはすべて必要なわけではありません。さまざまなオプションをテストできるように挿入されています。
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>Normalize CSS と Pico CSS を除き、ほとんどのスタイルはコメントアウトされています
</li>
<li>ファイルを保存してページを更新するか、サーバーを再起動してください</li>
<li>Pico CSS 以外のスタイルをテストするには、スタイルの CDN を構(gòu)成する行をコメント アウトします。この場合、行 <link rel="stylesheet" href="https://cdn.jsdelibr.net/npm/ @ picocss/pico@2/css/pico.min.css" />そして、別のスタイルの行 (たとえば、Simple CSS 行) のコメントを解除します。</li>
<li>VSCode で行をコメントしたりコメント解除するには、Ctrl K C キーの組み合わせを使用します。
</li>
</ul>
</details><br>
<br>
</p>
<h3>
はい、スタイリッシュな HTML ですか?
</h3>
<p>上記のスタイルシートを保存して Rails サーバーを起動すると、選択した CSS フレームワークでスタイル設(shè)定された HTML が表示されます。</p>
<h3>
ダークモード
</h3>
<p>一部のスタイルにはダーク モードのオプションがあります。確認するには、色のカスタマイズ オプションでコンピュータのテーマを変更します。 Windows で「アプリのダーク モードを有効にする」を検索し、ダーク モードとライト モードを切り替えると、オペレーティング システムの変更後に HTML ページが自動的に変更されます。</p>
<h3>
次のステップ
</h3>
<ul>
<li>好みに応じてスタイルを整理します;</li>
<li>フロントエンドにもう少し時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。</li>
<li>Rails Live Reload を使用して、ブラウザ內(nèi)のプロジェクトに加えられた変更を動的に更新します。</li>
<li>CDN を使用せずに、プロジェクト CSS ファイルのスタイルを使用します。</li>
<li>Tailwind を使用してクラスレス CSS フレームワークの機能を複製します。</li>
</ul>
<h2>
參考文獻
</h2>
<ul>
<li>https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98</li>
<li>https://prismic.io/blog/best-css-frameworks</li>
<li>
https://saeedesmaili.com/notes/classless-css-libraries/ </li>
<li>https://dev.to/logrocket/comparing-classless-css-frameworks-3267</li>
<li>https://github.com/dbohdan/classless-css</li>
<li>https://github.com/troxler/awesome-css-frameworks</li>
</ul>
<p>以上がRuby on Rails フロントエンド Rápido com Frameworks CSS Classless ou Class-Light Usando CDNの詳細內(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 までご連絡(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://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>4週間前</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>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/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://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>4週間前</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>4週間前</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>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/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://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>4週間前</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>8638</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>1728</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>1579</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>1444</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.使用手順には、プラグインのインストール、ブラウザーリストの設(shè)定、ビルドプロセスでそれらを有効にすることが含まれます。 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/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://www.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勾配の勾配は、測定されていることを確認してください</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 學(xué)習(xí)者の迅速な成長を支援します！</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="emg09" class="pl_css_ganrao" style="display: none;"><noframes id="emg09"></noframes><u id="emg09"><pre id="emg09"></pre></u><meter id="emg09"><thead id="emg09"><dfn id="emg09"></dfn></thead></meter><menu id="emg09"><noframes id="emg09"><blockquote id="emg09"></blockquote></noframes></menu><dfn id="emg09"><font id="emg09"></font></dfn><tbody id="emg09"></tbody><strong id="emg09"></strong><small id="emg09"></small><wbr id="emg09"></wbr><input id="emg09"></input><strike id="emg09"></strike><strong id="emg09"><fieldset id="emg09"></fieldset></strong><style id="emg09"></style><strike id="emg09"><i id="emg09"></i></strike><listing id="emg09"><track id="emg09"><strong id="emg09"><strike id="emg09"></strike></strong></track></listing><p id="emg09"></p><menuitem id="emg09"><tr id="emg09"><blockquote id="emg09"><dl id="emg09"></dl></blockquote></tr></menuitem><tbody id="emg09"></tbody><strong id="emg09"><legend id="emg09"><code id="emg09"><object id="emg09"></object></code></legend></strong><label id="emg09"><dl id="emg09"><div id="emg09"><form id="emg09"></form></div></dl></label><td id="emg09"></td><tfoot id="emg09"><dl id="emg09"></dl></tfoot><rt id="emg09"></rt><ol id="emg09"><object id="emg09"></object></ol><acronym id="emg09"><em id="emg09"></em></acronym><dl id="emg09"></dl><output id="emg09"><li id="emg09"></li></output><nobr id="emg09"></nobr><del id="emg09"><blockquote id="emg09"><dl id="emg09"></dl></blockquote></del><label id="emg09"></label><var id="emg09"><b id="emg09"></b></var><label id="emg09"></label><font id="emg09"><cite id="emg09"><tbody id="emg09"><th id="emg09"></th></tbody></cite></font><em id="emg09"></em><optgroup id="emg09"><nobr id="emg09"></nobr></optgroup><output id="emg09"><dl id="emg09"><em id="emg09"><center id="emg09"></center></em></dl></output><big id="emg09"></big><fieldset id="emg09"><legend id="emg09"></legend></fieldset><tr id="emg09"></tr><dd id="emg09"><rt id="emg09"></rt></dd><span id="emg09"><strong id="emg09"></strong></span><pre id="emg09"></pre><table id="emg09"><small id="emg09"><menu id="emg09"><strong id="emg09"></strong></menu></small></table><strong id="emg09"></strong><object id="emg09"><style id="emg09"></style></object><noframes id="emg09"></noframes><center id="emg09"></center><progress id="emg09"></progress><legend id="emg09"><ol id="emg09"></ol></legend><tbody id="emg09"><kbd id="emg09"></kbd></tbody></div>
</html>