【マウス操作のみ】マーカー下線、CSSコードが生成できちゃうツール

テクノロジー

2022.12.28

みなさんこんにちは！おさかなです！

今回は「Underline Generator」について、書いていこうと思います！

それでは、レッツゴー！！！！！

想定読者
・「マーカー下線」デザインの、CSSコード作りたい方
・デザイナー・Webコーダーの方
・CSSのコピペ実装デザインを探している方

「Underline Generator」って何？
実際に使ってみよう！
1. デザインをカスタマイズしよう！
2. CSSコードを生成しよう！

「Underline Generator」って何？

「Underline Generator」とは、(@d__raptis)さんが開発した「マーカー下線・CSSコード」が生成できるツールのことです。GUI操作（マウス操作）のみで、サクッとCSS実装！デザイナーの方や、Web制作に携わる方におすすめです！(便利〜)

Underline Generator

【CSS】いい感じの「破線」が作れちゃう？！【Dashed Border Generator】とは？

みなさんこんにちは！おさかなです！今回は「Dashed Border Generator」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・破線を作成したい方・デザインをチェックしながら、破...

実際に使ってみよう！

それでは早速サイトにアクセスしましょう！

デザインをカスタマイズしよう！

テキスト下の「設定画面」より、マーカー下線をカスタマイズできます。

一番左の「Gradient」から、カラーを選択できます！(ふむふむ…。)

(このピンク色きれい〜💅)

余談ですが、色変更すると「ペンライト・ロゴ」の色も変わります！(おもしろい！)

設定真ん中の「Position」からは、マーカーの位置を指定できます。

ラインは、小文字「y」の下部分が被るところまで、下げられます！(ふむふむ…。)

「Weight」からは、マーカーの太さを指定できます。

太さは、最大でこのくらいです！(おお！)

(細いラインと、茶色でカフェっぽい雰囲気に☕)

(ビビットピンク色は、ポップな感じになりました〜🐰)

【レスポンシブデザイン】を一括で確認できるツールとは？

みなさんこんにちは！おさかなです！今回は「レスポンシブWebデザインチェックツール」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・Webサイトのレスポンシブデザインを確認したい方・スマホ...

(こまめに休憩☕)

CSSコードを生成しよう！

カスタマイズが完了したら、右下の「コピーマーク」を押します！

すると…「CSSコードがコピー」されます！(わーい🚩)

↓実際に生成された「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