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

ボックスはきれいで読みやすい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を「<font color="Red">デフォルトCSS</font>」という。
デフォルトCSSをキャンセルするためには、そのためにまたCSSを書く必要がある。

```css
.subnav ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
```

##サブナビゲーションの先頭にマークを付ける
`<ul>`、`<li>`でマークアップしたHTMLをよりナビゲーションらしく見せるために、`<li>`の各項目の先頭にリストマークとして画像を表示させる。

```css
.subnav a{
  padding-left: 16px;
  background: url(../../images/listmark.png) no-repeat left 0 top 4px;
  color: #1864b9;
  text-decoration: none;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443245/ec3e3d36-4ac7-06f0-d76e-1783a078d38f.png)
・`<a>`に左paddingを設けることでテキストの開始位置をずらす。
・マークの画像とテキストの画像があわないときは、「4px」の部分の数値を調整する

##パンくずリストを作成する
「パンくずリスト」とは、今表示しているパージの場所がわかるようにWebサイトのトップページからの階層構造をリスト化したもの

```html
<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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443245/fe7bd9b6-9dbc-5cd6-859f-8be095ab8440.png)
・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 <font color="Red">none</font> #b7383c   |枠線を表示しない。太さの領域も確保されないので注意が必要   |
|border: 1px <font color="Red">dotted</font> #b7383c  |点線。四辺に適用すると角が汚くなるので、一般的にはボーダーを一辺に適用するときに使う   |
|border: 1px <font color="Red">dashed</font> #b7383c  |長めの点線。四辺に適用すると角が汚くなるので、一般的にはボーダーを一辺に適用するときに使う |
|border: 1px <font color="Red">solid</font> #b7383c  |実線   |
|border: 1px <font color="Red">double</font> #b7383c  |二重線   |

##最後に
ボックスはCSSでの調整がおおいけど、ググれば出てくる程度だから自分で調べましょう～～