本記事ではHTML / CSSの練習用にKROWLサイトで配布している、KROWLコーディング課題「個人制作の趣味サイト」のコード解説をしたいと思います。
今回はデザインデータの確認から大枠の設計までを解説します。
実際に僕がどうデザインを読み解き、それを実現するためにどういったコードを書いたのか、参考にしていただければ幸いです。
ぜひKROWLサイトから課題をダウンロードし、同梱されているサンプルコードを見ながら、もしくは自身でコードを書きながらお読みください！
※本記事に掲載されているコードはあくまでも一例です。絶対的な正解というわけではありませんので、予めご了承ください。
工程その1「headを確認」
さあバリバリCSSを書いていくぞ！…という前に、まずはheadの中身をきちんと整理しておきましょう。
今回は以下のような内容で進めていきます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>廃 - before the time comes -</title>
<!-- html5doctor.com Reset Stylesheet -->
<link rel="stylesheet" href="assets/css/reset.css">
<!-- html5doctor.com Reset Stylesheet でリセットしきれないスタイルをcustom_reset.cssで定義-->
<link rel="stylesheet" href="assets/css/custom_reset.css">
<!-- 具体的なスタイルをstyle.cssに記述 -->
<link rel="stylesheet" href="assets/css/style.css">
</head>注目すべき箇所は「custom_reset.css」です。
<!-- html5doctor.com Reset Stylesheet -->
<link rel="stylesheet" href="assets/css/reset.css">今回は上記の指定でhtml5doctor.com Reset StylesheetというリセットCSSを使いましたが、100%思った通りにリセットしてくれるわけではありません。
コーディングを行う人の好みにもよってくるため仕方ないのですが、とはいえそれを打ち消すスタイルを必要な箇所に都度書いていくのも非効率です。
そのため、自分流の追加リセットを別のリセットCSSファイルとして作っておくと良いでしょう。
必要なファイルが増えることでリクエスト／レスポンスが増えてしまいますが、CSSファイルひとつ程度であれば微々たる差なので、今回は「公に配布されているものに対してどれくらいカスタマイズしたか」がわかりやすいように分けておくことにします。
また、今回使用した「html5doctor.com Reset Stylesheet」以外にもリセットCSSは多くの種類があります。
詳しくは下記の記事にて解説しているので自分にあったものを探してみましょう。
今回追加したリセットCSSは以下のようになります。
html {
/* フォントサイズの計算に1rem=10pxを使いたいのでhtmlに62.5%を指定 */
font-size: 62.5%;
}
body {
/* どんなにブラウザ幅が狭くなっても最低1,000pxのコンテンツの幅を確保する */
min-width: 1000px;
font-family: '游明朝体', YuMincho, '游明朝 Medium', 'Yu Mincho Medium', '游明朝', 'Yu Mincho', serif;
line-height: 1.75;
color: #707070;
}
/* ボールド書体についてはEdgeに対応するため別途指定する */
strong, b, mark, b, .typo-bold {
font-family: '游明朝体', YuMincho, '游明朝', 'Yu Mincho', '游明朝', 'Yu Mincho', serif;
font-weight: 700;
}
/* デフォルトのボールド指定を解除 */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
img {
/* 指定しておかないと画像の下に微妙な隙間ができてしまうことがある */
vertical-align: bottom;
}工程その2「共通の箇所を探す」
それではマークアップの作業に入っていきましょう。
まずはデザイン全体を俯瞰して、共通の箇所を探してみます。
HTMLやCSSといったマークアップ領域のコーディングにおいては、繰り返し使えるパターンである箇所と、そうでない箇所を見極めることは非常に大事です。
パッと見当たるのはこの写真と文字の組み合わせのブロックでしょうか。
でもそれだけではありません。
共通の箇所を探す際には「見えない線」を意識することが大事です。
どういうことかというと…
ありました。この点線のラインです。
デザインには整列 / 近接 / 反復 / 強弱という4つの大原則がありますが、Webデザインも例に漏れず、しっかり整列させることが大事です。
このWebサイトはコンテンツを960pxという横幅で揃えることで、全体の統一感を出しているようです。
それでは早速共通パーツのスタイルを作っていきましょう。
マークアップにおいてはHTMLから先に書いていくのが基本形ではありますが、今回のように必要であるとわかっているパーツについては、HTML構造を想像しつつCSSを先に書いてしまうこともあります。
/* 共通インナー */
.common-inner {
width: 960px;
margin: 0 auto;
}今回はページ内の複数箇所において内側の幅を共通で使いまわしたいので、common-innerというクラス名にしました。
次に、写真＋テキストのブロックについても先んじてCSSを作っておきましょう。
/* 写真＋テキストのブロック */
.photo-work {
display: flex;
}
.photo-work__image {
width: 480px;
margin-right: 20px;
}
.photo-work__text {
font-size: 1.6rem;
}今回は横並びなのでFlexboxを使っています。
画像の方にのみwidthの指定がありますが、親要素にdisplay: flex;が指定されているため、テキストの方は自動で伸縮するので、あえて指定していません。
また、今回はクラス名の命名規則としてBEMを採用しています。
「BEMってなに？」という方は下記の記事を読んでみてください！
工程その3「大きな要素毎に分ける」
いよいよ本格的にHTMLを書いていきましょう。まずは大きな部分ごとに分けてみます。
このとき、意識すべきはヘッダーとメインコンテンツにそれぞれ存在している「共通インナー」です。
こちらは先ほど作った.common-innerを使いましょう。
コードで表すと以下のようになります。
<body>
<!-- ヘッダー（ページタイトルとメインビジュアル） -->
<header class="page-header">
<div class="common-inner">
</div>
</header>
<!-- ヘッダー -->
<!-- メインコンテンツ -->
<main class="main-content">
<div class="common-inner">
</div>
</main>
<!-- メインコンテンツ -->
<!-- フッター -->
<footer class="page-footer">
</footer>
<!-- フッター -->
</body>ここで一旦、思った通りのレイアウトで区切ることができているか、試しに以下のCSSを適用して確認しましょう。
/* 以下はレイアウト確認用のCSSです */
body {
font-size: 2.4rem;
text-align: center;
font-weight: bold;
}
.common-inner {
background-color: rgba(50, 50, 50, 0.5);
}
.page-header {
padding: 20px 0;
background-color: rgba(255, 0, 0, 0.1);
}
.page-header .common-inner {
height: 60px;
}
.main-content {
padding: 50px 0;
background-color: rgba(0, 255, 0, 0.1);
}
.main-content .common-inner {
height: 400px;
}
.page-footer {
height: 80px;
background-color: rgba(0, 0, 255, 0.1);
}以下の画像のようになっていればひとまずここまでは成功です。
確認ができたら先ほどの「レイアウト確認用CSS」は消しておきましょう。
今回のまとめ
今回のポイントはこちらです。
- リセットCSSを自分流にカスタマイズする
- 全体を俯瞰して共通パーツを探す（見えない線を意識する）
- パーツごとのCSSを先行して作っておく
次回はヘッダー、メインコンテンツ、フッターそれぞれの中身を作っていきましょう！
HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中！
難易度別に用意してあるサンプルサイトのデザインデータを元に、サイト制作のスキルを磨こう！
