ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

:first-letterの利用

:first-letterの使い方

:first-letterとは疑似要素の1つで、「要素の最初の1文字」にのみスタイルを適用することができます。

例えば、以下のような文書があるとします。

<p>さきちん絵はがきで配布しているデータは1181×1748pxサイズです。<br>cmで表示すると、10×14.8cmとなり、ハガキと同じサイズになります。<br>はじめからハガキサイズでデータを配布しているので、リサイズや調整をする必要がなく、そのまま印刷することができます。</p>

:first-letterを使えば、最初の1文字、つまり「さ」の文字にだけスタイルを適用することができます。

:first-letterの説明図

具体的な使用例

例として、さきほどの文書に:first-letterを使ってスタイルを適用してみます。

[CSSの記述例]
p:first-letter {
color:#F00;  ← 赤色
font-size:30px;  ← 文字サイズを30px
}
[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>:first-letterの利用</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<p>さきちん絵はがきで配布しているデータは1181×1748pxサイズです。<br>cmで表示すると、10×14.8cmとなり、ハガキと同じサイズになります。<br>はじめからハガキサイズでデータを配布しているので、リサイズや調整をする必要がなく、そのまま印刷することができます。</p>

</body>
</html>

これをブラウザで確認すると、以下のように表示されます。

:first-letterを適用した図

このように:first-letterを使えば、「最初の1文字」にのみスタイルを適用させることができます。

覚えておきたいポイント

要素の一文字目に適用される

:first-letterを使えば、最初の1文字だけ大きくしたり、色を変えたりといった表現が可能です。
よく新聞や雑誌などで最初の1文字が大きく表示されていたりしますが、簡単にあのような表現が可能となります。

:beforeと:afterの利用
« 前のページへ :first-lineの利用

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。