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

デフォルト

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/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で囲む。

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

<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