ホームページのテーブルに影をつける

2011/08/08 2011/11/26

自分で作ったテンプレートに影をつけることができた！

このサイトのことではありませんが、
なんか、１カラムのテンプレートで、いまいち気に入ったのがなくて、
自分で作ろうと思って、
それに影をつけたい、と思ったので、
自分の覚書として、書きます。

あ、専門用語は使いません、
じゃなくて、使えませんので、よろしく。

ホームページ・ビルダーを使って、
ホームページに影って、どうやってるんだろう？
と、いろいろ調べました。

で、スタイルシート、CSSの記述でできることが判明。

ホームページビルダーでCSSって、どうやるんだろう？
そう思ったら、
普通に、リンクとか、マウスが上にあるリンクとか、
CSSで作ったら、ページのソースに、
+++++++++++++++++++++++
＜STYLE type="text/css"＞
＜!--

○○○

--＞
＜/STYLE＞
+++++++++++++++++++++++
※＜　＞　は小文字に直してください

という記述ができていたので、
あ～１ページごとだったら、
ホームページビルダーでも、CSSが書けるんだ！って思ったの。

で、そこに、調べたタグを書く。

+++++++++++++++++++++++
#content {
background: url(画像のアドレス) repeat-y; margin: 0 auto;
width: 920px;
}
+++++++++++++++++++++++

（920pxは、幅なので、テーブルの大きさで変わりますよ）

いろいろ、調べて、上のタグが、Firefoxファイヤーフォックスでは、
きちんと反映した。

で、ＩＥを見てみたところ、
は？
左寄せになってる…(-_-ﾒ)

なんで？　margin: 0 auto;やんかぁ！！

で、また調べて、

+++++++++++++++++++++++
body {
margin: 0px;
padding: 0px;
text-align: center;
}
+++++++++++++++++++++++

これを入れたら、
おおっ！
＼(￣ー＼)(／ー￣)／　できたがな

CSSはそれぞれを、

＜div id="content"＞
＜div id="body"＞

divであててやって、
＜/div＞＜/div＞

と、くくってやること。

FirefoxとＩＥは、ほんとうに見え方が違うときがあります。
Firefoxのほうが、ブラウザをキレイに整頓してくれる感じで、
ちょっとタグ書き間違っても、くずれにくいですね。

ほかにも、使い方全般で、ほとんど私はFirefoxで見ます。
ＩＥの次に人気のブラウザですね。

※私の覚書ページです。
※影画像の設定は、独自で調べたり、画像は独自で作成してください。

アクアス、今現在はシリウス「SIRIUS」もありますが、
やっぱり、使いやすいのは、ホームページ・ビルダーです。

　　　

　

ツイート