こんばんは、たーせるです。
少し前に CSS グリッドレイアウトの話をしましたが、今日はもうちょっとグリッドの可能性を追求してみたいと思います。
本日の実験
突然ですが、皆さんは英文法の参考書をご覧になった事がありますでしょうか。 僕は残念ながら未だに何が書いてあるのか全く理解できないのですが、タイポグラフィが実に豊かですし、なんとなくアカデミックでかっこいい感じがします。 これを是非 HTML で表現したいのです。
そこで今日は実際に作例を示しつつ、ついでに作り方について触れていきましょう。
作例
初級篇: キャプションつきの丸っこい下線
ちょっとした肩慣らしに、文字列に丸っこい下線を引いて、ついでにキャプションをつける方法をみていきましょう。 完成すると以下のような見た目になりますよ。わはー。
つくりかた
まずは単語ごとにグリッドの個室に配置します。 単語と単語を区切るスペース（␣）は別室に配置しましょう。 それぞれの個室の幅と高さは、すべてmax-contentにしておきます。
続いて、グリッドの行を2つに割ります。 2行目は「丸っこい下線」を描画するための領域として、3px ほどの高さを確保しましょう。
さらに、下線の長さに合わせて列をマージします。 下図では、5番目のグリッドラインから8番目のグリッドラインまでの領域をひとまとめにしています。
マージした領域に border を設定します。border-radiusで丸みをつけることができます。
さらに、下線のキャプションを配置するため、ふたたび行を追加します。 行の高さは max-content にしておきましょう。
最後に、各下線の下にキャプションを記述します。justify-self: center を指定すると、キャプションを中央寄せにできます。
これで完成！ わーい。
中級篇: ブロック同士を線で結ぼう
こちらもよく参考書などで見かけるパターンですが、単語同士を線で結んで対応関係を視覚化する試みに挑戦してみましょう。
これが HTML だけで作れるなんて、なかなか素敵なことではないでしょうか。
つくりかた
下拵えとして、線で結びたいブロックは2列に跨るように配置しておきます。 ここで便宜上、ブロックの中央を貫く縦の線を「センターライン」と呼ぶことにします。
また、ひとつ上に行を追加します。 行の高さは例によってmax-contentにしておきましょう。
次に、上段のエリアをマージします。 下図の紫色の領域のように、マージ領域の始端と終端のラインはセンターラインになるようにします。
続いて、下図のように、マージされた領域を2行に分割します。 高さを均等割りしたいので、それぞれ1frに設定しておきましょう。
また、下図のように、列を3分割します。幅はそれぞれ1fr、max-content、1frとします。 さらに、中央の列はふたたび1行になるようにマージしておきます（下図の黄色い領域）。
最後に、グリッドの境界にいいかんじのborderを設定すると、あっという間に完成です。
めでたし！
まとめ
使いどころがいまいち思いつかない（ええええ）。
では、また。
