• RSS
[CSS]CSS の display:inline-block で並べた要素間の隙間を埋める方法

[CSS]float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-block で要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。
続きを読む

[CSS]CSS3 のborder-radius で角丸を作る方法

CSS3 より border-radius のプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。

今回は border-radius を使って様々な角丸のサンプルを紹介したいと思います。
続きを読む

[CSS]CSSの pointer-events で <a> タグのリンクを無効化する方法

<a>タグをクリックして何も起きないようにする、ということをしようと思います。

一番簡単な方法は、CSS3の pointer-events を利用することですが、CSS3なのでIEでの動きは微妙。

スマフォサイトなら気にせずに使えるのかなという印象。
続きを読む

[CSS]スマホサイトで、端末を横にしても文字サイズを拡大させない方法

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

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

[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]CSSで画像を透過させる際は、IE6用に filter: も併用する

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

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

IE6で動かない。。。

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

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

[IE]IE6、IE7、IE8 でも一部の CSS3 のプロパティが使える「PIE.htc」

IE下位バージョンでも CSS3 の border-radiusbox-shadowlinear-gradient などを利用できる便利な「PIE.htc」。

今回はこの PIE.htc ファイルの基本的な設置方法から「動かない時の対処法」まで簡単にまとめて紹介いたします。
続きを読む

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

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

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

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

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

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