一般的な手順
ホームページを制作する際、一般的には
1. ワイヤーフレーム（レイアウト）を作成
2. デザイナーがデザインを作成
3. マークアップ（HTML、CSS）
という流れになることが多いと思いますが、簡易的なホームページならその手順を踏む必要はないと思っています。
具体的に言うと「2. デザイナーがデザインを作成」を省きます。
用意するもの
- 好きな画像（大きめの横長画像を推奨）
- 好きなエディタ
- ターミナル
ワイヤーフレーム
これで行きます。
HTMLとscssの準備
今回はscssをcssにコンパイルしつつ作業をしようと思います。
マークアッパーさんからフロントエンドエンジニアさんにファイルを渡す時も最初からscssで書かれていると便利っす。
index.html
<!DOCTYPE html>
<html>
<head>
<title>爆速で無難なホームページを作ってみる</title>
<meta charset="utf-8">
<meta name="description" content="爆速で無難なホームページを作ってみる">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/bakusoku.css">
</head>
<body>
<header>
</header>
<article>
</article>
</body>
</html>
bakusoku.scss
@import "_header.scss";
@import "_content.scss";
scssをヘッダーとコンテンツに分けました。
ターミナルでscssをcssにコンパイルします。
sass --watch sass/bakusoku.scss:css/bakusoku.css
ファイルを監視して変更があれば自動でコンパイルしてくれるので--watchを記述しておくといい感じ。
ヘッダーの装飾
index.html
<header>
<div class="site_title">BAKUSOKU</div>
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="work.html">WORK</a></li>
</ul>
</nav>
</header>
とりあえず英語使っていれば格好いい気がするので、英語にしました。
_header.scss
header {
width: 100%;
height: 60px;
position: fixed;
font-size: 0;
.site_title {
padding: 0 20px;
line-height: 60px;
font-size: 20px;
display: inline-block;
}
nav {
display: inline-block;
vertical-align: top;
ul {
li {
display: inline-block;
a {
margin-left: -1px;
padding: 0 20px;
line-height: 60px;
display: inline-block;
text-decoration: none;
font-size: 14px;
color: #000;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
}
}
}
}
display: inline-bolockを使って横並びにしたいのですが、HTMLの改行を半角スペースと認識してしまうので、親要素にfont-size: 0を記述して半角スペースを消しています。
またdisplay: inline-bolockを使うと下に微妙にずれるので、それを解消するためにvertical-align: top;で上揃えにしています。
こんな感じの見た目になりました。
英語使ってりゃとりあえず格好いいです。
メイン画像
index.html
<article>
<section class="main_visual">
<p>
NO BAKUSOKU<br>
NO LIFE
</p>
</section>
</article>
_content.scss
article {
width: 100%;
position: absolute;
top: 60px;
section {
&.main_visual {
width: 100%;
height: 400px;
position: relative;
background: url(../images/main_visual.jpg) center center / cover no-repeat;
p {
font-size: 60px;
line-height: 1.6em;
position: absolute;
top: 100px;
left: 100px;
}
}
}
}
backgroundのcoverは画像の縦横比は維持したまま要素を全て埋めてくれますので、レシポンシブデザインの場合に便利。
元画像はこちら。
フリー写真素材の「写真AC」さんからいただいて来ました。
現在の見た目がこちら。
このままでは文字が全然読めないので、文字を読みやすいようにしましょう。
そしてもう少し雰囲気出しましょう。
_content.scss
article {
width: 100%;
position: absolute;
top: 60px;
section {
&.main_visual {
width: 100%;
height: 400px;
position: relative;
background: url(../images/main_visual.jpg) center center / cover no-repeat;
filter: brightness(50%);
p {
font-size: 60px;
line-height: 1.6em;
position: absolute;
top: 100px;
left: 100px;
color: #fff;
}
}
}
}
おや？filter: brightness(50%);で画像を暗くしようと思いましたが、子要素の文字まで暗くなってしまいました。
_content.scss
article {
width: 100%;
position: absolute;
top: 60px;
section {
&.main_visual {
width: 100%;
height: 400px;
position: relative;
&::after {
content: "";
width: 100%;
height: 400px;
position: absolute;
left: 0;
top: 0;
background: url(../images/main_visual.jpg) center center / cover no-repeat;
filter: brightness(50%);
z-index: -1;
}
p {
font-size: 60px;
line-height: 1.6em;
position: absolute;
top: 100px;
left: 100px;
color: #fff;
}
}
}
}
少しトリッキーですが、背景は擬似要素に指定してz-index: -1;で要素の後ろに周りこませました。
お、上手く行きましたね。
画像が薄暗くなるとなんだか格好良くなる不思議。
終わりに
ご覧の通り、画像編集ソフトがなくてもほぼマークアップのみでデザインが出来るようになって来ました。Font Awesomeなどを利用すれば、フォントの指定をするだけでアイコンが使えたり。
チームなど全体に共有が必要がない場合は、ワイヤーフレームはふわっと頭の中で想像して、すぐにマークアップから入っても良いのではと考えています。私はいきなりマークアップから入ります（フォトショでデザインからの時もあるけど・・・）。
また、ホームページは画像のイメージがすごく強いので、画面の大半を素敵な画像が占めていれば、ユーザーに良い印象を与えるのでないかと思います。要するに、真ん中にどかーんと良い画像を載せればそれなりに見えるという寸法。
