1文字目を装飾する

できあがりイメージ

つくりかた

Step2 1文字目の文字をタグで囲む

spanタグで「M」の文字を囲いましょう。
span は文章の中の一部分に目印をつけることができるタグです。
クラス名をつけておくとあとで css の指定がやりやすくなります。
サンプルでは"title-point"というクラス名をつけています。

Step3 1文字目にCSSを指定する

title-point クラスにプロパティを追加していきます。
クラスセレクタの書き方は、.title-point { } です。
{ } 波カッコの中にプロパティを書いていきます。

Step4 1文字目の文字のサイズを変更する

font-size で文字のサイズを指定しましょう。
サンプルでは文字のサイズを40px に指定しています。
他の文字より大きいサイズにするのがオススメです。

Step5 1文字目の文字に背景色を指定する

background-color で背景色を指定しましょう。
サンプルでは #800000を指定しています。
文字の周りに余白をとっておくと読みやすくなります。サンプルでは padding を10px で指定しています。
背景色に合わせて、color で文字の色も変更しておきましょう。サンプルでは #ffffee (クリーム色) を指定しています。

Step6 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step7 背景を円形にする

border-radius: 50% を追加して、背景を円形にしましょう。
値はpx以外にも%で指定することができます。border-radiusを50%に指定すると全ての角が滑らかに丸まり、円形になります。
※ブラウザの種類によっては円形にならない場合があります。
また、サンプルでは、他の文字とのバランスをとるために、margin-right で 右側に 5px の余白を作っています。

Step8 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step9 実際の見え方を確認する

一文字目の文字が円で囲われていたら完成です。