タイトル通りだが、HTML5のcanvas要素をレスポンシブ対応させるCSSコードを紹介する。
またここで紹介するコードは、画面サイズに合わせて伸縮する際に、縦横比を維持したまま要素のサイズが変わるので、使われるケースは多いと思う。
まず、サンプルとして簡単なHTMLを用意した。
1 2 3 4 5 | < body > < div class = "container" > < canvas class = "canvas" ></ canvas > </ div > </ body > |
canvas要素は、何らかのブロック要素に内包させておく必要がある。
次にCSS(SCSS)コード。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 | .container { position : relative ; height : 0 ; overflow : hidden ; padding-top : 56.25% ; max-width : 600px ; max-height : 340px ; margin : 10px auto ; .canvas { background : #c00 ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; max-width : 600px ; max-height : 340px ; } } |
こちらのコードをCodePenで実行すると次のとおりとなる。



画面サイズに合わせて、縦横比を維持しながらリサイズされていることが分かる。