CSSで作る見出しデザイン

公開日: 2017/01/13

最終更新日: 2018/8/21

h1とかh2とか、同じような見出しデザインをするけど、毎回考えるのも面倒なので、書き留めておきます。

随時追加していきます。

1. 見出しデザイン1

サンプル

Headline1

Html

<p class="headline1">Headline1</p>

1	<p class="headline1">Headline1</p>

Css

.headline1 {
    text-align: left;
    padding: 0.5em 1em 0.5em 2.5em;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    font-size: 18px;
    font-size: 1.125rem;
    position: relative;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
        
.headline1::before {
    content: "";
    background: #13B3A1;
    width: 0.7em;
    height: 70%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1em;
    margin: auto;
    display: block;
}

.headline1 {

text-align: left;

padding: 0.5em 1em 0.5em 2.5em;

background: #eee;

border: 1px solid #ccc;

border-radius: 0.5em;

font-size: 18px;

font-size: 1.125rem;

position: relative;

margin-top: 1.5em;

margin-bottom: 1.5em;

}

.headline1::before {

content: "";

background: #13B3A1;

width: 0.7em;

height: 70%;

position: absolute;

top: 0;

bottom: 0;

left: 1em;

margin: auto;

display: block;

}

2. 見出しデザイン2

サンプル

Headline2

Html

<p class="headline2">Headline2</p>

1	<p class="headline2">Headline2</p>

Css

.headline2 {
    text-align: left;
    padding: 0.5em;
    border-left: 10px solid #13B3A1;
    border-bottom: 1px solid #13B3A1;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1em;
}

.headline2 {

text-align: left;

padding: 0.5em;

border-left: 10px solid #13B3A1;

border-bottom: 1px solid #13B3A1;

font-size: 18px;

font-size: 1.125rem;

line-height: 1em;

}

3. 見出しデザイン3

サンプル

Headline3

Html

<div class="headline3wrap">
    <p class="headline3">Headline3</p>
</div>

<p class="headline3">Headline3</p>

</div>

Css

.headline3wrap {
    text-align: center;
    background: #fff;
    position: relative;
}
        
.headline3 {
    display: inline-block;
    padding: 0 1em;
    background: #fff; /*背景色に合わせる*/
    font-size: 18px;
    font-size: 1.125rem;
    color: #13B3A1;
    position: relative;
    z-index: 5;
}
        
.headline3wrap::before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #13B3A1;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

.headline3wrap {

text-align: center;

background: #fff;

position: relative;

}

.headline3 {

display: inline-block;

padding: 0 1em;

background: #fff; /*背景色に合わせる*/

font-size: 18px;

font-size: 1.125rem;

color: #13B3A1;

position: relative;

z-index: 5;

}

.headline3wrap::before {

content: "";

display: block;

width: 100%;

height: 2px;

background: #13B3A1;

position: absolute;

top: 0;

bottom: 0;

margin: auto;

z-index: 1;

}

4. 見出しデザイン4

サンプル

Headline4

Html

<p class="headline4">Headline4</p>

1	<p class="headline4">Headline4</p>

Css

.headline4 {
    text-align: left;
    font-size: 18px;
    font-size: 1.125rem;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    margin-bottom: 0.5em;
    border-top: 2px solid #ccc;
    border-bottom: 1px dotted #ccc;
}

.headline4 {

text-align: left;

font-size: 18px;

font-size: 1.125rem;

padding-top: 0.4em;

padding-bottom: 0.4em;

margin-bottom: 0.5em;

border-top: 2px solid #ccc;

border-bottom: 1px dotted #ccc;

}

5. 見出しデザイン5

サンプル

Headline5

Html

<p class="headline5">Headline5</p>

1	<p class="headline5">Headline5</p>

Css

.headline5 {
    display: inline-block;
    padding: 0.5em 1em 0.5em 2.5em;
    border-top: 1em solid #fff;
    background: #14c6b2;
    position: relative;
}
        
.headline5::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5em;
    height: 100%;
    background: #13B3A1;
}
        
.headline5::after {
    content: "";
    width: 100%;
    height: 95%;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
    background: #000;
    opacity: 0.4;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotate(2deg);
    z-index: -1;
}

