style-free | Webデザイナーのヒヨコ

子供たちが夏休みなので、なんだか私も夏休み気分♪
・・・と、浮かれてばかりもいられないので
自由課題を自分に課して、CSSを使ってサイトを作ってみました。
初CSSだぁーー！(*^^*ゞ
勉強の為、ハンドコーディングでチャレンジ。

子供たちが所属するボーイスカウトのHPを作ってみました。
まだ製作途中ですのでリンク切れ等、お見苦しい点ご容赦下さい。
http://www.k4.dion.ne.jp/~ukkyi

コレをご覧になった方で、気づいたこと
感じたことがあればどうぞコメントお願いします。m(__)m

あっちもこっちも中途半端でいかんなぁ～とは思うのですが
なにせ飽き性なのもで、今日は『style-free』トップページのCSSをチョコっと。
やっぱり、セレクタの使い方がいまいち分からないまま・・・。
IDとCLASSの使い分けがねぇ～(ｰｰ;)
いいのかなーこれで。
9月からWebのスクールも再開するし、先生に聞いてみようっと。

とりあえず、分かるところからスタート。

HTML検証サービスでチェックもしてみました。
日本語でチェックするならこちら

CSS検証サービスも。

時々チェックしながら、進めていきました。

ひとつ分からないことが。
コピーライトはaddress要素で入れたので、文字スタイルがイタリックになってしまいました。
CSSで文字スタイルを解除したいんですが、どこになんて入れたら良いのでしょうか？
先生、教えてくださいマセ。

通学しているWEBデザインの学校のCSSセミナーに参加してきました。
初級編だったのですが、かじりたての私にはものすごく勉強になりました。
今までは、ブラウザの見え方から「こうかな？ああかな？」ってかんじで
適当（？）に入れては直しを繰り返していましたが、
構造やルールが少しわかって「なるほど！」と思えたのは少し進歩かな？
中央寄せの『margin:0 auto』はむっちゃ使えそう♪
他にも色々な事が学べて、無料はお得！！
またやって欲しいなぁ・・・

昨日のCSSセミナーで習った事を復習する為に
divセレクタの中央寄せをやってみたけど、中央に寄らない！
Why?

DWのデザインビューでは中央寄せになってるのに…
どこかが間違ってるだろうけど、わかんない(?_?)
コンテンツメニューもうまく表示できないし…

それに、IE以外のブラウザでプレビューしてみると
レイアウト崩れまくり～～～！(ｰｰ;)
こりゃ、アカン。
一からやり直しか？(T_T)

そそ、ボーイスカウトのHPもデザイン変更予定。
誰でも更新できるようにブログタイプにしようかな。

style-freeのトップページ
かなりの修正を経て、ようやく形になってきたのですが、IEが最悪！

ulリストを画像に置き換えてメニューを作っているのですが
IEでのみ画像が表示されなくて困っています。
Gecko系・Operaは表示できてるのに…

CSSの書き方がマズイのだと思うのですが、自分ではわからないのでご指摘頂けませんでしょうか？

URLは
http://style-free.biz

HTMLは以下の通りです。

--------------------------------------------------------

CSSは以下の通りです。

/* メニュー */
#menu ul {
position: absolute;
margin-top: 0px;
padding: 0;
list-style: none;
}
#menu li {
margin:: 0;
padding: 0;
display: block;
text-indent: -9999px;
}
#menu li a {
text-decoration: none; /* ■　Firefoxなどで表示されないようにする */
display: block;
height: 40px;
width: 81px;
}
#menu li#menu_01 {
width: 81px;
background: url(images/menu_01.jpg) no-repeat;
margin-top: -33px;
margin-left: 347px;
}
#menu li#menu_01 a:hover{
background: url(images/menu_01_on.jpg) no-repeat;
}
#menu li#menu_02 {
width: 81px;
background: url(images/menu_02.jpg) no-repeat;
margin-top: -40px;
margin-left: 428px;
}
#menu li#menu_02 a:hover{
background: url(images/menu_02_on.jpg) no-repeat;
}
#menu li#menu_03 {
width: 81px;
background: url(images/menu_03.jpg) no-repeat;
margin-top: -40px;
margin-left: 509px;
}
#menu li#menu_03 a:hover{
background: url(images/menu_03_on.jpg) no-repeat;
}
#menu li#menu_04{
width: 81px;
background: url(images/menu_04.jpg) no-repeat;
margin-top: -40px;
margin-left: 590px;
}
#menu li#menu_04 a:hover{
background: url(images/menu_04_on.jpg) no-repeat;
}
#menu li#menu_05 {
width: 82px;
background: url(images/menu_05.jpg) no-repeat;
margin-top: -40px;
margin-left: 671px;
}
#menu li#menu_05 a:hover{
background: url(images/menu_05_on.jpg) no-repeat;
}
--------------------------------------------------------

バリ島から帰ってきて、やっと現実に戻ってきました。
仕事＆勉強モードになるまで時間が掛かってしまったなぁ～
バリ島ののんびりムードが心地良かったんだもん♪

さて、のんびりばっかりもしていられないので、お勉強開始！

見た目にはあんまり変わらないですが、style-freeを少し修正しました。

CSSでロールオーバーのメニューを作成するのが一般的になりましたね。
私も良く使います。

初めは全て別々の画像を切り出していましたが、
最近は1枚画像で表示位置を移動させてロールオーバー効果を出す方法がお気に入りです。

最近一番のお気に入り手法は、1枚画像でロールオーバーするだけでなく
動きまでつけられちゃうこの方法！
javascriptは使っていません。