ナビゲーションメニュー(基本Ⅰ)
ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。 ※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい。 まずは、基本的な作り方でホームページの左や右に配置する縦に並べるナビゲーションを作ってみます。...
View Articleナビゲーションメニュー(基本Ⅱ)
今回は先日作ったナビゲーションをちょっとアレンジしてみます。 基本的には先日作成したものと同じ仕様ですが、今回は見た目をシンプルにして、ロールオーバーした時のアクションに一工夫加えてみます。 <div id="menu02"> <ul> <li><a...
View Articleナビゲーションメニュー(基本Ⅲ)
今回はナビゲーションにボタンのような効果を付けてみます。 今回のポイントはborderプロパティでoff時にoutset、hover時にinsetを使う事でボタンのエンボス(出っ張り)のような表現を演出する事にあります。 <div id="menu03"> <ul> <li><a...
View Articleナビゲーションメニュー(応用編Ⅰ)
前回までは、縦に項目が伸びていく縦軸のナビゲーションでしたが、今回はちょっとればるアップして横に項目を並べていく横軸のナビゲーションを作成します。 今回のポイントは、#menu04 li のdisplay: をinline;にして#menu04 li aのfloat: left;にすることで項目を横に並べることにあります。...
View Articleナビゲーションメニュー(応用編Ⅱ)
今回は、li aの横幅を固定したタイプのナビゲーションを作ってみようと思います。 このタイプは、1つのli aに入りきる文字数を見計らいながら設定しなければいけません。今まで使ってきた文字列は入りきれなかったので、文字列を若干変えてfont-size: 0.8em;で文字サイズを変更、元々の設定でletter-spacing: の幅を変更していたのでletter-spacing:...
View Articleナビゲーションの画像
今回は前回の記事を題材にして、なぜ「画像を一枚にするのか?」っというところにスポットを当ててみます。 ナビゲーションを簡単に作ろうと思えば「id(#homeなど)ひとつに対して画像を作った方が早い」っというのは当然のことです。idに対してそのid用の画像を設定するだけで細かな設定が必要ありませんから。...
View Articleナビゲーションメニュー(実用編Ⅲ)
ナビゲーション画像を一枚にしてナビゲーションを作るのって難しくてできない!っという人のために、簡単に作るコツをお教えしましょう。 今回は今まで作っていきた以下の画像を使って簡単なものからやってみます。 この画像のポイントは同じ間隔の箱(長方形)で全項目を作っているところにあります。こうするとどうして簡単なのか?というと、一つ一つの項目に横幅を設定しなくても#menu08 li a...
View Articleナビゲーションメニュー(実用編Ⅳ)
前回のナビゲーションは各項目の横幅が統一されていたので、計算で簡単に算出できましたが毎回毎回各項目の横幅を固定するわけにもいかないです。 ということで今回は、当サイトのナビゲーションを元に各項目の横幅が全てばらばらの物を作ってみます。...
View Articleスマホサイズのナビゲーションを最適化
またまた、最近話題のブラウズサイズに合せてCSSを最適化する「Fluid Grid Layout」に便利なお話。 タブレットやPCサイズなら問題ないんですが、スマホのナビゲーションで困った事はないでしょうか? 特に一つのソースでマルチにみせるFluid Grid Layoutだと「スマホだけにjQuery...
View ArticlejQueryで作るナビゲーション
すごく久方ぶりの更新です。 最近、企画だけやたらと盛り上がって自分のやるべきことをしないまま、最終的に無駄なものを作らされて、おもいっきり振り回されたあげく、ちゃんとお金を払わない人間にだまされてる今日この頃です。 こういう人間を見分けるにはどうしたらいいんでしょう! そんなことはさておき!最近ナビゲーションのデザインやらレスポンシブルやらで悩んでいるときに見つけた便利なjQueryです。...
View Article
More Pages to Explore .....