ホームページ > 記事 > ウェブフロントエンド > CSS フレームワークをマスターするだけで、美しい Web ページをすばやく作成できます。

CSS フレームワークをマスターするだけで、美しい Web ページをすばやく作成できます。

WBOYオリジナル: 2024-01-05 16:37:291044ブラウズ

CSS フレームワークを簡単に使い始めて、美しい Web ページを簡単に作成できます。特定のコード例が必要です。

インターネットの継続的な発展に伴い、Web デザインは重要な分野。 CSS (Cascading Style Sheets) フレームワークの出現により、Web デザインのプロセスが大幅に簡素化され、一般のユーザーが美しい Web ページを簡単に作成できるようになりました。この記事では、一般的に使用される CSS フレームワークをいくつか紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。

1. Bootstrap フレームワーク
Bootstrap は、現在最も人気のある CSS フレームワークの 1 つです。豊富なスタイルとコンポーネント、応答性の高いデザイン、広範なサポートとドキュメントが備わっています。以下は、Bootstrap フレームワークを使用して構築された単純な Web ページのコード例です。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bootstrap Website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
</head>

<body>
  <header class="bg-primary text-white text-center py-5">
    <h1>Welcome to My Website</h1>
  </header>

  <div class="container mt-5">
    <h2>About Me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
  </div>

  <div class="container mt-5">
    <h2>Contact Me</h2>
    <form>
      <div class="mb-3">
        <label for="name" class="form-label">Your Name</label>
        <input type="text" class="form-control" id="name">
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Your Email</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="mb-3">
        <label for="subject" class="form-label">Subject</label>
        <input type="text" class="form-control" id="subject">
      </div>
      <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" rows="5"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

上記のコードでは、CDN リンクを参照して、Bootstrap フレームワークの CSS ファイルと JavaScript ファイルを導入しました。次に、Bootstrap が提供するクラスを使用してスタイルとレイアウトを定義します。たとえば、container クラスを使用してコンテナを作成し、mt-5 を使用して上下の余白を設定します。同時に、bg-primary クラスと text-white クラスを使用して、頭部の背景色とテキスト色を設定します。

2. セマンティック UI フレームワーク
セマンティック UI は、セマンティックデザインに焦点を当て、豊富なテーマとカスタマイズオプションを提供するもう 1 つの人気のある CSS フレームワークです。以下は、Semantic UI フレームワークを使用して構築された単純な Web ページのコード例です。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Semantic UI Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>

<body>
  <header class="ui inverted vertical center aligned segment">
    <h1>Welcome to My Website</h1>
  </header>

  <div class="ui container segment">
    <h2>About Me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
  </div>

  <div class="ui container segment">
    <h2>Contact Me</h2>
    <form class="ui form">
      <div class="field">
        <label for="name">Your Name</label>
        <input type="text" id="name">
      </div>
      <div class="field">
        <label for="email">Your Email</label>
        <input type="email" id="email">
      </div>
      <div class="field">
        <label for="subject">Subject</label>
        <input type="text" id="subject">
      </div>
      <div class="field">
        <label for="message">Message</label>
        <textarea id="message" rows="5"></textarea>
      </div>
      <button class="ui primary button" type="submit">Submit</button>
    </form>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>

</html>

上記のコードでは、CDN リンクを参照して、Semantic UI フレームワークの CSS ファイルと JavaScript ファイルを導入しました。次に、Semantic UI によって提供されるクラスを使用してスタイルとレイアウトを定義します。たとえば、クラス inverted、vertical、center aligned を使用して頭のスタイルを実装します。

3. Bulma フレームワーク
Bulma は、シンプルで柔軟な Web デザインソリューションを提供する軽量の CSS フレームワークです。以下は、Bulma フレームワークを使用して構築された単純な Web ページのコード例です。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bulma Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
</head>

<body>
  <header class="hero is-primary is-bold">
    <h1 class="title has-text-centered">Welcome to My Website</h1>
  </header>

  <section class="section">
    <div class="container">
      <h2 class="title">About Me</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="title">Contact Me</h2>
      <form>
        <div class="field">
          <label class="label" for="name">Your Name</label>
          <div class="control">
            <input class="input" type="text" id="name">
          </div>
        </div>
        <div class="field">
          <label class="label" for="email">Your Email</label>
          <div class="control">
            <input class="input" type="email" id="email">
          </div>
        </div>
        <div class="field">
          <label class="label" for="subject">Subject</label>
          <div class="control">
            <input class="input" type="text" id="subject">
          </div>
        </div>
        <div class="field">
          <label class="label" for="message">Message</label>
          <div class="control">
            <textarea class="textarea" id="message" rows="5"></textarea>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/js/bulma.min.js"></script>
</body>

</html>

上記のコードでは、CDN リンクを参照して、Bulma フレームワークの CSS ファイルと JavaScript ファイルを導入しました。次に、Bulma が提供するクラスを使用してスタイルとレイアウトを定義します。たとえば、クラス hero、is-primary、is-bold を使用して頭のスタイルを実装します。

概要
上記は、一般的に使用される 3 つの CSS フレームワークの簡単な紹介であり、具体的なコード例を示しています。これらのフレームワークを使用すると、美しい Web ページをすばやく簡単に作成できます。ただし、初心者としては、最初はフレームワークに頼りすぎず、Web デザインの本質をより深く理解し、習得するために、CSS ネイティブ構文とレイアウトスキルを徐々に学習する必要があります。この記事があなたの学習に役立つことを願っています。また、あなたの Web デザインの旅が成功することを願っています。

以上がCSS フレームワークをマスターするだけで、美しい Web ページをすばやく作成できます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript 架构 css bootstrap 样式表 ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：シンプルガイド: わずか 5 つのステップでパーソナライズされた CSS フレームワークを作成する次の記事：シンプルガイド: わずか 5 つのステップでパーソナライズされた CSS フレームワークを作成する

続きを見る