borderを使った見出しのバリエーション

基礎になるコード

HTML

この記事の見出しのHTMLは以下の通り。

<div class="headline01">
  いろいろな見出しのデザインをストックする
</div>

共通のCSS

CSSも基本的な設定は一緒。コピーできるように1つ1つのソースにも書いてあるよ。

.base {
  font-size: 24px;   // 文字の大きさ
  font-weight: 700;  // 文字の太さ(700はBold相当)
  line-height: 1;    // 行と行の間隔
}

線を利用したデザイン

線は、実線、二重線、破線、点線の4種類実装できる。

枠は、左線、上線、右線、下線の4種類実装できる。

そのほか、四角く囲み方は4種類実装できる。

線 １本

下　実線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: bold; // 文字の太さ
  line-height: 1; // 行間の高さ
  padding-bottom: 8px;  //文字から下線までの距離
  border-bottom: solid 3px #3F51B5; // 下線の 種類 太さ 色
}

下　二重線　全幅

.headline {
  margin-top: 48px; // 上のアイテムからの距離
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ
  line-height: 1; // 行間の高さ
  padding-bottom: 8px; //文字から下線までの距離
  border-bottom: 6px double #36BFED; // 下線の 種類 太さ 色 
}

下　破線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ
  line-height: 1; // 行間の高さ
  padding-bottom: 8px; //文字から下線までの距離
  border-bottom: 3px dashed #3F51B5; // 下線の 種類 太さ 色 
}

下　点線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ
  line-height: 1; // 行間の高さ
  padding-bottom: 8px; //文字から下線までの距離
  border-bottom: 3px dotted #3F51B5; // 下線の 種類 太さ 色 
}

左　実線　全幅

.headline{
  margin-top: 48px; // 上のアイテムからの距離
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-left: 4px solid #36BFED; // 下線の 種類 太さ 色 
}

左　二重線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-left: 6px double #36BFED; // 下線の 種類 太さ 色 
}

左　破線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-left: 3px dashed #36BFED; // 下線の 種類 太さ 色 
}

左　点線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-left: 3px dotted #36BFED; // 下線の 種類 太さ 色 
}

上下線 2本

上下　実線　全幅

.headline {
  margin-top: 48px; // 上のアイテムからの距離
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-top: 3px solid #36BFED; // 下線の 種類 太さ 色 
  border-bottom: 3px solid #36BFED; // 下線の 種類 太さ 色 
}

上下　二重線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-top: 6px double #36BFED; // 下線の 種類 太さ 色 
  border-bottom: 6px double #36BFED; // 下線の 種類 太さ 色 
}

上下　破線　全幅

.headline{
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-top: 3px dashed #36BFED; // 下線の 種類 太さ 色 
  border-bottom: 3px dashed #36BFED; // 下線の 種類 太さ 色 
}

上下　点線　全幅

.headline0112 {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-top: 3px dotted #36BFED; // 下線の 種類 太さ 色 
  border-bottom: 3px dotted #36BFED; // 下線の 種類 太さ 色 
}

左上　実線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-top: 3px solid #36BFED; // 下線の 種類 太さ 色 
  border-left: 3px solid #36BFED; // 下線の 種類 太さ 色 
}

左上　二重線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-top: 6px double #36BFED; // 下線の 種類 太さ 色 
  border-left: 6px double #36BFED; // 下線の 種類 太さ 色 
}

左上　破線　全幅

.headline0115 {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-top: 3px dashed #36BFED; // 下線の 種類 太さ 色 
  border-left: 3px dashed #36BFED; // 下線の 種類 太さ 色 
}

左上　点線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-top: 3px dotted #36BFED; // 下線の 種類 太さ 色 
  border-left: 3px dotted #36BFED; // 下線の 種類 太さ 色 
}

左下　実線　全幅

.headline0117 {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-left: 3px solid #36BFED; // 下線の 種類 太さ 色 
  border-bottom: 3px solid #36BFED; // 下線の 種類 太さ 色 
}

左下　二重線　全幅

.headline0118 {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-left: 6px double #36BFED; // 下線の 種類 太さ 色 
  border-bottom: 6px double #36BFED; // 下線の 種類 太さ 色 
}

左下　破線　全幅

.headline {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-left: 3px dashed #36BFED; // 下線の 種類 太さ 色 
  border-bottom: 3px dashed #36BFED; // 下線の 種類 太さ 色 
}

左下　点線　全幅

 .headline0120 {
  font-size: 24px; // 文字の大きさ
  font-weight: 700; // 文字の太さ 
  line-height: 1; // 行間の高さ
  padding: 8px; //文字から下線までの距離
  border-left: 3px dotted #36BFED; // 下線の 種類 太さ 色 
  border-bottom: 3px dotted #36BFED; // 下線の 種類 太さ 色 
}