2015-06

スポンサーリンク
CSS

擬似要素とは

前回の記事で紹介した、擬似クラスと似てますが、 今回書く擬似要素は要素内のある場所を対象に適用させます。 書き方 説明 ...
CSS

擬似クラスってなに?

簡単に言うと、状況に合わせてスタイルを変える クラスのことです。 CSSで要素をしてい、何かしらのスタイルを適用して きました。今回亜、「状況」に応じて スタイルを適用するために擬似クラスを取り上げます。 擬似クラスで頻繁...
CSS

文字に影を設定する。

前回の記事で紹介したbox-shadowプロパティと 同じように文字にも影を付けることができます。 text-shadowプロパティを使います。 box-shadowプロパティと同様に、 影の距離、ぼかし、色を設定できます。 ...
CSS

ボックスに影をつける

ボックスに影を付ける時に使用するのが 「box-shadow」プロパティです。 これの値に影の距離やぼかしの距離、影の広がりの 数値を設定します。 それぞれの値は、半角スペースで区切ります。 水平方向・垂直方向以外の2つの影の...
CSS

円形グラデーションを設定する。

円形グラデーションは、ボックスの中心から外へ広がる グラデーションで、値は「radial-gradient」で表します。 書き方は以下のように書きます。 background:radial-gradient(contain, #f...
CSS

線形グラデーションを設定する。

CSS3から背景やボーダーにグラデーションを付すことが できるようになっています。 表現できるグラデーションには、円形グラデーションと 線形グラデーションの2つがあります。 値 ...
CSS

水平方向・垂直方向の形が異なる角丸を設定する。

今回書き留めておくのが、タイトルの通りです。 前回は水平方向と垂直方向の角丸が同じ場合を 紹介しました。今回は違う場合の設定方法を 紹介します。 今回はCSSのコード内にコメントを追記しました。 ...
CSS

物の角を丸くするborder-radiusプロパティ

<div><section>などブロックレベル要素に 背景色をつけたとき、その角は直角です。 この角をborder-radiusプロパティを使って丸く 表示することができます。角丸の形の値は、水平方向と 垂直...
CSS

コンテンツを透明にしたいときに使うopacityプロパティ

このプロパティはコンテンツの透明度を設定することができます。 透明度の表す数値は0~1.0で、0は完全に透明で1.0は 完全に不透明になります。
CSS

物の重なりの順番を設定するz-indexプロパティ

コンテンツの重なりの順番を設定するときに使用するプロパティは z-indexプロパティです。posisitonプロパティを一緒に使用することで 要素の重なりの順番を設定できます。z-indexは数値で設定し 数値が大きいほど上になりま...
スポンサーリンク
タイトルとURLをコピーしました