概要

前回の動画を観ていない人は必ず前回の動画を観て下さい。

見出しデザインを実装する為のCSS超簡単入門

今日は前回の講義『見出しデザイン実装の為のCSS超簡単入門レクチャー』の続編となります。
いよいよCSSで見出しデザインを自分のサイトデザインに合わせてカスタムしながら実装します。
前回の講義でCSSの基礎中の基礎を学んでいない人は前回の動画や記事を見る事をお勧めします。
今日は非常に長い動画ですが、見出しデザインの実装だけでなく、CSSに関して非常にスムーズな実践的入門となりますので頑張って学習しましょう。

🎁CSSコピペのみで実装!洗練された見出しデザイン45選

洗練された見出しデザイン1

最初に設定しておくCSS

/* 洗練された見出しデザイン1 */
h2{
    position:relative;
    margin:0 -1px;
    font:bold 30px/1.6 Arial, Helvetica, sans-serif;
    text-align:center;
    color:#333;
    background:#87ffc9;
    -webkit-transform: rotate(-3deg) skew(-3deg);
    -moz-transform: rotate(-3deg) skew(-3deg);
    -o-transform: rotate(-3deg) skew(-3deg);
    -ms-transform: rotate(-3deg) skew(-3deg);
    transform: rotate(-3deg) skew(-3deg);
    text-shadow:1px 1px 0 rgb(141, 186, 44);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
                30px 0 0 0 #66ba94,
                -30px 0 0 0 #66ba94;
}

洗練された見出しデザイン2

最初に設定しておくCSS

/*洗練された見出しデザイン2*/
h2{
    position: relative;
    font-size: 2em;
    font-weight: bold;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 2.0em;
    border-bottom: 2px solid #bc0061;
}
 
h2:before{
    content: "✜";
    font-size: 130%;
    position: absolute;
    color: #bc0061;
    top: 10px;
    left: 9px;
}

洗練された見出しデザイン3

最初に設定しておくCSS

/*洗練された見出しデザイン3*/
h2{
position: relative;
padding: 0.1em 0.5em;
background: -moz-linear-gradient(to right, rgb(91, 255, 197), transparent);
background: -webkit-linear-gradient(to right, rgb(91, 255, 197), transparent);
background: linear-gradient(to right, rgb(91, 255, 197), transparent);
color: #545355;
}

洗練された見出しデザイン4

最初に設定しておくCSS

