SHU BLOG

BLOG NEWS ブログ

TITLE

HTML【mark】要素を使いマーカーを引いてみよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「HTML【mark】要素を使い マーカーを引いてみよう!」の講座になります。

こんな方に読んでほしい

  • HTMLを学び始めた方へ
  • mark要素をまだ知らない方へ
  • 文章を目立たせる方法について困ってる方へ

目立たせる箇所によく蛍光ペンのように引かれたマーカーを見かけること、ありませんか?
今回はマーカーについて解説いたします。

mark要素とは

mark要素とは

mark要素はテキストを部分的に目立たせたい際に使用します。

mark基本的な記述方法

mark~/markはHTML5で登場した新しい要素になります。
以前でしたらspan~/spanで囲いcssを指定しておりました。

文字に対して、「強調させる、目立たせる」方法には他にstrongemb要素もあります。
その違いにもご説明しておきます。

  • strong 「重要」を意味するタグになります。テキストが太字で表示します。
  • em 「強調」を意味するタグになります。テキストが斜体で表示します。
  • b 「注意」を意味するタグになります。注意してほしいテキストに使用します。
  • mark 「目立たせる」を意味するタグになります。目立たせたいテキストに使用します。

See the Pen
LYVMOaW
by shu (@shu0325)
on CodePen.


markデフォルトで黄色のマーカーになります。

markのマーカーの色をCSSで変えてみよう

markのマーカーの色をCSSで変えてみよう

markデフォルトで黄色のマーカーになるため、背景色が黄色の際にはマーカーが見えなくなりますよね。
対処法としてはcssでマーカーの色を変更しましょう!

HTMLファイル

<p>mark要素はテキストを部分的に目立たせたい際に使用します。</p>

CSSファイル

mark {
  background-color: #395848;
  color: #ffffff;
  padding: 4px;
}

See the Pen
YzXdYKY
by shu (@shu0325)
on CodePen.

markに対して
background-color: #395848;を指定してあげれば背景色は変更できます。
微調整でpaddingを指定しております。

markのマーカーの太さをCSSで変えてみよう

markのマーカーの太さをCSSで変えてみよう

先ほどはマーカーの背景色でしたが今回はマーカーの太さをcssで変えてみようおもいます。
今回はtransparent(トランスペアレント)を使用します。
transparentを指定すると、カラーが透明になります。

transparentの指定方法

の数値が大きいほどマーカーは細くなります。「transparent 80%」のところを変更してください。
マーカー色を変更が可能です。

HTMLファイル

<p>mark要素はテキストを部分的に目立たせたい際に使用します。</p>

See the Pen
NWqeXGm
by shu (@shu0325)
on CodePen.

CSSファイル

mark {
	background: linear-gradient(transparent 80%, #FFF100 0%);
}

See the Pen
LYVMeRO
by shu (@shu0325)
on CodePen.

CSSファイル

mark {
	background: linear-gradient(transparent 60%, #FFF100 0%);
}

See the Pen
ZEGVvBW
by shu (@shu0325)
on CodePen.

CSSファイル

mark {
	background: linear-gradient(transparent 40%, #FFF100 0%);
}

実際の文章で見比べてみましよう

HTMLファイル

<p>ホームページ制作、名刺制作、ロゴ制作など、デザインをする際には配色は欠かせない<br>
要素の1つになってきますよね。<br>
私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?</p>

CSSの指定がない場合

See the Pen
mdJapwz
by shu (@shu0325)
on CodePen.

CSSの指定がある場合

See the Pen
yLNGpoe
by shu (@shu0325)
on CodePen.

私はブログを書く際にはCSSの指定がある場合の方を使用しております。
CSSの指定なしの方は文字の窮屈感が伝わってくるんですよね。

まとめ

今回はこれで以上です。
フォントに関連する記事も載せておきますのでこちらもご確認ください。

関連記事

【CSS font-size】文字の大きさ・単位について解説します!

今回は【CSS font-size】文字の大きさ・単位について解説しています。
文字の大きさを変更するにはfont-sizeというプロパティを使用します。
単位にはpx、%、em、remの指定方法の紹介またキーワード指定についても紹介しております。

POINT
  • mark 「目立たせる」を意味するタグになります。
  • 文章中「重要」なポイントはstrong
    タグを使用しましょう。
  • strongembmarkの使用ポイントを覚えておきましょう。
  • markマーカーの色や太さを変更する際にはcssに記述しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top