Bootstrapを使う上で大切な知識2選。
この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。
背景色の設定の仕方。
ヘッダの作成方法。
背景色の設定の仕方
まず、サイト全体の背景色を設定しておきましょう。
<title>の部分は仮のものとします。
<title>あなたのユーザ名が作ったあなたのいいところ診断</title>
</head>
-
<body>
+
<body class="bg-primary-subtle">
<h1>あなたのいいところは?</h1>
<p>診断したい名前を入れて下さい</p>
<input type="text" id="user-name" size="40" maxlength="20" />
assessment.htmlPlease Type!
ここでは、body タグに背景色を設定しています。
bg-primary-subtle は 淡い青の背景色を指定する class です。背景色につかえる色は Background に書かれています。
修正が出来たら、ブラウザで確認し、できていれば完成です。
ヘッダの作成方法
まず、Web サイトの上部に表示されるヘッダを Bootstrap を使って作成してみましょう。Bootstrap においては Navbar というスタイルが用意されています。
</head>
<body class="bg-primary-subtle">
+
<header>
+
<nav class="navbar bg-primary" data-bs-theme="dark">
+
<div class="container-fluid">
+
<a class="navbar-brand" href="#">あなたのいいところ診断</a>
+
</div>
+
</nav>
+
</header>
+
<h1>あなたのいいところは?</h1>
<p>診断したい名前を入れて下さい</p>
<input type="text" id="user-name" size="40" maxlength="20" />
assessment.htmlPlease Type!
たくさんの class が登場しています。
navbar は Navbar スタイルを使うことを宣言する class です。
bg-primary は、Navbar に青の背景色を指定しています。詳しくは Color schemes に書かれています。
data-bs-theme="dark" は Navbar にダークモードを使う指定で、ダークモードを指定することで文字色が白に変更されます。
詳しいカラーモードの仕組みについては Color modes に書かれています。
真ん中にある container-fluid は、Bootstrap デザインにおいて外枠の範囲を決める class です。-fluid がついている場合、外枠が常に画面幅いっぱいに広がることを示します。
一番内側の navbar-brand は、Navbar でテキストを追加する際に用いられる class です。
assessment.html をブラウザで開くと、うまくヘッダが追加されていることがわかります。
この内容は覚える必要は特にないらしいのでなんとなくで捉えてもOKです。
まとめ
今回はBootstrapの背景色の設定の仕方や、ヘッダの作り方など、主に装飾のようなものを解説していきました。
どんなものでも見やすさや分かりやすさはとても重要なものだと感じました。背景色や文字の色の組み合わせなど工夫し、見やすいものを作っていけるよう努力していきたいです。
この記事が気に入ったらサポートをしてみませんか？