目次
htmlとcssに関する知識のある人むけ
ウェブページを作ったり編集したりしたことはあるけれど、効率良く作りにはどうすべきか、自分なりの手順を記録。
原稿を用意する
ウェブサイトで表示させたい内容を考えておく。クライアントのサイトを作るのであれば、しっかり打ち合わせをして、テキストや画像類を揃えてもらう必要があるかもしれない。
クライアントに見せる用の簡単なカンプを作ってもよい。とにかく最初に目標を設定しなければならない。そのゴールに向かって必要な作業を考える必要があるからだ。
html本体の作りを考える
原稿を元に設定した目標を実現するための方法を考える。
ワンスクロール型なのか、複数ページがあるのか、スマホ対応はどうするか、スライダーなどの演出が必要であれば、jQueryで実装すべきか、など考慮しながら内容にふさわしいレイアウトを設計する。いわゆるワイヤーフレームだ。
ワイヤーフレームではsectionなのか、divなのか、何で囲むのかを決めておく
bodyがあってsectionが複数あり、その中にh2タイトルとpで本文がある。それらh2とpをワンセットにするためにdivで囲っておこうか。
このようにワイヤーフレームで使用するタグを決めてしまう。
レイアウトのため、まとまりを作る必要があるとき、できればクラス名をどうするかなど考えておくといい。
sectionタグでカテゴリーを括っていたとすれば、クラス名はいらないかもしれない。sectionタグでpaddingを設定すれば共通の見栄えになるだろう。
使うタグの意味をよく吟味する
上記ではレイアウトを意識した「囲む」という作業を考えたが、そこで使うタグが本文の内容に適したものかしっかり考える。これは後々SEOにも影響してくる。
SEOの基本は、文章の内容を正しく検索エンジンに伝える。これに尽きると思う。
アドレスタグでくくるべきか、リストで箇条書きにすべきか、テーブルで項目と内容を表すべきか、h1やh2が正しい入れ子になっているか、段落としてPタグを使っているか、など意味として正しい構造にする。
sectionやdivなど、ワイヤーフレームで設定したとおりマークアップをおこなう
sectionなどで括ったワイヤーフレームの中身をhtml本体に記述していく。
できればワイヤーフレームを見ながら作業したほうが良い。入れ子構造が正しく記述されていないとならないので、慎重に作業したい。
この作業は正確さが必要ではあるが、考えながらやる作業ではない。設計に基づいて正確に入力してゆく、いわば仕上げの作業だ。
cssで見栄えを整える
html本体は完成したはずだ。見た目のレイアウトはともかく、文章の作りとしては正しい形になっているはずだ。大見出しがあり、小見出しがあり、本文がある。それが正しい順序でならび、必要であればリンクや画像がある。
クライアントに見せたカンプを元にしてもいい。これらタグで括られただけの要素の見え方を、より人間に見てもらうための表面的な意匠を整えていく。
ボックスモデルやパッディング、マージンなどルールを決めておく
ボックスモデル、パディングやマージン、フレックスボックスによるレイアウトが良いか、デバイスのサイズ(ビューポート)を元に単位を決めるのか、など決めておく。
ちなみに自分の場合は、ボックスモデルにはパディングもマージンも含め(box-sizing: border-box)、ビューポート基準であるvh、vwをメインに必要に応じてrem、％を使い分ける。
また基本的にマージンは使わない。要素の外側に影響を与えたくないからだ。ボックスモデルに全てを含めたのに、外に影響があるとややこしくなる気がする。センター揃えのために使うぐらいだ。
スマホ対応のために、画面のワイド幅で3段階にcssを分ける。並び順とフォントサイズ、パディングの割合をそれぞれ調整する。
javascriptやjQueryなど
cssとの順序が前後するかもしれないが、必要に応じて設定する。簡単な演出ならともかく、ビデオの再生を制御したりする場合は先に設定しておいたほうがいいかもしれない。
メディアクエリでPCサイト用のレイアウトを追加する
モバイルファーストが前提だとして、上記まではモバイル用の表示を設定していたが、PCサイト用にレイアウトを調整したCSSを追加する。追加するのは変更箇所だけで良いので、flexboxでの並びだとか、フォントの大きさだとか調整したい箇所だけ手を入れる。