A CSS Block Navigation Menu | Vikiworks™ Studio

menu 動的 書き方

A CSS Block Navigation Menu | Vikiworks™ Studio


　短い説明文が追加されたボックスメニューの書き方です。:hover時に説明文とメニューがそれぞれ違う色にしてるのがポイントですかね。書き方自体は単純ですがメニューに説明文を追加するという発想が目から鱗のようなものが落ちるものでしたのでご紹介。

chromaSYNTHETIC Journal » Blog Archive » Flash Without Flash: Elegant Menu Fly-out

menu 動的 書き方 +javascript mootools

chromaSYNTHETIC Journal » Blog Archive » Flash Without Flash: Elegant Menu Fly-out

デモページ　KOHLER: Kitchen and Bath Fixtures and FaucetsのようなFlashで実装されている動きの豊かなメニューをCSS＋Javascript(mootoolsというフレームワーク）で実装するテクニックが紹介されています。

　ちょっと複雑ですが一味違うメニューを用意したいという時には使うのもありかなと思います。

One pixel notched corners as used by Google Analytics (Ask the CSS Guy)

書き方 角丸 Tips
One pixel notched corners as used by Google Analytics (Ask the CSS Guy)

デモページ　Google Analyticsのボックスの角をよく見たことはありますか？　実はborderの交点がある場所1pxが空白となっていたんです。あえて1px空けることで遊び心を感じさせるドット絵のゲームに出てきそうなボックスに見えてきますね。

　しかもこれ画像を一切使用してないという、画像編集ソフトが苦手なデザイナーさんには嬉しいテクニックです。逆に無駄にボックス要素を入れ子にするので、マークアップが汚くなるのは耐えられないというデザイナーさんには向いてませんね。

Nuno Silva » Blog Archive » Divs instead of tables

css table divレイアウト 書き方

Nuno Silva » Blog Archive » Divs instead of tables

table要素を使わずdiv要素のみでレイアウトを書くのはcssでfloatやclearを使いこなさなければいけず大変ですので、一部のウェブ制作者の方は今もtable要素のみでレイアウトを書いていると聞きますが、divレイアウトは本当に大変だろうかという問いかけです。5つのtableレイアウトよりもdivレイアウトが優れている点を挙げた上でtableレイアウトをdivレイアウトに書き換える例を解説しています。シンプルなのでいつかはCSSでレイアウトしてみたいなと考えてる方は是非読みましょう。

ちなみにdivレイアウトが優れている5つの理由とは

  • レイアウトの変更が簡単なこと
  • デザインとコンテンツを分離できること
  • アクセシビリティ
  • 構造化されてるのでSEOに有利なこと
  • 転送量が軽減されること

となっています。あとよく言われるのはtableレイアウトだとtable内を全部読み込んでからでないと表示されないというのもありますね。ブロードバンドが普及して最近はあまり話題にならないことですが。

woork: Liquid expandable section with rounded corners using CSS

書き方 角丸 開閉式 シンプル

woork: Liquid expandable section with rounded corners using CSS
デモページ　セクションのタイトルをクリックすると中身が表示されたり消えたりするといえばいいのかな。仕組みはシンプルだけどなんか言葉にしにくい。要はコンテンツをjavascriptでdisplay:blockとdisplay:noneを切り替えてるだけなんだけど。

Swedish fika » Creating a fading header

書き方 jQuery アニメーション

Swedish fika » Creating a fading header
デモページ　jQueryを使ってマウスエンター時とマウスアウト時にフェードイン・フェードアウトさせる方法。親BOXに空スパンの子要素とリンクの子要素をHTML上で追加し、CSSでそれぞれ背景を設定し親ボックスのサイズに重ねる。後はjQueryでアニメーション。目新しくはあるけど、marqueeと同じで慣れるとうざい恐れ有り。

リンクのデザインに役立つ8＋アルファのTips | コリス

ユーザービリティ SEO

リンクのデザインに役立つ8＋アルファのTips | コリス
デザインというのはちょっと違うのが含まれてる気がしなくもないけどリンクを張るときに気をつけたいルールではある。