特殊文字 フレーム編【HTML】
スポンサーリンク

01はじめに

特殊文字(Entity)を使用してフレームを作ってみようと思います。

フレーム用のEntity

─│┌
━┃┍
┄┆┎
┅┇┏
┈┊┐
┉┋┑
┬├┒
┭┝┓
┮┞└
┯┟┕
┰┠┖
┱┡┗
┲┢┘
┳┣┙
┴┤┚
┵┥┛
┶┦╒
┷┧╓
┸┨╔
┹┩╕
┺┪╖
┻┫╗
╤║╘
╥╞╙
╦╟╚
╧╠╛
╨╡╜
╩╢╝
╭╣╮
╯╰
┬├┒
┭┝┓
┮┞└
┯┟┕
┰┠┖
┱┡┗
┲┢┘
╪╫╬
╱╲╳
╴╵╶
╷╸╹
╺╻╼
╽╾╿

02実際に作ってみよう

HTML
<div class="box" style='font-size:100px;'>&#9484;&#9472;&#9472;&#9472;&#9472;&#9488;<br>
&#9474;Title here!<br>
&#9492;&#9472;&#9472;&#9472;&#9472;&#9496;
</div>
CSS
.box{
  line-height: .5;
  }
HTML
<div class="box2">
    <p>&#9581;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9582;<br>
    &#9475;ここから文章を始める&#9475;<br>
       &#9475;2行目&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9475;<br> 
        &#9475;3行目&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9475;<br>
        &#9475;4行目&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9475;<br>
        &#9475;5行目&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9475;<br>
        &#9475;6行目&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#9475;<br>
        &#9584;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9473;&#9583;<br></p>
    
    </div>
CSS
.box2{
    font-size: 50px;
  line-height: 1;
  }
Samboni
コードをみているだけで目が回りそうですね。笑
あくまでも一つの例としてですが、他の特殊文字のおまけとして紹介させていただきました。

表中に使用されているコードの;は全角で表示されていますのでコピーして使用する際はご注意下さい。

スポンサーリンク

この記事が気に入ったらフォローしよう

おすすめの記事