ブログ練習帳

CSSでナビボタンを作る　背景画像の切り替えその２

CSSでコントロールしてナビボタンを作るというのは、よくあります。でも、そんな基本だからこそ、見習にはあんちょこが必要です。ということで、ビボー録です。（アンドーナッツと、チョココルネ買ってこよ！）

ということで、パターン２は、前回の変形パターンです。おそらく。

今回使う、ボタンは背景で指定して、hoverのときに画像が切り替わります。hoverのときとそれ以外のときで、別々の画像でもいいのですが、別個のファイルにすると、ボタンにマウスが乗っかってhoverになったとき、初めて読み込まれるので、一瞬画像が消えるというか、ちらつくことがあります。
ぴー、ががー、ずぴずぴずび、とFaxモデムで通信していたときのように、読み込むまでに紅茶が入れられるってことはないでしょうけど、ちらつくのって、ナウくないです。

なので、プリロード（前読み込み）の意味で、マウスオーバーするまえにマウスオーバー用の画像を読み込ませるため、一枚の画像として準備です。

縦に並べた

(X)HTML

<ul>

<li><a href="#"><span>ナビボタン</span></a></li>

<li><a href="#"><span>ナビボタン</span></a></li>

<li><a href="#"><span>ナビボタン</span></a></li>

<li><a href="#"><span>ナビボタン</span></a></li>

</ul>

CSS

*{
	margin:0;
	padding:0;
}
ul {
	width:400px;
	margin:0 auto;
}
li {
	float: left;
	list-style-type:none;
	width:100px;
	height:50px;
}
a {
	display:block;
	width:100%;
	height:100%;
	background-image:url(img/navbtn03.gif);
	background-repeat:no-repeat;
	background-position:0 0;
	text-decoration:none;
	overflow:hidden;
	outline:none;
	
}
a:hover {
	background-position:0 -50px;
}
a span {
	visibility:hidden;
}

サンプルはこちら

前回のと違うのは、HTMLでナビゲーションの文字列をspanで囲った点。CSSでは文字を消すためにtext-indent:-9999pxを使わず、aのなかのspanにvisibility:hiddenをつけた点です。

なんとかできて、またまた、ちょっとほっとした見習れす。

2011年12月22日1:52 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

CSSでナビボタンを作る　背景画像の切り替えその１

CSSでコントロールしてナビボタンを作るというのは、よくあります。でも、そんな基本だからこそ、見習にはあんちょこが必要です。ということで、ビボー録です。（アンパンと、チョコパン買ってこよ！）

ということで、パターン1は、基本形です。おそらく。

今回使う、ボタンは背景で指定して、hoverのときに画像が切り替わります。hoverのときとそれ以外のときで、別々の画像でもいいのですが、別個のファイルにすると、ボタンにマウスが乗っかってhoverになったとき、初めて読み込まれるので、一瞬画像が消えるというか、ちらつくことがあります。
ぴー、ががー、ずぴずぴずび、とFaxモデムで通信していたときのように、読み込むまでにコーヒーが入れられるってことはないでしょうけど、ちらつくのって、ナウくないです。

なので、プリロード（前読み込み）の意味で、マウスオーバーするまえにマウスオーバー用の画像を読み込ませるため、一枚の画像として準備です。

縦に並べた

(X)HTML

<ul>

<li><a href="#">ナビボタン</a></li>

<li><a href="#">ナビボタン</a></li>

<li><a href="#">ナビボタン</a></li>

<li><a href="#">ナビボタン</a></li>

</ul>

CSS

*{
	margin:0;
	padding:0;
}
ul {
	width:400px;
	margin:0 auto;
}
li {
	float: left;
	list-style-type:none;
	width:100px;　/*画像の横幅*/
	height:50px;　/*画像の高さ*/
}
a {
	display:block;　/*インライン要素であるaをブロック化*/
	width:100%;　/*親要素であるliの幅の100%*/
	height:100%;　/*親要素であるliの高さの100%*/
	background-image:url(img/navbtn03.gif);　/*背景画像*/
	background-repeat:no-repeat;　/*背景画像はリピートしない*/
	background-position:0 0;　/*背景画像が貼り付けられる開始位置　横縦の順*/
	text-decoration:none;　/*aにひかれるアンダーラインを消す*/
	text-indent:-9999px;　/*「ナビボタン」とXTHML上に書かれた文字を、左側へ9999px移動させる*/
	overflow:hidden;　/*Fire Foxなどで、アウトライン線がtext-indent分だけ横へ表示されないようにするため*/
	outline:none;　/*同上*/
	
}
a:hover {
	background-position:0 -50px;　/*hover時、aで読み込んだ画像の表示位置を、aの左端から0px、上端から-50pxにする*/
}

サンプルはこちら

background-positionは、領域の中で、背景画像の表示位置を指定します。左端からの距離、上端からの距離を書きます。このようにpxや％で数値指定することもできますが、left、right、top、bottom、centerなどの書き方もできます。

なんとかできて、ちょっとほっとした見習れす。

2011年12月21日2:28 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

リキッドレイアウトをしてみる

ウィンドサイズに合わせてレイアウトを伸び縮みさせてみました。

いろいろ、上級技とかあるようですが、まずは入門の簡単なのをトライです。

XHTML

<div id="wrapper">

<div id="header"><h1>header</h1></div>

<div id="contents">

<div id="maincontents">

<div id="maincontentin">

<h2>Hi!</h2>

<p>

contentscontentscontentscontentscontentscontentscontents

contentscontentscontentscontentscontentscontentscontents

contentscontentscontentscontentscontentscontentscontents

contentscontentscontentscontentscontentscontentscontents

contentscontentscontentscontentscontentscontentscontents

</p>

</div>

</div>

<div id="mainnavi">

<ol>

<li>list1</li>

<li>list2</li>

<li>list3</li>

<li>list4</li>

<li>list5</li>

</ol>

</div></div>

<div id="footer"><p>footer</p></div>

</div>

CSS

* {

  padding:0;

  margin:0;

  }

  #wrapper {

  background-color:#ff0;

  }

  #wrapper #contents #maincontents {

  float: left;

  width:100%;

  background-color:red;

  }

  #wrapper #contents #maincontents #maincontentin {

  margin-left:150px;

  background-color:blue;

  }

  #wrapper #contents #mainnavi {

  float: left;

  width: 150px;

  margin-left:-100%;

  background-color:green;

  }

  * html #wrapper #contents #mainnavi {

  float: left;

  width: 150px;

  margin-left:-100%;

  position: relative;

  background-color:green;

  }

  #footer {

  clear:both;

  }

▼サンプルはこちら

ネガティブマージンを使うので、IE6対策用に、position:relativeを入れるのがポイントかも…と思った見習です。あと、IE6はfloatするとmarginの値をいきなり倍にしちゃうとか、そういうお作法があるようなので、このあたりも注意が必要かも…。でも、よく分かりません。がんばるぞぉう。

2011年12月20日1:48 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)