これならいける? Dreamweaverで始めるCSSレイアウト

これならいける?
Dreamweaverで始めるCSSレイアウト
こもりまさあき
まずは自己紹介でも
•
元々はDTP系の会社で製版からデザインと出力、さら
にはサーバやネットワーク管理、配線までやる雑用係
•
•
実は、Mosaicの頃からWebには携わってたり…
•
で、いまだに就職もせず…。
正装はTシャツです
2000年に会社を辞めて遊ぶつもりが「Webサイト作
れる人を探してるんだけど、どう？」がきっかけでな
ぜかフリーランスの道へ
これならいける? Dreamweaverで始めるCSSレイアウト
自己紹介
現在好評発売中な書籍
これならいける? Dreamweaverで始めるCSSレイアウト
実は作例協力とか
これならいける? Dreamweaverで始めるCSSレイアウト
本書いてるだけ？実作業は？
•
某キャラクターコンテンツや芸能・音楽関係をはじめ
としたWebサイト、携帯コンテンツの制作などを基本
的に一人でこなしてます。
そんなわけでFlashでなんかやってるかと思えば、次の
瞬間にフライヤー作ってたりの毎日です
•
他にもアーティストのライブ写真やムービーのカメラマ
ンやったりとかわけわかりません
•
ということでこの辺で本編へ。
細かいことは苦手なので、今日はゆるめに話します
これならいける? Dreamweaverで始めるCSSレイアウト
これならいける?
Dreamweaverで始めるCSSレイアウト
本編
これならいける? Dreamweaverで始めるCSSレイアウト
本日のアジェンダ
• idとclass、そしてセレクタ
• スタイルの初期化
• まずは簡単なレイアウトでfloatを理解
• floatを使った段組レイアウト
• positionを使った段組レイアウト
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
• まず、idとclass、セレクタを理解しておく
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
idとは？
• 「id」とはページの中に一つだけ
• <h2 id= cssnite >○○</h2>
• name属性との置き換えで
「index.html#hoge」的に使える
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
classとは？
• 「class」はページ中にいくつあっても可
• <p class= date >2006.12.08</p>
• 共通化したい要素には「class」を割り当てる
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
セレクタとは？
• 「セレクタ（selector）」は、HTML中の要
素にスタイルという服を着せるための名前
• idの場合は「#id名」となり、
classの場合は「.class名」となる
• HTMLタグの場合はそのまま「body」など
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
セレクタのいろいろ
• ユニバーサルセレクタ
*（アスタリスク）{ … }
• グループセレクタ
カンマ区切り
body, h1, h2, h3, p { … }
• 子孫セレクタ
半角スペース区切り
body h2 { … }
• などなど
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
Dreamweaverではどうなる？
• キャレットの位置や選択範囲によって、自動
的に「子孫セレクタ」でセレクタ（新規CSS
ルール）が作成される
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
Dreamweaverではどうなる？
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
子孫セレクタじゃないほうが…
• 子孫セレクタでなくしてしまった方が、共通
化したスタイル指定がしやすい場合もある。
それが一番わかりやすい
#container #header p.mystyle { … }
↓
p.mystyle { … }
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
ただし…
• 同じ名前のセレクタは複数作らないこと。
後に続くもので上書きされる
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
とはいうものの…
• うまくこの上書きされることを利用すれば、
ベースとなるCSSにあるスタイルを他のCSS
で上書きすることでレイアウトを切り替える
ことも可能
これならいける? Dreamweaverで始めるCSSレイアウト
idとclass、そしてセレクタ
スタイルの初期化
• ブラウザの初期値をリセットしておこう
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
なぜ？それが必要なの？
• HTMLでマークアップした文書は、要素毎に
ブラウザが持つ初期値を使って画面上にレン
ダリングされる
• 特にレイアウト中は、そのマージンや余白と
いったスペースが邪魔をして、位置がずれて表
示されたり…
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
スタイルを初期化する方法
• ユニバーサルセレクタを使って、HTMLの要
素に含まれるすべてのものを対象にする
• グループセレクタを使って、特定のHTML中
の要素だけを対象にする
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
ユニバーサルセレクタを使うと…
• 書き方によっては全ての要素が対象となって
しまうため、細かいスタイル指定が必要にな
り、煩雑になって困ってしまうかも
• それでも構わなければ、一番楽な方法
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
グループセレクタを使うと…
• とりあえず邪魔そうな要素だけを選ぶことが
できるので、必要であれば後から要素をセレ
クタに追加すればよい
• サイト毎にリセットしたい要素が変わる可能
性もあるので、CSSを使い回す時は注意
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
CSSルール定義ダイアログ
ボックスの余白とマージンに「0」、以上!
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
どっちが良いんだい？
• 残念ながら、それだけはわかりません…。
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
初期化するCSSの流用
• CSSは外部参照ができるので、定型の初期化
CSSを使い回すことが可能。
• 基本形だけ書いておいて、Dreamweaverの
スニペットに入れておけば、改変しながらも
使える
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
スニペットもたまには使わないと
これならいける? Dreamweaverで始めるCSSレイアウト
スタイルの初期化
まずは簡単なCSSレイアウト
• テキストの回り込みでfloatを理解しよう
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
そもそもfloatって何？
• スタイル中に指定する「float」プロパティ
は、ブロックレベルの要素をプカプカ浮かせ
た状態のように扱って、右や左に寄せること
ができる
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
floatの一番簡単な使い方
• 例えば「img」要素は立派なブロック。これ
をfloatを使って右に寄せると、後に続く要素
は左側に流れていく＝画像の周りにテキスト
が回り込む効果が得られる
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
テキストの回り込みサンプル
h2要素→img要素→p要素→p要素（copyright）
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
テキストの回り込みサンプル
「img.right」というセレクタを作成して「フロート：右」に
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
テキストの回り込みサンプル
img要素にスタイルを適用（.right）
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
テキストの回り込みサンプル
img要素が右側に寄って、左側に本文テキストが流れ込む
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
でもこのままではダメ
• 前ページで「float: right」が適用されたが、
このままではダメ。もう一度見てみよう
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
何かがおかしい
何もかも左に回ってしまいページの外に画像が飛び出している
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
回り込み（float）を解除せよ
• 「float」を指示するだけで終わりではない
• 後に続く要素は、floatを解除しない限りずっ
と空きを見つけて流れ込んでいくのだ…
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
サッカーと同じ、途中でクリアする
• 自陣（自分があるべき位置）を守るならば、
それをクリアせねばならない
• クリアするためには「clear」プロパティを解
除したい位置のブロック要素に指定しよう!
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
clearプロパティの指定
解除したい場所の直後の要素に「クリア：両方（左）」を指定
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
クリア成功
このブロックにclearを指定して、はじめてfloatが解除される
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
floatの考え方
• ブロックレベルの要素は見えない枠に囲まれて
それぞれが積み重なったような状態
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
floatの考え方
• floatによって内包するコンテンツの幅にボック
スの横幅が変わり（特に指定しない限り）、反対側にス
ペースができてそこに要素が入り込もうとする
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
floatの考え方
• 後に続く要素は、自分自身に横幅が指定されて
いない限り、フロートしているブロックの高さ
を超えるまで、どんどん続けて入り込んでいく
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
覚えておきたいこと
• floatで出来たスペースに自分自身が入ること
ができそうだったら、要素は遠慮なく入って
いこうとする（まるで電車の…以下略）
• floatを使ったら、どこかで必ずクリアする
これならいける? Dreamweaverで始めるCSSレイアウト
まずは簡単なCSSレイアウト
floatを使った段組レイアウト
• では、連動書籍をお手元にご用意ください
書籍連動データ（03source & 04source）
これならいける? Dreamweaverで始めるCSSレイアウト
floatを使った段組レイアウト
積み木を組み立てる
• 横幅の合計は100%、または箱の横幅px
• 空いてるスペースはその中の要素からみれば
やっぱり100%、pxなら空いてる横幅px
100%
100%
100%
70%
30%
30%
50%
これならいける? Dreamweaverで始めるCSSレイアウト
50%
floatを使った段組レイアウト
まずはマージンをシカトで
• floatで複雑な段組を作っていくと、計算の苦
手なブラウザのせいではまることもある
• 同時進行でマージンのことは考えず、先に箱
だけ作っちゃうとかしてみるとよいかも
これならいける? Dreamweaverで始めるCSSレイアウト
floatを使った段組レイアウト
許されるのなら100%にしない
• リキッドでもソリッドでもデザイン上許され
るのであれば、あえて100%（横幅ピクセル
ぴったり）にしないで回避するのもあり
これならいける? Dreamweaverで始めるCSSレイアウト
floatを使った段組レイアウト
floatのまとめ
• 基本的には、積み木を組むようなイメージ
• 横幅の合計は100%、または箱の横幅
• マージンのバグを考えたくなければ、まずは
「0」で組み立ててみる
• 「display: inline」は何気に使える
これならいける? Dreamweaverで始めるCSSレイアウト
floatを使った段組レイアウト
positionを使った段組レイアウト
• 続けて、連動書籍をお手元にご用意ください
書籍連動データ（05source）
これならいける? Dreamweaverで始めるCSSレイアウト
positionを使った段組レイアウト
基準となる地点は自分の意志で
• 基準となる地点（0.0）は自分が決める
• 「position:relative」はある種のおまじない
(0.0)
(100.0)
(0.0)
position: relative;
これならいける? Dreamweaverで始めるCSSレイアウト
positionを使った段組レイアウト
positionのまとめ
• HTML中の要素の位置に関係なく配置できる
• 自由にレイアウトするならこっちを選択
• 基準となる地点（0.0）の決定がミソ
• マージンのバグはないので安心
これならいける? Dreamweaverで始めるCSSレイアウト
positionを使った段組レイアウト
おまけ
• CSSレイアウト時にあると便利なこんなもの
これならいける? Dreamweaverで始めるCSSレイアウト
おまけ
書籍とか
• 益子大先生の「Web標準の教科書」
XHTMLのことはもちろん、CSSについても触れられていますので
スタイルシートでのレイアウトデザインのお供に
これならいける? Dreamweaverで始めるCSSレイアウト
おまけ
計算できないブラウザ
• Internet Explorer
• 5.x系もできればあった方がよいでしょう
• QuirksModeに以前のバージョンがあります
（http://www.quirksmode.org）
これならいける? Dreamweaverで始めるCSSレイアウト
おまけ
その他のブラウザ
• Firefox
Web Developer（Add-on）
CSS Viewer（Add-on）
• Opera
これならいける? Dreamweaverで始めるCSSレイアウト
おまけ
いざという時のために
• centricle: css filters (css hacks)
（http://centricle.com/ref/css/filters/）
これならいける? Dreamweaverで始めるCSSレイアウト
おまけ
できたらいいもの
• 英語
これならいける? Dreamweaverで始めるCSSレイアウト
おまけ
宣伝タイム
• 年明け早々に新しい本がでる予定です。
ちなみにWebデザインの本ではありません。
Webを活用して生活を豊かにする本です。
OS Xを中心にすえて書いてますが、
Windowsがメインの方でも大丈夫です。
Firefoxの小ネタとかMacとWinの共存的な
ネタなんかも入れてます。
この機会に鷹野さん、いやスイッチしてみて
はいかがでしょうか？
これならいける? Dreamweaverで始めるCSSレイアウト
宣伝タイム
• 人材探しています。
ちなみに雇用主は私ではありません。
これは安心です（笑）。
主にWebデザイナーさんとかPHPのプログラ
マさんといった職種です
• もし転職を考えている方がいらしたら私まで
これならいける? Dreamweaverで始めるCSSレイアウト
質疑応答
• お手柔らかにお願いいたします（笑）
これならいける? Dreamweaverで始めるCSSレイアウト

Download Report