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

⓪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;
}