ボックスはきれいで読みやすいHTMLをつくるのと同時に、ページのレイアウトに重要な役割を果たしている。
インラインボックスとブロックボックス
ブラウザに表示されているすべてのタグは、「ボックス」と呼ばれるコンテンツを表示する領域を確保する。このボックスには大きく分けて「インラインボックス」と「ブロックボックス」の二種類がある。
・インラインボックス 「テキストの行に紛れ込むことができる」ボックスのこと。基本的には、テキストを修飾するようなタグやフォーム部分が表示される。
・ブロックボックス タグに含まれるコンテンツの量に関係なく、親要素と同じ幅の領域を確保するタイプのボックス。
ブロックボックスで表示されるタグは、さらにその意味や役割によって大きく次の二つに分けられる。
・そのタグがコンテンツに何らかの意味付けをするもの(ex.<h1>～<h6>、<p>タグ)
・ほかのタグを囲んで、情報の整理をしたりグループ化したりするもの(ex.<ul>、<li>、<div>タグ)
箇条書きのマークアップ
・箇条書き <ul>、<li>
・リスト項目の先頭に番号を付ける <ol>、<li>
<ul>、<li>、<ol>のCSS
<ul>``<ol>には、タグ自体に次のようなCSSが適用されている。
①<ul>、<ol>にはlist-style-typeプロパティが適用されていて、リストの各項目(<li>の各行)の先頭にはリストマークや番号が表示される
②<ul>、<ol>には、リストマークや番号を表示するスペースを確保し、<ul>、<ol>の上下に余白を持たせるために、paddingプロパティ、marginプロパティが適用されている
そのため、<ul>、<ol>にはCSSを適用しなくても上下左右にスペースがはじめからつけられている。こうしたCSSを「デフォルトCSS」という。
デフォルトCSSをキャンセルするためには、そのためにまたCSSを書く必要がある。
.subnav ul{
margin: 0;
padding: 0;
list-style-type: none;
}
サブナビゲーションの先頭にマークを付ける
<ul>、<li>でマークアップしたHTMLをよりナビゲーションらしく見せるために、<li>の各項目の先頭にリストマークとして画像を表示させる。
.subnav a{
padding-left: 16px;
background: url(../../images/listmark.png) no-repeat left 0 top 4px;
color: #1864b9;
text-decoration: none;
}
・<a>に左paddingを設けることでテキストの開始位置をずらす。
・マークの画像とテキストの画像があわないときは、「4px」の部分の数値を調整する
パンくずリストを作成する
「パンくずリスト」とは、今表示しているパージの場所がわかるようにWebサイトのトップページからの階層構造をリスト化したもの
<style>
.breadcrumb ol {
list-style-type: none;
margin: 0;
padding: 0;
}
.breadcrumb li {
display: inline;
}
.breadcrumb li::after {
content: "»";
color: #999;
}
.breadcrumb li:last-child::after {
content: none;
}
.breadcrumb a {
text-decoration: none;
color: #1864b9;
}
</style>
</head>
<body>
<div class="breadcrumb">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/products/">製品リスト</a></li>
<li><a href="/products/lens/">カメラレンズ</a></li>
<li>広角レンズ</li>
</ol>
</div>
・displayプロパティによって、本来ブロックボックスとして表示される<li>をインラインボックスとして表示させる（＝要素の表示状態を切り替える）
・「.breadcrumb li」で選択された要素の「::after」で、各項目のテキストの後ろに「>>」を表示させる
・「:last-child」を使って最後の<li>だけを選択し、その要素にだけは「>>」を表示させないようにする
<div>タグの使い方
<div>タグがあまりに多いHTMLは非常に読みづらく、メンテナンス性の低いものになってしまうので、できるだけ情報のまとまりを意識しながら<div>タグで囲むことが大切
⑴見出しと関連するコンテンツをまとめる
ひとつの<div>に囲まれる見出しは、原則として一つだけにする。また、そのまとまりが何のまとまりかわかるように<div>にはclass属性をつける
⑵パーツの「境界」をつくる
独立した情報を「パーツ」と考え、一つひとつのパーツの境界をはっきりさせるために<div>で囲む。そうすることで「どこからどこまでが一つのパーツなのか」がわかりやすくなり、順序の入れ替えや交換が楽になる
⑶HTMLの階層を揃える
美しいHTMLを書くためには、兄弟要素が同じカテゴリーに所属している必要がある
タグの分類は以下の通り
①インラインボックス（<img>、<strong>、<a>など）
②ブロックボックス
(a)コンテンツに意味付けをするボックス（<h1>、<ul>、<p>など）
(b)情報を整理・グループ化するボックス（<div>、<section>、<header>など）
⑷別のボックスのラッパー構造を作成する
ラッパー構造とは、<div>で囲まれた複数の「グループ化された構造」をさらに<div>で囲むこと。
主にCSSで複数の<div>を横に並ばせたりするときに使う
パディング・ボーダーの設定
ボックスの周囲に枠線を付けるには、borderプロパティを使用する。borderプロパティの値には、ボーダーの「太さ」「線の形状」「色」を、半角スペースで仕切って指定する
| 値と使用例 | 説明 |
|---|---|
| border: 1px none #b7383c | 枠線を表示しない。太さの領域も確保されないので注意が必要 |
| border: 1px dotted #b7383c | 点線。四辺に適用すると角が汚くなるので、一般的にはボーダーを一辺に適用するときに使う |
| border: 1px dashed #b7383c | 長めの点線。四辺に適用すると角が汚くなるので、一般的にはボーダーを一辺に適用するときに使う |
| border: 1px solid #b7383c | 実線 |
| border: 1px double #b7383c | 二重線 |
最後に
ボックスはCSSでの調整がおおいけど、ググれば出てくる程度だから自分で調べましょう～～