cssで背景の色を半透明に

備忘録です。

例えば、白いボックスの背景色を50％の透明にする場合

白　#FFFFFFをrgbaの数字に変更するにはこういうサイトで調べます。

http://www.color-sample.com/colors/639/

白は、255　255　255　なので、半透明の背景色にするには

background-color: rgba(255, 255, 255, 0.5);

（解説）

RGBを、Red　Green　Blueの表記にすると　255　255　255　そして最後が透明の度合いです。

黒い背景のボックスを、20％の透明にする場合

http://www.color-sample.com/colors/000000/

ブラック　#000000は、rgbaの数字にすると　0　0　0になるので

background-color: rgba(0, 0, 0, 0.2);

例えば、こんな色　ネイビーブルーを70％なら

http://www.color-sample.com/colors/481/

Red : 52 Green : 61 Blue : 85

なので、

background-color: rgba(52, 61, 85, 0.7);




ということになります。

ボックスを全体のセンターにしたいんですが・・

今日の解説は、CSSを勉強し始めた方が、最初のほうでまずつまずくパターン。


Q「ブラウザのサイズをかえても、サイト全体は真ん中にしたいとき、どうすれば？」


昔ながらのやり方ではこんな方法がありました。

＜center＞ここにボックス＜/center＞
これはcenterタグを直接書く方法。
でも非推奨タグなので使わない方が良いとされています。

Dreamweaver8には、テキストのプロパティに中央揃えボタンがあるので、それを使うと
＜div align="center"＞ここにボックス＜/div＞
このタグが入ります。手軽なのはこの方法ですね。
ほかにも
＜div style="text-align:center"＞ここにボックス＜/div＞
こんなやり方もありましたが、styleは、今後非推奨になるそうなので、xhtmlで書くなら、こちらもなるべく使わないようにしたほうがいいですね。


というわけで、ここからがxhtmlで書いて、スタイルシートで指定する正しいやり方の話です。

正統派の方法は、センタリングしたいボックスのマージンの左右にautoを指定する方法です。
ただし、この方法は最近のブラウザでは有効ですが、IE6は言うことを聞いてくれません。
そこで、IE6のために、＜body＞にtext-algin:centerを指定して、ボックスにmargin:0 auto;
そして、もう一度、text-algin:leftを指定して、文字を左寄せに戻してあげる
・・・・・という一手間かけたことをしないといけません。



サイト全体をブラウザの真ん中に表示しているホームページは、たいていこの方法を使っているので、覚えておきましょう。

このタグを、DreamweaverCS4を使って書く方法を動画マニュアルで紹介しました。
Dreamweaverの使い方にも慣れていない初心者の方は、よかったら見てください。

＞Dreamweaverでギャラリーを作る　[13]ボックスを中央配置する

日本一わかりやすいpositionの使い方解説

cssのpositionについて、なんとなくわかりにくいんだよな～・・という感じで避けている人のために、がんばって、日本一わかりやすい「positionプロパティの使い方」解説を考えてみました。

css　position

で検索するといろんな解説サイトが出てきますが
positionプロパティとすべての値との関係を列挙してあるページは、やっぱり初心者には「難解！」なわけです。
ということで小難しい解説や基礎知識は別ページを見ていただくとして、
すごーいおおざっぱにざっくりと解説するとこんな感じです。




一番よく使うパターンを図式にしてみました。

要点はこれだけ
１）親ボックスの基準点を決める
基準点を持ってる親ボックスに、position:relative;を入れておく

２）位置を確定したいボックスには、width　height　top　leftの４点セットで
幅、高さ、基準点からの距離を指定する。
このボックスに　position : absolute;　をつける


というわけです。
簡単でしょ？
floatで制御できなくて四苦八苦してる時にこれを使いこなせると結構便利です。

ちゃんと使いこなそうと思ったら、全部の値の意味や指定方法を知らないといけないかもしれませんが、ぶっちゃけ難しいのでpositionプロパティを全部理解しようと思うと、使おうと思う前に挫折します。（ってわたしがそうだったΣ(;・∀・)ヾ

