CSSプロパティ の記事一覧
[CSS]float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-block
で要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。
続きを読む
CSS3 より border-radius
のプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。
今回は border-radius
を使って様々な角丸のサンプルを紹介したいと思います。
続きを読む
<a>タグをクリックして何も起きないようにする、ということをしようと思います。
一番簡単な方法は、CSS3の pointer-events
を利用することですが、CSS3なのでIEでの動きは微妙。
スマフォサイトなら気にせずに使えるのかなという印象。
続きを読む
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 の opacity
プロパティを利用すれば動きます。
CSS3 からは opacity
1つで、モダンブラウザはほぼ動くようになったみたいですが、
IE6で動かない。。。
もうお決まりですね!!!
その場合は opacity
と合わせて filter
プロパティも同時に利用することで、IE6 でも透過が効くようにしてあげます。
続きを読む
IE下位バージョンでも CSS3 の border-radius
や box-shadow
、linear-gradient
などを利用できる便利な「PIE.htc」。
今回はこの PIE.htc ファイルの基本的な設置方法から「動かない時の対処法」まで簡単にまとめて紹介いたします。
続きを読む
CSS の opacity
プロパティで透明度を調整できますが、
「背景を透明度50%にしたい」
と思って opacity
を使うと、背景だけでなくその上に載っているテキストや画像まで透明度が落ちてしまいます。(´・ω・`)
「背景だけ透明度を落としたいんだよ!!」
という場合は、CSSファイルで opacity ではなく RGBa
を利用します。
続きを読む