自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。マーカーを引いてみよう!」の講座になります。こんな方に読んでほしいHTMLを学び始めた方へmark要素をまだ知らない方へ文章を目立たせる方法について困ってる方へ目立たせる箇所によく蛍光ペンのように引かれたマーカーを見かけること、ありませんか?今回はマーカーについて解説いたします。[記事の内容]mark要素とはmarkのマーカーの色をCSSで変えてみようmarkのマーカーの太さをCSSで変えてみよう実際の文章で見比べてみましようまとめmark要素とはmark要素はテキストを部分的に目立たせたい際に使用します。mark~/markはHTML5で登場した新しい要素になります。以前でしたらspan~/spanで囲いcssを指定しておりました。文字に対して、「強調させる、目立たせる」方法には他にstrong、em、b要素もあります。その違いにもご説明しておきます。「重要」を意味するタグになります。テキストが太字で表示します。「強調」を意味するタグになります。テキストが斜体で表示します。「注意」を意味するタグになります。注意してほしいテキストに使用します。「目立たせる」を意味するタグになります。目立たせたいテキストに使用します。CodePen.※markデフォルトで黄色のマーカーになります。markのマーカーの色をCSSで変えてみようmarkデフォルトで黄色のマーカーになるため、背景色が黄色の際にはマーカーが見えなくなりますよね。対処法としてはcssでマーカーの色を変更しましょう!HTMLファイル<p>mark要素はテキストを部分的に目立たせたい際に使用します。#395848;を指定してあげれば背景色は変更できます。微調整でpaddingを指定しております。markのマーカーの太さをCSSで変えてみよう先ほどはマーカーの背景色でしたが今回はマーカーの太さをcssで変えてみようおもいます。今回はtransparent(トランスペアレント)を使用します。transparentを指定すると、カラーが透明になります。%の数値が大きいほどマーカーは細くなります。80%」のところを変更してください。マーカー色を変更が可能です。HTMLファイル<p>mark要素はテキストを部分的に目立たせたい際に使用します。0%);}実際の文章で見比べてみましようHTMLファイル<p>ホームページ制作、名刺制作、ロゴ制作など、デザインをする際には配色は欠かせない<br>要素の1つになってきますよね。<br>私も、配色で悩んだ経験はたくさんあります。CodePen.私はブログを書く際にはCSSの指定がある場合の方を使用しております。CSSの指定なしの方は文字の窮屈感が伝わってくるんですよね。まとめ今回はこれで以上です。フォントに関連する記事も載せておきますのでこちらもご確認ください。font-size】文字の大きさ・単位について解説しています。文字の大きさを変更するにはfont-sizeというプロパティを使用します。単位にはpx、%、em、remの指定方法の紹介またキーワード指定についても紹介しております。「目立たせる」を意味するタグになります。文章中「重要」なポイントはstrongタグを使用しましょう。strong、em、b、markの使用ポイントを覚えておきましょう。markマーカーの色や太さを変更する際にはcssに記述しましょう。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。