position解説ページ



参考になったよ！って方はwebの森のfacebookページへイイネをしてね(v^ー゜)

＜ｈｒ /＞の線を消してclearfixに使う方法

floatの解除（clearfix）にはいろんな方法がありますが、
hrに指定できれば手軽で、区切りという構造上の意味を持たせることもできるし、便利です。

ところがこのhr、IEではどんな指定をしても表示されてしまうということで悩むことが多いんですが、いろいろ試した結果
これが一番簡単で有効だったので書いておきます。
ツッコミ処あるかもしれませんが・・・・ひとつの方法ということで、気に入った方はつかってください。


hr {
margin:8px 0;
padding:0;
clear:both;　/* floatを解除する */
height:0;　/* ＜hr＞の実線を消す */
border:none;　/* モダンブラウザはここまでで消えます */
}
* html hr{　/* * htmlでIEのみに読ませる */
border-top: 1px solid;　　/* ここが苦肉の策・・・・（汗） */
}
*:first-child+html hr{/* for IE7 */
border-top:1px solid;
}

これをcssの最初の方に書いておけばあとは
クリアしたい場所に＜hr /＞を入れるだけでOKです。

区切り線に構造上の意味を持たせたい場合はhrでやるのが王道と思いますが
デザイン、見た目で線を表現したい場合は、ボックスにボーダーで装飾したほうがスマートですね。

見本に使ったたらの芽オジサンのサイトはこちらです
美味しい山菜が食べたくなったらどうぞ(v^ー゜)

　

CSSで高さ可変の角丸ボックス（DreamweaverでCSS）

ちょっと凝ったデザインにしようとして、すぐにぶつかるのがこの角丸ボックスの問題。
基本的には背景画像を使うことになりますが、問題は中身のテキストが増えても崩れないようにするというのが前提ですよね。
てことで、CSS初心者向けの方法を動画マニュアルで紹介しましたので、こちらでも詳細を書いておきます。

＞CSSを使った角丸ボックスの作り方（前編）
＞CSSを使った角丸ボックスの作り方（後編）


――――――――――――――――――――――――――――――――――
（CSS）
*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:18px;
margin-top: 20px;
margin-left: 40px;
}

ul{
list-style:disc outside;
width:570px;
height:auto;
padding:36px 0 0 20px;
background:url(img/maru_top.gif) no-repeat 0px 0px;
margin: 0px;
}
li{
margin:0 10px;
line-height:2;
padding:0;
}

.ul-after{
background: url(img/maru_bottom.gif) no-repeat 0px -10px;
margin: 0px 0px 0px -20px;
padding: 0px;
height: 20px;
width: 570px;
}
html*.ul-after{
background: url(img/maru_bottom.gif) no-repeat 0px -10px;
margin: 10px 0px 0px -30px;
height: 40px;
}
――――――――――――――――――――――――――――――――――
<ul>
<li>
<a href="#">イベントタイトル</a> ［08年7月29日］
</li>
<div class="ul-after"></div>
</ul>
――――――――――――――――――――――――――――――――――

●<li>から</li>までがループというか、可変する場所です。

●div class="ul-after"のクラス名はなんでもいいです

●html*　というのは、スター7ハックでぐぐって調べてみてください
セレクタの前にこれをつけると、IE5．5～6、MacIE、サファリなどでスタイルが適用され、他のブラウザでは適用されません。
（CSSのルール的には間違った使い方なので自己責任で・・）


もうひとつ、ラストの</li>のうしろにdivを追加しない方法ではul:afterという疑似要素で指定する方法があります（が・・・IEは反映されません。。。）
上記のHTMLから<div class="ul-after">　</div>を削除して、スタイルシートは下記の様に指定します。
marginなどの調整はあくまでも例なので、スタイルに合うように微調整してください。

*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:18px;
margin-top: 20px;
margin-left: 40px;
}

ul{
list-style:disc outside;
width:570px;
height:auto;
padding:36px 0 0 0px;
background:url(img/maru_top.gif) no-repeat 0px 0px;
margin: 0px;
}
li{
margin:0 30px;
line-height:2;
padding:0 0 0 0px;
}

