CSS CSSの基本 Time

形を作ります

ヤシ２１

●

秒針

長針

短針

divディブ,backgroundバックグランド,borderボーダー,topトップ

四角形を作る方法

表現をしようとするときに,図形はとても強力なアイテムです。
基本的な四角を描きます。

<div></div>

HTMLにdiv

先ずdivタグを書きます。

実行

プログラム

  <div class="div1"></div>

説明

divタグを書きクラス名を書きます。何も起きません。

width: 幅;
height: 高さ;

CSSで形の指示

CSSで形を作ります。
(幅)width: 5vw;(高さ)height: 10vw;

実行

プログラム

HTML
<div class="div1"></div>

CSS
.div1{
  width: 5vw;height: 10vw;}

説明

横5vwX縦10vwの箱を書くように指示しました。クラス名div1が正しく書かれていることを確認します。

着色

形が現れます。

background-color: #xyz;

CSSで色を着けます。

実行

プログラム

HTML
<div class="div2"></div>

CSS
.div2{
  width: 5vw;height: 10vw;
  background-color: #bcd;}

説明

これで,形が見えるようになります。

四角形描画

divタグにCSSで色を付けます。

background-color: #xyz;

xyzには00からffまでの16進数3桁または6桁が入ります。

実行結果

divA1

divB1

プログラム

HTML
<div class="divA1">divA1</div>

/*CSS*/
.divA1{
  width: 5vw;height: 10vw;
  background-color: #ace;}

HTML
<div class="divB1">divB1</div>

/*CSS*/
.divB1{
  width: 5vw;height: 10vw;
  background-color: #2ce;}

ファイル

実際のファイル

050形を作る.html
style050_0.css

のように2つのファイルになっていて, 中にHTML,CSSのプログラムがそれぞれ入っています。

先をとがらせる,先を丸く

border-radius: 10vw 10vw 0vw 0vw;

border-radius: 数値;を使うと角を丸くできます。
1つの数字で4隅を丸くできます。 4つの数字でそれぞれの隅の丸みを変えることができます。

実行結果

ANDやORのロジック回路の形を作るため工夫しました。

transform: matrix(1,0,0,2,0,0);を使いましたが,scale(1,2) でも同じです。

プログラム

HTML
<div class="divA2"></div>

/*CSS*/
.divA2{
  width: 5vw;height: 2.5vw;
  background-color: #5ce;
  border-radius: 10vw 10vw 0vw 0vw;
  transform: matrix(1,0,0,2,0,0);
  position: relative; top: 4vw;left: 0vw;}

HTML
<div class="divB2"></div>

.divB2{
  width: 5vw;height: 5vw;
  background-color: #5ce;
  border-radius: 10vw 10vw 0vw 0vw;
  position: relative;
  top: 0vw;left: 7vw;}

応用

葉っぱ? ,唇,ラグビーボール。

<div class="contA">
  <div class="divB5"></div>
  <div class="divB6"></div>
  <div class="divB7"></div>
</div>
.divB5{
  width: 5vw;height: 5vw;
  background-color: #143;
  border-radius:5vw 0vw 5vw 0vw;}
.divB6{
  width: 5vw;height: 5vw;
  background-color: #e43;
  border-radius:5vw 0vw 3vw 0vw;}          
.divB7{
  width: 5vw;height: 5vw;
  background-color: #842;
  border-radius:2vw 9vw 2vw 9vw;}

<div class="divB5 border1"></div>  
<div class="divB6 border1"></div>  
<div class="divB7 border1"></div>  
.border1{
  background-color:transparent;
  border:0.1vw solid #800;}
borderにしました。

半分

実行

少し形を変えます。

幅を半分にして,radiusを1つにしました。

プログラム

HTML
<div class="divA3">A3</div>
<div class="divB3">B3</div>

CSS
.divA3{
  width: 2.5vw;height: 2.5vw;
  background-color: #922;
  border-radius: 0vw 10vw 0vw 0vw;
  transform: scale(1,2);
  position: relative;top: 4vw;left: 0vw;}
.divB3{
  width: 2.5vw;height: 5vw;
  background-color: #922;
  border-radius: 0vw 10vw 0vw 0vw;
  position: relative;
  top: 0vw;left: 7vw;}

応用

divは便利に使えるタグです。工夫するといろいろな形を作ることができます。

oooooo目

船でしょうか

逆さにすると特急電車？

<div class="divB4"> oooooo目</div> .divB4{ width: 17vw;height: 3vw; background-color: #282; border-radius: 0vw 0vw 10vw 0vw; border-top: 1vw solid #123;
border-bottom: 1vw solid #14f;

三角形を作ります

中身ではなくて,輪郭を使います。

border:ボーダ(輪郭)

divタグのborder:に色を付けて形を作ります。

border: 〇vw solid #xyz;

〇の中には太さが入ります。vwの単位も変更可です。(pxなど)
xyzは色です。transparentならば透明になります。

実行結果

divタグで四角を作り周りにborderを付けます。

div0

プログラム

HTML
<div class="div0">div0</div>

CSS
.div0{
  width: 20vw;height: 10vw;
  background-color: #84e;
  border:1vw solid #800}

divの四角の周りに枠ができます。

説明

枠の各部を色分け

HTML
  <div class="div00"></div>
CSS
.div00{
  width: 10vw;height: 7vw;
  background-color: #84e;
  border: 1vw solid #880;
  border-top-color: #080;
  border-right-color: #800;
  border-left-color: #008;}

divを消します。

色分けをして,よく見ると,枠は台形になっています。 divを小さくして,点になるようにすると,三角ができます。

borderを色分けします。

border-top-color: #080;

borderの上部を緑色にします。
border-right-color: #800;右は赤
border-left-color: #008;左は青

実行結果

divを0X0にします

それぞれに色を付けます。

緑,赤,青になりました。元のボーダはtransparentなので色を付けていない bottomは透明です。

プログラム

HTML
<div class="triangle1"></div>

/*CSS*/
.triangle1{
  width: 0vw;height: 0vw;
  border: 3vw solid transparent;
  border-top-color: #080;/*緑*/
  border-right-color: #800;/*赤*/
  border-left-color: #008;}/*青*/

border: 3vw solid transparent; borderを最初は透明に設定します。

三角

単体の三角形

HTML
<div class="triangle0"></div>

CSS
.triangle0{
  width: 0vw;height: 0vw;
  border: 3vw solid transparent;
  border-bottom-color: #bb0;}

border各部にスタイルを付けます。

HTML
<div class="triangle2"></div>

CSS
.triangle2{
  width: 0vw;height: 0vw;
  border-top: 1vw solid #880;
  border-right: 3vw solid #800;
  border-bottom: 21vw solid #080;
  border-left: 5vw solid #008;}

いろいろな形の三角形ができます。いらない部分はtransparentとすれば特定の形だけを得ることができます。

borderの一つを高さ0にすると直角三角形を作ることができます。

HTML
<div class="triangle3"></div>

CSS
.triangle3{
  width: 0vw;height: 0vw;
  border-top: 0vw;
  border-right: 3vw solid #800;
  border-bottom: 4vw solid #080;
  border-left: 4vw solid #008;}

青は直角に等辺三角形
赤は3,4,5の直角三角形です。

三角形を作ります2

実行結果

赤い四角が元のdivです。緑の三角がbefor, 右の4つの台形がafterです。 beforとafterは隣接しています。

プログラム

HTML
<div class="triangle"></div>

/*CSS*/
.triangle{
  width: 7vw;height: 3vw;
  background-color: #800;}
.triangle::before{
  border: 3vw solid transparent;
  border-top-color: #080;
  content: "";}
.triangle::after{
  border: 5vw solid rgba(178,178,178,0.5);
  border-top-color: #008;
  border-right-color: #088;
  border-bottom-color: #808;
  /*font-size: 0vw;*/content: "3";}

感想

::before,::afterを使うと1つの要素で3つの三角形を作ることができます。
最後の行の/*font-size: 0vw;*/を生かすと "3"が消えて頂点がとんがります。content:"" をとってしまうと表示はなくなります。

その他の形

実行結果

or回路のロジック図です。

borderで作ったので輪郭は作れません。

プログラム

HTML
<div class="orR"></div>

CSS
.orR{
  width: 0vw;height: 0vw;
  border: 4vw solid transparent;
  border-top-color: #145;
  border-right-color: #145;
  border-radius: 10vw 0vw 10vw 0vw;
  transform: matrix(1,-0.6,1,0.6,0,0);}

考察

borderが台形でできていることで, いろいろな形を作ることができました。工夫していけばさらに多くの形を作ることができると思います。

background-image:repeating-linear-gradient

(45deg,/*45度傾けます*/
#000,#000 0.1vw ,/*0.1vwの幅の黒い線を引きます*/
transparent 0.1vw,/*バックグランドカラーは透明にします*/
transparent 3.5vw);/*間隔を3.5vwとします*/

実行結果

別のor回路のロジック図です。

底辺がへこむと完璧です。

プログラム

HTML
<div class="orRb"></div>

CSS
.orRb{
  width: 5vw;height: 5vw;
  border: 0.1vw solid transparent;
  border-top-color: #000;
  border-right-color: #000;
  background-image:
  repeating-linear-gradient(45deg,
  #000,#000 0.1vw ,transparent 0.1vw,
  transparent 3.5vw);
  border-radius: 10vw 0vw 10vw 3vw;
  transform: rotate(-45deg)}

修正

2つのdivを使えば作れます。

HTML  
<div class="orRc"></div>
<div class="orRd"></div>
CSS
.orRc{
  width: 5vw;height: 5vw;
  border: 0.1vw solid transparent;
  border-top-color: #000;
  border-right-color: #000;
  border-radius: 10vw 0vw 10vw 3vw;
  transform: rotate(-45deg)}
.orRd{
  width: 5vw;height: 4vw;
  border: 0.1vw solid transparent;
  border-top-color: #000;
  border-radius: 10vw;
  position: relative;top: -3.2vw;}

3つ使うと一緒に動かせます、

実行結果

複雑

borderってこのような形も作れました。

プログラム

HTML
<div class="tr3"></div>

CSS 
.tr3{
  position: relative;top: 0vw;left: -3vw;
  opacity: 0.6;
  border: 4vw solid rgba(088,088,088,0.3);
  border-radius: 0vw 25vw 5vw 2vw;
  margin: 5vw;
  padding: 2vw;
  border-top-color: #008;
  border-right-color: #088;
  border-bottom-color: #808;
  font-size: 10vw;
  content: "3";}

備考

機種によって見え方は異なります。何かに使えるかもしれないような形です。顕微鏡のアームに似ています。

実行結果

円

プログラム

HTML
<div class="circle"></div>  

CSS
.circle{
  width: 4vw;height: 4vw;
  background-color: #800;
  border-radius: 4vw;}

border:

HTML
<div class="circle2"></div>

CSS
.circle2{
  width: 0vw;height: 0vw;
  border: 4vw solid #888;
  border-radius: 10vw;}

実行結果

楕円

プログラム

HTML
<div class="ellipse"></div>  

CSS
.ellipse{
  width: 4vw;height: 4vw;
  background-color: #800;
  border-radius: 4vw;
  transform: scale(1.4,1);}

傾けます

HTML
<div class="ellipse"></div>  

CSS
.ellipse2{
  width: 10vw;height: 10vw;
  background-color: #800;
  border-radius: 10vw;
  transform: rotateX(45deg) rotateY(45deg);}

実行結果

輪

プログラム

HTML
<div class="ring"></div>  

CSS
.ring{
  width: 3vw;height: 3vw;
  border: 0.5vw solid #007;
  border-radius: 3vw;}

傾けます

HTML
<div class="ring2"></div>  

CSS
.ring2{
  width: 8vw;height: 8vw;
  border: 1vw solid #007;
  border-radius: 8vw;
  transform: rotateX(45deg) rotateY(45deg);}

実行結果

二重丸

プログラム

<div class="doubleCircle"></div>  

CSS
.doubleCircle{
  width: 2vw;height: 2vw;
  border: 1vw double #bb7;
  border-radius: 2vw;}

傾けます

HTML
<div class="doubleCircle2"></div>  

CSS
.doubleCircle2{
  width: 6vw;height: 6vw;
  border: 2vw double #bb7;
  border-radius: 6vw;
  transform: rotateX(45deg) rotateY(45deg);}

星

実行結果

三角形を5つ合わせて星を作りました。

お星さまですね。

プログラム

HTML
<div class = "star">
  <div class = "starSurface starSurface1"></div>
  <div class = "starSurface starSurface2"></div>
  <div class = "starSurface starSurface3"></div>
  <div class = "starSurface starSurface4"></div>
  <div class = "starSurface starSurface5"></div>
</div>

CSS
.star {
  width: 5vw;height: 5vw;margin:0vw;
  position: relative;
  transform-style: preserve-3d;}
.star .starSurface{
  width:0vw;height:0vw;margin:0vw;
  position: absolute;
  border-bottom: 10vw solid #d14;
  border-left: 3.3vw solid transparent;
  border-right: 3.3vw solid transparent;}
 
.starSurface1 {
  transform:rotateZ(0deg) translateY(-5vw);}
.starSurface2 {
  transform:rotateZ(72deg) translateY(-5vw);}
.starSurface3 {
  transform:rotateZ(144deg) translateY(-5vw);}
.starSurface4 {
  transform:rotateZ(216deg) translateY(-5vw);}
.starSurface5 {
  transform:rotateZ(288deg) translateY(-5vw);}
.star{
  top: 5vw; left:6vw;
}

変化です

border-left: ,border-right:を変えて

三角形を細くしました。

2vwです。

三角形を太くしました。

4vwとしました。

四角形を作る方法

<div></div>

実行

プログラム

説明

width: 幅;height: 高さ;

実行

プログラム

説明

着色

実行

プログラム

説明

四角形描画

background-color: #xyz;

実行結果

プログラム

ファイル

先をとがらせる,先を丸く

border-radius: 10vw 10vw 0vw 0vw;

実行結果

プログラム

応用

半分

実行

プログラム

応用

三角形を作ります

border:ボーダ(輪郭)

実行結果

プログラム

説明

divを消します。

border-top-color: #080;

実行結果

プログラム

三角

三角形を作ります2

実行結果

プログラム

感想

その他の形

実行結果

プログラム

考察

background-image:repeating-linear-gradient

実行結果

プログラム

修正

実行結果

プログラム

備考

実行結果

プログラム

border:

実行結果

プログラム

傾けます

実行結果

プログラム

傾けます

実行結果

プログラム

傾けます

星

実行結果

プログラム

変化です

width: 幅;
height: 高さ;