CSS

tailwindcss でマーカー風なスタイルを作る(小ネタ)

本サイトの記事内にアフィリエイト広告が含まれる場合があります。

tailwindcss でマーカー風なスタイルを作るのサムネイル画像

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

tailwindcssでテキストをマーカーで引いたようなスタイルを今回は作っていきます!

めちゃくちゃ簡単なので、一瞬で終わります。

著:工藤 智祥
¥3,665 (2024/09/02 06:58時点 | Amazon調べ)

前提

  • tailwindcssが使える状態であること

実装方法

完成系はこんな感じのイメージ。文章の中にマーカーを引くことができます。

ちなみに、改行しても良い感じです。

<span class="bg-blue-100 px-1">青色の文章です。青色の文章です。</span>
<span class="bg-yellow-100 px-1">黄色の文章です。黄色の文章です。</span>
<span class="bg-red-100 px-1">赤色の文章です。赤色の文章です。</span>

コードはこれだけです!!

bg-{color}-100 ←{color}の部分をお好きな色にして試してみて下さい。

Customizing Colors を参照するとtailwindcssで使用できるカラーが見れます。

まとめ tailwindcss でマーカー風なスタイルを作る(小ネタ)

まとめると、めっちゃ簡単にできました!

tailwind使うと、cssに戻れなくなりそうです。

著:工藤 智祥
¥3,665 (2024/09/02 06:58時点 | Amazon調べ)
  • この記事を書いた人

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

-CSS
-,