Ruby on Rails フロントエンド Rápido com Frameworks CSS Classless ou Class-Light Usando CDN-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Ruby on Rails フロントエンド Rápido com Frameworks CSS Classless ou Class-Light Usando CDN

DDD

Jan 04, 2025 pm 04:40 PM

Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light Usando CDN

Web 向けの開発を始めていて、フロントエンドに特化することに重点を置いていない場合、最も困難となる可能性がある障壁の 1 つは、Web のスタイルを簡単に設定できることです。醜い HTML .

初めて接触した人にとって、HTML にスタイルを適用するための事前定義されたユーティリティクラスを備えた一連の文字と数字を含む HTML を理解しようとするのは、謎めいて神秘的で超自然的なことです。

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

ログイン後にコピー

ユーティリティクラスを使用する CSS フレームワークは、優れており、多用途で、応答性が高く、エレガントであり、その他多くの特性を備えていますが、Tailwind CSS が唯一のソリューションではありません。 もっと早くてシンプルなものが必要な場合は、クラスレスまたはクラスライトの CSS フレームワークを使用する方が良い解決策になります。

クラスレス CSS フレームワークは、クラスを使用せずに、HTML 要素を直接スタイルします。クラスライトフレームワークは、自動スタイルといくつかのオプションのユーティリティクラスを組み合わせてカスタマイズし、使用の汎用性を高めます。

クラスレスまたはクラスライトのアプローチを使用すると、1 行、2 行、または 3 行で HTML スタイルをすばやく解決できます。

以下で見てみましょう。

バージョン 8 での Ruby on Rails フレームワークと Propshaft および Importmap の使用;
HTML ページの標準レイアウトのファイルについて理解する;
コンテンツを作成して 4 つの HTML ページに追加し、CSS でのスタイルをテストします。
ページ用に作成されたルートの簡単な説明
作成されたページへのリンクを含むようにデフォルトのレイアウトを変更します。
CDN 経由で 12 個の CSS フレームワークをデフォルトのレイアウトに追加します。
CSS フレームワークにデフォルトでライトモードとダークモードが設定されているかどうかを確認する方法を理解します。
次のステップに関する提案;

新しい Rails アプリケーションを開始する

rails コマンドが実行終了時の実行時間を表示するために使用されるまでの時間。以下の例では、47 秒かかりました。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

ログイン後にコピー

Rails 8 は、No Build の理念に基づいて、デフォルトで Propshaft をアセットパイプラインライブラリとして使用し、Importmap を JavaScript ライブラリとして使用します。 --skip-test を使用してテストライブラリをスキップするようにお願いします。
必要に応じて、 --javascript esbuild パラメータを渡すことで、esbuild を使用して JavaScript を処理できます。 Importmap は、JavaScript に対してビルドや処理を一切実行しません。

VSCode または好みのエディターでプロジェクトを開きます

$ cd classless-css-cdn && code .

ログイン後にコピー

デフォルトの Rails レイアウト app/views/layouts/application.html.erb を理解する。

設定優先規則 (CoC) により、Rails は application.html.erb をデフォルトのレイアウトとして使用してすべてのページをレンダリングします。
Rails 8 の元のファイルには、以下にコピーしたファイルと同じまたは類似したコンテンツが含まれている必要があります。

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

ログイン後にコピー

内の上部… これらには、ページがレンダリングされ、正しく機能するための重要な構造要素が含まれています。 head タグは、ページの動作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関係、CSRF や CSP の保護などのセキュリティ設定を構成するのに役立つ重要なメタデータとリソースを含めるために使用されます。
ページのメインコンテンツは内にレンダリングされます。、ERB タグ <%= yield %> を介して。このタグは、Rails によって動的にレンダリングされるビューのコンテンツを含める統合ポイントとして機能します。

コントローラーページとアクション html_test_1、html_test_2、html_test_3、および html_test_4 を使用してテストページを生成します。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

ログイン後にコピー

上記のコントローラーとアクションの作成時と同様に、ルートも追加され、リンクから作成されたアクションにアクセスできるようになります。
- localhost:3000/pages/html_test_1
- localhost:3000/pages/html_test_2
- localhost:3000/pages/html_test_3
- localhost:3000/pages/html_test_4

