• ホーム
• ブログ
• Firebase情報

CSSの手抜き 〜 Bootstrap

2022年3月24日

CSS の手抜き 〜 Bootstrap

Vue の公式チュートリアルでも、CSS の部分に関する学習は Javascript や HTML の部分に比べると少なくなっていました。Web 開発の「機能」という観点で見ると、重要なのは、HTML と Javascript になるのが大きな理由です。CSS は「見た目」をよくするという位置付けなのでどうしても優先順位は低くなります。最小限の手間で、見た目をよくする方法に、Bootstrap などの予め標準的な HTML の記述の装飾をまとめた仕組みを利用すると、最低限の知識で、見た目の良いページのデザインが可能になります。この記事では、Vue で Bootstrap を利用するやり方を紹介しています。

Bootstrap とは？

Bootstrap は、HTML で書かれたページの基本的な「飾り」を予め準備して提供している「フレームワーク」です。 この機能を利用すると、Web ページのデザインを行う際に、CSS を書くための時間を最小限に抑えることが可能になります。特に、Web アプリなどの開発では、機能の方が重視される傾向が強く、基本的な HTML の部品の表示の仕方にこだわらないでも良い場合も多いので、上手に利用すると開発の手間を最小限にできます。

Bootstrap 以外にも似たような仕組みは沢山提供されているので、調べて利用すると好みのデザインのフレームワークを見つけられるかと思います。

Bootstrap の利用例

次に、Bootstrap を使うとどんな事ができるのかを「ボタン」を例に見てみます。 下のイメージは、三つの例を挙げています。

• HTML の記述だけの場合
• Bootstrap を利用した場合
• CSS の記述を Bootstrap の「飾り」に近くなるように書いた場合

実際の HTML のボタンの記述は以下のようになっています。

<button>No-CSS</button>
<button class="btn btn-primary">Bootstrap</button>
<button class="css-sample">CSS</button>

HTML だけの記述だと、若干ですが、見劣りします。

Bootstrap では、予め Bootstrap のフレームワークの中に、CSS の記述が作成されているので、その「タグ」を指定するだけです。この場合は「btn btn-primary」を指定しています。

この場合は、以下の CSS を別に記述しています。

.css-sample {
  border: 1px solid green;
  border-radius: 3px;
  background-color: green;
  color: white;
  height: 38px;
  width: 96px;
}

実際には、これ以外にも、マウスのカーソル（矢印）をボタンの上に持っていった時の記述やクリックした際の記述などもあるので、全く同じような「飾り」のデザインにするには、さらに CSS の記述が必要になります。

つまり、Bootstrap を利用すると、基本的な CSS の記述は Bootstrap の中で用意されているので、CSS を記述する必要はないことになります。初心者にはありがたい機能ですよね？

Bootstrap を使うには？

Bootstrap が便利なのはお分かり頂けたかと思います。 実際に、Bootstrap を利用するには、HTML の記述に以下の記述を追加するだけです。

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

これは、Bootstrap の Web サイトに行くと詳しい説明が書かれています。CDN(Contents Delivery Network)を利用しているので Web ページが読み込まれる際に、Web ブラウザが自動的に必要な情報をインターネットから取り込んでくれるます。

あとは、必要な「タグ」を HTML の記述に追加すれば、とりあえず無難な HTML の部品のデザインを利用できます。

(*)利用する機能によっては、さらに Javascrpt のモジュールを取り込む必要があります。 もちろん、必要なファイルをダウンロードして、自分の Web サイトに置くことも可能です。しかし、一般的な Bootstrap の利用の場合には、Web サイトのアクセスに何にしても、インターネットの接続が必要なので、このように、リンクを追加する方法で利用する場合が多くなっています。また、別の Web サイトが利用している場合も多く、この場合は、Web ブラウザが別のサイトのアクセスで必要な情報を取り込んでいる場合も多く、性能的にも問題にならないケースが殆どです。

タグの利用例は、Bootstrap のサイトで詳しく解説されています。こちらを参考にしながら、HTML に追加する様にすれば利用できます。

Vue で利用するには？

Vue で利用する場合も、やり方自体は殆ど同じです。 Vue の場合、基になる Web ページに Vue が必要な表示を埋め込むようになっているので、この基になる Web ページに、リンクを埋め込めば利用できます。

この連載では、「Vite」を使って、Vue のサンプルプロジェクトを作成した場合は、プロジェクトフォルダにある「index.html」に上の、CDN のリンクを追加すれば利用できます。

どの様に、Vue を利用するか、サンプルプロジェクトの作成のやり方によってファイルの位置が違ったりするので注意が必要です。従来の、「vue cli」などで作成した場合には、「index.html」のファイルは、プロジェクトフォルダの下の「public」フォルダになっています。

まとめ

Bootstrap の様な、フレームワークを利用すると CSS の記述の手間を大幅に減らす事が可能です。 特に、Web 開発のプログラミングを始めたばかりの方は、学習の中心に、HTML や Javascript に重点を置いた方が効率良く、学習を進めることができるので有利です。

欠点は、多くの人が利用しているので、ページのデザインが似た様なものになる事があります。しかし、多くの場合、Web アプリでは、細かいデザインよりは機能が重視される傾向にあるので、基本的な HTML のデザインが似たものになる事自体は大きな問題ではない場合が殆どです。

まずは、機能の実現に重点を置いて、余裕があれば、CSS で違いを出すという順序で良いかと思います。

Copyright(c) 2017-2021 by Silicon Valley Super Ware, all rights reserved.