CSSでできる和風な見出しや枠線のデザインメモ

コピペでできる、和風な見出し＆枠線のCSSメモです。

#影と枠線
<p class="codepen" data-height="416" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="YzXZgVb" style="height: 416px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="縦書き見出しその１">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/YzXZgVb">
  縦書き見出しその１</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#内側に丸い枠線
<p class="codepen" data-height="471" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="YzXQMzb" style="height: 471px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="内丸枠">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/YzXQMzb">
  内丸枠</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#八角形の枠線
<p class="codepen" data-height="420" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="vYOZrMR" style="height: 420px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="縦書き見出しその２">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/vYOZrMR">
  縦書き見出しその２</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#差し込み風の枠
<p class="codepen" data-height="360" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="MWwoXNa" style="height: 360px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="差し込み風の枠線">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/MWwoXNa">
  差し込み風の枠線</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#ひし形のポイント
<p class="codepen" data-height="400" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="KKpqLqJ" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ひし形ポイント">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/KKpqLqJ">
  ひし形ポイント</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#三日月のポイント
<p class="codepen" data-height="300" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="oNXwKvm" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="三日月のポイント">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/oNXwKvm">
  三日月のポイント</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#梅の花風のポイント
<p class="codepen" data-height="300" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="qBdjyEP" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="梅の花ポイントの見出し">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/qBdjyEP">
  梅の花ポイントの見出し</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#梅の花風のポイント２
<p class="codepen" data-height="300" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="WNvOqqG" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="梅の花ポイント">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/WNvOqqG">
  梅の花ポイント</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#花菱風のポイント
<p class="codepen" data-height="400" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="eYNRaJa" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="花菱風">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/eYNRaJa">
  花菱風</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#麻の葉模様のポイント
<p class="codepen" data-height="404" data-theme-id="6431" data-default-tab="css,result" data-user="mei331" data-slug-hash="Poqjrer" style="height: 404px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="麻の葉模様">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/Poqjrer">
  麻の葉模様</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

#おまけ

<p class="codepen" data-height="765" data-theme-id="6431" data-default-tab="result" data-user="mei331" data-slug-hash="RwPgdEm" style="height: 765px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="hinokami">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/RwPgdEm">
  hinokami</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>