今回は「HTML【mark】要素を使い マーカーを引いてみよう!」の講座になります。
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
mark
要素をまだ知らない方へ - 文章を目立たせる方法について困ってる方へ
目立たせる箇所によく蛍光ペンのように引かれたマーカーを見かけること、ありませんか?
今回はマーカーについて解説いたします。
mark要素とは
mark
要素はテキストを部分的に目立たせたい際に使用します。
mark
~/mark
はHTML5で登場した新しい要素になります。
以前でしたらspan
~/span
で囲いcssを指定しておりました。
文字に対して、「強調させる、目立たせる」方法には他にstrong
、em
、b
要素もあります。
その違いにもご説明しておきます。
-
strong
「重要」を意味するタグになります。テキストが太字で表示します。 -
em
「強調」を意味するタグになります。テキストが斜体で表示します。 -
b
「注意」を意味するタグになります。注意してほしいテキストに使用します。 -
mark
「目立たせる」を意味するタグになります。目立たせたいテキストに使用します。
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で変えてみよう
先ほどはマーカーの背景色でしたが今回はマーカーの太さを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の指定方法の紹介またキーワード指定についても紹介しております。
- POINT
-
mark
「目立たせる」を意味するタグになります。 - 文章中「重要」なポイントは
strong
タグを使用しましょう。 -
strong
、em
、b
、mark
の使用ポイントを覚えておきましょう。 -
mark
マーカーの色や太さを変更する際にはcssに記述しましょう。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事