ブログ上で文章を強調したいときには、「太字にする」「文字色を変える」「蛍光ペン風マーカーを引く」などの方法がありますね。
特に最近のサイトでは、蛍光ペン風のマーカーで強調する手法が多く見られます。
今回の記事では、蛍光ペン風マーカーに少し手を加えて、ストライプ柄のマーカーをCSSで実装する方法を紹介します！
- 他のサイトと差別化したい
- オシャレに文章を装飾したい
こういった方には特におすすめですので、ぜひ参考にしてみてください。
【コピペ用】ストライプ柄マーカーのDEMO＆実装コード
まずは実装に必要な全体のコードを載せておきますので、コピペしてお使いください。
<p><span class="stripe-marker">ストライプ柄マーカーの実装DMEO</span></p>.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}ストライプ柄マーカーの実装DEMO
ストライプ柄マーカーの実装DEMO。文章が複数行の場合でも、正しくマーカーが引かれます。
コピペするだけで、上のようなストライプ柄のマーカーを実装することができます！
また、カスタマイズ編では以下のようなカラフルなストライプを作成する方法も紹介していますので、興味がある方はぜひ読んでください。
複数色のストライプ柄マーカーの実装DEMO
ストライプ柄マーカーの実装コード解説
ここからは、HTML・CSSそれぞれの実装コードの解説をしていきます。
HTML
まず最初に、文章全体をpタグで囲います。
<p>ここに強調したい文章を入れてください。</p>次に強調したい部分をspanタグで囲み、stripe-markerというクラスをつけてください。
<p>ここに<span class="stripe-marker">強調したい文章</span>を入れてください。</p>このHTMLに次で紹介するCSSを適用することで、以下のような見た目になります。
ここに強調したい文章を入れてください。
これでHTMLは終わりです！
CSS
次にCSSを見ていきましょう。
以下が全体のCSSコードになります。
.stripe-marker {
background-image: repeating-linear-gradient(-45deg, /* ストライプ柄の角度 */
#fcf69f 0, #fcf69f 2px, /* ストライプの色1 */
transparent 2px, transparent 4px /* ストライプの色2 */
);
background-repeat: no-repeat;
background-position: left bottom; /* ストライプの起点を左下にする */
background-size: 100% 0.5em; /* ストライプの横幅・縦幅 */
}以下で重要ポイントを解説していきますね。
ポイント①repeating-linear-gradient関数でストライプの角度・色・間隔を指定
まず一番重要なのが、repeating-linear-gradient関数ですね。
ここではストライプの角度、色、間隔を指定することができます。
background-image: repeating-linear-gradient(-45deg, /* ストライプ柄の角度 */
#fcf69f 0, #fcf69f 2px, /* ストライプの色1 */
transparent 2px, transparent 4px /* ストライプの色2 */
);まずストライプの角度を斜めにしたいので、-45degを指定します。
他の角度を指定したい場合は、この数値を調整してください。
次にストライプの色と間隔を指定します。
実装DEMOでは、黄色の部分と透明な部分が交互に繰り返されているのが確認できますね。
ストライプ柄マーカーの実装DEMO
これはCSSコード内の以下のハイライト箇所で指定しています。
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);2行目で、0px~2pxまでを黄色(#fcf69f)に、
3行目で2px~4pxまでを透明(transparent)に指定しています。
4px以降はこれら2色が2px間隔で繰り返されるので、最終的にはDEMOのようなストライプ柄が完成します！
ポイント②background-positionでストライプ柄の起点を指定
background-position: left bottom;background-positionでは、ストライプ柄を表示する起点を指定します。
left bottomと指定することで、マーカーが常に文章の左下から引かれるようになります。
ポイント③background-sizeでストライプ柄のサイズを指定
background-size: 100% 0.5em; /* 横幅 縦幅 */background-sizeでは、ストライプ柄マーカーのサイズを指定できます。
まずX軸方向のサイズ(横幅)には、100%を指定します。これでspanで囲んだ文章全体にマーカーを引くことができますね。
次にマーカーのY軸方向のサイズ(縦の太さ)を指定します。
0.5emを指定しているので、文字サイズの0.5倍分の高さ = 文字サイズの半分の高さという計算になります。
以上で実装コードの解説は終わりです！
ここからさらにカスタマイズしたい方のために、次の章でカスタマイズ方法を紹介していきます。
ストライプ柄マーカーのカスタマイズ方法
ここでは、以下の5つのカスタマイズ方法を紹介します。
- ストライプの角度を調整
- ストライプの色を調整
- ストライプの色の数を調整
- ストライプの色の間隔を調整
- マーカーの太さを調整
ストライプの角度を調整
角度を変更するには、以下のハイライト箇所を調整します。
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}degの箇所に好きな数値を入れることで、ストライプの角度を調整することができます。
角度を90度にする
.stripe-marker {
background-image: repeating-linear-gradient(90deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}ストライプ柄マーカーの実装DEMO
ストライプの色を調整
色の調整には、#fcf69fとなっている2箇所にカラーコードを指定してください。
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}赤のストライプ
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fad3d1 0, #fad3d1 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}赤のストライプ柄マーカーの実装DEMO
緑のストライプ
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#bdf9c3 0, #bdf9c3 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}緑のストライプ柄マーカーの実装DEMO
青のストライプ
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#b7e3ff 0, #b7e3ff 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}青のストライプ柄マーカーの実装DEMO
ストライプの色の数を調整
DEMOでは黄色と透明のみでしたが、ストライプ柄の色の数はいくらでも増やすことができます。
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fadbda 0, #fadbda 2px,
transparent 2px, transparent 4px,
#feecd2 4px, #feecd2 6px,
transparent 6px, transparent 8px,
#fff9c9 8px, #fff9c9 10px,
transparent 10px, transparent 12px,
#d5ead8 12px, #d5ead8 14px,
transparent 14px, transparent 16px,
#d3edfb 16px, #d3edfb 18px,
transparent 18px, transparent 20px,
#d2cce6 20px, #d2cce6 22px,
transparent 22px, transparent 24px,
#ffe2ef 24px, #ffe2ef 26px,
transparent 26px, transparent 28px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}複数色のストライプ柄マーカーの実装DEMO
ストライプを7色にした例です。
0px~2pxは色1, 2px~4pxは透明…というふうにして区切りながら、好きな色のストライプを作成してみてください。
ストライプの色の間隔を調整
色の間隔を調整するには、以下の部分をカスタマイズします。
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}0~2px、2px~4pxとなっていますが、この部分に好きなサイズを指定することでストライブ柄の感覚を調整できます。
ストライプ柄の間隔を4pxにする
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 4px,
transparent 4px, transparent 8px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}ストライプ柄の間隔が2pxの場合の実装DEMO
ストライプ柄の間隔が4pxの場合の実装DEMO
マーカーの太さを調整
マーカーの太さを変えるには、background-sizeの値を調整します。
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}マーカーの高さを100%にする
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 100%;
}ストライプ柄マーカーの高さが100%の場合の実装DEMO
値に100%を指定することで、文字の高さいっぱいにマーカーを引くことができます。
また、%指定なので、文字のサイズに応じてマーカーの高さも自動的に調整されます。
マーカーの高さを10pxに固定する
.stripe-marker {
background-image: repeating-linear-gradient(-45deg,
#fcf69f 0, #fcf69f 2px,
transparent 2px, transparent 4px
);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 10px;
}ストライプ柄マーカーの高さが10pxの場合の実装DEMO
マーカーの高さをpxで指定することも可能です。
この場合、文字サイズに関係なくマーカーは常に10pxの高さを保つようになります。
ストライプ柄マーカーを実装する際の注意点
ストライプ柄マーカーを使用するにあたって、1点だけ注意点があります。
それは、マーカーを引きたい箇所には必ずspanタグで囲う必要があるということです。
以下で例をみながら説明していきますね。
【よくある失敗例】pタグに直接クラス指定している
よくある失敗のうちのひとつが、spanではなくpタグに直接マーカーを指定している場合です。
<p class="stripe-marker">ストライプ柄マーカーの実装DMEOです。pタグにマーカーのクラスを指定すると、正しく表示されません。</p>ストライプ柄マーカーの実装DMEOです。pタグに直接マーカーのクラスを指定すると、正しく表示されません。
pタグはブロックレベル要素なので、タグ全体が一つのブロックとして認識されます。
実際にマーカーがpタグのブロック全体の下に引かれているのが確認できますね。
ブロックレベル要素のタグにマーカーを指定すると、うまく表示されないということがわかっていただけたかと思います。
次で正しい例を見ていきましょう。
【正しい例】spanタグで囲んでからクラス指定できている
こちらは
タグに対してマーカークラスをつけた場合の正しい例です。span
<p><span class="stripe-marker">ストライプ柄マーカーの実装DMEOです。spanタグにマーカーのクラスを指定することで、正しく表示されます。</span></p>ストライプ柄マーカーの実装DMEOです。spanタグにマーカーのクラスを指定することで、正しく表示されます。
文章全体にマーカーが引かれているのが確認できますね。
spanタグはインライン要素なので、ブロックレベル要素とは違い一つのかたまりとは認識されません。
そのため、文章全体にマーカーを適用することができます！
実際にマーカーを使用する際には、この点に気をつけてください。
【まとめ】ストライプ柄のマーカーをCSSで実装する方法
今回の記事では、ストライプ柄のマーカーをCSSで実装する方法を紹介しました。
通常の蛍光ペン風マーカーとは違った印象になるので、ぜひ使ってみてください！
当ブログで使用しているWordPressテーマ「SWELL」では、通常の蛍光マーカーもストライプ柄マーカーも標準搭載されているので、気になる方は是非チェックしてみてくださいね。
コメント