特殊文字　フレーム編【HTML】

01はじめに

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

フレーム用のEntity

─	&#9472；	│	&#9474；	┌	&#9484；
━	&#9473；	┃	&#9475；	┍	&#9485；
┄	&#9476；	┆	&#9478；	┎	&#9486；
┅	&#9477；	┇	&#9479；	┏	&#9487；
┈	&#9480；	┊	&#9482；	┐	&#9488；
┉	&#9481；	┋	&#9483；	┑	&#9489；
┬	&#9516；	├	&#9500；	┒	&#9490；
┭	&#9517；	┝	&#9501；	┓	&#9491；
┮	&#9518；	┞	&#9502；	└	&#9492；
┯	&#9519；	┟	&#9503；	┕	&#9493；
┰	&#9520；	┠	&#9504；	┖	&#9494；
┱	&#9521；	┡	&#9505；	┗	&#9495；
┲	&#9522；	┢	&#9506；	┘	&#9496；
┳	&#9523；	┣	&#9507；	┙	&#9497；
┴	&#9524；	┤	&#9508；	┚	&#9498；
┵	&#9525；	┥	&#9509；	┛	&#9499；
┶	&#9526；	┦	&#9510；	╒	&#9554；
┷	&#9527；	┧	&#9511；	╓	&#9555；
┸	&#9528；	┨	&#9512；	╔	&#9556；
┹	&#9529；	┩	&#9513；	╕	&#9557；
┺	&#9530；	┪	&#9514；	╖	&#9558；
┻	&#9531；	┫	&#9515；	╗	&#9559；
╤	&#9572；	║	&#9553；	╘	&#9560；
╥	&#9573；	╞	&#9566；	╙	&#9561；
╦	&#9574；	╟	&#9567；	╚	&#9562；
╧	&#9575；	╠	&#9568；	╛	&#9563；
╨	&#9576；	╡	&#9569；	╜	&#9564；
╩	&#9577；	╢	&#9570；	╝	&#9565；
╭	&#9581；	╣	&#9571；	╮	&#9582；
╯	&#9583；	╰	&#9584；

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;
  }

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