Category Archives: CSS3

<IE11対応>実務で使うGridレイアウト【機能編】

前回の記事(「実務で使うGridレイアウト【環境構築編(gulp)】」)では、最新版のAutoprefixerの導入と、Grid機能を有効にする設定について解説しました。今回は【機能編】として、IE11への対応を踏まえた上でGridレイアウトを利用するために気をつけなければならないポイントを解説します。 ※なお、Gridレイアウトそのものの基本的な使い方については既に習得している

<IE11対応>実務で使うGridレイアウト【環境構築編(gulp)】

皆さん、Gridレイアウト使ってますか? こう質問すると割と「使ってるよー」と答える方も多いかもしれません。 では「受託制作の実務現場でGridレイアウト使ってますか?」と質問したらどうでしょう? おそらく「バリバリ使ってるよー」という人の割合はグッと減るのではないかと思います。 私も、勉強はしていますがまだ実務での実戦投入は見送っています。 理由

[コピペで簡単]repeating-linear-gradient()でストライプ!

皆さんrepeating-linear-gradient()って使ってますか?私は使ってませんでした。というか割と最近まで存在すら知らなかったです。いつの間にこんなのできてたんですかね? 最近repeating-linear-gradient()の存在を知って、「これ便利じゃん!」と思ったので、同じように存在すら知らなかった方に向けて紹介したいと思います!「そんなもん前から使い倒しとるわい!」っていう方

各種ブラウザにおけるlinear-gradient対応状況について

ブラウザの種類・バージョンで書式が大きく違って何かとやっかいなlinear-gradient()の 対応状況をまとめてみました。 使用したサンプルはこちら。 表示結果比較の画面キャプチャはこちら 【結果】 ●-webkit-gradient(linear,left top,left bottom,from(#FC0),to(#fff)); [対応]Chrome/Safari4+/iOS4+/Android2.x/ ●-webkit-linear-gradient(top,#FC0,#fff); [対応]Chrome/Safari5+/iOS5+ ●-webkit-linear-gradient(to bottom,#FC0,

CSS3で背景グラデーションをピクセル指定する方法

CSS3を使えば画像を使わずにグラデーションを表示させることはできますが、 その書き方として紹介されている方法は、ボックスサイズに対して%(割合)でグラデーションの幅を指定する方法ばかりです。 参考:http://www.css-lecture.com/log/css3/css3-gradient.html そこで、「上から100pxまでグラデーションにして残りはベタにしたい」といったピクセルでグラデーションの幅を決