見出し画像

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」プロパティで設定された順で並ぶ。


【出典】




いいなと思ったら応援しよう!