【CSS】見出し一覧

シンプルな見出し

下線付き

CSS


h1 {
  border-bottom: solid 3px black;
  /*線の種類（実線） 太さ 色*/
}

点線＋色を変える

CSS


h1 {
  color: #6594e0;/*文字色*/
  border-bottom: dashed 2px #6594e0; /*線の種類（点線）2px 線色*/
}

二重線

CSS


h1 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #FFC778;
}

上下に線

CSS


h1 {
  color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
}

単純な背景色をつける

CSS


h1 {
  background: #c2edff;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

全体を線で囲む

CSS


h1 {
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

背景色＋下線

CSS


h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}

左線

CSS


h1 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}

左に線＋塗り

CSS


h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}

立体感のあるバー

CSS



h1 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

シンプルなボックスシャドウ

CSS


h1 {
  padding: 0.5em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

ユニークデザイン



h1 {
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

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

吹き出し

CSS


h1 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

h1:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

ステッチ

CSS


h1 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  padding: 0.2em 0.5em;
  color: #454545;
}

ステッチ<白>

CSS


h1 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
}

角がぺろっと剥がれるデザイン

CSS


h1 {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

h1: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);
}

帯（リボン）

CSS


h1 {
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color: white;
}

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

蛍光マーカー

CSS


h1 {
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
}

途中で色の変わる線

CSS


h1 {
  border-bottom: solid 3px skyblue;
  position: relative;
}

h1:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffc778;
  bottom: -3px;
  width: 30%;
}

同系統の色を組み合わせ

CSS


h1 {
  border-bottom: solid 3px #cce4ff;
  position: relative;
}

h1:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}

線先に矢印

CSS


h1 {
  position: relative;
  padding-left: 25px;
}

h1:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
}
h1:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}

背景をストライプで塗る

CSS


h1 {
  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);
}

左に縦線が入ったバージョン

CSS


h1 {
  color: #010079;
  text-shadow: 0 0 5px white;
  border-left: solid 7px #010079;
  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);
}

ストライプ＋上下線

CSS


h1 {
  color: #6cb4e4;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

ストライプの下線

CSS


h1 {
  position: relative;
}

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

ストライプの吹き出し

CSS


h1 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  border-radius: 7px;
}

h1:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffebbe;
  width: 0;
  height: 0;
}

両端に線を伸ばす

CSS


h1 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

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

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

二重線バージョン

CSS


h1 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

h1:before, h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

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

下側に小さく線をつける

CSS


h1 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
h1:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}

スラッシュで囲む

CSS


h1 {
  position: relative;
  display: inline-block;
  padding: 0 45px;
}
h1:before, h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
h1:before {
  left:0;
}
h1:after {
  right: 0;
}

交差線

CSS


h1 {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
}
h1:before, h1:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}
h1:before {
  left: 7px;
}
h1:after {
  right: 7px;
}

角がくるん

CSS


h1 {
  position: relative;
  padding: 0.25em 1em;
  border: solid 2px black;
  border-radius: 3px 0 3px 0;
}

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

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

葉っぱ風

CSS


h1 {
  position: relative;
  color: #158b2b;
  font-size: 20px;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}
h1:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #a6ddb0;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

細カギカッコ

CSS


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

h1:before, h1:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

h1:before {
  border-left: solid 1px #ff5722;
  border-top: solid 1px #ff5722;
  top:0;
  left: 0;
}

h1:after {
  border-right: solid 1px #ff5722;
  border-bottom: solid 1px #ff5722;
  bottom:0;
  right: 0;
}

大括弧

CSS


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

h1:before, h1:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
h1:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
h1:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

点線バージョン大カッコ

CSS


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

h1:before, h1:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}

h1:before {
  border-top: dotted 1px #535aaa;
  border-left: dotted 1px #535aaa;
  border-bottom: dotted 1px #535aaa;
  left: 0;
}

h1:after {
  content: '';
  border-top: dotted 1px #535aaa;
  border-right: dotted 1px #535aaa;
  border-bottom: dotted 1px #535aaa;
  right: 0;
}

立体的なボックス

CSS


h1 {
  position: relative;
  padding: 0.35em 0.5em;
  background: #b6e9ff;
  color: #393939;
}
h1:before {
  content: " ";
  position: absolute;
  top: -16px;
  left: 0;
  width: -webkit-calc(100% - 16px);
  width: calc(100% - 16px);
  height: 0;
  border: solid 8px transparent;
  border-bottom-color: #b2ddf0;
}

一文字目だけ装飾を変える

CSS


h1:first-letter {
  font-size: 2em;
  color: #7172ac;
}

グラデーションデザイン

消えていく下線

CSS


h1 {
  position: relative;
  padding: 0.25em 0;
}
h1:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

段々と色が変わっていくパターン

CSS


h1 {
  position: relative;
  padding: 0.25em 0;
}
h1:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}

背景をグラデーションで塗る

CSS


h1 {
  position: relative;
  padding: 0.1em 0.5em;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
  background: linear-gradient(to right, rgb(255, 186, 115), transparent);
  color: #545454;
}

影をつけてみた場合

CSS


