この内容について

この内容は、Progateやドットインストールなどをやって、
次に何をすれば良いかわからない人向けに、簡単で分かりやすく、
実際に通用するデザインでコーディングを練習していこうという記事です。
全3回に分けて、なるべく分かりやすく紹介していきます(^^)
コーディング練習ブログトップページ編 2 / 3
コーディング練習ブログトップページ編 3 / 3

完成品

完成したデザインがこちらです。
よく見る2カラムのブログのデザインです。
ヘッダーにメニューとタイトルがあり、ファーストビューにスライドがあり、
その下に記事がいくつか並んでいて、サイドバーがあるというデザインです。
もちろんレスポンシブ対応です！！！

See the Pen Design_Blog-top by engineerhikaru (@engineerhikaru) on CodePen.

コーディング練習の注意点

コーディングの練習をする時は、全てコピペしないようにしていただきたいです。
解説しているコードは全てコピペだけで完成品と同じになりますが、背景色や文字色やフォントを変えたりして、
自分の好きなようにカスタマイズしていくと理解度も深まり、コーディングの楽しさも増します。

要するに、このまま公開しても良いと思えるようにカスタムしていきながら作って欲しいです。
おしゃれな画像を入れる・タイトルをつける・色を変えるなどはしていってください！(^^)

今回やっていくこと

今回は、共通のCSSの設定と、ヘッダーのコーディングまでやっていきます。
事前に必要なものは、テキストエディタです。そちらの準備は済ませてください。
おすすめテキストエディタ | Qiita

この部分を作っていきます↓

スマホだとこう↓

コーディング

ファイル作成

今回のファイル構成は、HTMLファイル1つ、CSSファイル1つで作成していきます。
Practiceというフォルダを作成し、その配下にindex.htmlとstyles.cssを作成します。

- Practice
    - index.html
    - styles.css

HTMLコードテンプレート

index.htmlにテンプレートのコードを書いていきます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>練習</title>
</head>
<body>
  <!-- ヘッダーパーツ -->
  <!-- スライドパーツ -->
  <!-- 記事一覧&サイドバー -->
  <!-- フッターパーツ -->
</body>
</html>

書いている内容としては、下記の通りで、
基本的な書き方なので、テンプレートとして覚えてください。

でHTMLはコメントを書けるのですが、

上に書いているコメント部分に今後解説していくHTMLを記述していってください。

文字コードはUTF-8を指定
ビューポートを指定し、モバイルで効果的に画面をズームさせる
CSSファイル(styles.css)を読み込む
タイトルを指定する (ブラウザのタブに表示されます)

リセットCSS

デフォルトのCSSを更新するコードを書いていきます。
今回はコード量も少なくした最低限のリセットCSSです。本当はもっと書くべきことはあります...
リセットCSSとはなんだろうと思った方は、「リセットCSS」で検索してみてください。

styles.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  letter-spacing: 3px;
  font-family: "Lato", "Hiragino Maru Gothic Pro", "Meiryo UI", Meiryo, "MS PGothic", sans-serif;
}
div{
  position: relative;
}
img{
  vertical-align: bottom;
  width: 100%;
  height: auto;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}

書いている内容としては、下記のような感じです。

ユニバーサルセレクタで、全ての要素の余白などを0にし、要素のmarginやpaddingを幅や高さに含ませます。
- 参考 ( margin・padding・box-sizing )
body以下の要素の、文字間隔をやや広くし、フォントを丸めのフォントなどにします。
- 参考 ( letter-spacing・font-family )
divタグは、現在の位置を基準に相対的な位置を決めるrelativeを指定します。
- 参考 ( position )
imgタグは、画像の位置を下にします。(これにより下に余白が発生しなくなる)横幅は親要素の100%の幅にし、高さは自動で設定します。
- 参考 ( vertical-align・width・height )
liタグは、リストの先頭の点をなくします
- 参考 ( list-style )
aタグは、デフォルトのテキスト下線をなくします。
- 参考 ( text-decoration )

共通CSS

ページで共通で使いたいCSSを書いていきます。
MAXの横幅やホバーエフェクトなどですね。

styles.css

.container{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.max-width{
  margin: auto;
  max-width: 1024px;
}
.char-effect,
.char-effect2::after,
.char-effect3,
.img-effect img{
  transition: all ease-in-out .5s;
}
.char-effect:hover{
  background: #DCE4EC;
  color: #2B536A;
}
.char-effect2{
  position: relative;
}
.char-effect2::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #2B536A;
}
.char-effect2:hover::after{
  width: 100%;
}
.char-effect3:hover{
  color: #2B536A;
}
.img-effect{
  overflow: hidden;
}
.img-effect:hover img{
  transform: scale(1.2) rotate(3deg);
}

書いている内容としては、下記のような感じです。

