ICON公式ブログ

ICON公式ブログ

静岡大学コンテンツ制作サークルICONの公式ブログです

トップ > サマーブログリレー2020 > Bootstrap4でサクっとウェブページの見た目を整える【サマーブログリレー2020 10日目】

Bootstrap4でサクっとウェブページの見た目を整える【サマーブログリレー2020 10日目】

サマーブログリレー2020 Bootstrap

この記事はICONサマーブログリレー2020 10日目の記事です。

はじめに

こんばんは、プロ班の老害㌠1の 杞憂 です。色々と追加していたら今回も遅刻してしまいました、申し訳ありません。

今回はBootstrapでサクっとウェブページの見た目を整える話です。
(サクっとできるかどうかは個人差があります。)

この記事では基本的に2020年10月現在での最新版であるBootstrap4を扱います。
(ちなみに、そろそろv5が来るらしいです。)

Bootstrapとは？

Bootstrapは、もともとTwitter社で開発されていたCSSフレームワーク2です。

そもそもCSS(Cascading Style Sheets)とは、ウェブページの見た目(スタイル)を指定するための言語です。皆さんが見ているウェブページのほとんどはHTML(HyperText Markup Language)で作成されていますが、HTMLはウェブページ内の各要素の意味や構造を定義しているだけなので、HTMLだけでは見栄えが悪くなります。これに、CSSで色・サイズ・レイアウトなどの見た目を指定することで、ウェブページの見栄えが良くなります。

f:id:iconcreator:20201005034518p:plain

CSSフレームワークとは、簡単に言えば「ウェブページの便利パーツ集」です。CSSで見た目を整えたボタンやテキスト、ナビゲーションバーなどの様々なパーツをパターン化し、簡単に利用できるようにしています。

Bootstrapの特徴

レスポンシブデザインに対応

レスポンシブデザインとは、PC、タブレット、スマートフォンなどのデバイスの画面サイズによって、レイアウトを柔軟に調整する手法です。Bootstrapを利用することで、CSSには手を加えずに、簡単にマルチデバイス対応のウェブページを作成できます。

f:id:iconcreator:20201008141753g:plain

豊富なパーツ

Bootstrapには、ウェブページでよく使われるボタン、フォーム、カード、ナビゲーションバーなどの様々なパーツ(部品、コンポーネント)が最初から用意されています。これらのパーツを組み合わせることで、デザインの整ったウェブページを素早く作成できます。

多くの人、サービスに使われている

例えば、2020年10月現在のGitHubのcss-frameworkのスター数のランキングを見ると、Bootstrapがダントツで1位であり、人気のCSSフレームワークであることがわかります。

  1. Bootstrap (144k)
  2. Semantic UI (48.5k)
  3. Bulma (41.3k)
  4. Materialize (38k)
  5. Tailwind CSS (28k)

利用者数が多いため、インターネット上に情報がたくさんあります。何か困ったことが起きたとしても、検索すればほとんどの問題は解決します。

よくあるホームページをBootstrapでつくる

完成イメージ

f:id:iconcreator:20201005005843p:plain

こんな感じのウェブページをつくっていきます。

HTMLファイル作成

以下、Windows10環境で操作を説明していきます。(Macでも似たような操作で実行できると思います。)

Step.1：新規作成

(どこでもいいですけど、わかりやすいので)デスクトップ上で右クリックをして、「新規作成」から「テキスト ドキュメント」を作成します。

f:id:iconcreator:20201004211532p:plain

(私のデスクトップの壁紙は気にしないでください。3)

Step.2：ファイル名変更

ファイルの名前を「sample.html」に変えます。

f:id:iconcreator:20201004211609p:plain

f:id:iconcreator:20201004211643p:plain

(もしここで元のファイルに拡張子.txtが付いていなければ、「エクスプローラー」の「表示」の「ファイル名拡張子」をONにしてください。)

f:id:iconcreator:20201004211724p:plain

(ファイル名の変更、というより拡張子を変更しようとするとなんか出ますが、「はい」を押して無視してください。)

f:id:iconcreator:20201004211846p:plain

f:id:iconcreator:20201004212139p:plain

Step.3：ファイルをエディタで開く

sample.html上で右クリックして、「プログラムから開く」でHTMLファイルをエディタで開きます。私は†あえて†メモ帳で開きますが、みなさんはAtomなりVS Codeなりで開くことをおすすめします。

