html_test_1<\/code>\n<\/li>\n<\/ul>\n\n <\/title><meta content=\"width=device-width,initial-scale=1\" name=\"viewport\"><\/meta><meta content=\"yes\" name=\"apple-mobile-web-app-capable\"><\/meta><meta content=\"yes\" name=\"mobile-web-app-capable\"><\/meta><link href=\"\/icon.png\" rel=\"icon\" type=\"image\/png\"><\/link><link href=\"\/icon.svg\" rel=\"icon\" type=\"image\/svg+xml\"><\/link><link href=\"\/icon.png\" rel=\"apple-touch-icon\"><\/link><\/pre>\n<ul>コントローラーの作成時(shí)に <li> パラメーターが渡された場(chǎng)合、作成されたアクションのルートの追加を無(wú)視できます。完全なコマンドは <code>rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes<\/code><\/li> になります。\n<\/ul>\n<\/details>\n<h3>Rails ルートを表示<\/h3>\n<details><summary>展開(kāi)…<\/summary>ターミナルを使用して、ルートを表示するコントローラー (`pages` コントローラーなど) を (`-c` を使用して) 指定できます。\n<pre><code>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-tailwind\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s<\/code><\/pre>\n<p>または、次のコマンドを使用してすべてのルートを表示できます: <\/p>\n<pre><code>$ cd classless-css-tailwind && code .<\/code><\/pre>\n<ul>\n<li>アドレス <code>http:\/\/127.0.0.1:3000\/rails\/info\/routes<\/code> を使用してブラウザ経由でルートにアクセスすることもできます。プロジェクトルートで <code>bin\/dev<\/code> または標(biāo)準(zhǔn)の <code>rails server<\/code> を使用して開(kāi)発サーバーを起動(dòng)することを忘れないでください。開(kāi)発サーバーは、JavaScript ファイルと CSS ファイルへの変更を「リッスン」して、ユーザーに提供するために必要な処理を?qū)g行します。 <\/li>\n<li>これらのファイルへの変更をすぐに実行してブラウザで表示するには、Rails Live Reload のような gem をインストールする必要があります。 <\/li>\n<\/ul>\n<\/details>\n<h3>CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。 <\/h3>\n<p>Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクト編成を開(kāi)始します。ほとんどのコードは次のフォルダーに編成されています: <\/p><ul>\n<li>ドメイン\/ビジネス ロジックおよびデータに関連するコードは、<code>app\/models<\/code> フォルダーに保存する必要があります。\n<\/li>表示関連のコード (HTML、JSON、XML など) は <li> フォルダーにあります。\n<code>app\/views<\/code>リクエストのライフサイクルに関連するコードは、<\/li> フォルダーにあります。\n<li>\n<code>app\/controllers<\/code><\/li> ページのコンテンツを挿入します<\/ul>\n<h3><code>html_test_1<\/code>展開(kāi)…<\/h3>- リンク https:\/\/github.com\/dbohdan\/classless-css\/blob\/master\/screenshot-page.html にアクセスし、`<details>` 內(nèi)のすべてのコンテンツをコピーします。タグ、以下に示すように\n<summary>\n<\/summary>\n<main><pre><code>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-tailwind\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s<\/code><\/pre> ページのコンテンツを挿入します<\/details>\n<h3><code>html_test_2<\/code>展開(kāi)…<\/h3>- リンク https:\/\/gist.github.com\/tommaitland\/5865229 にアクセスし、以下に示すように `<details>` タグ內(nèi)のすべてのコンテンツをコピーします。\n<summary>\n<\/summary>サンプルフォームの凡例<form> <pre><code>$ cd classless-css-tailwind && code .<\/code><\/pre>名前: <legend> <\/legend>メール: <label for=\"name\"> <\/label>ボタン: <label for=\"email\"> <\/label>単一チェックボックス: <label> <\/label><label>グループチェックボックスの數(shù): <\/label> <fieldset>チェックボックス 1: <legend> <\/legend>チェックボックス 2: <label> <\/label>チェックボックス 3: <label> <\/label>チェックボックス 4: <label> <\/label><label>色: <\/label> <\/fieldset>日付: <label> <\/label>日付、時(shí)刻 (現(xiàn)地): <label> <\/label>ファイル: <label> <\/label>畫像: <label> <\/label>月: <label> <\/label>番號(hào): <label> <\/label>パスワード: <label> <\/label>シングルラジオ: <label> <\/label><label>ラジオのグループ: <\/label> <fieldset>ラジオ 1: <legend> <\/legend>ラジオ 2: <label> <\/label>ラジオ 3: <label> <\/label>ラジオ 4: <label> <\/label><label>範(fàn)囲: <\/label> <\/fieldset>リセット: <label> <\/label>時(shí)間: <label> <\/label>検索: <label> <\/label>電話番號(hào): <label> <\/label>テキスト: <label> <\/label>URL: <label> <\/label>週: <label> これはボタンです。 >選択 1: <\/label> テストテスト<label>選択 2: <\/label> TestTest<label>複數(shù)選択: <\/label> TestTest<label>グループの選択: <\/label> <label>TestTest<\/label><label>TestTest<\/label><optgroup label=\"First Group\">TestTest<\/optgroup>\n<optgroup label=\"Second Group\"><\/optgroup>データリスト: <optgroup label=\"Third Group\"> <\/optgroup>- `app\/views\/pages\/html_test_2.html.erb` ファイルを開(kāi)き、上でコピーしたコンテンツを貼り付けます\n<fieldset>\n<legend><\/legend>\n<datalist><\/datalist> ページのコンテンツを挿入します<\/fieldset>\n<\/details><h3>展開(kāi)...<code>html_test_3<\/code>リンク https:\/\/github.com\/cbracco\/html5-test-page\/blob\/master\/index.html にアクセスし、`<\/h3> の後のすべてのコンテンツをコピーします。 ` タグ。テキスト `<details>` が含まれます\n<summary><\/summary><\/details>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://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ì)問(wèn)" class="languagechoosea">に質(zhì)問(wèn)</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="開(kāi)発ツール" class="languagechoosea on">開(kāi)発ツール</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">日本語(yǔ)<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:;" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</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_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">目次</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#新しい-Rails-アプリケーションを作成する" title="新しい Rails アプリケーションを作成する" >新しい Rails アプリケーションを作成する</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#VSCode-またはお?dú)荬巳毪辘违ē钎％郡蚴褂盲筏匹抓恁弗Д趣蜷_(kāi)きます" title="VSCode またはお?dú)荬巳毪辘违ē钎％郡蚴褂盲筏匹抓恁弗Д趣蜷_(kāi)きます" >VSCode またはお?dú)荬巳毪辘违ē钎％郡蚴褂盲筏匹抓恁弗Д趣蜷_(kāi)きます</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Rails-ルートを表示" title="Rails ルートを表示" >Rails ルートを表示</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#CSS-スタイルをテストするために-HTML-コンテンツを含む-つのページを作成します" title="CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。 " >CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。 </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#code-html-test-code-展開(kāi)" title="<code>html_test_2</code>展開(kāi)…" ><code>html_test_2</code>展開(kāi)…</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#展開(kāi)-code-html-test-code-リンク-https-github-com-cbracco-html-test-page-blob-master-index-html-にアクセスし" title="展開(kāi)...<code>html_test_3</code>リンク https://github.com/cbracco/html5-test-page/blob/master/index.html にアクセスし、`" >展開(kāi)...<code>html_test_3</code>リンク https://github.com/cbracco/html5-test-page/blob/master/index.html にアクセスし、`</a>
</div>
</div>
</div>
</div>
<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>Tailwind をクラスレス CSS フレームワークとして使用する高速 Ruby on Rails フロントエンド</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Tailwind をクラスレス CSS フレームワークとして使用する高速 Ruby on Rails フロントエンド</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ja/member/1468492.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8147b1057383.png" src="/static/imghw/default1.png" alt="Mary-Kate Olsen">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ja/member/1468492.html" class="author_name">Mary-Kate Olsen</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 15, 2025 am 10:44 AM</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/173690908826214.jpg" class="lazy" alt="Ruby on Rails Frontend Rápido Usando Tailwind como um Frameworks CSS Classless"></p>
<blockquote>
<p>この記事はこのシリーズのこれまでの記事とよく似ていますが、今回はクラスレス CSS フレームワークとして Tailwind フレームワークを使用します。 </p>
</blockquote>
<h3 id="新しい-Rails-アプリケーションを作成する">新しい Rails アプリケーションを作成する</h3>
<ul>
<li>
<code>rails serve</code> コマンドの前の <code>time</code> は、コマンド実行の合計(jì)時(shí)間を表示するために使用されます。次の例では 47 秒かかりました。 </li>
</ul>
<pre class="brush:php;toolbar:false"><code>$ rails -v
Rails 8.0.0
$ time rails new classless-css-tailwind
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s</code></pre>
<p>Rails 8 は、「No Build」哲學(xué)に基づいて、デフォルトで Propshaft をリソース パイプライン ライブラリとして使用し、Importmap を JavaScript ライブラリとして使用します。 Importmap は JavaScript 処理を?qū)g行しません。 </p>
<h3 id="VSCode-またはお?dú)荬巳毪辘违ē钎％郡蚴褂盲筏匹抓恁弗Д趣蜷_(kāi)きます">VSCode またはお?dú)荬巳毪辘违ē钎％郡蚴褂盲筏匹抓恁弗Д趣蜷_(kāi)きます</h3>
<pre class="brush:php;toolbar:false"><code>$ rails -v
Rails 8.0.0
$ time rails new classless-css-tailwind
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s</code></pre>
<h3>Rails のデフォルト レイアウトを理解する <code>app/views/layouts/application.html.erb</code>
</h3>
<details><summary>展開(kāi)…</summary>- 構(gòu)成より規(guī)約 (CoC) の原則に従って、Rails はすべてのページをレンダリングするためのデフォルト レイアウトとして `application.html.erb` を使用します。
- Rails 8 の元のファイルの內(nèi)容は、以下と同じか類似している必要があります。
<pre class="brush:php;toolbar:false"><code>$ cd classless-css-tailwind && code .</code></pre>
<ul>
<li>
<code><head></code> タグには、ページのレンダリングと適切な機(jī)能のための重要な構(gòu)造要素が含まれています。 <code><head></code> ページの動(dòng)作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関連付け、CSRF や CSP 保護(hù)などのセキュリティ設(shè)定を構(gòu)成するのに役立つメタデータと重要なリソースを含めるために使用されます。
</li> ページのメインコンテンツは、ERB タグを介して <li> 內(nèi)にレンダリングされます。このタグは、Rails <code><body></code> によって動(dòng)的にレンダリングされるビュー コンテンツを含めるための統(tǒng)合ポイントとして機(jī)能します。
</li>
</ul>
</details><h3> コントローラーと <code>pages</code>、<code>html_test_1</code>、<code>html_test_2</code>、および <code>html_test_3</code> アクションを使用してテスト ページを生成します<code>html_test_4</code>
</h3>
<details>展開(kāi)…<summary>
「」バッシュ
$ Rails g コントローラー ページ html_test_1 html_test_2 html_test_3 html_test_4
app/controllers/pages_controller.rb を作成します
ルート取得「pages/html_test_1」
「pages/html_test_2」を取得
「pages/html_test_3」を取得
「pages/html_test_4」を取得
呼び出す者
アプリ/ビュー/ページを作成する
app/views/pages/html_test_1.html.erb を作成します
app/views/pages/html_test_2.html.erb を作成します
app/views/pages/html_test_3.html.erb を作成します
app/views/pages/html_test_4.html.erb を作成します
ヘルパーを呼び出す
app/helpers/pages_helper.rb を作成します
「」
</summary>
<ul>コントローラーとアクションの作成時(shí)にルートも追加されるため、作成されたアクションには次のリンクからアクセスできます: <li>
</li>
<li>
<code>localhost:3000/pages/html_test_1</code>
</li>
<li>
<code>localhost:3000/pages/html_test_2</code>
</li>
<li>
<code>localhost:3000/pages/html_test_3</code>
</li>
<li>
<code>localhost:3000/pages/html_test_4</code>
</li>
</ul>VSCode を使用して <h3> ファイルを開(kāi)きます<code>config/routes.rb</code>
</h3>
<ul>ファイルの最後に次の行を追加して、ページのルートを前に作成した <li> コントローラーと <code>pages</code> アクションに誘導(dǎo)します。このようにして、Web サイトまたはシステムにアクセスすると、最初に表示されるページは <code>html_test_1</code> コントローラーの <code>pages</code> ページになります。それ以外の場(chǎng)合は、Rails のデフォルトページが表示されます。 <code>html_test_1</code>
</li>
</ul>
<pre class='brush:php;toolbar:false;'>
<title></title><meta content="width=device-width,initial-scale=1" name="viewport"></meta><meta content="yes" name="apple-mobile-web-app-capable"></meta><meta content="yes" name="mobile-web-app-capable"></meta><link href="/icon.png" rel="icon" type="image/png"></link><link href="/icon.svg" rel="icon" type="image/svg+xml"></link><link href="/icon.png" rel="apple-touch-icon"></link></pre>
<ul>コントローラーの作成時(shí)に <li> パラメーターが渡された場(chǎng)合、作成されたアクションのルートの追加を無(wú)視できます。完全なコマンドは <code>rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes</code></li> になります。
</ul>
</details>
<h3 id="Rails-ルートを表示">Rails ルートを表示</h3>
<details><summary>展開(kāi)…</summary>ターミナルを使用して、ルートを表示するコントローラー (`pages` コントローラーなど) を (`-c` を使用して) 指定できます。
<pre class="brush:php;toolbar:false"><code>$ rails -v
Rails 8.0.0
$ time rails new classless-css-tailwind
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s</code></pre>
<p>または、次のコマンドを使用してすべてのルートを表示できます: </p>
<pre class="brush:php;toolbar:false"><code>$ cd classless-css-tailwind && code .</code></pre>
<ul>
<li>アドレス <code>http://127.0.0.1:3000/rails/info/routes</code> を使用してブラウザ経由でルートにアクセスすることもできます。プロジェクトルートで <code>bin/dev</code> または標(biāo)準(zhǔn)の <code>rails server</code> を使用して開(kāi)発サーバーを起動(dòng)することを忘れないでください。開(kāi)発サーバーは、JavaScript ファイルと CSS ファイルへの変更を「リッスン」して、ユーザーに提供するために必要な処理を?qū)g行します。 </li>
<li>これらのファイルへの変更をすぐに実行してブラウザで表示するには、Rails Live Reload のような gem をインストールする必要があります。 </li>
</ul>
</details>
<h3 id="CSS-スタイルをテストするために-HTML-コンテンツを含む-つのページを作成します">CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。 </h3>
<p>Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクト編成を開(kāi)始します。ほとんどのコードは次のフォルダーに編成されています: </p><ul>
<li>ドメイン/ビジネス ロジックおよびデータに関連するコードは、<code>app/models</code> フォルダーに保存する必要があります。
</li>表示関連のコード (HTML、JSON、XML など) は <li> フォルダーにあります。
<code>app/views</code>リクエストのライフサイクルに関連するコードは、</li> フォルダーにあります。
<li>
<code>app/controllers</code></li> ページのコンテンツを挿入します</ul>
<h3 id="code-html-test-code-展開(kāi)"><code>html_test_1</code>展開(kāi)…</h3>- リンク https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html にアクセスし、`<details>` 內(nèi)のすべてのコンテンツをコピーします。タグ、以下に示すように
<summary>
</summary>
<main><pre class="brush:php;toolbar:false"><code>$ rails -v
Rails 8.0.0
$ time rails new classless-css-tailwind
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s</code></pre> ページのコンテンツを挿入します</details>
<h3 id="code-html-test-code-展開(kāi)"><code>html_test_2</code>展開(kāi)…</h3>- リンク https://gist.github.com/tommaitland/5865229 にアクセスし、以下に示すように `<details>` タグ內(nèi)のすべてのコンテンツをコピーします。
<summary>
</summary>サンプルフォームの凡例<form> <pre class="brush:php;toolbar:false"><code>$ cd classless-css-tailwind && code .</code></pre>名前: <legend> </legend>メール: <label for="name"> </label>ボタン: <label for="email"> </label>単一チェックボックス: <label> </label><label>グループチェックボックスの數(shù): </label> <fieldset>チェックボックス 1: <legend> </legend>チェックボックス 2: <label> </label>チェックボックス 3: <label> </label>チェックボックス 4: <label> </label><label>色: </label> </fieldset>日付: <label> </label>日付、時(shí)刻 (現(xiàn)地): <label> </label>ファイル: <label> </label>畫像: <label> </label>月: <label> </label>番號(hào): <label> </label>パスワード: <label> </label>シングルラジオ: <label> </label><label>ラジオのグループ: </label> <fieldset>ラジオ 1: <legend> </legend>ラジオ 2: <label> </label>ラジオ 3: <label> </label>ラジオ 4: <label> </label><label>範(fàn)囲: </label> </fieldset>リセット: <label> </label>時(shí)間: <label> </label>検索: <label> </label>電話番號(hào): <label> </label>テキスト: <label> </label>URL: <label> </label>週: <label> これはボタンです。 >選択 1: </label> テストテスト<label>選択 2: </label> TestTest<label>複數(shù)選択: </label> TestTest<label>グループの選択: </label> <label>TestTest</label><label>TestTest</label><optgroup label="First Group">TestTest</optgroup>
<optgroup label="Second Group"></optgroup>データリスト: <optgroup label="Third Group"> </optgroup>- `app/views/pages/html_test_2.html.erb` ファイルを開(kāi)き、上でコピーしたコンテンツを貼り付けます
<fieldset>
<legend></legend>
<datalist></datalist> ページのコンテンツを挿入します</fieldset>
</details><h3 id="展開(kāi)-code-html-test-code-リンク-https-github-com-cbracco-html-test-page-blob-master-index-html-にアクセスし">展開(kāi)...<code>html_test_3</code>リンク https://github.com/cbracco/html5-test-page/blob/master/index.html にアクセスし、`</h3> の後のすべてのコンテンツをコピーします。 ` タグ。テキスト `<details>` が含まれます
<summary></summary></details><p>以上がTailwind をクラスレス CSS フレームワークとして使用する高速 Ruby on Rails フロントエンドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見(jiàn)つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796821119.html" title="ガイド：Stellar Blade Save Fileの場(chǎng)所/ファイルを保存する/保存しない" class="phpgenera_Details_mainR4_bottom_title">ガイド：Stellar Blade Save Fileの場(chǎng)所/ファイルを保存する/保存しない</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">もっと見(jiàn)る</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>脫衣畫像を無(wú)料で</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>完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/ai">もっと見(jiàn)る</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の場(chǎng)所/ファイルを保存する/保存しない" class="phpgenera_Details_mainR4_bottom_title">ガイド：Stellar Blade Save Fileの場(chǎng)所/ファイルを保存する/保存しない</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">もっと見(jiàn)る</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>使いやすく無(wú)料のコードエディター</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語(yǔ)版" 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 中國(guó)語(yǔ)版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語(yǔ)版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中國(guó)語(yǔ)版</h3>
</a>
<p>中國(guó)語(yǔ)版、とても使いやすい</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>強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(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 開(kāi)発ツール</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">もっと見(jiàn)る</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>1784</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>1729</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://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>1580</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>1445</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">もっと見(jiàn)る</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"非同期負(fù)荷を組み合わせ、過(guò)度の分割と複雑なスクリプト制御を避けるためにメディア遅延荷重を合理的に使用することをお?jiǎng)幛幛筏蓼埂?/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とは何ですか？それはどのように機(jī)能しますか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Autoprefixerとは何ですか？それはどのように機(jī)能しますか？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796828180.html" title="Autoprefixerとは何ですか？それはどのように機(jī)能しますか？" class="phphistorical_Version2_mids_title">Autoprefixerとは何ですか？それはどのように機(jī)能しますか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">Autoprefixerは、ターゲットブラウザスコープに基づいてCSS屬性にベンダープレフィックスを自動(dòng)的に追加するツールです。 1.エラーで接頭辭を手動(dòng)で維持する問(wèn)題を解決します。 2. PostCSSプラグインフォーム、CSSを解析し、プレフィックスする必要がある屬性を分析し、構(gòu)成に従ってコードを生成する屬性を分析します。 3.使用手順には、プラグインのインストール、ブラウザーリストの設(shè)定、ビルドプロセスでそれらを有効にすることが含まれます。 4。メモには、接頭辭を手動(dòng)で追加しない、構(gòu)成の更新を保持すること、すべての屬性ではなくプレフィックスを維持することが含まれ、プリ??プロセッサでそれらを使用することをお?jiǎng)幛幛筏蓼埂?/p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://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進(jìn)數(shù)色は大文字と小文字を區(qū)別しますが、赤と赤などの名前の色は無(wú)効です。 3. URLは癥例に敏感であり、ファイルロードの問(wèn)題を引き起こす可能性があります。 4.カスタムプロパティ（変數(shù)）はケースに敏感であり、使用する場(chǎng)合はケースの一貫性に注意を払う必要があります。</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勾配の勾配は、測(cè)定されていることを確認(rèn)してください</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í)者の迅速な成長(zhǎng)を支援します！</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">免責(zé)事項(xiàng)</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="qkous" class="pl_css_ganrao" style="display: none;"><strike id="qkous"></strike><tbody id="qkous"></tbody><xmp id="qkous"></xmp><rt id="qkous"><acronym id="qkous"><ul id="qkous"></ul></acronym></rt><em id="qkous"></em><th id="qkous"><ul id="qkous"><menu id="qkous"></menu></ul></th><dd id="qkous"></dd><dd id="qkous"></dd><dl id="qkous"></dl><ul id="qkous"></ul><li id="qkous"></li><strike id="qkous"><kbd id="qkous"><wbr id="qkous"></wbr></kbd></strike><code id="qkous"></code><bdo id="qkous"></bdo><th id="qkous"></th><rt id="qkous"><acronym id="qkous"><li id="qkous"></li></acronym></rt><object id="qkous"><sup id="qkous"><tbody id="qkous"></tbody></sup></object><fieldset id="qkous"><delect id="qkous"><nav id="qkous"></nav></delect></fieldset><xmp id="qkous"></xmp><menu id="qkous"></menu><object id="qkous"><strike id="qkous"><tr id="qkous"></tr></strike></object><samp id="qkous"></samp><object id="qkous"><tfoot id="qkous"><kbd id="qkous"></kbd></tfoot></object><tbody id="qkous"><wbr id="qkous"><center id="qkous"></center></wbr></tbody><fieldset id="qkous"></fieldset><cite id="qkous"></cite><del id="qkous"></del><tr id="qkous"></tr><s id="qkous"></s><dfn id="qkous"></dfn><abbr id="qkous"></abbr><dfn id="qkous"></dfn><abbr id="qkous"><center id="qkous"><pre id="qkous"></pre></center></abbr><rt id="qkous"></rt><source id="qkous"><pre id="qkous"><cite id="qkous"></cite></pre></source><noframes id="qkous"><strike id="qkous"><samp id="qkous"></samp></strike></noframes><ul id="qkous"></ul><em id="qkous"><tfoot id="qkous"><tbody id="qkous"></tbody></tfoot></em><pre id="qkous"></pre><kbd id="qkous"><nav id="qkous"><dfn id="qkous"></dfn></nav></kbd><code id="qkous"></code><input id="qkous"></input><blockquote id="qkous"></blockquote><dd id="qkous"></dd><object id="qkous"></object><noframes id="qkous"></noframes><dfn id="qkous"></dfn><dfn id="qkous"><tbody id="qkous"><wbr id="qkous"></wbr></tbody></dfn><tbody id="qkous"></tbody><samp id="qkous"></samp><dd id="qkous"></dd><td id="qkous"><button id="qkous"><th id="qkous"></th></button></td><code id="qkous"></code><sup id="qkous"></sup><tr id="qkous"></tr><samp id="qkous"></samp><pre id="qkous"></pre><s id="qkous"><center id="qkous"><dl id="qkous"></dl></center></s><table id="qkous"><tr id="qkous"><li id="qkous"></li></tr></table><acronym id="qkous"></acronym><rt id="qkous"><acronym id="qkous"><small id="qkous"></small></acronym></rt><pre id="qkous"></pre><abbr id="qkous"></abbr><td id="qkous"></td><acronym id="qkous"></acronym><tr id="qkous"><td id="qkous"><abbr id="qkous"></abbr></td></tr><tr id="qkous"></tr><td id="qkous"><center id="qkous"><code id="qkous"></code></center></td><cite id="qkous"><delect id="qkous"><object id="qkous"></object></delect></cite><center id="qkous"></center><xmp id="qkous"></xmp><wbr id="qkous"></wbr><strike id="qkous"></strike><code id="qkous"><td id="qkous"><button id="qkous"></button></td></code><cite id="qkous"></cite><dfn id="qkous"></dfn><acronym id="qkous"></acronym><object id="qkous"></object><li id="qkous"><center id="qkous"><em id="qkous"></em></center></li><pre id="qkous"><strike id="qkous"><kbd id="qkous"></kbd></strike></pre><small id="qkous"></small><pre id="qkous"><cite id="qkous"><dd id="qkous"></dd></cite></pre><source id="qkous"><acronym id="qkous"><fieldset id="qkous"></fieldset></acronym></source><del id="qkous"></del><acronym id="qkous"><small id="qkous"><samp id="qkous"></samp></small></acronym><tbody id="qkous"></tbody><noframes id="qkous"></noframes><table id="qkous"></table><button id="qkous"><code id="qkous"><del id="qkous"></del></code></button><del id="qkous"></del><nav id="qkous"></nav><tbody id="qkous"><li id="qkous"><rt id="qkous"></rt></li></tbody><strong id="qkous"></strong><center id="qkous"><optgroup id="qkous"><fieldset id="qkous"></fieldset></optgroup></center><dd id="qkous"></dd><ul id="qkous"><table id="qkous"><tr id="qkous"></tr></table></ul><blockquote id="qkous"><table id="qkous"><tr id="qkous"></tr></table></blockquote><pre id="qkous"><small id="qkous"><samp id="qkous"></samp></small></pre><bdo id="qkous"><dd id="qkous"><pre id="qkous"></pre></dd></bdo><tfoot id="qkous"></tfoot><option id="qkous"></option><ul id="qkous"></ul><cite id="qkous"></cite><pre id="qkous"></pre><td id="qkous"><tfoot id="qkous"><tr id="qkous"></tr></tfoot></td><wbr id="qkous"><sup id="qkous"></sup></wbr><abbr id="qkous"></abbr><tbody id="qkous"></tbody><blockquote id="qkous"><center id="qkous"><kbd id="qkous"></kbd></center></blockquote><tr id="qkous"></tr><noframes id="qkous"><small id="qkous"><dd id="qkous"></dd></small></noframes><pre id="qkous"><cite id="qkous"><delect id="qkous"></delect></cite></pre><td id="qkous"></td><fieldset id="qkous"><delect id="qkous"><nav id="qkous"></nav></delect></fieldset><samp id="qkous"></samp><tbody id="qkous"><optgroup id="qkous"><tfoot id="qkous"></tfoot></optgroup></tbody><center id="qkous"><em id="qkous"><fieldset id="qkous"></fieldset></em></center><input id="qkous"></input><xmp id="qkous"><menu id="qkous"><tbody id="qkous"></tbody></menu></xmp><noframes id="qkous"></noframes><th id="qkous"><del id="qkous"><menu id="qkous"></menu></del></th><blockquote id="qkous"><abbr id="qkous"><th id="qkous"></th></abbr></blockquote><menu id="qkous"></menu><center id="qkous"></center><input id="qkous"><pre id="qkous"><small id="qkous"></small></pre></input><tbody id="qkous"><li id="qkous"><rt id="qkous"></rt></li></tbody><dd id="qkous"></dd><s id="qkous"><button id="qkous"></button></s><acronym id="qkous"></acronym><table id="qkous"></table><blockquote id="qkous"></blockquote><tbody id="qkous"><s id="qkous"><button id="qkous"></button></s></tbody><xmp id="qkous"><option id="qkous"><th id="qkous"></th></option></xmp><delect id="qkous"></delect><dfn id="qkous"></dfn><noframes id="qkous"><fieldset id="qkous"><samp id="qkous"></samp></fieldset></noframes><noframes id="qkous"></noframes><object id="qkous"></object><noframes id="qkous"></noframes><code id="qkous"></code><xmp id="qkous"><abbr id="qkous"><dl id="qkous"></dl></abbr></xmp><wbr id="qkous"><button id="qkous"><code id="qkous"></code></button></wbr><cite id="qkous"><delect id="qkous"><nav id="qkous"></nav></delect></cite><tfoot id="qkous"><tr id="qkous"><s id="qkous"></s></tr></tfoot><optgroup id="qkous"><cite id="qkous"><delect id="qkous"></delect></cite></optgroup><samp id="qkous"></samp></div>
</html>