Fet-Fe

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

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

7,391 バイト追加、 2024年6月9日 (日)

→‎subタグ・supタグ

匿名利用者

>Fet-Fe

@@ 564行目: / 564行目: @@
 </div>
-これらのタグを用いて漢文の返り点や吐などを表記することができる。
+==== CSSグリッドレイアウト ====
-但し返り点と送り仮名は<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>に従い、位置を調整するために<code>&amp;#x3000;</code>（和字間隔）を多用している。
-<div style="writing-mode: vertical-rl;">
+これらのタグやレイアウトを用いて漢文の返り点や吐などを表記することができる。
-<ruby>無<sub style="font-size: 0.5em;">㆓&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;クシテ</rt></ruby>恆產<sub style="font-size: 0.5em;">㆒</sub>而<ruby>有󠄁<sub style="font-size: 0.5em;">㆓</sub><rt style="font-size: 0.5em;">&#x3000;ル&#x3000;</rt></ruby>[[恒心|恆心]]<sub style="font-size: 0.5em;">㆒</sub><ruby>者󠄁、<rt style="font-size: 0.5em;">&#x3000;ハ&#x3000;&#x3000;</rt></ruby><ruby>惟<rt style="font-size: 0.5em;">&#x3000;ダ</rt></ruby><ruby>士<sub style="font-size: 0.5em;">&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;ノミ</rt></ruby><ruby>爲<sub style="font-size: 0.5em;">㆑</sub><rt style="font-size: 0.5em;">&#x3000;ス&#x3000;</rt></ruby><ruby>能。<sub style="font-size: 0.5em;">&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;クスルヲ</rt></ruby><br>
+但し返り点と送り仮名は<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>に従っている。
-<ruby>若<sub style="font-size: 0.5em;">㆑</sub><rt style="font-size: 0.5em;">&#x3000;キハ</rt></ruby><ruby>民<rt style="font-size: 0.5em;">&#x3000;ノ</rt></ruby><ruby>則<rt style="font-size: 0.5em;">&#x3000;チ</rt></ruby><ruby>無<sub style="font-size: 0.5em;">㆓&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;ケレバ</rt></ruby>恆產、<sub style="font-size: 0.5em; margin-top: -2em;">㆒&#x3000;</sub><ruby>因<sub style="font-size: 0.5em;">&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;リテ</rt></ruby><ruby>無<sub style="font-size: 0.5em;">㆓</sub><rt style="font-size: 0.5em;">&#x3000;シ&#x3000;</rt></ruby>恆心。<sub style="font-size: 0.5em; margin-top: -2em;">㆒&#x3000;</sub>
+<div style="writing-mode: vertical-rl; font-size: 20px;">
+<span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">クシテ</sup>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆓</sub>
+</span><span 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><span 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>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆒</sub>
+</span><span 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><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">ル</sup>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆓</sub>
+</span><span 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><span 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>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆒</sub>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">ハ</sup>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">ダ</sup>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">ノミ</sup>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">ス</sup>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆑</sub>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">クスルヲ</sup>
+</span><br>
+<span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">キハ</sup>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆑</sub>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">ノ</sup>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">チ</sup>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">ケレバ</sup>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆓</sub>
+</span><span 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><span 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>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆒</sub>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">リテ</sup>
+</span><span 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>
+<sup style="grid-row: 1; grid-column: 2/4; font-size: .5em; align-self: center;">シ</sup>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆓</sub>
+</span><span 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><span 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>
+<sub style="grid-row: 3; grid-column: 3; font-size: .5em; align-self: center;">㆒</sub>
+</span>
 <br><br>
 無恒産而有恒心<ruby>者󠄁<rt>&#x3000;阝</rt></ruby>惟<ruby>士<rt>&#x3000;乀</rt></ruby>爲<ruby>能&#x3000;&#x3000;<rt>&#x3000;乀仒匕卜&#x3000;</rt></ruby><br>
@@ 576行目: / 645行目: @@
 若民則無恒産<sup style="font-size: 0.5em;">이면</sup> 因無恒心<sub style="font-size: 0.5em; display: inline-block;">이니<br>라</sub>
 <br><br>
-<ruby style="ruby-position: under; -webkit-ruby-position: after;"><ruby style="ruby-position: over; -webkit-ruby-position: before;">將<sub style="font-size: 0.5em;">㆑</sub><rt style="font-size: 0.5em;">まさニ</rt></ruby><rt style="font-size: 0.5em;">す&#x3000;&#x3000;</rt></ruby><ruby>殺󠄀<sub style="font-size: 0.5em;">㆓&#x3000;&#x3000;</sub><rt style="font-size: 0.5em;">ころサント</rt></ruby><ruby>唐󠄁<rt>から</rt>澤<rt>さは</rt>貴<rt>たか</rt>洋<rt>ひろ</rt>。<rt style="font-size: 0.5em;">ヲ&#x3000;</rt></ruby><sub style="font-size: 0.5em; margin-top: -2em;">㆒&#x3000;</sub>
+<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>
+<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>
+</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>
+<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>
+</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>
+</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>
+</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>
+<sup style="grid-row: 1; grid-column: 3; font-size: .5em; align-self: center;">ヲ</sup>
+</ruby>
 <br><br>
 將殺󠄀唐󠄁澤貴<ruby>洋&#x3000;&#x3000;<rt>&#x3000;丷飞匕亽&#x3000;</rt></ruby>