Skip to content

Latest commit

 

History

History
230 lines (148 loc) · 10.5 KB

advanced-css.md

File metadata and controls

230 lines (148 loc) · 10.5 KB
Raw

モダンなWebページを作ろう

みなさんが普段目にするWebページは細部までデザインにこだわっていたり、ウィンドウの大きさに合わせてデザインが変わるようなレスポンシブデザインのものが多いと思います。

そのようなWebページをすべて0からCSSを書いて作るのは大変ですよね。

少ない手間で整ったデザインを行うには フレームワーク を利用することが効果的です。

ここでは、世界でも最も利用されているCSSフレームワーク Bootstrap を使ってみましょう。

余白を作ろう

スクリーンショット 2023-12-08 16 03 31

みなさんの現在のWebページは、このように左右に余白がないレイアウトになっていると思います。

下のコードのように、 レスポンシブ対応 Bootstrap CSS Bootstrap JS の3行を追加すると、Bootstrapを導入することができます。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- レスポンシブ対応 -->
    <link href="style.css" rel="stylesheet">
    <title>はじめてのWebページ</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <!-- Bootstrap CSS -->
</head>

<body>
    <h1>はじめてのWebページ</h1>
    <p>こんにちは，GDSC Kyutechです．</p>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script> <!-- Bootstrap JS -->
</body>

</html>

しかし、ただBootstrapを導入しただけではデザインは変わりません。

まずは、コンテナ を使ってみましょう。

下のコードのように、body に <div class="container"> を追加し、その中に h1 と p を入れます。

このときに、<div class="container"> を閉じるために </div> を忘れないでください。

<body>
    <div class="container"> <!-- Content Start -->
        <h1>はじめてのWebページ</h1>
        <p>こんにちは，GDSC Kyutechです．</p>
    </div> <!-- Content End -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
</body>

スクリーンショット 2023-12-08 16 16 12

このように、余白のあるレイアウトに変更されました！

さらに、Bootstrapはレスポンシブデザインに対応しているため、ウィンドウサイズを変更すると…

スクリーンショット 2023-12-08 16 17 41

そのウィンドウサイズに合わせて適切な余白に変更されます！

コンテナの大きさを変えることもできるので、 Bootstrap公式Docs（コンテナ） を参考に変更してみましょう！

Warning

うまく行かない場合は、以下のような原因が考えられます。

  1. インターネットに接続されていない

    BootstrapはCDNと呼ばれる仕組みを用いているため、通常オフラインでは使用できません。

  2. 再読み込みされていない

    Webページを編集した際には再読み込みをしてください。

  3. 自分のCSSが邪魔をしている

    自作CSSの内容によってはBootstrapと競合を起こすことがあります、一度自作CSSをコメントアウトしてみてください。

    <head>
  ...
  <!-- <link href="style.css" rel="stylesheet"> -->
  ...
</head>

うまく行かない場合や、わからないことがある場合は気軽にお近くのCore-teamメンバーに声をかけてください！

画像を配置しよう

まずは、普通に画像を入れてみましょう。

    <div class="container">
        <h1>はじめてのWebページ</h1>
        <p>こんにちは，GDSC Kyutechです．</p>
        <img src="https://http.cat/200"></img> <!-- 画像の表示 -->
    </div>

十分に大きなウィンドウサイズでは問題ありませんが、小さいウィンドウサイズでははみ出してしまいます。

スクリーンショット 2023-12-08 16 43 21

レスポンシブデザインに対応していないWebページでは、このようにウィンドウサイズを考えないレイアウトになってしまいます。

ここでBootstrapの出番です。

イメージ - レスポンシブな画像 を参考に、imgタブをclass="img-fluid"にしましょう。

        <img src="https://http.cat/200" class="img-fluid"></img> <!-- 画像の表示 -->

そうすると、ウィンドウサイズに合わせて画像の大きさが変わるようになります！

サイズ指定や配置などを BootstrapDocs イメージ を参考に変更してみましょう！

Tip

今回使用した猫の画像は HTTP Cats と呼ばれる、HTTP ResponseStatusCode を猫の画像に置き換えてくれる WebAPI です。

HTTP ResponseStatusCodeについては、 MDN Web Docs - HTTP Status を読んでみましょう。

WebAPIについては、 MDN Web Docs - WebAPI を読んでみましょう。

テーブルを自分で作ってみよう

ここまでの内容で、Bootstrapの使い方がわかってきたと思います。

それでは、ここからは出題形式です。

下の画像のような表を Bootstrap Tables を参考に自分で作ってみましょう！

スクリーンショット 2023-12-08 17 01 40

ヒント - わからない方へ

BootstrapDocs を読んでみよう

以下のリンクから BootstrapDocs Tables を読んでみましょう！

https://getbootstrap.jp/docs/5.3/content/tables/#%e6%a6%82%e8%a6%81

概要 という名前の段落にサンプルコードがあるので、右上のコピーボタンからコピーすることができます！

表を作ることができたら、 Bootstrap Tables バリエーション を参考に色付けをしましょう！

スクリーンショット 2023-12-08 17 07 18

ヒント - わからない方へ

どこに色が付いているかを見よう

  1. 表題
    # First Last Handle の行、つまり表題は青色ですね。
    Bootstrapでは青色のデザインがprimaryと定義されています。
  2. セル
    @twitter のセルは赤色ですね。 Bootstrapでは赤色のデザインがdangerと定義されています。

Bootstrap Tables には他にも色々なオプションがあるため、気に入ったものを試してみましょう！

カードを自分でカスタマイズしてみよう

最後のお題は少し難しめですが、下の画像のようなWebページをつくってみましょう。

まずは、BootstrapDocs から「カード」について説明されているページを探しましょう！

スクリーンショット 2023-12-08 17 29 38

ヒント - わからない方へ

カードのページを探そう

BootstrapDocs を開き、左側のバーから Components を探してみましょう。

３つのカードを並べる方法を探そう

Bootstrap Card を開き、右側のバーから カードグループ を探してみましょう。

カードを横にする方法を探そう

Bootstrap Card を開き、右側のバーから 水平方向 を探してみましょう。

ボタンを付ける方法を探そう

ボタンの実装は二通りのやり方があります。

  1. Bootstrap Card のいくつかのパーツはボタンを付随しているので、その部分を流用する。
  2. Bootstrap Buttons からボタンをつける方法を探す。

ボタンのカスタマイズがしたい場合などは 2 を参考にしましょう！

まとめ

最後の課題は少し難しかったと思いますが、Bootstrapを使うだけでイケてるレスポンシブデザインを簡単に作れることがわかったと思います。

実際の開発では、このようなフレームワークやライブラリを使用し、自分たちだけで0から作らないことで開発効率を上げています。

Bootstrap以外にも、 Tailwind や MUI があります。

ぜひ、自分のやってみたいことに合わせて色々なオプションやフレームワークに触れてみてください！

目次に戻る