目次 #contents *CSSを使用して簡単に三角形を作ってみよう CSSを使用して簡単に画像を使わずに矢印を表現できます。~ 文章の先頭にちょこっと右矢印をのせておくとより見栄えが良くなりますよね。~ 完成形はこのような矢印になります。~ #image(width=50,cssで作った矢印.png) 色や大きさなども自在に操ることができます。~ それでは解説をしていきますね。~ ~ まずは一見関係ないように思えるかもしれませんが、高さと横が0のボックスに対してボーダーの長さを指定したらどうなるでしょうか?~ 例えば、~ HTML <div id="box1"></div> CSS #box1 { height: 0px; width: 0px; border: 2px solid #000; } とすると、~ #image(width=50,ただの四角.png) というように真黒な四角があらわれます。~ これはborderそのものに太さが存在するからですね。この場合、四角の一片の長さは4pxと言えるでしょう。~ ~ ではborderの中でもleftしか指定しなかったらどうでしょうか??~ CSSを #box1 { heigth:0px; width: 0px; border-left:2px solid #000; } と書き換えます。~ 今度は何もあらわれなくなってしまいます。~ ~ 次の図を見てください。~ #image(width=300,main1.png)