みなさんこんにちは!おさかなです!
今回は「CSS三角形作成ツール」について、書いていこうと思います!
それでは、レッツゴー!!!!!
「CSS三角形作成ツール」とは?
「CSS三角形作成ツール」とは、マウス操作(GUI)で値を入力すると、三角形の「CSSコード」が生成されるツールのことです。実際にデザインを確認しながらコーディングしたいときや、作業時間を短縮したいときにおすすめ。
直感的に操作できるため、プログラムの知識がない方でも、サクッと三角形を表示できます!(便利〜)
eky.hk
This domain may be for sale!
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-top-160x90.png)
【Web系エンジニア注目】CSSセレクタ・チートシートとは?
みなさんこんにちは!おさかなです!今回は「CSS SELECTORS CHEATSHEET」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・CSSセレクタのチートシートを探している方・CS...
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2023/03/css-triangle-generator.png)
左側のメニューから、三角形の値を指定できます。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2023/03/wefbp43uJxHAubY1678272383_1678272396.png)
入力した値は、右側に「プレビュー表示」されます。
![](https://osakanav.com/wp-content/uploads/2023/03/wefbp43uJxHAubY1678272383_1678272425.png)
項目は「方向・タイプ・サイズ・色」の4つ。
![](https://osakanav.com/wp-content/uploads/2023/03/css-triangle-generator-color.png)
(わくわく…🍀)
三角形をカスタマイズしよう!
まずは三角形の「方向・タイプ」を決めます!(よし!)
![](https://osakanav.com/wp-content/uploads/2023/03/css-triangle-generator.gif)
続いて「サイズ」を数字で入力。(大きくて、枠内からはみ出てしまった。笑)
![](https://osakanav.com/wp-content/uploads/2023/03/css-triangle-generator-size.png)
仕方ない……widthを10pxにしておくか。(極端!)
![](https://osakanav.com/wp-content/uploads/2023/03/css-triangle-generator-size-small.png)
「色」はマウス操作のほかに、RGB、16進数なども使えます!
![](https://osakanav.com/wp-content/uploads/2023/03/css-triangle-generator-red.png)
白にしてみると、なんだか切り抜いたみたいに。
![](https://osakanav.com/wp-content/uploads/2023/03/css-triangle-generator-white.png)
CSSコードをコピーしよう!
三角形の形が決まったら「CSSコード」を確認します。(おー🚩)
![](https://osakanav.com/wp-content/uploads/2023/03/wefbp43uJxHAubY1678272383_1678272446.png)
ちなみに「Ctrl」+「A」を押すと全選択、「Ctrl」+「C」を押すとコピーできます。
![](https://osakanav.com/wp-content/uploads/2023/03/css-code.gif)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-generator-top-160x90.png)
【マウス操作のみ】マーカー下線、CSSコードが生成できちゃうツール
みなさんこんにちは!おさかなです!今回は「Underline Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・「マーカー下線」デザインの、CSSコード作りたい方・デザイ...
みなさんもぜひ、マウス操作で三角形をつくってみてください〜△
(お疲れさまです🍵)
![](https://osakanav.com/wp-content/uploads/2020/02/20-03-06-13-55-00-460_deco-300x300.jpg)
↓実際に作成したものがこちら
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
三角形おばけ!おさかな!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
円形ナビまる!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2023/03/wp-line-top-160x90.png)
WordPressにて、文字を「枠線」で囲む方法!【ブロックエディタ対応】
みなさんこんにちは!おさかなです!今回は「【WordPress】にて、文字・テキストを「枠線」で囲む方法」について、書いていこうと思います!それでは、レッツゴー!!!!!今回つくるものこんな感じで、Word...