menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 3 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  5. ( 5 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 7 - ) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 9 ↑) 【PHP】PHPでシンプルなメールフォーム
  9. ( 8 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( - ↑) 【Mac】MacにGoogle Driveをインストール
このエントリーをはてなブックマークに追加

canvas【HTML5リファレンス】

canvas

こんにちは(・∀・)

HTML5で新しく追加された要素をご紹介します。今回ご紹介するHTML要素はcanvasです。

概要

canvas要素は図形の描写に使用する要素です。これまでHTML文書に画像等を表示させる場合は画像ファイルやプラグインデータ等を利用していましたが、canvas要素を使用することで画像ファイル等を使わずに図形等の表示ができるようになりました。

汎用属性

id、class、lang、title、style、dir、tabindex、accesskey、contenteditable、spellcheck、draggable、contextmenu、hiddenの各属性を指定することができます。(汎用属性について)

カテゴリー

エンベディッド・コンテンツ、フレージング・コンテンツ、フロー・コンテンツ (カテゴリーについて)

要素の配置

エンベディッド・コンテンツが配置できる場所

要素の内容

親要素に入れられる内容と同じ内容

属性名 解説
width 横幅を指定します。初期値は300です。
width="横幅"
height 高さを指定します。初期値は150です。
height="高さ"
サンプル
HTML

<canvas width="100" height="100" style="background: #d49fc2;">
canvas要素が未対応です。
</canvas>
<canvas width="100" height="100" style="background: #9fb7d4;">
canvas要素が未対応です。
</canvas>
Result
canvas要素が未対応です。 canvas要素が未対応です。
  • HTML5
このエントリーをはてなブックマークに追加