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

Tweet

Pocket

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時は左揃えという実装をしますよね。そういうときに使えます。

デフォルト

画面サイズ576px〜で適用

画面サイズ768px〜で適用

画面サイズ992px〜で適用

画面サイズ1200px〜で適用

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を横並びにするやつ）もclassを追加するだけで簡単に実装できます。

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にすると、575px以下でそれぞれ幅100%になって2段にすることができます。
ブラウザ幅を縮めてみてください。

サイト名

yanagi’s memo

URL

https://ponsyon.com/

このやり方のネックは、colを使用しているためブラウザ幅によって横幅が狭くなってしまう点ですね。結局CSSで調整する必要があります。

table

デフォルト

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

テーブル～Bootstrap4移行ガイド

Bootstrapを使ったテーブルの選択スタイル（JavaScriptプラグインで広く使用されている）のドキュメントと例。

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

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

tableがコンテンツ幅内に収まらない時点でスクロールが現れます（ここではわざとコンテンツ幅からはみ出すように作っています）。うっかりtableとスクロースバーの間に余白が出現していますが、CSSで調整してください。

画面サイズ576px〜で適用

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

画面サイズ768px〜で適用

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

画面サイズ992px〜で適用

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

画面サイズ1200px〜で適用

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

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

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

Tweet

Pocket