今回は、HTML & CSSを学習中の方に向けて、超入門のデザインカンプからのコーディングを解説いたします。
僕は、HTML & CSSを学習した後、iSaraというサイトを模写しようとしたのですが、難しすぎてすぐ挫折しました。
iSara以外にも、練習できる教材を探したのですが、どれも合わなかったです。
その時にもっと簡単なもので練習したいなと思ったので、今回のデザインカンプを作りました。
なので、もし以下のことで悩でいましたら、お役に立てるかなと思います。
- 既存のデザインカンプが難しい、、
- もっと簡単なところから始めたい！
それでは、見ていきましょう。
デザインツールの使い方は、デザインカンプからのコーディング：まとめで解説しています。
練習課題のデザインカンプ
今回の練習課題は、こちらです。
超初心者向けなので、トップページの一部分のみのデザインカンプを作りました。
冒頭でも言いましたが、自分はiSaraや他のデザインカンプですぐ挫折しました。
自分には、才能がないのかなと落ち込んでいましたが、違いました。
単純に難易度を限りなく下げればいいだけでした。
具体的には、いきなり1ページ全体をコーディングするのではなく、トップページの一部分のみをコーディングするようにしました。
そうしたら、徐々に自信がついてきて、難しいサイトのコーディングもできるようになりました。
なので、初心者の方は、このくらいの難易度から練習して、基盤を作るのがいいと思います。
ファイルはGithubにアップロードしています。
ダウンロードの仕方は、下記の動画を見てください。
コーディングを開始する前の準備
一応、準備についても解説いたします。
テキストエディタに必要なファイルを入れる
まずは、フォルダを作ってテキストエディタに必要なファイルを入れていきましょう。
自分は、visual studio codeというエディタを使っています。
HTMLに全体の構造を追加
次に、index.htmlに全体の構造を追加していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSSの読み込み -->
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/responsive.css">
<!-- Googleフォントの読み込み -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<title>one page1</title>
</head>
<body>
<header class="header">
<div class="header__inner">
</div>
</header>
<main class="main">
<section class="main__kv">
<div class="main__kv__inner">
</div>
</section>
</main>
</body>
</html>ここに出てくるタグを簡単に説明すると以下の通り。
<!DOCTYPE html>
HTMLであることを宣言
<html lang=”ja”>
ファイル内で使用されている言語を指定
jaはjapaneseの略
日本語のサイトならenではなく、jaにしたほうがよい
<head>
ドキュメント全般の情報 (メタデータ)を記載する場所
<meta charset=”UTF-8″>
文字コードをUTF-8に指定
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
スマホやタブレットのモバイル端末で最適に表示させるようにする
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
IE対策だけどぶっちゃけいらない
<title>
サイトやページにタイトルをつける
<body>
ブラウザの画面上に表示させるものを指定
<header>
セクションのヘッダーを表す
<main>
メインコンテンツを表す
<section>
内容のまとまりを表す
innerについては、後ほど説明します。
CSSの準備
文字のフォントをNotoSansJPに指定します。
/* style.css */
h2,
p,
a {
font-family: "Noto Sans JP", sans-serif;
}また、今回はリセットCSSというものを使います。
リセットCSSは、ブラウザがデフォルトで持っているCSSを打ち消してくれます。
これを使わないと、無駄な余白ができたりするので、使いましょう。
今回は、destyleというリセットCSSを使います。
reset.cssにコードをコピペしてください。
解説
全てのコードを解説すると膨大な量になるので、わかりにくいところのみを解説いたします。
最近は、スマホで検索する人が多いので、spのデザインからコーディングしていきたいと思います。
なので、メディアクエリはこのようにします。
/* responsive.css */
@media screen and (min-width: 769px) {
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1280px) {
}あれ、「max-width」で指定するんじゃないの？と思われた方がいるかも知れません。
max-widthは、PCのデザインからコーディングする時に使います。
今回は、スマホのデザインからなので「min-width」を使います。
また、いきなりコーディングすると、失敗するので、大体の構造を理解しておきましょう。
それでは、順番に見ていきましょう。
コーディングのやり方は、人それぞれ違うので、そこはご注意ください。
ヘッダー
<header class="header">
<div class="header__inner">
<h1 class="header__title">
<a href="#">
<img src="./image/logo.svg" alt="ロゴ">
</a>
</h1>
<!-- ハンバーガーメニュー -->
<div class="hamburger">
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
</div>
<!-- PC用ナビ -->
<nav class="header__nav">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>
</div>
</header>/* style.css */
/* ヘッダー */
.header {
background: #fff;
width: 100%;
position: fixed;
box-shadow: 0 0 8px #bdc3c7;
}
.header__inner {
padding: 20px 15px;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
/* ハンバーガーメニュー */
.hamburger {
display: block;
cursor: pointer;
}
.hamburger__line {
display: block;
width: 32px;
height: 2px;
background-color: #202020;
border-radius: 4px;
}
.hamburger__line:not(:last-child) {
margin-bottom: 8px;
}
/* PC用ナビ */
.header__nav {
display: none;
}/* responsive.css */
@media screen and (min-width: 769px) {
.header__inner {
max-width: 1340px;
margin: 0 auto;
padding: 30px 50px;
min-height: 110px;
}
/* ハンバーガーメニュー */
.hamburger {
display: none;
}
/* PC用ナビ */
.header__nav {
display: block;
}
.header__nav ul {
display: flex;
}
.header__nav ul li:not(:last-child) {
margin-right: 40px;
}
.header__nav ul li a {
font-size: 18px;
line-height: 1;
opacity: 1;
transition: all ease 0.5s;
}
.header__nav ul li a:hover {
opacity: 0.5;
}
}
@media screen and (min-width: 1024px) {
.header__inner {
padding: 30px 20px;
}
}
@media screen and (min-width: 1280px) {
.header__inner {
padding: 30px 0;
}
}各要素を分解して解説していきます。
header
/* style.css */
.header {
background: #fff;
width: 100%;
position: fixed;
box-shadow: 0 0 8px #bdc3c7;
}position fixedを指定することで、スクロールしても追従してくれます。
header__inner
/* style.css */
.header__inner {
padding: 20px 15px;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
}/* responsive.css */
@media screen and (min-width: 769px) {
.header__inner {
max-width: 1340px;
margin: 0 auto;
padding: 30px 50px;
min-height: 110px;
}
}
@media screen and (min-width: 1024px) {
.header__inner {
padding: 30px 20px;
}
}
@media screen and (min-width: 1280px) {
.header__inner {
padding: 30px 0;
}
}flexboxを使っています。
ここで使っているものを簡単に説明すると以下の通りです。
display: flex;
横並びにする
justify-content
水平方向の位置を指定
align-items
垂直方向の位置を指定
横並びで幅が欲しくて、要素を真ん中に表示したいので、このコードになっています。
flexboxについて、詳しく知りたい方は、Web Design TrendsさんのCSS Flexboxの使い方が参考になるかと思います。
flexboxについて、わかりやすい画像を使いながら説明されています。
また、インナーを使っている理由は、「max-width」と「margin 0 auto」を指定することで、背景を広がるようにし、真ん中に要素を持ってくることができるからです。
この知識は、案件でもかなり使うので覚えておきましょう。
header__title
<h1 class="header__title">
<a href="#">
<img src="./image/logo.svg" alt="ロゴ">
</a>
</h1>ロゴがサイトのタイトルなので、h1タグを使います。
h1タグは、SEOでかなり重要です。
Ahrefsの記事では、h1タグの重要性は以下の3つであると書かれています。
- 検索エンジンがページを理解するのに役立つ
- ユーザーエクスペリエンスを向上させる
- アクセシビリティを向上させる
なんか難しいなと思われた方は、後々覚えていけばいいので、飛ばして大丈夫です。
今は、h1タグって重要なんだなという認識で十分だと思います。
ハンバーガーメニュー
<div class="hamburger">
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
</div>/* style.css */
.hamburger {
display: block;
cursor: pointer;
}
.hamburger__line {
display: block;
width: 32px;
height: 2px;
background-color: #202020;
border-radius: 4px;
}
.hamburger__line:not(:last-child) {
margin-bottom: 8px;
}/* responsive.css */
@media screen and (min-width: 769px) {
.hamburger {
display: none;
}
}空のspanタグを3つ用意し、「width」と「height」で線を作っています。
また、spanタグは、インライン要素なので、「display block」でブロック要素に変えます。
理由は、インライン要素だと、横幅や高さなどがきちんと反映されなからです。
ここに関しては、サルワカさんのdisplayの使い方を総まとめで紹介されている図がわかりやすいかなと思います。
記事では、各displayについて詳しく解説されているので、気になる方は確認して見てください。
spanタグの下に余白を追加したいのですが、最後の要素には反映してほしくないので、下記のコードを記載します。
/* style.css */
.hamburger__line:not(:last-child) {
margin-bottom: 8px;
}not(:last-child)の意味は、下記の画像の通りです。
なので、今回は、「spanタグの最後の要素以外に8pxのマージンを追加する」という意味になります。
これらの「:not」や「:last-child」は擬似クラスといい、他にもたくさんあります。
詳しく知りたい方は、しまぶーさんの動画が参考になるかと思います。
動画では、擬似クラス以外のセレクターについても、詳しく解説されています。
本来であれば、クリックしたらメニューがでるようにアニメーションを実装しますが、今回は超初心者の方を想定しているので、見た目だけの実装のみにします。
どうしても、アニメーションの作り方を知りたいという方は、こちらの動画を見てください。
CSSで、アニメーションを実装する方法が説明されています。
header__nav
<!-- PC用ナビ -->
<nav class="header__nav">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>/* style.css */
.header__nav {
display: none;
}/* responsive.css */
@media screen and (min-width: 769px) {
/* PC用ナビ */
.header__nav {
display: block;
}
.header__nav ul {
display: flex;
}
.header__nav ul li:not(:last-child) {
margin-right: 40px;
}
.header__nav ul li a {
font-size: 18px;
line-height: 1;
opacity: 1;
transition: all ease 0.5s;
}
.header__nav ul li a:hover {
opacity: 0.5;
}
}ナビ要素は、navタグで囲みます。
<nav class="header__nav">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>今回は、3つの要素を横並びで表示したいので、ulタグにflexを指定します。
/* responsive.css */
@media screen and (min-width: 769px) {
.header__nav ul {
display: flex;
}
}/* responsive.css */
@media screen and (min-width: 769px) {
.header__nav ul li a {
opacity: 1;
transition: all ease 0.5s;
}
.header__nav ul li a:hover {
/* ホバーしたら薄くなるようにする */
opacity: 0.5;
}
}transitionの意味は、以下の画像の通り。
なので、今回の場合だと「対象の全てにゆっくり0.5sかけてアニメーションをします」という意味になります。
transitionについて、もっと詳しく知りたい方は、WEBST8さんのtransitionプロパティの使い方が参考になるかと思います。
各プロパティについて、画像を使いながらわかりやすく解説されています。
スマホでは非表示、pcでは表示したいので、以下のようにします。
/* style.css */
.header__nav {
display: none;
}@media screen and (min-width: 769px) {
.header__nav {
display: block;
}
}メイン
<main class="main">
<section class="main__kv">
<div class="main__kv__inner">
<div class="main__kv__inner__left">
<h2>DEMODEMODEMO<br>DEMO</h2>
<p>
ここに文章が入りますここに文章が入ります
ここに文章が入りますここに文章が入ります
ここに文章が入りますここに文章が入ります
</p>
<a class="main__kv__inner__left__btn" href="#">View More</a>
<ul>
<li>
<a href="#">
<img src="./image/twitter.png" alt="twitter">
</a>
</li>
<li>
<a href="#">
<img src="./image/instagram.png" alt="instagram">
</a>
</li>
</ul>
</div>
<div class="main__kv__inner__right">
<ul>
<li><img src="./image/cider.jpg" alt="サイダー"></li>
<li><img src="./image/cake.jpg" alt="ケーキ"></li>
<li><img src="./image/orange.jpg" alt="オレンジ"></li>
<li><img src="./image/orange-cider.jpg" alt="オレンジサイダー"></li>
</ul>
</div>
</div>
</section>
</main>/* style.css */
.main__kv__inner {
padding: 80px 15px 0;
}
.main__kv__inner__left {
padding: 0;
max-width: 360px;
margin: 45px auto;
}
.main__kv__inner__left h2 {
font-size: 32px;
font-weight: bold;
line-height: 1.5;
margin-bottom: 30px;
}
.main__kv__inner__left p {
font-size: 16px;
line-height: 1.5;
max-width: 330px;
margin-bottom: 30px;
}
.main__kv__inner__left__btn {
display: inline-block;
border-radius: 50px;
font-size: 18px;
line-height: 1;
color: #fff;
background-color: #bf7c63;
padding: 16px 38px;
transition: all ease 0.5s;
opacity: 1;
margin-bottom: 30px;
}
.main__kv__inner__left__btn:hover {
opacity: 0.7;
}
.main__kv__inner__left ul {
max-width: 150px;
margin-left: auto;
display: flex;
justify-content: space-between;
}
.main__kv__inner__left ul li {
max-width: 50px;
}
.main__kv__inner__left ul li a {
display: inline-block;
transition: all ease 0.5s;
opacity: 1;
}
.main__kv__inner__left ul li a:hover {
opacity: 0.7;
}
.main__kv__inner__left ul li a img {
width: 100%;
}
.main__kv__inner__right ul {
display: flex;
align-items: center;
flex-direction: column;
}
.main__kv__inner__right ul li {
max-width: 360px;
}
.main__kv__inner__right ul li:not(:last-child) {
margin-bottom: 30px;
}
.main__kv__inner__right ul li img {
width: 100%;
}/* responsive.css */
@media screen and (min-width: 769px) {
.main__kv__inner {
max-width: 1280px;
margin: 0 auto;
padding: 110px 0 0;
}
.main__kv__inner__left {
margin: 60px auto 40px auto;
max-width: 520px;
}
.main__kv__inner__left h2 {
font-size: 46px;
margin-bottom: 30px;
line-height: 2;
}
.main__kv__inner__left p {
font-size: 24px;
margin-bottom: 60px;
max-width: 482px;
}
.main__kv__inner__right {
max-width: 520px;
margin: 0 auto;
}
.main__kv__inner__right ul {
flex-direction: initial;
justify-content: center;
flex-wrap: wrap;
}
.main__kv__inner__right ul li {
width: 50%;
}
.main__kv__inner__right ul li:not(:last-child) {
margin-bottom: 0;
}
}
@media screen and (min-width: 1024px) {
.main__kv__inner {
display: flex;
padding: 110px 20px 0;
}
.main__kv__inner__left {
padding-right: 20px;
margin: 30px auto 40px auto;
}
.main__kv__inner__right {
max-width: 720px;
}
}
@media screen and (min-width: 1280px) {
.main__kv__inner__left {
padding-right: 20px;
margin: 60px auto 40px auto;
}
.main__kv__inner__left__btn {
margin-bottom: 140px;
}
}mainから少し複雑になりますね。
順番に見ていきましょう。
main__kv
<main class="main">
<section class="main__kv"></section>
</main>main__kvはsectionタグを使っています。
なぜなら、サイトを作るときは、セクションごとにコンテンツを作るのがほとんどだからです。
Appleのホームページもsectionタグで作られています。
また、Googleのクローラーがサイトの内部構造を把握するのに役に立ちます。
初心者の方は、全てのタグをdivタグにしがちですが、それだとクローラーに内部構造を正確に伝えられません。
ていうか、これ改行されてない文章みたいで、自分自身も理解しづらいですよね。
なので、適切なタグを使い、きちんと要素を分けて、クローラーに正確な情報を伝える必要があります。
こっちの方が、クローラーや自分または開発チームに対してもいいですよね。
sectionタグを使うときは、必ず見出しを入れる必要があります。
例えば、こんな感じの使い方はダメです。
以下のように、h1~h5などのタグを入れる必要があります。
さらに詳しく知りたい方は、シュウさんのsectionタグの正しい使い方を見てください。
sectionタグのルールについて、コードを使いながら詳しく解説されています。
main__kv__inner
<main class="main">
<section class="main__kv">
<div class="main__kv__inner">
</div>
</section>
</main>/* style.css */
.main__kv__inner {
padding: 80px 15px 0;
}/* responsive.css */
@media screen and (min-width: 769px) {
.main__kv__inner {
max-width: 1280px;
margin: 0 auto;
padding: 110px 0 0;
}
}
@media screen and (min-width: 1024px) {
.main__kv__inner {
display: flex;
padding: 110px 20px 0;
}
}メインも無限に広がると困るのでインナーを使っています。
スマホとタブレットでは縦になるようにして、pcでは横になるようにしています。
/* responsive.css */
@media screen and (min-width: 769px) {
.main__kv__inner {
//flexが記載されていないから縦になる
}
}
@media screen and (min-width: 1024px) {
.main__kv__inner {
//1024px以上は横表示
display: flex;
}
}main__kv__inner__left__btn
<a class="main__kv__inner__left__btn" href="#">View More</a>/* style.css */
.main__kv__inner__left__btn {
display: inline-block;
border-radius: 50px;
font-size: 18px;
line-height: 1;
color: #fff;
background-color: #bf7c63;
padding: 16px 38px;
transition: all ease 0.5s;
opacity: 1;
margin-bottom: 30px;
}
.main__kv__inner__left__btn:hover {
opacity: 0.7;
}/* responsive.css */
@media screen and (min-width: 1280px) {
.main__kv__inner__left__btn {
margin-bottom: 140px;
}
}aタグは、デフォルトだとインライン要素なので、「inline-block」を指定します。
ヘッダーで解説したのと同じ理由です。
main__kv__inner__left ul
<div class="main__kv__inner__left">
<ul>
<li>
<a href="#">
<img src="./image/twitter.png" alt="twitter">
</a>
</li>
<li>
<a href="#">
<img src="./image/instagram.png" alt="instagram">
</a>
</li>
</ul>
</div>/* style.css */
.main__kv__inner__left ul {
max-width: 150px;
margin-left: auto;
display: flex;
justify-content: space-between;
}
.main__kv__inner__left ul li {
max-width: 50px;
}
.main__kv__inner__left ul li a {
display: inline-block;
transition: all ease 0.5s;
opacity: 1;
}
.main__kv__inner__left ul li a:hover {
opacity: 0.7;
}
.main__kv__inner__left ul li a img {
width: 100%;
}ulだけ右用せにしたいので、「margin-left auto」を使っています。
なんで右に行くの？と思うかもしれませんが、「margin-left 50px」で右に要素が動くのと同じです。
ここに関しては、コリスさんのオートマージンの仕組みと効果的な使い方で紹介されている図がわかりやすいです。
記事では、オートマージンについて詳しく解説されているので、気になる方は確認して見てください。
main__kv__inner__right ul
<div class="main__kv__inner__right">
<ul>
<li><img src="./image/cider.jpg" alt="サイダー"></li>
<li><img src="./image/cake.jpg" alt="ケーキ"></li>
<li><img src="./image/orange.jpg" alt="オレンジ"></li>
<li><img src="./image/orange-cider.jpg" alt="オレンジサイダー"></li>
</ul>
</div>/* style.css */
.main__kv__inner__right ul {
display: flex;
align-items: center;
flex-direction: column;
}
.main__kv__inner__right ul li {
max-width: 360px;
}
.main__kv__inner__right ul li:not(:last-child) {
margin-bottom: 30px;
}
.main__kv__inner__right ul li img {
width: 100%;
}/* responsive.css*/
@media screen and (min-width: 769px) {
.main__kv__inner__right ul {
flex-direction: initial;
justify-content: center;
flex-wrap: wrap;
}
.main__kv__inner__right ul li {
width: 50%;
}
.main__kv__inner__right ul li:not(:last-child) {
margin-bottom: 0;
}
}ここの要素は、以下のような仕様にしたいです。
スマホ
縦表示、真ん中寄せ
PC
横並びで一定の横幅で折り返し
色々やり方はありますが、今回はflexboxを使います。
/* style.css */
.main__kv__inner__right ul {
display: flex;
align-items: center;
flex-direction: column;
}「display flex」で横にし「flex-direction column」で縦に戻しているので、何やってるの？と思われるかも知れません。
これをやった理由は、 flexboxを適用させ「align-items」で要素を真ん中に持ってくるためです。
たまに使うので覚えておくと便利です。
align-itemsは縦方向の位置を指定するものですが、「display flex」の後に「flex-direction column」で縦に戻しているので、横を指定するものになります。
まぁ、justify-contentと役割が入れ替わったという認識で問題ないかと思います。
タブレットとPCの時のコードは、以下の通りです。
/* responsive.css */
@media screen and (min-width: 769px) {
.main__kv__inner__right ul {
flex-direction: initial;
justify-content: center;
flex-wrap: wrap;
}
}769px以上では、横にしたいので、flex-directionを初期値に戻します。
また、「flex-wrap wrap」で折り返しするようにします。
769px以上では、2列にしたいので50%にします。
/* responsive.css */
@media screen and (min-width: 769px) {
.main__kv__inner__right ul li {
width: 50%;
}
}また、ここでも「not:(:last-child)」を使っています。
/* style.css */
.main__kv__inner__right ul li:not(:last-child) {
margin-bottom: 30px;
}/* responsive.css */
@media screen and (min-width: 769px) {
.main__kv__inner__right ul li:not(:last-child) {
margin-bottom: 0;
}
}色々なところで使えるので、覚えておきましょう。
まとめ
今回は、以上です。
トップページの一部分のみのコーディングだけでしたが、得られたものは結構あるかと思います。
いきなり難しいサイトをコーディングするのもいいですが、厳しいなら素直に難易度を下げるのも重要かと思います。
わかりにくいところなどがありましたら、TwitterのDMで聞いてくだされば、お答えいたします。
それでは、また！
