今回は「first-letter」疑似要素を使用し、最初の文字だけスタイルを変更する方法について解説してきます。
ファーストビューなどでインパクトのあるタイトルデザインを実装したい場合などに活用してみてください。
Googleフォント「Dela Gothic One」を適用
Googleフォントページより「Dela Gothic One」の@importをコピペ。「font-family」にGoogleフォント「Dela Gothic One」を指定します。
<div class="container">
<h1>最初の文字だけ装飾する</h1>
</div>
@import url('https://fonts..');
.container {
position: relative;
display: flex;
background-image:url(...);
...
}
h1 {
padding-top: 0.6rem;
color: white;
font-family: 'Dela Gothic One';
text-align: center;
font-size: 24px;
line-height: 1;
}最初の文字を大きくし、斜めストライプを入れる
first-letter疑似要素で「repeating-linear-gradient」を指定し斜めストライプにする。「background-clip: text;」で文字に反映し、「font-size」を250pxに設定
<div class="container">
<h1>最初の文字だけ装飾する</h1>
</div>
.container{...}
h1{...}
h1::first-letter {
background:
repeating-linear-gradient(
45deg, white 0 2px,
transparent 2px 4px
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 250px;
}
２行表示にする
h1セレクタの幅を「250px」にして２文字目以降を２行目に表示し完成。
<div class="container">
<h1>最初の文字だけ装飾する</h1>
</div>
.container{...}
h1{
....
width: 250px;
...
}
h1::first-letter {...}
