• RSS
[CSS]CSS でチェックボックスやラジオボタンを大きく表示する方法

フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。
続きを読む

[CSS]フォームの input type=file のボタンデザインを変更する方法

「ファイルを参照して下さい」などのデフォルトのデザインではなく、オリジナルで用意したボタン画像をクリックして、ブラウザのアップローダーを起動させる方法です。

テキストフォームやラジオボタンなどは、CSS 3のプロパティを利用すればかなり自由にデザインを変更できますが、ファイルアップロードボタンのデザイン変更はかなり難しいので、非常に使えるカスタマイズです。
続きを読む

[CSS]ol のリストで①や②などの丸数字を表示させる方法

稀に ol によるリストで丸数字を使う場合があるので備忘録としてまとめました。

ol li の list-stylenone で消しておいて、替わりに ① や ② などの「丸数字」を表示させる方法です。
続きを読む

[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」

IE7、IE8 のブラウザでもCSS3 の background-size:containbackground-size:cover を使用するためのjQuery プラグインが jquery.backgroundSize です。

そこまでしてIE 対応が必要か…の話は置いておいて、今回は jquery.backgroundSize の基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。
続きを読む

[CSS]リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

WEB上で簡単に「リボン風帯」のデザインを作って、HTML とCSS のコードを生成できるサービス 3D Ribbon Generator のご紹介です。

生成されるコードの量はかなり多いですが、リボン帯をCSS だけで一から作ろうと思うと結構大変なので、帯の色やサイズをかなり細かく指定できる3D Ribbon Generator は便利です。
続きを読む

[CSS]半角文字列を改行するword-break と word-wrap の使い方と違い

div や table などの要素から半角文字が突き抜けて表示されないように、CSS で強制的に折り返してあげる方法のご紹介です。

今まで文字の折り返しと言えばword-break を使う機会が多かったのですが、CSS 3より、word-wrap プロパティが利用できるようになり、主要ブラウザにも対応するようになりました。

今日は、このword-breakword-wrap のそれぞれの使い方に加えて、2 つのプロパティにどのような違いがあるのかについて簡単に説明させていただきます。
続きを読む

[CSS]border-radius などのコードをWEB上で簡単に生成できる「CSS3 Generator」

CSS3の border-radius や box-shadow などのプロパティの値をブラウザ上で設定し、コードを生成できるジェネレータ「CSS3 Generator」を使ってみました。

エディタで書いていると、特に transform とかはイメージが掴み辛いので面倒でしたが、CSS3 Generator のサイト上で実際の動きや変形具合を見ながら値を設定できるので非常に便利です。
続きを読む

[CSS]-webkit-box-reflect による鏡面効果の設定方法とAndroid への対応方法

CSS3 の -webkit-box-reflect プロパティを使って画像に「鏡面効果」を与える方法のご紹介です。

以前紹介させていただいた reflection.js のような Javascript を使う方法もありますが、SafariやChrome、iPhoneなどのスマホへの対応に限るものの、CSS だけで手軽に鏡面効果を演出できるので便利なプロパティだと思います。
続きを読む

[CSS]CSS3 の transform で文字を斜めに傾けて表示する方法

CSS3 の transform プロパティを使って要素を斜めに傾けて表示させることが可能です。

テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。
写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。
続きを読む

[CSS]img タグの画像を border-radius で角丸にして表示する方法

以前に [CSS]CSS3 のborder-radius で角丸を作る方法の記事でも border-radius の基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。
続きを読む

[CSS]背景画像のサイズを変更できるプロパティ「background-size」

CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-size を使うことができます。

background-image: で背景画像を指定して、background-size: で背景画像のサイズを調整してあげます。
続きを読む

[CSS]CSS3 の border-radius で要素や画像で円形に表示する方法

CSS3 の border-radius は要素を角丸にすることができる便利なプロパティで、
角丸の値を調整することで、画像や要素を正円(円形)で表示することもできます。

IE 7以下でも利用したい場合は(試していませんが)、PIE などを使えば実現可能かと思います。
続きを読む

[CSS]テキストに影を落とすCSS3 のプロパティ「text-shadow」

テキストに影を落とすCSS3 のプロパティ text-shadow についてまとめました。

前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。
続きを読む

[CSS]ボックスに影を付ける(ドロップシャドウ)CSS のプロパティ「box-shadow」

ボックスに影を付ける(ドロップシャドウ)ことができる CSS3 のプロパティが box-shadow です。

IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあるボタンをCSS だけで表現することもできますので、個人的には使用頻度の高いプロパティです。
続きを読む