サンプル

シンプルな見出し（ヘッドライン）の作り方について解説します。

コード（Codepen）

コードはこちらから見ることができます。

See the Pen Untitled by Shin (@shin-ichi) on CodePen.

解説

【HTML解説】

HTML部分は「サンプル」という文字を<h1>タグで挟んでいます。<h2>タグや<h3>タグでもclass="headline"を記述すれば、同様にヘッドライン（見出し）を作ることができます。

【CSS解説】

/*ヘッドライン（見出し）のCSSです。*/
.headline{
text-align: left; /*文字を左寄せします。*/
padding : 0.5rem; /*文字と枠の間に余白を作ります。（1remとは文字ひとつ分の大きさを表しています。通常は16ptです。）*/
background-color: #ff6347; /*背景色をトマト色にします。*/
border-radius :3px;　/*角丸にします。*/
color: #ffffff;　/*文字色を白にします。*/
}