bootstrap

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

Pocket
LINEで送る

Typography(見出しテスト H2)

ここまでCSSでカスタマイズしているものも含まれます。

見出しテスト H3

見出しテスト H4

見出しテスト H5
見出しテスト H6
markタグ You can use the mark tag to highlight text.
delタグ This line of text is meant to be treated as deleted text.
sタグ This line of text is meant to be treated as no longer accurate.
insタグ This line of text is meant to be treated as an addition to the document.
uタグ This line of text will render as underlined
smallタグ This line of text is meant to be treated as fine print.
strongタグ This line rendered as bold text.
emタグ This line rendered as italicized text.
codeタグ Wrap inline snippets of code with <code>.

リスト

  • デフォルトのul
  • デフォルトのul
  • ulタグにclassplaneUlを設置してカスタマイズ
  • ulタグにclassplaneUlを設置してカスタマイズ

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

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

要素の配置

text-align

よくリード文でPC時はセンター揃え、SP時は左揃えという実装をしますよね。そういうときに使えます。

デフォルト

画面サイズ576px〜で適用

画面サイズ768px〜で適用

画面サイズ992px〜で適用

画面サイズ1200px〜で適用

float

デフォルト



画面サイズ576px〜で適用



画面サイズ768px〜で適用



画面サイズ992px〜で適用



画面サイズ1200px〜で適用



中央寄せ

よく使うこれ→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

デフォルト

# Heading Heading Heading
1 Cell Cell Cell
2 Cell Cell Cell

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

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

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

# Heading Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell

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

画面サイズ576px〜で適用

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

# Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell

画面サイズ768px〜で適用

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

# Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell

画面サイズ992px〜で適用

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

# Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell

画面サイズ1200px〜で適用

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

# Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading HeadingHeading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell

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

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

Heading 1 Cell 1 Cell 1-1
Heading 2 Cell 2 Cell 2-1
Heading 3 Cell 3 Cell 3-1
Pocket
LINEで送る

back to top