h1 {
  position: relative;
  padding: 0.2em 0.5em;
  background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
  background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
  color: white;
  font-weight: lighter;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

上下のグラデーション

CSS


h1 {
  position: relative;
  padding: 0.3em 0.5em;
  background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  color: #495193;
}

文字の反射

CSS


h1 {
  position: relative;
  color: #6eb0f9;
  line-height: 1.4;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}

アイコンフォントデザイン

シンプルなチェックマーク

CSS


h1 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
  font-weight: 900;
}

シェブロンマーク

CSS


h1 {
  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: #fffff4;
}

h1:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #ff6a6a; /*アイコン色*/
}

HTMLタグ

CSS


h1 {
  position: relative;/*相対位置*/
  line-height: 1.4;/*行高*/
  display: inline-block;
}

h1:before, h1:after { 
  position: relative;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  font-size: 1.0em;
  color: #ff6a6a;
}
h1:before {
  content:"\f053";/*アイコン種類*/
  padding-right: 0.5em
}
h1:after {
  content:"\f054";/*アイコン種類*/
  padding-left: 0.5em
}

ふきだしアイコン

CSS


h1 {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f075";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}

フラットな見出し

CSS


h1 {
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

コードアイコンのマーカー

CSS


h1 {
  position: relative;
  padding-left: 30px;
  color:#153c6e;
}

h1:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f121";
  background: #c9e2ff;
  color: #153c6e;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

タブ付き

CSS


h1 {
  position: relative;
  color: black;
  background: #d0ecff;
  line-height: 1.4;
  padding: 0.25em 0.5em;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

h1:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f00c Check';
  background: #2196F3;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em
}

タブ付き2

CSS


h1 {
  position: relative;
  border-top: solid 2px #80c8d1;
  border-bottom: solid 2px #80c8d1;
  background: #f4f4f4;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
}

h1:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f0a7\ POINT';
  background: #80c8d1;
  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;
}

先頭にアイコン

CSS


h1 {
  position: relative;
  background: #f1f8ff;
  padding: 0.25em 0.5em;
  border-left: solid 2em #5c9ee7;
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

ひらめき

CSS


h1 {
  position: relative;
  padding-left: 35px;
}
h1:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f0eb";
  background: #ffca2c;
  color: white;
  font-weight: 900;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
h1:after {
  /*吹き出しのちょこんと出た部分*/
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #ffca2c;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

円にアイコンを入れてバーをつける

CSS


h1 {
  position: relative;
  background: #ffd98a;
  padding: 2px 5px 2px 25px;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f135";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ffa337;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 3px white; 
  border-radius: 50%;
}

円のまわりに影を付けた場合

CSS


h1 {
  position: relative;
  background: #f4f4f4;
  padding: 2px 5px 2px 20px;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f041";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ff6363;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

さらに立体的にしてみた場合

CSS


h1 {
  position: relative;
  background: #eff4ff;
  padding: 2px 5px 2px 20px;
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f041";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #81a1e4;
  font-weight: 900;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  left: -1.35em;
  top: 50%;
  -webkit-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;
}

点滅するカーソル

CSS


h1 {
  position: relative;/*相対位置*/
  padding-left: 0.8em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
}
h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f246";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: silver; /*アイコン色*/
  -webkit-animation:blink 0.5s ease-in-out infinite alternate;
  animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}

かわいいデザイン

背景色＋角丸

CSS


h1 {
  background: #b0dcfa; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}

心の声

CSS


h1 {
  position: relative;
  padding: 8px 15px;
  margin-left: 40px;
  background: #def3ff;
  border-radius: 20px;
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  position: absolute;
  font-size: 15px;
  left: -40px;
  bottom: 0;
  color: #def3ff;
}

h1:after {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  position: absolute;
  font-size: 23px;
  left: -23px;
  bottom: 0;
  color: #def3ff;
}

肉球マーカー

CSS


h1 {
  position: relative;/*相対位置*/
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #7b6459;/*文字色*/
}

h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #ff938b; /*アイコン色*/
}

シンプルな見出し

下線付き

点線＋色を変える

二重線

上下に線

単純な背景色をつける

全体を線で囲む

背景色＋下線

左線

左に線＋塗り

立体感のあるバー

シンプルなボックスシャドウ

ユニークデザイン

タグ

吹き出し

ステッチ

ステッチ<白>

角がぺろっと剥がれるデザイン

帯（リボン）

蛍光マーカー

途中で色の変わる線

同系統の色を組み合わせ

線先に矢印

背景をストライプで塗る

左に縦線が入ったバージョン

ストライプ＋上下線

ストライプの下線

ストライプの吹き出し

両端に線を伸ばす

二重線バージョン

下側に小さく線をつける

スラッシュで囲む

交差線

角がくるん

葉っぱ風

細カギカッコ

大括弧

点線バージョン大カッコ

立体的なボックス

一文字目だけ装飾を変える

グラデーションデザイン

消えていく下線

段々と色が変わっていくパターン

背景をグラデーションで塗る

影をつけてみた場合

上下のグラデーション

文字の反射

アイコンフォントデザイン

シンプルなチェックマーク

シェブロンマーク

HTMLタグ

ふきだしアイコン

フラットな見出し

コードアイコンのマーカー

タブ付き

タブ付き2

先頭にアイコン

ひらめき

円にアイコンを入れてバーをつける

円のまわりに影を付けた場合

さらに立体的にしてみた場合

点滅するカーソル

かわいいデザイン

背景色＋角丸

心の声

肉球マーカー

関連記事

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル