レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
【レポート】ピクセル濃度に依存しないWebページの制作方法 | エンタープライズ | マイコミジャーナル
Ext JS is now Sencha iPhone 4のようなディスプレイピクセル密度が高いデバイスの登場で、WebデザイナやWebデベロッパの関心は、異なるピクセル濃度のデバイスにどのように対応するかといった点に集まりつつある。基本となるテクニックのいくつかはすでにいくつかのブログで紹介されている。 iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方 iPhone 4に対応したWebサイトを作る方法 iPad向けWebアプリケーション開発テクニック これまでマイコミジャーナルで紹介したテクニックは細部のテクニックが多い。そこでSenchaブログに掲載されたResolution Independent Mobile UIを紹介したい。モバイルデバイスにも対応したJavaScriptフレームワークSencha Touchで使われているテクニックの根本をまとめたもので、ピクセル
ドロップダウンするcssメニューいろいろ - かちびと.net
サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。 チュートリアルやジェネレーター、フレームワークなど。多すぎるので絞っています。 CSS Navigation Techniques 様々なタイプのメニューのサンプルの中にドロップダウンがいくつか。 CSS Navigation Techniques CSS Drive / Multiple Levels サンプルいっぱい。 CSS Drive / Multiple Levels Free CSS Drop-Down Menu Framework GPLライセンスで配布されるcssドロップダウンメニューのフレームワーク集です。かなり使えます。 Free CSS Drop-Down Menu Framework 38 jQuery And C
かっこいいCSSナビゲーション30 – creamu
クールなナビゲーションを実装したい。 そんなときにおすすめなのが、『30 Cutting Edge Examples Of CSS Navigation』。かっこいいCSSナビゲーション集です。 気になったのをいくつかご紹介しますね。 Pixlogix マウスオーバー時にツールチップが表示されるメニュー Thoughtbot 赤のグラデーションとラインの使い方がかっこいいThoughtbot Evan Eckard フォントサイズのコントラストが美しいEvan Eckard。カレント時の背景色も綺麗 Lonn Roth 上部のラインと連動した美しいメニュー Dragon Interactive アニメーションで切り替わるクールなメニュー 他にもいろいろあるので一度見てみてください。 30 Cutting Edge Examples Of CSS Navigation いろいろぱつぱつだけど
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル:phpspot開発日誌
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
CSSとJavaScriptで作るフォームエレメントのチュートリアル51 – creamu
1st webdesignerで、CSSとJavaScriptで作るフォームエレメントのチュートリアルがたくさん紹介されています。 いくつかご紹介。 ↑は、Changing Form Input Styles on Focus with jQuery。フォームの中にラベルを表示して、フォーカス時にラベルを消してくれる Turn postcard photo into a stunning comment form using CSS 古いポストカードを使ってコメントフォームをつくったようなデザインのチュートリアル CSS Tableless Form テーブルを使用しないフォームデザイン。floatとネガティブマージンを使用 テクニカルで気の利いたものが多いですね。 その他は以下からどうぞ。 » 51 Form Element Resources and Tutorials Using C
【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="#">
[CSS]スクリプトやテーブルや条件付きコメントやハック無しで実装するドロップダウン型のナビゲーション
CSS Hack、IEの条件付きコメント、table要素、JavaScriptを使用しないで、ドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Two CSS menus - NO hacks, NO conditional comments, NO tables and NO javascript. demo ドロップダウンを表示するトリガーはhoverとclickの二種類があり、どちらもハック無しで実装されています。 二つとも、active時にはドロップダウンがキープされます。 ナビゲーションはリスト要素で実装されており、各親階層ごとにul要素が使用されています。 また、dl要素版も公開されています。
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
