CSS3からの追加仕様②
①はこちら↓
(8)画像ボーダー
「border-image」を使うと、ボックスのボーダーに画像を表示できる。
(例)
border-image-source: “画像のURL”;
【設定できる値】
①none
画像なし(デフォルト)
②url (“画像のURL”)
相対/絶対パス、どちらでもOK
<border-image-sourceにセット追記できるプロパティ>
(1)border-image-slice
画像がびろーーーーんってなるやつ。(語彙力w)
・上の外側からの長さ
・右の外側からの長さ
・下の外側からの長さ
・左の外側からの長さ
で指定
【設定できる値】
①パーセント
画像の幅や高さに対しての%で指定(デフォルトは100%)
②数値
ピクセル数値(単位なしで指定)
③fill
画像中央部分をボックス背景として表示する
単独での指定は不可で、%や数値の後に半角スペースで区切って指定
(例)
border-image-slice:30 10 20 15 fill;
この例だと、上から30px、右から10px、下から20px、左から15pxで
スライスして、余った空間に残りの部分が「fill」でビヨーンと表示される。
(2)border-image-repeat
画像がダダダダって並ぶやつ。(語彙力w)
【設定できる値】
①stretch
繰返しなし(デフォルト)
領域に合わせて、横の辺は横向き、縦の辺は縦向きに引き伸ばされる
②repeat
繰り返し表示
③round
画像を繰り返し表示し、領域に合うようサイズ調整される。
(横方向と縦方向に拡大縮小)
④space
画像を繰り返し表示し、領域に合うようスペース調整される
(「タイルと目地」みたいなセットで繰り返される)
(例)
border-image-source: “画像のURL”;
border-image-repeat:repeat;
(9)背景画像表示領域
「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」プロパティで設定された順で並ぶ。
【出典】