tak@北海道のブログ一覧

18時04.3分　月の出
18時52.0分　皆既食の始め
19時37.4分　食の最大
20時22.7分　皆既食の終わり
21時23.8分　部分食の終わり
22時22.5分　半影食の終わり

では、枠線を引くborderについて詳細な説明をしてみます。
まず、以下はスタイルシートでブルーを選択時のタブメニューを表しています。
これに、前回書いたものと同じ
border: 1px solid #000000;
を入れるとこのようになります。
これは、前回に軽く説明したとおり
1pxの線の太さで直線を黒で描画させています。
これはもちろん自由に太さや色を変えられます。
border: 5px solid #0000FF;
では、solidの部分はどうなのかと言いますと、もちろん変えることができます。
border: 5px solid #0000FF; border: 5px double #0000FF;

border: 5px groove #FFFFFF; border: 5px ridge #FFFFFF;

border: 5px inset #FFFFFF; border: 5px outset #FFFFFF;

border: 5px dashed #0000FF; border: 5px dotted #0000FF;

また、border は、下のように4辺を別々に指定することも出来ます。
上辺　border-top
右辺　border-right
下辺　border-bottom
左辺　border-left

border-left:2px solid #FF0000;
border-top:4px double #00FF00;
border-right:1px dashed #0000FF;
border-bottom:10px dotted #FF00FF;
ブログ

これらを応用することにより、様々な表現が可能になります。

border-bottom:3px dashed #0000FF;
ブログ
下線を引いているような感じに。

border-left:2px solid #ECF4F1;
border-top:2px solid #ECF4F1;
border-right:2px solid #8C94F1;
border-bottom:2px solid #8C94F1;
ブログ
上と左に同系色の明るい色を、右と下に同系色の暗い色を配置して
凸ボタンのように見せています。

ちょっと見づらいのでもう少し濃い色で。
四辺とも少しづつ色を変えてみています。
ブログ

色の配置を逆にすると、凹ボタンのように見えます。
ブログ

他にも、右と下にだけ濃い色を配置して陰のように見せたり、
工夫次第で好きなようにデザインできます。



さてさて、次は何にしようかな。
何かリクエストがあればどうぞ(´∀`)

今日はタブメニュー

ブログ

愛車紹介

おすすめスポット

My掲示板

これのいじり方などを説明してみます。

このメニューの状態ですが、大きく分けると2種類に分けることが出来ます。
選択されているか(Active状態)
選択されていないか(Inactive状態)
現状ですと、ブログがActive状態ですね。

これらを、スタイルシートではどこをいじるのかと言いますと
TabActive と TabInactive という項目です。
検索などで探してみてください。
「ブルー」を読み込んでいる場合の初期値は以下の通りです。

.TabActive
{
　　　　　background-color: #FF639A;
　　　　　text-align: center;
　　　　　color: #FFFFFF;
　　　　　font-size: 12px;
　　　　　font-weight: bold;

}
.TabInactive
{
　　　　　background-color: #DCE4F1;
　　　　　text-align: center;
　　　　　font-size: 12px;
　　　　　color: #FFFFFF;
}

background-color は背景色の指定
text-align は文字列の配置、center は中央寄せを指定
font-size は文字の大きさを指定
color は文字色を指定
font-weight は文字の装飾、bold は太字を指定

これらをいじるだけで見た目はかなり変わります。
但し、ここで文字色の指定がされていますが、これ実は無意味だったりします。
リンク文字列は別の指定が必要なのです。

選択されている
a.LinkTabActive
a.LinkTabActive:link
a.LinkTabActive:visited
a.LinkTabActive:active
a.LinkTabActive:hover

選択されていない
a.LinkTabInactive
a.LinkTabInactive:link
a.LinkTabInactive:visited
a.LinkTabInactive:active
a.LinkTabInactive:hover

これらの項目を探してcolorを変更してください。ちなみに、
link まだ見に行ったことが無いページ
visited もう見たページ
active クリック時
hover マウスカーソルがテキストに乗っている時
となっています。

オマケ
背景に画像を入れたい場合は、background-colorの代わりに
background-image: url('ここに画像のURL');
を入れます。

また、
border: 1px solid #000000;
を入れると、1pxの太さ、solid(直線)、黒で枠線が引かれます。
お好みで太さや色を変えてみてください。
border については次回でもう少し詳しく説明します。

ではでは、お好みのメニューに仕上げてみてください(´∀`)