Web開発初心者必ず身につけたい 30の習慣

2009/08/26 17:21Update

TAGS: HTML | Web | 入門 | CSS

Syboos.jp編集長

Page Options

Recommend To Friend

Web開発初心者にとって、HTMLコードをどうやって書けば、何を勉強すればいいのか？

30 HTML Best Practices for Beginners - Nettuts+

簡単に説明します。

１）開始タグと終了タグがきちんと書く

悪い例：

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

良い例：

<ul>
  <li>Some text here. </li>
  <li>Some new text here. </li>
  <li>You get the idea. </li>
</ul>

２）DocTypeを正しく宣言する

HTMLの一番先頭に以下のいずれかの一つを宣言しましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

３）インライン・スタイルの記述を避ける

悪い例：

<p style="color: red;">・・・</p>

良い例：

#someElement > p {
  color: red;
}

スタイルを外部CSSファイルに定義すべきです。

４）<head>タグに外部CSSファイルを記述する

良い例：

<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>

５）HTMLの末尾にJavaScriptファイルを記述する

外部CSSファイルの記述と逆に、JavaScriptファイルをなるべくHTMLファイルの底部に記述しましょう。

良い例：

    <p>And now you know my favorite kinds of corn. </p>
    <script type="text/javascript" src="path/to/file.js"></script>
    <script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

６）インラインJavaScriptの記述を避ける

できれば、インラインJavaScriptの使用を避けましょう。
悪い例：

<a ... onclick="...">link value</a>

onclickなどのイベントを処理したい場合、addEventListener/attachEventを使って、要素のイベントとその処理メソッドをバインドしたほうがずっといいです。
例えば、jQueryフレームワークを使う場合、以下のようになるでしょう。
良い例：

$('a#moreCornInfoLink').click(function() {
  alert('Want to learn more about corn?');
});

７）HTMLやCSSのバリデートを行う

Web Developer Toolbar　をダウンロードして、随時バリデートを行いましょう。

８）Firebugをダウンロードする

　　Web開発者に欠かせないこのFirefoxのアドオン、ここからダウンロードできます。

９）Firebugを使いこなす

　　Firebugを使っていますか？使いこなしていますか？時間を作って、Firebugの使い方を今一度しっかり勉強しましょう。
* Overview of Firebug
* Debug Javascript With Firebug - video tutorial

１０）タグ名を小文字にする

悪い例：

<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>

良い例：

<div>
<p>Here's an interesting fact about corn. </p>
</div>

１１）H1 - H6タグを利用する

SEO効果のあるH1～H6見出しタグを利用しましょう。

１２）ブログ記事のタイトルにH1タグで囲む

１３）ySlowをダウンロードする

URL：http://developer.yahoo.com/yslow/

１４）UL/LIでナビゲーション・メニューを実装する

悪い例：

 <div id="nav">
  <a href="#">Home </a>
   <a href="#">About </a>
   <a href="#">Contact </a>
 </div>

良い例：

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

１５）IE独自のスタイルを定義する

定義例：

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->

１６）良いコード・エディタを選択する

Mac：
    * Coda
    * Espresso
    * TextMate
    * Aptana
    * DreamWeaver CS4

PC：
    * InType
    * E-Text Editor
    * Notepad++
    * Aptana
    * Dreamweaver CS4

１７）完成したWebサイトのCSSやJavaScriptを圧縮する

Javascript 圧縮サービス
    * Javascript Compressor
    * JS Compressor

CSS 圧縮サービス
    * CSS Optimiser
    * CSS Compressor
    * Clean CSS

１８）縮減、縮減、縮減

いらないタグがありませんか？divタグは多すぎませんか？ULタグを使うべきところにdivタグを使っていませんか？
などをよく確認しておいてください。

１９）imgタグにalt属性をつける

悪い例：

<IMG SRC="cornImage.jpg" />

良い例：

<img src="cornImage.jpg" alt="A corn field I visited." />

２０）深夜の時間を利用する

あまり薦めませんが・・・

