measure:測定

実行結果

箱を用意して大きさをはかります。

ものさしの部分です。

箱の上にものさしを乗せます。

移動はCSSの中のtopとleftを使います。

箱の横の長さ8vwが測定できました、
measureのCSSで最後に指示しているのが,
z-index:2;です。"上に(前に)表示しなさい"です。

プログラム

測定用に長方形を用意しました。

HTML
<div class="d1">d1</div>
/*CSS*/
.d1{
  width: 8vw;height: 10vw;
  background-color:#563;}

横8vwX縦10vwの四角形を用意します。

ものさしです

1vw単位で10vwの長さのものさしです。
flexのdivの中に10このdiv要素を並べました。

HTML
<div class="measure"><!--ものさし-->
  <div>1</div><div>2</div>
  <div>3</div><div>4</div>
  <div>5</div><div>6</div>
  <div>7</div><div>8</div>
  <div>9</div><div>0</div>
</div>

/*CSS*/
.measure{width:9.9vw;display:flex;
  position: relative;top: 0vw;left: 0vw;
  border-left: solid 0.1vw #000;
  border-bottom: solid 0.1vw #000;
  z-index: 2;}/*ものさし*/
.measure > *{
  margin: 0;width: 1vw;
  background-color: transparent;
  text-align: right;font-size: 0.5vw;
  border-right: solid 0.1vw #888;
  z-index: 2;}

入れ物になる大箱はflex仕様です。9.9vwの横幅にしました。左端にボーダを入れて10vwにするためです。

  .measure{
    top: -15vw;left: 0vmax;}

移動の指示です。

ruler(ものさし)とmeasure(測定)のどちらを使うか迷いました。

洋服等の採寸には小さい巻き尺のメージャを使います。学校では, かたいものさしのルーラを使います。
今回は測定する道具なのでメジャーのクラスにしました。
スマホでは正確に測定できないものもあります。

縦型ものさし

実行結果

箱を用意して大きさをはかります。

ものさしの部分です。

縦10vwが測定できました。

プログラム

HTML
<div class="Vmeasure">
  <div>1</div><div>2</div>
  <div>3</div><div>4</div>
  <div>5</div><div>6</div>
  <div>7</div><div>8</div>
  <div>9</div><div>10</div>
</div>

/*CSS*/
.Vmeasure{/*縦ものさし,移動可能*/
    position: relative;top: -22.05vw;left: 0vw;
    width:1vw;height: 9.9vw;
    font-size: 0.1vw;
    border-bottom: solid 0.1vw #888 ;
}
.Vmeasure > *{/*縦目盛*/
    width:1vw;height: 0.9vw;
    margin: 0vw; text-align: left;
    border-top: solid 0.1vw #888 ;
    border-left: solid 0.1vw #888 ;
}

全体の高さをheight: 9.9vw;として,1メモリをheight: 0.9vw;としました。 border0.1vw用です。display:block;のままです。

縦軸は下に向かって数字が増えるようにします。かなり正確に測定できました。ipadで拡大してみましたが, 目盛りの外側から外側までが測定値になります。

差し金

実行結果

横のものさしと縦のものさしを縦に並べました。

両方にs1というクラス名を付けると同時に移動させることができます。

プログラム

HTML
<div class="measure s1"><!--ものさし-->
    <div>1</div><div>2</div>
    <div>3</div><div>4</div>
    <div>5</div><div>6</div>
    <div>7</div><div>8</div>
    <div>9</div><div>0</div>
  </div>
  <div class="Vmeasure s1"><!--ものさし-->
    <div>1</div><div>2</div>
    <div>3</div><div>4</div>
    <div>5</div><div>6</div>
    <div>7</div><div>8</div>
    <div>9</div><div>0</div>
  </div>

/*CSS*/
.measure{/*ものさし移動可能*/
    width:9.9vw;display:flex;
    position: relative;top: 0vw;left: 0vw;
    border-left: solid 0.1vw #000;
    border-bottom: solid 0.1vw #000;
    z-index: 2;}/*ものさし*/
.measure > *{/*目盛*/
    margin: 0;width: 1vw;
    background-color: transparent;
    text-align: right;font-size: 0.5vw;
    border-right: solid 0.1vw #888;
    z-index: 2;}

.Vmeasure{/*縦ものさし移動可能*/
    position: relative;top: 0vw;left: 0vw;
    width:1vw;height: 9.9vw;
    font-size: 0.5vw;
    border-bottom: solid 0.1vw #888 ;
    border-left: solid 0.1vw #888 ;}
.Vmeasure > *{/*縦目盛*/
    width:1vw;height: 0.9vw;
    margin: 0vw; text-align: left;
    border-top: solid 0.1vw #888 ;}

.s1{top:10.6vw;left: -0.4vw;}

0.01vwまで調整できるので正確に測定できます。

大きな定規

画面全体の大きさを測ってみました。

実行結果

90vw

HTML

HTML
90vw
<div class=
"Bigmeasure_vw
 b1">
<!--ものさしvw-->
  <div>10</div>
  <div>20</div>
  <div>30</div>
  <div>40</div>
  <div>50</div>
  <div>60</div>
  <div>70</div>
  <div>80</div>
  <div>90</div>
</div>

プログラムCSS

/*CSS*/
.Bigmeasure_vw{/*ものさしvw*/
    z-index: 2;
    position: relative;top: 0vw;left: 0vw;
    display:flex;width:89.9vw;height: 3vw;
    border-left: solid 0.1vw #000;
    border-bottom: solid 0.1vw #000;}
.Bigmeasure_vw > *{/*目盛vw*/
    margin: 0vw;z-index: 2;
    width: 9.9vw;height: 3vw;
    background-color: #842;
    text-align: right;font-size: 2.9vw;
    border-right: solid 0.1vw #000;}

説明

画面全体は100vwの横幅です。このHPでは98%使っています. 100vw表示すると横スクロールすることになりますので, 切りのいい90vwにしました。

実行結果

1000px

100

200

300

400

500

600

700

800

900

1000

HTML

1000px  
<div class=
"Bigmeasure_px
 b1">
<!--ものさしpx-->
  <div>100</div>
  <div>200</div>
  <div>300</div>
  <div>400</div>
  <div>500</div>
  <div>600</div>
  <div>700</div>
  <div>800</div>
  <div>900</div>
  <div>1000</div>
</div>

CSS

.Bigmeasure_px{/*ものさしpx*/
    z-index: 2;
    position: relative;top: 0px;left: 0px;
    display:flex;width:999px;height: 30px;
    border-left: solid 1px #000;
    border-bottom: solid 1px #000;}
.Bigmeasure_px > *{/*目盛px*/
    margin: 0px;z-index: 2;
    width: 99px;height: 30px;
    background-color: #563;
    text-align: right;font-size: 29px;
    border-right: solid 1px #000;}

説明

プログラムは3つともほぼ同じ形で, HTMLのdivの数や長さの単位が変わるくらいです。

実行結果

30cm

HTML

30cm  
<div class=
"Bigmeasure_cm
 b1">
<!--ものさしcm-->
  <div>10</div>
  <div>20</div>
  <div>30</div>
</div>

CSS

.Bigmeasure_cm{/*ものさしcm*/
    z-index: 2;
    position: relative;top: 0cm;left: 0cm;
    display:flex;width: 29.9cm;height: 1cm;
    border-left: solid 0.1cm #000;
    border-bottom: solid 0.1cm #000;}
.Bigmeasure_cm > *{/*目盛cm*/
    margin: 0cm;z-index: 2;
    width: 9.9cm;height: 1cm;
    background-color: #925;
    text-align: right;font-size: 1cm;
    border-right: solid 0.1cm #000;}

説明

30cmらしく見えますが,ディスプレイの種類によって長さは変わります。
なぜか下線の間に隙間ができます。