「利用者:Fet-Fe」の版間の差分
ナビゲーションに移動
検索に移動
→CSSグリッドレイアウト
>Fet-Fe |
>Fet-Fe |
||
| 565行目: | 565行目: | ||
==== CSSグリッドレイアウト ==== | ==== CSSグリッドレイアウト ==== | ||
CSSグリッドレイアウトを用いれば、様々な要素を2次元に配置することができる。 | |||
<code>display: grid;</code>プロパティや<code>display: inline-grid;</code>プロパティを指定し、<code>grid-template-rows</code>と<code>grid-template-columns</code>でグリッドの区切り方を設定して、<code>grid-row</code>や<code>grid-column</code>で要素の位置を決定する。 | |||
詳しくは<ref>{{Archive|1=https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout|2=https://archive.vn/kLI9p|3=グリッドレイアウトの基本概念}} - MDN Web Docs</ref>や<ref>{{Archive|1=https://qiita.com/kura07/items/e633b35e33e43240d363|2=|3=CSS Grid Layout を極める！（基礎編）}} - Qiita</ref>を参照。 | |||
<ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | |||
<span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">若</span> | |||
<rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;">ごと</rt> | |||
<sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">シ</sup> | |||
<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆑</sub> | |||
</ruby>は以下のHTMLで実現している。 | |||
<code> | |||
<ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | |||
<span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">若</span> | |||
<rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;">ごと</rt> | |||
<sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">シ</sup> | |||
<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆑</sub> | |||
</ruby> | |||
</code> | |||
これらのタグやレイアウトを用いて漢文の返り点や吐などを表記することができる。 | これらのタグやレイアウトを用いて漢文の返り点や吐などを表記することができる。 | ||
| 647行目: | 666行目: | ||
<ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | <ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | ||
<span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">將</span> | <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">將</span> | ||
<rt style="grid-row: 1; grid-column: 1/ | <rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;">まさ</rt> | ||
<sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">ニ</sup> | <sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">ニ</sup> | ||
<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆑</sub> | <sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆑</sub> | ||
<span style="grid-row: 4; grid-column: 1; font-size: .5em; align-self: center;">す</span> | <span style="grid-row: 4; grid-column: 1/4; font-size: .5em; align-self: center;">す</span> | ||
</ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | </ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | ||
<span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">殺󠄀</span> | <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">殺󠄀</span> | ||
<rt style="grid-row: 1; grid-column: 1/ | <rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;">ころ</rt> | ||
<sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">サント</sup> | <sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">サント</sup> | ||
<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆓</sub> | <sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆓</sub> | ||
</ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | </ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | ||
<span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">唐󠄁</span> | <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">唐󠄁</span> | ||
<rt style="grid-row: 1; grid-column: 1/ | <rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;">から</rt> | ||
</ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | </ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | ||
<span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">澤</span> | <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">澤</span> | ||
<rt style="grid-row: 1; grid-column: 1/ | <rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;">さは</rt> | ||
</ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | </ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | ||
<span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">貴</span> | <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">貴</span> | ||
<rt style="grid-row: 1; grid-column: 1/ | <rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;">たか</rt> | ||
</ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | </ruby><ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"> | ||
<span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">洋。</span> | <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">洋。</span> | ||
<rt style="grid-row: 1; grid-column: 1/ | <rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;">ひろ</rt> | ||
<sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">ヲ</sup> | <sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">ヲ</sup> | ||
</ruby> | </ruby> | ||