ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とはCSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線（ボーダー）」を付ける方法【 outline 】「枠線（ボーダー）」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加CSSプロパティ【背景関連】
【 background 】背景を設定する方法CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅（フェイス）を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字（漢字）と非表意文字（半角英数字）の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する
【CSS】「background」プロパティ
【CSS】
「background」プロパティ
「background」プロパティ
背景の設定に使われる「background」プロパティ。
背景カラーの指定や、背景画像の指定などができる「CSS」プロパティ。
複数の画像を重ねて表示することも可能で、
位置を指定して、表示位置をコントロールすることもできます。
INDEX
「background」プロパティとは
「background」プロパティは、
背景の
・カラー
・画像
・原点
・寸法
・反復方法
など、背景に関する設定を一括指定する「CSS」プロパティ。
「background」プロパティ系の「CSS」プロパティは、
・background-attachment
・background-clip
・background-color
・background-image
・background-origin
・background-position
・background-repeat
・background-size
・background-blend-mode
などがある。
「background」プロパティは、これらのプロパティを一括設定することができる。
Back
「background」系プロパティの種類
| プロパティ | 説明 |
|---|---|
| background-attachment |
背景画像をスクロールした時に固定するか、一緒にスクロールするかを設定するプロパティ。 設定値は、 fixed背景画像を固定する。スクロールしても、背景画像はそのままに、内容だけスクロールされる。 (「background-clip: text」とは両立できない) local背景画像は、スクロールされると内容と一緒に移動するが、親要素のスクロールには反応しない。scroll背景画像は、内容と共にスクロールされる。 |
| background-clip |
要素画像の境界線を設定するプロパティ。 設定値は、 border-boxボーダーラインの下までpadding-boxボーダーラインの手前（パディングまで）content-boxパディングの手前までで、コンテンツ領域の範囲内。textテキスト部分が透過して背景が見えるようになる。 |
| background-color |
背景のカラーを設定する |
| background-image |
背景画像を指定する |
| background-origin |
背景画像を配置する原点を指定するプロパティ。 設定値は、 border-boxボーダーラインの下までの領域の左上が原点padding-boxボーダーラインの手前（パディングまで）の領域の左上content-boxパディングの手前までのコンテンツ領域の左上。 |
| background-position |
背景画像の初期位置を設定する。 初期位置の原点は。「background-origin」で設定された原点からの相対位置。 設定値は、「top」「bottom」「left」「right」「center」や、 「％（パーセンテージ）」「cm」「px」「em」などの単位で数値入力も可能。 |
| background-repeat |
背景画像の繰り返し方法を設定する。 設定値は、「repeat-x」「repeat-y」「repeat」「space」「round」「no-repeat」など。 |
| background-size |
背景画像の配置方法・サイズを指定する。 設定値は、数値入力の他に、 contain画像の縦横比のまま、画像を拡大縮小して表示。cover画像の縦横比のまま、画像ができるだけ大きくなるよう拡大縮小する。空き領域ができてしまう場合は、上下または左右のどちらかをトリミングして表示。 auto縦横比を維持したまま、背景画像を拡大縮小する。 |
| background-blend-mode |
背景色もしくは、背景画像同士で、どのようにブレンドするかを設定するプロパティ。 |
Back
「background」プロパティの書式
background: green;
background: url("ファイル名.jpg") repeat-y;
background: url("ファイル名.jpg"),url("ファイル名.jpg");
background: border-box red;
background: no-repeat center/80% url("../ディレクトリ名/ファイル名.png");
rgba(255,255,255,1.00),
url("ファイル名.jpg"),
url("ファイル名.jpg");
background:
url('./ディレクトリ名/ファイル名.png') right 10% bottom 10%/20% auto no-repeat,
url('./ディレクトリ名/ファイル名.png') left 10% bottom/20% auto no-repeat,
url('./ディレクトリ名/ファイル名.png') left top/100% auto no-repeat;
background: url("ファイル名.jpg") repeat-y;
background: url("ファイル名.jpg"),url("ファイル名.jpg");
background: border-box red;
background: no-repeat center/80% url("../ディレクトリ名/ファイル名.png");
複数画像への設定
background:rgba(255,255,255,1.00),
url("ファイル名.jpg"),
url("ファイル名.jpg");
background:
url('./ディレクトリ名/ファイル名.png') right 10% bottom 10%/20% auto no-repeat,
url('./ディレクトリ名/ファイル名.png') left 10% bottom/20% auto no-repeat,
url('./ディレクトリ名/ファイル名.png') left top/100% auto no-repeat;
「background」プロパティは、
1つまたは複数の背景カラー・背景画像を「,（カンマ）」で区切って指定する。
プロパティ指定の最後は、「;（セミコロン）」を付ける。
Back
「background-image」の書式
background-image:
linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
url('./ディレクトリ/ディレクトリ/ファイル名.png');
background-image: url('./ディレクトリ/ディレクトリ/ファイル名.png'),url('./ディレクトリ/ディレクトリ/ファイル名.png');
background-image: url('./ディレクトリ/ディレクトリ/ファイル名.png'),url('./ディレクトリ/ディレクトリ/ファイル名.png');
画像指定は、最初に指定されたレイヤーが、手前にあるかのように描画される。
要素の境界は背景画像よりも上、 background-color は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 background-clip および background-origin プロパティによって定義されます。 指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を none 値であるかのように処理します。
Back
「background-position」の書式
背景画像の初期位置を設定する。
初期位置の原点は。「background-origin」で設定された原点からの相対位置。
設定値は、「top」「bottom」「left」「right」「center」や、
「％（パーセンテージ）」「cm」「px」「em」などの単位で数値入力も可能。
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
左上部の位置設定
background-position: 25% 75%;background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
複数画像の設定
background-position: 0 0, center;辺からの距離設定
background-position: bottom 10px right 20px;background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
Back
「background-size」の書式
背景画像の配置方法・サイズを指定する。
設定値は、数値入力の他に、
contain
画像の縦横比のまま、画像を拡大縮小して表示。cover
画像の縦横比のまま、画像ができるだけ大きくなるよう拡大縮小する。空き領域ができてしまう場合は、上下または左右のどちらかをトリミングして表示。
auto
縦横比を維持したまま、背景画像を拡大縮小する。「background-size」の設定値
background-size: cover;
background-size: contain;
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
background-size: contain;
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
縦横の設定
background-size: 50% auto;background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
複数の背景
background-size: auto, auto;background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
Back
「background-repeat」の書式
背景画像の繰り返し方法を設定する。
設定値は、「repeat-x」「repeat-y」「repeat」「space」「round」「no-repeat」など。
「background-repeat」の設定値
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
縦横の個別設定
background-repeat: repeat space;background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
Back
「background-color」の書式
「background-color」の設定値
background-color: red;
background-color: indigo;
background-color: #bbff00;
background-color: #11ffee00;
background-color: #11ffeeff;
background-color: rgb(255, 255, 128);
background-color: rgba(117, 190, 218, 0.5);
background-color: hsl(50, 33%, 25%);
background-color: hsla(50, 33%, 25%, 0.75);
background-color: currentcolor;
background-color: transparent;
background-color: indigo;
background-color: #bbff00;
background-color: #11ffee00;
background-color: #11ffeeff;
background-color: rgb(255, 255, 128);
background-color: rgba(117, 190, 218, 0.5);
background-color: hsl(50, 33%, 25%);
background-color: hsla(50, 33%, 25%, 0.75);
background-color: currentcolor;
background-color: transparent;
Back
「background-attachment」の書式
「background-attachment」プロパティは、
背景画像をスクロールしても、 ・背景画像固定して、コンテンツだけスクロールする
・背景画像もコンテンツも一緒にスクロールする
の2つを選択するプロパティ。
「background-attachment」プロパティのサンプルコード
p {
background-image: url("背景画像のURL"), url("背景画像のURL");
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat-y;
}
「background-attachment」プロパティは、
単一では機能しない。
背景画像を指定する「background-image」と
背景画像を繰り返し表示するかしないか設定する「background-repeat」
などと一緒に利用する。
background-image: url("背景画像のURL"), url("背景画像のURL");
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat-y;
}
「background-attachment」プロパティは、
単一では機能しない。
背景画像を指定する「background-image」と
背景画像を繰り返し表示するかしないか設定する「background-repeat」
などと一緒に利用する。
「background-attachment」の設定値
| 値 | 説明 |
|---|---|
| fixed |
背景は、ビューポートに固定されて、スクロールしても背景は同じ。 要素のスクロール：固定 親要素のスクロール：固定 「background-clip: text」と一緒には使えない。 |
| local |
背景は、コンテンツ内容に固定されて、スクロールされると一緒に動く。 要素のスクロール：動く 親要素のスクロール：動く |
| scroll |
背景は、要素自身に対する相対位置で固定されて、 コンテンツ内容と共にスクロールしない。 要素のスクロール：固定 親要素のスクロール：動く |
Back