f:id:iconcreator:20201004212404p:plain

Step.4：ファイルにコピペ

以下のコードをHTMLファイルにコピペしてください。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>さんぷるページ</title>
  </head>
  <body>
    <h1>さんぷる</h1>
    <p>これはさんぷるてきすとです。</p>
  </body>
</html>

とりあえず、HTMLファイルのテンプレができました。

先ほどと同様に、sapmle.html上で右クリックして、「プログラムから開く」で今度はお好きなブラウザ(Microsoft EdgeやGoogle Chromeなど)で開いてみてください。

f:id:iconcreator:20201005040924p:plain

こんな感じで表示されればOKです。

Bootstrapを利用できるようにする

Bootstrapを利用するには以下の2つの方法があります。

  • CDNを利用する
  • ファイルをダウンロードして読み込む

CDNを利用する場合

CDN(Content Delivery Network)とは、インターネット上のコンテンツを効率的に配信するネットワークです。これを利用し、BootstrapやjQuery、Popperを読み込みます。

ここ(日本語版はここ)にも書いてありますが、HTMLファイルに以下の4文を付け加えるだけでBootstrapが利用可能となります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--以下の1文をheadタグとhead閉じタグの間のどこかに追加-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>さんぷるページ</title>
  </head>
  <body>
    <h1>さんぷる</h1>
    <p>これはさんぷるてきすとです。</p>
    <!--以下の3文をbody閉じタグの直前にこの順番で追加-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

注意点

コメント(<!-- コメント -->で囲まれた部分は無視される)にも書きましたが、最初の1文はheadタグ内、残りの3文は</body>の直前に、この順番で追加してください。bootstrap.min.jsファイルは事前にjQueryやPopperを必要とする(依存している)ので、bootstrap.min.jsファイルは一番最後に読み込みます。また、</body>の直前にJavaScriptファイルを読み込むのは、(ウェブページを早く表示させるための)お作法です。別の場所でも動きますが、Bootstrap公式サイトのStarter templateでは直前に追加してるので、それにならいます。

ファイルをダウンロードして読み込む場合

CDNを利用せず、ファイルをダウンロードして読み込みたい場合は、以下の手順にしたがいます。

  1. Bootstrapの公式サイトのダウンロードページの「Compiled CSS and JS」の「Download」ボタンでzipファイル(2020年10月現在ではbootstrap-4.5.2-dist.zip)を入手します。
  2. jQueryの公式サイトのダウンロードページの「Download the compressed, production jQuery x.x.x slim build(xは任意の数字)」4のリンクでjquery.jsファイル(2020年10月現在ではjquery-3.5.1.slim.min.js)を入手します。
  3. 1で入手したzipファイルを解凍し、そのフォルダ内のbootstrap.min.cssとbootstrap.bundle.min.js、および2で入手したjquery.jsファイルを、HTMLファイルに以下の3文を加えることで読み込みます。5
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--以下の1文をheadタグとhead閉じタグの間のどこかに追加-->
    <link rel="stylesheet" href="./bootstrap.min.css">
    <title>さんぷるページ</title>
  </head>
  <body>
    <h1>さんぷる</h1>
    <p>これはさんぷるてきすとです。</p>
    <!--以下の2文をbody閉じタグの直前にこの順番で追加-->
    <script src="./jquery-3.5.1.slim.min.js"></script>
    <script src="./bootstrap.bundle.min.js"></script>
  </body>
</html>

なお、上のソースコードはsample.htmlと同じディレクトリに3つのファイルを置いている場合です。sample.htmlと同じディレクトリにcssフォルダとjsフォルダをつくって、cssフォルダにbootstrap.min.css、jsフォルダにbootstrap.bundle.min.jsとjquery.jsを置いた場合は、

  • <link rel="stylesheet" href="./css/bootstrap.min.css">
  • <script src="./js/jquery-3.5.1.slim.min.js"></script>
  • <script src="./js/bootstrap.bundle.min.js"></script>

と書きます。

ちなみに、Bootstrapのファイルはダウンロードして、jQueryについてはCDNを利用する、という方法もあります。

参考にするサンプルやガイド

公式サイトのExamples

よくある使用例がいくつか挙げられています。この記事でウェブページなんかつくらなくても、もうこれでいいんじゃないかな

このページの「Download examples」ボタンを押すと、使用例のhtmlファイルが入手できます。

この日本語版はこちらです。

