CSS3 の記事一覧
![[CSS]border-radius などのコードをWEB上で簡単に生成できる「CSS3 Generator」](https://www.webantena.net/wp-content/uploads/2013/08/css3generator.png)
CSS3の border-radius や box-shadow などのプロパティの値をブラウザ上で設定し、コードを生成できるジェネレータ「CSS3 Generator」を使ってみました。
エディタで書いていると、特に transform とかはイメージが掴み辛いので面倒でしたが、CSS3 Generator のサイト上で実際の動きや変形具合を見ながら値を設定できるので非常に便利です。
続きを読む
![CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」](https://www.webantena.net/wp-content/uploads/2013/08/cssloadnet.png)
loading 画像が簡単に作れるサービス の記事でも紹介させていただいた Ajaxload を使えば loading 画像を作成できますが、今回紹介させていただく CSS Load.net を利用すれば「CSS のみ」によるローディングアニメーションを簡単に作ることができます。
ローディングの大きさや色、スピードを設定すれば CSS ファイルに記述するコードが出力されますので便利です。
続きを読む
![[CSS]CSS3 の transform で文字を斜めに傾けて表示する方法](https://www.webantena.net/wp-content/uploads/2013/07/css3transformrotate.png)
CSS3 の transform
プロパティを使って要素を斜めに傾けて表示させることが可能です。
テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。
写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。
続きを読む
![[CSS]img タグの画像を border-radius で角丸にして表示する方法](https://www.webantena.net/wp-content/uploads/2013/04/borderradisuimg.png)
以前に [CSS]CSS3 のborder-radius で角丸を作る方法の記事でも border-radius
の基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。
続きを読む
![[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法](https://www.webantena.net/wp-content/uploads/2013/04/webkittaphighlightcolor.png)
スマホサイトでリンクをタップすると、iPhone(iOS)ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。
このグレーの影やオレンジの枠(ハイライト表示)をCSS の -webkit-tap-highlight-color
で無効にしたり、ハイライトカラーを変更する方法をまとめました。
続きを読む
![[JS]IEでも CSS3の Media Queries を対応させるスクリプト「css3-mediaqueries.js」](https://www.webantena.net/wp-content/uploads/2013/03/css3mediaqueries.png)
なんて素敵なスクリプト! さすがGoogle先生!!!
最近はレスポンシブWEBデザインのサイトも増えてきましたので、ブラウザの幅やデバイスによってサイトの見せ方を変える必要もあるんです。
例えば、一見普通のPCサイトと思いきや、ブラウザの幅を縮めてみるとスマフォでもちゃんと収まって見えるように最適化されてある!!!みたいな。
これを実現する方法として CSS3 の Media Queries を利用する訳ですが、ここでもやっぱりIE がすんなり話を通してくれません > <;
ですので、IEでも Media Queries を利用するために、Google Code で公開されている css3-mediaqueries.js を利用します。
続きを読む
![[CSS]マウスでドラッグした際の文字を選択範囲の色(ハイライトカラー)を変更する方法](https://www.webantena.net/wp-content/uploads/2013/03/css3selection.png)
マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。
通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3 の擬似要素 selection
を用いることで、このハイライトカラーを変更することができます。
続きを読む
![[CSS]背景画像のサイズを変更できるプロパティ「background-size」](https://www.webantena.net/wp-content/uploads/2013/03/backgroundsize.png)
CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-size
を使うことができます。
background-image: で背景画像を指定して、background-size:
で背景画像のサイズを調整してあげます。
続きを読む
![[CSS]テキストに影を落とすCSS3 のプロパティ「text-shadow」](https://www.webantena.net/wp-content/uploads/2013/02/textshadow.png)
テキストに影を落とすCSS3 のプロパティ text-shadow
についてまとめました。
前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。
続きを読む
![[CSS]ボックスに影を付ける(ドロップシャドウ)CSS のプロパティ「box-shadow」](https://www.webantena.net/wp-content/uploads/2013/01/boxshadow.png)
ボックスに影を付ける(ドロップシャドウ)ことができる CSS3 のプロパティが box-shadow
です。
IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあるボタンをCSS だけで表現することもできますので、個人的には使用頻度の高いプロパティです。
続きを読む
![[CSS]CSSの pointer-events で <a> タグのリンクを無効化する方法](https://www.webantena.net/wp-content/uploads/2012/12/css.png)
<a>タグをクリックして何も起きないようにする、ということをしようと思います。
一番簡単な方法は、CSS3の pointer-events
を利用することですが、CSS3なのでIEでの動きは微妙。
スマフォサイトなら気にせずに使えるのかなという印象。
続きを読む
![[IE]PIE.htc を利用したIE8 以下向けの表示サンプル](https://www.webantena.net/wp-content/uploads/2012/10/css3pie.png)
IE6、IE7、IE8 でも一部の CSS3 のプロパティが使える「PIE.htc」 の記事でも紹介させていただいた PIE.htc ファイルですが、実際にIE6、IE7、IE8 で PIE.htc を使った場合の見え方はどのようになるのか??について、サンプルをまとめてみました。
続きを読む
![[CSS]角丸をIE8以下でも利用できるようになる「border-radius.htc」の使い方と注意点](https://www.webantena.net/wp-content/uploads/2012/10/borderradiushtc.png)
IE8以下のバージョンで「角丸」を実現させる方法は、PIE.htc や IE-CSS3.htc などを使う方法もありますが、今回紹介させていただく border-radius.htc を使う方法もあります。
名前の通り border-radius
のプロパティに特化した HTCファイルです。
続きを読む