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>コントローラーの作成時に <li> パラメーターが渡された場合、作成されたアクションのルートの追加を無視できます。完全なコマンドは <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>展開…<\/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> または標準の <code>rails server<\/code> を使用して開発サーバーを起動することを忘れないでください。開発サーバーは、JavaScript ファイルと CSS ファイルへの変更を「リッスン」して、ユーザーに提供するために必要な処理を実行します。 <\/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) アーキテクチャを使用してプロジェクト編成を開始します。ほとんどのコードは次のフォルダーに編成されています: <\/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>展開…<\/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>展開…<\/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>日付、時刻 (現(xiàn)地): <label> <\/label>ファイル: <label> <\/label>畫像: <label> <\/label>月: <label> <\/label>番號: <label> <\/label>パスワード: <label> <\/label>シングルラジオ: <label> <\/label><label>ラジオのグループ: <\/label> <fieldset>ラジオ 1: <legend> <\/legend>ラジオ 2: <label> <\/label>ラジオ 3: <label> <\/label>ラジオ 4: <label> <\/label><label>範囲: <\/label> <\/fieldset>リセット: <label> <\/label>時間: <label> <\/label>検索: <label> <\/label>電話番號: <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` ファイルを開き、上でコピーしたコンテンツを貼り付けます\n<fieldset>\n<legend><\/legend>\n<datalist><\/datalist> ページのコンテンツを挿入します<\/fieldset>\n<\/details><h3>展開...<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://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1>
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="wjcelcm34c" class="head">
<div id="wjcelcm34c" class="haed_left">
<div id="wjcelcm34c" class="haed_logo">
<a href="http://ipnx.cn/ja/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="wjcelcm34c" class="head_nav">
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="コミュニティ" class="head_nava head_nava-template1">コミュニティ</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ja/article.html" title="記事" class="languagechoosea on">記事</a>
<a href="http://ipnx.cn/ja/faq/zt" title="トピックス" class="languagechoosea">トピックス</a>
<a href="http://ipnx.cn/ja/wenda.html" title="に質(zhì)問" class="languagechoosea">に質(zhì)問</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="學ぶ" class="head_nava head_nava-template1_1">學ぶ</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ja/course.html" title="コース" class="languagechoosea on">コース</a>
<a href="http://ipnx.cn/ja/dic/" title="プログラミング辭典" class="languagechoosea">プログラミング辭典</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="ツールライブラリ" class="head_nava head_nava-template1_2">ツールライブラリ</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ja/toolset/development-tools" title="開発ツール" class="languagechoosea on">開発ツール</a>
<a href="http://ipnx.cn/ja/toolset/website-source-code" title="公式サイト" class="languagechoosea">公式サイト</a>
<a href="http://ipnx.cn/ja/toolset/php-libraries" title="PHP ライブラリ" class="languagechoosea">PHP ライブラリ</a>
<a href="http://ipnx.cn/ja/toolset/js-special-effects" title="JS特殊効果" class="languagechoosea on">JS特殊効果</a>
<a href="http://ipnx.cn/ja/toolset/website-materials" title="サイト素材" class="languagechoosea on">サイト素材</a>
<a href="http://ipnx.cn/ja/toolset/extension-plug-ins" title="拡張プラグイン" class="languagechoosea on">拡張プラグイン</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/ja/ai" title="AIツール" class="head_nava head_nava-template1_3">AIツール</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="レジャー" class="head_nava head_nava-template1_3">レジャー</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ja/game" title="ゲームのダウンロード" class="languagechoosea on">ゲームのダウンロード</a>
<a href="http://ipnx.cn/ja/mobile-game-tutorial/" title="ゲームのチュートリアル" class="languagechoosea">ゲームのチュートリアル</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" 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="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">日本語<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="wjcelcm34c" id="dropdown-template" style="display: none;">
<div id="wjcelcm34c" 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="wjcelcm34c" 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="wjcelcm34c" class="Article_Details_main">
<div id="wjcelcm34c" class="Article_Details_main1">
<div id="wjcelcm34c" class="Article_Details_main1L">
<div id="wjcelcm34c" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="wjcelcm34c" class="Article_Details_main1L1">目次</div>
<div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側懸浮，文章定位標題1 id="Article_Details_main1L2s_1"-->
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#新しい-Rails-アプリケーションを作成する" title="新しい Rails アプリケーションを作成する" >新しい Rails アプリケーションを作成する</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#VSCode-またはお気に入りのエディタを使用してプロジェクトを開きます" title="VSCode またはお気に入りのエディタを使用してプロジェクトを開きます" >VSCode またはお気に入りのエディタを使用してプロジェクトを開きます</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Rails-ルートを表示" title="Rails ルートを表示" >Rails ルートを表示</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#CSS-スタイルをテストするために-HTML-コンテンツを含む-つのページを作成します" title="CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。 " >CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。 </a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#code-html-test-code-展開" title="<code>html_test_2</code>展開…" ><code>html_test_2</code>展開…</a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#展開-code-html-test-code-リンク-https-github-com-cbracco-html-test-page-blob-master-index-html-にアクセスし" title="展開...<code>html_test_3</code>リンク https://github.com/cbracco/html5-test-page/blob/master/index.html にアクセスし、`" >展開...<code>html_test_3</code>リンク https://github.com/cbracco/html5-test-page/blob/master/index.html にアクセスし、`</a>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main1M">
<div id="wjcelcm34c" class="phpgenera_Details_mainL1">
<a href="http://ipnx.cn/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.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="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Tailwind をクラスレス CSS フレームワークとして使用する高速 Ruby on Rails フロントエンド</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.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="wjcelcm34c" class="author_detail">
<a href="http://ipnx.cn/ja/member/1468492.html" class="author_name">Mary-Kate Olsen</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jan 15, 2025 am 10:44 AM</span>
</div>
</div>
<hr />
<div id="wjcelcm34c" class="article_main php-article">
<div id="wjcelcm34c" 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> は、コマンド実行の合計時間を表示するために使用されます。次の例では 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」哲學に基づいて、デフォルトで Propshaft をリソース パイプライン ライブラリとして使用し、Importmap を JavaScript ライブラリとして使用します。 Importmap は JavaScript 処理を実行しません。 </p>
<h3 id="VSCode-またはお気に入りのエディタを使用してプロジェクトを開きます">VSCode またはお気に入りのエディタを使用してプロジェクトを開きます</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>展開…</summary>- 構成より規(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> タグには、ページのレンダリングと適切な機能のための重要な構造要素が含まれています。 <code><head></code> ページの動作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関連付け、CSRF や CSP 保護などのセキュリティ設定を構成するのに役立つメタデータと重要なリソースを含めるために使用されます。
</li> ページのメインコンテンツは、ERB タグを介して <li> 內(nèi)にレンダリングされます。このタグは、Rails <code><body></code> によって動的にレンダリングされるビュー コンテンツを含めるための統(tǒng)合ポイントとして機能します。
</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>展開…<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>コントローラーとアクションの作成時にルートも追加されるため、作成されたアクションには次のリンクからアクセスできます: <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> ファイルを開きます<code>config/routes.rb</code>
</h3>
<ul>ファイルの最後に次の行を追加して、ページのルートを前に作成した <li> コントローラーと <code>pages</code> アクションに誘導します。このようにして、Web サイトまたはシステムにアクセスすると、最初に表示されるページは <code>html_test_1</code> コントローラーの <code>pages</code> ページになります。それ以外の場合は、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>コントローラーの作成時に <li> パラメーターが渡された場合、作成されたアクションのルートの追加を無視できます。完全なコマンドは <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>展開…</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> または標準の <code>rails server</code> を使用して開発サーバーを起動することを忘れないでください。開発サーバーは、JavaScript ファイルと CSS ファイルへの変更を「リッスン」して、ユーザーに提供するために必要な処理を実行します。 </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) アーキテクチャを使用してプロジェクト編成を開始します。ほとんどのコードは次のフォルダーに編成されています: </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-展開"><code>html_test_1</code>展開…</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-展開"><code>html_test_2</code>展開…</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>日付、時刻 (現(xiàn)地): <label> </label>ファイル: <label> </label>畫像: <label> </label>月: <label> </label>番號: <label> </label>パスワード: <label> </label>シングルラジオ: <label> </label><label>ラジオのグループ: </label> <fieldset>ラジオ 1: <legend> </legend>ラジオ 2: <label> </label>ラジオ 3: <label> </label>ラジオ 4: <label> </label><label>範囲: </label> </fieldset>リセット: <label> </label>時間: <label> </label>検索: <label> </label>電話番號: <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` ファイルを開き、上でコピーしたコンテンツを貼り付けます
<fieldset>
<legend></legend>
<datalist></datalist> ページのコンテンツを挿入します</fieldset>
</details><h3 id="展開-code-html-test-code-リンク-https-github-com-cbracco-html-test-page-blob-master-index-html-にアクセスし">展開...<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 フロントエンドの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="wjcelcm34c" class="wzconShengming_sp">
<div id="wjcelcm34c" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當する法的責任を負いません。盜作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796832397.html" title="グラスワンダービルドガイド|ウマゴサメはかなりダービーです" class="phpgenera_Details_mainR4_bottom_title">グラスワンダービルドガイド|ウマゴサメはかなりダービーです</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796833110.html" title="<??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title"><??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796831605.html" title="Uma Musume Pretty Derby Bannerスケジュール（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Bannerスケジュール（2025年7月）</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796831905.html" title="Windowsセキュリティは空白であるか、オプションを表示しません" class="phpgenera_Details_mainR4_bottom_title">Windowsセキュリティは空白であるか、オプションを表示しません</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By 下次還敢</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796836699.html" title="船と墓のためのRimworld Odyssey溫度ガイド" class="phpgenera_Details_mainR4_bottom_title">船と墓のためのRimworld Odyssey溫度ガイド</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div> -->
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類リムーバー</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796832397.html" title="グラスワンダービルドガイド|ウマゴサメはかなりダービーです" class="phpgenera_Details_mainR4_bottom_title">グラスワンダービルドガイド|ウマゴサメはかなりダービーです</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796833110.html" title="<??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title"><??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796831605.html" title="Uma Musume Pretty Derby Bannerスケジュール（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Bannerスケジュール（2025年7月）</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796831905.html" title="Windowsセキュリティは空白であるか、オプションを表示しません" class="phpgenera_Details_mainR4_bottom_title">Windowsセキュリティは空白であるか、オプションを表示しません</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By 下次還敢</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/1796836699.html" title="船と墓のためのRimworld Odyssey溫度ガイド" class="phpgenera_Details_mainR4_bottom_title">船と墓のためのRimworld Odyssey溫度ガイド</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/toolset/development-tools/93" title="SublimeText3 中國語版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中國語版</h3>
</a>
<p>中國語版、とても使いやすい</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1597</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1488</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>72</span>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ja/faq/zt">もっと見る</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main2">
<div id="wjcelcm34c" class="phpgenera_Details_mainL4">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainL4_info">
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796831408.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/431/639/175181807052041.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="ロードスピナーとアニメーションを作成するためのCSSチュートリアル" />
</a>
<a href="http://ipnx.cn/ja/faq/1796831408.html" title="ロードスピナーとアニメーションを作成するためのCSSチュートリアル" class="phphistorical_Version2_mids_title">ロードスピナーとアニメーションを作成するためのCSSチュートリアル</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">CSSロード回転子を作成するには3つの方法があります。1。境界の基本回転子を使用して、HTMLとCSSを介してシンプルなアニメーションを実現(xiàn)します。 2。複數(shù)のポイントのカスタム回転子を使用して、異なる遅延時間を経てジャンプ効果を実現(xiàn)します。 3.ボタンに回転子を追加し、JavaScriptを介してクラスを切り替えて、読み込みステータスを表示します。各アプローチは、ユーザーエクスペリエンスを向上させるために、色、サイズ、アクセシビリティ、パフォーマンスの最適化などのデザインの詳細の重要性を強調(diào)しています。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796831743.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/175182386183257.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSブラウザの互換性の問題とプレフィックスに対処します" />
</a>
<a href="http://ipnx.cn/ja/faq/1796831743.html" title="CSSブラウザの互換性の問題とプレフィックスに対処します" class="phphistorical_Version2_mids_title">CSSブラウザの互換性の問題とプレフィックスに対処します</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 01:44 AM</span>
<p class="Articlelist_txts_p">CSSブラウザの互換性とプレフィックスの問題に対処するには、ブラウザサポートの違いを理解し、ベンダーのプレフィックスを合理的に使用する必要があります。 1. FlexBoxやグリッドのサポート、位置：粘著性の無効、アニメーションのパフォーマンスなどの一般的な問題を理解することは異なります。 2. CANIUSE確認機能サポートステータスを確認します。 3. -webkit-、-moz-、-ms-、-o-およびその他のメーカーのプレフィックスを正しく使用します。 4.自動的にプレフィックスを追加するためにAutoprefixerを使用することをお勧めします。 5. PostCSSをインストールし、ターゲットブラウザを指定するようにBrowserSlistを構成します。 6.建設中の互換性を自動的に処理します。 7. Modernizr検出機能は、古いプロジェクトに使用できます。 8.すべてのブラウザの一貫性を追求する必要はありません、</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796833145.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/175199577133591.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSクリップパスでカスタムシェイプを作成します" />
</a>
<a href="http://ipnx.cn/ja/faq/1796833145.html" title="CSSクリップパスでカスタムシェイプを作成します" class="phphistorical_Version2_mids_title">CSSクリップパスでカスタムシェイプを作成します</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 09, 2025 am 01:29 AM</span>
<p class="Articlelist_txts_p">CSSのクリップパス屬性を作物要素に使用して、寫真やSVGに依存することなく、三角形、円形ノッチ、ポリゴンなどのカスタム形狀になります。その利點には、次のものが含まれます。1。円、楕円、ポリゴンなどのさまざまな基本的な形狀をサポートします。 2。レスポンシブ調(diào)整とモバイル端子に適応可能。 3.アニメーションが簡単で、HoverまたはJavaScriptと組み合わせて動的効果を実現(xiàn)できます。 4.レイアウトフローには影響せず、ディスプレイエリアのみを収穫します。一般的な使用法は、円形のクリップパス：円（50pxatcenter）および三角クリップパス：ポリゴン（50％0％、100 0％、0 0％）などです。知らせ</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796834914.html" title="ディスプレイの違いは何ですか：インライン、ディスプレイ：ブロック、ディスプレイ：インラインブロック？" 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/175217550090568.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="ディスプレイの違いは何ですか：インライン、ディスプレイ：ブロック、ディスプレイ：インラインブロック？" />
</a>
<a href="http://ipnx.cn/ja/faq/1796834914.html" title="ディスプレイの違いは何ですか：インライン、ディスプレイ：ブロック、ディスプレイ：インラインブロック？" class="phphistorical_Version2_mids_title">ディスプレイの違いは何ですか：インライン、ディスプレイ：ブロック、ディスプレイ：インラインブロック？</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:25 AM</span>
<p class="Articlelist_txts_p">Themaindifferencesbetweendisplay：インライン、ブロック、およびinline-blockinhtml/cssarelayoutbehavior、spaceusage、andstylingcontrol.1.inlineelementsflowwithtext、notstartonnewlines、nagrorewidth/height、height、andonlyhorizo??ntalpadddddddddddddddding</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796834918.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/175217558128323.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="スタイリングは、CSSとは異なるリンクを訪問しました" />
</a>
<a href="http://ipnx.cn/ja/faq/1796834918.html" title="スタイリングは、CSSとは異なるリンクを訪問しました" class="phphistorical_Version2_mids_title">スタイリングは、CSSとは異なるリンクを訪問しました</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:26 AM</span>
<p class="Articlelist_txts_p">アクセスしたリンクのスタイルを設定すると、特にコンテンツ集約型のWebサイトでユーザーエクスペリエンスを向上させることができ、ユーザーがより良いナビゲートを支援します。 1。CSSを使用してください：訪問した擬似クラスは、色の変化などの訪問されたリンクのスタイルを定義します。 2。ブラウザは、プライバシーの制限により、いくつかの屬性の変更のみを許可することに注意してください。 3.突然の狀態(tài)を避けるために、色の選択は全體的なスタイルと調(diào)整する必要があります。 4.モバイル端子はこの効果を表示しない場合があり、アイコン補助ロゴなどの他の視覚的なプロンプトと組み合わせることをお勧めします。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796837251.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/175251305059116.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSを使用して応答性のある畫像を作成する方法は？" />
</a>
<a href="http://ipnx.cn/ja/faq/1796837251.html" title="CSSを使用して応答性のある畫像を作成する方法は？" class="phphistorical_Version2_mids_title">CSSを使用して応答性のある畫像を作成する方法は？</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 15, 2025 am 01:10 AM</span>
<p class="Articlelist_txts_p">CSSを使用してレスポンシブ畫像を作成するには、主に次の方法で達成できます。1。最大幅を使用してください：100％と高さ：自動化して、割合を維持しながら畫像がコンテナ幅に適応できるようにします。 2。HTMLのSRCSETおよびサイズの屬性を使用して、異なる畫面に適合した畫像ソースをインテリジェントにロードします。 3.オブジェクトフィットとオブジェクトポジションを使用して、畫像のトリミングとフォーカスディスプレイを制御します。一緒に、これらの方法により、畫像がさまざまなデバイスで明確かつ美しく表示されるようになります。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796847484.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/175348469118409.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="一般的なCSSブラウザの矛盾とは何ですか？" />
</a>
<a href="http://ipnx.cn/ja/faq/1796847484.html" title="一般的なCSSブラウザの矛盾とは何ですか？" class="phphistorical_Version2_mids_title">一般的なCSSブラウザの矛盾とは何ですか？</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 26, 2025 am 07:04 AM</span>
<p class="Articlelist_txts_p">さまざまなブラウザのCSS解析に違いがあるため、主にデフォルトのスタイルの違い、ボックスモデルの計算方法、フレックスボックスおよびグリッドレイアウトサポートレベル、および特定のCSS屬性の一貫性のない動作を含む一貫性のないディスプレイ効果が得られます。 1.デフォルトのスタイル処理は一貫性がありません。解決策は、cssresetまたはremormize.cssを使用して初期スタイルを統(tǒng)合することです。 2。IEの古いバージョンのボックスモデル計算方法は異なります。 Box-Sizing：Border-Boxを統(tǒng)一された方法で使用することをお勧めします。 3. FlexBoxとグリッドは、エッジの場合や古いバージョンでは異なる機能を示します。より多くのテストを行い、Autoprefixerを使用します。 4.一部のCSS屬性の動作は一貫性がありません。 Caniuseは相談して格下げする必要があります。</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ja/faq/1796832540.html" title="CSSユニットの分解：PX、EM、REM、VW、VH比較" 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/175191219061804.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSユニットの分解：PX、EM、REM、VW、VH比較" />
</a>
<a href="http://ipnx.cn/ja/faq/1796832540.html" title="CSSユニットの分解：PX、EM、REM、VW、VH比較" class="phphistorical_Version2_mids_title">CSSユニットの分解：PX、EM、REM、VW、VH比較</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:16 AM</span>
<p class="Articlelist_txts_p">CSSユニットの選択は、設計要件と応答性の要件に依存します。 1.PXは固定サイズに使用され、正確な制御に適していますが、弾力性の欠如に適しています。 2.EMは相対単位であり、親要素の影響によって簡単に引き起こされますが、REMはルート要素に基づいてより安定しており、グローバルなスケーリングに適しています。 3.VW/VHは、レスポンシブデザインに適したビューポートサイズに基づいていますが、極端な畫面の下でのパフォーマンスに注意を払う必要があります。 4.選択するときは、応答性の調(diào)整、要素階層関係、ビューポートの依存関係に基づいて決定する必要があります。合理的な使用は、レイアウトの柔軟性とメンテナンスを改善できます。</p>
</div>
</div>
<a href="http://ipnx.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="wjcelcm34c" class="footer">
<div id="wjcelcm34c" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 學習者の迅速な成長を支援します！</p>
</div>
<div id="wjcelcm34c" class="footermid">
<a href="http://ipnx.cn/ja/about/us.html">私たちについて</a>
<a href="http://ipnx.cn/ja/about/disclaimer.html">免責事項</a>
<a href="http://ipnx.cn/ja/update/article_0_1.html">Sitemap</a>
</div>
<div id="wjcelcm34c" 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://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</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="a9kos" class="pl_css_ganrao" style="display: none;"><strong id="a9kos"><pre id="a9kos"><form id="a9kos"><ins id="a9kos"></ins></form></pre></strong><ol id="a9kos"><th id="a9kos"></th></ol><var id="a9kos"><ol id="a9kos"></ol></var><ol id="a9kos"></ol><small id="a9kos"><bdo id="a9kos"><i id="a9kos"><thead id="a9kos"></thead></i></bdo></small><track id="a9kos"><bdo id="a9kos"></bdo></track><tr id="a9kos"><optgroup id="a9kos"><label id="a9kos"><input id="a9kos"></input></label></optgroup></tr><output id="a9kos"></output><pre id="a9kos"><ol id="a9kos"><progress id="a9kos"></progress></ol></pre><style id="a9kos"><source id="a9kos"><pre id="a9kos"><dfn id="a9kos"></dfn></pre></source></style><u id="a9kos"><optgroup id="a9kos"><sup id="a9kos"></sup></optgroup></u><samp id="a9kos"><em id="a9kos"></em></samp><strong id="a9kos"><sup id="a9kos"><strike id="a9kos"><dl id="a9kos"></dl></strike></sup></strong><style id="a9kos"><rt id="a9kos"></rt></style><ruby id="a9kos"></ruby><form id="a9kos"><sub id="a9kos"></sub></form><progress id="a9kos"><menuitem id="a9kos"><ul id="a9kos"><small id="a9kos"></small></ul></menuitem></progress><li id="a9kos"><tbody id="a9kos"><pre id="a9kos"></pre></tbody></li><progress id="a9kos"></progress><legend id="a9kos"></legend><style id="a9kos"></style><dl id="a9kos"><tbody id="a9kos"><menuitem id="a9kos"><b id="a9kos"></b></menuitem></tbody></dl><option id="a9kos"></option><i id="a9kos"></i><tr id="a9kos"></tr><label id="a9kos"><div id="a9kos"></div></label><tr id="a9kos"></tr><strike id="a9kos"></strike><var id="a9kos"></var><rp id="a9kos"><abbr id="a9kos"></abbr></rp><sup id="a9kos"><kbd id="a9kos"><optgroup id="a9kos"></optgroup></kbd></sup><video id="a9kos"></video><button id="a9kos"></button><em id="a9kos"></em><pre id="a9kos"></pre><listing id="a9kos"></listing><big id="a9kos"></big><ul id="a9kos"><table id="a9kos"></table></ul><pre id="a9kos"><p id="a9kos"><source id="a9kos"></source></p></pre><i id="a9kos"></i><ol id="a9kos"><tfoot id="a9kos"></tfoot></ol><big id="a9kos"><meter id="a9kos"></meter></big><option id="a9kos"><nobr id="a9kos"><dfn id="a9kos"><cite id="a9kos"></cite></dfn></nobr></option><table id="a9kos"></table><noframes id="a9kos"><form id="a9kos"></form></noframes><cite id="a9kos"></cite><optgroup id="a9kos"></optgroup><progress id="a9kos"></progress><pre id="a9kos"><font id="a9kos"><pre id="a9kos"></pre></font></pre><font id="a9kos"></font><address id="a9kos"></address><blockquote id="a9kos"></blockquote><pre id="a9kos"><pre id="a9kos"><progress id="a9kos"></progress></pre></pre><video id="a9kos"><li id="a9kos"></li></video><dfn id="a9kos"></dfn><small id="a9kos"><xmp id="a9kos"></xmp></small><track id="a9kos"><bdo id="a9kos"><rt id="a9kos"><wbr id="a9kos"></wbr></rt></bdo></track><tt id="a9kos"><small id="a9kos"></small></tt><pre id="a9kos"><pre id="a9kos"><xmp id="a9kos"></xmp></pre></pre><rt id="a9kos"><menu id="a9kos"><tbody id="a9kos"><dfn id="a9kos"></dfn></tbody></menu></rt><em id="a9kos"><span id="a9kos"></span></em><del id="a9kos"></del><label id="a9kos"></label><thead id="a9kos"></thead><del id="a9kos"></del><dfn id="a9kos"><abbr id="a9kos"><var id="a9kos"><label id="a9kos"></label></var></abbr></dfn><td id="a9kos"><form id="a9kos"></form></td><acronym id="a9kos"><tt id="a9kos"></tt></acronym><ol id="a9kos"><acronym id="a9kos"><tr id="a9kos"></tr></acronym></ol><strong id="a9kos"></strong><label id="a9kos"></label><big id="a9kos"><samp id="a9kos"><em id="a9kos"><dfn id="a9kos"></dfn></em></samp></big><tt id="a9kos"></tt><listing id="a9kos"><cite id="a9kos"><fieldset id="a9kos"></fieldset></cite></listing><span id="a9kos"></span><thead id="a9kos"></thead><mark id="a9kos"></mark><form id="a9kos"></form><font id="a9kos"><em id="a9kos"></em></font><var id="a9kos"></var><small id="a9kos"></small><li id="a9kos"></li><label id="a9kos"><style id="a9kos"></style></label><ruby id="a9kos"></ruby><tbody id="a9kos"></tbody><button id="a9kos"><th id="a9kos"><i id="a9kos"></i></th></button><font id="a9kos"><u id="a9kos"><menu id="a9kos"><label id="a9kos"></label></menu></u></font><rp id="a9kos"></rp><menu id="a9kos"></menu><p id="a9kos"></p><dl id="a9kos"><form id="a9kos"></form></dl><bdo id="a9kos"><var id="a9kos"></var></bdo><listing id="a9kos"></listing><th id="a9kos"></th><em id="a9kos"></em><optgroup id="a9kos"><sup id="a9kos"><tfoot id="a9kos"></tfoot></sup></optgroup><nav id="a9kos"><strong id="a9kos"><dd id="a9kos"></dd></strong></nav><strike id="a9kos"><progress id="a9kos"><pre id="a9kos"><small id="a9kos"></small></pre></progress></strike><ruby id="a9kos"></ruby><abbr id="a9kos"></abbr><legend id="a9kos"></legend><pre id="a9kos"><menuitem id="a9kos"></menuitem></pre><label id="a9kos"><pre id="a9kos"><legend id="a9kos"><pre id="a9kos"></pre></legend></pre></label><thead id="a9kos"><font id="a9kos"></font></thead><rp id="a9kos"></rp><span id="a9kos"><thead id="a9kos"></thead></span><var id="a9kos"></var><sup id="a9kos"><rp id="a9kos"><abbr id="a9kos"><strong id="a9kos"></strong></abbr></rp></sup><menu id="a9kos"></menu><address id="a9kos"></address><small id="a9kos"></small><nav id="a9kos"><input id="a9kos"></input></nav><i id="a9kos"><s id="a9kos"><pre id="a9kos"><thead id="a9kos"></thead></pre></s></i><wbr id="a9kos"></wbr><ul id="a9kos"></ul><pre id="a9kos"></pre><abbr id="a9kos"><menuitem id="a9kos"><span id="a9kos"><dd id="a9kos"></dd></span></menuitem></abbr><strong id="a9kos"><style id="a9kos"><th id="a9kos"><meter id="a9kos"></meter></th></style></strong><tfoot id="a9kos"><legend id="a9kos"><strong id="a9kos"><dfn id="a9kos"></dfn></strong></legend></tfoot><ins id="a9kos"></ins><tfoot id="a9kos"><tbody id="a9kos"><dl id="a9kos"></dl></tbody></tfoot><ruby id="a9kos"><th id="a9kos"><em id="a9kos"><dfn id="a9kos"></dfn></em></th></ruby><ul id="a9kos"><ins id="a9kos"><progress id="a9kos"><s id="a9kos"></s></progress></ins></ul><s id="a9kos"><big id="a9kos"><span id="a9kos"><input id="a9kos"></input></span></big></s><legend id="a9kos"></legend><ruby id="a9kos"><video id="a9kos"><tbody id="a9kos"></tbody></video></ruby><label id="a9kos"><legend id="a9kos"><bdo id="a9kos"><form id="a9kos"></form></bdo></legend></label><dl id="a9kos"><sup id="a9kos"><ruby id="a9kos"><optgroup id="a9kos"></optgroup></ruby></sup></dl><dl id="a9kos"></dl><b id="a9kos"><dfn id="a9kos"></dfn></b><label id="a9kos"></label><strike id="a9kos"><form id="a9kos"><acronym id="a9kos"></acronym></form></strike><kbd id="a9kos"><optgroup id="a9kos"><var id="a9kos"><center id="a9kos"></center></var></optgroup></kbd><ul id="a9kos"></ul><pre id="a9kos"><strike id="a9kos"><p id="a9kos"><label id="a9kos"></label></p></strike></pre><option id="a9kos"><noframes id="a9kos"><dfn id="a9kos"></dfn></noframes></option><samp id="a9kos"></samp><xmp id="a9kos"></xmp><td id="a9kos"></td><div id="a9kos"></div><pre id="a9kos"><form id="a9kos"></form></pre><legend id="a9kos"><td id="a9kos"><thead id="a9kos"><font id="a9kos"></font></thead></td></legend><u id="a9kos"></u><xmp id="a9kos"></xmp><label id="a9kos"><pre id="a9kos"><p id="a9kos"><strike id="a9kos"></strike></p></pre></label><legend id="a9kos"><address id="a9kos"></address></legend><menu id="a9kos"></menu><legend id="a9kos"><wbr id="a9kos"><div id="a9kos"></div></wbr></legend></div>
</html>