HTMLのmark要素とCSSで蛍光ペン風マーカーを引く方法

2024.01.06
HTMLのmark要素とCSSで蛍光ペン風マーカーを引く方法

「ブログ記事に蛍光ペン風にマーカーを引きたい」

「HTMLやCSSだけでテキストにマーカー線を引くことはできるの?」

と思うことはありませんか?

そこで今回は、HTMLとCSSでマーカーを引く方法を解説します。

この記事を読んでわかる内容は、以下の通りです。

  • テキストにマーカーを引きたい時に使うHTMLの要素
  • CSSで蛍光ペン風にマーカーを引く方法
  • 蛍光ペン風マーカーを引くHTMLとCSSのコードサンプル

ブラウザー上でどのように表示されるかがわかる、太さや色別のコードと表示サンプルも紹介します。

Webサイトやブログサイトを制作したい方にとって重宝する内容ですので、ぜひ最後まで見てくださいね。

HTMLで目立たせたいテキストにはmark要素を使用する

mark要素は、HTML5で登場した新しい要素で、HTML文章中の目立たせたいテキストに使用します。

strong要素やspan要素などもよく使用されていますが、それぞれマークアップの意味が異なります。

mark要素:テキストを目立たせる strong要素:強調したいテキスト span要素:一つの範囲として定義する

使い勝手が良いspanタグは、あくまで一つの範囲として定義されているだけなので、重要なテキストは用途に合わせてmarkやstrong要素を使用しましょう。

使い分けの例は、以下のようなものが挙げられます。

<p><strong>警告:</strong>この道は危険です</p>

<p>mark要素は<mark>目立たせたいテキストに</mark>使用しましょう</p>

▼ブラウザー表示▼

マーカーが引かれている様子

上記はデフォルトの状態です。

このままのデザインで使用したい場合は、CSSでスタイリングする必要がなく、HTMLだけでマーカーを引くことができます。

マーカーの色や太さを変えるにはCSSのbackground:linear-gradientを使う

HTMLのmark要素だけで蛍光ペン風のマーカーを引くことはできますが、色は黄色、太さはテキスト全体に被るくらいと決まっています。

このマーカーの色や太さを変えたい場合には、CSSでのスタイリングが必要です。

ただし、以下のようにbackground-colorプロパティだけを指定すると以下のようになってしまうので注意しましょう。

<!-- HTMLコード -->
<p>mark要素は<mark>目立たせたいテキストに</mark>使用しましょう</p>

/* CSSコード */
mark {
  background-color: #00ffff;
}

▼ブラウザー表示▼

蛍光ペンのように透明ではないが、背景色が変わっている様子

背景色を変えることはできますが、蛍光ペンのように透明になりません。

蛍光ペン風のマーカーを引くには、以下のようにbackgroundプロパティに「linear-gradient」を指定します。

/* CSSコード */
mark {
  background: linear-gradient(transparent 40%, #00ffff 80%);
}

▼ブラウザー表示▼

蛍光ペン風マーカーで字を目立たせている様子

CSSで何も指定していない場合はべた塗ですが、linear-gradientを指定することで蛍光ペン風マーカーが引けました

transparentでマーカーの太さ、「,(カンマ)」で区切った後にラインの色を指定します。

%が小さいほど太く薄い、大きいほど細くて濃いマーカーになります。

実際にHTMLとCSSで蛍光ペン風のマーカーを引いてみよう!

HTMLのmark要素をCSSでスタイリングして、蛍光ペン風のマーカーを実際に引いてみましょう!

手順は以下の通りです。

  1. 適当な文章を用意し、HTMLのpタグ内にコピペ
  2. 文書中で目立たせたいテキストをmarkタグで囲う
  3. mark要素にbackground: linear-gradient( );を指定

今回は、transparentで太さを50%、色の濃さを80%で指定しました。

<!-- HTMLコード -->
<p>mark要素をCSSでスタイリングして<mark>蛍光ペン風マーカー</mark>を引きます</p>

/* CSSコード */
mark {
  background: linear-gradient(transparent 50%, #ff7f7f 80%);
}

▼ブラウザー表示▼

蛍光ペンマーカーが引かれている様子

【コピペOK】マーカーの太さ・色のサンプル

マーカーの太さや色は、CSSを使用すれば自由に変更できます。

実際にどのような色になるのか、%ごとの太さはどのように変わるのか代表的なものをいくつかピックアップしました!

蛍光ペン風マーカーのデザインの参考に利用してみてくださいね。

【太さ別】マーカーサンプル5選

太さを比べやすいように色をデフォルトのままにして、%ごとのマーカーを並べています。

<!-- HTMLコード -->
<p><mark class="mark1">太さ0%のマーカー</mark>を引いています</p>
<p><mark class="mark2">太さ20%のマーカー</mark>を引いています</p>
<p><mark class="mark3">太さ40%のマーカー</mark>を引いています</p>
<p><mark class="mark4">太さ60%のマーカー</mark>を引いています</p>
<p><mark class="mark5">太さ80%のマーカー</mark>を引いています</p>

/* CSSコード */
p {
  padding: 10px 0;
}
.mark1 {
  background: linear-gradient(transparent 0%, yellow 0%);
}
.mark2 {
  background: linear-gradient(transparent 20%, yellow 0%);
}
.mark3 {
  background: linear-gradient(transparent 40%, yellow 0%);
}
.mark4 {
  background: linear-gradient(transparent 60%, yellow 0%);
}
.mark5 {
  background: linear-gradient(transparent 80%, yellow 0%);
}

▼ブラウザー表示▼

太さ違いのマーカーが並んでいる様子

【色別】マーカーサンプル5選

色を比べやすいように、太さを同じにして5つの色のマーカーを並べています。

<!-- HTMLコード -->
<p><mark class="mark1">ピンク色のマーカー</mark>を引いています</p>
<p><mark class="mark2">黄色のマーカー</mark>を引いています</p>
<p><mark class="mark3">緑色のマーカー</mark>を引いています</p>
<p><mark class="mark4">青色のマーカー</mark>を引いています</p>
<p><mark class="mark5">オレンジ色のマーカー</mark>を引いています</p>

/* CSSコード */
.mark1 {
  background: linear-gradient(transparent 40%, pink 80%);
}
.mark2 {
  background: linear-gradient(transparent 40%, yellow 80%);
}
.mark3 {
  background: linear-gradient(transparent 40%, green 80%);
}
.mark4 {
  background: linear-gradient(transparent 40%, blue 80%);
}
.mark5 {
  background: linear-gradient(transparent 40%, orange 80%);
}

▼ブラウザー表示▼

同じ太さで5色のマーカーが並んでいる様子

蛍光ペン風マーカーを引くことでHTMLの文章が読みやすくなる!

mark要素を使えばHTMLだけでも簡単に蛍光ペン風のマーカーを引くことができます。

ラインの太さや色、かすれ度合いなどを調整したい時にはCSSのbackgroundプロパティでlinear-gradientを指定しましょう。

linear-gradientの指定方法は、今回ご紹介した以外にもたくさんあります。

JavaScripなどで動きをつければ、さらにユーザーの視線を引き付けることができますよ。

HTMLやCSSでマーカーを引いて、メリハリのあるWebサイトやブログサイトを作りましょう!

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5