• RSS
[CSS]float を利用せずに display:inline-block で要素を横並びにする方法

グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSの floatdisplay を使うことが多いと思います。

floatdisplay とでは見え方にどのような違いがあるか?について、サンプルも交えて紹介いたします。
続きを読む

[IE]PIE.htc を利用したIE8 以下向けの表示サンプル

IE6、IE7、IE8 でも一部の CSS3 のプロパティが使える「PIE.htc」 の記事でも紹介させていただいた PIE.htc ファイルですが、実際にIE6、IE7、IE8 で PIE.htc を使った場合の見え方はどのようになるのか??について、サンプルをまとめてみました。
続きを読む

[CSS]CSS で印刷時のページ分割(改ページ)を行う方法

WEbページを印刷する場合、

「なんでここでページ分割されるの??」

なんてことがよく起こりますが、CSS の page-break-beforepage-break-after を使えば、ページ分割(改ページ)位置を指定してあげることができます。
続きを読む

[CSS]角丸をIE8以下でも利用できるようになる「border-radius.htc」の使い方と注意点

IE8以下のバージョンで「角丸」を実現させる方法は、PIE.htcIE-CSS3.htc などを使う方法もありますが、今回紹介させていただく border-radius.htc を使う方法もあります。

名前の通り border-radius のプロパティに特化した HTCファイルです。
続きを読む

[CSS]要素を横並びに配置できる display:table-cell の基本的な使い方と注意点

要素を横並びで配置するには、CSS の floatdisplay:inline-block を用いるか、あるいは <table> タグを用いるか…の方法がありますが、
今回紹介させていただく display:table-cell でも同じことができます。

float などとの大きな違いは「要素を均等幅で配置できる」ので、スマホのような可変のデザインにも適している点だと思います。
続きを読む

[CSS]CSSで画像を縮小表示させる際に、IE7でもキレイに表示する方法

画像をCSSで縮小表示させる場合に、IE下位バージョンでは粗くなってしまい、キレイに表示されません。

IE6はあきらめるしかないですが、IE7の場合は画像の補間方法を指定することでそこそこキレイに表示させることができます。
続きを読む

[CSS]CSS で円形、三角形、台形、星形 などを表現する方法のまとめ

CSS3 のborder-radiustransform などを利用して、CSS だけで円形、三角形、台形、星形などのオブジェクトを表現する方法のまとめです。
続きを読む

[CSS]IE6、IE7、IE8、IE9別のCSSハック一覧

IE6〜9 用にそれぞれ個別にスタイルを適応させたい場合のCSSハックのまとめです。

よく忘れるので、個人的な備忘録もかねてのご紹介です。
続きを読む

[IE]IE6でも 疑似クラスの :hover を使う方法のまとめ

IE6 では疑似クラスの :hover が <a> タグ以外では使いないので、IE6対応として「ビヘイビア」と「Javascript のライブラリ」を使って hover をIE6でも利用する方法をまとめてみました。
続きを読む

[CSS]IE6に position:fixed を対応させる方法

CSSの position:fixed を利用することで要素を固定させることができます。

例えば「ヘッダーをページ上部に固定させる」「サイドメニューを固定させる」などなど。

しかしCSSの position:fixed がIE6 には対応していないので、Fixed positioning というjavascript のお世話になることにします。
続きを読む

[CSS]CSSで画像を透過させる際は、IE6用に filter: も併用する

リンク画像をロールオーバーさせる時など、要素を半透明にする場合はCSS の opacity プロパティを利用すれば動きます。

CSS3 からは opacity 1つで、モダンブラウザはほぼ動くようになったみたいですが、

IE6で動かない。。。

もうお決まりですね!!!

その場合は opacity と合わせて filter プロパティも同時に利用することで、IE6 でも透過が効くようにしてあげます。
続きを読む

[CSS]Opacityではなく、RGBaで透過を指定することで文字の透過を防ぐ

CSS の opacity プロパティで透明度を調整できますが、

「背景を透明度50%にしたい」

と思って opacity を使うと、背景だけでなくその上に載っているテキストや画像まで透明度が落ちてしまいます。(´・ω・`)

「背景だけ透明度を落としたいんだよ!!」

という場合は、CSSファイルで opacity ではなく RGBa を利用します。
続きを読む

[CSS]iframeを使わず、CSS で擬似インラインフレームを作成する方法

iframe そのものを使うコトがほとんど無くなりましたが、ボックスにスクロールバーが付いた iframe 的な見せ方はまだまだ健在です。

やり方としては、まずは親要素を指定の幅や高さで固定し、要素内のコンテンツがはみ出した部分は overflow を使って制御するという感じです。
続きを読む