ul:after{
content: url("img/maru_bottom.gif");
display:block;
height:60px;
}

この講座で使った画像はこちらのサイトで使っています
京橋タウンガイド
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

２つのクラスを同時に適用させバリエーションを作る方法

動画講座で、２つのクラスを同時に適用させてバリエーションを作る例をやってみました。

背景画像を使った見出し（DreamweaverでCSS）



例で作ったのは見出し５パターンなので、本来ならh2などでマークアップすると思いますが
クラスを２つ適用させてバリエーションを作ってみる見本ということで
div.midasiというクラスにしてみました。
見出しとしてマークアップする場合は
h2 class="green"
になるわけです。
同じパターンのボックスで、一部の要素にバリエーションをつけたい場合
div class"box2 green"
div class"box2 pink"
div class"box2 yellow"
みたいにして、複数のクラスを同時に指定することができます。


ソースはこちら
――――――――――――――――――――――――――――――――――
（CSS）

body{margin:40px;}
.midasi{
width:400px;
padding:2px;
margin:20px 0px;
font-size:16px;
font-weight:bold;
text-align:center;
}
.green{background:url(img2/green.gif) repeat-x;}
.pink{background:url(img2/pink.gif) repeat-x;}
.blue{background:url(img2/blue.gif) repeat-x;}
.orange{background:url(img2/orange.gif) repeat-x;}
.purple{background:url(img2/purple.gif) repeat-x;}

――――――――――――――――――――――――――――――――――
（HTML）

<div class="midasi green">イタリアン</div>
<div class="midasi pink">和食</div>
<div class="midasi blue">中華</div>
<div class="midasi orange">焼肉・韓国料理</div>
<div class="midasi purple">居酒屋・ダイニング</div>
――――――――――――――――――――――――――――――――――
背景で使用した画像の一つはこちら

これを変更して５色のバリエーションを作ってみました。

作例はこちら
京橋タウンガイド
こちらの見出しでこの画像を使っています。見てみてください。

このサイトはxoopsで制作しています。
URLの静的生成と正しいマークアップでseo対策済み。
xoopsサイトの型にはまったデザインを一新して、オールCSSコーディング。
今風のテイストに変えてしまってますので、そのへんも見てくれると嬉しいなぁ～。。。。
オールCSSにしてあることで、携帯表示にも対応できるというわけです。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

dlを使っての見た目「表組」の作り方（DreamweaverでCSS）

動画マニュアルで、dlタグを使った表組みの作り方を紹介しました。

＞dlを使っての見た目「表組」の作り方




表は表なので、テーブルタグを使っても全然かまわない訳ですが
dlを使うことで、スタイルシートでのデザインがやりやすくなることもあるし
ソースがシンプルになるので、プログラムを組み込むときに、
どこからどこまでループさせる・・簡単に組めるようになるかと思います。

dlというのは、本来定義リストのタグで、たとえば辞書のように
【ほ乳類】タヌキ／キツネ／クマ／ネズミなど
【鳥類】フクロウ／ワシ／タカ／カモ／ヤマセミ／カワセミなど
【昆虫】トンボ／ハチ／チョウ／カブトムシなど
こんなふうに見出しと説明との繰り返しになる文章に使われます。

同じく、項目名と中身との繰り返しになる表組みや、
役柄とセリフとの繰り返しになるシナリオのような形式にも使えますよね。

ということで、動画で紹介したページのソースを紹介します。

――――――――――――――――――――――――――――――――――
（スタイル）
*{
margin:0;
padding:0;
}
body {
color:#333333;
margin-top: 40px;
margin-left: 40px;
font-size: 13px;
line-height: 24px;
}
dl{
background:#E3E1D5 url(img/green.gif) repeat-y 0 0;
width:480px;
border-top: 1px solid #666666;
}

dt {
text-indent:20px;
width:120px;
}

