前編では、現役Webコーダーが普段から気を付けていることの中で「コーディング環境・意識合わせ・スライス前の注意点」をお話しました。今回の後編では「コーディング時の”HTML”や”CSS”について気をつけること、コーディング後のチェックでやっておくとよいこと」などをご紹介していきます。コーディングのヒントにしていただければと思います。
目次
■HTMLを記述する際に頭に入れておきたいこと
コーディングする際にHTMLで気をつけておきたいことは主に3つあります。
- HTMLのバージョンに合った文法を書くこと。
- 内部SEOを意識して、”title・meta・description・alt”は必ず記述すること。
- ” hタグ “は正しい順番で記述すること。
それぞれ、下記に詳しく解説します。
1. HTMLのバージョンに合った文法を書く
HTMLのバージョンで特に初心者の頃にやりがちな失敗のひとつに、ネットに載っている記述などをそのまま使い、動かないことがよくあります。
ネットに載っているサイトでは、問題なく表示されているにも関わらず自分のサイトでは動かない。このような場合は記述前後での間違いもありますが、「HTMLのバージョン」によって動かないということがあり気をつける必要があります。
現在はHTMLだけではなく、「XHTML」や「HTML5」などいくつかの言語がありますので最初に必ず、現在作っているHMTLのバージョンを確認してから記述などに入りましょう。
2. SEOを意識した”title・meta・description・alt”は必ず記述
SEO対策の基本として「title・meta・description・altのタグは必ず記述」ですが、それぞれのタグについて確認すると、その重要さは一目瞭然です。
まず、「title（タイトル）」はWebページの検索結果で表示される一番大きな見出しで、Googleの検索エンジンもこのタグで中身を判断するわけで、重要度マックスのタグですね。
「meta（メタ）」は、検索エンジンなどにWebページの情報を伝える役割のタグです。
一例として、「meta description（メタ ディスクリプション）」は、検索結果のタイトル下に表示されているページ概要の文章です。SEO対策としての検索順位とは関係ないですが、ここを見てページを見るか否かを決定、つまりクリック率が変わってくるので、こちらも非常に大事です。文章はおよそ120文字程度、長いと省略されるので長文は無意味です。
最後に「alt（オルト属性とも言う）」は、検索エンジンに画像内容を理解させるためのものです。検索エンジンは人間のように、画像を見たまま解釈できません。テキストでしかページ内容を理解できないので、altの後に画像内容を記述し（例：猫の写真→alt=”猫が窓際で寝ている写真”）、検索エンジンに画像の内容を伝えるのです。
ちなみに「SEO対策的な視点」で見ると、コーディング側としては大切な文字情報は画像よりテキストの方がよいということで画像より文字を優先したくなります。しかし文字だらけのページは辛いわけで、そこでコーディングと見やすさ（デザインなど）の兼ね合いを取りながらページが作られていくのです。ここでコーダーとデザイナーの意見がぶつかることもあり得るわけで、どちらの視点も必要であることがおわかりになるかと思います。
WordPressなどを使って作る場合、title・meta・descriptionはプラグインの設定などで別途記述できます。altも画像のあとに記述する必要がありますので、必ず忘れずに記述しましょう。
3.” hタグ “は正しい順番で記述
こちらもSEO対策にも関係してくる 「hタグ」。hタグはh1～6まであり、特にh1タグはページ全体の概要を示す役割を果たすので、こちらも重要なタグです。また、h2タグやh3タグは、記事などの中で見出しとして多用するタグです。普通の文章と同じで、見出しがあるとまとまってわかりやすいですよね（例：大見出し→h2、小見出し→h3）。
このように、内容ごとにまとめわかりやすくするのはもちろんですが、検索エンジンにも内容の階層化で理解しやすくなるというメリットもあるのです。そして、「hタグ」は上から順番にh1、h2、h3と続いて行くのが正しい記述になりますが、途中で順番を飛ばしてしまったり、数字が逆になっていないかをしっかり確認しなければなりません。順番に階層化されていないと検索エンジンも理解できなくなってしまいます。
■コーディングするときCSSで気をつけること
CSS（Cascading Style Sheets＝カスケーディング・スタイル・シート）はページにおけるスタイルを指定するために使う言語で、こちらも気をつけておきたいことがあります。
ひとつ目は「不必要なスタイルはつけないこと」、2つ目は「記述する順番はルール化しておくこと」です。
「不必要なスタイルはつけないこと」というのは、「CSSの記述」をしていく中で、同じスタイルを二重で効かせてしまったり無理やり記述している場合など、これも経験の浅い人に多く見受けられます。ブラウザ上での見た目は、記述通りのように表示されているので問題なく思えますが、後々修正などをした際に思いもよらない部分が影響し、不具合を起こしたりします。不必要なスタイルに気をつけ二重になっていないか、無理な記述はしていないか、確認を怠らないようにしましょう。
次に「記述する順番はルール化しておくこと」ですが、CSSは基本的には各順番の決まりはありません。そのため、コーダーによってCSSの書き方はバラバラだったりしますが、そこで気をつけておきたいのが「修正時にすぐにわかるように書かれているか？」ということです。
基本ベースとしては「HTMLの順番通りにCSSも記述するのが良い」とされています。またその他としては、パーツごとにわけて書いている場合などもあります。すべてを自分でこなすだけでしたら、自分なりの記述をルール化しておくことだけで構いません。しかし何人かで作業する場合は、きちんとルール作りをしておくことが大事で、修正などの際において混乱や時間のロスを防ぐことにつながります。
■コーディング終了時の見直し
「全体を見直すこと」というのは言うまでもなく基本的なことですが、ちょっとしたミスやコード全体を整理できます。特に慣れてきた時こそミスが出るので、忘れずに行いましょう。
次に、ブラウザのチェック。CSSによってはブラウザが対応していない場合があるので、動作チェック時には「必ず複数のブラウザ」で確認をしましょう。
さらに、社内でのコーディング規約がある場合もあります。その場合は規約に反したコーディングになっていないかチェックし、さらにWeb業界の変化速度とともに規約内容などが随時変更されていたりするので、確認もれがないようにしましょう。
■まとめ
コーディングをしていく上で、気をつけるべきことはたくさんあります。上述でも触れましたがWebサイトを作るには、デザインやコーディングなど様々な作業があり、お互いが複雑に絡み合っている部分も多いのです。コーダーが普段から気をつけていることがわかればデザインをする上でも役に立ちますし、その逆もまた同様です。コーダーも視覚的なわかりやすさなどを意識すると、コーディングの仕方が変わってくるかもしれません。
