コーディングとは一体何なのでしょうか？
実は、ネットビジネスを立ち上げるには、単にデザイン作業を行うだけでは不十分なのです。
コーディングとは、HTMLやCSSなどのマークアップ言語を利用して、見出しやリンク、太字などを追加し、ブラウザ（Webページを閲覧するためのソフトウェア）でデザインを見えるようにする作業です（後で詳しく説明します）。これをコーディングといいます。
仕様に沿ってHTMLやCSSを生成することをコーディングと呼び、Web制作の重要な要素となっています。
これを読めば、コーディングの基礎知識はもちろん、コーディングを外注する際の注意点なども理解できるはずです。
初めての方だけでなく、すでに慣れている方もチェックリストとしてご活用ください。
・コーディングの基本
展開されたデザインを、デザインが完成したらそのままWeb上に表現していきます。
ここでは、完成したデザインをWebに載せる方法について見ていきます。
この時点でHTMLとCSSの理解が必要です。
・HTMLとは？
HTMLとは、Webサイトを構築する上で最も基本的なマークアップ言語の一つです。
人間のいないところで、コンピュータが文書を適切に検査できるようにするためのプログラミング言語です。
・CSSとは？
CSSは、主にHTML文書の表示やデザイン（外観）を指定するために使われます。
例えば、HTMLの文字の色を黒から赤にしたい場合、CSSを使用します。
静的なWebサイトを作るならHTMLとCSSで十分ですが、トップページにあるような画像をスライドさせるデザインを作りたい場合は、JavaScript（jQuery）の知識が必要になります。
さらに、コーディングは好きなように表現できるものではありません。
Webサイト制作の場合、多数の人が協力してプロジェクトを進めることが一般的です。
規定がないと記述が乱れ、維持管理も不十分になります。
一貫性のあるウェブサイトを作るには、会社やプロジェクトが先にコーディングの原則を決めておくと、メンテナンスや拡張が簡単になります。
また、プロジェクトの途中から参加した人が、効果的に貢献できるようにすることも重要です。
このチュートリアルでは、Googleが提唱するHTMLとCSSのコーディングガイドラインのいくつかを紹介します。
このチュートリアルでは、Googleが提唱するHTMLとCSSのコーディングガイドラインの一部を紹介します。
以下の考え方に基づいたコーディング方法であることをご理解の上、読み進めてください。
・Googleのコーディング推奨事項
【HTMLのコーディング推奨事項】
HTML5を活用する
XHTML5は使用できません。代わりに、下記で始まる形式で記述してください。
!DOCTYPE html> は、HTMLのマークアップ言語です。
HTML5とは
HTML5とは、Webページを記述するためのマークアップ言語であるHTMLの最新版です。
動画や音声、グラフィックの描画など、これまでWeb上で表現できなかった技術が、この言語を使うことで簡単に表現できるようになりました。
画像にはaltプロパティを付ける
写真の場合はalt属性、動画や音声の場合はキャプションとして、有用な代替テキストを記述します。
装飾用など意味のない画像は、「alternative text」ではなく「alt=””」を使用します。
◯ ⇨ <img src=”fruit.png”>
× ⇨ <img src=”fruit.png” alt=”フルーツ”>
CSSのコーディング規約
HTMLで<p id=”text”>サンプルテキスト</p>を作成したと仮定します。
CSSでサンプルテキストを赤くしたい場合は、以下のようにCSSファイルにidを指定するだけです。
ただし、同じidの値は文書内で一度しか使えないので、同じ値を何度も使いたい場合はclassを使用します。
#text {
color: #f00;
}
また、コーディングの前に、HTMLの文書構造としての役割と、CSSのデザインとしての役割を分析しておくことが肝要です。
HTML
余分なスペースや不要な改行を削除し、見出し（h1、h2など）、段落（p）、
リスト（ul、liなど）、定義（dl、dt、dd）などの機能に対応したタグを利用します。
CSS
外部ファイルをCSSリンクに書き込みます。
汎用セレクタはclass、font（size、weight、styleなど）や
backgroud（color、image、position）を使用します。
font（size、weight、styleなど）、background（color、image、positionなど）など複数のプロパティは、わかりやすくまとめて記述します。
・クロスブラウザのチェックは必要
デザインを元にしたサイトのコーディングが終わったら、クロスブラウザテストを実行する必要があります。
クロスブラウザテストとは、さまざまなブラウザでサイトをテストすることですが、その中でも特に多いのがInternet Explorer（Edge）、Firefox、Google Chromeです。
2017年10月のブラウザーのシェアは、Google Chromeが39.14％、Internet Explorer（11.0）が23.04％、Firefoxが15.7％、Edgeが4.85％と続いています。
せっかく良い商品を扱っていても、ユーザーが開設したネットショップのレイアウトがブラウザーの違いで歪んでしまうと、売上に繋がりません。
そうならないためにも、クロスブラウザのチェックは欠かせません。
・まとめ
コーディングについて、どう思われましたか？
コーディングはWeb制作に欠かせない作業であり、デザイン性の高いWebサイトはWeb上に表示された際のパフォーマンスが向上し、検索エンジンで上位表示される可能性が高まることで集客力がアップする可能性があります。
さらに、Googleが推奨するコーディングルールに基づいてネットショップを構築することで、より上位表示効果の高いWebサイトを制作することが可能です。
もし、自分でコーディングができない場合は、外注に依頼するのもよいでしょう。
この場合、Webサイトの目的を明確に伝え、制作スケジュールを把握し、スムーズに制作が進むように努力する必要があります。
また、制作後の運用についても、外注先からのフォローや、フォロー時の費用まで考慮しておくとよいでしょう。
以上のことを踏まえて、コーディング作業を進めていただければと思います。
