CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート４０種 プロレベルでハイクオリティなXHTML/CSSテンプレート集

簡単に実践できるものから、ちょっと手間がかかるものまでスタイルシートをほんの少し軽量化する10+1のTipsを紹介します。 How to Micro-Optimize Your CSS Tips 1：カラーコードを短く記述 プロパティにカラーを指定する際は、最も短い値を使用します。 軽量化前 カラーをRGB値で指定しています。 <textarea name="code" class="css" cols="60" rows="5"> article { background-color: rgb(255,255,255); } </textarea>

Six Useful CSS3 Tools | Tools 便利な６つのCSS3ツールがまとまったエントリを＋αでご紹介。 まだ覚えていないプロパティなんかもWYSIWYGやジェネレート等で簡単に理解＆覚えることが可能です。 CSS3 Button Maker CSS3なボタンメーカー。角丸やシャドウの指定が可能 CSS3 Generator CSS3を使ったスタイル効果をブラウザ上で簡単ジェネレート CSS3 Please! クロスブラウザ向けのradiusやshadow等を一括生成 CSS3 Gradient Generator CSS3のグラデーション生成ツール CSS3 Transforms WYSIWYGでCSS3のtransformプロパティを生成可能 CSS3 Selectors Test ブラウザのCSS3対応状況が分かるツール CSS3 Click Chart by Im

CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。

715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集７１５が紹介されています。 １から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト

幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 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

ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。 How to Resolve a Fluid Header/Footer Problem When the Window is Resized デモページ（不具合版） ※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして） この現象が起きる条件は下記のようになります。 ヘッダとフッタのサイズは指定されていない。 →横いっぱいに広がる。 コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。 ブラウザのサイズはコンテンツエリアのサイズより小さい。 →ブラウザに横スクロールバーがでる。 期待される表示は、下記のようにコンテンツが中央

デモのキャプチャ（100%） ※クリックで全表示 実装は下記のようになります。 HTML 疑似要素「:after」を使用するため、spanでimg要素を内包します。 <textarea name="code" class="html" cols="60" rows="5"> <span class="fancy">< img src="dingo.jpg" /></span> </textarea>

<textarea name="code" class="css" cols="60" rows="5"> .shadow { padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } </textarea>

繊細のポイントは「気がつくかな？」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。 Take Advantage of CSS3 to Achieve Subtle Design デモページ 下記は各ポイントを意訳したものです。 はじめに 繊細の大事なポイントは人々が気づかないかもしれない、そして記憶に残らないくらい非常にささやかなものにすることです。 私はこれが初耳だという人がいることを疑います。これは感覚と認識研究によって述べられたよく知られている概念の一つです。 繊細なデザインが難しいのは、「もう少し多くした方がいいのかな？」と容易に思えてしまうところです。このことを知らないと、繊細は失われるでしょう。 以上を踏まえた上で、ウェブデザインにさまざまな形の繊細を提供するために使用できる三つのCSS3のテクニックを紹介します。 1. transi