HTML本文でCSSを使って1文字目だけを大きくする

1文字目だけを大きく
よく雑誌などで、1文字目だけが大きい文章を目にしたことがあると思います。
本日は、その状態をHTMLのタグとHTMLに記述したCSSで表現する方法を説明したいと思います。
スタイルシートは使用しないで表現する方法です。

まずは、事例1と事例2を見ていただきたいと思います。
説明もそれぞれに書いておきます。


事例1:文章はでたらめです。←手抜きです。)

きょうは久しぶりに暑いです。きょうは久しぶりに暑いです。きょうは久しぶりに暑いです。きょうは久しぶりに暑いです。
今エアコンをつけたところです。今エアコンをつけたところです。今エアコンをつけたところです。今エアコンをつけたところです。

このまま寒くなるかと思っていました。このまま寒くなるかと思っていました。このまま寒くなるかと思っていました。


え~と、9月6日ですね。え~と、9月6日ですね。え~と、9月6日ですね。
早いものですね。早いものですね。早いものですね。

オリンピックまでもう少しですね。オリンピックまでもう少しですね。オリンピックまでもう少しですね。



上の事例1は、一文字目だけが大きいですね。そして、それは2行目にはかかっていませんね。


事例1のHTMLとCSSのソースは次のようになっています。
※ここにソースを表示させるために、タグの左側の「<」は大文字になっています。実際に使用する場合は小文字にしてください。

<HTMLの部分のソース>
<p class="first">ここにテキスト文章が入る。</p>

<CSSの部分のソース>
<style>
p.first:first-letter
{
font-size:200%;
padding:0.1em;
color:white;
background-color:darkslategray;     /*!  1文字目に背景色を入れて白抜き文字にした */
}
p.first{line-height:1.2}
</style>



wordpress-923188_1920 (1).jpg
StockSnapによるPixabayからの画像


1文字目だけを大きくして数行にかかる
事例2:文章はでたらめです。)

きょうは久しぶりに暑いです。きょうは久しぶりに暑いです。きょうは久しぶりに暑いです。きょうは久しぶりに暑いです。
今エアコンをつけたところです。今エアコンをつけたところです。今エアコンをつけたところです。今エアコンをつけたところです。今エアコンをつけたところです。今エアコンをつけたところです。
このまま寒くなるかと思っていました。このまま寒くなるかと思っていました。このまま寒くなるかと思っていました。


え~と、9月6日ですね。え~と、9月6日ですね。え~と、9月6日ですね。
早いものですね。早いものですね。早いものですね。
オリンピックまでもう少しですね。オリンピックまでもう少しですね。オリンピックまでもう少しですね。



上の事例2は、外国の雑誌・書籍などでよく見かけるドロップキャップと同じですね。1文字目が大きくて、そしてその文字が数行にかかっています。
「font-size:200%;」に指定していますが、これをもっと大きな数値にすると、さらに多数の行にかかるようになります。


事例2のHTMLとCSSのソースは次のようになっています。
※ここにソースを表示させるために、タグの左側の「<」は大文字になっています。実際に使用する場合は小文字にしてください。

<HTMLの部分のソース>
<p class="big">ここにテキスト文章が入る。</p>

<CSSの部分のソース>
<style>
p.big:first-letter
{
font-size:200%;
padding:0.1em;
color:darkgreen;
float:left;    /*! 事例1との最大の違いはこの部分を入れたこと */
}
p.big{line-height:1.2}
</style>



1つのブログのHTMLの中に<style>の記述を1回しておくだけで何回でも、
事例1<p class="first">と事例2<p class="big">を使い分けすることにより、1文字目が大きい状態を1行だけor数行にかかるようにするかを使い分けできます。




色名でも指定できる
上の事例では、色を色名(darkslategrayとwhitedarkgreen)で指定しました。

以下の色は、16進法の数値を使用しなくても、色名を記述することで色を指定できます。
140種の色名が決められています。
※なお、色系は決まりがあるわけではないので、便宜上私の感覚で分類いたしました。
※以下の枠の色は、色名で指定しました。(順にsilver、cornflowerblue、mediumseagreen、tan、palevioletredを使用)

<白・黒・グレイ・ベージュ系>25色 black, dimgray, gray, darkgray, silver, lightgray, gainsboro, whitesmoke, white, snow, ghostwhite, floralwhite, linen, antiquewhite, papayawhip, blanchedalmond, bisque, moccasin, navajowhite, peachpuff, mistyrose, lavenderblush, seashell, oldlace, ivory


<水色・青系>34色 honeydew, mintcream, azure, aliceblue, lavender, lightsteelblue, lightslategray, slategray, steelblue, royalblue, midnightblue, navy, darkblue, mediumblue, blue, dodgerblue, cornflowerblue, deepskyblue, lightskyblue, skyblue, lightblue, powderblue, paleturquoise, lightcyan, cyan, aqua, turquoise, mediumturquoise, darkturquoise, lightseagreen, cadetblue, darkcyan, teal


<緑色系>21色 darkgreen, green, forestgreen, seagreen, mediumseagreen, mediumaquamarine, darkseagreen, aquamarine, palegreen, lightgreen, springgreen, mediumspringgreen, lawngreen, chartreuse, greenyellow, lime, limegreen, yellowgreen, darkolivegreen, olivedrab, olive


<茶色・黄色・オレンジ色系>25色 darkkhaki, palegoldenrod, cornsilk, beige, lightyellow, lightgoldenrodyellow, lemonchiffon, wheat, burlywood, tan, khaki, yellow, gold, orange, sandybrown, darkorange, goldenrod, peru, darkgoldenrod, chocolate, sienna, saddlebrown, coral, tomato, orangered 


<赤・紫色系>35色 maroon, darkred, brown, firebrick, indianred, rosybrown, darksalmon, lightcoral, salmon, lightsalmon, red, crimson, mediumvioletred, deeppink, hotpink, palevioletred, pink, lightpink, thistle, magenta, fuchsia, violet, plum, orchid, mediumorchid, darkorchid, darkviolet, darkmagenta, purple, indigo, darkslateblue, blueviolet, mediumpurple, slateblue, mediumslateblue 

参照:原色大辞典

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

  • tor

    CSS講座分かりやすくて参考になります。
    分かると使ってみたくなりますね。
    2019年09月06日 19:23
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    このHTMLとCSSは、どのブログでもホームページでも共通なので、多分使えると思います。
    2019年09月06日 20:35
  • てくてく

    色々な事ができるんですね。
    ン・・・なんか、難しそうですが、やればできそうですね。
    なんでも、やってみよう。
    2019年09月09日 14:49
  • わけい

    てくてくさんへ
    コメントどうもありがとうございます。
    やってみると、意外と出来るものが多いですのね。
    やらないことにはゼロですが、やってみると一気に100は無理でもやるごとに100に近づくことが多いと思います。
    2019年09月09日 18:34