使いやすくなった！UI素材とテクニック集／CSS jQuery版
作成：2013/12/9 更新：2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．円形 ２．タブ ３．ナビゲーション ４．アコーディオン ウィンドウ ５．モーダルウィンドウ ６．フローティングウィンドウ ７．Dialog(ダイアログ) ８．フォーム＋バリデーション ボタン ９．Toggle (トグルボタン) １０．Switch (スイッチボタン) １１．Scrubbe
[JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver
水平型など、今使用しているナビゲーションをスマフォやタブレットで表示した際に、トグル型ナビゲーションに自動で変更するjQueryのプラグインを紹介します。 スマフォ時の表示 Naverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <link rel="stylesheet" href="jquery.fs.naver.css" type="text/css" media="all" /> <script src="jquery.fs.naver.js"></script> Step 2: HTML HTMLはナビゲーションの要素を指定できるように実装します。 ※ここでは、navで指定。 <nav> <a href="#">Home</a>
2カラムリキッドレイアウトのCSSサンプルソース｜floatレイアウトサンプルソース
ここでご紹介するレイアウト/段組は「floatで段組する可変幅｜リキッドレイアウト」ですが、いつでも「固定幅」へ移行しやすいような段組になっています。 勿論、横幅指定は自由に変更可能で、スタイルシートの指定変更で左右のサイドバーを入れ替える事も自在です。 また、ユーザビリティを高める為に定番の「パン屑ナビ」等のナビゲーションも配置、アクセシビリティを考慮して、本文を常に(x)html上で先に記述する形をとっています。 (X)HTML htmlは固定幅タイプ、可変幅タイプ（リキッドレイアウト）共通です。 <div id="wrapper"> <div id="header"> <h1>******</h1> </div> <div id="container"> <div id="contents"> ******コンテンツ****** <p id="topnavi">パン屑ナビ</p> <
jQueryで利用出来る便利なナビゲーション26選「26 Useful jQuery Navigation Menu Tutorials」
TOP > WebDesign > jQueryで利用出来る便利なナビゲーション26選「26 Useful jQuery Navigation Menu Tutorials」 軽量で高機能なjavascriptライブラリjQuery。様々なプラグインがリリースされていて、簡単にWEBに動きや機能を付加してくれるため。使い勝手が良く多くのWEBサイトで利用されていますが、今日紹介するのはjQueryで利用出来る便利なナビゲーションを集めたエントリー「26 Useful jQuery Navigation Menu Tutorials」です。 Mega Drop Down Menus w/ CSS & jQuery ドロップダウンメニューからユニークなアコーディオンメニューまで様々なナビゲーションがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。 詳し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集
