コンテンツに注目を集めたいときに便利な、HTML/CSSを中心にデザインした最新ボタンエフェクト用スニペットをまとめてご紹介します。 すこし前までは実現が難しかったエフェクトも、CSS3をつかったテクニックを利用することでより手軽に実現できるようになっています。世界中のデザイナーが作成したボタンデザインを確認しながら、マイクロインタラクションなど最先端のデザイントレンドを、プロジェクトに取り入れてみてはいかがでしょう。 詳細は以下から。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選 「Run Pen」をクリックと読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、各スタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックし、別ウィンドウを開きま
Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
階層を区切る三角のデザインが特徴的な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></
This is a collection of CSS3 buttons that use the simplest possible markup. They look best in WebKit-based browsers, almost as good in Firefox, with all other browsers falling back to a less-styled button. These buttons are now implemented using Sass, with help from Bourbon. The generated CSS for all the buttons is also available. Classic buttons This is the original set of buttons, showing a vari
JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。 Dynamic Page / Replacing Content デモページ 上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。 仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。 タブ箇所のHTMLは、下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li><a href="index.php">Home</a></li> <l
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。 チュートリアルやジェネレーター、フレームワークなど。多すぎるので絞っています。 CSS Navigation Techniques 様々なタイプのメニューのサンプルの中にドロップダウンがいくつか。 CSS Navigation Techniques CSS Drive / Multiple Levels サンプルいっぱい。 CSS Drive / Multiple Levels Free CSS Drop-Down Menu Framework GPLライセンスで配布されるcssドロップダウンメニューのフレームワー
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
LavaLampとはカーソルに伴ってハイライトした光源が移動するエフェクトで、LavaLamp for jQuery lovers!にあるようなものです。 CSS3の角丸やボックスシャドウ、アニメーションを使用してこのエフェクトを実装するチュートリアルをINSIC DESIGNSから紹介します。
IE6やFx1.5などCSS3非対応ブラウザにも配慮した、CSS3のアニメーションで開閉するアコーディオンを実装するチュートリアルをThe CSS Ninjaから紹介します。 Create the accordion effect using CSS3 デモページ 上記のキャプチャはCSS3に対応したChromeのもので、アコーディオンの開閉はスムーズなアニメーションで行われます。 CSS3非対応ブラウザでは、アニメーションのエフェクト無しで開閉します。 CSS3で使用してるものは、角丸とアニメーションの開閉です。 アコーディオンはdl要素で実装されており、下記のようなシンプルなものです。 HTML <textarea name="code" class="html" cols="60" rows="5"> <dl> <dt><a href="#Section1">Section 1</a
洗練されたエフェクトでドロップダウンが開閉するナビゲーションをSkyrocket Labsから紹介します。 jDiv デモページ デモでは左端の「Rollover Me!」のドロップダウンに多くのコンテンツが設置できるパネルが設定されており、リストや画像など複雑なものも配置が可能です。 ナビゲーションはリスト要素、パネルはdiv要素で実装されており、デザインのカスタマイズはCSSで自由に設定ができます。 HTML <textarea name="code" class="html" cols="60" rows="5"> <!-- BEGIN MAIN NAV MENU--> <div id="menu"> <ul> <li><a href="#" id="menu1">Rollover me!</a></li> <li><a href="#">Link # 2</a><</li> <li
IEをはじめとするクロスブラウザ対応の不透明なスタイルを適用したドロップダウン型のナビゲーションをCSSplayから紹介します。 IE6でのキャプチャ ナビゲーションはJavaScriptやtableは使用しておらず、スタイルシートもハックや条件付きコメントは使用していません。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(Win), Chromeとのことです。 また、同様に垂直型のナビゲーションも公開されています。
Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPやDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
