例として、
このウェブサイト(←クリックしてください)を作成したいとする。
CSSとは？HTMLとどう関係しているのか？
を
http://www.htmq.com/csskihon/401.shtml
を
見ながら確認していきます。
↑のページの工程を大まかに追っていくとこのようになります。
１. WEBの完成図の全体像(構造)を図に書く
２.その図に合わせたHTMLタグをつける(マークアップする・構造付けをする)
見出し(h1.h2.h3.h4.h5.h6)・段落(p)・表(table tr th)・リスト(ul li)などの要素に分け
３.<div>や<span>でスタイリングのためのタグ付けをする
見出し・段落・表・リストで分類できないものにはdivかspanをつける
id属性やclass属性で各部分に名前を付けてセレクタを設計する
５. CSSでスタイル指定する
今さら聞けない！読みづらいCSSプロパティの正しい読み方
http://creativememomemo.com/css_property_readings/
以下
CSSを使用したWEBレイアウトの基本
個々のページでそのidを使用した要素もまた、たった1つでなければなりません。
もし同じidを2つ以上の要素で使用すると、バリデーションチェックでエラーが出てしまいます。
例：バナー画像は１ページに１つしかないのでidで設定する
複数の要素で同じclassを使用することが可能。
複数のclassを同じ要素内で使用することも可能。
もしページ上で何度も使用されるスタイル設定ならば、classを使う。
例：ページの中で複数箇所を赤文字表示にしたい場合はclassで設定する。
方法B・Cの場合
＝出てくるウインドウの指示に従って操作するとidやclass名をつける事が出来る
(3)名前を付けたdivボックスの設定を作る
・dreamweaver上でdivボックスを選択し、
選択した状態でCSSスタイルのパネルの右下の
「新規CSSルールのボタン」をクリック。
※Illustratorなどのような「文字や画像を自分が移動したい場所に配置する」
という感覚ではなく、
「文字や画像を入れたdivボックスの内と外に余白をどう作るか」
を使ってレイアウトする感覚で操作していくとわかりやすい。
内(がわの余白)＝マージン margin
外(がわの余白)＝パディング padding
このウェブサイト(←クリックしてください)を作成したいとする。
CSSとは？HTMLとどう関係しているのか？
を
http://www.htmq.com/csskihon/401.shtml
を
見ながら確認していきます。
↑のページの工程を大まかに追っていくとこのようになります。
１. WEBの完成図の全体像(構造)を図に書く
２.その図に合わせたHTMLタグをつける(マークアップする・構造付けをする)
見出し(h1.h2.h3.h4.h5.h6)・段落(p)・表(table tr th)・リスト(ul li)などの要素に分け
３.<div>や<span>でスタイリングのためのタグ付けをする
見出し・段落・表・リストで分類できないものにはdivかspanをつける
divとspanは何が違うのか？
４. CSSの設計をするdivはブロック要（前後を改行して“かたまり”をつくる)spanはインライン要素（行中にそのまま続いていく）
id属性やclass属性で各部分に名前を付けてセレクタを設計する
５. CSSでスタイル指定する
読み方を間違いやすいHTMLタグやCSSタグ
HTMLタグの読み方辞典
http://www.coolwebwindow.com/cssref/html-tag-ref.html
今さら聞けない！読みづらいCSSプロパティの正しい読み方
http://creativememomemo.com/css_property_readings/
以下
より引用
スタイルシートが必要な理由
現在、ウェブページを制作する言語として広く利用されているHTML4.01やXHTML1.0には、 <center>や<font>などの装飾目的の要素（タグ）や属性が存在しています。 また、<table>タグでレイアウトをまとめるなどの方法を駆使すれば、 HTMLだけでウェブページの見栄えを制御することもできなくはありません。
しかし、ウェブページのスタイリングにHTMLを用いるべきではありません。
HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、 文書の情報構造がでたらめになってしまうからです。
コンピュータや検索エンジンに理解されないでたらめな文書構造になってしまえば、せっかくの情報もうまく活用されません。
また、HTMLの要素（タグ）をどのように表示するかは、ユーザーエージェント（ブラウザ）によって異なることがあります。 HTMLタグを駆使してある閲覧環境では見栄え良くレイアウトできたとしても、 他の閲覧環境ではまったく意図しないレイアウトになってしまうこともありえます。
ポイント： HTMLは骨組み、CSSは装飾
CSSを使用したWEBレイアウトの基本
(1)divボックスを作る
方法A＝HTMLソースに<div>〜</div>を直打ちする
方法B=画面上のバー「挿入>レイアウトオブジェクト>Divタグ」
方法C=挿入パネルの「Divタグの挿入」
方法C=挿入パネルの「Divタグの挿入」
(2)divボックスに名前を付ける
方法Aの場合＝<div id="~">...</div>または<div class="~">...</div>と直打ち
idとclassの違い
■[id] =１ページ内で１つのみ
それぞれの要素は1つのidしか持つことが出来ません。個々のページでそのidを使用した要素もまた、たった1つでなければなりません。
もし同じidを2つ以上の要素で使用すると、バリデーションチェックでエラーが出てしまいます。
例：バナー画像は１ページに１つしかないのでidで設定する
■[class]=1ページ内で複数
複数の要素で同じclassを使用することが可能。複数のclassを同じ要素内で使用することも可能。
もしページ上で何度も使用されるスタイル設定ならば、classを使う。
例：ページの中で複数箇所を赤文字表示にしたい場合はclassで設定する。
方法B・Cの場合
＝出てくるウインドウの指示に従って操作するとidやclass名をつける事が出来る
・dreamweaver上でdivボックスを選択し、
選択した状態でCSSスタイルのパネルの右下の
「新規CSSルールのボタン」をクリック。
という感覚ではなく、
「文字や画像を入れたdivボックスの内と外に余白をどう作るか」
を使ってレイアウトする感覚で操作していくとわかりやすい。
外(がわの余白)＝パディング padding
コメント
コメントを投稿