CSS3の基本中の基本、RGBA による色と透過率の指定、Text Shadow による文字の影、Border Radius による角丸、Box Shadow によるボックスプロパティに対する影、以上の4点を Web Designer Wall で詳しく説明してくれています。CSS3を取り入れることで、画像を使わずにデザイン的要素を取り入れることが可能となります。 ただし、IEは対応していないので、IEに対しても同じ見せ方をする場合、画像やJavascriptを使ったハックが必要となります。 RGBA background: rgba(255, 255, 255, 0.2); 始めの3桁の数字が色を表します。左からR：赤、G：緑、B：青、A：透過率となります。0が透明、1=100%透過なしとして透過の割合を設定していきます。使える要素はフォントカラー、背景色、ボーダー色、シャドウなどなど

スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:

ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum

ブラウザごとに異なる味気ないデザインのボタンをアイコンやグラデーションを使用してセクシーに美しくするCSSのフレームワークを紹介します。

IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ

Welcome to the IE6 CSS Fixer: starter kit page. A tool specifically designed to ease the pain of the ie6 css debugger. If you want to read up on all the specifics, I advise you to check the articles on the ideology, the specific fixes and the scope of this tool. It is extremely important to note that this tool is not a miracle solution. This is not a 1-click-fix-all tool, nor is this a final ver

DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser

概要 CSS のみで、table 要素のような上下中央揃えを実現するための方法と解説です。 たまたま閃いたのですが、CSS で上下中央揃えは実は意外と簡単にできました。demo を用意しましたので、いろいろな Web ブラウザで見てみてください。 対応 Web ブラウザ Firefox 1, 2 Netscape 6, 7.1 Safari 2, 3 Opera 9.2 IE 5.01, 5.5, 6, 7 ( inline-block で実現) で意図した通りに表示されることを確認しました。 解説 中央揃えにしたい要素に対して、display:table-cell; を指定します。( table-cell が指定された要素には vertical-align が有効になります。) div.sample1 div　{ display:table-cell; } ただし、 IE 6, 7 に

先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。 デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、 IE7、8以外だとこんな感じでも問題ないです↓ ■html <ul> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <li><a href=""><img src="" /></a></li> <l

404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved

404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved

404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved

clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;