目次
Typography(見出しテスト H2)
見出しはこのブログ独自にCSSでカスタマイズしているものも含まれます。
見出しテスト H3
見出しテスト H4
見出しテスト H5
見出しテスト H6
mark タグ |
You can use the mark tag to highlight text. |
---|---|
del タグ |
|
s タグ |
|
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タグにclass
planeUl
を設置してカスタマイズ - ulタグにclass
planeUl
を設置してカスタマイズ
デフォルトのulリストにCSSでスタイルを当てればいいかもしれませんが、どこか想定しない場所のulにも反映されたら嫌なので、ここではclassを加えてカスタマイズしています。
- デフォルトのol
- デフォルトの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-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 |