dd {
border-bottom:1px solid #666666;
margin:-24px 0px 0px 0px;
padding-left:140px;
width:340px;
}
――――――――――――――――――――――――――――――――――
（HTML）
<dl id="recruit">
<dt>
仕事内容
</dt>
<dd>
（１）翻訳業務（２）通訳業務（３）外国語教育
</dd>
<dt>
勤務時間
</dt>
<dd>
業務内容による
</dd>
</dl>
――――――――――――――――――――――――――――――――――
動画の中でも紹介しましたが、いくつかポイントがあるので紹介します

●デフォルトのスタイルをリセットする

dlやdt、ddにはそれぞれデフォルトのマージンが入ってしまってるのでスタイルの最初でリセットしています
*{margin:0;padding:0;}

●ネガティブマージンを使用

ddの方のマージントップを-24pxにして（行間と同じサイズ）１行分上にあげてます。
マージンをマイナスするのをネガティブマージンと言うらしいですね。

●dtもdlも幅指定

dlやdt、ddは、ブロック要素なので幅を指定できます。
というか、幅指定ちゃんとしないときれいな表にならなかったので入れてあります。

今回の見本サイトはこちら
京橋タウンガイド

このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。

xoopsを使ったポータルサイトの制作も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

背景画像を使ったノート罫線の作り方（DreamweaverでCSS）

スタイルシートを使ったwebデザインのテクニック、今回は
背景に点線の画像を敷いて、ノート風にしてみます。

＞動画マニュアルはこちら　背景画像を使ったノート罫線の作り方

おすすめメニューやおしながき、メモ帳など、
短いテキストでタテに長くなりがちのテキストの場合、横に罫線が入ることで読みやすくなります。
コツとしては、背景画像の高さと、テキストのline-heightの高さを揃えることと、
１行目の上にも罫線が来るように、背景画像のリピート位置を、タテ方向にマイナスで指定すること。
ボックスのmargin-topに同じ高さ（この場合24px）を入れて、揃うようにしています。

使った背景画像はこちら





ソースはこちら
――――――――――――――――――――――――――――――――――
body {
background: #CCD6D9 center;
margin: 10px 0px;
padding: 0px;
}
.box{
padding: 0px;
width: 500px;
border: 2px solid #6699FF;
margin-right: auto;
margin-left: auto;
background: #FFFFFF;
}
.note {
font-size:12px;
background: url(img/ten.gif) repeat 0px -23px;
margin: 20px;
padding: 0px 0px 1px;
}
.note p{
line-height:24px;
margin-top:24px;
}
――――――――――――――――――――――――――――――――――
<div class="box">
<div class="note">
<p> ●タイ伝統古式マッサージ</p>
<p>65分コース　5,000円<br>
95分コース　7,000円<br>
125分コース　9,000円</p>
<p>●タイ式リフレクソロジー</p>
<p>35分コース　3,500円<br>
65分コース　6,000円</p>
<p>●アロマオイルトリートメント</p>
<p>65分コース　7,000円<br>
95分コース　10,000円<br>
125分コース　13,000円</p>
</div>
</div>
――――――――――――――――――――――――――――――――――
できたページはこちら


実際に稼働しているサイトはこちら
京橋タウンガイド
xoopsで制作しました。
デザイン：webの森

背景画像を使ったボタンの作り方（DreamweaverでCSS）

動画マニュアルで、スタイルシートを使ったwebデザインの定番ともいえるテクニックをいくつか紹介しましたので、こちらでも解説します。

スタイルシート　定番テクニック集 >> （1）背景画像を使ったボタンの作り方

スタイルシートなので、もちろん、エディタだけを使って作ってもokですが、この講座はDreamweaverの講座なので、ドリームウィーバーのエディタ機能を使って効率よくやってみましょう。

１回目は、画像を使ったボタン。マウスオーバーで色が変わります。
CSSでの背景画像を使って、マウスオーバー時には、背景画像の位置指定を変えて、色が変わるような動きをつけています。
ボタンのテキストは、text-indentで大きな数字を入れて飛ばして、一見非表示にしています。
――――――――――――――――――――――――――――――――――

