- Webの基礎
- HTML,CSSって何？
- Javascriptって何？
- ローマ字以外の文字が打てない
- ショートカットを覚えよう
- ファイルとフォルダの違い
- 圧縮と解凍
- 絶対パスと相対パス
- 使ってはいけない文字
- ホームページを作るときのコンセプト
- ナビゲーション
- ホームページを作るために必要なものは？
- HTML
- htmlとは
- おまじないを書こう
- headとbodyの違い
- マークアップ
- cssとjavascriptのリンクの仕方
- 「div」「p」「span」の違い
- 「p」以外のクラス名設定
- divのきり方
- divの多用はダメ
- ソースの綺麗な書き方
- テーブルを使ってみよう
- テーブルの多用は駄目
- 終了タグがないHTMLの書き方
- HTMLを書く際にしてはいけないこと
- CSS
- cssとは
- cssのメリット
- bodyとpageの違い
- cssを指定する場所
- pisitionの使い方
- 文字の後ろに背景を設定しよう
- リンクを触ったときに色を変えたい
- hoverの可愛い使い方
- floatを使いこなそう
- ボーダーの種類と使い方
- tableを可愛く装飾しよう
ソースの綺麗な書き方
ソースは、なぜ綺麗に書かないといけないのか？
ソースを綺麗にするのはとても面倒ですよね。分かります
私も結構サボってます。（現に今）
でも、ある程度は見やすくしてます。ソースをなぜ綺麗に書かないといけないのかというと
- メリット
- ★間違えが少なくなる
- ★何年か先に見ても解読が出来る
- ★ほかの人が自分のソースを見た時に分かりやすい
だからです。こんなにメリットがあるならやらない手はないですね＊＾＾＊
↓を見てみてください。１と２どっちが見やすいですか？
※1
<div id="page">
<div id="header" class="clearfix">
<p id="logo"><img src="../common/images/logo.gif" alt="No Web No Life"></p>
<div id="logoright">
<ul id="rnav">
<li><a href="../map/index.html">★サイトマップ</a></li>
<li><a href="#">★お問い合わせ</a></li>
</ul>
<p id="sart">サイト内検索</p>
<!--/#logoright-->
</div>
<!--/#header-->
</div>
※2
<div id="page">
<div id="header" class="clearfix">
<p id="logo"><img src="../common/images/logo.gif" alt="No Web No Life"></p>
<div id="logoright">
<ul id="rnav">
<li><a href="../map/index.html">★サイトマップ</a></li>
<li><a href="#">★お問い合わせ</a></li>
</ul>
<p id="sart">サイト内検索</p>
<!--/#logoright-->
</div>
<!--/#header-->
</div>
2のが見やすいですよね？
それに間違えも発見しやすいです。
ちなみに、Tabキーを使って揃えます。全角の空白は画面上に反映されてしまうからです。
半角の空白を沢山使うより効果的です。
分かりやすく色を変えますね。
<div id="page">
<div id="header" class="clearfix">
<p id="logo"><img src="../common/images/logo.gif" alt="No Web No Life"></p>
<div id="logoright">
<ul id="rnav">
<li><a href="../map/index.html">★サイトマップ</a></li>
<li><a href="#">★お問い合わせ</a></li>
</ul>
<p id="sart">サイト内検索</p>
<!--/#logoright-->
</div>
<!--/#header-->
</div>
そして、ソースが長くなってきれいにはしているけど、何が何処か分からなくなった方は
目印をおくといいです。
<div id="page">
<!--◆◆◆◆ここからヘッダー◆◆◆◆-->
<div id="header" class="clearfix">
<p id="logo"><img src="../common/images/logo.gif" alt="No Web No Life"></p>
<div id="logoright">
<ul id="rnav">
<li><a href="../map/index.html">★サイトマップ</a></li>
<li><a href="#">★お問い合わせ</a></li>
</ul>
<p id="sart">サイト内検索</p>
<!--/#logoright-->
</div>
<!--/#header-->
</div>
<!--◆◆◆◆ここまでヘッダー◆◆◆◆-->
◆や★を連続で使うと目立ちますからね。
コメントの書き方
よし綺麗にしようと書いてはみたけど画面に文字が出てしまった人。
コメントを書くにも注意があります。
- ★htmlは<!--コメント-->
- ★cssは/* コメント */ または//
- ★javascriptは /* コメント */ または// コメント
// は、その行のみコメントになります。
/* */と<!-- -->は、広範囲にわたって可能です。
後でまた使うかもしれないけど今は消したいときとかに非常に助かります。
<div id="page">
<!--◆◆◆◆ここからヘッダー◆◆◆◆-->
<div id="header" class="clearfix">
<p id="logo"><img src="../common/images/logo.gif" alt="No Web No Life"></p>
<div id="logoright">
<ul id="rnav">
<li><a href="../map/index.html">★サイトマップ</a></li>
<li><a href="#">★お問い合わせ</a></li>
</ul>
<p id="sart">サイト内検索</p>
<!--/#logoright-->
</div>
<!--/#header-->
</div>
<!--◆◆◆◆ここまでヘッダー◆◆◆◆-->
赤文字の部分が今はいらないな、と思ったらコメントにします（もし、元に戻せなくなったり
切り取ってメモ帳などにはりつけるのが面倒だから）
<div id="page">
<!--◆◆◆◆ここからヘッダー◆◆◆◆-->
<div id="header" class="clearfix">
<p id="logo"><img src="../common/images/logo.gif" alt="No Web No Life"></p>
<div id="logoright">
<!--
<ul id="rnav">
<li><a href="../map/index.html">★サイトマップ</a></li>
<li><a href="#">★お問い合わせ</a></li>
</ul>
-->
<p id="sart">サイト内検索</p>
<!--/#logoright-->
</div>
<!--/#header-->
</div>
<!--◆◆◆◆ここまでヘッダー◆◆◆◆-->
これでokです。コメントは要らなくなったら消してね。