行の折り返し位置を指定した見出し

行の折り返し位置を指定した見出しをデザインしてみます。

#h2-headline03 {
      width: 10em;
      height: 2.5em;
      margin-top: 3em;
      line-height: 1.2em;
      color: #600;
      font-size: 1.5em;
      border-left: 1px solid #600;
      padding: 0.5em 0 0.5em 1em;
}

<h2 id="h2-headline03">折り返し位置を指定した見出し</h2>

折り返し位置を指定した見出し

このスタイルのポイントは横幅をemで指定することで文字数を制限して行を２列にしています。

CSSで見出しをデザイン（擬似クラス:first-letter）

ドロップキャップで使った:first-letter 擬似クラスを使って見出しをデザインしてみます。

#h2-headline02 {
      color: #600;
      border-bottom: 1px solid #600;
}

#h2-headline02:first-letter {
      font-size: 2em;
}

<h2 id="h2-headline02">CSSで見出しをデザイン（擬似クラス:first-letter）</h2>

CSSで見出しをデザイン（擬似クラス:first-letter）

CSSで見出しをデザイン（付箋風）

CSSで便箋風の見出しをデザインしてみます。

backgroundで背景色を指定、colorでテキストカラーを見やすい適当なカラーにして、border-leftで付箋の感じを演出、border-bottomで立体感を出して、paddingで文字の位置を調整したら完成です。

#h2-headline01 {
      background: #ddd;
      color: #600;
      border-left: 10px solid #600;
      padding: 5px 0 5px 10px;
}

<h2 id="h2-headline01">CSSで付箋風の見出しをデザイン</h2>

CSSで付箋風の見出しをデザイン