２１）他のサイトページのソースを閲覧・参照する

２２）すべての要素にスタイルを定義する

２３）Twitterを利用する

２４）Photoshopの使い方を勉強する

２５）各HTMLタグを学ぶ

abbrやciteなどあまり使われていないタグも覚えておきましょう。

２６）コミュニティを参加する

２７）CSS Resetを使用する

例えば、Eric MeyerのCSS Reset。

２８）コードを整形する

２９）PSDファイルをスライスする

HTMLやCSS、Photoshop技術を習得できたら、PhotoshopのPSDをスライスしてはいかがですか。
* Slice and Dice that PSD
* From PSD to HTML/CSS

３０）フレームワークを安易に使わない

JavascriptやCSSなどのフレームワークは玄人のためであり、素人にとって、これらのフレームワークを使うことはかえって混乱を招きかねません。

ホームページ作成支援

Web開発初心者必ず身につけたい 30の習慣

Syboos.jp編集長

Page Options

Recommend To Friend

Web開発初心者にとって、HTMLコードをどうやって書けば、何を勉強すればいいのか？

１）開始タグと終了タグがきちんと書く

２）DocTypeを正しく宣言する

３）インライン・スタイルの記述を避ける

４）<head>タグに外部CSSファイルを記述する

５）HTMLの末尾にJavaScriptファイルを記述する

６）インラインJavaScriptの記述を避ける

７）HTMLやCSSのバリデートを行う

８）Firebugをダウンロードする

９）Firebugを使いこなす

１０）タグ名を小文字にする

１１）H1 - H6タグを利用する

１２）ブログ記事のタイトルにH1タグで囲む

１３）ySlowをダウンロードする

１４）UL/LIでナビゲーション・メニューを実装する

１５）IE独自のスタイルを定義する

１６）良いコード・エディタを選択する

１７）完成したWebサイトのCSSやJavaScriptを圧縮する

１８）縮減、縮減、縮減

１９）imgタグにalt属性をつける

２０）深夜の時間を利用する

２１）他のサイトページのソースを閲覧・参照する

２２）すべての要素にスタイルを定義する

２３）Twitterを利用する

２４）Photoshopの使い方を勉強する

２５）各HTMLタグを学ぶ

２６）コミュニティを参加する

２７）CSS Resetを使用する

２８）コードを整形する

２９）PSDファイルをスライスする

３０）フレームワークを安易に使わない

Sponsored Link

ホームページ作成支援

Web開発初心者必ず身につけたい 30の習慣

Syboos.jp編集長 Page Options Recommend To Friend

Web開発初心者にとって、HTMLコードをどうやって書けば、何を勉強すればいいのか？

１）開始タグと終了タグがきちんと書く

２）DocTypeを正しく宣言する

３）インライン・スタイルの記述を避ける

４）<head>タグに外部CSSファイルを記述する

５）HTMLの末尾にJavaScriptファイルを記述する

６）インラインJavaScriptの記述を避ける

７）HTMLやCSSのバリデートを行う

８）Firebugをダウンロードする

９）Firebugを使いこなす

１０）タグ名を小文字にする

１１）H1 - H6タグを利用する

１２）ブログ記事のタイトルにH1タグで囲む

１３）ySlowをダウンロードする

１４）UL/LIでナビゲーション・メニューを実装する

１５）IE独自のスタイルを定義する

１６）良いコード・エディタを選択する

１７）完成したWebサイトのCSSやJavaScriptを圧縮する

１８）縮減、縮減、縮減

１９）imgタグにalt属性をつける

２０）深夜の時間を利用する

２１）他のサイトページのソースを閲覧・参照する

２２）すべての要素にスタイルを定義する

２３）Twitterを利用する

２４）Photoshopの使い方を勉強する

２５）各HTMLタグを学ぶ

２６）コミュニティを参加する

２７）CSS Resetを使用する

２８）コードを整形する

２９）PSDファイルをスライスする

３０）フレームワークを安易に使わない

Sponsored Link

Syboos.jp編集長

Page Options

Recommend To Friend