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】背景画像を表示場所に自動フィットさせる設定
【CSS】
背景画像を表示場所に自動フィットさせる設定
背景画像を表示場所に自動フィットさせる設定
「背景画像」を表示する場所のサイズに、
フィットさせたい時は、
「background-size」プロパティで、
背景画像の設定をします。
「background-size: cover」で、背景画像を表示範囲に自動フィットさせる方法
「background-size: cover」は、
背景画像を縦横比を維持したまま、「拡大」「縮小」し、表示範囲全体に表示する設定で、
表示範囲以上の部分は、自動でトリミングされる。
「background-size: cover」のサンプルコード
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
background-size: 30%;
background-size: 幅 高さ;
background-size: 200px 100px;
/* キーワード値 */
background-size: cover;
background-size: contain;
/* 値 1 つの構文 */
/* 画像の幅 (高さは 'auto' になる) */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* 値 2 つの構文 */
/* 1 つ目の値は画像の幅、2番目の値は高さ */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* 複数の背景 */
background-size: auto, auto; /* `auto auto` と混同しないでください */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* グローバル値 */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: unset;
background-size: contain;
background-repeat: no-repeat;
background-size: 30%;
background-size: 幅 高さ;
background-size: 200px 100px;
/* キーワード値 */
background-size: cover;
background-size: contain;
/* 値 1 つの構文 */
/* 画像の幅 (高さは 'auto' になる) */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* 値 2 つの構文 */
/* 1 つ目の値は画像の幅、2番目の値は高さ */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* 複数の背景 */
background-size: auto, auto; /* `auto auto` と混同しないでください */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* グローバル値 */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: unset;
「background-size」プロパティの設定値
| 値 | 説明 |
|---|---|
| contain |
「contain」は、画像の縦横比を維持したまま、できるだけ大きなサイズで表示範囲内に表示する。 画像より表示範囲が大きい場合、画像が繰り返し（リピート）タイル状に表示される。 画像を1度だけ表示させたい場合は、「background-repeat: no-repeat」を指定する必要がある。 |
| cover |
「cover」は、背景画像を「拡大」「縮小」し、表示範囲全体に表示する値。 画像以上の表示範囲の場合は、背景画像を自動で拡大し、 画像の比率と異なる場合は、 上下左右を自動トリミングし、 表示範囲全体に背景画像を表示する。 |
| auto |
「auto」は、背景画像の縦横比率を維持したまま、必要な分だけ「拡大」「縮小」をする。 |
| <length> |
指定したサイズに、背景画像を「拡大」「縮小」する値。 |
Back
サイズ指定で、背景画像を表示範囲にフィットさせる方法
「background-size」プロパティは、
数値で、背景画像の大きさを指定することができる。
サイズがわかっている場合は、
数値指定でも表示範囲にフィットさせることが可能。
表示範囲が変更になる可能性がある場合などは、
「cover」などを使用する。
「background-size: cover」のサンプルコード
background-size: 画像の幅;
background-size: 30%;
＊高さは 「auto」設定になる。
background-size: 幅 高さ;
background-size: 200px 100px;
/* 値 1 つの構文 */
/* 画像の幅 (高さは 'auto' になる) */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* 値 2 つの構文 */
/* 1 つ目の値は画像の幅、2番目の値は高さ */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
Back
