今から始めるＣＳＳレイアウト・3

めちゃくちゃ小技ですが・・・。

普段から、プログラマーの人と比べると、
コードを見る機会が少ない私は、
やっぱりたくさん並んだ記号が不慣れです。

CSS指定ののために＜div＞であれこれ指定して入れ子が複雑になっていくと、後半の方で＜/div＞がどの子のだかよくわからなくなってしまいます。

こんな感じ
========
＜div id="layout"＞
＜div id="layout_main"＞
＜div id="layout_navi"＞
＜div id="layout_navi2"＞
＜/div＞
＜/div＞
＜div id="layout_content"＞
＜div id="layout_content2"＞
あれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれや
＜/div＞
＜/div＞（誰？）
＜/div＞（誰？）
＜/div＞
========



最初からこんなふうに書き込んでおくと便利でした。
=======
＜div id="layout"＞
＜div id="layout_main"＞
＜div id="layout_navi"＞
＜div id="layout_navi2"＞
＜/div＞＜!-- /layout_navi2 --＞
＜/div＞＜!-- /layout_navi --＞
＜div id="layout_content"＞
＜div id="layout_content2"＞
あれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれやあれやこれや
＜/div＞＜!-- /layout_content2 --＞
＜/div＞＜!-- /layout_content --＞
＜/div＞＜!-- /layout_main --＞
＜/div＞＜!-- /layout --＞
======


これってプログラム書く人にとっては常識かな・・。
ぼくは、見つけた時ちょっと喜んでしまいました。

今から始めるＣＳＳレイアウト・2

HTML上でCSS用のタグ付けをする場合、
見出しにはh1、h2など本来の意味のタグをつけた方が、
SEO対策的に有利とされている。

ただしこのh1、h2、h3・・・等のタグは、
固有のマージンや余白をを持っていて、
レイアウトを進めるとどうしてもきれいにまとまらず、
いらいらしていました。




こんな方法がありました。
予めすべてのマージン・余白をリセットすると意外と
スムーズにレイアウトが出来ます。

指定はこんな感じ。
h1,h2,h3,h4,h5,h6,p,ul,ol {
padding: 0;
margin: 0;
}


↑マージンと余白をリセットした場合

ただし、改めて個別にすべて指定をしなければいけないので、
その労力はかかります。

個人的には、レイアウトのコントロールをしやすいので、
この方が良さそう・・。

今から始めるCSSレイアウト・1

遅ればせながらCSSのレイアウトを始めた。


今までHTMLのページ作成で行ってきた、
テーブルを何重にも入れ子にしたり、
透明GIFで正確なレイアウトをしていく方法でなく、
簡単なタグ付けのみをHTMLで行い、
外部のスタイルシートファイルに
デザインレイアウト情報を持たせていく。

推奨される理由としてよく言われるのが、
・WEB標準への準拠
・SEO対策への効果
・読み上げプログラムへの対応
・更新・リニューアルの簡易性
・HTMLがデザインデータを持たないので、携帯での表示が可能
などなどがあげられる。


比較的簡単なページの案件があったので、
テーブルを一切使わずに全部CSSでレイアウトを進めています。

従来のテーブル＆透明GIFに慣れきってしまった自分にとっては、
まったく違う製作方法で最初かなり戸惑いました。


この機会に、DreamWeaverを2004から8にバージョンアップして、
あれこれトライ＆エラーで進めています。




テーブルで組めば、30分もあればできるレイアウトに、
勝手がわからず丸１日かかってしまった（泣）
何よりも、今は慣れることが優先です。


CSSレイアウトの本を読むと、
レイアウトを左揃えにして
絶対位置でレイアウトしていくのが多いようですが、
今回は中央揃えで挑戦です。

とりあえず絶対位置の指定は行わず、
相対位置でレイアウトしていきます。

テーブルレイアウトの時からこだわっているのだが、
ユーザのブラウザ環境によって文字サイズが変わることで、
見栄えが崩れたり、見にくくなったりは絶対避けたいと思っている。

そう考えると、相対的なレイアウトを優先的に選んでしまっているが、
この選択は正しいのだろうか？


ボックスの概念が難しいです。
それをフロートの考え方で左右に並べたり、
普通に縦に並べたり、
慣れるまで戸惑います。


つづく


参考リンク
CSSとは
Macromedia - Dreamweaver 8