koblog

高校生のWEBデザインブログ

【CSS】1文字目だけを大きくする方法

海外の新聞や、ブログではよく1文字目だけが大きく書かれていることがあります。

特に英語の場合は見栄えもよくオシャレですよね。

 

そこで今回は1文字目だけを大きくする方法を紹介します。

日本語の場合、色を変えたり行間を変えないと微妙かもしれませんが、使い方次第ではとても有効だと思います。

 

さて、今回のカスタマイズですが下のようになります。

こんにちは。

今日もいい天気ですね。

 

上のように1文字目が大きくなります。また色も灰色に変えてみました。

英語だと下のようになります。

hahaha.

Hello world!!!

 

CSS

CSS
.b:first-letter {
  font-size: 150%;/*文字サイズ*/
  color:  gray;/*文字の色*/
}   

first-letterで最初の文字を指定できます。

また最後の文字に関しては「last-letter」でできると思いきや、できないので「after」などを使う必要があります。

使う際は使いたい文字や見出しに「b」のクラスをつければ反映されます。

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる