文字にマーカーをつけるコーディングの覚書きです。
コーディング中に文字にマーカーをつけることがあったので、
ググりながら実装してみた時の最初のコードがこれ。
<h1 class="title">
<span class="marker">レスポンシブにタイトルにマーカーを入れたい</span>
</h1>
<style>
/* フォントサイズ指定 */
.title { font-size: 28px; line-height: 1; }
@media (max-width: 460px) {
.title { font-size: 22px; }
}
/* 文字マーカーのデザイン指定 */
.maker {
position: relative;
}
.maker:before {
position: absolute;
content: '';
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
background-size: cover;
}
</style>何も考慮しなくていいならこれで十分かと思います。
プレビュー
しかし、ウインドウの幅を狭く変えてみてください。
画面幅に合わせてテキストが改行されるので、これだと改行の途端に、マーカーのデザインが崩れてしまいます。
さらにググり、改良コードがこれ。
<h1 class="title">
<span class="marker">レスポンシブに</span><span class="maker">タイトルにマーカーを入れたい</span>
</h1>
<style>
/* フォントサイズ指定 */
.title { font-size: 4.66vw; line-height: 1; }
@media (min-width: 610px) {
.title { font-size: 28px; }
}
@media (max-width: 460px) {
.title { font-size: 22px; }
.marker { white-space: nowrap; }
}
/* 文字マーカーのデザイン指定 */
.maker {
display: inline-block;
position: relative;
}
.maker:before {
position: absolute;
content: '';
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
background-size: cover;
}
</style>● 改良ポイント
- 改行するタイミングを決める。（画面幅似合わせて文字サイズをレスポンシブに）
- spanタグで改行ごとにマーカーのスタイルをつける
- spanタグにdisplay:inline-block;
文字サイズは画面幅が610pxまでは一行で表示させ、609px 〜461pxは460px未満と同様にspanタグごとに改行させてます。
自動的に改行される前に改行のタイミングと改行箇所を予めスタイルで指定しておくこと。
これできれいに２行ともマーカーされてるかと！
プレビュー
おまけで、マーカーを斜めボーダーのアンダーライン風にしたコードがこちら。
<h1 class="title">
<span class="marker">レスポンシブに</span><span class="maker">タイトルにマーカーを入れたい</span>
</h1>
<style>
/* フォントサイズ指定 */
.title { font-size: 4.66vw; line-height: 1; }
@media (min-width: 610px) {
.title { font-size: 28px; }
}
@media (max-width: 460px) {
.title { font-size: 22px; }
.marker { white-space: nowrap; }
}
/* 文字マーカーのデザイン指定 */
.maker {
display: inline-block;
position: relative;
}
.maker:before {
position: absolute;
content: '';
z-index: -1;
bottom: 0;
left: 0;
right: 0;
height: 10px;
background-image: linear-gradient(-45deg, #FFE500 25%, #ffffff 25%, #ffffff 50%, #FFE500 50%, #FFE500 75%, #ffffff 75%, #ffffff);
background-size: 15px 15px;
}
</style>
ちょっと一捻りしたデザインになりました。
プレビュー
ただ、
文章途中に長いマーカーをつけたい場合は改行タイミングの調整が難しくなりそうなので、
使い時はタイトルとかに限定したほうがよいかもです。
今回はここまで。