ホームページ制作MATSUTE BLOG

この記事は「2021年01月08日」に書かれた記事です

わかりやすことが一番とはゆえ、悩みどころです。
この記事では「スタンダード編」として、よくあるタイプではありますが、よく使うタイプのタイトルを集めてみました。

見出しのデザイン1：二重の枠線

HTML

<h1>見出しのデザイン</h1>

CSS

h1 {
font-size: 1.2rem;
color: #FFF;
padding: 0.2em 0.8em 0 0.8em;
margin-bottom: 1em;
background-color: #EE6557;
box-shadow: 0px 0px 0px 5px #EE6557;
border: 1px dashed #FFF;
}

見出しのデザイン2：ちょこっと折れ目が付いている

HTML

<h1>見出しのデザイン</h1>

CSS

h1 {
position: relative;
color: #FFF;
padding: 0.2em 0.8em;
margin-bottom: 1em;
background-color: #EE6557;
box-shadow: 0px 0px 0px 5px #EE6557;
border: 2px dashed #FFF;
}

h1:after {
content: "";
position: absolute;
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #FFF#FFF#64160d;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
}

見出しのデザイン3：ここだよ

HTML

<h1>見出しのデザイン</h1>

CSS

h1 {
position: relative;
display: inline-block;
padding: 0 4em;
margin-bottom: 1em;
}


h1:before {
content: "";
position: absolute;
display: inline-block;
top: 50%;
left:0;
width: 44px;
height: 2px;
background-color: #000;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}

h1:before {
content: "";
position: absolute;
display: inline-block;
top: 50%;
right:0;
width: 44px;
height: 2px;
background-color: #000;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}

見出しのデザイン4：カッコ

HTML

<h1>見出しのデザイン</h1>

h1 {
position: relative;
display: inline-block;
line-height: 1.4;
padding:0.2em 1em 0 1em;
top:0;
}

h1 ::before {
content:"";
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 100%;
display: inline-block;
border:1px solid #000;
border-right:none;
}

h1 ::after {
content:"";
position: absolute;
display: inline-block;
top: 0;
right: 0;
width: 8px;
height: 100%;
border:1px solid #000;
border-left:none;
}

見出しのデザイン5：太さの違う上下線

HTML

<h1>見出しのデザイン</h1>

CSS

h1 {
position: relative;
line-height: 1.4;
padding: 1em 0 0.8em 0;
top:0;
border-bottom: 1px solid #999;
}

h1::before {
content:"";
position:absolute;
display: block;
width:100%;
top:0;
border-bottom: 3px solid #666;
}

h1::after {
content:"";
position:absolute;
display: block;
width:100%;
top:0.3em;
border-bottom: 1px dotted #666;
}

見出しのデザイン6：途中から色が変わる線

HTML

<h1>見出しのデザイン</h1>

CSS

h1 {
font-weight:700;
position:relative;
padding-bottom: .25em;
border-bottom: 3px solid #CCC;
}

h1::after {
content: "";
position:absolute;
left: 0;
bottom: -3px;
width: 130px;
height: 3px;
background-color: #EE6557;
}

次回「4-14 見出しのデザイン：左右の―線―編」