bootstrap

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

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時は左揃えという実装をしますよね。そういうときに使えます。
以下の例はデフォルトのtext-align:left;をベースにしたものです。

デフォルト

画面サイズ576px〜で適用

画面サイズ768px〜で適用

画面サイズ992px〜で適用

画面サイズ1200px〜で適用

アレンジ例

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

float

デフォルト



画面サイズ576px〜で適用



画面サイズ768px〜で適用



画面サイズ992px〜で適用



画面サイズ1200px〜で適用



中央寄せ

よく使うこれ→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/wp/</dd>
</dl>
サイト名
yanagi’s memo
URL
https://ponsyon.com/wp/

上記の.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/wp/</dd>
</dl>
サイト名
yanagi’s memo
URL
https://ponsyon.com/wp/

このやり方のネックは、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/wp/</dd>
</dl>
サイト名
yanagi’s memo
URL
https://ponsyon.com/wp/

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


table

デフォルト

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

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

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自体にmin-widthを指定することで、その幅以下でスクロールが現れるよう調整することもできます)。

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

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

ブラウザ幅が575px以上ではスクロールが現れません。また、tableに幅指定をしていないため(そして無駄にセルが嵩張る内容をあえて入れているため)コンテンツ幅よりはみ出しています。
ブラウザ幅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

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

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

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

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

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

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指定で入れてみた。大分無理やりですね。他にもっとスマートな手はないか調査中です……。

<table class="table table-sm table-bordered">
  <tbody>
    <tr>
      <th class="bg-light d-block d-md-table-cell">Heading 1</th>
      <td class="d-block d-md-table-cell">Cell 1</td>
      <td class="d-block d-md-table-cell">Cell 1-1</td>
    </tr>    
    <tr>
      <th class="bg-light d-block d-md-table-cell">Heading 2</th>
      <td class="d-block d-md-table-cell">Cell 2</td>
      <td class="d-block d-md-table-cell">Cell 2-1</td>
    </tr>
    <tr>
      <th class="bg-light d-block d-md-table-cell">Heading 3</th>
      <td class="d-block d-md-table-cell">Cell 3</td>
      <td class="d-block d-md-table-cell">Cell 3-1</td>
    </tr>
  </tbody>
</table>
Heading 1 Cell 1 Cell 1-1
Heading 2 Cell 2 Cell 2-1
Heading 3 Cell 3 Cell 3-1