/* 洗練された見出しデザイン4 */
h2{
    position:relative;
    margin:0 10px;
    padding:0 10px 0 55px;
    font:b 22px/40px Arial, Helvetica, sans-serif;
    color:#171717;
    background:#ffffff;
    z-index:1;
}
h2:before{
    content:" ";
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:40px;
    border-right:#fff solid 2px;
    background:#0df28e;
    background-image: -webkit-gradient(linear, left top, left bottom,
            from(            rgba(255, 255, 255, 0.0)), 
            color-stop(0.20, rgba(255, 255, 255, 0.0)), 
            color-stop(0.20, rgba(255, 255, 255, 0.1)), 
            color-stop(0.40, rgba(255, 255, 255, 0.1)), 
            color-stop(0.40, rgba(255, 255, 255, 0.3)), 
            color-stop(0.60, rgba(255, 255, 255, 0.3)), 
            color-stop(0.60, rgba(255, 255, 255, 0.5)), 
            color-stop(0.80, rgba(255, 255, 255, 0.5)), 
            color-stop(0.80, rgba(255, 255, 255, 0.6)), 
            to(              rgba(255, 255, 255, 0.6))
            );
    background-image: -webkit-linear-gradient(top,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 40%, 
            rgba(255, 255, 255, 0.3) 40%, 
            rgba(255, 255, 255, 0.3) 60%, 
            rgba(255, 255, 255, 0.5) 60%, 
            rgba(255, 255, 255, 0.5) 80%, 
            rgba(255, 255, 255, 0.6) 80%, 
            rgba(255, 255, 255, 0.6) 100%
            );
    background-image: -moz-linear-gradient(top,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 40%, 
            rgba(255, 255, 255, 0.3) 40%, 
            rgba(255, 255, 255, 0.3) 60%, 
            rgba(255, 255, 255, 0.5) 60%, 
            rgba(255, 255, 255, 0.5) 80%, 
            rgba(255, 255, 255, 0.6) 80%, 
            rgba(255, 255, 255, 0.6) 100%
            );
    background-image: -o-linear-gradient(top,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 40%, 
            rgba(255, 255, 255, 0.3) 40%, 
            rgba(255, 255, 255, 0.3) 60%, 
            rgba(255, 255, 255, 0.5) 60%, 
            rgba(255, 255, 255, 0.5) 80%, 
            rgba(255, 255, 255, 0.6) 80%, 
            rgba(255, 255, 255, 0.6) 100%
            );
    background-image: linear-gradient(to bottom,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 40%, 
            rgba(255, 255, 255, 0.3) 40%, 
            rgba(255, 255, 255, 0.3) 60%, 
            rgba(255, 255, 255, 0.5) 60%, 
            rgba(255, 255, 255, 0.5) 80%, 
            rgba(255, 255, 255, 0.6) 80%, 
            rgba(255, 255, 255, 0.6) 100%
            );
            z-index:-1;
}
h2:after{
    content:" ";
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:40px;
    background-image: -webkit-gradient(linear, left top, right top,
            from(            rgba(255, 255, 255, 0.0)), 
            color-stop(0.20, rgba(255, 255, 255, 0.0)), 
            color-stop(0.20, rgba(255, 255, 255, 0.1)), 
            color-stop(0.40, rgba(255, 255, 255, 0.1)), 
            color-stop(0.40, rgba(255, 255, 255, 0.3)), 
            color-stop(0.60, rgba(255, 255, 255, 0.3)), 
            color-stop(0.60, rgba(255, 255, 255, 0.5)), 
            color-stop(0.80, rgba(255, 255, 255, 0.5)), 
            color-stop(0.80, rgba(255, 255, 255, 0.6)), 
            to(              rgba(255, 255, 255, 0.6))
            );
    background-image: -webkit-linear-gradient(left,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 40%, 
            rgba(255, 255, 255, 0.3) 40%, 
            rgba(255, 255, 255, 0.3) 60%, 
            rgba(255, 255, 255, 0.5) 60%, 
            rgba(255, 255, 255, 0.5) 80%, 
            rgba(255, 255, 255, 0.6) 80%, 
            rgba(255, 255, 255, 0.6) 100%
            );
    background-image: -moz-linear-gradient(left,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 40%, 
            rgba(255, 255, 255, 0.3) 40%, 
            rgba(255, 255, 255, 0.3) 60%, 
            rgba(255, 255, 255, 0.5) 60%, 
            rgba(255, 255, 255, 0.5) 80%, 
            rgba(255, 255, 255, 0.6) 80%, 
            rgba(255, 255, 255, 0.6) 100%
            );
    background-image: -o-linear-gradient(left,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 40%, 
            rgba(255, 255, 255, 0.3) 40%, 
            rgba(255, 255, 255, 0.3) 60%, 
            rgba(255, 255, 255, 0.5) 60%, 
            rgba(255, 255, 255, 0.5) 80%, 
            rgba(255, 255, 255, 0.6) 80%, 
            rgba(255, 255, 255, 0.6) 100%
            );
    background-image: linear-gradient(to right,
            transparent 20%,
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 40%, 
            rgba(255, 255, 255, 0.3) 40%, 
            rgba(255, 255, 255, 0.3) 60%, 
            rgba(255, 255, 255, 0.5) 60%, 
            rgba(255, 255, 255, 0.5) 80%, 
            rgba(255, 255, 255, 0.6) 80%, 
            rgba(255, 255, 255, 0.6) 100%
            );
            z-index:-1;
}</pre> 
</pre>

洗練された見出しデザイン5

最初に設定しておくCSS

/*洗練された見出しデザイン5*/
h2 {
position: relative;
background: #a5ffcd;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #00226b;
border-radius: 0 10px 10px 0;
}

h2:before {
font-family: FontAwesome;
content: "\2663";
display: inline-block;
line-height: 60px;
position: absolute;
padding: 0em;
color: white;
background: #00bf56;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #008e40;
}

洗練された見出しデザイン6

最初に設定しておくCSS

/*洗練された見出しデザイン6*/
h2 {
position: relative;
background: #d6dbff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #000f75;
border-radius: 0 10px 10px 0;
}

h2:before {
font-family: FontAwesome;
content: "\2712 ";
display: inline-block;
line-height: 60px;
position: absolute;
padding: 0em;
color: white;
background: #000f75;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #000738;
}

