実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS:シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
ボタンやアイコン、テキストに透明感のある光沢を与え、エレガントなスタイルにするPhotoshopのレイヤースタイルを紹介します。
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
フォームのラベルと入力欄を縦一列に配置すると、横一行に比べてユーザーがより速く書きこめる三つのポイントを紹介します。 Why Users Fill Out Forms Faster With Top Aligned Labels 下記は各ポイントを意訳したものです。 visual fixation visual direction vertical space まとめ visual fixation 「visual fixation」は一点(面)をみつめる固視のことで、上記の五つ入力項目があるフォームでは、横一行:10箇所、縦一列:5箇所になります。 縦一列は一つの入力項目に対して、半分の固視ですみます。 visual direction 「visual direction」は視方向です。横一行は水平・垂直方向の二つを必要とし、縦一列は水平方向の一つのみです。 vertical space
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
Internet Explorer 6/7/8rc1, Firefox, Opera, Safari, Chromeなど主要なブラウザをWindows上で同時に起動できるXenocode Browserを紹介します。 Run IE876, Firefox, Safari, Chrome, and Opera from the web Fx, Op, Safari, Chromeはそのままで同時に起動できますが、IE 6/7/8rc1の異なるバージョンをOSに依存せずにインストール・起動できるのはブラウザ検証の大きな武器になります。 IE 6/7/8rc1でAcid 2のテストを表示してみたところ、レンダリングはそれぞれのバージョンのものになっていました。
複数のバージョンのIEを同時に確認できる「IETester」が、IE8 RC1に対応し、機能を強化してv0.3にバージョンアップしました。 IETester IETesterの動作環境はWindows Vista or XP +IE7となっています。 確認できるIEのバージョンは、IE5.5, 6, 7, 8 RC1です。 新機能としては、ウインドウ下部のズームバーから、表示のズームをコントロールできます。 また、ツールバーの「All IE versions」をクリックすると、IEの全てのバージョンでの確認が簡単にできるようになりました。
Typechartは、WindowsやMac環境でタイポグラフィがどのように見えるかと、それを実装するスタイルシートをダウンロードできるサイトです。 Typechart - Browse Web Type, Grab CSS. タイポグラフィのカテゴリは、以下の3つに分かれています。 typeface Arial / Helvetica Cambria Georgia Lucida Grande Lucida Sans Unicode Trebuchet MS Verdana font size small medium / body large/ heading extra large emphasis normal bold italic uppercase タイポグラフィは、それぞれWindowsとMacでの表示を切り替えることができ、「Get CSS」ボタンをクリックすると、そのタ
Navigation Design Showcase Navigation Design Showcaseは現在49個登録されており、Elements of Designには他にもウェブサイトでよく使うエレメントのデザインが収集されています。 コメントの入力欄のデザイン集 コメントのデザイン集 カレンダーのデザイン集 打ち出しエリアのデザイン集 コード表示のデザイン集 動画プレイヤーのデザイン集 フッタのデザイン集 アイコンのデザイン集 画像のキャプションのデザイン集 ログインフォームのデザイン集 ナビゲーションのデザイン集 価格表のデザイン集 登録フォームのデザイン集 引用箇所のデザイン集 検索フォームのデザイン集 見出しのデザイン集
Free Icons Donwloadは、ロイヤリティフリーのアイコンを紹介しているサイトです。 Free Icons Donwload ホビー用のものから、ビジネス用・ウェブサイト用などのアイコンも
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
Scott Klarrのエントリー「Cheat Sheet Index」から、ウェブ制作・プログラマー・デザイナーのためのチートシート集です。
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、1つの値
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く