Web・デザインスクールホームページ作成講座レッスンノート 各リストの下に文章がついた場合、どういったコーディングが正しいのか

各リストの下に文章がついた場合、どういったコーディングが正しいのか

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

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

先日はお疲れ様でした!

番号付きリストで、各リストの下に文章がついた場合、どういったコーディングが正しいのか、という話になりましたね。

これしかない、という答えというのはやはりないのですが、構造的にいわゆるセマンティックと呼べるコーディングはリストタグをネストするやり方ではないかと思います。
それを実際に書きながらCSSも入れていきました。
下に入れる文章をインデントさせていく場合、このネストする方法が一番シンプルなCSSになってくるとも思います。

他にもdlリストを利用する方法や、pタグを利用する方法などもやってみました。文書構造などによって、使いやすい方法でやるのがベストであり、このあたりは経験が必要になる部分かな、と思います。

CSSについてですが、text-indentでは最初の1行のみに設定された数値が反映されます。marginではボックス全体に対して数値が反映される違いがあります。
なお、marginはあくまでボックスの外側に対してかかるもの。paddingはボックスの内側にかかるもの。これをきちんと使い分けることで、サイト全体のメンテナンス性が上がります。(構造が解りやすくなるからです。)

また、CSSのoverflowについても触れました。hiddenと設定すれば、はみ出した部分は表示されなくなります。
つまりレイアウト崩れを防ぐ目的があるのですが、こちらについてはご紹介したページに詳しいことが書いてあったかと思います。
またそれともう一つ。以下の知恵袋を読んで頂きたいです。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10103417415

floatした要素はあくまで浮いている状態なので、その親ボックスはその高さを無視してしまうので、それを回避する方法の一つとしても使われます。
ここにもあるように、この高さが出ない問題に対しては、overflow:visible;(これが初期設定の値)以外であればいいわけで、hiddenではなくautoでもいいです。(ほとんどのサイトでhiddenが使われていますが)
それと、以下の記事も参照してみて下さい。overflowでこれだけのことができます。

http://coliss.com/articles/build-websites/operation/css/css-clearing-floats-with-overflow-by-webdesignerwall.html

結果的にclearfixやclear:both;のような役割もできます。

あと、zoom:1;についても触れました。
これは本来、ie7以下のバージョンのie独自のCSSです。文字通り、ブラウザ上で文字をズームした時の設定です。

http://www.i-pocket.co.jp/blog/?p=1856

こちらの記事が解りやすいかと思います。要はこれまたie独自のCSSであるhasLayoutというものが原因のバグを取ることを目的として指定することが殆どです。

http://coliss.com/articles/build-websites/operation/css/143.html

上の記事ではそのhasLayoutについて触れている記事です。zoom:1を指定することでhasLayoutがfalseになっているものをtrueにする効果があります。さらに、ieの独自仕様なので、これを使えば他のブラウザに影響がでないので、多用されるのですが、他にも上記の記事で紹介されているように、回避の方法は結構あります。

なお、全体に対してzoom:1をかけることは私はオススメしません。それが原因で逆にレイアウトが崩れたりすることもあるからです。

以上、記事を新たにご紹介しながら、先日の内容に補足しました。
このレッスンノートを書いたコーチ

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

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

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

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

ホームページ作成情報

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

twitter

ホームページ作成の先生

@HomepageCyta