のんべえの気まぐれ

日々の出来事やDIY、機械いじりを発信

CSSシェイプの図形座標をExcelで座標枠を作って調べる

いつも読んで頂きありがとうございます。

いろんなツールでお世話になっているLSSさんがCSSシェイプというものを紹介して

いました。今回、CSSシェイプで図形座標を調べるのにExcelを利用してみたので報告。

スマホだとCSSシェイプの文字配置がズレますが了承ください。

CSSシェイプの図形座標をExcelで座標枠を作って調べる

 

 

 

CSSシェイプでいろんな図形ができる

LSSさんが紹介したCSSシェイプ

LSSさんが記事で紹介していたものが吹き出しのシェイプです。

まさかこんな事が…

 

頂点座標を%で指定して、X,Y座標の指定を繰り返すと図形になるそうです。

今回使用しているコードはclip-path:polygonというコードでpolygonは多角形の図形を

意味しています。しかし、角が多くなると座標の位置を探すのが大変なことが分かりま

した。

◆参考URL◆

little-strange.hatenablog.com

 

 

Excelで座標枠を作って調べる

図形の頂点座標は図形から探す必要がありますが、どうやって探すか考えた結果、Excel

で座標枠を作って、そこに図形を張り付けると大体の座標位置を探すことが出来るので

はないかと考えました。

 

座標枠を作る

横をX軸、縦をY軸として2%刻みで0~100%までのマスを作ります。

セル幅は全て15ピクセルで指定しています(ここはご自由に)

座標枠

 

 Excelで図形を選ぶ

Excelの挿入タブから図形をクリックして好きな図形を選択します。

今回は多角形を作るので丸いものは選択しません。

excel 図形

 

 

座標枠に図形を貼り付ける

選択した図形を座標枠に貼りつけますが、図形が小さいので座標枠に合うように拡大し

ます。大きさは自由に設定するといいです。

図形拡大

図形の座標を調べる

図形を貼り付けたら図形の頂点座標を調べますが図形は塗りを無くして線だけにした方

が座標の位置が分かりやすいです。 座標の①から順番にX軸とY軸を読みます。

座標位置の数字は整数でも大丈夫なので大体でいいです。

私は座標をセルに入力するとコードが生成されるように式を組んでみました。

座標位置

 

 調べた座標をコードに入れる

今回選択した図形の座標コードをLSSさんのコードに入れますが幅を指定していない

ので横長になります。行を増やすと縦にも伸びますが文字配置の調整が必要です。

スマホで見ると横長ではありません。

 






こんな感じになります









 

図形のY座標の80~100%付近に図形が無いので下側の余白が多くなってしまいまし

た。座標枠いっぱいで図形を作るのが良いのかもしれません。

コード

<style><!--
.cp1{
background-color:lightgreen;
clip-path:polygon(3% 8%, 34% 22%, 39% 8%, 50% 20%, 67% 0%, 65% 18%, 84% 16%, 76% 25%, 96% 28%, 80% 35%, 98% 44%, 76% 43%, 83% 60%, 64% 48%, 61% 66%, 49% 49%, 40% 72%, 36% 52%, 23% 59%, 27% 46%, 2% 49%, 19% 39%, 1% 29%, 19% 26% );
padding-left:30%;
}
--></style>
<div class="cp1"><br /><br /><br /><br /><br /><span style="font-size: 150%;"><strong>こんな事感じになります</strong></span><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div>

clip-path:polygon~の( )内が図形の座標コードです。

 

文字配置調整のためpaddingの数字は図形に合わせて変える必要と、文字配置は自分で

うまく調整する必要があります。

 

ちなみに横幅を調整すると(width:180px;を追加してpaddingも変更)

幅が小さくなりました

最後に 

ちょっと夜中にLSSさんの記事とExcelで遊んでいました。 

図形の座標を調べられるようになったので、いろんな図形ができます。

Excelの図形以外でも直線で好きな図形を描いてもいいです。

画像編集ソフトなどでも図形は作れますが、CSSシェイプだと作ったあとでも編集出来

るので良いと思いますね。角が多いと座標を調べるのが面倒ですが。

もっと簡単に調べる方法があるのかな~

CSSシェイプは他にもいろんな事ができるみたいなので調べて遊んでみようと思いま

すが、しれ~っと記事内で使うかもしれません。

いつもLSSさんのツールをアレンジして使わせていただいていますが、今回は私が

勝手にいつもこんな感じで作ってますよという紹介でした。

 

 

 

 

 

PVアクセスランキング にほんブログ村