Webブラウザに表示してもエラーにならず、しかも指示通りのWebページがHTMLが書けるようになったとしても、実際の仕事の現場では、まだまだ不十分です。逆に言えば、そこまでできるようになれば、もう初心者ではありません。ここでは、HTMLの初心者からプロのエンジニアを目指している方に、ワンランク上のHTMLを書く方法について解説します。
セクションとアウトラインを意識したHTMLを
HTMLのバージョン5の考え方では、HTMLとスタイルシートの役割が分離されており、HTMLはWebページの構成や配置されるコンテンツを定義します。また、多くのWebページでは、階層創造を持っており、そのようなWebページでは、どのタグがどういった順番で使われるかが重要です。そして、このように構造を意識したWebページを書けるようになるには、HTMLのセクションとアウトラインを理解しなければなりません。
次から、セクションとアウトラインを意識したHTMLの書き方について解説します。
HTMLは階層構造を持っている
HTMLのバージョン5以降、階層を意識した文章構造で書くことが推奨されています。また、その順序も重要で、人が読む文脈と同じ順序で書かれていなければなりません。
そのために、HTMLのバージョン5からWebページの構造を記述するためのタグが追加されました。それらを正しく配置しているでしょうか。また、スタイルシートでfloatを指定して配置位置を調整することもありますが、ブラウザでの見せ方だけにこだわっていないでしょうか。
HTMLは、デザイナーが作ったイメージどおりにWebブラウザで表示できれば良い、というものではありません。Webページ全体のアウトラインを意識しながら、どういった順序でコンテンツを配置していくか考えた書き方を意識しましょう。
divタグを多用するのはよくない
divタグとは、HTMLに記述される複数の要素をグループ化する際に使われる汎用的なタグです。ただし、divタグそのものには何も機能がありません。それでも、スタイルを適用するためのブロック要素として、よく使われています。
なお、Webページのデザインは、divタグのようなブロック要素を組み合わせて、そのレイアウトを決めていきます。そして、複雑なレイアウトのWebページでは、divタグが幾つも使われており、何重にもdivタグが入れ子になった構成も珍しくありません。
とはいえ、divタグを多用する書き方はよくありません。HTMLのバージョン5には、ヘッダ部分に使うheaderタグや、フッターの位置に使うfooterタグ、さらに、sectionタグやarticleタグなど、Webページのどの場所かを示すタグが追加されました。こういったタグを使うことで、後から修正する場合も、見やすくなります。ぜひ、活用してください。
インデントや改行はルールに従う
長い日本語やプログラムなどにインデントが使われていると、各段に読み易くなります。これは、HTMLにも言えることです。後で編集する機会の多いHTMLなら、タグ同志の階層構造が解るように、適切なインデントを入れておきましょう。
次から、インデントを使ったHTMLの書き方について解説します。
そもそもインデントとは
インデントとは、横書きの日本語なら段落を始める際、その最初の文字の前に空白を入れることです。また、プログラミングでは、プログラムの構造を見やすくするために、処理に応じて複数の空白を入れることで、条件分岐後やループの処理などが、どこからどこまでかを解るように書くことをいいます。
なおHTMLには、階層構造を持つタグが幾つかあり、それらを連続して書くこともできます。しかし、それでは、階層が解り難く、後で修正するのが大変です。そのため、HTMLでも、下の階層がひとまりになるように改行やインデントを追加し、後から読んでも解りやすい書き方が求められます。
インデントを活用した例
階層を持つタグの例として、ulタグとliタグを使い、全て連続した一行で書いた場合と、改行およびインデントを使って読み易い書き方をやった場合とを比べてみましょう。
一行で書いた例
<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>
改行とインデントを使った読み易い書き方
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
いかがでしょうか。例えば上の例で、リスト2を修正したい、となった場合、改行とインデントを使った読み易い書き方の方が、すぐにどこを修正すれば良いか解り易いのではないでしょうか。
CSSを書く際の注意点
HTMLのバージョン5では、Webページに使われる修飾要素は全てスタイルシートに記述するのが基本です。そのため、HTMLよりもCSSの方が大きい、といったことが珍しくありません。そのため、気が付いたことを追加してだけの書き方をしたCSSはひどく読みにくく、後で困る原因になります。しかし、うまい人の書いたCSSは読み易く、修正するのも容易です。
このように、書き方によってコードの生産性に大きな差がうまれます。そこで次から、読み易いCSSの書き方のポイントを紹介します。
classをむやみに増やさない
HTMLの要素とそれを修飾するスタイルとを関連づけるのはidまたはclassですが、classは、1つのタグに複数設定することが可能です。そのため、あるスタイルだけを設定するclassを作成し、別のclassといっしょに使うこともできます。
しかし、これをやりすぎると、どのclassが影響しているのか解り難くなり、後から編集するのが難しくなります。そのため、classをむやみに増やさない書き方が大事です。例えば、同じスタイルを適用するタグをきちんと管理し、そのためのclassを用意するなど、後から編集しやすいような書き方を心がけると良いでしょう。
idとclass名の名前の規則を統一する
よく他の人の書いたHTMLやスタイルシートを編集する際、似たような名前のidやclassが多く区別がつきにくかったり、やたら長い名前のidやclassが使われていて編集するのが面倒だった、といった経験はないでしょうか。idやclassは、できるだけシンプルな名前の方が読み易いものの、数が多いとどうしても似た名称を多く使ってしまいがちです。
そこで、名前の規則をできるだけ統一し、そのルールに従った書き方を心がけましょう。また、それが何のためのclassかが、その名前を呼んだだけで解るのが良い名前です。例えば、case01などと、似たようなclassを数字で区別するのではなく、caseCheckやcaseNewなどと、意味が解る名前を使うと後で修正する場合も見やすくなります。
プロパティを書く順序を合わせる
div要素といったブロック要素のスタイルを記述すると、サイズや文字の大きさ、さらに背景など、意外に指定するスタイルがたくさんあります。しかし、その順序がclassによってバラバラだと、後で修正する際、他のclassとの比較が面倒です。
さらに、スタイルを書く順序がバラバラでは、自分が修正する場合もそうですが、別の人が修正する場合に、余計な手間がかかります。そのため、スタイルとして指定するプロパティをグループ分けし、それを書く順序を決めておきましょう。そうすることで、各段に読み易いスタイルが書けるようになります。
JavaScriptの書き方
最近のWebページのほとんどでJavaScriptが使われています。そして、JavaScriptで書かれた多くのフリーのライブラリが公開されており、そのようなライブラリを使うことで、簡単な記述で印象的な画面が作れたり、また、使いやすいコンテンツに仕上げることが可能です。
しかし、JavaScriptを正しく設定しないと、Webページが開くのが遅くなったり、特定のWebブラウザでエラーが発生するなど、思わぬトラブルが発生することもあります。次から、HTMLを書く方にぜひ知っておいてほしい、JavaScriptの書き方について解説します。
ライブラリの参照は必要なものだけに
今作られているWebページの全てでJavaScriptが使われており、しかも、そのほとんどで複数のライブラリを活用しています。しかし、使っていないJavaScriptのライブラリを参照していないでしょうか。
HTMLでは、外部のJavaScriptのライブラリを取り込む機能があり、そのコードをコピペすれば、JavaScriptに詳しくない方でも便利な機能を簡単に使えます。しかし、そういったライブラリの中には、過去にセキュリティのバグが発生し、バージョンアップしたものが幾つもあります。また、古いバージョンを使っていると、最新のブラウザでサポートされていない機能のせいで、正常に動作しないといったこともあるので注意が必要です。
さらに、あるライブラリを使うためには、より汎用的なライブラリが必要なケースも少なくありません。そういったライブラリを使う際、知らないでコピペすると、同じライブラリを何度も参照するかもしれません。さらに、最後に参照した汎用ライブラリのバージョンが古く、誤動作の原因になる可能性もあります。
そのため、必要最小限のJavaScriptのライブラリのみ参照する書き方を心がけましょう。
まとめ
HTMLは、一度作ったらそれで終わりではありません。後から修正することがよくあります。自分で書いたHTMLを編集することになっても、時間が経っていると、なぜ、このような書き方をしたか忘れてしまいます。さらに、別の人が編集することもあるでしょう。
そのような時、後から修正する前提の書き方をしていないと、余計な手間がかかってしまいます。後から編集しやすいHTMLの書き方をマスターして、誰でも編集しやすいHTMLが書けるようになりましょう。
