1文字だけ文字の色や大きさを変えたい
2025年12月8日

12月に入って1週目。
いろんなところにクリスマスシーズン!
今年のクリスマスは賑やかになれることを祈ってます。
さてと、話題を取り戻して…
1文字だけ文字の色や大きさを変えたい
たまたま、他業者のWebサイトをぐるぐると…
いろんなWebサイトを見たり、デザインを見たり、レイアウトなど吸収しながら…
あるデザイン会社のWebサイトを見て「????」懐かしいレイアウト…
最初の一文字だけのフォントを大きく、色を変えての見出しタイトル!
これって、「<span>~</span>」のフォントを設定?
コンソールバグを確認したら、「::first-letter」でした。
懐かしー!
あれをデザインをして、上司にめっちゃ怒られました。
「最初の一文字を大きくするメリットはあるの?」
ときつい言葉を投げられました。
こちらは、
「印刷会社であり、デザインの魅力を発信するために、『最初の一文字をインパクトに』」
という意図をお話をしたところ、その意図はわかりますが、先方のデザイン会社は却下って言われるでしょう?とさ…
結局、却下されました…
先方のお客様の要望とかをいろいろ考えながらデザインをすることが大切だなぁと改めていい教訓になりました。
久々に、「最初の一文字のデザイン」の技術忘備録として書き込みますね。
<h1>見出しタイトル</h1>
h1::first-letter {
color: ##8b008b;
font-size: 150%;
}
これで、最初の1文字が暗い紫色で、フォントサイズが大きく見えるようになりました。
また、デザインの需要があればぜひ使ってみて!
では、また!






