「利用者:Fet-Fe」の版間の差分
ナビゲーションに移動
検索に移動
→CSSグリッドレイアウト
>Fet-Fe 細 (→CSSグリッドレイアウト) |
>Fet-Fe |
||
| 564行目: | 564行目: | ||
</div> | </div> | ||
=== CSSグリッドレイアウト === | |||
CSSグリッドレイアウトを用いれば、様々な要素を2次元に配置することができる。 | 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>で要素の位置を決定する。 | <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> | 詳しくは<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>[https://qiita.com/kura07/items/e633b35e33e43240d363 CSS Grid Layout を極める！（基礎編）] - Qiita</ref>を参照。 | ||
<ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; align-items: center; vertical-align: middle;"> | <ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; align-items: center; vertical-align: middle;"> | ||
| 585行目: | 585行目: | ||
</code> | </code> | ||
このレイアウトやrubyタグ、sub/subタグなどを用いて漢文の返り点や吐などを表記することができる。 | |||
但し返り点と送り仮名は<ref>{{Archive|https://www.jagat.or.jp/archives/21315|https://archive.vn/gJXMa|漢文の句読点や返り点の配置処理}} - 公益社団法人日本印刷技術協会</ref>や<ref>{{Archive|https://www.jagat.or.jp/%3Fp%3D21747|https://archive.vn/KY86h|漢文の送り仮名・読み仮名の配置処理}} - 公益社団法人日本印刷技術協会</ref>に従っている。 | 但し返り点と送り仮名は<ref>{{Archive|https://www.jagat.or.jp/archives/21315|https://archive.vn/gJXMa|漢文の句読点や返り点の配置処理}} - 公益社団法人日本印刷技術協会</ref>や<ref>{{Archive|https://www.jagat.or.jp/%3Fp%3D21747|https://archive.vn/KY86h|漢文の送り仮名・読み仮名の配置処理}} - 公益社団法人日本印刷技術協会</ref>に従っている。 | ||
<div style="writing-mode: vertical-rl; font-size: 20px;"> | <div style="writing-mode: vertical-rl; font-size: 20px;"> | ||
| 693行目: | 693行目: | ||
將殺󠄀唐󠄁澤貴洋<sub style="font-size: 0.5em; display: inline-block;">ᄒᆞᄂᆞ<br>니라</sub> | 將殺󠄀唐󠄁澤貴洋<sub style="font-size: 0.5em; display: inline-block;">ᄒᆞᄂᆞ<br>니라</sub> | ||
</div> | </div> | ||
=== positionプロパティ === | |||
CSSの<code>position: relative;</code>と<code>position: absolute;</code>を組み合わせて、特定の範囲内に要素を配置することができる<ref>[https://developer.mozilla.org/ja/docs/Web/CSS/position position] - MDN Web Docs</ref>。 | |||
ある要素に<code>position: relative;</code>を指定して、<code>top: 10%;</code>や<code>left: 40px;</code>などを指定すると、その要素が本来あった場所から下側に要素の大きさの10%、右に40pxずらすことができる。 | |||
<code>position: absolute;</code>を指定して同様に<code>top</code>や<code>left</code>（または<code>bottom</code>や<code>right</code>）を指定すると、直近の位置指定されている祖先（<code>position</code>の計算値が<code>static</code>以外である祖先）またはそれが無ければページ全体の初期位置から指定した分だけずれた位置に配置できる。 | |||
これを利用すれば、ある位置のspanタグに<code>position: relative;</code>を指定して<code>top</code>などは指定せず、その中の要素に<code>position: absolute;</code>と<code>top</code>などを指定することで要素の位置を<code>position: relative;</code>のタグの中で調節することができる。 | |||
次に示す例では、<code><span lang="jsl" style="position: relative; padding: 0 0 2em;"><span style="position: absolute; top: 0.05em; left: -1em;">𝠀𝪛𝪪</span><span style="position: absolute; top: 0; left: -0.3em;">𝧫𝪛𝪬</span><span style="position: absolute; top: 0.05em; left: 0.3em;">𝧫</span><span style="position: absolute; top: 0.15em; left: 1em;">𝠀𝪛𝪢</span></span></code>と記述している。 | |||
<span lang="jsl" style="position: relative; padding: 0 0 2em;"><span style="position: absolute; top: 0.05em; left: -1em;">𝠀𝪛𝪪</span><span style="position: absolute; top: 0; left: -0.3em;">𝧫𝪛𝪬</span><span style="position: absolute; top: 0.05em; left: 0.3em;">𝧫</span><span style="position: absolute; top: 0.15em; left: 1em;">𝠀𝪛𝪢</span></span> | |||
=== 文字参照 === | === 文字参照 === | ||