洗練された見出しデザイン7

最初に設定しておくCSS

/* 洗練された見出しデザイン7 */
h2{
    color: #111;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0 1.5em;
    border-bottom: 2px solid #690acc;
    box-shadow: 0 1px 0 #aaaaaa;
    -webkit-box-shadow: 0 1px 0 #aaaaaa;
    -moz-box-shadow: 0 1px 0 #aaaaaa;
    text-shadow: #999999 0px 1px 1px;
}
 
h2{
    font-size:3.0em;
}

洗練された見出しデザイン8

最初に設定しておくCSS

/*洗練された見出しデザイン.8*/
h2{
    position: relative;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 2.0em;
    border-bottom: 2px solid #00a873;
}
 
h2:before{
    content: "□";
    font-size: 170%;
    position: absolute;
    color: #35ffa0;
    top: 0.1em;
    left: 0.2em;
    height: 10px;
    width: 10px;
}
 
h2:after{
    content: "□";
    font-size: 170%;
    position: absolute;
    color: #35daff;
    top: -0.3em;
    left: -0.1em;
    height: 12px;
    width: 12px;
}

洗練された見出しデザイン10

最初に設定しておくCSS

/*洗練された見出しデザイン.10*/
h2{
    position: relative;
    color: #002a80;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 1.7em;
    border-bottom: 3px solid #0553ff;
}
 
