WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

HTML5

canvas 円を描く

こちらを参考にしました。 developer.mozilla.orgデモ http://efu.sakura.ne.jp/web/canvas/index3.html 円の描画でスマイリーフェイスを作成 円、円弧を描く arc(x, y, radius, startAngle, endAngle, anticlockwise) x、 yで指定した位置を中心、r を半径…

canvas 図形を描く

こちらを参考にしました。 developer.mozilla.org前回の記事 mmmmofu.hatenablog.comデモ http://efu.sakura.ne.jp/web/canvas/index2.html 矩形を描く canvas は 「矩形」(四角形)のみをサポートしています。 矩形 塗りつぶされた矩形を描く ctx.fillRect…

canvas基礎

こちらを参考にしました。 developer.mozilla.orgデモ http://efu.sakura.ne.jp/web/canvas/ html <html lang="ja"> <head> <meta charset="UTF-8"> <title>canvasの練習</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </head> <body> <…</body></html>

HTML 属性

HTMLの属性とは、要素に情報を付加すること。デモ http://efu.sakura.ne.jp/web/global_attributes/ グローバル属性 全ての要素に使用できる属性 accesskey マウスやトラックパッドが使用できない環境でも リンクや入力フォームの部品をキーボードのキー操作…

HTML5新要素

main 主要なコンテンツを表す。 body内に一つしか記述できない。 article、aside、header、footer、navの中には入れることができない。 article ブログの記事などの独立したコンテンツに使用できる。 section 部分、区分 見出しとそれに関する内容 aside メ…

IE8対策で注意すること

HTML5の要素に対応していない section、nav、article、aside、header、footer、main、figure、figcaptionなど article, aside, figure, figcaption, footer, header, nav, section { display: block; } 過去に書いた記事: mmmmofu.hatenablog.com CSS3に対…

レスポンシブWebデザインの練習

http://d.hatena.ne.jp/webmaster-web/20151003/p1d.hatena.ne.jp モバイルファーストでレスポンシブデザインを作成しました。http://efu.sakura.ne.jp/web/tomato/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

フォーム

http://efu.sakura.ne.jp/web/0601/名前→テキスト(1行テキスト) <input type="text" maxlength="10" placeholder="お名前" required autofocus> maxlengthはユーザーが入力できる最大文字数を指定する placeholderはテキストボックス等にあらかじめ入力サンプル文字を表示させることができる requiredは必須項目 autofocuはページを開…

HTML5

HTML5の書き方でマークアップ <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> </link></meta></head></html>