Bootstrap4要素集まとめ② | テキスト、要素の配置、横並びdl、table

Typography（見出しテスト H2）

見出しはこのブログ独自にCSSでカスタマイズしているものも含まれます。

見出しテスト H3

見出しテスト H4

見出しテスト H5

見出しテスト H6

リスト

• デフォルトのul
• デフォルトのul

• ulタグにclassplaneUlを設置してカスタマイズ
• ulタグにclassplaneUlを設置してカスタマイズ

デフォルトのulリストにCSSでスタイルを当てればいいかもしれませんが、どこか想定しない場所のulにも反映されたら嫌なので、ここではclassを加えてカスタマイズしています。

1. デフォルトのol
2. デフォルトのol

要素の配置

text-align

よくリード文でPC時はセンター揃え、SP時は左揃えという実装をしますよね。そういうときに使えます。
以下の例はデフォルトのtext-align:left;をベースにしたものです。

デフォルト

画面サイズ576px〜で適用

画面サイズ768px〜で適用

画面サイズ992px〜で適用

画面サイズ1200px〜で適用

アレンジ例

逆にPCサイズではテキストを左寄せにして、SP時に中央揃えにしたい場合もあると思います。
ブラウザ幅を変化させて配置を確認してください。

float

デフォルト

float-right
float-right
float-none

画面サイズ576px〜で適用

float-sm-right
float-sm-right
float-sm-none

画面サイズ768px〜で適用

float-md-right
float-md-right
float-md-none

画面サイズ992px〜で適用

float-lg-right
float-lg-right
float-lg-none

画面サイズ1200px〜で適用

float-lg-right
float-lg-right
float-lg-none

中央寄せ

よく使うこれ→margin-left: auto; margin-right: auto;

デフォルト

画面サイズ576px〜で適用

画面サイズ768px〜で適用

画面サイズ992px〜で適用

画面サイズ1200px〜で適用

横並びdl

Bootstrapなら横並びdl（dtとddを横並びにするやつ）も.rowと.colを活用することで簡単に実装できます。

rowとcolを使用

<dl class="row">
  <dt class="col-2">サイト名</dt>
  <dd class="col-10">yanagi's memo</dd>
  <dt class="col-2">URL</dt>
  <dd class="col-10">https://ponsyon.com/</dd>
</dl>

サイト名

yanagi’s memo

URL

https://ponsyon.com/

上記の.col-2.col-10をそれぞれ.col-md-2.col-md-10にすると、767px以下でそれぞれ幅100%になって2段にすることができます。
ブラウザ幅を縮めてみてください。

<dl class="row">
  <dt class="col-md-2">サイト名</dt>
  <dd class="col-md-10">yanagi's memo</dd>
  <dt class="col-md-2">URL</dt>
  <dd class="col-md-10">https://ponsyon.com/</dd>
</dl>

サイト名

yanagi’s memo

URL

https://ponsyon.com/

このやり方のネックは、colを使用しているためブラウザ幅によって横幅が狭くなってしまう、.rowの入子なので左右に余白が付いてしまう点ですね。CSSで微調整しましょう。

floatを使用

float関係もBootstrapで使用できます。
親要素dlに.clearfixを入れるため、dlは一段ごとに区切っています。
子要素に.float-leftを入れ、サイズ指定である.w-25(width:25%;）、.w-auto(width:auto;）を指定します。
こちらもレスポンシブに対応していので、2つめのdlの子要素には-md-を付加してみます。

<dl class="clearfix">
  <dt class="w-25 float-left">サイト名</dt>
  <dd class="w-auto float-left">yanagi's memo</dd>
</dl>
<dl class="clearfix">
  <dt class="w-25 float-md-left">URL</dt>
  <dd class=""w-auto float-md-left">https://ponsyon.com/</dd>
</dl>

サイト名

yanagi’s memo

URL

https://ponsyon.com/

floatやsize関係のclassについて、詳しくは下記サイトをご参照ください。

Float

レスポンシブな float ユーティティを使用して, ブレークポイントで要素のfloatを切り替えます。

Sizing

簡単に幅や高さの調節ができます。

table

デフォルト

このブログ独自のCSSで装飾しています。

tableのバリエーションおよび要素の装飾に関する指定はたくさんあるのですが、ここでは割愛します。詳しくは下記サイトを参照してください。

Tables

テーブルのクラス適用例です。

レスボンシブ時に横スクロール表示

tableタグをdiv.table-responsiveで囲む。

tableがコンテンツ幅内に収まらない時点でスクロールが現れます（ここではわざとコンテンツ幅からはみ出すように作っています。table自体にmin-widthを指定することで、その幅以下でスクロールが現れるよう調整することもできます）。

Bootstrarpではtable自体にmargin-bottom:1rem；が指定されているため、そのままではtableとスクロールの間に余白が出現します。ここではtableに.mb-0（margin-bottom:0；）を付加することで、余白を潰しています。

ブラウザ幅576px以下で適用

ブラウザ幅が575px以上ではスクロールが現れません。また、tableに幅指定をしていないため（そして無駄にセルが嵩張る内容をあえて入れているため）コンテンツ幅よりはみ出しています。
ブラウザ幅576px以下になるとスクロールが出現します。
tableタグをdiv.table-responsive-smで囲む。

ブラウザ幅767px以下で適用

tableタグをdiv.table-responsive-mdで囲む。

ブラウザ幅991px以下で適用

tableタグをdiv.table-responsive-lgで囲む。

ブラウザ幅1199px以下で適用

tableタグをdiv.table-responsive-xlで囲む。

実験中：レスボンシブ時にtableのセルが横幅100%になるやつ！

CSSをカスタマイズすればいいんだけど、Bootstrapだけで再現してみたいので実験。
d-blockとd-md-table-cellをすべてのthとtdにclass指定で入れてみた。大分無理やりですね。他にもっとスマートな手はないか調査中です……。