HTML5でのタグのルールとか

備忘録

br要素

文章にスペースを取りたいがためにbr要素を使用するのはNG。
代わりに、CSSの「margin」や「padding」プロパティを使う。
br要素はあくまで文章の改行に使うもの。

同様の理由で、 を使うのもNG。

label要素

文言を出力するためにlabel要素を使用するのはNG。
label要素はフォーム内でフォームの部品と見出しを関連付けるために用いる。
代わりに、span要素とか使う。

cavas要素

vanvas要素の大きさを変更する際に
CSSの「width」や「height」プロパティを使わないこと。
大きさの変更は変更されるが、canvasのデフォルト値である。「300,150」から相対的に引き延ばされる。
例)幅、高さを300にCSSで300に指定すると、高さが2倍だけみょーんってなる。なぜかはわからない

対応策1：canvas要素に直接指定する。

canvas-test1.html

   <canvas id="c1" width="300" height="300"></canvas>

参考にしたサイト

上記でうまくいったので、背景色を変えようとCSSで背景色を変えたところ…

canvas-test2.html

   <canvas id="c1" width="300" height="300" class="canvas.css"></canvas>

なぜかわからないが、canvasの大きさがまたうまく表示されなくなる。

対応策2：javascriptを使ってcanvas要素の大きさを変更する。

canvas要素をdiv要素でラッパーしてその大きさに変更する。

canvas-test3.html

<div class="wrapper">
   <canvas id="c1"></canvas>
</div>

canvas.css

.wrapper{
  width: 300px;
  height: 300px;
}

canvas.js

$(document).ready(function() {
    var w = $('.wrapper').width();
    var h = $('.wrapper').height();
    $('#c1').attr('width', w);
    $('#c1').attr('height', h);
});

参考にしたサイト

ラッパーの方のdiv要素の背景色を変更することで、対応策1でやりたかったcanvas要素の背景色変更を疑似的に達成できた。

・気になったこと
javascriptのattrで大きさを変更した際に、canvasの要素のプロパティが初期化されているみたい…

canvas.js

var canvas = document.getElementById('c1');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(255,0,0,0.25)';

と指定していたのだが、attrを実行した過程で、fillStayleが初期値の黒に戻ってしまう。
例に漏れずなぜかはわからない。
propでも駄目でした。