CSSでタイトルのあしらい

プレビューイメージ

<!-- HTMLファイル -->

<h class="title_frame01">
  <span>CSSでタイトルのあしらい</span>
</h>

/* * * cssファイル * * */

/* 全体の薄いグレー背景色 */

body {
  background: #f8f8f8;
}

/* CSSでタイトルのあしらい */

h.title_frame01 {
  font-size: 22px;
  text-align: center;
  color: #444;
  display: block;
}

h.title_frame01 span {
  position: relative;
  display: inline-block;
  line-height: 1.2;
  padding: 1.0em 1.5em 1.0em 1.5em;
  z-index: -1;
}

h.title_frame01 span::before {
  content: '';
  position: absolute;
  width: calc(100% - 0.6em - 0.08em);
  height: calc(100% - 0.6em - 0.08em);
  border-bottom: solid 0.08em #444;
  border-right: solid 0.08em #444;
  right: 0px;
  bottom: 0px;
}

h.title_frame01 span::after {
  content: '';
  position: absolute;
  width: calc(100% - 0.6em - 0.08em);
  height: calc(100% - 0.6em - 0.08em);
  border-top: solid 0.08em #444;
  border-left: solid 0.08em #444;
  left: 0px;
  top: 0px;
}

CodePenで確認する

プレビューイメージ

<!-- HTMLファイル -->

<h class="title_frame02">
  <span>CSSでタイトルのあしらい</span>
</h>

/* * * cssファイル * * */

/* 全体の薄いグレー背景色 */

body{ 
  background:#f8f8f8;} 

/* CSSでタイトルのあしらい */

h.title_frame02 {
  font-size: 22px;
  text-align: center;
  color: #444;
  display: block;
}

h.title_frame02 span {
  position: relative;
  display: inline-block;
  line-height: 1.2;
  padding: calc(1.0em - 0.25em) calc(1.5em + 0.25em) calc(1.0em + 0.25em) calc(1.5em - 0.25em);
  background: #FFFC7F;
  z-index: -1;
}

h.title_frame02 span::before {
  content: '';
  position: absolute;
  width: calc(100% - 0.6em - 0.08em);
  height: calc(100% - 0.6em - 0.08em);
  border-bottom: solid 0.08em #444;
  border-right: solid 0.08em #444;
  right: calc(0px + 0.25em);
  bottom: calc(0px + 0.25em);
}

h.title_frame02 span::after {
  content: '';
  position: absolute;
  width: calc(100% - 0.6em - 0.08em);
  height: calc(100% - 0.6em - 0.08em);
  border-top: solid 0.08em #444;
  border-left: solid 0.08em #444;
  left: calc(0px - 0.25em);
  top: calc(0px - 0.25em);
}

CodePenで確認する

プレビューイメージ

<!-- HTMLファイル -->

<h class="title_frame03">
  <span>CSSでタイトルのあしらい</span>
</h>

/* * * cssファイル * * */

/* 全体の薄いグレー背景色 */

body{ 
  background:#f8f8f8;} 

/* CSSでタイトルのあしらい */

h.title_frame03 {
  font-size: 22px;
  text-align: center;
  color: #444;
  display: block;
}

h.title_frame03 span {
  position: relative;
  display: inline-block;
  line-height: 1.2;
  padding: calc(1.0em - 0.25em) calc(1.5em + 0.25em) calc(1.0em + 0.25em) calc(1.5em - 0.25em);
  background: repeating-linear-gradient(
    -55deg,
    #FFFC7F 0%,
    #FFFC7F 18px,
    transparent 18px,
    transparent 20px
  );
  z-index: -1;
}

h.title_frame03 span::before {
  content: '';
  position: absolute;
  width: calc(100% - 0.6em - 0.08em);
  height: calc(100% - 0.6em - 0.08em);
  border-bottom: solid 0.08em #444;
  border-right: solid 0.08em #444;
  right: calc(0px + 0.25em);
  bottom: calc(0px + 0.25em);
}

h.title_frame03 span::after {
  content: '';
  position: absolute;
  width: calc(100% - 0.6em - 0.08em);
  height: calc(100% - 0.6em - 0.08em);
  border-top: solid 0.08em #444;
  border-left: solid 0.08em #444;
  left: calc(0px - 0.25em);
  top: calc(0px - 0.25em);
}

CodePenで確認する