CSS3からの追加仕様②

2020年1月23日 16:04

①はこちら↓

（８）画像ボーダー

「border-image」を使うと、ボックスのボーダーに画像を表示できる。

（例）

border-image-source: “画像のURL”;

【設定できる値】
　①none
　　画像なし（デフォルト）

　②url (“画像のURL”)
　　相対／絶対パス、どちらでもOK

＜border-image-sourceにセット追記できるプロパティ＞

（１）border-image-slice

　画像がびろーーーーんってなるやつ。（語彙力ｗ）

　・上の外側からの長さ
　・右の外側からの長さ
　・下の外側からの長さ
　・左の外側からの長さ
で指定

【設定できる値】

　①パーセント
　　画像の幅や高さに対しての%で指定（デフォルトは100%）

　②数値
　　ピクセル数値（単位なしで指定）

　③fill
　　画像中央部分をボックス背景として表示する
　　単独での指定は不可で、%や数値の後に半角スペースで区切って指定

（例）

border-image-slice:30 10 20 15 fill;

この例だと、上から30px、右から10px、下から20px、左から15pxで
スライスして、余った空間に残りの部分が「fill」でビヨーンと表示される。

（２）border-image-repeat

　画像がダダダダって並ぶやつ。（語彙力ｗ）

　【設定できる値】
　①stretch
　　繰返しなし（デフォルト）
　　領域に合わせて、横の辺は横向き、縦の辺は縦向きに引き伸ばされる

　②repeat
　　繰り返し表示

　③round
　　画像を繰り返し表示し、領域に合うようサイズ調整される。
　　（横方向と縦方向に拡大縮小）

　④space
　　画像を繰り返し表示し、領域に合うようスペース調整される
　　（「タイルと目地」みたいなセットで繰り返される）

（例）

border-image-source: “画像のURL”;
border-image-repeat:repeat;

（９）背景画像表示領域

「background-clip」プロパティを使うと、背景画像の表示領域を
指定できる。
paddingとかmarginとか微妙な空間に画像を含めるかどうか、の設定。

【設定できる値】

　①border-box
　　ボーダーを含めた要素の端まで表示

　②padding-box
　　ボーダーを除いた要素の内側（パディング領域）に表示

　③content-box
　　ボックス内の余白を含まない、要素の内容（コンテンツ領域）
　　に表示

（例）

.sample1{background-clip: border-box; }
.sample2{background-clip: padding-box; }
.sample3{background-clip: content-box; }

＜その他の背景画像表示系プロパティ＞

①background-origin

　背景画像をどこから始めるか（開始位置基準）の設定。

　【設定できる値】

　　①border-box
　　　ボーダーを含めた要素の端が基準

　　②padding-box
　　　ボーダーを除いた要素の内側（パディング領域）が基準

　　③content-box
　　　ボックス内の余白を含まない、要素の内容（コンテンツ領域）
　　　が基準

（例）

.sample1{background-origin: border-box; }
.sample2{background-origin: padding-box; }
.sample3{background-origin: content-box; }

　②background-size

　背景画像の表示サイズ設定。

　【設定できる値】

　　①cover
　　　横比を保ったまま領域をすべてカバー

　　②contain
　　　縦横比を保ったまま領域に収まる表示サイズに調整
　　　（ウィンドウに収まるように拡大縮小される）

　　③auto
　　　画像表示サイズは自動調整

　　④任意の数値＋単位
　　　画像幅と高さを半角スペースで区切って、
　　　単位付きの数値で指定。
　　　1つだけ指定した場合は、2つ目の値はautoになる。

　　⑤%値
　　　画像幅と高さを半角スペースで区切って%値で指定。
　　　値は表示領域に対する割合。
　　　1つだけ指定した場合は、2つ目の値はautoになる。

（例）

body{
 background-image: url(body.png);
 background-repeat: no-repeat;
 background-position: right top;
 background-size: contain;
}

（10）フレキシブルレイアウト

ウィンドウのサイズに合わせてレイアウト幅が変わる設定。

「flex-flow」プロパティを使うと、フレックスアイテムの
配置方向・折返し情報をまとめて設定できる。

（「flex-flow」＝「flex-direction」＋「flex-wrap」的な感じ）

大前提として、「display」プロパティをflexにする必要あり。

display: flex;

①まとめて設定する場合

「flex-flow:　-direction　-wrap」の順に設定する。

　【設定できる値】

　①-direction

　　row
　　　左から右（デフォルト）

　　row-reverse
　　　右から左

　　column
　　　上から下
　
　　column-reverse
　　　下から上

②-wrap

　nowrap
　　折り返しなし（デフォルト）

　wrap
　　折り返す

　wrap-reverse
　　逆方向に折り返す。
　　下から上に積み上がる。

（例）

.container {
  display: flex;
  flex-flow: row wrap;
}

②別個で設定する場合

①の内容で別個設定する場合には、こうなる。

（例）

.conatiner{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

＜おまけ＞

「order」プロパティをHTML側で使うと、フレックスコンテナ内の
アイテムの表示順序を指定できる。

（例）

<ul class="sample_menu">
    <li style="order:2;"><a href="#">メニュー1</a></li>
    <li style="order:3;"><a href="#">メニュー2</a></li>
    <li style="order:4;"><a href="#">メニュー3</a></li>
    <li style="order:1;"><a href="#">メニュー4</a></li>
</ul>

こうすると、「li」タグの記載順で上から並ぶのではなく、
「order」プロパティで設定された順で並ぶ。

【出典】

この記事が気に入ったらサポートをしてみませんか？