#button {
text-indent:-2000px;
}

#button a,#button a:link,#button a:visited{
display:block;
height:23px;
width:102px;
background:url(img/button.gif) no-repeat 0px 0px;
}
#button a:active,#button a:hover{
background:url(img/button.gif) no-repeat 0px -25px;
}

――――――――――――――――――――――――――――――――――

<div id="button"><a href="#">掲示板</a></div>
――――――――――――――――――――――――――――――――――

動画の最後で、画像をどんなふうに作ってあるかも紹介してますので、参考にしてみてくださいね。

こちらが使用した画像です



最近作った大阪のポータルサイトです。
京橋タウンガイド
グローバルナビゲーションの上にある３つのボタンは、今回の動画で紹介した方法で作りました。

＊＊＊＊＊

このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

スタイルが効かない・・何がいけない・？

先日、CSS初心者の友人がメッセで泣いていたので、
下記のサイトを紹介してあげたところ、無事解決した・・とのことでとても喜ばれました。

初心者が陥りそうなCSSの７つの間違い

スタイルが効かない理由はいくつかあって上記のブログに書いてある項目をチェックするだけでほとんど解決するので、慌てずにひとつひとつ確かめていくといいかもしれません。


□外部CSSファイルを読み込み忘れた。（CSSファイルの読み込みパスが違う）

□IDとclassの指定を間違えた。

□子孫セレクタの構造が間違ってた。

□途中のプロパティのセミコロンを付け忘れてた。

□別のところで優先度の高いセレクタで書いているのを忘れていた

↑これが一番やっかいですね。サイトが大きくなってきたり、しばらく時間おいてから
更新したりするときに、以前どんな手順で構築していったか忘れてしまって、ありがちです。

ここから引用-------------------------------------------

