- HOME
- > BLOG CATEGORY
- HTML【mark】要素を使いマーカーを引いてみよう!

- お知らせ
- NEW 2023.06.01 【CSS】画像の透過について、mix-blend-modeを使ってみよう
- お知らせ
- 2023.05.18 【WordPress】各ページ背景画像の指定についてbody_classを解説
- お知らせ
- 2023.05.11 【WordPress】CPT UI インポート/エクスポート機能について解説
こんな方に読んでほしい
mark
要素をまだ知らない方へ目立たせる箇所によく蛍光ペンのように引かれたマーカーを見かけること、ありませんか?
今回はマーカーについて解説いたします。
[記事の内容]
mark
要素はテキストを部分的に目立たせたい際に使用します。
mark
~/mark
はHTML5で登場した新しい要素になります。
以前でしたらspan
~/span
で囲いcssを指定しておりました。
文字に対して、「強調させる、目立たせる」方法には他にstrong
、em
、b
要素もあります。
その違いにもご説明しておきます。
strong
「重要」を意味するタグになります。テキストが太字で表示します。em
「強調」を意味するタグになります。テキストが斜体で表示します。b
「注意」を意味するタグになります。注意してほしいテキストに使用します。mark
「目立たせる」を意味するタグになります。目立たせたいテキストに使用します。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
を指定しております。
先ほどはマーカーの背景色でしたが今回はマーカーの太さをcssで変えてみようおもいます。
今回は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】文字の大きさ・単位について解説しています。
文字の大きさを変更するにはfont-sizeというプロパティを使用します。
単位にはpx、%、em、remの指定方法の紹介またキーワード指定についても紹介しております。
mark
「目立たせる」を意味するタグになります。strong
strong
、em
、b
、mark
の使用ポイントを覚えておきましょう。mark
マーカーの色や太さを変更する際にはcssに記述しましょう。2021.07.27
2021.07.09
2021.07.06
2021.07.02
2023.06.01
2023.05.18
2023.05.11
2023.05.09
2023.05.04
2023.04.27
2022.06.30
2020.03.22
2020.03.06
2020.02.22
© 2020 shu-naka-blog