HTML&CSS：ボックスと情報の整理 #BOX

ボックスはきれいで読みやすい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での調整がおおいけど、ググれば出てくる程度だから自分で調べましょう～～

HTML&CSS：ボックスと情報の整理