200514,15,19学習記録：実際のCSSを書く順番（TechAcadmy）

**⓪htmlにCSSのid,class設定をする**

〇ヘッダー（header）
・header →　タイプセレクタ
　（ヘッダーエリアのサイズ、マージンの設定）
・nav　→　id="global_nabi"
　（ナビゲーションのデザイン設定）　

〇メインビジュアル（div main_visual）
・div →　id="main_visual"
　（メインビジュアルエリアのサイズ、マージンの設定）

〇メインエリア大枠（div wrapper）
・div →　id="wrapper"
　（メインエリアのサイズ、マージンの設定）

〇メインエリアのメイン（div main）
・div →　id="main"
　（フロート設定）
・section →　id="point"
　（pointセクション内のデザイン設定）
・section →　id="news"
　（newsセクション内のデザイン設定）

〇メインエリアのサイド（div aside）
・aside →　id="sidebar"
　（フロート設定）
・section →　id="side_banner"
　（サイドバナー内のデザイン設定）

〇フッター（footer）
・footer →　タイプセレクタ
　（背景、テキストデザイン設定）
・div →　id="footer_navi"
　（フッター内のデザイン設定）


**①文字エンコーディングを指定する**
　@charset "UTF-8";

**②全体 ボディ・リンクの設定**
・bodyの設定⇒マージン、パディング、カラー、フォントサイズ
ブラウザのデフォルトでできてしまうマージン、パディングを０にする

```
body {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}
```

・リンクの文字色
疑似クラスを用いて設定

```
a {
    color: #333;
}

a:visited {
    color: #333;
}

a:hover {
    color: #333;
    font-weight: 700;
    text-decoration: none;
}
```

**③全体 マージンの設定**

・見出しのマージン⇒デフォルトでは上下にマージンがあるので０にする

```
h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
}
```

・段落のマージン⇒デフォルトでは上下にマージンがあるので０に、行間もあけると見やすい

```
p {
    margin-top: 0;
    line-height: 1.6;
}
```

・画像のマージン⇒画像下にマージンができてしまうことある

```
img {
    vertical-align: bottom;
}
```

**④全体　見出しの装飾**

↓こちらを参考に、というかコピペして使えばいいだろう。(フォントサイズは自分で指定)
https://saruwakakun.com/html-css/reference/h-design


**⑤ヘッダー**

＜位置調整＞
・ヘッダーの位置調整　→　```<header>```に```margin:auto```にして全体を中央に揃える
・ロゴの位置調整　→　```header h1``` セレクタにmarginプロパティをあてる
・ナビの位置調整　→　```<nav>```要素に指定されているIDセレクタにmarginプロパティをあてる

＜ナビゲーションのデザイン①＞
・リストの「・」を消す　→　```<ul>```タグに、IDセレクタで```list-style: none;```のプロパティと値をあてる
・リストを横並びにする　→　デフォルトがblockの```<li>```タグに、タイプセレクタで```display:inline-block```のプロパティと値をあてる
・デザインを整える　→　デフォルトがinlineの```<a>```タグに、タイプセレクタで```display:block```のプロパティと値、またパディングやカラーなどのプロパティでデザインを整える

＜ナビゲーションのデザイン②＞
・```<li>```タグに```display:inline-block```を使って横に並べると「半角スペース」が```<li>```と```<li>```の間に入ってしまう問題を解決する（半角スペース分横幅が増えてしまう）。
→```<ul>```タグにセレクタで```font-size:0px;```に一度して、```<li>```タグで```font-size:14px;```などサイズを戻す。ここは難しいのでCSSをそのまま掲載する

```
#global_navi ul {
    font-size: 0;  /* 半角スペース削除 */
    list-style: none;
    margin: 0;
    padding: 0;
}

#global_navi ul li {
    font-size: 14px;  /* フォントサイズ復活 */
    display: inline-block;
    width: 164px;
    text-align: center;
}
```

**⑥メインビジュアル**

メインビジュアルを入れるdiv要素に、IDセレクタでサイズ、マージンを設定する。
サイズはグローバルナビゲーションと同じサイズで。

**⑥メインとサイドバー**

・全体のdiv要素に、IDセレクタwrapperのサイズ、マージンを設定する。
・wrapperをあてたdiv要素内にある、メイン(div要素のIDセレクタmain)とサイド(aside要素のIDセレクタsidebar)の幅とfloat設定をする。
・#wrapperをあてたdiv要素に、.clearfixをあて、クリアフィックスの設定をする。

```
/*チャプター：メインとサイドバー（2カラムレイアウト）*/
#wrapper {
    width: 984px;
    margin: 0 auto;
}

#main {
    width: 730px;
    float: left;
}

#sidebar {
    width: 220px;
    float: right;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
```

**⑦メインとサイドバー**

・メインエリアの内部のデザインをする。
　section要素やfigure要素の設定。

```
/*チャプター：メインエリア*/
#point figure {
    float: right;
    margin-left: 16px;
}

#point figcaption {
    font-size: 12px;
    color: #9C9689;
    text-align: center;
}

#news ul {
    list-style: none;
    padding: 0;
}

#news li {
    margin-bottom: 10px;
}

#news li a {
    margin-left: 15px;
}
```

・サイドバーの内部のデザインをする
　section要素の設定

```
/*チャプター：サイドバー*/
#side_banner ul {
    list-style: none;
    padding: 0;
}

#side_banner {
    margin-bottom: 30px;
    border: 1px solid #956840;
    text-align: center;
}

#side_banner h2 {
    background-color: #956840;
    color: #fff;
    padding: 7px;
    font-size: 14px;
    text-align: center;
}
```

**⑧フッター**
フッター要素内のデザインをする。

```
/*チャプター：フッター*/
footer #footer_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

footer {
    background-color: #956840;
    text-align: center;
}

footer #footer_navi {
    background-color: #f0f0f0;
    padding: 10px 0;
}

footer #footer_navi li {
    display: inline;
    border-left: solid 1px #333;
    margin-left: 8px;
    padding-left: 8px;
    font-size: smaller;
}

footer #footer_navi li:last-child {
  border-right: solid 1px #333;
  padding: 0 8px;
}

footer small {
    display: inline-block;
    padding: 8px 0;
    color: #fff;
}
```