PC生活

2024年10月11日金曜日

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）変数を使用する

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);


<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）あるセレクタ以降に、違う値を変数に使用する

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

css部分

/*全域で使用可能*/

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

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

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