【HTML/CSS】ウェブデザイナー志望者におくる、効率的なコーディングの基本フロー
ここでは、ウェブサイトを効率的にコーディングするための基本フローをまとめていきます。
内容としては、
・HTML/CSSを勉強していて、基礎がだいたいわかっている
・ウェブデザイナーもしくはコーダーとして働きたい
・独学で勉強したけど、実務で通用するか自信がない
そんなひとに向けたおはなしです。
実際の仕事としてはいろんなパターンが考えられますが、とりあえず一番オーソドックスな「サイトデザインは完成していて、画像データをもとにHTML/CSSでコーディングする」という状況を想定しています。
ステップ0. コーディングの準備はできているか
内容がずれるのでここではザックリとしか書きませんが、コーディングを始める前に『コーディングのためのツール』を整えましょう。
人それぞれ好みがありますが、とりあえずブラウザとエディタは必須。
・ブラウザ...Chrome（クローム）一択。
・エディタ...Atom・SublimeText・VSCodeのどれかがおすすめ
ちゃちゃっとインストールしてください。使い方がわからなければググるべし（ググるスキルは超大事）。
ステップ1. まずは完成画像をプリントアウトする
さっそくコーディング！
...といきたいところですが、そのまえに完成イメージをプリントアウトしましょう。
すこしくらい文字がつぶれてしまってもOK。パッとみて全体を俯瞰できるサイズにするのがミソです。書き込みできる余白をとっておくことも忘れずに。
わざわざプリントアウトする理由は以下のとおり。
①俯瞰することでおおまかな流れがつかめる
全体をながめて、「あ、ここは簡単に実装できそう」とか「ここ難しそうだな...」といった作業の見通しをつかみましょう。
②使い回しできるパーツを頭にいれる
ボタンやパターン化されたデザインがないかチェック。実装するときにそのイメージが頭にあれば、使い回ししやすいコードが書けますよね。
③効率的にマークアップできる
マークアップ、つまり<h2></h2>や<li></li>をどこにあてるかをざっくり整理して書き込んでおけば、迷わずにコーディングできます。
ステップ2. 必要なファイルを作成する
つどつどファイルをつくってもいいのですが、コーディングするうえで必ず必要なファイルは先につくっておくといいでしょう。
とりあえずの3点セットはこちら。
・index.html
・style.css
・imageフォルダ（写真など素材をおく）
ほか、JavaScriptファイルなどは必要に応じて作ってください。
ステップ3. headの中身を書く
ゼロからコーディングをするならば、htmlファイルのheadの中身も自分で書かなければいけません。cssの読み込みもheadのなかで行います。
metaタグなどいろいろありますが、ウェブサイトをつくるうえで必要なものを揃えたのが以下になります（2018年12月時点）。コピペして、必要におうじて変更して使ってください。
<!DOCTYPE html>
<html lang="ja">
<head prefix="og:http://ogp.me/ns#">
<!-- base -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<!-- SEO -->
<title>タイトルをかく</title>
<meta name="description" content="ディスクリプションかく">
<link href="URLかく" rel="canonical">
<meta property="og:url" content="URLかく">
<meta property="og:type" content="website（ググって）">
<meta property="og:title" content="タイトルかく">
<meta property="og:site_name" content="サイト名かく">
<meta property="og:description" content="ディスクリプションかく">
<meta property="og:image" content="サムネイルのパス">
<meta name="twitter:card" content="ググって">
<meta name="twitter:site" content="ツイッターアカウント">
<link rel="apple-touch-icon-precomposed" href="/img-common/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<!-- css & font -->
<link rel="stylesheet" href="/css/reset.css（リセットcssのパス）">
<link rel="stylesheet" href="/css/style.css（cssのパス）">
</head>
<body>
<!-- contents -->
<header>
</header>
<div class="main">
</div>
<footer>
</footer>
<!-- END contents -->
<!-- js -->
<script src="js/script.js（jsファイルのパス"></script>
</body>
</html>というか、何度もつかうことになると思うので、自分のローカルに『basic.html』みたいないいかんじの名前で保存しておくと次からスムーズです。
ステップ4. リセットCSSを用意する
コードをよくみたひとはお気づきかもしれませんが、cssの読み込みファイルが2つありますよね。ひとつめはreset.css、そしてもうひとつがstyle.css。
リセットcssというのは、ブラウザにデフォルトで設定されているcssを元に戻すためのcssです。
ブラウザはサイトに訪れるユーザーによっていろいろなので、Chromeだと問題ないのにSafariだとデザインが崩れる、といったことが起きてしまいます。
そういったことがないように、ブラウザのデフォルトCSSをリセットするのがこのcssの目的です。
リセットcssにもいろいろあるので詳しくはググってほしいですが、とりあえずチャチャっと済ませたければ以下からコピペしてきましょう。
ステップ5. コーディングする
やっと、コーディングです！
先ほど書き込んだプリントをみながら、実際のコードに落とし込んでいきましょう。
好きなように進めればいいと思いますが、個人的には
①必要なdivや要素をかきつつクラスを付与して
②テキストや写真のパスを入力して
③cssでスタイルをあてる
というのを適当な区切りごとに繰り返して書いていくのが好きです。
細かいスタイルは次のステップで調整するので、ここではザックリ適当にスタイルをあてるだけでOKです。
ステップ6. Chromeデベロッパーツールでスタイルを調整
実際に書いたhtmlをブラウザ（Chrome）で確認します。
また、デベロッパーツール（右クリック>検証モード）を使うとスタイルの修正がリアルタイムで確認できるので、細かいスタイル調整はここでやってしまいます。
主にいじるのは写真右下の『Styls』というタブ。見えづらいですが、左の青くなっている要素に適用されているcssがここに表示されます。スタイルの修正や追加ができるので、画面を確認しながらcssを書いていくかんじ。
デベロッパーツールを使いこなすと開発スピードが爆上がりするので、具体的な使い方はぜひググってください。
いい感じにスタイルが整ったら、そのコードをコピペしてcssを更新していく、という流れです。こうすることで、スムーズにコーディングが進むと思います。
あとはステップ5と6の繰り返しで、どんどん作っていきます。
なお、テキストやボタンのエフェクトは、一瞬でできるもの以外はいったん後回しにして全体を完成させることを優先します。細かい修正はあとでいくらでもできるので、とりあえずモノをつくって早くフィードバックをもらったほうが効率的です。
ステップ7. CSSやJavaScriptでエフェクトを追加する
ひととおりコーディングがおわったら、細かいエフェクトやピクセル単位のスタイル修正をしていきます。
こちらもデベロッパーツールを使います。
ステップ8. コードチェック＆リファクタ
完成イメージが実装できたら、チェックツールをつかって構造的におかしなコードがないか確認しましょう。Another HTMLが有名です。
HTML5を選択して、チェックしてもらいましょう。
head内のmetaタグあたりでごちゃごちゃ言われるかもしれませんが、そのあたりはスルーして大丈夫。
それ以外で文句を言われる場合は修正しておきましょう。
また、時間があれば文句を言われていない部分も見直すとベター。
書いているうちは気づかなくても、あとから見ると「なんじゃこりゃ」というところとか、「こうやって実装したほうがスマートなのに」みたいなところがかなり目につくはず。
サイトの見た目は変わらなくても、コードのリファクタをするのとしないのでは得るものがまったく違ってきますし、もしクライアントのいる案件ならば、コードの質は仕事の質です。
ステップ9. 学んだことをアウトプットする
最後に、プラスアルファではありますが、そのコーディングをするなかで学んだことをアウトプットできるとベスト。
おそらく実装するなかで壁にあたったり、新しい発見があるはずなので、そういうことをブログなりSNSなりにアウトプットすることで、着実に自分の力にしていきましょう。
まとめ
以上が、効率的なコーディングの基本フローです。さいごにもう一度まとめておきますね。
⓪コーディングの準備をする（エディタとブラウザ）
①完成図をプリントアウトして全体の流れをつかむ
②必要なファイルをつくる
③htmlの骨格を書く
④リセットCSSを用意する
⑤コーディングする
⑥デベロッパーツールを使いながら調整する
⑦細かいエフェクトを追加する
⑧コードチェックとリファクタをする
⑨学んだことをアウトプットする
とくにに⑧、⑨あたりは効率的なコーディングには関係ないかもしれませんが、長期的にみたらスキルアップするうえでとても大切なこと。時間があるならばぜひやってみてください。
また、ぼく自身まだまだ勉強中なので、もっと効率的な方法などがあれば教えてもらえると助かります。
この記事が気に入ったらサポートをしてみませんか？