Bootstrap4移行ガイドの「各項目での変更事項」

このページの「グリッドシステム」、「イメージ」、「テーブル」とかの青字の小見出しをクリックして個別のページに飛べば、使い方がほとんど載っています。ない場合は「Bootstrap4移行ガイド ○○(例：カード)」とかで検索すれば、個別のページがヒットします。

つくる

ここから、サンプルやガイドを参考にしつつ、サクっとウェブページを作成していきます。なお、ここからのソースコードでは、BootstrapなどはCDNを利用して読み込みます。

ナビゲーションバー

ナビゲーションバーのガイドを参考にナビゲーションバーを追加します。

f:id:iconcreator:20201008132951p:plain

(以下、各パーツのソースコードはbodyタグ内に追加していきます。最後のソースコード(全文)で確認してください。)

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><!--変更-->
  <div class="container">
    <a class="navbar-brand" href="#">さんぷる</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="Navber">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">home <span class="sr-only">(現位置)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">about</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            works
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">music</a>
            <a class="dropdown-item" href="#">graphic</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">others</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">wiki</a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

ナビゲーションバーは暗い色にしたかったので、navbar-light bg-lightをnavbar-dark bg-darkに変更しました。

ジャンボトロン

ジャンボトロンのガイドを参考にジャンボトロンを追加します。

f:id:iconcreator:20201008133016p:plain

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">さんぷるサークル</h1>
    <p class="lead">さんぷるサークルは、日本のどこかにあるデジタルコンテンツ制作サークルです。</p>
    <hr class="my-4">
    <p>曲、イラスト、ゲームなどのデジタルコンテンツを制作しています。</p>
    <a class="btn btn-outline-primary btn-lg" href="#" role="button">もっと詳しく</a><!--変更-->
  </div><!-- /.container -->
</div><!-- /.jumbotron -->

ボタンが気に入らなかったので、btn-primaryをbtn-outline-primaryに変更しました。

グリッドシステム

グリッドの例を参考に、要素を横に3つ並べた配置をしてみます。

f:id:iconcreator:20201008133038p:plain

<div class="jumbotron jumbotron-fluid bg-white"><!--変更-->
  <div class="container">
    <h2 class="text-center">活動範囲</h2>
    <hr class="mb-4">
    <div class="row">
      <div class="col-md-4 text-center">
        <h3>音楽</h3>
        <p>楽曲の制作などのDTMを行っています。</p>
      </div>
      <div class="col-md-4 text-center">
        <h3>グラフィック</h3>
        <p>イラストやデザインの制作、3Dモデリングなどを行っています。</p>
      </div>
      <div class="col-md-4 text-center">
        <h3>プログラミング</h3>
        <p>特にゲーム作りのためのプログラミング技術やゲームエンジンを学んでいます。</p>
      </div>
    </div>
  </div><!-- /.container -->
</div><!-- /.jumbotron -->

背景色の灰色が連続で続くのは嫌なので、bg-whiteを追加しました。

カード

カードのガイドを参考に、ブログ記事を並べてみます。

f:id:iconcreator:20201008133100p:plain

