2019年1月4日Web制作ツイートシェアはてブ送るPocketHTML/CSSのコーディングをするとき、手順は意識していますか?適当にやりやすいところから手を付けていくより、流れに沿ってコーディングしていく方が断然スピードが上がります。具体的には、以下のような手順で進めるのがおすすめです。コーディング手順1.簡易フレームワークの作成2.HTMLのコーディング3.CSSのコーディング4.レイアウトチェック以下、1つ1つ手順について解説していきます。おわりに簡易フレームワークの作成(導入)今回は、こちらのサイトを参考に解説します。https://isara.life/まずは簡易的なフレームワークを作成(or導入)します。具体的な例を見てみましょう。参考のサイトだとPC版のh2の見出しが全て28pxで統一されて、全て中央寄せになっています。文字色が黒と白に分かれているので、これを踏まえてあらかじめCSSに以下のようなコードを書いておきます。#fff;}これで、h2タグに.title-bを入れると黒文字の見出しが、.title-wを入れると白文字の見出しが完成します。このように、事前にクラスにCSSを割り当ててカタログ化したものが、CSSフレームワークです。クラス名を指定するだけでデザインが完成するので、後々一つ一つのタグにCSSを適用させるより断然効率が良いです。サイトデザインを把握しておき、何度も使いそうなCSSレイアウトを事前にクラスで作成しておくと、コーディングの速度が一気にアップします。他の例としては、横並びの要素が多いのでflexを用いてHTMLコーディングの段階で横並びさせておきます。33.3%}これで親要素にflexbox、小要素にcol-sm-6かcol-sm-4を記述したら要素を横並びにすることができます。CSSフレームワークは自分で作らずとも、導入する手もあります。上記のFlexboxを用いたフレームワークは、「Bootstrap」を始めとして数多く存在します。先程のh2タグのようにフォントやカラーをデザインどおりにキッチリ作ろうとすると、既存のフレームワークでは表現できない場合があります。既存のフレームワークを使う場合も、カバーしきれない部分は自分で自作して補いつつコーディングしましょう。HTMLコーディングフレームワークを書き終えたら、HTMLコーディングに入ります。CSSを書く前に、ページを一通りHTMLでコーディングしてしまいましょう。このとき重要なのが、並行してクラス(id)も記述することです。先程のサイトのヘッダー部分をコーディングしてみましょう。資料請求はこちら</p></div></div></header>このように、クラス名(or)をあらかじめ決めながらコーディングしていきましょう。後々タグを見直しながら、一つ一つクラスを入れていくのは非効率です。Emmetを使用してコーディングしている方は、.header_logo.flexbox>img+p.header_titleこのように、タグとクラス名を一気に書くことができるので、クラスは後々つけるのではなく並行して書いていくのをおすすめします。作成or導入したフレームワークもこの時点で取り入れていきましょう。上記の例だと、.header_logoの部分に、先程作成したflexboxのクラスを入れています。これで、HTMLコーディングの時点である程度レイアウトを固めることができます。CSSコーディングHTMLを終えたら、次はCSSのコーディングです。ここで注意ですが、CSSのコーディングはHTMLの方を一通り終えてからにしましょう。HTML→CSS→HTML→CSSといったり来たりするのは効率が悪いです。Chromeの検証機能を使ったほうが効率が良いです。プログラミングに必須!Chromeの検証機能の便利な使い方を紹介レイアウトチェックHTML、CSSのコーディングを終えたら、後はブラウザでチェックしながら調整していきましょう。必要であれば、jQueryやJavascriptのアニメーションもこの段階で付け加えます。余白やサイズ調整など細かい調整を行うときは、先程と同様にChromeの検証機能を使いましょう。・フレームワークを作成する(用意する)・HTMLはクラス名をつけながらコーディングする・CSSはHTMLが一通り終わってからコーディングするこの辺を気をつけていれば、効率よくコーディングができると思います。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。