カテゴリー別アーカイブ: プロパティ・値

backgroundの背景画像と背景色-CSS背景の透過の解決方法

cssによる背景色や背景画像の透過指定方法は、主に2種類の指定方法があり希望するビジュアル効果による指定方法
の解決方法である。

単純に要素透過させたい場合

opacity:0.5;

とすることでレイヤー自体を透過させることができる。
ただこの場合は、子レイヤーすべてと背景とともに文字が含まれていた場合、文字も透過されてしまうので、
背景色のみを透過させる場合は、

background: rgba(255, 255, 255, 1.0);と指定
とする。

解決方法の補足として、背景画像のみを透過させたい場合は、background:rgbaプロパティで値を指定するか、
背景色のみを透過させるレイヤーを内部に制作して、背景色を透過させることで疑似的に背景画像を透過させる方法のいずれかとなる
があり、backgroundについての特性です。

問題解決カテゴリーとしては、背景画像と背景色についてのCSS背景の透過に分類される。

backgroundのサイズ変更-CSS背景画像のサイズを変更するの解決方法

backgroundで指定した背景画像のサイズ変更の指定方法と記述の解決方法である。

背景画像サイズを変更したいCSSセレクタのbackground-sizeプロパティで値を指定しますとする。background-size:50px 100px;background-size:50% 100%;

解決方法の補足として、値は通常の指定方法、widthやheightautoやパーセンテージ、pxなどが指定可能
があり、backgroundについての特性です。

問題解決カテゴリーとしては、サイズ変更についてのCSS背景画像のサイズを変更するに分類される。

情報について、検索エンジンでは下記の関連情報での組み合わせでインデックスされている。
css background-size
webkit-background-size
background-size cover
background-size:contain
background-size ie
background-size ie8
background-size android
background-size ie9
background-position 右から
background-size 効かない

15分で理解するCSS position

複雑なレイアウトやブロック要素の重なりを回避するために使用頻度が高いCSSのpositonプロパティ。

デフォルトではstaticとなっており指定しなくてもしても関係ない、位置指定無効値といったところ。

fixedとはviewport(画面表示領域)に対して相対的な絶対位置を指定する値。
いつも画面上、もしくは表示領域上の定位置を陣取る”花見の場所取り”的なプロパティ値。

relativeはviewportまたは入れ子された親要素を基準にして相対的な位置をとる。直上の顔色を見ながら立ち位置を柔軟に変え、同じ位置関係であれば他のブロック要素などもお構いなしの心臓の強さ。

absoluteは直親のタグ内の左上を基準として絶対位置に配置される。スクロールの影響も受けるので、fixedとは似て非なる絶対位置主義者。頑固で融通が利かない。relativeとは常に相いれないで重なりやすい。

表示領域の定位置=fixed

親ブロック要素内の定位置=absolute

親ブロック要素位置に対して相対位置=relative

忘れてよいプロパティ値=static

といったところだろうか。