目次
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/</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-blockとd-md-table-cellをすべてのthとtdにclass指定で入れてみた。大分無理やりですね。他にもっとスマートな手はないか調査中です……。
| Heading 1 | Cell 1 | Cell 1-1 |
|---|---|---|
| Heading 2 | Cell 2 | Cell 2-1 |
| Heading 3 | Cell 3 | Cell 3-1 |