VSCode で config/routes.rb ファイルを開きます

ファイルの最後に以下の行を追加して、ページルートを以前に作成したコントローラーページとアクション html_test_1 に誘導します。したがって、Web サイトまたはシステムにアクセスするときに表示される最初のページは、コントローラーページの html_test_1 ページになります。それ以外の場合は、デフォルトの Rails ページが表示されます。

$ cd classless-css-cdn && code .

ログイン後にコピー

コントローラーの作成時に --skip-routes パラメーターを渡していた場合は、作成されたアクションへのルートの追加を無視することもできました。完全なコマンドは、rails gcontrollerpages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes になります。

Railsのルートを表示する

ターミナルを使用すると、コントローラーページなどからコントローラー (-c を使用) を指定してルートを表示できます

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

ログイン後にコピー

または、
ですべてのルートを表示できます

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

ログイン後にコピー

アドレス http://127.0.0.1:3000/rails/info/routes を使用してブラウザ経由でルートにアクセスすることもできます。 bin/dev で開発サーバーを起動するか、プロジェクトのルートディレクトリから Rails Server で標準の Rails サーバーを起動することを忘れないでください。開発サーバーは、JavaScript ファイルと CSS ファイルの変更を「リッスン」して、ユーザーが利用できるようにするために必要な処理を実行します。
これらのファイルに変更を加えてブラウザで即座に表示するには、Rails Livre Reload のような gem をインストールする必要があります。

CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成してみましょう。

Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクトの整理を開始します。コードの多くは次のフォルダーに編成されています:

コードがドメイン/ビジネスロジックおよびデータに関連している場合は、app/models フォルダーに保管します。
ビューに関連するコード (HTML、JSON、XML など) は app/views にあります。
リクエストのライフサイクルに関連するコードは、アプリ/コントローラーに含まれます。

html_test_1 ページのコンテンツを挿入します。

リンク https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html にアクセスし、以下に示すようにメインタグの内容をすべてコピーします。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

ログイン後にコピー

Rails サーバーを起動すると、見苦しい単純な HTML が表示されますか?

Rails 開発サーバーを bin/dev で起動するか、標準サーバーを Rails サーバーで起動し、ブラウザを 127.0.0.1:3000 で開きます。

$ cd classless-css-cdn && code .

ログイン後にコピー

ページを開くと、前に作成した html_test_1、html_test_2、html_test_3、html_test_4 ページに追加した 4 つのリンクが上部に表示されます。
これまでのところ、たくさんの作業があります。それぞれを開くと、HTML がまだ CSS でスタイル設定されていないことがわかります。これは次に行います。

app/views/layouts/application.html.erb ページを再度開き、CDN 経由でクラスレス CSS スタイルを含めます。

以下のコンテンツの後

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

ログイン後にコピー

の前に、次の内容を貼り付けます。これらのスタイルはすべて必要なわけではありません。さまざまなオプションをテストできるように挿入されています。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-cdn --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

ログイン後にコピー

Normalize CSS と Pico CSS を除き、ほとんどのスタイルはコメントアウトされています
ファイルを保存してページを更新するか、サーバーを再起動してください
Pico CSS 以外のスタイルをテストするには、スタイルの CDN を構成する行をコメントアウトします。この場合、行そして、別のスタイルの行 (たとえば、Simple CSS 行) のコメントを解除します。
VSCode で行をコメントしたりコメント解除するには、Ctrl K C キーの組み合わせを使用します。

はい、スタイリッシュな HTML ですか?

上記のスタイルシートを保存して Rails サーバーを起動すると、選択した CSS フレームワークでスタイル設定された HTML が表示されます。

ダークモード

一部のスタイルにはダークモードのオプションがあります。確認するには、色のカスタマイズオプションでコンピュータのテーマを変更します。 Windows で「アプリのダークモードを有効にする」を検索し、ダークモードとライトモードを切り替えると、オペレーティングシステムの変更後に HTML ページが自動的に変更されます。