CSS一覧

2016.01.13

pxでもemでもないrem(ルートエム)でフォントサイズを指定する方法

pxでもemでもないrem(ルートエム)でフォントサイズを指定する方法

css3から設定できる様になった新しいフォントサイズ設定の単位rem(ルートエム)。rem?emと同じ様な感じなのでしょうか。いいえ、違います。emやpxで設定した場合は、「親要素」によってフォントサイズが決められてしまいます。「親」がフォントサイズ」15pxなら、「子」に10pxと設定しても子はその通りにはならないと思います。remの場合はroot(元)だけのフォントサイズに決められますので、親要素にフォントサイズを設定してもremには何の影響もありません。それがemやpxとは違う所です。元々存在していたpxやemのサイズ設定のおさらいも含めて説明を書いていきます。

2015.06.20

忘れがちなlist-style-typeマーカーの種類一覧をまとめておきます

忘れがちなlist-style-typeマーカーの種類一覧をまとめておきます

使うリストスタイルって殆ど限られています。黒丸とか四角とか。たまたま2桁の数字のリストスタイルを使う機会があったのですが、すっかり「えっ?」でした。検索すると出てはくるのですが、自分で覚えておきたいので一覧でまとめておきます。結構あるんですよね、リストスタイルマーカーって。

2015.06.13

CSS3から聞く様になったベンダープレフィックス(vendor prefix)って一体何?

CSS3から聞く様になったベンダープレフィックス(vendor-prefix)って一体何

ベンダープレフィックスは拡張機能ですよという明示をする為につける拡張子の事です。最近ではブラウザの種類も多く、各ブラウザで独自の拡張機能を実装したりしています。そんな時、ブラウザによって動きが違うと大変です。仕様のリスクに備えてchromeもコレsafariもコレと同じ事が出来る様に、プロパティ名や値の先頭にベンダープレフィックスを付ける事が推奨されています。

2015.06.09

CSSを使ってマウスオーバーした時に画像をゆっくりとフェードイン・アウトさせる方法

CSSを使ってマウスオーバーした時に画像をゆっくりとフェードイン・アウトさせる方法

ボタンにマウスを重ねると画像が変わったり、色が変わったりするマウスオーバー(ロールオーバー)アクション。パッと変わるのが普通に良くあるパターンですが、少し時間をかけてゆっくり薄くなるのも気持ちが良いものです。CSSを使ってマウスオーバーした際にゆっくりと色が薄くなっていく効果を付けます。

2015.05.28

CSSで共通の要素につけた背景を任意の要素だけ消す方法

02

ウェブサイトを作っていて共通箇所はなるべくCSSでまとめてしまいたい。でも、共通箇所の中で1つだけ違う設定が必要なんて事がたまにあります。背景色なんかも全部同じにしたい場合、例えばdiv全部に設定しちゃうなんて事もありますが、その中の1ヶ所は背景いらないんだよなぁ~って事がたまにありました。そんな時はその1ヶ所に別のclassを追加して、背景を消しちゃいましょう。

2015.05.23

セレクタ「*(アスタリスク)」を使って全ての要素にCSSを適用する方法

セレクタ「*(アスタリスク)」を使って全ての要素にCSSを適用する方法

ウェブサイトを作る時はページの共通マージンや、メニューの配置など、全体的にも個別でもベースになるCSSをいくつか必要とします。そんな時は新しいidやclassで囲む事が多いと思いますが、全体共通の場合は全ての要素に適用するCSSセレクタ「*」を使って対応しちゃいましょう。

2015.05.14

CSSで背景をブラウザ横100%で表示した時に横スクロールした時の背景を切れずに表示する方法

CSSで背景をブラウザ横100%で表示した時に横スクロールした時の背景を切れずに表示する方法

背景色でも背景画像でもブラウザ横100%で表示する事は普通にあると思います。背景の上にそのままコンテンツを展開する場合は問題ないのですが、中に「width固定」を入れると、ブラウザの横スクロールが出るまで縮めてスクロールすると、背景が切れている場合があります。なぜでしょうねぇ。

2015.05.06

CSSを使ってIEを含めた各ブラウザで角丸を表現する方法

CSSを使ってIEを含めた各ブラウザで角丸を表現する方法

角丸は元々画像をトリミングをし背景に設置して表現していましたが、CSS3.0になってから「border-radius」を使って角丸に対応する事が可能になりました。ですが、相変わらずIEを筆頭に各ブラウザで対応・未対応があります。各ブラウザで角丸になる様にCSSを設定しましょう。

2014.08.17

CSSで背景画像を100%で表示する方法をまとめました

CSSで背景画像を100%で表示する方法をまとめました

背景画像を使用する際方法は色々とありますね。レスポンシブWebデザインを使用した際は背景画像を使う事も多いと思います。今回は同じ背景画像を使った場合に幅一杯に背景を設置する方法をご紹介します。

2014.08.12

背景をrgbaで設定した時にIE8以下で透過する方法

rgbaとfileter

背景をrgbaで設定すると透過しやすいです。でもIE8以下だと透過せず背景色が無くなって表示されてしまいます。ではIE8以下でrgbaを使って背景を透過するにはどうしたら良いのでしょうか。設定方法をまとめてみました。