f:id:iconcreator:20201008133833p:plain

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h2 class="text-center">ブログ</h2>
    <hr class="mb-4">
    <div class="row row-cols-1 row-cols-md-2">
      <div class="col mb-4">
        <div class="card">
          <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iconcreator/20200924/20200924165634.png" class="card-img-top" alt="7th blog image">
          <div class="card-body">
            <h5 class="card-title">【音ゲー紹介】音ゲーやりたい....やりたくない....?【ICONサマーブログリレー７日目】</h5>
            <p class="card-text">この記事はICONサマーブログリレー2020 7日目の記事です。 こんにちは、ICON音楽班２年の K+2Mochi です。 最近、コロなんとかウィルスが流行っているせいで ゲーセンに行ける機会が減ってしまいました...。これは重度の音ゲーマーである私にとって危機的な...</p>
            <a href="#" class="card-link">記事を読む</a>
          </div>
        </div>
      </div>
      <div class="col mb-4">
        <div class="card">
          <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iconcreator/20200926/20200926111727.png" class="card-img-top" alt="6th blog image">
          <div class="card-body">
            <h5 class="card-title">Unityで美少女JKを召喚し、赤スパを投げて優勝した話【ICONサマーブログリレー2020　6日目】</h5>
            <p class="card-text">この記事はICONサマーブログリレー2020 6日目の記事です。 はじめに 美少女JKを召喚する。 本記事は健全なコンテンツです UnityにMMDモデルをインポートする 赤スパを投げる 赤スパとは 赤スパを投げる（物理（演算）） 優勝する あとがき 参考記事 はじめに...</p>
            <a href="#" class="card-link">記事を読む</a>
          </div>
        </div>
      </div>
      <div class="col mb-4">
        <div class="card">
          <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iconcreator/20200929/20200929210338.png" class="card-img-top" alt="5th blog image">
          <div class="card-body">
            <h5 class="card-title">Live2DとFacerigでイラストを動かしてみた【ICONサマーブログリレー2020 5日目】</h5>
            <p class="card-text">Live2Dでイラストを動かしてみます。首より上を中心に、実際にトラッキングソフトで動かせるモデルを製作しました。その一部始終です。</p>
            <a href="#" class="card-link">記事を読む</a>
          </div>
        </div>
      </div>
      <div class="col mb-4">
        <div class="card">
          <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iconcreator/20200927/20200927111651.jpg" class="card-img-top" alt="4th blog image">
          <div class="card-body">
            <h5 class="card-title">300円+税であのゲームで運動する【ICONサマーブログリレー2020 4日目】</h5>
            <p class="card-text">この記事はICONサマーブログリレー2020 4日目の記事です。 皆さんこんにちは。音楽班のOy-Okuです。 自分はここに入っているくせに作曲に金も時間も割いてないよくわからない野郎なので、詳しい音楽の話とかはせずICONと何も関係ない与太話をさせていただき...</p>
            <a href="#" class="card-link">記事を読む</a>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.container -->
</div><!-- /.jumbotron -->

(7日目の記事の画像は差し替えました)

グリッドカードを利用して、横に並べています。また、ボタンではなくカードのリンクにしました。

その他(無関係)

以下はBootstrapとは何の関係もない部分です。

