CSS(スタイルシート)のテクニックとトピックのまとめ

見出しのデザインを集めたWEBデザインギャラリーMenuTOP一覧グラデーションテキストのみ上線下線丸四角囲み線斜線点線角丸aboutいろんなWEBサイトの見出し部分を集めました。デザインの参考にどうぞ。そのサイトがリニューアルした場合は画像の見出しが使用されていない場合があります。linkウェブ...

まずは、デフォルトのスタイリングです。* {margin: 0;padding: 0;}ul {list-style-type: none;margin: 2%;border: 1px solid #ccc;padding: 5px;width: 44%;float: left;}ul li {m...

Photoshopで作成したかのような美しいデザインのボタンを実装するスタイルシートを紹介します。キャプチャは上から、ノーマル時、ホバー時、クリック時です。Make CSS3 buttons that are extremely fancy デモページボタンはCSSで実装されているため、ブラウザの...

「CSS3 Playground」はCSS3を自動生成してくれるジェネレータです。 角丸やシャドウなどの調整を手軽に行え、コードを生成してくれます。 真四角の図形にほどこせる装飾ならお任せって感じですね。 以下に使ってみた様子を載せておきます。まず「CSS3 Playground」にアクセスしまし...

CSS3で実装する角丸を少しでも滑らかにするスタイルシートのトリックをsitepointから紹介します。How To Get Smoother Rounded Corners デモページこの現象は主要な各ブラウザ全てでおこる現象で、特にSafari(Mac)では顕著に現れます。 上記キャプチャはそ...

IE6/7/8のブラウザでも角丸やボックスシャドウなどCSS3のプロパティのいくつかが使えるようになるbehaviorスクリプトを紹介します。.box {-moz-border-radius: 15px; /* Firefox */-webkit-border-radius: 15px; /* S...

今、作っているサイトで透過の角丸JavaScriptが必要になって、いいものは無いかと探していると「CurvyCorners」というJavaScriptが見つかりました。Googleで CurvyCorners - Google 検索 を検索してみると、以下のようなエントリーがヒットします。（上位...

ショートカット背景｜ 画像加工｜ ボタン｜ ナビゲーション｜ ロゴ｜ CSS｜ 素材サイト背景Fresh Generator グラデーションや角丸をpng形式で作成できます。【Box】ボックスのサイズ・色・不透明度・影【Corners】角丸の有無・カーブの加減【Border】ボーダーのサイズ・色・...

LavaLampとはカーソルに伴ってハイライトした光源が移動するエフェクトで、LavaLamp for jQuery lovers!にあるようなものです。CSS3の角丸やボックスシャドウ、アニメーションを使用してこのエ [...]

CSS3で最も簡単にクロスブラウザの角丸を実装したい。そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。「border-radius.htc」フ...

IEにだけできないことを可能にしたい。そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。便利そうなのが揃っているので、ざっとご紹介しますね。HTML5をI...

スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。HTML下記の通りHTMLを記述します。<div class="outer"><div class="inner">1px rounded corners</d...

CSS3の角丸やシャドウ、グラデーションを使用して、より美しくスタイルを適用するチュートリアルをAbduzeedoから紹介します。Playing with CSS3 demo キャプチャはChrome3CSS3に対応しているブラウザでは上記のように、角丸やシャドウ、グラデーションのスタイルが適用さ...

CSSリファレンス、(X)HTML、Movable Type その他Webサイト制作に関する役立つ情報を掲載します！Category ： CSS3今まで画像で角丸を表現していた部分を border-radius を使用する事で簡単に角丸を表現出来ちゃうプロパティです。正確にはCSS3の草案「CSS...

Windows 7が発売されたが、最近ではデスクトップのOSにもLinuxが選ばれるケースが増えている。この記事では、Windows 7とUbuntuを10項目で比較する。企業のITマネジャーはここ3年ばかりWindows Vistaに手を焼いていたが、最近はデータセンターのサーバだけでなくデスク...

でっかいロゴに飽きてきてヘッダをコンパクトにしたくなったので、少し前からサイトのスタイルを色々いじっていた。ナビと検索フォームとロゴを一段に並べるのはかなり難しかったので、ロゴをアイコンにして無理やり詰め込むことにした。border-radiusまくり。緑の流行はまだまだ続くらしいので色はこのまま...

Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。ざっといくつかご紹介。jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする入力中のフォームをハイライトする highlighti...

�q1px rounded corners/smart faking �qdemo仕組みはdivを二つ使用し、paddingとmargin、もしくはmarginとborderで「1px欠け」を実装しています。HTMLCSS(padding&margin).example1 .outer {back...

画像を使わずに、パネルの四隅を角丸にする軽量のスクリプトをthe css blogから紹介します。Creating rounded corners (the "Deviant art's" [...]

CSSやHTMLを知らなくても複数のカラムやグリッドレイアウト、タブ、角丸などがオンラインで簡単に作成できるLayout Generatorsを紹介します。Layout Generators各ジェネレーターはプレ [...]