Fet-Fe

利用者:Fet-Fe (ソースを閲覧)

2024年6月9日 (日) 01:35時点における版

1,899 バイト追加、 2024年6月9日 (日)

→‎CSSグリッドレイアウト

匿名利用者

>Fet-Fe

@@ 565行目: / 565行目: @@
 ==== 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>
+&lt;ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; vertical-align: middle;"&gt
+&lt;span style="grid-row: 2/4; grid-column: 1/4; align-self: center;"&gt;若&lt;/span&gt;
+&lt;rt style="grid-row: 1; grid-column: 1/4; font-size: .5em; align-self: center;"&gt;ごと&lt;/rt&gt;
+&lt;sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;"&gt;シ&lt;/sup&gt;
+&lt;sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;"&gt;㆑&lt;/sub&gt;
+&lt;/ruby&gt;
+</code>
 これらのタグやレイアウトを用いて漢文の返り点や吐などを表記することができる。
@@ 647行目: / 666行目: @@
 <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/3; font-size: .5em; align-self: center;">まさ</rt>
+<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>
-<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;">
 <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">殺󠄀</span>
-<rt style="grid-row: 1; grid-column: 1/3; font-size: .5em; align-self: center;">ころ</rt>
+<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><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/3; font-size: .5em; align-self: center;">から</rt>
+<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;">
 <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">澤</span>
-<rt style="grid-row: 1; grid-column: 1/3; font-size: .5em; align-self: center;">さは</rt>
+<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;">
 <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">貴</span>
-<rt style="grid-row: 1; grid-column: 1/3; font-size: .5em; align-self: center;">たか</rt>
+<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;">
 <span style="grid-row: 2/4; grid-column: 1/4; align-self: center;">洋。</span>
-<rt style="grid-row: 1; grid-column: 1/3; font-size: .5em; align-self: center;">ひろ</rt>
+<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>
 </ruby>