ELLの足跡

人は最後は一人だという…でも、…今は妻が傍にいてくれる…

HP上で段落の最初の一文字を大きくデザインする方法

日々のパソコン
ＨＰで段落の最初の一文字を大きくデザインした文字を見かける事ってありますよね・・・

今日はそのテクニックを紹介してみますね・・・


  • 例えば下の図のように、最初の一文字を大きくしてる場合・・・



    2. 段落要素のＰ要素を使います。

    3. 先頭一文字だけにスタイルを適用する場合・・・first-letter疑似要素を使います
      　　例えば、最初の一文字を2倍にする場合・・・p:first-letter { font-size: 200%; }と記述します。

    4. <HEAD>～</HEAD>の中に下のスタイルシートを記述します
      <style type="text/css">
      p:first-letter {
      　 color: white;
      　 background-color: blue;
      　 font-size: 200%;
      }
      </style>


    5. P要素を使い<BODY>～</BODY>の中に文章を記述します・・・
      　　　　　　　　　　＜P＞私は朝から仕事に励んでいます＜/P＞

    6. これをまとめてみますと、以下のように成ります。
      <HTML>
      <HEAD>
      <style type="text/css">
      p:first-letter {
      color: white;
      background-color: blue;
      font-size: 200%;
      }
      </style>
      </HEAD>
      <BODY>
      ＜P＞私は朝から仕事に励んでいます＜/P＞
      </BODY>
      </HTML>



今日の小技は如何でしたか？