このブログを作り直すということで、ひとまずトップページをつくってみたので、ここまでの手順をまとめます。
今回つくったのはこんな感じになりました。猫の画像と検索アイコンがありますが、基本的にはテキストだけを使ってつくるようにしました。
目次
とりあえず本でも何でも使ってサンプルページをつくってみる
Webページを作ってみると言っても、一体何をどうすれば良いのか思いつかなかったのでとりあえず、手を動かせば一通りのページが出来るチュートリアル形式の本を探して、その通りにコーディングしてみました。
僕はこの本を使いましたが、何でも良いと思います。
一通り終わらせれば、何となくWebページをつくるという感じがつかめます。
ページの構成を考える
本を読み終わったら、いよいよ自分でページを考えます。僕はこのブログがあったので、必要だと思う要素、必要でないと思う要素を改めて選んで、整理することから始めました。その後ページの構成（ヘッダーの下にナビゲーションがあってとか、記事カードにはタイトル、メタデータ、リード文があって、など）を考えながら、何となくページレイアウト（シングルカラムとか、ナビゲーションの位置など）を考えました。
考えたページ構成をHTMLで書いてみる
ページ構成を考えたら、今度はこれをHTMLで書いてみました。この段階でCSSで使うためのクラス名やIDも何となくふっておきました。
CSSを使って大まかなレイアウトをつくっていく
HTMLの記述がすんだら、いよいよ外観をつくっていきます。まずは大まかなレイアウトを行っていきました。コンテンツの幅や要素のセンタリングといったものから、細かい行間やフォントサイズといったものへと移っていきます。
ある程度レイアウトがカタチになったら細かい調整へ
ある程度進んでくると、不思議とやりたいことがどんどん頭に浮かんでくるので、素直にやっていくだけです。今回のケースだと検索バーをつくったり、ボタンを押したときのアクションをつくったり、記事カードの背景や縦線を使ったグルーピングなど、試したいことが浮かんでくるので、試して消してを繰り返しました。ある程度しているとほぼカタチが落ち着きます。
次やること
楽しいですが細かいことをやりだすときりがなくなってしまうので、ひとまずレイアウトをつくる作業は一区切りにします。WordPressで使いたいので、今度はPHPを使ってファイルを用意していきます。
その前に、CSSも汚ったなくなってしまっているのでCSSの整理をすることにします。