Twitter埋め込み

  1. 上のページの「What would you like to embed?」の下のフォームにTwitterのURL(例えばICONなら https://twitter.com/ICON_sh )を入れて、Enterキーを押します。
  2. 「Here are your display options」に移動する(少し下に行くだけ)ので、「Embedded Timeline」をクリックします。
  3. 「That’s all we need, unless you’d like to set customization options.」と出たら、「Copy Code」ボタンを押して埋め込みコードをコピーします。

このコードを利用してTwitterのタイムラインを埋め込みます。

フッター

「copyright(c) 2020 杞憂, All Rights Reserved.」と表示するフッターをつくります。(今更ですが、権利を持ってるのは私じゃなくてICONとICON公式ブログな気がします。)

調整

f:id:iconcreator:20201008133213p:plain

ジャンボトロンとジャンボトロンの間の余白が揃っていなくて気持ち悪いので、全てのジャンボトロンにmb-0を追加して、下部のマージンを0にしました。

ちなみに、mb-0は"margin-bottomを0にする"、簡単に言うと「要素の下部のマージンを無くす」という意味です。詳細はこちら(空白ユーティリティ)。空白ユーティリティ、便利です。

ソースコード(全文)を見る

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>さんぷるページ</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">さんぷる</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="Navber">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">home <span class="sr-only">(現位置)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">about</a>
            </li>
            <li class="nav-item dropdown">
              <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                works
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">music</a>
                <a class="dropdown-item" href="#">graphic</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">others</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">wiki</a>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>
    <div class="jumbotron jumbotron-fluid mb-0">
      <div class="container">
        <h1 class="display-4">さんぷるサークル</h1>
        <p class="lead">さんぷるサークルは、日本のどこかにあるデジタルコンテンツ制作サークルです。</p>
        <hr class="my-4">
        <p>曲、イラスト、ゲームなどのデジタルコンテンツを制作しています。</p>
        <a class="btn btn-outline-primary btn-lg" href="#" role="button">もっと詳しく</a>
      </div><!-- /.container -->
    </div><!-- /.jumbotron -->
    <div class="jumbotron jumbotron-fluid bg-white mb-0">
      <div class="container">
        <h2 class="text-center">活動範囲</h2>
        <hr class="mb-4">
        <div class="row">
          <div class="col-md-4 text-center">
            <h3>音楽</h3>
            <p>楽曲の制作などのDTMを行っています。</p>
          </div>
          <div class="col-md-4 text-center">
            <h3>グラフィック</h3>
            <p>イラストやデザインの制作、3Dモデリングなどを行っています。</p>
          </div>
          <div class="col-md-4 text-center">
            <h3>プログラミング</h3>
            <p>特にゲーム作りのためのプログラミング技術やゲームエンジンを学んでいます。</p>
          </div>
        </div>
      </div><!-- /.container -->
    </div><!-- /.jumbotron -->
    <div class="jumbotron jumbotron-fluid mb-0">
      <div class="container">
        <h2 class="text-center">ブログ</h2>
        <hr class="mb-4">
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="card">
              <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iconcreator/20200924/20200924165634.png" class="card-img-top" alt="7th blog image">
              <div class="card-body">
                <h5 class="card-title">【音ゲー紹介】音ゲーやりたい....やりたくない....?【ICONサマーブログリレー７日目】</h5>
                <p class="card-text">この記事はICONサマーブログリレー2020 7日目の記事です。 こんにちは、ICON音楽班２年の K+2Mochi です。 最近、コロなんとかウィルスが流行っているせいで ゲーセンに行ける機会が減ってしまいました...。これは重度の音ゲーマーである私にとって危機的な...</p>
                <a href="#" class="card-link">記事を読む</a>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card">
              <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iconcreator/20200926/20200926111727.png" class="card-img-top" alt="7th blog image">
              <div class="card-body">
                <h5 class="card-title">Unityで美少女JKを召喚し、赤スパを投げて優勝した話【ICONサマーブログリレー2020　6日目】</h5>
                <p class="card-text">この記事はICONサマーブログリレー2020 6日目の記事です。 はじめに 美少女JKを召喚する。 本記事は健全なコンテンツです UnityにMMDモデルをインポートする 赤スパを投げる 赤スパとは 赤スパを投げる（物理（演算）） 優勝する あとがき 参考記事 はじめに...</p>
                <a href="#" class="card-link">記事を読む</a>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card">
              <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iconcreator/20200929/20200929210338.png" class="card-img-top" alt="7th blog image">
              <div class="card-body">
                <h5 class="card-title">Live2DとFacerigでイラストを動かしてみた【ICONサマーブログリレー2020 5日目】</h5>
                <p class="card-text">Live2Dでイラストを動かしてみます。首より上を中心に、実際にトラッキングソフトで動かせるモデルを製作しました。その一部始終です。</p>
                <a href="#" class="card-link">記事を読む</a>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card">
              <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iconcreator/20200927/20200927111651.jpg" class="card-img-top" alt="7th blog image">
              <div class="card-body">
                <h5 class="card-title">300円+税であのゲームで運動する【ICONサマーブログリレー2020 4日目】</h5>
                <p class="card-text">この記事はICONサマーブログリレー2020 4日目の記事です。 皆さんこんにちは。音楽班のOy-Okuです。 自分はここに入っているくせに作曲に金も時間も割いてないよくわからない野郎なので、詳しい音楽の話とかはせずICONと何も関係ない与太話をさせていただき...</p>
                <a href="#" class="card-link">記事を読む</a>
              </div>
            </div>
          </div>
        </div>
      </div><!-- /.container -->
    </div><!-- /.jumbotron -->
    <div class="jumbotron jumbotron-fluid bg-white mb-0">
      <div class="container">
        <h2 class="text-center">最新情報</h2>
        <hr class="mb-4">
        <div class="row">
          <div class="col-md-6">
            <h1>さんぷる</h1>
            <p>これはさんぷるてきすとです。</p>
          </div>
          <div class="col-md-6">
            <a class="twitter-timeline" data-height="600" href="https://twitter.com/ICON_sh?ref_src=twsrc%5Etfw">Tweets by ICON_sh</a>
            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
          </div>
        </div>
      </div><!-- /.container -->
    </div><!-- /.jumbotron -->
    <footer class="text-center text-light bg-dark py-4">
      <small>copyright(c) 2020 杞憂, All Rights Reserved.</small>
    </footer>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

これで、完成イメージで示したウェブページが完成しました。

発展：カスタマイズ

上書き

例えば、headタグ内に以下を追加すると、

<style>
  .btn, .btn-lg {
    border-radius: 0;
  }
</style>

f:id:iconcreator:20201005045552p:plain

こんな感じで丸角を消去できます。

Sass

上の記事にも書かれていますが、上書きだとコードの肥大化やメンテンナンス性の低下を招く恐れがあるため、可能であればSassファイルを利用した方がいいです。Sass(Syntactically Awesome StyleSheet)は、CSSを拡張してより効率的に書けるようにした言語で、変数や四則演算が使えたり、入れ子構造に出来たりと、便利な機能がたくさんあります。先ほどの丸角の消去も、Bootstrapが用意しているSassファイルを利用すれば、1つの変数をtrueからfalseに変えるだけで可能です。

ただ、個人的にはインストールやビルドが少しだけ面倒だな...と感じました。慣れてしまえばそうでもありませんが、慣れるまでは少し大変かも。(まあでも上書きしまくってぐちゃぐちゃになったソースコードをいじるよりはマシ)

Rubyでインストールする方法を解説しているサイトもありますが、私はたまたま自分の環境にNode.jsを入れていた(そしてRubyは入れていなかった)ので、以下の記事を参考にNode.jsとGulpでインストールしました。

軽量化

上の記事の「軽量化」のように、使う予定のない部分をカットすることで、Bootstrapの読み込みを早くすることができます。

他のテーマ

最後に、「デフォルトスタイルのままだとBootstrapっぽさが残るし、デザインや配色がダサくてヤダ！」という人のために、Bootstrapのテーマをいくつかご紹介します。

マテリアルデザインっぽいテーマ

先日、静大情報LT大会で荒川さんが「フラットデザインの話」をされましたが、マテリアルデザインはこのフラットデザインの一種です。あのGoogleが提唱していることや、Vue.jsのUIフレームワークであるVuetifyでも採用されていることから、けっこう使われています。デザインなんにもワカラナイ私は「とりあえずこれにしたがっておけば、デザインが破綻することはないでしょ」という謎の安心感から、マテリアルデザインっぽくすることもあります。

Bootstrapの使用感を残しつつ、見た目をマテリアルデザインっぽくしたテーマがいくつかあります。

Material Design for Bootstrap

Bootstrap Material Design

https://fezvrasta.github.io/bootstrap-material-design/

ただ、わざわざ「マテリアルデザインっぽいBootstrap」を使わなくても、Googleが提供している「Material Component for the Web」を使えばいいじゃん、という意見もあります。

Honoka

これは私が個人的に好きなテーマです。Bootstrapは英語圏で開発されているので、当然フォントは「Segoe UI」「Arial」「sans-serif」などの日本語表示を想定していないフォントです。Honokaは「Hiragino Kaku Gothic ProN」「メイリオ」などを追加しているので、日本語表示がきれいです。あと、配色もきれいで、個人的には、Honokaをベースにして作られたテーマであるUmiの配色がすごく好きです。6

まとめ

この記事では、Bootstrapの話をしました。

  • 1からCSSを全部書かなくても、ウェブページの見た目は整えられるよ！
  • サクっとウェブページの見た目を整える手段の一つに、BootstrapなどのCSSフレームワークを利用するという方法もあるよ！

この2点だけ覚えておいてもらえると嬉しいです。

おまけ

以下おまけです。時間が有り余っている人だけ読んでください。

花譜さん

まずはこの話をさせてください。花譜さんは2018年10月18日から活動している、日本のどこかにいる16さいのバーチャルシンガーです。この界隈ではけっこう有名で、最近はテレビでもたまに目にするようになりました。(これは私のどうでもいい情報なのですが、テレビで関ジャムを見ていた時に、バーチャルシンガーの紹介で花譜さんの「過去を喰らう」のMVが流れたときは、つい「花譜さん！！」と大声をあげてしまいました。)

さて、2019年8月6日に投稿された「quiz」から約1年後の2020年7月8日に「answer」が投稿されました。

www.youtube.com

www.youtube.com

...もうね、これ完全に「quiz」に対する「answer」じゃん(個人の感想です)。「quiz」は花譜さんの曲の中でも特に好きな曲のうちの1つなのですが、「answer」もよかったです。あとMVがきれいすぎませんか？？？なんですかあのパーティクル？最高かよ。

ブルーアーカイブ

まずはこの動画を見て！

www.youtube.com

絵が！きれい！かわいい！音楽もいい！かわいい！！かわいい！！！

これだけでもうインストールが確定しますよね。私はしました。

「ブルーアーカイブ」は、「アズールレーン」や「アークナイツ」などでお馴染みの株式会社Yostarの新作ゲームです。プレイヤーは先生となり、数千の学園が集まる超巨大な学園都市で発生する様々な問題を、重火器を持った女子生徒たちと一緒に解決していきます。

8月6日～16日までの10日間、クローズドベータテストがありました。私はAndroid端末を持ってなくて応募することもできなかったので、当選した実況者さんのプレイ動画を眺めながら、ゲームの雰囲気を感じ取っていました。ちょうど3Dのちびキャラがとてとて歩いて小規模戦闘するゲーム(各キャラの動きはオート)とかあったらおもしろそうだな～と思っていた7ところにこのゲームが飛び込んできたので、つい「Yostar、また私の心を読んだな？(アークナイツという前科がある)」と思ってしまいました。

配信は2020年内ということで、めちゃくちゃ楽しみです。(でも無理はしないでほしいです)

今年のサマーブログ振り返り

一応、これがサマーブログリレー2020の最終日の記事で、私もサマーブログリレー2020企画長のうちの1人だったりするので、ブログリレーを振り返ってみます。

今回のブログリレーでは、私の記憶が正しければ、初めてグラ班さんからの参加者が記事を書いてくれました。非常に嬉しいです！

また、これに加えて、みなさん「好き放題」書いてくれました。この字面だけだと困っているように見えるかもしれませんが、実際は逆で、むしろ「いいぞ！もっとやれ！！」と本気で思っています。サークル内でのお知らせでも言った通り、私はこのブログを「ICONの活動内容なんか関係ない、カオスな空間」にしていきたいと思っています。(私が夢見た、東工大のtraPのような、早大のMIS.Wのようなブログに近づいていっているな、と感じています。)

カオスなブログを目指そう！

これからもぜひどんどん参加していただきたいです！ちなみに、12月に例年通りアドベントカレンダー2020企画をしようと思っているので、ぜひお願いします～！！

おわりに

ここまでお付き合いいただき、ありがとうございました！

  1. 千葉大のいかろちゃん(ikaro1192)さんが以前この記事で使っていて、面白いな、私も使いたいなと2018年から思っていました。ついに使うことができてとても嬉しいです(？)。↩

  2. ちなみに、Bootstrapはドロップダウンメニューなどの「動き」を実現するためにJavaScriptも利用しているので、「CSSフレームワークでもある」と言うべきかもしれません。GitHubのbootstrapのaboutでも"The most popular HTML, CSS, and JavaScript framework for …“と言っています。↩

  3. 私のデスクトップの壁紙はごちうさのエイプリルフール企画2019「CLOCKWORK RABBIT」で配布された壁紙です。めちゃくちゃかわいいので2019年4月1日からずっとこの壁紙を使っています。ちなみに、ごちうさ3期が10月10日から始まるよ！みんな観ような！！！↩

  4. jQueryの公式サイトには「Download the compressed, production jQuery x.x.x」「Download the uncompressed, development jQuery x.x.x」「Download the compressed, production jQuery x.x.x slim build」などいろいろなリンクがあります。まず、compressedとuncompressedの違いは、minかそうでないか、です。bootstrap.cssとbootstrap.min.cssの関係と同様に、ソースコード内の改行や半角スペースなどを省くことでファイルサイズを小さくし、読み込み速度を早めたものがminです。また、slim buildとついているものは、slim(ajaxとエフェクトモジュールを除外したバージョン)で、除外したぶん読み込みが早くなります。↩

  5. CDNを利用する方法では「bootstrap.min.js」を読み込んでいたのに、こちらの方法では「bootstrap.bundle.min.js」を読み込んでいます。また、Popperを読み込んでいません。実は、popper.jsをダウンロードするのは少しめんどくさい(この記事のようにnpmでダウンロードしたり、GitHubで該当バージョンを探してダウンロードしたり…)のです。そのため、今回はPopperが含まれている「bootstrap.bundle.min.js」を読み込んでいます。↩

  6. ラブライブ！は見たことも遊んだこともないので、名前とかの元ネタはよく知らないのですが。↩

  7. 確か昨年の最後のICONの定期集会で「3Dのちびキャラがとてとて歩いて戦ってるのを見たい」って言った気がします。あの時点で頭の中では小規模戦闘まで考えていましたが、このゲームは「まさに」でした。(違う点としては、ブルーアーカイブは味方が前進していきますが、私はタワーディフェンスのように、向かってくる敵から最終防衛ラインを守る、というのをイメージしていました)↩