勉強002　グリッドレイアウト

勉強001　縦書きの仕方

縦書きのやりかたメモ。縦書き自体はそんなに難しくなかった。

mahoukakoukounorettousei.wiki

今度は、グリッドレイアウトによるトップページ構成にチャレンジ。

HTML：

<div class="grid">　/*以下グリッド*/

<div class="grid-right">　/*右側のグリッド。「.grid-right」のCSSを参照*/
<div style="writing-mode: vertical-rl; font-family: serif; line-height: 2.5; font-weight: bold; float: left;">　/*右から左へ縦書きせよ。書式はこうせよ。全体を左に寄せよ*/
<p style="font-size: 30px; text-indent: 1em;">目次</p>　/*「目次」フォントサイズ30px。1文字分字下げ*/
<p style="text-indent: 3em;">◇　◇　◇</p>　/*「◇　◇　◇」3文字分字下げ*/
</div>
</div>

<div class="grid-center">　/*中央のグリッド。「.grid-center」のCSSを参照*/
<div style="writing-mode: vertical-rl; font-family: serif; line-height: 2.5; font-weight: bold; float: right;">　/*縦書きの指定。floatは右寄せ*/
[<span style="writing-mode: horizontal-tb;">1</span>]　世界観
[<span style="writing-mode: horizontal-tb;">2</span>]　地図
[<span style="writing-mode: horizontal-tb;">3</span>]　年表
[<span style="writing-mode: horizontal-tb;">4</span>]　キャラクター
[<span style="writing-mode: horizontal-tb;">5</span>]　スキル
[<span style="writing-mode: horizontal-tb;">6</span>]　用語
[<span style="writing-mode: horizontal-tb;">7</span>]　家系
[<span style="writing-mode: horizontal-tb;">8</span>]　その他
[<span style="writing-mode: horizontal-tb;">9</span>]　一覧系ページ
[<span style="writing-mode: horizontal-tb;">10</span>]　作品情報
[<span style="writing-mode: horizontal-tb;">11</span>]　ブログ
</div>
</div>

<div class="grid-left">　/*左のグリッド。「.grid-left」のCSSを参照*/
<div style="writing-mode: vertical-rl; font-family: serif; line-height: 2.5; font-weight: bold; float: left;">　/*縦書きの指定。floatは左寄せ*/
<p style="text-indent: 3em;">◇　◇　◇</p>　/*「◇　◇　◇」3文字分字下げ*/
</div>
</div>

</div>

CSS：

.grid {
    display: grid;　/*グリッドレイアウトを適用*/
    grid-template-columns: 2fr 11fr 1fr;　/*左2：中央11：右1の配分でカラム幅を分割*/
    grid-template-rows: 10fr;　/*行高さ。よく分からんので適当に設定*/
    border: none;　/*外枠なし*/
    column-gap: 5px;　/カラム間幅5px**/
    row-gap: 0px;　/*行間幅0px*/
}
.grid-right {
    grid-area: 1 / 4 / 2 / 3;　/*左上を基準点(y,x)=(1,1)として、(1,4)から(2,3)までをエリアとする*/
    border: 1px dashed gray;　/*枠線は1pxの破線で灰色*/
    text-align: left;　/*テキストは左寄せ*/
    padding: 12px;　/*入力内容から枠線まで12px空ける？（よく分かってない）*/
    column-gap: 5px;　
    row-gap: 2px;
}
.grid-center {
    grid-area: 1 / 3 / 2 / 2;　/*左上を基準点(1,1)として、(y,x)=(1,3)から(2,2)までをエリアとする*/
    border: 1px solid black;　/*枠線は実線で黒色*/
    text-align: left;
    padding: 12px;
    column-gap: 5px;
    row-gap: 2px;
}
.grid-left {
    grid-area: 1 / 2 / 2 / 1;　/*左上を基準点(1,1)として、(y,x)=(1,2)から(2,1)までをエリアとする*/
    border: 1px solid black;
    text-align: left;
    padding: 12px;
    column-gap: 5px;
    row-gap: 2px;
}

プレビュー：

なんだろう。線消しても、これ、たぶん違和感ある。

コレジャナイ感。