HTMLで蛍光ペンのようなマーカーを作成する方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLで蛍光ペンのようなマーカーを作成する方法について解説しています。ここではCSSのlinear-gradientを使って指定の太さや色のラインを表示させる方法を説明します。書き方と画面上での見え方を確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLで蛍光ペンのようなマーカーを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
蛍光ペンのようなマーカーを作成する方法について詳しく説明していくね！
お願いします！
蛍光ペンのマーカー例
テキストの大事な所や目立たせたい所に、蛍光ペンのマーカーで引いたようなラインをHTMLとCSSで簡単に表現することができます。spanタグやstrongタグにクラス名を付けて使用しますが、特にstrongタグは、見た目にも検索エンジンにもテキストの重要性を伝えることができます。
太さと色を変える方法
CSSでクラス名を付けて、「linear-gradient」属性を使用します。
ラインの太さを変える
transparentの後の「%」の値で太さを設定します。大きい値にすると、マーカーのラインは細くなり、小さい値にすると太くなります。100％にすると、マーカーのラインは消えてしまいます。0%～95%の値がおすすめです。
ラインの色を変える
「#」で始まる6桁のカラーコードで色を設定します。こちらは検索して調べると出てくるので、覚える必要はありません。
蛍光ペンのマーカーをひいてみよう
太さ0%のマーカー
HTML
吾輩は猫である。<strong class="marker_line0">名前はまだ無い。</strong>
CSS
.marker_line0 { background:linear-gradient(transparent 0%, #fec1fe 0%); }
太さ20%のマーカー
HTML
吾輩は猫である。<strong class="marker_line20">名前はまだ無い。</strong>
CSS
.marker_line20 { background:linear-gradient(transparent 20%, #fec1fe 0%); }
太さ40%のマーカー
HTML
吾輩は猫である。<strong class="marker_line40">名前はまだ無い。</strong>
CSS
.marker_line40 { background:linear-gradient(transparent 40%, #fec1fe 0%); }
太さ60%のマーカー
HTML
吾輩は猫である。<strong class="marker_line60">名前はまだ無い。</strong>
CSS
.marker_line60 { background:linear-gradient(transparent 60%, #fec1fe 0%); }
太さ80%のマーカー
HTML
吾輩は猫である。<strong class="marker_line80">名前はまだ無い。</strong>
CSS
.marker_line80 { background:linear-gradient(transparent 80%, #fec1fe 0%); }
See the Pen
蛍光マーカー 太さ by HO-Cosmos (@ho-cosmos)
on CodePen.
ピンクのマーカー
HTML
吾輩は猫である。<strong class="marker_pink">名前はまだ無い。</strong>
CSS
.marker_pink { background:linear-gradient(transparent 60%, #fec1fe 0%) };
黄色のマーカー
HTML
吾輩は猫である。<strong class="marker_yellow">名前はまだ無い。</strong>
CSS
.marker_yellow { background:linear-gradient(transparent 60%, #ffff00 0%); }
ブルーのマーカー
HTML
吾輩は猫である。<strong class="marker_blue">名前はまだ無い。</strong>
CSS
.marker_blue { background:linear-gradient(transparent 60%, #00d2ff 0%); }
茶のマーカー
HTML
吾輩は猫である。<strong class="marker_brown">名前はまだ無い。</strong>
CSS
.marker_brown { background:linear-gradient(transparent 60%, #b16e49 0%); }
オレンジのマーカー
HTML
吾輩は猫である。<strong class="marker_orange">名前はまだ無い。</strong>
CSS
.marker_orange { background:linear-gradient(transparent 60%, #fcb848 0%); }
See the Pen
蛍光マーカー 色 by HO-Cosmos (@ho-cosmos)
on CodePen.
監修してくれたメンター
| 押野啓美
Webデザイン、コーディング歴、かれこれ20年！ WordpressやJavaScript、jQueryを使用したサイトの制作もしています。 TechAcademyではWebデザインコースのメンターをしています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
