SVGを使って境界線をデザインするのとその他便利なcss

（1）SVGを使って境界線をデザインする

html部分

<div class="sen"></div>
 

CSSの部分

基本的な記述はこれでOK。詳細については、順次示していく。

<style>

.sen {
 
    /*---解説1*/
    position: relative;
    
    /*---解説2*/
    width: 100%;
    height: 25px;
    
    /*---解説3*/
    /*上右下左の間隔を一括で決める*/
    margin: 40px 0px -30px 0px;
    
    /*上右下左の間隔を別々に決める*/
    margin-top: 40px;
    margin-right: 0px
    margin-bottom: -30px
    margin-left: 0px;
    
    /*---解説4*/
    /*上右下左を一括で決める*/
    border: 2px solid red;
    
    /*上右下左を別々に決める*/
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    border-right: 2px solid red;
    border-left: 2px solid red;    
    
    /*解説5*/
    background-color: skyblue;

    /*解説6*/
    clip-path: polygon(1% 30%,  3% 40%,  36% 40%,  39% 100%,  55% 100%,  58% 40%,  95% 40%,  97% 30%,  97% 0%,  80% 1%,  77% 30%,  18% 30%,  15% 1%,  1% 1%,  1% 30%);      
}

</style>

実際の表示

●解説1

・potitionは、これから描く図形のスタート地点決め的な記述で必須項目。

static	初期値(何も記述しなければこれになる) 位置を指定できない 重なり順を指定できない 要素の高さを保持する位置の指定は何もしていない positionプロパティの解除に使用される。
absolute	基点からの絶対配置を指定する。
relative	基点からの相対配置を指定する。
fixed	画面の絶対配置を指定する。 ページではなく画面に表示されている領域を起点として配置できる。 スクロールされず、位置を固定できる。
sticky	画面の絶対配置を指定するが、fixedとは少し違う。 古いブラウザではサポートされていない。 全体をdivで囲う事。 親要素(stickyのある段落)はスクロールされず、子要素(stickyのない段落)がスクロールされる。 子要素がなくなると、親要素はスクロールされる。 z-indexで重なり順を決める。

●解説2

・これから描く図形の、描画範囲を決める記述で指定必須。
・単位は、pxでも%でも他の単位でも良い。
・widthは横幅、heightは縦幅。

●解説3

・marginは、描画範囲の外側の間隔を決める記述。
・まとめて記述してもいいし、各辺毎に記述しても良い。
・描画範囲内部の間隔はpaddingを使用。

●解説4

・borderは、描画範囲の境界の色を決める記述。
・まとめて記述してもいいし、各辺毎に記述しても良い。

●解説5

・background-colorは、これから描く図形の色を決める記述。
・切り抜かれた描画範囲の色=図形の色を、決めるためのもの。
・色の代わりに画像を指定したり、アニメーションを指定できる。
・何か模様を付けたい場合は、背景画像に書き込む。図形そのものを修飾する事はできない。

●解説6

・clip-pathは、解説2で決めた領域を、切り抜く座標を決めるための記述。図形を描くのではない。
・図形の内側の領域が透過になって、下地にあたる解説5の色が表示される。
・描画範囲の左上を(0,0)として座標値を決める。
・polygonは、複数の座標を指定して図形を描く。その他、circle()=円形、ellipse()=楕円形、inset()=四角形。
・図形の境界色や太さは指定できない。塗色も指定できない。(透過なので)
・書式　clip-path: polygon(値X-1 値Y-1 , 値X-2 値Y-2 ,･････)
　[①単位は%かpx　②2つで1組　③最後の値は原点に戻す]
・領域内(ボーダー含む)を切り抜くので、解説4の境界を見せるには座標指定を境界位置より内側にする。(0 0→1 1)

●その他

・clip-path内に、文字を入れたい場合は、before、after　を使う。
・<style>内で定義しておくと、値を変えたい場合に便利。

.sen::after {
content: "GANDUM";/*表示文字*/
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* 文字色を指定 */
font-size: x-small; /* 文字サイズを指定 */
font-weight:bold;
}

.sen::before {
content: "";/*文字が無くても記述必要*/
position: absolute;
top: 52%; /* 位置を調整 */
left: 43%; /* 位置を調整 */
width: 7px; /* 丸のサイズ */
height: 7px; /* 丸のサイズ */
background-color: var(--sc2); /* 丸の色 */
border-radius: 50%; /* 丸にする */
}

（2）変数を使用する

<style>内で定義しておくと、値を変えたい場合に便利。

html部分

<!-- 全域で使用可能 -->
 border-top: 2px solid var(--sc1);
 border-bottom: 2px solid var(--sc2);
 border-right: 2px solid var(--sc3);
 border-left: 2px solid var(--sc4);

<!-- セレクタ 'iti' 内でのみ使用可能 -->
<div class="iti">
 border-top: 2px solid var(--sc1);
 border-bottom: 2px solid var(--sc2);
 border-right: 2px solid var(--sc3);
 border-left: 2px solid var(--sc4);
</div>

css部分

/* 全域で使用可能 */
 :root {
  --sc1: red;
  --sc2: blue;
  --sc3: black;
  --sc4: yellow;
}

/* セレクタ'iti'内でのみ使用可能 */
 .iti {
  --sc1: pink;
  --sc2: pink;
  --sc3: pink;
  --sc4: pink;
}

（3）あるセレクタ以降に、違う値を変数に使用する

<style>内で定義しておくと、指定したセレクタ以降、値を変えたい場合に便利。

html部分
ページ内にダミー(?)で置いておく。これ以降は、#kokoで定義された変数の値が適用される。

<div id="#koko"></div>

css部分

/*全域で使用可能*/

 :root {
  --sc1: red;
  --sc2: blue;
  --sc3: black;
  --sc4: yellow;
}

/*idが、koko　以降に使用可能 */

#koko ~ * {
  --sc1: pink;
  --sc2: pink;
  --sc3: pink;
  --sc4: pink;
}