【CSS】Bootstrap きほんの「き」

CSS

(最新更新月:2021年5月)

「CSSも面白いけどいつも同じ記述ばかりになってきた」

「CSSも大事だけどもっと中身に時間をかけたい!」

と言う方も多いのではないでしょうか?

そんな方へは、Bootstrapをオススメします!

こちらの記事では

Bootstrapの基本、使い方

について解説していきます

Bootstrapとは、

CSSをパッケージ化し、クラス名を入れるだけでCSSが適用される優れもの

料理に例えると、

CSSは具材や調味料一つ一つ

Bootstrapは、

野菜千切りセットであったり、味付きのスープであったり、カレーのルーであったり一定のクオリティでパッケージ化されたもの

だと言えます

早速見ていきましょう!

Bootstrapを始める

始め方はとても簡単です

下記をコピペしHTMLファイルのheadタグ内へ貼り付けよう

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

「headタグなどについてよくわからない!」と言う方はまずこちらの記事を読んでから先に進みましょう!

上記のコードは2021年5月時点公式ドキュメントより取得したものです

新しいものに変わっている場合もありますので、新たに取得することもオススメします

はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

また、こちらの導入方法はあくまでも初学者の方向けです

他にも色々なやり方が用意されてますので、是非公式ドキュメントにて自分に合ったやり方を探してみてください

使用例

HTMLだけの記述ですと見た目はあまりよくありません

CSSでなく、Bootstrapのクラスを使ってみると、

記述としては、それぞれ一つづつクラスを指定しただけ

<p class="text-danger text-center">テキストを中央寄せ</p>
<p class="bg-primary text-light">背景が青、文字が白</p>
<p class="mx-3">マージン</p>

いくつかクラスを指定しただけであっという間に変わりました!

クラスを覚える必要はない!

クラス名はたくさんありますが、全て覚える必要はありません

ここでは公式ドキュメントからどのようにクラスを探し出すか、を解説します

「ドキュメントを選択」

【例】「テキストカラーを探してみよう」

クラス名は「 . 」で表されます!

※「よくわからない!」という方はこちらを参考に!

例えば緑っぽい色(text-success)の場合は、

<p class="text-success">緑色!</p>

となります!

まとめ

公式ドキュメントはとてもわかりやすくできています

下記のステップで誰でも簡単に使えます!

  1. 対象のHTMLにlink先を指定し、Bootstrapを使える状態に
  2. ドキュメント内で使いたいものを探し出し
  3. クラス名を入力

是非色々と試して遊んで、覚えましょう!

最後までご覧いただきありがとうございました!!!

「もっとHTML/CSSの基本を学びたい!」という方はこちらをご覧ください↓

当ブログは、「プログラミング初心者が一からWebアプリを作り、ネットで公開するまで」を解説しているサイトです。

日報アプリを一から開発し、ウェブに公開するまではこちらにまとめています

また、公開したウェブアプリはこちら(https://nippo.itc-app.site)でご覧いただけます(公開後もアップデート中)

 

その他、各分野別に

  1. Pythonについて
  2. HTML・CSSについて
  3. Djangoフレームワークについて
  4. Webサーバーについて
  5. 実際に公開をする方法

を記載したページも用意しています

 

ご自身の目的に合わせて、お好きな箇所からご覧ください

404 NOT FOUND | ITCブログ
今の自分にチャレンジする
タイトルとURLをコピーしました