【CSS】見出しデザイン サンプル

HTMLとCSSでデザインされた見出し（<h1>〜</h1>）のサンプルです。ホームページ作りにご利用ください。

基本HTML

<h1>コピペで使える見出しデザイン</h1>

基本になるHTMLです。

必要に応じて<h1>を<h2>や<h6>に変更してご利用ください。

管理画面内の貼り付ける場所

CSS
管理画面のHEAD間編集かCSS編集へコピペしてください。
HTML
管理画面の編集枠へコピペしてください。
HEAD間編集に記述する際は <style> と </style> の中に書いてください。CSS編集に記述する場合は <style> と </style> は書いてはダメです。

分からないことは「ユーザー助け合い掲示板」で聞いてみよう

それではデザインサンプルをご覧ください。

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  margin:8px 8px 8px 12px;
  padding:12px 0 12px 32px;
}
h1:before{
  position:relative;
  content:" ";
  top:22px;
  left:-32px;
  display:block;
  width:22px;
  height:22px;
  border:1px solid #999;
  border-radius:22px;
}
h1:after{
  position:relative;
  content:" ";
  top:-16px;
  left:-25px;
  display:block;
  width:10px;
  height:10px;
  background:#00bbdd;
  border-radius:10px;
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  margin:8px 8px 8px 12px;
  padding:12px 0 12px 32px;
  color:#fff;
  background:#27313d;
}
h1:before{
  position:relative;
  content:" ";
  top:6px;
  left:-22px;
  display:block;
  width:12px;
  height:12px;
  background:#fff;
  border:1px solid #999;
  border-radius:12px;
}
h1:after{
  position:relative;
  content:" ";
  top:-6px;
  left:-22px;
  display:block;
  width:12px;
  height:12px;
  background:#fff;
  border:1px solid #999;
  border-radius:12px;
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  margin:8px 8px 8px 12px;
  padding:12px 0 12px 12px;
  color:#eb2142;
  background:#fff;
}
h1:before{
  position:relative;
  content:" ";
  top:12px;
  left:-12px;
  display:inline-block;
  width:12px;
  height:38px;
  background:#eb2142;
  border-radius:12px;
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  position:relative;
  margin:8px 8px 8px 12px;
  padding:12px;
  color:#79d1b0;
  background:#fff;
  border:2px solid #8dcf3f;
  border-radius:12px;
}
h1:after,h1:before{
  position:absolute;
  content:"";
  top:100%;
  width:0;
  height:0;
}
h1:before{
  left:18px;
  border:14px solid transparent;
  border-top:17px solid #8dcf3f;
}
h1:after{
  left:21px;
  border:11px solid transparent;
  border-top:14px solid #fff;
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  position:relative;
  color:#fff;
  padding:5%;
  height:60px;
  margin:8px 8px 8px 12px;
  mix-blend-mode:multiply;
  background:#677589;
  border-radius:20% 50% 50% 70%/50% 50% 80% 60%;
  z-index:5;
}
h1:before{
  position:absolute;
  content:"";
  display:inline-block;
  top:-12px;
  left:10px;
  width:48%;
  height:80px;
  background:#325279;
  border-radius:50% 80% 50% 30%/60%;
  z-index:-2;
}
h1:after{
  position:absolute;
  content:"";
  display:inline-block;
  top:12px;
  left:98px;
  width:60%;
  height:60px;
  background:#252c2d;
  border-radius:40% 80% 50% 40%/30% 50% 70% 80%;
  z-index:-3;
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  background-image:linear-gradient(to right, #fc6076 0%, #000 0%, #fa7952 0%, #f9a439 33%, #f8cc1e 66%, #f5fe01 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin:8px 8px 8px 12px;
  padding:12px;
  border-image:linear-gradient(45deg, #fc6076 22%, #fff844 66%);
  border-image-slice:0 0 1;
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  position:relative;
  margin:40px 20px 20px;
  padding:0 12px;
  height:60px;
  line-height:60px;
  color:#797e85;
}
h1:before{
  display:inline-block;
  position:absolute;
  content:'';
  top:-20px;
  left:-10px;
  padding:20px;
  width:40px;
  height:40px;
  line-height:40px;
  font-size:14px;
  text-align:center;
  color:#ffffff;
  background:#b5e0fd;
  border-radius:50%;
  z-index:-3;
}
h1:after{
  display:inline-block;
  position:absolute;
  content:'';
  width:0;
  height:0;
  left:52px;
  bottom:-1px;
  border-left:20px solid #b5e0fd;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  transform:rotate(45deg);
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  position:relative;
  margin:8px 8px 8px 12px;
  padding:12px 0 12px 28px;
  color:#eb2142;
  background:#fff;
}
h1:before{
  position:relative;
  content:" ";
  top:12px;
  left:-12px;
  display:inline-block;
  width:6px;
  height:38px;
  background:#f58d9e;
  border-radius:12px;
}
h1:after{
  position:absolute;
  content:" ";
  top:24px;
  left:6px;
  display:inline-block;
  width:6px;
  height:38px;
  background:#eb2142;
  border-radius:12px;
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  margin:8px 12px;
  padding:12px;
  color:#fff;
  background:#93b8ca;
  box-shadow:0px 0px 0px 6px #93b8ca;
  border:dashed 2px #fff;
  border-radius:4px;
}

コピペで使える見出しデザイン

コードを見てみる

CSS

h1{
  margin:8px 12px;
  padding:32px 24px;
  background-size:2px 2px;
  background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;
  background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;
  background-image:linear-gradient(#0c555d,#0c555d),
  linear-gradient(#0c555d,#0c555d),
  linear-gradient(#0c555d,#0c555d),
  linear-gradient(#0c555d,#0c555d);
}