FC2ブログ

雑記的な...

いろいろと勉強途中のドシロウトが書く雑記

スポンサー広告

スポンサーサイト

更新日時:--/--/-- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Web製作

フロートをかけた要素に幅を指定しないとどうなるか

更新日時:2008/01/29 19:01

さて、今回はCSSによって画像に影を付けるということをしてみました。
下のような感じになります。

影付けのテスト用

考え方自体は簡単なのですが、初めて知ったことがありました。

まず、小粋空間さんのエントリを参考にしてやってみました。

考え方としては、画像を数ピクセルずらして、親要素の背景に設定してある影画像をちらっっと見せる感じです。影の付け方の詳しい説明は本題ではありませんので、簡単な図のみにします。

shadow_exp.gif

そして、初めて知ったこととはフロートをかけた要素に幅を指定しないとその要素の内容に合わせて幅が変わるということです。

フロートを使った数カラムのサイトを作るときはその現象を目撃していてもおかしくないはずなのに・・・。でもフロートをかけたら幅の指定は必須ですしね。

普通ブロック要素は、縦の長さを指定しない場合、長さは要素の内容に合わせて自動で変わってくれます。しかし幅の場合は指定しないと常に100%です。中身になんか合わせてくれません。でもフロートをかけて幅を指定しなければ、幅を中身に合わせてくれるという・・・。

このブログでは本当ならフロートはかけたくありませんでした。フロートすると画像の横に文字が回りこんでしまうので。p要素にclearを指定して対処しています。

もし幅を指定せず、フロートもかけないとどうなるでしょうか?。幅は指定しない限り100%です。

影付けのテスト用

幅を指定していないので当然こうなりますね。しかし、フロートをかければ幅を自動的に画像に合わせてくれるということです。フロートをかけたくない場合は画像の親要素に画像と同じ幅を指定することになりますが、毎回毎回タグにsytle="width:300px"やら打ち込むのが面倒なので私はフロートをかけました。

あとインライン要素にフロートをかけるとブロック化するんですね。これも初めて知りました。このブログの場合spanをフロートしてブロック化させてます。

まとめ
フロートをかけた要素の幅は要素の内容によって可変になる
(幅を指定しなかった場合)

もしかして当たり前のことを書いているのかもしれません。もしくは何か根本的に間違ったことを書いているかもしれません。これが素人の恐いところ(泣

スポンサーサイト

コメント

コメント投稿後、編集や削除する可能性がある場合にはpassが必要になりますので、passを入力してください。また、ただ宣伝するだけのコメントと判断した場合は削除しますのでご了承ください。

コメントの投稿
管理者にだけ表示を許可する

トラックバックURL

トラックバック一覧

検索


WWW を検索
このブログを検索

Amazon


紹介

Firefoxのアドオン「Stylish」で使えるCSS作ってます。
こちら
stylishとは?

Mozilla Firefox ブラウザ無料ダウンロード

カレンダー

11│2018/12│01
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

Copyright © 2008 雑記的な... All Rights Reserved

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。