●通常セレクタ(bodyとか) 1点
●クラスセレクタ(.contentとか) 1点
●IDセレクタ(#containerとか) 100点
●直接指定(style="color:#fff"とか) 1000点

（例）
#container #headLine .contents { ... }

という指定があったとすると、IDセレクタの優先度は100なので、

#container(100) #headerLine(100) .contents(1)

となります。
優先度は単純に足し算なので、この場合は優先度は「201」となります。

なので、#articles .contents { ... }と書いたとしても、当然優先度の高いスタイルが適用されるのでいくら更新してもスタイルは変更されません。


-------------------------------------------ここまで

というわけで、上記のブログ便利なので。
他にとーーーってもありがちな「CSS勉強する上でぶつかる壁」なポイントを押さえてくれてるので
初心者さんは押さえておくと良いかと・・・・




参考になったよ！って方はwebの森のfacebookページへイイネをしてね(v^ー゜)

XHTLM＋CSSサイトはSEO対策に有利か？

「XHTM＋CSS、いわゆるweb標準で作られたサイトは、SEO対策に有効である」
スタイルシートでのサイトの構築方法が紹介されたとき、こんな説が一般的でした。
つまり
「検索エンジンクローラーがやってきて、情報を収集するときに、クローラーが読みやすいサイト、
ソースが簡潔でクローラーにも理解でき、重要事項が前の方に書いてある」などの理由から、従来のテーブルデザインより、テーブルを使わないweb標準サイトの方が検索に有利だということです。

そこでさっそくCSSの勉強をして、今までのサイトを出来る範囲でリニューアルしました。

と・こ・ろ・が・・・・・・・・・・
苦労してリニューアルしたはいいけど、ほとんどアクセス数にも、ましてや成約率に変化なし・・・(-_-:)
焦りましたよ〜〜〜。「CSSサイトって検索に有利っていうけど全然話がちがう〜〜」なんて・・・・
それもそのはず、基本の基本を知らなかったわけで、自分の勉強不足だったんですけどね。。。

というわけで壁にぶつかった時に、大阪のとあるSEOセミナーを受講しました。

大阪　SEOセミナーの山下先生です。
この先生の教えてくれる方法は、難しい概念や専門用語は登場しません。
自分のサイトの身の丈にあったやり方で、初心者向けに、サイトオーナーが自分でできる方法を教えてくれます。

現に山下先生に教わった方法で、サイトを最適化したところ、着実に順位が安定して上位に表示されるようになりました。
また、この方法は、Yahoo!アルゴリズムの変動に比較的強いという特徴があって、Yahoo!順位が落ちたとたくさんのサイトオーナーさんが泣いているような激動の時期でも、ほぼ順位に変動がありません。
実際、20を超えるサイトで試していて、２年ほど経過を観測してますが、今でも実感しています。

もし、
「自社でやってる余裕がないけどSEO対策をどこかに外注したい。だけど魑魅魍魎の世界みたいだし、どこに頼めば良いかわからない」という方は、
山下先生のSEOセミナーを受講してみるといいと思います。

サイト作成は自分でできないが、専任のデザイナーに任せているという方は、担当デザイナーさんがうまくリニューアルできるように個別指導をしてくれます。（巷の有料のSEO対策サービスからしたら破格の安さなので不思議なんですが、この先生の対策の基本は「自分でコツコツ改良しましょう」なので、安いのです）でも基本を教えてもらってコツコツと改良していくとほんとに地道に効果が出てくるのでびっくりです。

業者に依頼したり広告を増やすのもひとつの方法ですが、その前にやっておかなければいけない基本の基本、これを知っているだけで財産になりますね。
あくまで、検索エンジン（クローラー）を欺く裏ワザではなく、公正で地道なSEO対策を。
クローラーのためのみならず読者にもわかりやすい優しいホームページを作ること。そんなSEO対策を教えてくれています。

さてはて・・・わたしのサイトでも、SEO診断してますので、お近くの方は（近くじゃなくてもできますが）気軽にお問い合わせください。＞SEO対策リニューアル／SEO診断／SEO対策個別指導

「いきなりだけど超特急でコーディングお願い！」

最近、とある女性ディレクターさんと知り合いになれまして・・「いきなりだけど超特急でコーディングお願い！」と頼まれたので引き受けました。
特急でゴメンゴメンとしきりに恐縮されたんだけど、時間が長引くような仕事ほど赤字になりやすいので、特急は返ってありがたかったりします。（もちろん他の仕事と重ならなければ。。）

てことで、木・金でコーディングして土曜日にはプログラマーに引き渡したいとの予定だったんだけど、木曜日待てど暮らせどデザインが来ない・・
仕方ないので昼寝して万全の体制を整えて（昔は連続徹夜くらい平気だったのに～。。。）やっとこさデザインが届いたのが木曜夜の11時くらい。
スカイプで打ち合わせして、０時頃から朝まで作業して、間に家事やら仮眠やらも挟んだけど、結局金曜深夜には全14ページ完了しました。＼(~o~)／お疲れさま～。。


そのディレクターさんと担当のデザイナーさんは、スタイルシートでの構築は初めてだったということで、「ぶっ飛びました～！！もう土曜は絶対無理って思っていたんだけど、こんな早いコーダーさん初めてみた！CSSで作るのってテーブルデザインでやる方法よりホントに早くできるんだねぇ」といたく感動してくれました。

「こんなに早くできて、しかもソースがめちゃきれいだし、プログラマーさんもマージしやすいって喜んでたよ。やっぱりスタイルシートの方法覚えたい」と言って、講習会に通うことにしたそうです。
なーんか普通に特急の仕事しただけですが、やたら感激して貰えて恐縮というか、いいお仕事が一緒にできてこちらほうが嬉しかったデス。。

担当のデザイナーさんとも初対面だったんだけど、「動画マニュアルのモモンガさんとお仕事ができるなんて～！モモンガさんを目指したいです！」なんて言ってくれましたが。
若いデザイナーさんですが、とってもきれいなボタンやらアイコンやら超スピードで作ってくれて、ファイヤーワークスのテクニックは私の方が勉強になったくらい。

ディレクターさんは、ものすごいパワーがあっていつもあちこち走り回っては、次々に新しいアイデアが浮かんでしまって「モモンガさん、今度こんなことやろう！」なんて携帯からメールしてくるような面白い人。
こういう元気が貰えるような人との出会いがあるとなんだか嬉しくナリマス。。。。


というわけで、楽しい仕事できたし、いい人たちと知り合えてほんとにヨカッタ。。信州の庭にも春が来たしなぁ・・・と、風景も気持ちもあったかくなった土曜の一日でした。

フロートさせたら崩れた・゜゜(>_<)゜゜・。

スタイルシートでのデザインを勉強しはじめたとたん、「フロートさせたら背景が出ないor崩れた！」という壁にぶつかってパニックになってる方は多いんじゃないでしょうか。
わたしもかつて・・・。背景に画像をしいたのに
下まで表示されなくて、いろんなブラウザで表示しながら一日つぶしてしまったことが・・・

これは、このフロートの後のクリア（解除）ができてないために、フロートのボックスが乗っかっている元のボックスの中に何も入ってない状態になってしまうことから（表現に語弊があるかもしれないけど、なるべく初心者さんにわかりやすい言い方を探しながら書いてます）
元のボックスに指定した背景画像や色などが表示できなかったり、次のブロックが入り込んでしまい崩れたりします。

では、「フロートの後の解除」ってどうやればいいの？という話ですが、
クリアの方法はいろんなやり方があるらしく（ハックを使う、クリアフィックス、hrタグを入れてそこにスタイル指定・・・など・・検索するといろいろ出てきます）
わたしは一番簡単な、
フロートの外側のブロックの閉じタグの前に、クリアするブロックを入れる、というのをよく使っています。

余分なdivを増やしたくない人は他の方法をとったほうが良いと思いますが、初心者さんにはかなり簡単なのでおすすめです。

このやり方は、動画マニュアル　Dreamweaverでのスタイルシートの使い方　フロートの後をクリアする方法に書いてますので、
興味のある人は見てみてください。



この動画では、スニペットを使って便利に使い回す・・・という方法を紹介しています。
わたしはスニペットを知らない頃はなんでもかんでも単語登録してて、
くりあ＠　で変換すると＜div style="clear: both;"＞＜/div＞
がでることになってます (ﾉ_<｡)

ドリームウィーバーを便利なエディタとして使う方法

Dreamweaverでのスタイルシートの使い方というブログを更新していますが、その中のネタより・・・
ソースコードでCSSデザイン（4）スニペットを使ってコードを入力について、もうちょっと詳しく解説してみます。




この動画では、よくつかうスタイルを、スニペットに登録しておいて、コードに貼り付けしてみる方法を紹介しています。
登録したスタイルは、写真の右寄せスタイル。
こうしていろんな場面で使い回すようなよく出現するスタイルを登録しておくと便利です。

スニペットは元からいろんなものが登録されてるので、利用することもできます。
（私は自分で登録したもの意外使ったことないんですが・・）
よく使うJavaScriptや、メタタグ、なども登録しておくと便利です。

＜写真を右寄せ簡単CSS＞
.photoR{
display:block;
float:right;
margin-left:10px;
}
これをスタイルに追加してから、写真に
class="photoR"
を適用させれば、簡単に右回り込み写真になります。
タグでいうと
＜img src="img/kagami_top.jpg" width="120" height="152" class="photoR" /＞

もしくは、＜p＞か＜div＞に class="photoR"を適用してもいいですね。
＜div class="photoR"＞＜img src="img/kagami_top.jpg" width="120" height="152" /＞＜/div＞

imgは、インライン要素なので、フロート指定は本来できないんですが、
display:block;を入れることで、ブロック要素にできるので、フロートさせることもできるし、マージンなどを指定することもできます。

同じ要領で、
.photoL（左に回り込みさせたい場合）
.phtoC（中央揃えにしたい場合）
こんなのを作ってスニペットに登録させておくと、作業中にこういうレイアウトが出現したときに手間をかけずにすぐにスタイルを適用させることができますね。

※ブログの中でタグが有効になっちゃうんで、＜＞は全角で記述してあります