ホームページ制作ライカーズ

ホームページ制作にはいくつもの工程があります。
企画・デザイン・コーディング・写真撮影・インタビュー＆ライティング。
そのなかでも一般的に聴き馴染みが無いであろうコーディングについて今回は紹介していきます。

コーディングとは？

Webに関わらない限りあまり聞きませんよね。コーディングとは、HTML、CSSなどというプログラミング言語の一種を活用し、ホームページを構築する工程のことです。デザインを実際のWebサイト上に落とし込み、そこに様々な機能を付け加えていくわけですね。

Webサイトのコーディングは難易度が低いとはいえプログラミングの一種なので、特殊な知識がないと構築・デバッグ・修正等は行えません。コーディングの書き方にも厳密に「優れている」「綺麗じゃない」などの基準があって、何かしら状況にそぐわない記述が入っていたりすると表示崩れなどのバグに繋がったり、ユーザビリティ的にあまり良くない結果になることが多くあります。
その「優れている/優れていない」の基準は正直非常に分かりづらいところです。
ぱっと見綺麗にまとめられたコードでも、公開してみれば動作がもたついたり、ブラウザを変えるだけで表示が崩れたり…。
中途半端な状態の知識で触ると意外と良くない方向に進んだりしてしまうものです。コーダーや知識を持つWebデザイナーなど、できるだけ専門の人に任せるようにしましょう。

コーディングの注意点とは？

チェックの時にも役立つかもしれません。コアな話になりますが、少し紹介します。

１．セマンティックなマークアップを心がける

HTMLは、検索エンジンやスクリーンリーダーなどのツールが正しく情報を読み取るために、適切な意味を持ったタグを使用することが望ましいです。例えば、見出しタグはh1~h6を適切に使用し、意味のある文章にはpタグを使用するなど、セマンティックなマークアップを心がけましょう。

２．レスポンシブデザインに対応する

スマートフォンやタブレットなど、様々なデバイスで閲覧されることを想定して、レスポンシブデザインに対応することが重要です。CSSのメディアクエリを使用して、画面サイズに応じたレイアウトを指定することで、閲覧者にとって見やすく使いやすいサイトを作ることができます。

３．CSSの適切なフォーマットを守る

CSSを記述する際には、適切なフォーマットを守ることが望ましいです。例えば、インデントを適切に行ったり、セレクタとプロパティの間にスペースを挿入するなど、見やすくメンテナンス性の高いコードを書くことが大切です。

とはいえプロが書いたコードは正直生半可な知識ではさっぱりなので、そこまで知識のない方はPC、スマホで上がってきたWebページを開いて、表示崩れしていないか、誤字脱字がないかの確認だけは怠らないようにしましょう。