サンプルページ
bootstrap4.1 利用できます
https://getbootstrap.jp/docs/4.1/layout/overview/
fontawesome（free）使えます
https://fontawesome.com/icons?d=gallery&p=2&m=free
見出し
見出しテキスト見出しテキスト
見出しテキスト見出しテキスト
見出しテキスト見出しテキスト
見出しテキスト見出しテキスト
 |
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
|
| 見出し | テーブルのセル |
|---|---|
| 見出し | テーブルのセル |
- 午前9時から午後10時
- 夜間利用のない時は午後5時閉館
- 午前9時から午後10時
- 夜間利用のない時は午後5時閉館
ボタン
ボタンボタンボタンボタンボタンボタンボタンボタン大きめ小さめテーマカラー
見出し（フォントサイズ）
見出し（h1）
見出し（h2）
見出し（h3）
見出し（h4）
見出し（h5）
見出し（h6）
アラート（.alert.bgcolor）
バッジ
バッジバッジバッジバッジバッジバッジバッジバッジテーマカラー
シャドウ
小さめの影
標準の影
大きめの影
画像
サムネイル
角丸
円
カラムレイアウト
カラムレイアウト（余白なし）
グリッドレイアウト
左右の幅は数値で変更できます。
この場合左側はcol-md-5、右側はcol-md-7になります。
col-md-12で100％になります。
画像はサイズに関係なくmax100％表示にしてくれます。
レスポンシブに対応しているので便利です。
上下を中央揃えにする場合は div class=”row align-items-center” で囲みます。
左右ともcol-md-6で幅50％になっています。
画像をPCで幅50%中央寄せ、スマホ100%の場合は.col-md-6 .mg-autoで囲みます。（画像はフルサイズ）
左側が3/1のレイアウト
左側が3/1の割合の場合
左側はcol-md-5、右側はcol-md-7にして
左側の画像を幅400px指定にして空白を設けています。
col-md-12で100％になります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
右側が3/1でスマホで逆表示
こちらは表示を逆にした場合です。
rowに.reverseを追加すると、スマホの時 画像が先に表示されます。
右側の .col-md-5に .taRをつけて画像を右寄りにしています。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テーブル
| テキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
|---|---|
| テキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| テキストテキストテキスト | .block を追加でスマホ時に縦レイアウトになります。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
|---|---|
| テキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
.table-responsive を適用すると常に水平スクロールを適用できます。
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | ああああああああああああああああ | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
ボックス
.boxのデフォルトはパディング30pxです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
.bgBeigeと組み合わせています。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
.bgGrayと組み合わせています。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
.shadowでシャドウボックスになります。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
パディング10pxの場合。pd05,pd10,pd15,pd20・・と組み合わせて変更できます。これは幅50％も組み合わせています。w10からw90まであります。
タブナビゲーション