CSSプロパティ [CSS]floatを利用せずにdisplay:inline-blockで要素を横並びにする方法
グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSのfloatやdisplayを使うことが多いと思います。 floatとdisplayとでは見...
CSS
CSSプロパティ 
CSSプロパティ [IE]PIE.htcを利用したIE8以下向けの表示サンプル
IE6、IE7、IE8でも一部の CSS3のプロパティが使える「PIE.htc」の記事でも紹介させていただいたPIE.htcファイルですが、実際にIE6、IE7、IE8でPIE.htcを使った場合の見え方はどのようになるのか について、サン...
CSSプロパティ [CSS]CSSで印刷時のページ分割（改ページ）を行う方法
WEbページを印刷する場合、 「なんでここでページ分割されるの？？」 なんてことがよく起こりますが、CSSのpage-break-beforeやpage-break-afterを使えば、ページ分割（改ページ）位置を指定してあげることができま...
CSSプロパティ [CSS]角丸をIE8以下でも利用できるようになるborder-radius.htcの使い方と注意点
IE8以下のバージョンで「角丸」を実現させる方法は、PIE.htc や IE-CSS3.htc などを使う方法もありますが、今回紹介させていただく border-radius.htc を使う方法もあります。 名前の通り border-rad...
CSSスニペット [CSS]要素を横並びに配置できるdisplay:table-cellの基本的な使い方と注意点
要素を横並びで配置するには、CSSのfloatやdisplay:inline-blockを用いるか、あるいは <table> タグを用いるか…の方法がありますが、 今回紹介させていただくdisplay:table-cellでも同じことができ...
CSS [CSS]画像を縮小表示させる際にIE7でもキレイに表示する方法
画像をCSSで縮小表示させる場合に、IE下位バージョンでは粗くなってしまい、キレイに表示されません。 IE6はあきらめるしかないですが、IE7の場合は画像の補間方法を指定することでそこそこキレイに表示させることができます。 IE 7でも縮小...
CSS擬似要素・擬似クラス [CSS]CSSで円形、三角形、台形、星形 などを表現する方法のまとめ
CSS3のborder-radiusやtransformなどを利用して、CSSだけで円形、三角形、台形、星形などのオブジェクトを表現する方法のまとめです。 円形 三角形 台形 星形 #star-five {margin: 50px 0;po...
CSS [CSS]IE6、IE7、IE8、IE9別のCSSハック一覧
IE6〜9用にそれぞれ個別にスタイルを適応させたい場合のCSSハックのまとめです。 よく忘れるので、個人的な備忘録もかねてのご紹介です。 IE6 IE7 IE6 + IE7 IE8 IE6 + IE7 + IE8 IE9
CSS擬似要素・擬似クラス [IE]IE6でも疑似クラスの:hoverを使う方法のまとめ
IE6 では疑似クラスの :hover が <a> タグ以外では使いないので、IE6対応として「ビヘイビア」と「Javascript のライブラリ」を使って hover をIE6でも利用する方法をまとめてみました。 csshover.htc...
CSS [CSS]IE6にposition:fixedを対応させる方法
CSSの position:fixed を利用することで要素を固定させることができます。 例えば「ヘッダーをページ上部に固定させる」「サイドメニューを固定させる」などなど。 しかしCSSのposition:fixedがIE6には対応していな...
CSSプロパティ [CSS]CSSで画像を透過させる際はIE6用にfilter:も併用する
リンク画像をロールオーバーさせる時など、要素を半透明にする場合はCSS の opacity プロパティを利用すれば動きます。 CSS3 からは opacity 1つで、モダンブラウザはほぼ動くようになったみたいですが、 IE6で動かない。。...
CSSプロパティ [IE]IE6〜IE8でも一部のCSS3プロパティが使えるPIE.htcの使い方と動かない時の対処法
IE下位バージョンでもCSS3のborder-radiusやbox-shadow、linear-gradientなどを利用できる便利なPIE.htc。 今回はこのPIE.htcファイルの基本的な設置方法から、動かない時の対処法まで簡単にまと...
CSSプロパティ [CSS]OpacityではなくRGBaで透過を指定することで文字の透過を防ぐ
CSSのopacityプロパティで透明度を調整できますが、「背景を透明度50%にしたい」と思ってopacityを使うと、背景だけでなくその上に載っているテキストや画像まで透明度が落ちてしまいます。(´・ω・｀) 背景だけ透明度を低くしたい場...
CSS [CSS]iframeを使わずCSSで擬似インラインフレームを作成する方法
iframeそのものを使うコトがほとんど無くなりましたが、ボックスにスクロールバーが付いたiframe的な見せ方はまだまだ健在です。 やり方としては、まずは親要素を指定の幅や高さで固定し、要素内のコンテンツがはみ出した部分はoverflow...
CSSスニペット [CSS]table td内の半角英数数字が改行されずに横にのびる問題を回避する方法
横にのびる例 デモ .no-break {word-break: normal}name1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg12345678...
CSS [CSS]text-shadowで文字を縁取りする方法
CSSのtext-shadowプロパティを活用することで、文字に縁取り効果を加えることができます。 縁取りは、テキストをより際立たせるためのデザイン要素として使用され、特に視認性を向上させたい場合に役立ちます。 この記事では、text-sh...
CSSスニペット [CSS]半角英数数字が改行されずに要素からはみ出る問題を回避する方法
要素からはみ出る例 デモ .no-break {word-wrap: normal}1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890abcdefg1234567890...