スタイルシートマニア
ホームページカスタマイズ Tips
09
Nov
2008
ナビゲーションメニュー（実用編Ⅳ）
前回のナビゲーションは各項目の横幅が統一されていたので、計算で簡単に算出できましたが毎回毎回各項目の横幅を固定するわけにもいかないです。 ということで今回は、当サイトのナビゲーションを元に各項目の横幅が全てばらばらの物を […]
16
Oct
2008
ナビゲーションメニュー（実用編Ⅲ）
ナビゲーション画像を一枚にしてナビゲーションを作るのって難しくてできない！っという人のために、簡単に作るコツをお教えしましょう。 今回は今まで作っていきた以下の画像を使って簡単なものからやってみます。 この画像のポイント […]
12
Oct
2008
ナビゲーションの画像
今回は前回の記事を題材にして、なぜ「画像を一枚にするのか？」っというところにスポットを当ててみます。 ナビゲーションを簡単に作ろうと思えば「id（#homeなど）ひとつに対して画像を作った方が早い」っというのは当然のこと […]
05
Oct
2008
ナビゲーションメニュー（実用編Ⅱ）
今までは、CSSベースでナビゲーションをデザインしていましたが、今回からは画像を使ってナビゲーションを作っていきます。CSSだけだと、どうしてもやれる事に制限が出てきてデザインが自由にできない状況でしたが、画像を使うこと […]
28
Sep
2008
ナビゲーションメニュー（実用編Ⅰ）
さて、今まではCSSだけでナビゲーションを作ってきましたが、CSSだけではやれることに何かと制限が多いので画像を取り入れたナビゲーションを作ってみます。 今回は前回使ったCSSナビゲーションに背景の画像を入れて見栄えをも […]
21
Sep
2008
ナビゲーションメニュー（応用編Ⅱ）
今回は、li aの横幅を固定したタイプのナビゲーションを作ってみようと思います。 このタイプは、１つのli aに入りきる文字数を見計らいながら設定しなければいけません。今まで使ってきた文字列は入りきれなかったので、文字列 […]
18
Sep
2008
ナビゲーションメニュー（応用編Ⅰ）
前回までは、縦に項目が伸びていく縦軸のナビゲーションでしたが、今回はちょっとればるアップして横に項目を並べていく横軸のナビゲーションを作成します。 今回のポイントは、#menu04 li のdisplay: をinlin […]
16
Sep
2008
ナビゲーションメニュー（基本Ⅲ）
今回はナビゲーションにボタンのような効果を付けてみます。 今回のポイントはborderプロパティでoff時にoutset、hover時にinsetを使う事でボタンのエンボス（出っ張り）のような表現を演出する事にあります。 […]
14
Sep
2008
ナビゲーションメニュー（基本Ⅱ）
今回は先日作ったナビゲーションをちょっとアレンジしてみます。 基本的には先日作成したものと同じ仕様ですが、今回は見た目をシンプルにして、ロールオーバーした時のアクションに一工夫加えてみます。 <div id=&qu […]
12
Sep
2008
ナビゲーションメニュー（基本Ⅰ）
ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。 ※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい […]