一人で開発する場合は、「自分のルールで好きなように」開発することができますが、実際は複数人でコードを書くことのほうが多いです。このとき、メンバーが個性を発揮しすぎると、他の人から理解できないコードを量産してしまう恐れがあります。
フレームワークには、予め決められた書き方のルールがあり、このルールに沿った書き方をすることで機能を実装できる といったものになります。
そのため、人ごとのコードの差異がなくなり、属人化しにくくなります。また、機能を簡単に実装できるため開発スピードが上がるなど、フレームワークには多くのメリットがあります。
今回は、CSSフレームワークについて学習します。
今回の学習内容
CSSフレームワークとは
CSSフレームワークは、あらかじめデザインされた CSS をまとめて配布しているものです。
この フレームワーク を 外部スタイルシート として読み込むことで、それぞれの 部品 に簡単にデザインを装飾することができます。
デザインされたものが すぐに使用できる ため、開発スピードが上がり全体に統一感がでます。
CSSフレームワークごとの学習が必要になることや、他のサイトとデザインが似てしまう、コードが複雑になる、などのデメリットもありますが、開発コストを抑えることができる 点から、使えておいて損はありません。
代表的なCSSフレームワーク
CSSフレームワーク にも多くの種類があります。
いくつかの代表的なCSSフレームワークのリンクを掲載するので、興味のあるフレームワークを見つけたら実際に試してみましょう。
また、フレームワークを選ぶポイントとして、色やレイアウトの他に「form（フォーム）」のデザインも確認してみましょう。
CSSフレームワーク を使うことで、簡単にデザインされたスタイルを使用することができます。
慣れるまでの 学習コスト は必要ですが、バランス良く使っていけばいいと思います。
CSSフレームワークの使い方
CSSフレームワークは無料で使うことができます。
ここでは、最も多く使用されている Bootstrap というフレームワークの使い方について簡単に説明します。
外部スタイルシートを読み込む
トップページにある「Get started」ボタンをクリックします。
今回は JavaScript を使用するコンポーネントは使わないので、CSS のみを読み込みます。
Quick start 下の CSS の linkタグをコピーして、headタグ 内に貼り付けます。
以下のようになります。
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
ブラウザで確認して、「Hello, world!」が確認できたらOKです。
コンポーネントを使用する
左側のナビゲーションメニューから Components をクリックします。
様々な コンポーネント がありますが、どの コンポーネントにも使い方とコードが分かりやすく記載されています。
今回は Card コンポーネントを試してみます。
bodyタグ 内に Example から好きなものを選び、貼り付けます。（画像やリンク先のアドレスを変更しています）
<div class="card" style="width: 18rem;">
<img src="https://mlvpbpwnpiq0.i.optimole.com/OYPRj44-kTAxQ-cl/w:360/h:240/q:65/rt:fill/g:ce/https://rabico.dev/wp-content/uploads/2020/05/CSS_basic_003.png" class="card-img-top" alt="CSS基礎 その３">
<div class="card-body">
<h5 class="card-title">CSS基礎 その３</h5>
<p class="card-text">レスポンシブデザインについて「聖杯レイアウト（Holy Grail Layout）」を使って学んでいきます。</p>
<a href="https://rabico.dev/css-basic-003/" class="btn btn-primary">ページを見る</a>
</div>
</div>
実行結果
このように、デザインされたコンポーネントを簡単に使うことができました。簡単ですよね。
他にも「form（フォーム）」の部品や、ナビゲーションバーなど多くのコンポーネントがあるので、試してみてください。
Bootstrapのレスポンシブデザイン
Bootstrap は レスポンシブデザイン に対応しており、class名で画面サイズごとのスタイル を指定することで実現できます。
例えば、576px 以上の画面幅には sm 、768px 以上の画面幅には md などを 使用し、画面サイズごとのスタイルを指定することができます。
以下の例は Overview · Bootstrap に記載されているものです。実際にブラウザで画面の幅を変えながら動きを確認してみてください。
<div class="container bg-primary">576px までは 横幅を 100% で表示します</div>
<div class="container-sm bg-secondary">576px までは 横幅を 100% で表示します</div>
<div class="container-md bg-success">768px までは 横幅を 100% で表示します</div>
<div class="container-lg bg-danger">992px までは 横幅を 100% で表示します</div>
<div class="container-xl bg-warning">1200px までは 横幅を 100% で表示します</div>
Bootstrapで聖杯レイアウト
前回の レスポンシブデザイン で学習した 聖杯レイアウト をBootstrapを使って実装してみます。
Bootstrap の Flex · Bootstrap ページを参考に作成します。
こちらも前回同様に、必ず ご自身のブラウザで試して みてください。
<body class="d-flex flex-column min-vh-100">
<header class="bg-primary">ヘッダー</header>
<div class="d-flex flex-column flex-lg-row flex-grow-1">
<main class="order-1 order-lg-2 flex-grow-1 bg-light">メインコンテンツエリア</main>
<nav class="order-3 order-lg-1 bg-success">ナビゲーション</nav>
<aside class="order-2 bg-warning">広告エリア</aside>
</div>
<footer class="bg-primary">フッター</footer>
</body>
前回と違い、Bootstrap のスタイルを使用するので class属性 の記述が多くなっています。
header {
flex-basis: 50px; /* 初期値を設定 */
}
nav,
aside,
footer {
flex-basis: 100px;
}
@media (min-width: 992px) {
nav,
aside {
flex-basis: 200px;
}
}
CSS の記述はとてもシンプルになりました。
実行結果
※分かりやすく表示させるため上記とは横幅を変更しています
