フロントエンドフレームワーク　18-20日目　2024/10/24-26（お金持ちまでの道のり）

本日はBootstrapやTailwind CSSなどフロントエンドフレームワークについて勉強します。

フロントエンドフレームワーク

フロントエンドフレームワークは、ウェブページのデザインや機能を効率よく作成するために、あらかじめ用意されたスタイル（CSS）や動作（JavaScript）を集めたツールです。BootstrapやTailwind CSSなどがあり、デザインを統一しやすく、少ないコードで素早くページを構築できます。

事前定義されたスタイル(クラス/CSS)

これらのフレームワークには、あらかじめ定義されたCSSクラスがたくさん用意されており、特定のクラスをHTML要素に適用するだけで、見た目を簡単に変えることができます。自分で一からCSSを記述しなくても、これらのクラスを使うことで効率よくデザインを整えられます。

ボタンのスタイル（シンプルなボタン）

<style>
    .simple-button {
        background-color: #4CAF50; /* 緑色 */
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

    .simple-button:hover {
        background-color: #45a049; /* 少し暗い緑色 */
    }
</style>

<button class="simple-button">シンプルなボタン</button>

グリッドシステム

グリッドシステムとは、ウェブページのレイアウトを縦横の「グリッド（格子状のマス目）」に基づいて整然と配置する仕組みです。画面をいくつかの列に分け、その列に要素を配置することで、デザインの一貫性や整頓されたレイアウトを簡単に実現できます。特に、BootstrapのようなCSSフレームワークには、レスポンシブなグリッドシステムが備わっており、画面サイズに応じて要素の並び方が自動で調整されます。

<div class="container">
  <div class="row">
    <div class="col-4">左側の列</div>
    <div class="col-4">中央の列</div>
    <div class="col-4">右側の列</div>
  </div>
</div>

この例では、画面幅に応じて3つの列が横並びに表示され、レスポンシブにレイアウトが調整されます。

事前定義されたコンポーネント（Bootstrapの場合）

フレームワークには、よく使われるUIコンポーネントも事前にデザイン済みの状態で提供されています。これにより、デザインの一貫性を保ちつつ、使いやすいインターフェースを素早く構築することができます。

ナビゲーションバー（Bootstrapで提供されているコンポーネント）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
    </ul>
  </div>
</nav>

カードデザイン

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some text inside the card.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tailwind CSSの場合

Tailwind CSSは、カスタマイズが簡単なユーティリティファーストのCSSフレームワークです。小さなCSSクラスを組み合わせて、独自のデザインを素早く作ることができます。他のフレームワークとは異なり、事前定義されたデザインに依存せず、細かくカスタマイズできます。

ボタンのスタイル

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

本日の感想

本来なら１日で終わるところを３日もかかってしまいました。急がねば。。
でも今日学んだことを使えばwordpressのHPのテーマ（cocoon）に頼らずHPをデザインできるということに気づきました。これからプログラマーとしての力を示す第一歩として、テーマに頼らず自分の力でHPをデザインしてHPをポートフォリオサイト化しようと思います。