いつも読んで頂きありがとうございます。
いろんなツールでお世話になっているLSSさんがCSSシェイプというものを紹介して
いました。今回、CSSシェイプで図形座標を調べるのにExcelを利用してみたので報告。
スマホだとCSSシェイプの文字配置がズレますが了承ください。
CSSシェイプでいろんな図形ができる
LSSさんが紹介したCSSシェイプ
LSSさんが記事で紹介していたものが吹き出しのシェイプです。
頂点座標を%で指定して、X,Y座標の指定を繰り返すと図形になるそうです。
今回使用しているコードはclip-path:polygonというコードでpolygonは多角形の図形を
意味しています。しかし、角が多くなると座標の位置を探すのが大変なことが分かりま
した。
Excelで座標枠を作って調べる
図形の頂点座標は図形から探す必要がありますが、どうやって探すか考えた結果、Excel
で座標枠を作って、そこに図形を張り付けると大体の座標位置を探すことが出来るので
はないかと考えました。
座標枠を作る
横をX軸、縦をY軸として2%刻みで0~100%までのマスを作ります。
セル幅は全て15ピクセルで指定しています(ここはご自由に)
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:4vmin;"><strong>こんな事感じになります</strong></span><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div>
clip-path:polygon~の( )内が図形の座標コードです。
文字配置調整のため、文字配置は自分でうまく調整する必要があります。
ちなみに横幅を調整すると(width:250px;height:200px;を追加)
幅が小さくなりました
最後に
ちょっと夜中にLSSさんの記事とExcelで遊んでいました。
図形の座標を調べられるようになったので、いろんな図形ができます。
Excelの図形以外でも直線で好きな図形を描いてもいいです。
画像編集ソフトなどでも図形は作れますが、CSSシェイプだと作ったあとでも編集出来
るので良いと思いますね。角が多いと座標を調べるのが面倒ですが。
もっと簡単に調べる方法があるのかな~
CSSシェイプは他にもいろんな事ができるみたいなので調べて遊んでみようと思いま
すが、しれ~っと記事内で使うかもしれません。
いつもLSSさんのツールをアレンジして使わせていただいていますが、今回は私が
勝手にいつもこんな感じで作ってますよという紹介でした。