効率の良いHTML/CSSコーディング手順を解説

Web制作

 

HTML/CSSのコーディングをするとき、手順は意識していますか?

適当にやりやすいところから手を付けていくより、流れに沿ってコーディングしていく方が断然スピードが上がります。

具体的には、以下のような手順で進めるのがおすすめです。

コーディング手順

1.簡易フレームワークの作成

2.HTMLのコーディング

3.CSSのコーディング

4.レイアウトチェック

以下、1つ1つ手順について解説していきます。

 

簡易フレームワークの作成(導入)

 

今回は、こちらのサイトを参考に解説します。

https://isara.life/

 

まずは簡易的なフレームワークを作成(or導入)します

フレームワークとは?という方のために解説すると、

具体的な例を見てみましょう。

 

例えば、参考のサイトだとPC版のh2の見出しが全て28pxで統一されて、全て中央寄せになっています。

また、文字色が黒と白に分かれているので、これを踏まえてあらかじめCSSに以下のようなコードを書いておきます。

これで、h2タグに.title-bを入れると黒文字の見出しが、.title-wを入れると白文字の見出しが完成します

 

このように、事前にクラスにCSSを割り当ててカタログ化したものが、CSSフレームワークです

クラス名を指定するだけでデザインが完成するので、後々一つ一つのタグにCSSを適用させるより断然効率が良いです。

 

サイトデザインを把握しておき、何度も使いそうなCSSレイアウトを事前にクラスで作成しておくと、コーディングの速度が一気にアップします。

 

他の例としては、横並びの要素が多いのでflexを用いてHTMLコーディングの段階で横並びさせておきます。

これで親要素にflexbox、小要素にcol-sm-6かcol-sm-4を記述したら要素を横並びにすることができます。

 

また、CSSフレームワークは自分で作らずとも、導入する手もあります

特に上記のFlexboxを用いたフレームワークは、「Bootstrap」を始めとして数多く存在します。

 

ただ、先程のh2タグのようにフォントやカラーをデザインどおりにキッチリ作ろうとすると、既存のフレームワークでは表現できない場合があります。

既存のフレームワークを使う場合も、カバーしきれない部分は自分で自作して補いつつコーディングしましょう。

 

HTMLコーディング

 

フレームワークを書き終えたら、HTMLコーディングに入ります。

CSSを書く前に、ページを一通りHTMLでコーディングしてしまいましょう。

 

このとき重要なのが、並行してクラス(id)も記述することです

先程のサイトのヘッダー部分をコーディングしてみましょう。

このように、クラス名(or)をあらかじめ決めながらコーディングしていきましょう。

後々タグを見直しながら、一つ一つクラスを入れていくのは非効率です。

 

特にEmmetを使用してコーディングしている方は、

.header_logo.flexbox>img+p.header_title

このように、タグとクラス名を一気に書くことができるので、クラスは後々つけるのではなく並行して書いていくのをおすすめします。

 

また、作成or導入したフレームワークもこの時点で取り入れていきましょう。

上記の例だと、.header_logoの部分に、先程作成したflexboxのクラスを入れています。

これで、HTMLコーディングの時点である程度レイアウトを固めることができます。

 

CSSコーディング

 

HTMLを終えたら、次はCSSのコーディングです。

ここで注意ですが、CSSのコーディングはHTMLの方を一通り終えてからにしましょう

HTML→CSS→HTML→CSSといったり来たりするのは効率が悪いです。

 

その他特段気をつける点はありませんが、細かいところを調整するときは、CSSファイルを直接いじるよりGoogle Chromeの検証機能を使ったほうが効率が良いです。

プログラミングに必須!Chromeの検証機能の便利な使い方を紹介

 

レイアウトチェック

 

HTML、CSSのコーディングを終えたら、後はブラウザでチェックしながら調整していきましょう。

必要であれば、jQueryやJavascriptのアニメーションもこの段階で付け加えます。

 

 

余白やサイズ調整など細かい調整を行うときは、先程と同様にChromeの検証機能を使いましょう。

 

おわりに

ポイントをまとめると、

・フレームワークを作成する(用意する)

・HTMLはクラス名をつけながらコーディングする

・CSSはHTMLが一通り終わってからコーディングする

この辺を気をつけていれば、効率よくコーディングができると思います。是非試してみてください。