ホワイトスペース使ったウェブデザインの考え方
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい
[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></
[CSS]あらゆる背景上で美しく機能する半透明なエレメントを実装するスタイルシート
まるでガラスで作られた棚のように、美しい半透明な3Dのエレメントを実装するCSS3のテクニックを紹介します。 デモページ：Firefoxのキャプチャ 実装 HTML HTMLはシンプルで、各アイコンはa要素、ガラス棚はdiv要素で実装されています。 <div id="shelf"> <!-- Add icons here --> <a class="icon" href="#"></a> <a class="icon2" href="#"></a> <a class="icon3" href="#"></a> <!-- Surfaces of the shelf --> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> </div> CS
CSSのナビゲーションメニューサンプル５５:phpspot開発日誌
55 Wonderful CSS Navigation Menu Designs | inspirationfeed.com CSSのナビゲーションメニューサンプル５５。 ページトップに置くような水平のナビゲーションメニューのデザインカタログみたいな感じで使えそうなまとめです。 水平ナビゲーションをちょっと変わったものにしたいけどなんとなく煮詰まったみたいな時に参考にしてみてもよさそう。 色々なデザイン方法があるのだなぁと感心しますね。 関連エントリ 次のサービスに使えるかもしれないロゴデザイン集２２ 奥行きをうまく使ったサイトデザイン集３０ スライダーを上手く使ってデザインされたWEBサイト集３０ iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ
デモページ：ボックスの高さを拡張 以下は、これらの5つの実装方法と解説を意訳したものです。 Method 1: borderとoutline Method 2: 疑似要素 Method 3: box-shadow Method 4: div要素の追加 Method 5: border-image [ad#ad-2] Method 1: borderとoutline borderプロパティとoutlineプロパティを併用します。 この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。 .one { border: solid 6px #fff; outline: solid 6px #888; } この方法が機能するのは、outlineがボックスの外に配置されるためです。outlineを使用する際の問題点は、周りのエレメントに影響を与えないとい
[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ | コリス
CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。
[CSS]順序付きリストol要素を視覚的に美しくスタイルするチュートリアル
プレーンな状態で割とスタイルされるol要素を視覚的に美しくするスタイルシートのチュートリアルを紹介します。 Firefox4でのキャプチャ 順序付きリストを美しくスタイルするチュートリアル HTML HTMLは非常にシンプルなol要素で実装します。 <ol> <li>List item one</li> <li>The second item on the list</li> <li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
[CSS]「:before」「:after」でタブのディテールを強化するスタイルシート
Flared Borders with CSS デモページ ※上：ディテールを強化したタブ、下：旧式のタブ [ad#ad-2] 対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> CSS：タブのベース シンプルな角丸
2010年総まとめ：CSSの実用的なテクニック集
CSS3で何ができるの？ という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。
ディテールにこだわった、美しいデザインのナビゲーション集
1ピクセルのライン、細かいエレメント、美しいグラデ、繊細なテクスチャなどを使用してディテールにこだわりつつ、主張しすぎない素晴らしいナビゲーションをDribbbleから紹介します。
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
【レビュー】マウス操作だけでCSS3対応ボタンを自在に作成! その名も"Button Maker" | エンタープライズ | マイコミジャーナル
意外と面倒なボタン作成も"Button Maker"を使えば解決!? WebアプリケーションやWebサイトを作成するにあたって、なにかと頻出するボタン。特別な意味をもたせるボタンには、ちょこっとアクセントをつけたいところ。実際に作成する場合 スタイルシートを編集 → Webブラウザで確認を繰り返す Firebug等のデバッグツールを使い、オンザフライでスタイルシートを調整 CSS3に対応したWebブラウザ/デバッグツールでデザイン、画像ボタンとして保存/利用 (参考: CSSグラデーションを使ってクールなボタンをつくる方法) といった方法があると思う。これらツールを使用しても、数字の微調整を繰り返すのはちょっと手間がかかる作業だ。ここでは、よりサックリとボタンを作る方法のひとつとしてButton Makerを紹介したい。 Button MakerはCSS-TRICKSが公開しているボタン作
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWeb制作で必ず1度はお世話になる便利なジェネレーターまとめ5つ - W3Q
Web Design & CSS Inspiration for the iPhone — CSS iPhone
LightBoxの使い方とカスタマイズ方法 | CSS Lecture
http://d-lover.com/css/hack.shtml