>
>

«
»

HTMLを読みやすく美しくする8つの方法

2010
04.21

美しいhtmlコードの画像

『8 Ways to Increase the Readibility and Beautify your HTML Code (HTMLコードを読みやすく美しくする8つの方法) 』 という記事があったので、紹介します。

HTMLとCSS,Javascriptを分離する

これのHTMLとCSSの分離は必要不可欠です。HTMLでインラインCSSを使っている人がまだ多くいます。デザインする上で不利なことはないですが、ウェブサイトを修正しなければいけなくなったときが大変です。CSS,JavaScript は外部ファイルにして、HTMLから参照するのが一番良いです。

タブやスペースを使う

HTMLコードには、タブやスペースで空白を入れて読みやすくするべきです。HTMLエディタの中には自動で字下げをしてくれるソフトウェアもあります。また、完成したHTMLやCSSファイルに自動でタブやスペースを入れてくれるツールなどもあります。

コメントを入れる

コメントを入れる習慣をつけてください。読みやすさ向上にとても役立ちます。CSSファイルやHTMLファイルには、セクションの始まりと終にコメントを入れて、JavaScriptファイルには簡単な説明をコメントで入れます。

セマンティックHTMLを意識する

セマンティックHTMLとは、すべて div や span で記述するのではなく、意味のあるHTMLタグを使うことを意味します。

  • 重要な部分にはh1,h2などのhxタグを使う
  • 入力フィールドにラベルとして LABELを使う
  • ナビゲーションにはulを使う

命名規則を決める

よく使う要素には、命名規則を決めておきます。例えば、

  • hdrXXXXX……ヘッダー
  • lblXXXXX……ラベル
  • txtXXXXX……テキストフィールド

文法が合ってるか確認する

Another HTML-lint gateway などの検証ツールを使って文法を確認してください。問題点を特定するのに非常に役に立ちます。バリデートすることでバグを減らすこともできます。

ディレクトリをわかりやすく

ファイルを見つけやすいようにディレクトリ（フォルダ）を構成してください。例えば、CSSという名前のフォルダにCSSファイルをまとめ、imagesというフォルダに画像をまとめれば、どこにどの種類のファイルがあるかわかりやすくなります。

CSSハックを使わない

IE（Internet Explorer）のためにCSSハックを使わず、Conditional Tag（条件分岐コメント）を使ってください。CSSハックは現在は使えたとしても、修正されるかもしれないし、保守性も悪くなります。IE6, IE7, IE8 にそれぞれCSSファイルを作成し、条件分岐コメントを用いて、それぞれ別のCSSファイルを読み込ませてください。下のようになります。


<!--[if IE 6]>
<script type="text/javascript" src="pngfix.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie7.css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie8.css" />
<![endif]-->

8 Ways to Increase the Readibility and Beautify your HTML Code

Tags: , ,

Your Reply