読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

ボックスチェッカーとしてのborder

HTML&CSS

 CodecademyのWeb Fundamentals講座で知った便利なborderの使い方をメモしておきます。初心者には結構便利なんじゃないかと思います。
 話としてはすごいシンプルで、CSSのユニバーサルセレクタにborderを適用させるというものです。

*{
  border: dotted 1px red;
}

 値のところは3つ揃っていれば、好きなもので構わないでしょう。ただ、ピクセル数は5px以下が適切です。こうすることで、すべてのボックスモデルの要素の外枠が見えるようになって位置関係が明白になります。
 また上の用途以外にも、html5canvas要素を使う時にその領域に適用することで、JavaScriptを書くときの座標指定がやりやすくなるはずです。以下は自分がドットインストールで学ぶ際に試してみたcanvasでの例です。枠内左上の四角形の始点が(10,10)の座標であることがおおよそわかります。ちなみに、この場合は一時的に使うだけなので、インラインでstyle属性を使いました。
 f:id:sthmdnss:20130619113827p:plain

<canvas id="mycanvas" width="400" height="200" style=" border: dotted 3px red"></canvas>

 短いけれど終わり。