YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2018.08.31

【後編】現役Webコーダーが気を付けているコーディングのコツと基本

【後編】現役Webコーダーが気を付けているコーディングのコツと基本

前編では、現役Webコーダーが普段から気を付けていることの中で「コーディング環境・意識合わせ・スライス前の注意点」をお話しました。今回の後編では「コーディング時の”HTML”や”CSS”について気をつけること、コーディング後のチェックでやっておくとよいこと」などをご紹介していきます。コーディングのヒントにしていただければと思います。

”HTML”を記述する際に頭に入れておきたいこと

コーディングする際にHTMLで気をつけておきたいことは主に3つあります。

1. HTMLのバージョンに合った文法を書くこと。
2. 内部SEOを意識して、”title・meta・description・alt”は必ず記述すること。
3. ”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サイトを作るには、デザインやコーディングなど様々な作業があり、お互いが複雑に絡み合っている部分も多いのです。コーダーが普段から気をつけていることがわかればデザインをする上でも役に立ちますし、その逆もまた同様です。コーダーも視覚的なわかりやすさなどを意識すると、コーディングの仕方が変わってくるかもしれません。
 

Recommend この記事を読んだ人はこんな記事も読んでいます

2020.02.19

【ワークスペース】シェアオフィスのメリットとデメリットは?

■「シェアオフィス」とはどんなもの?一般的にオフィス(事務所)は仕事をする空間・スペースですが、賃貸契約のオフィスもあれば、丸ごと購入するオフィスもあります。その場合において、従業員とお客様のみが利用できるという意味で「専有オフィス」...

【キャリアアップ】Webデザイナーが持つべきプラスのスキルとは?

2020.02.04

【キャリアアップ】Webデザイナーが持つべきプラスのスキルとは?

■Webデザイナーを取り巻く現状と『キャリアアップ・チェンジ』現在もWebサイトは日々増え、さらに人手不足の昨今、Webデザイナーとしての仕事がすぐになくなることはないでしょう。しかし同時に求めるスキルも上がり、ただきれいなサイトを作...

【ワイヤーフレーム】Webディレクターがワイヤーフレーム作成で必ず押さえたいポイント!

2019.11.15

【ワイヤーフレーム】Webディレクターがワイヤーフレーム作成で必ず押さえたいポイント!

■ワイヤーフレームの目的は「デザインではない」 ワイヤーフレームを作る時に誰しもが1度は陥ってしまうと思われるのが『デザインを考え始めてしまい、ワイヤーフレーム作成が進まない』ということ。ワイヤーフレームを作る目的として、サイト制作に必...

【ブックマーク必須!!】Web制作で使いたい『お役立ちサイト』

2019.10.30

【ブックマーク必須!!】Web制作で使いたい『お役立ちサイト』

■ダミー画像作成をするなら『placehold.jp』「フレームワーク」ができて「モックアップ」用のダミー画像をいれる時、どのような方法をとっているでしょうか。ちなみに「モックアップ」は、ページの骨組みであるワイヤーフレームの後、それ...

【コーディングチェック】Web制作で納品前に使えるコーディングの便利ツール!

2019.10.01

【コーディングチェック】Web制作で納品前に使えるコーディングの便利ツール!

■「HTML・CSS」を同時にチェック「Dirty Markup」は、「HTML・CSS」を併せてチェックできるツール。とてもモダンで見やすく、使い勝手のよいオンラインチェックツールです。特徴は何といっても、汚いコード部分をキレイに整形...

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

2019.09.13

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

■前編はこちら【資格】フリーランスのWebクリエイターが資格取得するメリット~前編~■資格取得前にキャリアアップの形成計画フリーランスが「資格取得」を最大限に有効活用する上で、まずやらなければならないことがキャリアアップやフリーランス...