Web・デザインスクールホームページ作成講座レッスンノート CSSとhtmlで異なる部分に注意しましょう

CSSとhtmlで異なる部分に注意しましょう

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

本日もレッスンお疲れ様でした!

今回はベースとなっているhtml,CSSがどうなっているのか確認しつつ、新しく試しに記述を加えました。

ベースのものに関しては、以前も多少説明しましたが、今回は少し突っ込んでみてみました。
どこからどこまでがどの部分のhtmlで、そこにはどんなCSSが使われているか。
htmlでid="〜"の中に書いたものは、CSSでは#〜と指定します。
CSSの書式は
#〜 li{
margin-bottom: 10px;
}
と言った具合で、まずどの部分に(ここではid="〜"の中のliタグ)どういう指定をしたいのか(この場合指定要素の下に10px余白を作りたい)をかきます。
指定したい要素の後に中括弧を開き、CSSの指定を書き:(コロン)、値を書き;(セミコロン)最後に中括弧を閉じます。

htmlでは、入れ子構造が解りやすいようにtabキーを適宜打っていきましょう。
基本はタグを開いたら閉じる<div></div>という形を覚えて下さい。
imgタグのように<img src="パス" alt="代替文字" />閉じタグがないものもあります。その場合はこのように、最後は、半角スペース/>の形にしてください。

ひとまず今回はdivという、ひとつのかたまりをつくるタグと、ul liという番号なしリストというものを使ってみました。
それに対してCSSを付けましたが、出てきたのはwidth(幅)指定、float(回り込み)指定とmargin(余白をとる)指定でした。floatはwidth指定がないと効きません。さらに、floatは「浮いている」状態です。この辺りは次回も少し触れたいところです。

コメントアウトという、メモ書きの仕方もやりました。
CSSの場合は/*〜*/として、〜の部分にメモを書きます。そうするとどこの部分のCSSなのか解りやすくできます。
もう一方、htmlにもコメントアウトの方法があります。
これはレッスンでは触れませんでしたが、<!--〜-->この〜の中に書きます。これを入れることで、特に入れ子にした場合、開始タグと閉じタグの組み合わせが解らなくなるのを防ぎます。数が増えてくると、これが原因で閉じタグの数が足りているのかどうかが解らなくなったりします。
また、CSSとhtmlで異なる部分に注意しましょう。
このレッスンノートを書いたコーチ

元・グラフィックデザイナー。ゼロ~大手企業サイト制作で培ったコツまで

誰でもできる!Web教室
シバタダイスケ (ホームページ作成)

新宿・吉祥寺・三鷹・中野・高円寺・阿佐ケ谷・荻窪・西荻窪・武蔵境・東小金井・武蔵小金...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta