Part２ - SNSリンク集（カスタマイズ）

カスタマイズ

マルチデバイス対応するためには、横幅（width）の記述は最小に留める

レイアウト設計（クラス名付与）を、自分の考え方で進める
テキストの指示は、外観のみを参考にする（デザインカンプからコーディングをする練習）

カスタマイズ記述例 - テキスト例との違い

各要素に幅を指定するのではなく、全体を囲んで１回だけ幅指定をしています

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>【コーディング練習】SNSリンク集サイト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <h1>カピぞう</h1>
  <p><img src="img/capyzou.png" alt="カピぞう"></p>
  <p>ファームの経営をしています。<br>気軽にフォローしてくださいね。</p>
  <ul>
    <li><a href="#">Capitter</a></li>
    <li><a href="#">Capistagram</a></li>
    <li><a href="#">Capybook</a></li>
  </ul>
</div><!-- /.container -->
</body>
</html>

CSSのリセットの記述

「*」全称セレクタですべての要素の余白を削除する
「box-sizing: border-box;」で、幅計算の出現頻度を少なくする
面（レイアウト）指定の初期化

@charset "UTF-8";

/* -------------------------------
  reset
------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
ul, li {
  list-style: none;
}

body指定

背景色の指定
文字指定の初期化

/* -------------------------------
  body
------------------------------- */
body {
  background-color: #bbf1ef;
  color: #222;
  font-size: 16px;
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.7;
}

全体をブロックとして捉える

幅を300pxに設定
ブラウザの中央に配置（widthが設定されているので、autoを設定可能）

/* -------------------------------
  layout
------------------------------- */
.container {
  width: 300px;
  margin: 20px auto;
  text-align: center;
  background-color: #fff;
  border: 2px solid #000;
}

文字の修飾

h1の角丸の直径は、文字サイズ+paddingで計算する
SNSボタン通しの空きは、無駄な余白ができないように「隣接セレクタ」で指定する

/* -------------------------------
  item
------------------------------- */
  h1 {
    margin-bottom: 20px;
    padding: 8px 0 6px;
    border: 3px solid #fff;
    border-radius: 32px;
    font-size: 18px;
  }
  p {
    margin-bottom: 20px;
    line-height: 1.5;
  }
  p > img {
    border-radius: 50%;
  }
  li a {
    display: block;
    padding: 20px 0;
    background-color: #ff7378;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
  }
  li + li {
    margin-top: 20px;
  }

完成例

widthは、container幅のみで設定しています

@charset "UTF-8";

/* -------------------------------
  reset
------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
ul, li {
  list-style: none;
}

/* -------------------------------
  body
------------------------------- */
body {
  background-color: #bbf1ef;
  color: #222;
  font-size: 16px;
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.7;
}

/* -------------------------------
  layout
------------------------------- */
.container {
  width: 300px;
  margin: 20px auto;
  text-align: center;
  /* background-color: #fff;
  border: 2px solid #000; */
}

/* -------------------------------
  item
------------------------------- */
  h1 {
    margin-bottom: 20px;
    padding: 8px 0 6px;
    border: 3px solid #fff;
    border-radius: 32px;
    font-size: 18px;
  }
  p {
    margin-bottom: 20px;
    line-height: 1.5;
  }
  p > img {
    border-radius: 50%;
  }
  li a {
    display: block;
    padding: 20px 0;
    background-color: #ff7378;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
  }
  li + li {
    margin-top: 20px;
  }