h2:before{
    content: "";
    position: absolute;
    background: #05ffb2;
    top: 0;
    left: 0.4em;
    height: 8px;
    width: 20px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
 
h2:after{
    content: "";
    position: absolute;
    background:#05ff07;
    top: 1.0em;
    left: 0;
    height: 7px;
    width: 15px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}

洗練された見出しデザイン11

最初に設定しておくCSS

/*洗練された見出しデザイン.11*/
h2{
    margin: 0 0 1.5em;
    padding: 0.8em;
    border-top: 3px double #145729;
    border-bottom: 3px double #145729;
    font-size: 1.143em;
    font-weight: bold;
}

洗練された見出しデザイン12

最初に設定しておくCSS

/*洗練された見出しデザイン.12*/
h2{
    margin: 0 0 1.5em;
    padding: 0.8em;
    border-left: 7px solid #3100c2;
    border-bottom: 1px solid #3100c2;
    font-size: 1.143em;
    font-weight: bold;
}

洗練された見出しデザイン14

最初に設定しておくCSS

/*洗練された見出しデザイン14/*
h2 {
position: relative;
padding: 8px 15px;
margin-left: 40px;
background: #c6ff1a;
border-radius: 20px;
}

h2:before{font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #c6ff1a;
}

h2:after{
font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #c6ff1a;
}

洗練された見出しデザイン15

最初に設定しておくCSS

/*洗練された見出しデザイン15*/
h2 {
background: #b0dcfa; 
padding: 0.5em;
color: white;
border-radius: 0.5em;
}

洗練された見出しデザイン16

最初に設定しておくCSS

/*洗練された見出しデザイン16*/
h2{
    position:relative;
    padding-left:30px;
    border-bottom:2px solid #ccc;
    font-weight: bold;
    font-size: 22px;
    line-height: 38px;
}
 
h2:before{
    content:''; 
    height:40px; 
    width:5px; 
    display:block; 
    background:#999999; 
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
    -box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
    -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; 
    position:absolute; 
    top:-5px; 
    left:8px;
}
 
h2:after{
    content:''; 
    height:3px; 
    width:17px; 
    display:block; 
    background:#999999; 
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
    -box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
    -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; 
    position:absolute; 
    top:5px; 
    left:2px;
}

洗練された見出しデザイン17

最初に設定しておくCSS

h2{
    position:relative;
    padding-left:30px;
    border-bottom:2px solid #f5005e;
    font-weight: bold;
    font-size: 22px;
    line-height: 38px;
}
 
h2:before{
    content:''; 
    height:0; 
    width:0; 
    display:block; 
    border:10px transparent solid; 
    border-right-width:0; 
    border-left-color:#f5005e; 
    position:absolute; 
    top:11px; 
    left:12px;
}
 
h2:after{
    content:''; 
    height:7px; 
    width:15px; 
    display:block; 
    background:#f5005e; 
    position:absolute; 
    top:17px; 
    left:0px;
}

洗練された見出しデザイン18

最初に設定しておくCSS

/*洗練された見出しデザイン18*/
h2 {
position: relative;
background: #eff4ff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #00226b;
border-radius: 0 10px 10px 0;
}

h2:before {
font-family: FontAwesome;
content: "\f041";
display: inline-block;
line-height: 60px;
position: absolute;
padding: 0em;
color: white;
background: #0039b3;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}

洗練された見出しデザイン19

最初に設定しておくCSS

/*洗練された見出しデザイン19*/
h2 {
position: relative;
background: #ffe224;
padding: 2px 5px 2px 25px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

h2:before {
font-family: FontAwesome;
content: "\f135";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff244f;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 30%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white; 
border-radius: 50%;
}

洗練された見出しデザイン20

最初に設定しておくCSS

/*洗練された見出しデザイン20*/
h2{
position: relative;
padding-left: 50px;
}
h2:before{
position: absolute;
font-family: FontAwesome;
content: "\f0eb";
background: #f0e800;
color: white;
font-weight: normal;
font-size: 25px;
border-radius: 50%;
left: 0;
width: 35px;
height: 35px;
line-height: 25px;
text-align: center;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
h2:after {/*吹き出しのちょこんと出た部分*/
content: '';
display: block;
position: absolute;
left: 25px;
height: 0;
width: 0;
border-top: 5px solid transparent;
border-bottom: 7px solid transparent;
border-left: 25px solid #f0e800;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

洗練された見出しデザイン21

最初に設定しておくCSS

/*洗練された見出しデザイン21*/
h2 {
position: relative;
background: #ffffff;
padding: 0.25em 0.5em;
border-left: solid 2em #f3f0ff;
}


h2:before {
font-family: FontAwesome;
content: "\f040";
position: absolute;
padding: 0em;
color: #270297;
font-weight: normal;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

洗練された見出しデザイン22

最初に設定しておくCSS

/*洗練された見出しデザイン22*/
h2{
position: relative;
border-top: solid 2px #1fd19b;
border-bottom: solid 2px #1fd19b;
background: #e5fff8;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}

h2:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #1fd19b;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
  }

洗練された見出しデザイン23

最初に設定しておくCSS

/*洗練された見出しデザイン23*/
h2 {
position: relative;
padding: 0.5em 0.5em 0.5em 1.5em;
line-height: 1.4;
color: #ff6a6a;
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #f0fffa;
}

h2:before{ font-family: FontAwesome;
content: "\f138";
position: absolute;
font-size: 1em;
left: 0.25em;
top: 0.5em;
color: #ff6a7a; 
}

洗練された見出しデザイン24

最初に設定しておくCSS

/*洗練された見出しデザイン24*/
h2 {
position: relative;
padding-left: 1.2em;
line-height: 1.4;
}

h2:before{ font-family: FontAwesome;
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: #ff4d8a; 
}

洗練された見出しデザイン25

最初に設定しておくCSS

/*洗練された見出しデザイン25*/
h2{
position: relative;
padding: 0.1em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: linear-gradient(to right, rgb(255, 186, 115), transparent);
color: #545355;
}

洗練された見出しデザイン26

最初に設定しておくCSS

/*洗練された見出しデザイン26*/
h2:first-letter {
color: #ff5647;
}
h2{
position: relative;
padding: 0.25em 0;
}
h2:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), #ff5647);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to left, rgb(255, 186, 115), #ff5647);
}

洗練された見出しデザイン27

最初に設定しておくCSS

/*洗練された見出しデザイン27*/
h2{
position: relative;
padding: 0.25em 0;
}
h2:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

洗練された見出しデザイン28

最初に設定しておくCSS

/*洗練された見出しデザイン28*/
h2:first-letter {
font-size: 2em;
color: #ff3d70;
}

洗練された見出しデザイン29

最初に設定しておくCSS

/*洗練された見出しデザイン29*/
h2 {
position: relative;
color: #474747;
font-size: 20px;
padding: 10px 0;
text-align: center;
margin: 1.5em 0;
}
h2:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #fca06e;
border-left-color: transparent;
border-right-color: transparent;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

洗練された見出しデザイン30

最初に設定しておくCSS

/*洗練された見出しデザイン30*/
h2{
position: relative;
padding: 0.25em 1em;
border: solid 2px black;
border-radius: 3px 0 3px 0;
}

h2:before,h2:after
{
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px black;
border-radius: 50%;
}

h2:after {top:-12px;left:-12px;}
h2:before {bottom:-12px;right:-12px;}

洗練された見出しデザイン31

最初に設定しておくCSS

/*洗練された見出しデザイン31*/
h2{
position: relative;
padding: 0.25em 1em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
h2:before, h2:after{
content: '';
position: absolute;
top: -7px;
width: 2px;
  height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
}
h2:before {left: 7px;}
h2:after {right: 7px;}

洗練された見出しデザイン32

最初に設定しておくCSS

/*洗練された見出しデザイン32*/
h2{
position: relative;
display: inline-block;
padding: 0 55px;
}

h2:before, h2:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}

h2:before {left:0;}
h2:after {right: 0;}

洗練された見出しデザイン33

最初に設定しておくCSS

/*洗練された見出しデザイン33*/
h2 {
position: relative;
}

h2:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 6px;
background: -webkit-repeating-linear-gradient(-45deg, #e799ff, #e799ff 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #e799ff, #e799ff 2px, #fff 2px, #fff 4px);
}

洗練された見出しデザイン34

最初に設定しておくCSS

/*洗練された見出しデザイン34*/
h2 {
color: #010079;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

洗練された見出しデザイン35

最初に設定しておくCSS

/*洗練された見出しデザイン35*/
h2 {
position: relative;
padding-left: 25px;
}

h2:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 20px rgb(176,255,97);
}
h2:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px rgb(176,255,97);
}

洗練された見出しデザイン36

最初に設定しておくCSS

/*洗練された見出しデザイン36*/
h2 {
border-bottom: solid 3px #ade5ff;
position: relative;
}

h2:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #2ebbff;
bottom: -3px;
width: 20%;
}

洗練された見出しデザイン37

最初に設定しておくCSS

/*洗練された見出しデザイン37*/
h2 {
background: linear-gradient(transparent 70%, #e2ff85 70%);
}

洗練された見出しデザイン38

最初に設定しておくCSS

/*洗練された見出しデザイン38*/
h2{
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}

h2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

洗練された見出しデザイン39

最初に設定しておくCSS

/*洗練された見出しデザイン39*/
h2{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}

h2:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

洗練された見出しデザイン40

最初に設定しておくCSS

/*洗練された見出しデザイン40*/
h2{
color: #ffffff;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #ffbb9e;
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
}

h2:before {
content: '●';
color: white;
margin-right: 8px;
}

洗練された見出しデザイン41

最初に設定しておくCSS

/*洗練された見出しデザイン41*/
h2 {
padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #ac6bff;
}

洗練された見出しデザイン42

最初に設定しておくCSS

/*洗練された見出しデザイン42*/
h2 {
color: #6d6972;
border-bottom: dashed 5px #ac6bff;
}

洗練された見出しデザイン43

最初に設定しておくCSS

/*洗練された見出しデザイン43*/
h2 {
padding: 0.5em;
background: aliceblue;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

洗練された見出しデザイン44

最初に設定しておくCSS

/*洗練された見出しデザイン44*/
h2{  
     border-top:1px dotted #ccc;  
     border-right:1px dotted #ccc;  
     border-left:7px double  #15c696;  
     border-bottom:1px dotted #ccc;  
     padding:.8em .9em 
}

洗練された見出しデザイン45

最初に設定しておくCSS

/*洗練された見出しデザイン45*/
h2{
    position:relative;
    padding-left:30px;
    border-bottom:2px solid #ccc;
    font-weight: bold;
    font-size: 22px;
    line-height: 38px;
}
 
h2:before{
    content:''; 
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px; 
    height:17px; 
    width:17px; 
    display:block; 
    position:absolute; 
    top:15px; 
    left:10px; 
    background-color:#5cffae;
    box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
    filter:alpha(opacity=50);
    -moz-opacity:0.50;
    -khtml-opacity: 0.50;
    opacity:0.50;
    z-index: 1;
}
 
h2:after{
    content:''; 
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px; 
    height:25px; 
    width:25px; 
    display:block; 
    position:absolute; 
    top:1px; 
    left:0px; 
    background-color:#389bff;
    box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}

参考:squeeze,webnonotes,saruwakakun.

 

合わせて読みたい

Wordpressの為の最低知っておきたいHTML入門

☥IBORCを応援して下さい。