Bootstrapを使ったデザイン。最初にご紹介するのは「グリッドシステム」を使ったDesignです。
Bootstrapは、ご存じかも知れませんが以下の引用をごらん戴ければと思います。
Bootstrapは、ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。
ウキペディア
タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されています。
GitHubで四番目に人気があり、アメリカ航空宇宙局やMSNBCなどに採用されている。
「特徴」
HTML5やCSS3では比較的サポートが不完全であるが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。
Bootstrapのグリッドシステム
グリッドシステムを支える３つのClass
- コンテナ（.container）
- ロー（.row）
- カラム（.col-*）
ブレイクポイントによる切り替え
(max12Column)
Bootstrap ５
Bootstrapフレームワーク
主なアイコンフォントは Bootstrapのものです。(FontAwesomeではありません)
レスポンシブ グリッドシステム
グリッド内のアイコンは、省略値サイズ、2rem、2,5remです。
レスポンシブ グリッドシステム：ブラウザの表示幅を動かしてみるか、スマホ・タブレットなどで表示してみてください。
3カラム グリッド
※．テーブルではありません。
自動折り返し
３カラムグリッドは、以下の様に定義しています。
部分的なHTML
<div class="col">01 <i class="bi bi-bootstrap-fill" style="color: #563d7c;"></i>123456789･123456789･123456789･123456789･123456789･123456789･123456789･123456789･123456789･</div>
<div class="col">02 <i class="bi bi-bootstrap" style="font-size: 2rem;color: #563d7c;"></i></div>
<div class="col">03 <i class="bi bi-alarm-fill" style="font-size: 2.5rem;color: #563d7c;"></i></div>
12カラム グリッド (max12Column)
自動折り返し
※．ブラウザ表示で横幅を縮小していくか、スマホの表示で12カラムグリッド表示が、テーブルとは異なる表示になることで、グリッド表示を確認戴けます。
①Bootstrap5の２分割グリッド表示
2分割: 自動折り返し無し
以下の２分割表示グリッドは、折り返ししていない（特に指定していないが）為、コンテンツがグリッドからいずれも、はみ出しています。
col-sm-8は、col-smの8個分、col-sm-4は、col-smの4個分、つまり、
8+4で全部で12個分のColumnを（bootstrap.css）で、割り当てています。
text-truncateクラスで長い文字列を省略記号表示指定
こちらは、Bootstrapのtext-truncateクラス指定で、グリッドからはみ出す部分は省略記号表示 されています。
①Bootstrap5の２分割グリッドのHTMLソースコード表示
以下が、実際のコンテンツ部分のHTMLコードです。
Classで定義しているものは、いずれも「bootstrap.min.css」のものです。
“container”,”row”,”col-sm-8″,”col-sm-4″,”text-truncate”,
この、”container“,”row“,”col*”が、グリッドシステムを支える3つのCSSクラスです。
HTML
<p>2分割: <i class="bi bi-check2-square" style="color: #ff563d;"></i> 自動折り返し無し</p>
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8 12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:</div>
<div class="col-sm-4">col-sm-4 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
</div>
<p>text-truncateクラスで長い文字列を省略記号表示指定</p>
<div class="row">
<div class="col-sm-8 text-truncate">col-sm-8 12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:</div>
<div class="col-sm-4 text-truncate">col-sm-4 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
</div>
</div>
②Bootstrap5の3分割グリッド表示
3分割: 自動折り返し無し
以下の３分割表示グリッドは、折り返ししていない為、
コンテンツがグリッドからいずれもはみ出しています。
また、１行(row)に収まらず、結果３分割目が２行目にはみ出してしまっています。
text-truncateクラス指定で長い文字列を省略記号表示
こちらは、Bootstrapのtext-truncateクラス指定で、
グリッドからはみ出す部分は省略記号表示 されています。
更に、省略記号表示で1行(row)内に収まっています。
②Bootstrap5の3分割グリッドHTMLソースコード表示
Class＝”col-sm”も、「bootstrap.min.css」のものです。
HTML
<p>Max3分割:自動折り返し無し </p>
<div class="container">
<div class="row">
<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
</div>
<p>text-truncateクラス指定で長い文字列を省略記号表示</p>
<div class="row">
<div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
<div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
<div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
</div>
</div>
コンテンツ以外のHTMLソースコードを表示しておきます。
HTML
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"> <title></title> </head> <body class="body"> <h1></h1> <h2></h2> <h3></h3> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>
ネスト：第二階層
ネスト:不連続文字(自動折り返し)
ネスト:アイコン文字2.2em
ネスト:svg画像256
SVG画像：width=”256″ height=”256″では、場合によっては枠をはみ出してしまう。
下の場合、＜div class=”col-sm-3″＞ではみ出し
さらに、ブラウザで表示枠を縮めていくと、＜div class=”col-8 col-sm-6″＞や＜div class=”col-4 col-sm-6″＞でも枠から図形部分がはみ出す。
Avtive クラス:<i class=”bi bi-activity”></i> css: content:”\F66B”;
Avtive クラス:<i class=”bi bi-activity”></i> css: content:”\F66B”;
Avtive クラス:<i class=”bi bi-activity”></i> css: content:”\F66B”;
Avtive クラス:<i class=”bi bi-activity”></i> css: content:”\F66B”;
Bootstrapを使ったサイト
Bootstrapを使った具体的なサイトはこちらからどうぞ！
このサイトはConcrete CMS v８に内包されたBootstrap 3を使っています。
（尚、Concrete CMS v９からは、Bootstrap ５が内包されています。）
Bootstrapアイコンサンプル
v1.8.0：フリー、高品質、オープンソース、そして1500以上のアイコンを持つアイコンライブラリです。
SVG や SVG スプライト、Web フォントなど多様な方法で利用できます。
Bootstrapと合わせても、合わせなくても使えます。
Bootstrapアイコン ”activity“は、 です。
.svg記述では、 <svg xmlns=”http://www.w3.org/2000/svg” width=”16″ height=”16″ fill=”currentColor” class=”bi bi-activity” viewBox=”0 0 16 16″>
<path fill-rule=”evenodd” d=”M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z”/>
</svg> です。
class記述では、 <class=”bi bi-activity”> </i> です。
cssでは、 content: “\F66B”; と記述しています。
以下、アイコンの一部ご紹介します。<div class=”row” style=”font-size: 2em;color: #7952b3;”>で
Bootstrap Table
responsive Table hover
Table-hoverクラスを使用して、マウスオーバー表示をしています。
| 見出しセル1 | 見出しセル2 | 見出しセル3 | |
|---|---|---|---|
| v1 | データ1セル | データ2セル | データ3セル |
| v2 | データ1セル | データ2セル | データ3セル |
| v3 | データ1セル | データ2セル | データ3セル |
div class=”container”
div class=”table-responsive”
table class=”table table-hover table-dark”
th scope=”col” class=”text-nowrap“
td class=”text-nowrap“
※.text-nowrap クラスを設定する理由
レスポンシブ対応テーブルがWebブラウザによって動作（振る舞い）が異なる為
Firefoxでは、text-nowrapは不要で（セル内のテキストは折り返され期待通りの動作になりますが）、他のブラウザでは、text-nowrapを指定してテキストの折り返しを禁止しないと期待した動作にならない為です。
折り返し無しを確認する
以下は折り返し無しを確認する為のresponsive Table です。
| 0 | 見出し | 見出し2 | 見出し3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 123 | １２３４５６ | ー |
| 3 | abc | ａｂｃｄｅｆｇｈｉ | ABCDEFGHIJKLMNOPQRSTUVWXYZ |
表示幅が狭くなると、横スクロールバーが現れます。
スマホで見るか、パソコン表示でブラウザの幅を狭くすることで確認できます。
table-borderedクラスで縦の罫線を追加しています。
caption要素で、Tableの説明書きを追加しています。
(また、caption-topクラスを追加してテーブルの上部にキャプションを表示させています。)
画像の位置合わせ
Floatユーティリティークラスを使用した配置例
画像の間で文書表現する為には、範囲内に収まる文字数での記載が必要です。
画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。
左右のBootstrap画像は.svgで、 width=”200″ height=”200″で表示サイズを指定しています。
但し、レスポンシブ対応ですので、表示幅が狭くなると、画像の間の文書は、画像の外（下）にはみ出されて表示されます。 ※ ➡ 注01
主なcodeは、以下の様な内容です。
<div class="container">
<div class="clearfix">
<p>画像の間で文書表現をするために必要なこと。・・・・・</p>
<img src="/img/b1-200x200.svg" class="float-start" alt="左揃え画像">
<img src="/img/b2-200x200.svg" class="float-end" alt="右揃え画像">
<p>画像の間で文書表現をするために必要なこと。・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・。</p>
</div>
</div>
<style>
.clearfix::after {
display: block;
clear: both;
content: "";
}
.float-start {
float: left !important;
}
.float-end {
float: right !important;
}
.float-none {
float: none !important;
}
</style>
※ 注01
スマホでの表示（例）
パソコンで表示幅を最小にした場合（Chrome）
BootstrapでFontAwesome Brands
以下は、Bootstrap5のcontainer、row、col-1クラスで定義した”Font Awesom 5 Brands”アイコン（抜粋）です。UniCode:e*の部分は、v5.15.1より表示できます。
定義は、＜i class=”fab fa-＊”＞＜/i＞です。（＊は、大体アイコン名です。）
f08c
f0e1
f09b
f092
f082
f09a
f39e
f099
f081
e07b
f392
f167
f431
f19a
f411
f17a
f3ca
f457
f0d2
f231
f16d
e055
f179
f3c0
f266
f4e4
f3b8
f269
e007
e078
f282
f268
f836
f293
f294
f267
コメント