成功しているWebデザインの重要な要素
まれにWebサイトを設計する上で、意外と軽視されがちというか、深く考えずにずらずらとコンテンツが横並びされるパーツ。それが『メニューバー』です。今朝色々と見て回っていたら、あぁ確かにと思った記事があったので、今回はメニューバーに焦点を当ててみようかと。 メニューバーの２つの役割 Important Elements of a Successful Web Page Design （成功したWebページデザインの重要な要素） この記事をみてはっと昔を思い出した訳です。 10年前にさかのぼると、私も結構いい加減な仕事をしていた時期がありました。 というのも、私のWeb制作は全て独学であり、学校ではCADを教わったくらいで・・・。 WindowsPCを買ったのは18歳で、そこからネットにはまり、本屋をあさって学んだ訳です。そのころのネット接続といえば従量制だったので、ネットで気軽に調べるなんて事
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
[CSS] 美しいパンくずを実装する4つのスタイルシート | コリス
画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>
Photoshopで作成したかのようなクオリティのボタンやナビゲーションをCSSで作ってみた！的なものだけを集めたギャラリー・CSSDeck - かちびと.net
CSS3でこんなクオリティのボタンが作れる！ みたいな記事をよく見かけると思うんですが、 そういったものだけを集めたデザインギャラ リーがありましたのでシェア。CSSの勉強に 如何でしょう。さもPhotoshopで作ったかの ようなエレメントが豊富にあります。 タイトルよく分からんですねｗ CSS3のグラデーションやbox-shadowなどを駆使して、今まではPhotoshopで作成していたかのようなクオリティのボタンなどを作った！みたいな記事を多々見かけてきたかと思いますが、そういったものだけを集めたデザインギャラリーです。 一見よくあるパーツデザインギャラリーや、dribbbleっぽい感じですが、これらのボタン等は全てcssで作成されています。それだけでなく、ソースも公開されていますので結構重宝しそうなサイトですね。 こんな立体感のあるボタンとか。 こんなソーシャルボタンとか。 ソース
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ | コリス
CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
かなりクールなjQueryのメニュープラグインやチュートリアル集:phpspot開発日誌
15 Fresh jQuery Menu Plugins and Tutorials かなりクールなjQueryのメニュープラグインやチュートリアル集 メニューというと便利なものが多かったりしますがデザイン性も秀逸なものといえば、その中から限られたものになります。 「むむぅ、これは」というデザインのものが多数紹介されていましたのでご紹介です。 １からリデザインしなくても少しの手間で実用的なものが実装できそうです これはつかえますね 関連エントリ WindowsのメニューバーっぽいUIを実現できるjQueryプラグイン「Win Menu」 Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flowe
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
ディテールにこだわった、美しいデザインのナビゲーション集
1ピクセルのライン、細かいエレメント、美しいグラデ、繊細なテクスチャなどを使用してディテールにこだわりつつ、主張しすぎない素晴らしいナビゲーションをDribbbleから紹介します。
Google マップナビで楽しいドライブを
季節の変わり目を感じ始めたこの頃、初秋のドライブに行きたいですね。 そんなときに便利な Google マップナビが Android 搭載ケータイで使えるようになりました！ Google マップナビはルート音声案内やGPS情報を使ったルート再検索、さらにルート沿いのお店検索ができる Android 向けの無料サービスです。 基本的なルート案内に加えて、クラウドにつながっている Android搭載 ケータイならではの機能が満載です。 音声検索 Google 音声検索との連携で、とても簡単に目的地を探すことができます。音声検索ボタンを押して、目的地、たとえば「草津温泉」と話すだけで、ナビを開始できます。住所も「東京都港区芝公園4-2-8」と話すだけなので入力の手間がかかりません。 ルート沿い検索 ドライブ中に何か食べたくなったらレストランやコンビニに寄りたいですね。Google マップナビでは現
パンくずのデザイン集と概要やデザインのポイント
ウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。
22 Versatile Adobe Flash Menu and Navigation Tutorials : Speckyboy Design Magazine
Depending on the type of website or app you’re building, there will always be some key areas to which you have to give more attention than others. One area that is critical to all types of websites, and requires more thought than others, is navigation. Menu items generally lead to a site’s most important pages or areas and help visitors navigate easier. And, as you have to consider multiple screen
Simple scalable CSS based breadcrumbs | Veerle's blog
You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out! A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
商用利用可のさまざまなデザインが揃ったナビゲーションのPSD素材 | コリス
シンプルなデザインからスタイリッシュなデザインまで揃った、商用サイトでも無料で使用できるナビゲーションのPSD素材をpsdGraphicsから紹介します。 PSD website navigation menus set preview ナビゲーションのPSD素材はレイヤーが保持された状態なので、テキストの変更も可能です。 他にもシンプルなデザインが揃ったナビゲーションのPSD素材もダウンロードできます。
CSSでボタンのロールオーバーをデザインする【1】：CSS 3分コーディング
CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。 はじまりはじまり。 今回のテーマ：CSSでボタンのロールオーバーをデザインする【1】 マウスカーソルを重ねたときに、デザインが変わるボタンをCSSだけでデザインする方法をご紹介します。 :hover疑似クラスとbackground-imageを使います。CSSの基礎知識がある方やCSS講座を受けていただいた方ならさくっとお気付きかもしれませんが、ちょっとした工夫があったりします。先日の講座でもご質問いただいたので改めてご紹介します。 まず、根本の発想は「マウスカーソルが重なったときにbackground-imageで画像を切り替える。」わけですが、「別の画像ファイル」ではなく、「同じ画像ファイル」を使います。 ポイントは、背景画像をずらす！です。 このようにします。 <ul> <li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress のブログサイトでパンくずリストを表示するコード
CSSメニュージェネレーター『My CSS Menu』 – creamu