iPhone など向けにスマホサイトを作っていると「端末を横にすると、文字が拡大表示されちゃう！」と困った経験があるかもしれませんが、

CSS の -webkit-text-size-adjust:100% を使って端末横回転時の文字拡大表示を防ぎます。
続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

IE6で動かない。。。

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

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

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

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

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

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

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

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

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