CSSプロパティ の記事一覧
「ファイルを参照して下さい」などのデフォルトのデザインではなく、オリジナルで用意したボタン画像をクリックして、ブラウザのアップローダーを起動させる方法です。
テキストフォームやラジオボタンなどは、CSS 3のプロパティを利用すればかなり自由にデザインを変更できますが、ファイルアップロードボタンのデザイン変更はかなり難しいので、非常に使えるカスタマイズです。
続きを読む
稀に ol によるリストで丸数字を使う場合があるので備忘録としてまとめました。
ol li の list-style
は none
で消しておいて、替わりに ① や ② などの「丸数字」を表示させる方法です。
続きを読む
IE7、IE8 のブラウザでもCSS3 の background-size:contain
と background-size:cover
を使用するためのjQuery プラグインが jquery.backgroundSize です。
そこまでしてIE 対応が必要か…の話は置いておいて、今回は jquery.backgroundSize の基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。
続きを読む
WEB上で簡単に「リボン風帯」のデザインを作って、HTML とCSS のコードを生成できるサービス 3D Ribbon Generator のご紹介です。
生成されるコードの量はかなり多いですが、リボン帯をCSS だけで一から作ろうと思うと結構大変なので、帯の色やサイズをかなり細かく指定できる3D Ribbon Generator は便利です。
続きを読む
div や table などの要素から半角文字が突き抜けて表示されないように、CSS で強制的に折り返してあげる方法のご紹介です。
今まで文字の折り返しと言えばword-break
を使う機会が多かったのですが、CSS 3より、word-wrap
プロパティが利用できるようになり、主要ブラウザにも対応するようになりました。
今日は、このword-break
とword-wrap
のそれぞれの使い方に加えて、2 つのプロパティにどのような違いがあるのかについて簡単に説明させていただきます。
続きを読む
CSS3の border-radius や box-shadow などのプロパティの値をブラウザ上で設定し、コードを生成できるジェネレータ「CSS3 Generator」を使ってみました。
エディタで書いていると、特に transform とかはイメージが掴み辛いので面倒でしたが、CSS3 Generator のサイト上で実際の動きや変形具合を見ながら値を設定できるので非常に便利です。
続きを読む
CSS3 の -webkit-box-reflect
プロパティを使って画像に「鏡面効果」を与える方法のご紹介です。
以前紹介させていただいた reflection.js のような Javascript を使う方法もありますが、SafariやChrome、iPhoneなどのスマホへの対応に限るものの、CSS だけで手軽に鏡面効果を演出できるので便利なプロパティだと思います。
続きを読む
CSS3 の transform
プロパティを使って要素を斜めに傾けて表示させることが可能です。
テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。
写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。
続きを読む
以前に [CSS]CSS3 のborder-radius で角丸を作る方法の記事でも border-radius
の基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。
続きを読む
CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-size
を使うことができます。
background-image: で背景画像を指定して、background-size:
で背景画像のサイズを調整してあげます。
続きを読む
テキストに影を落とすCSS3 のプロパティ text-shadow
についてまとめました。
前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。
続きを読む
ボックスに影を付ける(ドロップシャドウ)ことができる CSS3 のプロパティが box-shadow
です。
IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあるボタンをCSS だけで表現することもできますので、個人的には使用頻度の高いプロパティです。
続きを読む