HTML文書のセクションを明確化し階層構造とする
HTML5の要素にはフローコンテンツ等、7つのカテゴリーがある。
セクショニング・コンテンツの要素は、article、aside、nav、section、の4つ。
ヘディング・コンテンツ(見出しコンテンツ)はH1～H6の6つ。
HTML5のアウトラインを表示するサイトはこちら。
課題
本ページ作成を受けての課題は以下の通り。
| 連番 | 項目 | 内容 | 結論 |
|---|---|---|---|
| 1 | displayプロパティの値全般 | 取りうる値が多数あり違いが不明確。 | 7つのカテゴリーで30以上の値を取りうるため詳細は要調査。 |
| 2 | displayプロパティの値におけるflexとinline-flexの違い | 挙動が異なるため違いを把握する必要がある。 | 要素をフレックスコンテナーに指定するにあたり、flexはブロックレベル、inline-flexはインラインレベルとのことだが、その違いについて要確認。 |
| 3 | フレックスコンテナの子要素のフレックスアイテムの位置関係 | ul要素の子要素のli要素を横並びにしたときに文字が重なってしまう。 | ul要素の広さをwidthプロパティで重ならない程度に広く指定する。ただし、他の方法がないのか不明。 |
| 4 | main等とasideの位置関係 | 左右に分けて配置したいが単にdisplayにflexを指定しただけでは左寄せとなる。 | Flexboxの配置位置の設定にあたって、横方向での位置ぞろえはjustify-contentプロパティを使う。この場合、justify-contentプロパティにspace-between(余分なスペースを子要素の間に均等に割り当てる)を指定する。 |
※上のテーブルのスケルトン作成はVS codeで「table>(tr>th*4)+(tr>td*4)*4」。
参考文献
HTML&CSS全事典
HTML&CSS逆引き事典
参考サイト
HTML入門19[セクションを明確にしよう]はこちら。
skillhubの[flexboxを使って要素を横並びにする【CSSの書き方入門】]はこちら。
下記動画は、article要素が扱われておらず、CSSも対象外だが、純粋にHTMLの構造をハンズオンで学ぶにはわかりやすい。