左ボーダーヘッドライン

サンプル

左端にオレンジのボーダーが付いた見出し（ヘッドライン）の作り方について解説します。

コード（Codepen）

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

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

解説

【HTML解説】

HTML部分は「サンプル」という文字を<h1>タグで挟んでいます。<h2>タグや<h3>タグでもclass="midashi"を記述すれば、同様に左端にボーダーが入った見出しを作ることができます。

【CSS解説】

text-align: left;
テキスト（ここではサンプルという文字）を左寄せします。

padding : 5px;
文字と枠との間の余白（上下左右）を5pxに設定しています。

border-left: 4px solid #ff6347;
左端のオレンジ色の実線（solid）を表示する設定です。

background-color: #efefef;
背景を灰色にします。

border-radius :5px;
見出し（ヘッドライン）の左上、右上、右下、左下を角丸にします。