.headline5 {

display: inline-block;

padding: 0.5em 1em 0.5em 2.5em;

border-top: 1em solid #fff;

background: #14c6b2;

position: relative;

}

.headline5::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 1.5em;

height: 100%;

background: #13B3A1;

}

.headline5::after {

content: "";

width: 100%;

height: 95%;

box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);

background: #000;

opacity: 0.4;

position: absolute;

bottom: 0;

left: 0;

transform: rotate(2deg);

z-index: -1;

}

6. 見出しデザイン6

サンプル

Headline6

Html

<p class="headline6">Headline6</p>

1	<p class="headline6">Headline6</p>

Css

.headline6 {
    font-size: 18px;
    font-size: 1.125rem;
    border-bottom: 1px dotted #222;
}
        
.headline6:first-letter {
    color: #13B3A1;
    font-size: 30px;
    font-size: 1.875rem;
}

.headline6 {

font-size: 18px;

font-size: 1.125rem;

border-bottom: 1px dotted #222;

}

.headline6:first-letter {

color: #13B3A1;

font-size: 30px;

font-size: 1.875rem;

}

7. 見出しデザイン7

サンプル

Headline7

Html

<p class="headline7">Headline7</p>

1	<p class="headline7">Headline7</p>

Css

.headline7 {
    border: 1px solid #ccc;
    background-color: #eee;
    background-image: linear-gradient(-45deg, #fff 25%, #ccc 25%, #ccc 50%, #fff 50%, #fff 75%, #ccc 75%, #ccc);
    background-size: 6px 6px;
    padding: 0.5em 1em;
    @include font18;
    font-weight: bold;
    text-shadow: 2px 2px #fff, -2px 2px #fff, 2px -2px #fff, -2px -2px #fff;
}

.headline7 {

border: 1px solid #ccc;

background-color: #eee;

background-image: linear-gradient(-45deg, #fff 25%, #ccc 25%, #ccc 50%, #fff 50%, #fff 75%, #ccc 75%, #ccc);

background-size: 6px 6px;

padding: 0.5em 1em;

@include font18;

font-weight: bold;

text-shadow: 2px 2px #fff, -2px 2px #fff, 2px -2px #fff, -2px -2px #fff;

}

8. 見出しデザイン8

サンプル

Headline8

Html

<p class="headline8">Headline7</p>

1	<p class="headline8">Headline7</p>

Css

.headline8 {
  background-color: #eee;
  background-image: radial-gradient(circle, #ddd 20%, transparent 0), radial-gradient(circle, #ddd 20%, transparent 0);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 1px solid #ddd;
  padding: 0.6em 2.5em;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: bold;
  text-shadow: 2px 2px #eee, -2px 2px #eee, 2px -2px #eee, -2px -2px #eee;
  position: relative;
}
.headline8::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 1em;
  bottom: 0;
  margin: auto;
}

.headline8 {

background-color: #eee;

background-image: radial-gradient(circle, #ddd 20%, transparent 0), radial-gradient(circle, #ddd 20%, transparent 0);

background-size: 16px 16px;

background-position: 0 0, 8px 8px;

border: 1px solid #ddd;

padding: 0.6em 2.5em;

font-size: 18px;

font-size: 1.125rem;

font-weight: bold;

text-shadow: 2px 2px #eee, -2px 2px #eee, 2px -2px #eee, -2px -2px #eee;

position: relative;

}

.headline8::before {

content: "";

display: inline-block;

width: 1em;

height: 1em;

background-color: #fff;

border: 1px solid #ccc;

border-radius: 50%;

position: absolute;

top: 0;

left: 1em;

bottom: 0;

margin: auto;

}

CSSで作る見出しデザイン

1. 見出しデザイン1

サンプル

Html

Css

2. 見出しデザイン2

サンプル

Html

Css

3. 見出しデザイン3

サンプル

Html

Css

4. 見出しデザイン4

サンプル

Html

Css

5. 見出しデザイン5

サンプル

Html

Css

6. 見出しデザイン6

サンプル

Html

Css

7. 見出しデザイン7

サンプル

Html

Css

8. 見出しデザイン8

サンプル

Html

Css

関連

よろしければコメントをどうぞコメントをキャンセル

Profile