Layoutこんばんは、たーせるです。グリッドレイアウトの話をしましたが、今日はもうちょっとグリッドの可能性を追求してみたいと思います。皆さんは英文法の参考書をご覧になった事がありますでしょうか。僕は残念ながら未だに何が書いてあるのか全く理解できないのですが、タイポグラフィが実に豊かですし、なんとなくアカデミックでかっこいい感じがします。そこで今日は実際に作例を示しつつ、ついでに作り方について触れていきましょう。グリッドについて基礎的な知識を持っている人が読むと、だいたい『CSSをどう書けばよいのか』おおよその見当がつく」くらいのレベル感で書きました。キャプションつきの丸っこい下線ちょっとした肩慣らしに、文字列に丸っこい下線を引いて、ついでにキャプションをつける方法をみていきましょう。完成すると以下のような見た目になりますよ。つくりかたまずは単語ごとにグリッドの個室に配置します。単語と単語を区切るスペース(␣)は別室に配置しましょう。それぞれの個室の幅と高さは、すべてmax-contentにしておきます。続いて、グリッドの行を2つに割ります。高さを確保しましょう。下線の長さに合わせて列をマージします。下図では、5番目のグリッドラインから8番目のグリッドラインまでの領域をひとまとめにしています。border-radiusで丸みをつけることができます。下線のキャプションを配置するため、ふたたび行を追加します。最後に、各下線の下にキャプションを記述します。指定すると、キャプションを中央寄せにできます。ブロック同士を線で結ぼうこちらもよく参考書などで見かけるパターンですが、単語同士を線で結んで対応関係を視覚化する試みに挑戦してみましょう。作れるなんて、なかなか素敵なことではないでしょうか。つくりかた下拵えとして、線で結びたいブロックは2列に跨るように配置しておきます。ここで便宜上、ブロックの中央を貫く縦の線を「センターライン」と呼ぶことにします。ひとつ上に行を追加します。行の高さは例によってmax-contentにしておきましょう。次に、上段のエリアをマージします。下図の紫色の領域のように、マージ領域の始端と終端のラインはセンターラインになるようにします。続いて、下図のように、マージされた領域を2行に分割します。高さを均等割りしたいので、それぞれ1frに設定しておきましょう。下図のように、列を3分割します。幅はそれぞれ1fr、max-content、1frとします。中央の列はふたたび1行になるようにマージしておきます(下図の黄色い領域)。最後に、グリッドの境界にいいかんじのborderを設定すると、あっという間に完成です。めでたし!まとめ使いどころがいまいち思いつかない(ええええ)。こんにちはこんばんは!!今回は小ネタで...2019-07-06CSSグリッドレイアウトで番組表(ラテ欄)を試作してみたよこんにちはこんにちは。いい方法をこちらに公開しています。@pi_cro_s.はてなブログをはじめよう!tercel_sさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。