コーディングはスピードと正確さを求められます。
そのために、効率のいいコーディングの流れを知っておきましょう。
効率のいいコーディングの流れ
コーディングの流れは人それぞれですが、
私がこれまでコーディングしてきて
１番効率がいいと思う流れをご紹介します。
１つずつ解説します。
コーディング設計
コーディングを開始する前に、
一度紙に全体の設計を書き出します。
この作業が一番のポイントです。
紙に書き出して、あらかじめ全体を把握することは
サイト制作のスピードにとても影響します。
このように、パーツ分けをして書き出していきます。
【紙に書き出したい情報】
・レイアウト
・id、class名
・その他注意点
レイアウト
header、main、sidebar、footer
などのパーツ分けをします。
この時、どんなHTMLで実装して、どんなCSSで装飾していくかなど
イメージしながら書いていきます。
紙に書き出しながら確認したいこと
【画像の書き出しは複数まとめて行うか】
画像を１枚でなく、複数まとめて書き出すか検討します。
複数まとめて書き出す場合には、スマホ表示でレイアウトが変わる箇所は気をつけます。
（横並びの画像を、スマホでは縦並びにする場合は
画像をまとめて書き出さずに、横並びから縦並びに変わるように実装します）
【HTMLとCSSどちらを使って実装するか】
HTMLで実装した方がいのか、CSSで実装した方がいいのか状況に合わせて判断します。
（例：HTMLのimgタグで画像表示するより、ここはCSSのbackground-imageで背景画像として表示させよう）
コードを書きながら変更することも多いですが、
ここでイメージしておくとコーディングスピードが早くなります。
【コンポーネント化できるか】
サイトには、同じレイアウトが存在します。
<div class="items">
<div class="item">
<div class="item-img"><img src="/images/cake-1839134_1280.jpg" alt=""></div>
<div class="item-body">
<div class="item-title">見出し見出し見出し見出し</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="item">
<div class="item-img"><img src="/images/cake-1839134_1280.jpg" alt=""></div>
<div class="item-body">
<div class="item-title">見出し見出し見出し見出し</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="item">
<div class="item-img"><img src="/images/cake-1839134_1280.jpg" alt=""></div>
<div class="item-body">
<div class="item-title">見出し見出し見出し見出し</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
</div>同じレイアウトは、コードを複製して使います。
そうすることでコーディングスピードが早くなり、
後から編集するときや、管理が楽になります。
どの部分が複製できるかを考えます。
id、class名
idやclass名は、コードを書きながら考えると意外と悩んで時間がかかってしまいます。
コード量が多くなればなるほど、class名に悩みます。
最初にある程度の命名規則などルールを決めてclass名をつけてしまいます。
どんなclass名をつけるかは自由ですが、
後から編集しやすく、管理がしやすい名前をつけることが重要です。
その他注意点
その他自分で注意したい点や、クライアントからポイントとして言われていることなどを書いておきます。
例えば、
＜自分で注意したい点＞
・自分が間違えやすいこと
・忘れがちなこと
＜クライアントからポイント事項＞
・リンクにパラメータつける
・画像は〇〇を使用
などのようなことを書いておきます。
ファイル、フォルダ作成
全体像が掴めたら、いよいよコーディング開始です。
まず最初にフォルダを作成し、その中に必要なファイルも作成します。
＜フォルダ＞
AAAカフェ（分かりやすくサイト名など）
＜中に入れる必要なファイル＞
HTMLファイル index.html
CSSファイル style.css
Jsファイル script.js
imagesファイル
ファイルやフォルダを作成したら、
フォルダごとドラッグしてエディタで開きます。
HTMLコーディング
そして次はいよいよコーディング開始です。
最初にHTMLの<head>内にサイト情報やリンクなどを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○○○○</title>
<meta name="description" content="○○○○のサイト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
</body>
</html><head>内の情報はいつも大体同じなので、
テンプレートとして事前に作成しておいたり、
スニペットなどに登録したりすると効率いいです。
違う箇所だけ変更すればいい状態にしておくと便利です。
続いて、最初に紙に書き出した設計と、デザインデータを見ながら
HTMLで全体をコーディングしていきます。
HTMLのコーディングの流れは、
- レイアウトをマークアップ
- ブロックごとに細かくマークアップ
先に全体のレイアウトをザッと書いてから、
細かく上から書いていくのが効率いいです。
CSSコーディング
次に、書いたHTMLをCSSで装飾していきます。
細かい余白の調整などは後ほど行うので、
ここではザッとデザインを再現していきます。
「ザッと」CSSを書くってどこまで…？
具体的には、
・余白（margin、padding）
・フォント（size、line-height、letter-spacing）
は、大まかな値でコーディングします。
というのも後に詳しく解説しますが、
ピクセルパーフェクトのステップで細かく調整していくからです。
ピクセルパーフェクトとは、
1px単位でズレをなくし、デザインを忠実に再現することを言います。
ピクセルパーフェクトにこだわらない場合は、
この時点で、余白やフォントもしっかり入れていきます。
そして、CSSを書くときは、
ブラウザで都度確認しながら書いていくと便利です。
先にすべてのCSSを書いてから、
ブラウザでチェックする方が早いという方もいますが、
ブロックごとにきちんと実装できているか確認する方が効率いいです。
というのも、CSSは後から書いていくコードが優先される性質を持っているため、
仮に問題が起きた時に、どこでスタイルが変わってしまったのか、書きながら気づくことができます。
エラーを見てどこに問題が起きているか分からないうちは、
都度ブラウザ確認するのがおすすめです。
HTML/CSSをブラウザでチェックする方法
確認する方法はとても簡単です。htmlファイルをそのままブラウザへドラッグするだけです。
修正毎にブラウザを再読み込みして、反映を確認します。
ブラウザの再読み込みは、都度やると結構めんどうです。
VSCodeなら、コードを書き換えたら自動でブラウザを読み込むプラグインがあります。
VSCodeを使用しているなら絶対インストールしておきましょう。
（インストールするだけ、設定不要です！）
ブラウザを自動更新してコーディングの表示確認
簡単！VSCodeのプラグイン【Live Server】のインストール方法と使い方
レスポンシブデザイン
続いてレスポンシブデザインのコーディングを行います。
現在は、PCよりもスマホでサイトを閲覧するユーザーが圧倒的に多く、
ほぼ全ての案件でレスポンシブデザインのコーディングは必須です
スマホ表示だけでなく、タブレット表示までコーディングすることもあります。
クライアントに確認しましょう。
タブレット表示もコーディングする場合には、
スマホ→タブレット
の順でコーディングするのがおすすめです。
スマホのコーディングがタブレットのコーディングに影響するからです。
詳しくは、ここでは割愛します。
レスポンシブデザイン導入方法
レスポンシブデザインは、
- HTMLにビューポートを設定する
- CSSをメディアクエリを率いて記述する
のステップでコーディングします。
【HTMLにビューポートを設定する】
HTMLの<head>内にビューポートを記述します。
<meta name="viewport" content="width=device-width, initial-scale=1">【CSSをメディアクエリを率いて記述する】
CSSを書くときに、メディアクエリを率いて記述していきます。
@media (max-width: 729px) and (min-width: 480px) {
.lp_pc {
display: none;
}
}「ブラウザ幅が 729px~480px では、.lp_pcを非表示にする」
といったように書いていきます。
デバイス間のズレをどこまで調整していく？
Chromeやsafariなどさまざまなブラウザがあり、
デバイスも、スマホだけでも多くの機種がが存在します。
その全てに対応するのは不可能です。
どこまで対応するかは、悩ましいところではありますが、
多くのユーザーがいるブラウザと機種を調整するのが望ましいです。
まれにサイトチェックをしてくれるクライアントのスマホ機種が古く、それに合わせて調整したこともありますが、
サイトのお客様はクライアントではないので、クライアントを説得した方がクライアントのためになります。
対応ブラウザ、デバイス
ブラウザは、主要のこの３つを確認すれば大体大丈夫です。
Chrome、Safari、FireFox
IEは、コードによっては対応してないなど少々トラブルが多く苦戦するコーダーは多かったのですが、
IEのサポートが2021年に終了したため、このブラウザの表示はそこまで気にしなくてもいいです。
デバイスは、ユーザーが多いものを確認します。
iPhone、iPad、Pixel、Galaxyなど
レスポンシブデザインの確認は、
デベロッパーツールで確認します。
その他、可能な限り直接実機で確認します。
ピクセルパーフェクト
ピクセルパーフェクトとは、1px単位で正確にコーディングする方法です。
レスポンシブで全機種に合わせるのは不可能と言いながら、
ピクセルパーフェクトを目指す意味はあるのか…？
という議論を見かけますが、
PCと特定のスマホ機種だけでいいから「ピクセルパーフェクトで」というクライアントもいます。
私個人的には、ピクセルパーフェクトに反対とかはないですが、
「コーディングはデザイナーの想いを忠実に再現」
というモットーでやっていたので、
ピクセルパーフェクトという考え方は大切にしたいと思っています。
それに、ピクセルパーフェクトの方が実は楽です！
marginなどをいちいちデザインカンプから測る手間ってすごく面倒です。
ピクセルパーフェクトを使えば、
画像に合わせて、位置を調整するだけです。
ブラウザ、デバイスチェック
コーディングをしながらブラウザでチェックをしていきますが、
最後に他のブラウザや機種での確認を行います。
レスポンシブデザインの確認方法と同じように、
PC画面を他のブラウザでも確認します。
ツールを使用してもokですが、こちらも可能な限り、各実機で確認します。
他のブラウザ、PCで確認する方法クロスブラウザチェックツール
Browserling
windowsやAndroidの各ブラウザが確認できます。
まとめ
効率のいいコーディングができれば、スピードが上がり、
時給単価を上げることができ、収入アップにつながります。
やっていきながら、やりやすい方法や、もっと効率よくなる方法などを探っていくのがベストです。
この記事で少しでも効率よくコーディングができるようになってもらえたら幸いです。