containerクラスは、折り返しありのflexboxで、子要素の配置を上に合わせます。
- 参考 ( display・flex-wrap・align-items )
max-widthクラスは、横幅の最大値を1024pxにして、margin: autoで中央に寄せます。
- 参考 ( max-width )
ホバーエフェクトは、簡単に言うと0.5秒遅れて起動させます。
- 参考 ( transition )
char-effectクラスは、ホバー時に文字と背景色を指定した色に変えます。
char-effect2クラスは、ホバー時に文字の下に下線を表示させます。
char-effect3クラスは、ホバー時に文字の色を変えます。
img-effectクラスは、ホバー時に画像を少し斜めにさせながらズームさせます。

ヘッダーパーツ

ここからようやくHTMLも書いていきます。
まずはヘッダー部分のHTMLを書いていきます。

index.html

<header class="header-normal">
  <div class="container max-width header-edge">
    <h1 class="title-normal"><a href="#">タイトル</a></h1>
    <input type="checkbox" id="hamb"/>
    <label class="sp-hamb" for="hamb"><span></span></label>
    <nav class="nav-normal">
      <ul class="container">
        <li><a href="#" class="char-effect2">HOME</a></li>
        <li><a href="#" class="char-effect2">ABOUT</a></li>
        <li><a href="#" class="char-effect2">CONTACT</a></li>
      </ul>
    </nav>
  </div>
</header>

どうなっているか簡単に解説すると、

headerタグの中にcontainerクラスのdivタグを作る → headerに背景色を付けたりしたい
h1タグを使ってタイトルを表示。一般的にタイトル部分はリンクになっているので、h1タグ内にaタグを使う
inputとlabelタグを使って、CSSだけでハンバーガーメニューを作っていく
navタグとulタグで一般的なサイトによくあるメニューを表示していく

styles.css

.header-normal{
  height: 70px;
  background: #eee;
}
.header-edge{
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.title-normal{
  padding-left: 20px;
}
.title-normal a{
  color: #444;
}
.nav-normal ul{
  align-items: center;
  font-size: 14px;
}
.nav-normal a{
  display: block;
  padding: 0 10px;
  line-height: 70px;
  color: #444;
}
.nav-normal li:last-child a{
  margin-right: 20px;
}
@media screen and (min-width: 769px){
  /* 769px以上のスクリーン幅の場合はハンバーガーメニューは表示しない */
  #hamb,
  .sp-hamb{
    display: none;
  }
}
@media screen and (max-width: 768px){
  /* inputタグは表示しない */
  #hamb{
    display: none;
  }
  /* ハンバーガーメニューのアイコンもCSSだけで表現 */
  .sp-hamb{
    padding: 34px;
    cursor: pointer;
    z-index: 9999;
  }
  .sp-hamb span,
  .sp-hamb span::before,
  .sp-hamb span::after{
    display: block;
    width: 26px;
    height: 2px;
    background: #444;
    transition: all ease-in-out .5s;
  }
  .sp-hamb span::before,
  .sp-hamb span::after{
    content: '';
    position: absolute;
  }
  .sp-hamb span::before{
    margin-top: -8px;
  }
  .sp-hamb span::after{
    margin-top: 8px;
  }
  /* ハンバーガーメニューがクリックされたら、アイコンを×にする */
  #hamb:checked ~ .sp-hamb span{
    background: transparent;
  }
  #hamb:checked ~ .sp-hamb span::before,
  #hamb:checked ~ .sp-hamb span::after{
    margin-top: 0;
  }
  #hamb:checked ~ .sp-hamb span::before{
    transform: rotate(45deg);
  }
  #hamb:checked ~ .sp-hamb span::after{
    transform: rotate(-45deg);
  }
  /* ハンバーガーメニューがクリックされていなかったら、メニューは隠す */
  #hamb:not(:checked) ~ nav{
    overflow: hidden;
    width: 100%;
    height: 0;
  }
  /* ハンバーガーメニューがクリックされたら、メニューを表示する */
  #hamb:checked ~ nav{
    margin-top: -70px;
    padding-top: 70px;
    width: 100%;
    height: 100vh;
    z-index: 9998;
    background: #DCE4EC;
  }
  /* メニューは縦並びにする */
  .sp-hamb ~ nav li{
    width: 100%;
    text-align: center;
  }
  .sp-hamb ~ nav a{
    padding: 0 20px;
  }
}

どうなっているか簡単に解説すると、

headerタグの高さは、70pxにし背景色を#eeeにする
header直下のdivタグは、高さは100%使うようにして、垂直方向に中央に揃え、水平方向は両端揃えにする
- 参考 ( align-items・justify-content )
h1タグは、左に余白を少し
メディアクエリ(media screen)を使って、スマホの場合はハンバーガーメニューにする (コメントを参考に理解を深めてください)

次回

次回は、スライドの部分を解説していきます。

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)

コーディング練習ブログトップページ編 2 / 3
コーディング練習ブログトップページ編 3 / 3