HTML: 目次、画像付きの見出しのサンプル (可変幅)
・CSS flex で figure の画像と dl,dt,dd の説明文を左右に
並べるサンプル。
・ウインドの幅を変えて眺めてみる。
figure の画像は固定幅、dl,dt,dd の説明文の領域は可変幅。
-
- 見出し1
- 説明、サンプルテキスト。
-
画像の見出し
- 見出し2
-
あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50
-
カワセミくん
- 見出し3
-
サンプル文章。Wikipdiaより - カワセミの青色は色素によるものではなく、
羽毛にある微細構造により光の加減で青く見える。これを構造色といい、
シャボン玉がさまざまな色に見えるのと同じ原理。この美しい外見から
「渓流の宝石」などと呼ばれる。特に両翼の間からのぞく背中の水色は鮮やかで、
光の当たり方によっては緑色にも見える。
(2023/07)
動作 : Edge106
◎ ノート
・幅を固定にする場合は flex: (flex-grow) (flex-shrink) (flex-basis); で
指定する。
width だけの指定にしないこと。
flex-grow: 0; flex-shrink: 0; がないと変な表示になることも
あるので注意。
