みなさんこんにちは!おさかなです!
今回は「Underline Generator」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・「マーカー下線」デザインの、CSSコード作りたい方
・デザイナー・Webコーダーの方
・CSSのコピペ実装デザインを探している方
「Underline Generator」って何?
「Underline Generator」とは、(@d__raptis)さんが開発した「マーカー下線・CSSコード」が生成できるツールのことです。GUI操作(マウス操作)のみで、サクッとCSS実装!デザイナーの方や、Web制作に携わる方におすすめです!(便利〜)
![](https://osakanav.com/wp-content/uploads/2021/11/dbg-top-160x90.png)
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/12/underline-1.png)
デザインをカスタマイズしよう!
テキスト下の「設定画面」より、マーカー下線をカスタマイズできます。
![](https://osakanav.com/wp-content/uploads/2022/12/jBjF9CCITqxMHCT1672200951_1672200967.png)
一番左の「Gradient」から、カラーを選択できます!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-color-1.png)
(このピンク色きれい〜💅)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-toumei-1-1.png)
余談ですが、色変更すると「ペンライト・ロゴ」の色も変わります!(おもしろい!)
![](https://osakanav.com/wp-content/uploads/2022/12/underlinepen.gif)
設定真ん中の「Position」からは、マーカーの位置を指定できます。
![](https://osakanav.com/wp-content/uploads/2022/12/underline.gif)
ラインは、小文字「y」の下部分が被るところまで、下げられます!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-poisition-1.png)
「Weight」からは、マーカーの太さを指定できます。
![](https://osakanav.com/wp-content/uploads/2022/12/underline-hutosa.gif)
太さは、最大でこのくらいです!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-3-1.png)
(細いラインと、茶色でカフェっぽい雰囲気に☕)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-otona-1.png)
(ビビットピンク色は、ポップな感じになりました〜🐰)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-pop-1.png)
![](https://osakanav.com/wp-content/uploads/2022/08/lqd-top-160x90.gif)
(こまめに休憩☕)
CSSコードを生成しよう!
カスタマイズが完了したら、右下の「コピーマーク」を押します!
![](https://osakanav.com/wp-content/uploads/2022/12/jBjF9CCITqxMHCT1672200951_1672200995.png)
すると…「CSSコードがコピー」されます!(わーい🚩)
![](https://osakanav.com/wp-content/uploads/2022/12/underline-green-1.png)
↓実際に生成された「CSSコード」
.fancy-undeline {
background-image: linear-gradient(120deg, #1D976C,#93F9B9 100%);
background-repeat: no-repeat;
background-size: 100% 0.8em;
background-position: 0 80%;
transition: background-size 0.25s ease-in;
}
.fancy-undeline:hover {
background-size: 100% 88% !important;
}
実装例は、下記コードのように「クラス:fancy-undeline」を設定すればOKです!
※緑文字=生成したコード
<!-- HTMLコード -->
<!-- 〜省略〜 -->
<p class=fancy-undeline>マウスカーソルを合わせてみてください☆</p>
<!-- CSSコード -->
<style>
.fancy-undeline {
background-image: linear-gradient(120deg, #1D976C,#93F9B9 100%);
background-repeat: no-repeat;
background-size: 100% 0.8em;
background-position: 0 80%;
transition: background-size 0.25s ease-in;
}
.fancy-undeline:hover {
background-size: 100% 88% !important;
}
</style>
↓実装したものがこちら
マウスカーソルを合わせてみてください☆
お疲れ様でした〜〜!
↓GitHub
『スクエアターミナル』で、キャッシュレス決済をかんたん導入!
![おさかな](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/2022/10/flexboxfroggy-top-160x90.png)