- Webの基礎
- HTML,CSSって何？
- Javascriptって何？
- ローマ字以外の文字が打てない
- ショートカットを覚えよう
- ファイルとフォルダの違い
- 圧縮と解凍
- 絶対パスと相対パス
- 使ってはいけない文字
- ホームページを作るときのコンセプト
- ナビゲーション
- ホームページを作るために必要なものは？
- HTML
- htmlとは
- おまじないを書こう
- headとbodyの違い
- マークアップ
- cssとjavascriptのリンクの仕方
- 「div」「p」「span」の違い
- 「p」以外のクラス名設定
- divのきり方
- divの多用はダメ
- ソースの綺麗な書き方
- テーブルを使ってみよう
- テーブルの多用は駄目
- 終了タグがないHTMLの書き方
- HTMLを書く際にしてはいけないこと
- CSS
- cssとは
- cssのメリット
- bodyとpageの違い
- cssを指定する場所
- pisitionの使い方
- 文字の後ろに背景を設定しよう
- リンクを触ったときに色を変えたい
- hoverの可愛い使い方
- floatを使いこなそう
- ボーダーの種類と使い方
- tableを可愛く装飾しよう
文字の後ろに背景を設定しよう
文字に背景を設定しよう。
これは結構使うよ。グローバルナビとかね。
汚いな。 おっと失礼
これは一枚の画像しか使ってません。
<div class="clearfix">
<ul class="nav">
<li>TOP</li>
<li>ABOUT</li>
<li>MAIL</li>
</ul>
</div>
#contentright .nav {
width:320px;
line-height:30px;
}
#contentright .nav li {
background-image:url(../common/images/nabi10.gif);
float:left;
width:100px;
text-align:center;
border:solid 1px #333;
margin-right:10px;
}
こっとはめっちゃ簡単です。
しかも、同じ大きさ・幅の画像があればすぐに背景を変えることが出来ます。
#contentright .nav li {
background-image:url(../common/images/nabi11.gif);
float:left;
width:100px;
text-align:center;
border:solid 1px #333;
margin-right:10px;
}
こういうのを応用したら↓みたいなのが出来ます
- TOP
- ABOUT
- PHOTO
- DIARY
- LINK
結構いいでしょ。
画像に直接文字を書いてもいいけど、それだとSEO的に悪かった気がします。
<div class="clearfix">
<ul class="rist3">
<li id="name1">TOP</li>
<li id="name2">ABOUT</li>
<li id="name3">PHOTO</li>
<li id="name4">DIARY</li>
<li id="name5">LINK</li>
<li id="name6">MAIL</li>
</ul>
</div>
#contentright .rist3 {
width:600px;
}
#contentright .rist3 li {
width:100px;
float:left;
line-height:50px;
text-align:center;
}
#contentright .rist3 #name1 {
background-image:url('../common/images/nabi1.jpg');
}
#contentright .rist3 #name1:hover {
background-image:url('../common/images/nabi1.jpg');
background-position:0px -50px;
}
#contentright .rist3 #name2 {
background-image:url('../common/images/nabi2.jpg');
}
#contentright .rist3 #name2:hover {
background-image:url('../common/images/nabi2.jpg');
background-position:0px -50px;
}
#contentright .rist3 #name3 {
background-image:url('../common/images/nabi3.jpg');
}
#contentright .rist3 #name3:hover {
background-image:url('../common/images/nabi3.jpg');
background-position:0px -50px;
}
#contentright .rist3 #name4 {
background-image:url('../common/images/nabi4.jpg');
}
#contentright .rist3 #name4:hover {
background-image:url('../common/images/nabi4.jpg');
background-position:0px -50px;
}
#contentright .rist3 #name5 {
background-image:url('../common/images/nabi5.jpg');
}
#contentright .rist3 #name5:hover {
background-image:url('../common/images/nabi5.jpg');
background-position:0px -50px;
}
#contentright .rist3 #name6 {
background-image:url('../common/images/nabi6.jpg');
}
#contentright .rist3 #name6:hover {
background-image:url('../common/images/nabi6.jpg');
background-position:0px -50px;
}
長い…。
上のナビはこのHTMLとCSSで構成されてます。
hoverの使い方はリンクを触ったときに色を変えたいで説明するよ。
またナビのみになってしまいましたが、これで終わります。