{"id":863,"date":"2015-02-07T00:07:26","date_gmt":"2015-02-06T15:07:26","guid":{"rendered":"http:\/\/mn-prof.bloggle.jp\/wordpress\/?p=863"},"modified":"2015-02-07T00:07:26","modified_gmt":"2015-02-06T15:07:26","slug":"html_css6-2","status":"publish","type":"post","link":"https:\/\/mn-design.tokyo\/?p=863","title":{"rendered":"HTML\/CSS6-2\u3000\u30b9\u30de\u30db\u30b5\u30a4\u30c8\u4f5c\u6210 HTML\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u7de8"},"content":{"rendered":"<p>Google Chrome\u306b\u306f\u30a8\u30df\u30e5\u30ec\u30fc\u30bf\u30fc\u3068\u3044\u3046\u7591\u4f3c\u7684\u306a\u30b9\u30de\u30db\u8868\u793a\u304c\u78ba\u8a8d\u3067\u304d\u308b\u30c4\u30fc\u30eb\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001\u3053\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u3044\u306a\u304c\u3089\u3001Sublime Text\u3000\u306e\u3000Emmet\u3092\u6d3b\u7528\u3057\u3066\u30b9\u30de\u30db\u30b5\u30a4\u30c8\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u4f5c\u6210\u3059\u308b\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3061\u3089\u3067\u3059\u3002\u4f7f\u3046\u753b\u50cf\u306e\u30b5\u30f3\u30d7\u30eb\u306f\u3000<a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/images.zip\">images<\/a>\u3000\u3000\u2190\u3053\u3061\u3089\u3000\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson10.png\"><img decoding=\"async\" class=\" size-medium wp-image-1017 alignnone\" src=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson10-300x150.png\" alt=\"lesson10\" width=\"300\" height=\"150\" \/><\/a><\/p>\n<p>\u4eca\u56de\u4f5c\u6210\u3059\u308bHP\u7528\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3001images\u30d5\u30a9\u30eb\u30c0\u3092\u5165\u308c\u3066\u304a\u304d\u307e\u3059\u3002(\u898b\u672c\u3067\u306fport_sample\u3068\u3044\u3046\u30d5\u30a9\u30eb\u30c0\u306b\u5165\u308c\u307e\u3057\u305f\u3002)<\/p>\n<p><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson12.png\"><img decoding=\"async\" class=\" size-medium wp-image-1019 alignnone\" src=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson12-300x150.png\" alt=\"lesson12\" width=\"300\" height=\"150\" \/><\/a><\/p>\n<p>Google Chome\u306e\u30a8\u30df\u30e5\u30ec\u30fc\u30bf\u30fc\u306e\u8868\u793a\u65b9\u6cd5\u3067\u3059\u304c\u3001\u5bfe\u8c61\u306e\u30da\u30fc\u30b8\u3092\u8868\u793a\u3057\u3066\u304b\u3089\u3001\u53f3\u4e0a\u306eGoogle Chrome\u306e\uff3b\u30e1\u30cb\u30e5\u30fc\uff3d\u306e\uff3b\u30c4\u30fc\u30eb\uff3d\uff0d\uff3b\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc \u30c4\u30fc\u30eb\uff3d\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson7.png\"><img decoding=\"async\" class=\" size-medium wp-image-1014 alignleft\" src=\"https:\/\/mn-design.tokyo\/wp-content\/uploads\/2015\/05\/lesson7-300x150.png\" alt=\"lesson7\" width=\"300\" height=\"150\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson8.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-1015 alignnone\" src=\"https:\/\/mn-design.tokyo\/wp-content\/uploads\/2015\/05\/lesson8-300x150.png\" alt=\"lesson8\" width=\"300\" height=\"150\" \/><\/a><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/images.zip\">images<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u30e1\u30cb\u30e5\u30fc\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u753b\u9762\u304c2\u5206\u5272\u3055\u308c\u3001\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u4e0a\u90e8\u306b\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u306e\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u306e\u30e1\u30cb\u30e5\u30fc\u306e\u5de6\u4e0a\u306b\u3042\u308b\uff3bShow Mobile.\uff3d\u3092\u30d7\u30eb\u30c0\u30a6\u30f3\u3057\u3066\u5bfe\u8c61\u30c7\u30d0\u30a4\u30b9\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/mn-design.tokyo\/wp-content\/uploads\/2015\/05\/lesson9.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-1016 alignnone\" src=\"https:\/\/mn-design.tokyo\/wp-content\/uploads\/2015\/05\/lesson9-300x150.png\" alt=\"lesson9\" width=\"300\" height=\"150\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>\u3053\u306e\u4f7f\u3044\u65b9\u3092\u7406\u89e3\u3057\u305f\u3046\u3048\u3067\u3001Sublime Text\u3092\u958b\u304d\u307e\u3059\u3002<\/p>\n<p>Save As\u3067\u3000index.html \u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>&nbsp;<\/p>\n<p>\u30e1\u30cb\u30e5\u30fc\u306e\u3000View \u2192\u3000Side Bar\u3000\u304b\u3089\u30b5\u30a4\u30c9\u30d0\u30fc\u3067\u30d5\u30a1\u30a4\u30eb\u8868\u793a\u3055\u305b\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson111.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-1020 alignnone\" src=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson111-300x150.png\" alt=\"lesson11\" width=\"300\" height=\"150\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u307e\u305a\u3001!\u3000\u300c\u534a\u89d2\u30a8\u30af\u30b9\u30af\u30e9\u30e1\u30fc\u30b7\u30e7\u30f3\u30de\u30fc\u30af\u300d\u3000\u3068\u5165\u529b\u3057\u3000tab\u30ad\u30fc\u3092\u62bc\u3057\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson13.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-1022 alignnone\" src=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/05\/lesson13-300x150.png\" alt=\"lesson13\" width=\"300\" height=\"150\" \/><\/a><\/p>\n<p>\u81ea\u52d5\u7684\u306b\u3053\u3053\u307e\u3067\u8a18\u8ff0\u3055\u308c\u307e\u3059\u3002\u8a73\u3057\u304f\u306f<a href=\"http:\/\/designup.jp\/html-emmet-307\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"lang:default decode:true \">&lt;html lang=\"en\"&gt;\n\n&lt;html lang=\"ja\"&gt;<\/pre>\n<p>\u8a00\u8a9e\u8868\u8a18\u3092\u201den\u201d\u3000\u304b\u3089\u3000\u201dja\u201d\u3000\u306b\u5909\u66f4\u3057\u307e\u3059\u3002\u8a00\u8a9e\u8868\u8a18\u306e\u4fee\u6b63\u65b9\u6cd5\u306fEmmet\u3000\u306eHow to\u3000\u3092\u691c\u7d22\u3059\u308b\u3068\u3000\u81ea\u52d5\u3067ja\u306b\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u306e\u3067\u3001\u4f59\u88d5\u304c\u3042\u3063\u305f\u3089\u8abf\u3079\u3066\u8a2d\u5b9a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>body\u30bf\u30b0\u5185\u306e\u8a18\u8ff0\u3092\u3057\u307e\u3059\u3002<br \/>\n\u2460header\u30bf\u30b0\u3000(header \u2192\u3000tab)<br \/>\nid\u540dtop\u3092\u6307\u5b9a<br \/>\nh1\u30bf\u30b0\uff1aWeb Design Sample(h1 \u2192 tab)<br \/>\np\u30bf\u30b0\uff1aimg\u30bf\u30b0\u3092\u5185\u5305\u3002logo.svg\u3000\u30ed\u30b4 (p&gt;img\u3000\u2192\u3000tab)<br \/>\ndiv\u30bf\u30b0\uff1a\u306ba\u30bf\u30b0\u3092\u5165\u308c\u308b(a\u30bf\u30b0\u306e\u30ea\u30f3\u30af\u5148\u306f#contactUs) \u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u3092\u4f5c\u6210\u3057\u3088\u3046\u3002\u00a0\uff08div&gt;a \u2192\u3000tab\uff09<\/p>\n<p>Emmet\u306f\u3001\u8981\u7d20\u540d\u3068tab \u30ad\u30fc\u3067\u3069\u3093\u3069\u3093\u81ea\u52d5\u7684\u306b\u30b3\u30fc\u30c9\u3092\u8a18\u5165\u3057\u3066\u304f\u308c\u307e\u3059\u3002\u3055\u3089\u306b\u5185\u5305\u3059\u308b\u8981\u7d20\u3082\u3000&gt;\u3000\u3067\u8ffd\u8a18\u3057\u3066\u3000tab \u3092\u62bc\u4e0b\u3059\u308b\u3068\u30b3\u30fc\u30c9\u304c\u304d\u3061\u3093\u3068\u8a18\u8ff0\u3055\u308c\u3066\u3044\u304d\u307e\u3059\u3002\u5404\u6587\u7ae0\u306e\u5185\u5bb9\u3092\u30b3\u30d4\u30fc\uff06\u30da\u30fc\u30b9\u30c8\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"ja\"&gt;\n&lt;head&gt;\n\t&lt;meta charset=\"UTF-8\"&gt;\n\t&lt;title&gt;Web Design\u3000Sample&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;header id=\"top\"&gt;\n\t\t&lt;h1&gt;Web Design&lt;\/h1&gt;\n\t\t&lt;p&gt;&lt;img src=\"logo.svg\" alt=\"\"&gt;&lt;\/p&gt;\n\t\t&lt;div&gt;&lt;a href=\"\"&gt;\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u3092\u4f5c\u6210\u3057\u3088\u3046\u3002&lt;\/a&gt;&lt;\/div&gt;\n\t&lt;\/header&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>class\u540dbtn\u3092\u6307\u5b9a\u3002\u30b3\u30f3\u30c6\u30f3\u30c4\u5185\u3001id\u540dcontactUs\u3078\u306e\u30ea\u30f3\u30af\u3092\u8cbc\u308b\u3002<\/p>\n<pre class=\"lang:default decode:true \">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\t&lt;meta charset=\"UTF-8\"&gt;\n\t&lt;title&gt;Document&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;header id=\"top\"&gt;\n\t\t&lt;h1&gt;Web Design&lt;\/h1&gt;\n\t\t&lt;p&gt;&lt;img src=\"logo.svg\" alt=\"\"&gt;&lt;\/p&gt;\n\t\t&lt;div class=\"btn\"&gt;&lt;a href=\"#contactUs\"&gt;\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u3092\u4f5c\u6210\u3057\u3088\u3046\u3002&lt;\/a&gt;&lt;\/div&gt;\n\t&lt;\/header&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>\u2461nav\u30bf\u30b0<\/p>\n<p>1.HTML5CSS3jQuery\u306e\u3000logo2.svg\u3000\u30ed\u30b4<br \/>\nh2\u30bf\u30b0\u5185\u306b\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3080\u3000\uff08h2&gt;img \u2192\u3000tab\uff09<\/p>\n<p>2.\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3<br \/>\nul\u30bf\u30b0\u306b\u30004\u3064\u306e\u30ea\u30b9\u30c8\u306ba\u30bf\u30b0\u3092\u5165\u308c\u3001\u305d\u308c\u305e\u308c\u30da\u30fc\u30b8\u5185\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u30ea\u30f3\u30af\u3092\u8cbc\u308b\u3002\u6587\u8a00\u306f\u4ee5\u4e0b\u306e4\u3064\u3002\u305d\u308c\u305e\u308c\u306eli&gt;a\u5185\u306b\u5165\u308c\u308b\u3002<\/p>\n<p>\uff08ul&gt;li&gt;a*4\u2192\u3000tab\uff09\u3000\u540c\u3058\u8981\u7d20\u3092\u8907\u88fd\u3057\u305f\u3044\u5834\u5408\u306f\u3000*\u3000\u30a2\u30b9\u30bf\u30ea\u30b9\u30af\uff08\u00d7\uff09\u5fc5\u8981\u8981\u7d20\u6570\u3000\u3067\u8a18\u8ff0\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/03\/lesson14.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-1024 alignnone\" src=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/03\/lesson14-300x150.png\" alt=\"lesson14\" width=\"300\" height=\"150\" \/><\/a><\/p>\n<p>ul\u30bf\u30b0\u306bid\u540dmenu\u3092\u6307\u5b9a<\/p>\n<p>li\u30bf\u30b0\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a<br \/>\nHTML(a\u30bf\u30b0\u306e\u30ea\u30f3\u30af\u5148\u306f#html)<br \/>\nCSS(a\u30bf\u30b0\u306e\u30ea\u30f3\u30af\u5148\u306f#css)<br \/>\nAccsess(a\u30bf\u30b0\u306e\u30ea\u30f3\u30af\u5148\u306f#accsess)<br \/>\n\u304a\u554f\u3044\u5408\u308f\u305b(a\u30bf\u30b0\u306e\u30ea\u30f3\u30af\u5148\u306f#contactUs)<\/p>\n<pre class=\"lang:default decode:true\"> &lt;nav&gt;\n    &lt;h2&gt;&lt;a href=\"#\"&gt;&lt;img src=\"images\/logo2.svg\" alt=\"Web Design&lt;\/\"&gt;&lt;\/a&gt;&lt;\/h2&gt;\n    &lt;ul id=\"menu\"&gt;\n      &lt;li&gt;&lt;a href=\"#html\"&gt;HTML&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#css\"&gt;CSS&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#access\"&gt;Access&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href=\"#contactUs\"&gt;\u304a\u554f\u3044\u5408\u308f\u305b&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&gt;\n<\/pre>\n<p>\u2462main\u30bf\u30b0(\u3053\u3053\u304b\u3089\u306f\u3001\u8981\u7d20\u540d\u3000tab\u8868\u8a18\u3067\u3000\u8981\u7d20\u306e\u3042\u3068\u306b<span style=\"color: #ff0000;\">tab<\/span>\u3092\u62bc\u4e0b\u3068\u3044\u3046\u610f\u5473\u306b\u3057\u307e\u3059\u3002)<br \/>\n1.\u6700\u521d\u306earticle\uff08\u672c\u6587\uff09\u30bf\u30b0\u306b\u306fid\u540dhtml\u3092\u6307\u5b9a\u3002\uff08main&gt;article <span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\nh2\u30bf\u30b0\uff1a\u697d\u3057\u304fWeb\u30c7\u30b6\u30a4\u30f3\u3092\u8eab\u306b\u3064\u3051\u308b (h2 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\u30bf\u30b0\uff1a\u307e\u305a\u306f\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067HTML\u306a\u3069\u306b\u89e6\u308c\u3066\u3001\u6b21\u306bHP\u898b\u672c\u3092\u898b\u3088\u3046\u898b\u307e\u306d\u3067\u4f5c\u6210\u3002\u51fa\u6765\u4e0a\u304c\u3063\u305f\u898b\u672c\u3092\u30a2\u30ec\u30f3\u30b8\u3057\u3066\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u30b5\u30a4\u30c8\u3068\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u30a2\u30c3\u30d7\u3002\u3055\u307e\u3056\u307e\u306aHP\u3092\u4f5c\u6210\u3057\u3066\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u3092\u306f\u304b\u308a\u307e\u3059\u3002\u3000\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\n1)section\u30bf\u30b0\uff08section&gt;figure&gt;img \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<\/p>\n<p>\u6587\u7ae0\u3092\u5165\u308c\u308b\u524d\u306b\u3000section&gt;figure&gt;img\u3067\u3067\u304d\u305f\u30bd\u30fc\u30b9\u3092\u4e8c\u3064\u30b3\u30d4\u30fc\uff06\u30da\u30fc\u30b9\u30c8\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default mark:(e.g.7.8.9) decode:true\">\u7565\t&lt;\/nav&gt;\n\u3000\u3000\u3000\u3000&lt;main&gt;\n   \u3000\u3000\u3000 &lt;article id=\"html\"&gt;\n     \u3000 \u3000&lt;h2&gt;\u697d\u3057\u304fWeb\u30c7\u30b6\u30a4\u30f3\u3092\u8eab\u306b\u3064\u3051\u308b&lt;\/h2&gt;\n     \u3000 \u3000&lt;p&gt;\u307e\u305a\u306f\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067HTML\u306a\u3069\u306b\u89e6\u308c\u3066\u3001\u6b21\u306bHP\u898b\u672c\u3092\u898b\u3088\u3046\u898b\u307e\u306d\u3067\u4f5c\u6210\u3002\u51fa\u6765\u4e0a\u304c\u3063\u305f\u898b\u672c\u3092\u30a2\u30ec\u30f3\u30b8\u3057\u3066\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u30b5\u30a4\u30c8\u3068\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u30a2\u30c3\u30d7\u3002\u3055\u307e\u3056\u307e\u306aHP\u3092\u4f5c\u6210\u3057\u3066\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u3092\u306f\u304b\u308a\u307e\u3059\u3002&lt;\/p&gt;\n\t\t&lt;section&gt;\n\t\t\t&lt;figure&gt;&lt;img src=\"\" alt=\"\"&gt;&lt;\/figure&gt;\n\t\t&lt;\/section&gt;\n\t\u3000&lt;\/article&gt;\n\t&lt;\/main&gt;\n<\/pre>\n<pre class=\"lang:default decode:true\">\t&lt;\/nav&gt;\n\t&lt;main&gt;\n    &lt;article id=\"html\"&gt;\n      &lt;h2&gt;\u697d\u3057\u304fWeb\u30c7\u30b6\u30a4\u30f3\u3092\u8eab\u306b\u3064\u3051\u308b&lt;\/h2&gt;\n      &lt;p&gt;\u307e\u305a\u306f\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067HTML\u306a\u3069\u306b\u89e6\u308c\u3066\u3001\u6b21\u306bHP\u898b\u672c\u3092\u898b\u3088\u3046\u898b\u307e\u306d\u3067\u4f5c\u6210\u3002\u51fa\u6765\u4e0a\u304c\u3063\u305f\u898b\u672c\u3092\u30a2\u30ec\u30f3\u30b8\u3057\u3066\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u30b5\u30a4\u30c8\u3068\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u30a2\u30c3\u30d7\u3002\u3055\u307e\u3056\u307e\u306aHP\u3092\u4f5c\u6210\u3057\u3066\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u3092\u306f\u304b\u308a\u307e\u3059\u3002&lt;\/p&gt;\n\t\t\t&lt;section&gt;\n\t\t\t\t&lt;figure&gt;&lt;img src=\"\" alt=\"\"&gt;&lt;\/figure&gt;\n\t\t\t&lt;\/section&gt;\n\t\t\t&lt;section&gt;\n\t\t\t\t&lt;figure&gt;&lt;img src=\"\" alt=\"\"&gt;&lt;\/figure&gt;\n\t\t\t&lt;\/section&gt;\n\t\t\t&lt;section&gt;\n\t\t\t\t&lt;figure&gt;&lt;img src=\"\" alt=\"\"&gt;&lt;\/figure&gt;\n\t\t\t&lt;\/section&gt;\n\t\t&lt;\/article&gt;\n\t&lt;\/main&gt;\n<\/pre>\n<p>figure\u30bf\u30b0\u5185\u306bimg\u30bf\u30b0\u3067\u753b\u50cf\u3092\u914d\u7f6e\uff1acourse1.png<br \/>\nh3\u30bf\u30b0\uff1aProgate\u3000 (h3 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\u30bf\u30b0\uff1a\u30d6\u30e9\u30a6\u30b6\u3060\u3051\u3067HTML\u3001CSS\u3092\u4f7f\u3046\u521d\u7d1a\u304b\u3089\u3001jQuery\u3092\u4f7f\u3063\u305f\u30da\u30fc\u30b8\u4f5c\u6210\u306e\u5fdc\u7528\u307e\u3067\u3001\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067HP\u3092\u4f5c\u308a\u306a\u304c\u3089\u81ea\u7136\u306bWeb\u30c7\u30b6\u30a4\u30f3\u306e\u3057\u304f\u307f\u3092\u5b66\u3093\u3067\u3044\u304d\u307e\u3059\u3002\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\n2)section\u30bf\u30b0<br \/>\nfigure\u30bf\u30b0\u5185\u306bimg\u30bf\u30b0\u3067\u753b\u50cf\u3092\u914d\u7f6e\uff1acourse2.png<br \/>\nh3\u30bf\u30b0\uff1aHP\u4f5c\u6210 (h3 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\u30bf\u30b0\uff1aHTML\u3001CSS\u3001JavaScript\u7b49\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3092\u7528\u3044\u3066\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u52d5\u4f5c\u3059\u308b\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u30fc\u3068\u3044\u3046\u30bd\u30d5\u30c8\u3092\u4f7f\u3044\u307e\u3059\u3002\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\n3)section\u30bf\u30b0<br \/>\nfigure\u30bf\u30b0\u5185\u306bimg\u30bf\u30b0\u3067\u753b\u50cf\u3092\u914d\u7f6e\uff1arcourse3.png<br \/>\nh3\u30bf\u30b0\uff1aWordpress (h3 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\u30bf\u30b0\uff1aMySQL\u306a\u3069\u3092\u4f7f\u3044\u306a\u304c\u3089\u3001Wordpress\u306e\u69cb\u7bc9\u3092\u3057\u307e\u3059\u3002\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<\/p>\n<p>\u5404alt\uff08\u4ee3\u66ff\u3048\u30c6\u30ad\u30b9\u30c8\uff09\u306b\u306fh3\u3068\u540c\u3058\u6587\u8a00\u3092\u5165\u308c\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre class=\"lang:default decode:true\">    &lt;article id=\"html\"&gt;\n      &lt;h2&gt;\u697d\u3057\u304fWeb\u30c7\u30b6\u30a4\u30f3\u3092\u8eab\u306b\u3064\u3051\u308b&lt;\/h2&gt;\n      &lt;p&gt;\u307e\u305a\u306f\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067HTML\u306a\u3069\u306b\u89e6\u308c\u3066\u3001\u6b21\u306bHP\u898b\u672c\u3092\u898b\u3088\u3046\u898b\u307e\u306d\u3067\u4f5c\u6210\u3002\u51fa\u6765\u4e0a\u304c\u3063\u305f\u898b\u672c\u3092\u30a2\u30ec\u30f3\u30b8\u3057\u3066\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u30b5\u30a4\u30c8\u3068\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u30a2\u30c3\u30d7\u3002\u3055\u307e\u3056\u307e\u306aHP\u3092\u4f5c\u6210\u3057\u3066\u30b9\u30ad\u30eb\u30a2\u30c3\u30d7\u3092\u306f\u304b\u308a\u307e\u3059\u3002&lt;\/p&gt;\n      &lt;section&gt;\n      &lt;figure&gt;&lt;img src=\"images\/course1.png\" alt=\"Progate\"&gt;&lt;\/figure&gt;\n        &lt;h3&gt;Progate&lt;\/h3&gt;\n        &lt;p&gt;\u30d6\u30e9\u30a6\u30b6\u3060\u3051\u3067HTML\u3001CSS\u3092\u4f7f\u3046\u521d\u7d1a\u304b\u3089\u3001jQuery\u3092\u4f7f\u3063\u305f\u30da\u30fc\u30b8\u4f5c\u6210\u306e\u5fdc\u7528\u307e\u3067\u3001\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067HP\u3092\u4f5c\u308a\u306a\u304c\u3089\u81ea\u7136\u306bWeb\u30c7\u30b6\u30a4\u30f3\u306e\u3057\u304f\u307f\u3092\u5b66\u3093\u3067\u3044\u304d\u307e\u3059\u3002&lt;\/p&gt;\n      &lt;\/section&gt;\n      &lt;section&gt;\n      &lt;figure&gt;&lt;img src=\"images\/course2.png\" alt=\"HP\u4f5c\u6210\"&gt;&lt;\/figure&gt;\n        &lt;h3&gt;HP\u4f5c\u6210&lt;\/h3&gt;\n        &lt;p&gt;HTML\u3001CSS\u3001JavaScript\u7b49\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u3092\u7528\u3044\u3066\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u52d5\u4f5c\u3059\u308b\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u30fc\u3068\u3044\u3046\u30bd\u30d5\u30c8\u3092\u4f7f\u3044\u307e\u3059\u3002&lt;\/p&gt;\n      &lt;\/section&gt;\n      &lt;section&gt;\n      &lt;figure&gt;&lt;img src=\"images\/course3.png\" alt=\"Wordpress\"&gt;&lt;\/figure&gt;\n        &lt;h3&gt;Wordpress&lt;\/h3&gt;\n        &lt;p&gt;MySQL\u306a\u3069\u3092\u4f7f\u3044\u306a\u304c\u3089\u3001Wordpress\u306e\u69cb\u7bc9\u3092\u3057\u307e\u3059\u3002&lt;\/p&gt;\n      &lt;\/section&gt;\n    &lt;\/article&gt;\n<\/pre>\n<p>2.2\u3064\u3081\u306earticle\uff08\u672c\u6587\uff09\u30bf\u30b0\u306b\u306fid\u540dcss\u3092\u6307\u5b9a\u3002(article <span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\nh2\u30bf\u30b0\uff1a\u57fa\u790e\u306b\u89e6\u308c\u308b\u00a0 (h2 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\n1)section\u30bf\u30b0\uff08section&gt;figure&gt;img \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<\/p>\n<p>\u6587\u7ae0\u3092\u5165\u308c\u308b\u524d\u306b\u3000section&gt;figure&gt;img\u3067\u3067\u304d\u305f\u30bd\u30fc\u30b9\u3092\u4e8c\u3064\u30b3\u30d4\u30fc\uff06\u30da\u30fc\u30b9\u30c8\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">      &lt;figure&gt;&lt;img src=\"images\/course3.png\" alt=\"\"&gt;&lt;\/figure&gt;\n        &lt;h3&gt;Wordpress&lt;\/h3&gt;\n        &lt;p&gt;MySQL\u306a\u3069\u3092\u4f7f\u3044\u306a\u304c\u3089\u3001Wordpress\u306e\u69cb\u7bc9\u3092\u3057\u307e\u3059\u3002&lt;\/p&gt;\n      &lt;\/section&gt;\n    &lt;\/article&gt;\n    &lt;article id=\"css\"&gt;\n      &lt;h2&gt;\u57fa\u790e\u306b\u89e6\u308c\u308b&lt;\/h2&gt;\n      &lt;section&gt;\n      \t&lt;figure&gt;&lt;img src=\"\" alt=\"\"&gt;&lt;\/figure&gt;\n      &lt;\/section&gt;\n            &lt;section&gt;\n      \t&lt;figure&gt;&lt;img src=\"\" alt=\"\"&gt;&lt;\/figure&gt;\n      &lt;\/section&gt;\n            &lt;section&gt;\n      \t&lt;figure&gt;&lt;img src=\"\" alt=\"\"&gt;&lt;\/figure&gt;\n      &lt;\/section&gt;\n     &lt;\/article&gt;     \n<\/pre>\n<p>figure\u30bf\u30b0\u5185\u306bimg\u30bf\u30b0\u3067\u753b\u50cf\u3092\u914d\u7f6e\uff1aroom1.jpg<br \/>\nh3\u30bf\u30b0\uff1a\u5236\u4f5c<br \/>\np\u30bf\u30b0\uff1a\u660e\u308b\u304f\u697d\u3057\u304f\u30b5\u30a4\u30c8\u3067\u904a\u3093\u3067\u3044\u308b\u3046\u3061\u306b\u81ea\u7136\u306bHTML\u306e\u57fa\u790e\u3068\u3001jquery\u306e\u4f7f\u3044\u65b9\u3092\u8eab\u306b\u3064\u3051\u3066\u884c\u3051\u308b\u74b0\u5883\u3067\u3059\u3002\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\n2)section\u30bf\u30b0<br \/>\nfigure\u30bf\u30b0\u5185\u306bimg\u30bf\u30b0\u3067\u753b\u50cf\u3092\u914d\u7f6e\uff1aroom2.jpg<br \/>\nh3\u30bf\u30b0\uff1a\u81ea\u5df1\u5b66\u7fd2\u3000 (h3 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\u30bf\u30b0\uff1a\u7d4c\u9a13\u8005\u304c\u30a2\u30c9\u30d0\u30a4\u30b9\u3057\u307e\u3059\u3002\u4e00\u4eba\u4e00\u4eba\u306e\u9032\u307f\u5177\u5408\u306b\u5408\u308f\u305b\u3066\u6559\u3048\u3066\u3044\u304d\u307e\u3059\u3002\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\n3)section\u30bf\u30b0<br \/>\nfigure\u30bf\u30b0\u5185\u306bimg\u30bf\u30b0\u3067\u753b\u50cf\u3092\u914d\u7f6e\uff1aroom3.jpg<br \/>\nh3\u30bf\u30b0\uff1a\u4f5c\u3063\u305fHP\u306e\u767a\u8868\u3000 (h3 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\u30bf\u30b0\uff1a\u4f5c\u3063\u305f\u4f5c\u54c1\u3092\u767a\u8868\u3057\u307e\u3059\u3002\u8b1b\u5e2b\u304c\u4e00\u4eba\u4e00\u4eba\u306b\u4fee\u6b63\u3084\u8a55\u4fa1\u3092\u3057\u307e\u3059\u3002\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<\/p>\n<pre class=\"lang:default decode:true\">    &lt;article id=\"css\"&gt;\n      &lt;h2&gt;\u57fa\u790e\u306b\u89e6\u308c\u308b&lt;\/h2&gt;\n      &lt;section&gt;\n      &lt;figure&gt;&lt;img src=\"images\/room1.jpg\" alt=\"\"&gt;&lt;\/figure&gt;\n        &lt;h3&gt;\u30b0\u30eb\u30fc\u30d7\u5236\u4f5c&lt;\/h3&gt;\n        &lt;p&gt;\u660e\u308b\u304f\u697d\u3057\u304f\u30b5\u30a4\u30c8\u3067\u904a\u3093\u3067\u3044\u308b\u3046\u3061\u306b\u81ea\u7136\u306bHTML\u306e\u57fa\u790e\u3068\u3001jquery\u306e\u4f7f\u3044\u65b9\u3092\u8eab\u306b\u3064\u3051\u3066\u884c\u3051\u308b\u74b0\u5883\u3067\u3059\u3002&lt;\/p&gt;\n      &lt;\/section&gt;\n      &lt;section&gt;\n      &lt;figure&gt;&lt;img src=\"images\/room2.jpg\" alt=\"\"&gt;&lt;\/figure&gt;\n        &lt;h3&gt;\u81ea\u5df1\u5b66\u7fd2&lt;\/h3&gt;\n        &lt;p&gt;\u7d4c\u9a13\u8005\u304c\u30a2\u30c9\u30d0\u30a4\u30b9\u3057\u307e\u3059\u3002\u4e00\u4eba\u4e00\u4eba\u306e\u9032\u307f\u5177\u5408\u306b\u5408\u308f\u305b\u3066\u6559\u3048\u3066\u3044\u304d\u307e\u3059\u3002&lt;\/p&gt;\n      &lt;\/section&gt;\n      &lt;section&gt;\n      &lt;figure&gt;&lt;img src=\"images\/room3.jpg\" alt=\"\"&gt;&lt;\/figure&gt;\n        &lt;h3&gt;\u4f5c\u3063\u305fHP\u306e\u767a\u8868&lt;\/h3&gt;\n        &lt;p&gt;\u4f5c\u3063\u305f\u4f5c\u54c1\u3092\u767a\u8868\u3057\u307e\u3059\u3002\u8b1b\u5e2b\u304c\u4e00\u4eba\u4e00\u4eba\u306b\u4fee\u6b63\u3084\u8a55\u4fa1\u3092\u3057\u307e\u3059\u3002&lt;\/p&gt;\n      &lt;\/section&gt;\n    &lt;\/article&gt;\n<\/pre>\n<p>\u4eca\u56de\u306f\u753b\u50cf\u306balt\uff08\u4ee3\u66ff\u30c6\u30ad\u30b9\u30c8\uff09\u3092\u5165\u308c\u3066\u3044\u307e\u305b\u3093\u304c\u3001\u97f3\u58f0\u8aad\u307f\u4e0a\u3052\u306a\u3069\u3067\u5fc5\u8981\u3068\u306a\u308b\u306e\u3067\u3067\u304d\u308c\u3070h3\u3068\u540c\u3058\u6587\u7ae0\u3092\u5165\u308c\u308b\u306a\u3069\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n3.section\u30bf\u30b0\u306b\u306fid\u540dcontactUs\u3092\u6307\u5b9a\u3002\uff08section\u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\nh2\uff1b\u304a\u554f\u3044\u5408\u308f\u305b\u30d5\u30a9\u30fc\u30e0\u3000(h2 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\uff1a\u4e0d\u660e\u306a\u3053\u3068\u304c\u3042\u308a\u307e\u3057\u305f\u3089\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\nform\u30bf\u30b0\u306e\u4e2d\u306btable\u30bf\u30b0\u3092\u5165\u308c\u308b\u3002<br \/>\ntable\u30bf\u30b0\u306e\u4e2d\u306b\u306f\u3001tr\uff08table\u884c\uff09\u30bf\u30b0\u304c3\u3064\u3001\u305d\u308c\u305e\u308c\u306etr\u306e\u4e2d\u306b\u306f\u3001th\u30bf\u30b0\u3068td\u30bf\u30b0\u304c1\u3064\u3065\u3064\u3002\uff08form&gt;table&gt;tr*3&gt;th+td \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<\/p>\n<pre class=\"lang:default decode:true\">     \t&lt;form action=\"\"&gt;\n     \t\t&lt;table&gt;\n     \t\t\t&lt;tr&gt;\n     \t\t\t\t&lt;th&gt;&lt;\/th&gt;\n     \t\t\t\t&lt;td&gt;&lt;\/td&gt;\n     \t\t\t&lt;\/tr&gt;\n     \t\t\t&lt;tr&gt;\n     \t\t\t\t&lt;th&gt;&lt;\/th&gt;\n     \t\t\t\t&lt;td&gt;&lt;\/td&gt;\n     \t\t\t&lt;\/tr&gt;\n     \t\t\t&lt;tr&gt;\n     \t\t\t\t&lt;th&gt;&lt;\/th&gt;\n     \t\t\t\t&lt;td&gt;&lt;\/td&gt;\n     \t\t\t&lt;\/tr&gt;\n     \t\t&lt;\/table&gt;\n     \t&lt;\/form&gt;\n<\/pre>\n<p>\u6700\u521d\u306etr\u30bf\u30b0\u306e\u4e2d<br \/>\nth\uff1a\u304a\u540d\u524d\uff1a<br \/>\ntd\uff1a&lt;input type=&#8221;text&#8221; name=&#8221;name&#8221; maxlength=&#8221;20&#8243;&gt;<br \/>\n2\u3064\u76ee\u306etr\u30bf\u30b0\u306e\u4e2d\uff1a\u304a\u554f\u3044\u5408\u308f\u305b\u5185\u5bb9\uff1a<br \/>\nth\uff1a&lt;textarea name=&#8221;otoiawase&#8221; cols=&#8221;20&#8243;&gt;&lt;\/textarea&gt;<br \/>\n3\u3064\u76ee\u306etr\u30bf\u30b0\u306e\u4e2d\uff1a<br \/>\nth\uff1a\u7a7a<br \/>\ntd\uff1a&lt;input type=&#8221;submit&#8221; value=&#8221;\u9001\u4fe1&#8221;&gt;<\/p>\n<pre class=\"lang:default decode:true\">    &lt;section id=\"contactUs\"&gt;\n      &lt;h2&gt;\u304a\u554f\u3044\u5408\u308f\u305b\u30d5\u30a9\u30fc\u30e0&lt;\/h2&gt;\n      &lt;p&gt;\u4e0d\u660e\u306a\u3053\u3068\u304c\u3042\u308a\u307e\u3057\u305f\u3089\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002&lt;\/p&gt;\n      &lt;form action=\"xxx.php\"&gt;\n        &lt;table&gt;\n          &lt;tr&gt;\n            &lt;th&gt;\u304a\u540d\u524d\uff1a&lt;\/th&gt;\n            &lt;td&gt;&lt;input type=\"text\" name=\"name\" maxlength=\"20\"&gt;&lt;\/td&gt;\n          &lt;\/tr&gt;\n          &lt;tr&gt;\n            &lt;th&gt;\u304a\u554f\u3044\u5408\u308f\u305b\u5185\u5bb9\uff1a&lt;\/th&gt;\n            &lt;td&gt;&lt;textarea name=\"otoiawase\" cols=\"20\"&gt;&lt;\/textarea&gt;&lt;\/td&gt;\n          &lt;\/tr&gt;\n          &lt;tr&gt;\n            &lt;th&gt;&lt;\/th&gt;\n            &lt;td&gt;&lt;input type=\"submit\" value=\"\u9001\u4fe1\"&gt;&lt;\/td&gt;\n          &lt;\/tr&gt;\n        &lt;\/table&gt;\n      &lt;\/form&gt;\n    &lt;\/section&gt;\n<\/pre>\n<p>\u2463aside\u30bf\u30b0\u3000\uff08aside <span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\nh2\u30bf\u30b0\uff1a\u30a2\u30af\u30bb\u30b9\u00a0(h2<span style=\"color: #ff0000;\"> tab<\/span>)<br \/>\n\uff08h2\u306f\u6ca2\u5c71\u3042\u308b\u306e\u3067id\u540daccsess\u3092\u6307\u5b9a\uff09<br \/>\nh3\u30bf\u30b0\uff1a\u6e0b\u8c37\u3068\u6075\u6bd4\u5bff\u306b\u4e8b\u52d9\u6240\u304c\u3042\u308a\u307e\u3059\u3002(h3 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\u30bf\u30b0\uff1a\u6e0b\u8c37\u99c5\u3001\u6075\u6bd4\u5bff\u99c5\u3068\u3082\u5f92\u6b695\u5206\u570f\u5185\u306e\u901a\u3044\u3084\u3059\u3044\u5834\u6240\u3067\u3059\u3002\uff08p <span style=\"color: #ff0000;\">\u00a0tab<\/span>\uff09<br \/>\nsection\u30bf\u30b0\uff1a\uff08section\u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\nh3\uff1a\u6e0b\u8c37\u3068\u6075\u6bd4\u5bff\u306b\u4e8b\u52d9\u6240\u304c\u3042\u308a\u307e\u3059\u3002(h3 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\np\uff1a\u6e0b\u8c37\u99c5\u3001\u6075\u6bd4\u5bff\u99c5\u3068\u3082\u5f92\u6b695\u5206\u570f\u5185\u306e\u901a\u3044\u3084\u3059\u3044\u5834\u6240\u3067\u3059\u3002\uff08p \u00a0<span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\ndiv\uff1aclass\u540daccessmap\u3092\u6307\u5b9a\u3002\u4e2d\u306b\u3001\u4ee5\u4e0b\u306egoogleMap\u5410\u304d\u51fa\u3057\u30b3\u30fc\u30c9\u3092\u5165\u308c\u308b\u3002\uff08div <span style=\"color: #ff0000;\">tab<\/span>\uff09<\/p>\n<pre class=\"lang:default decode:true \">&lt;iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3241.750552398976!2d139.701334!3d35.65851700000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b5789e3c191%3A0x98dadeb0d2e1d297!2z5riL6LC36aeF!5e0!3m2!1sja!2sjp!4v1432964258135\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\"&gt;&lt;\/iframe&gt;<\/pre>\n<p>\u2464footer\u30bf\u30b0\uff08fotter&gt;section*2 <span style=\"color: #ff0000;\">tab<\/span>\uff09<br \/>\n1\u3064\u76ee\u306esection\u30bf\u30b0\uff1a<br \/>\nh4\u30bf\u30b0\uff1a(h4\u00a0<span style=\"color: #ff0000;\">tab<\/span>)<br \/>\nul\u30bf\u30b0\uff1ali&gt;a\u30924\u3064\u5185\u5305\u00a0\uff08ul&gt;li&gt;a*4\u3000<span style=\"color: #ff0000;\">tab<\/span>\uff09<\/p>\n<p>\u3053\u3053\u3067\u30b3\u30d4\u30fc\u3057\u3066\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306b\u3082\u8cbc\u308a\u4ed8\u3051\u308b\u3068\u4f5c\u696d\u304c\u697d\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">         \t&lt;h4&gt;&lt;\/h4&gt;\n         \t\t&lt;ul&gt;\n         \t\t\t&lt;li&gt;\n         \t\t\t\t&lt;a href=\"\"&gt;&lt;\/a&gt;\n         \t\t\t\t&lt;a href=\"\"&gt;&lt;\/a&gt;\n         \t\t\t\t&lt;a href=\"\"&gt;&lt;\/a&gt;\n         \t\t\t\t&lt;a href=\"\"&gt;&lt;\/a&gt;\n         \t\t\t&lt;\/li&gt;\n         \t\t&lt;\/ul&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u6700\u521d\u306eli\u30bf\u30b0\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a<\/p>\n<p>Progate<br \/>\nHP\u4f5c\u6210<br \/>\njQuery<br \/>\nWordpress<br \/>\n2\u3064\u76ee\u306esection\u30bf\u30b0\uff1a<br \/>\nh4\u30bf\u30b0\uff1a<br \/>\nul\u30bf\u30b0\uff1ali&gt;a\u30924\u3064\u5185\u5305<br \/>\n\u57fa\u790e\u30fb\u5236\u4f5c<br \/>\n\u81ea\u5df1\u5b66\u7fd2<br \/>\n\u767a\u8868<br \/>\n\u304a\u554f\u3044\u5408\u308f\u305b<br \/>\nsmall\u30bf\u30b0\uff1a&amp;copy;2009 &#8211; 2015 vpdesign\u3000\uff08small <span style=\"color: #ff0000;\">tab<\/span>\uff09<\/p>\n<p>\u2465div\u30bf\u30b0\uff1a^ \u00a0(div&gt;a \u00a0 <span style=\"color: #ff0000;\">tab<\/span>)<br \/>\n(\u4e0a\u306b\u623b\u308b\u30dc\u30bf\u30f3\u306b\u3059\u308b\u3002id\u540dgototop\u3068\u6307\u5b9a)<br \/>\na\u30bf\u30b0\uff1a#top\u3078\u306e\u30ea\u30f3\u30af<\/p>\n<p>\u203b\u6307\u5b9a\u5916\u306ea\u30bf\u30b0\u306e\u30ea\u30f3\u30af\u306f\u5168\u3066#<\/p>\n<pre class=\"lang:default decode:true \">\u7565 &lt;\/main&gt;\n  &lt;aside&gt;\n    &lt;h2 id=\"accsess\"&gt;\u30a2\u30af\u30bb\u30b9&lt;\/h2&gt;\n    &lt;section&gt;\n      &lt;h3&gt;\u6e0b\u8c37\u3068\u6075\u6bd4\u5bff\u306b\u4e8b\u52d9\u6240\u304c\u3042\u308a\u307e\u3059\u3002&lt;\/h3&gt;\n      &lt;p&gt;\u6e0b\u8c37\u99c5\u3001\u6075\u6bd4\u5bff\u99c5\u3068\u3082\u5f92\u6b695\u5206\u570f\u5185\u306e\u901a\u3044\u3084\u3059\u3044\u5834\u6240\u3067\u3059\u3002&lt;\/p&gt;\n    &lt;\/section&gt;\n    &lt;div class=\"accessmap\"&gt;\n    &lt;iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3241.750552398976!2d139.701334!3d35.65851700000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b5789e3c191%3A0x98dadeb0d2e1d297!2z5riL6LC36aeF!5e0!3m2!1sja!2sjp!4v1432964258135\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\"&gt;&lt;\/iframe&gt;\n    &lt;\/div&gt;\n  &lt;\/aside&gt;\n&lt;footer&gt;\n&lt;section&gt;\n  &lt;h4&gt;Service&lt;\/h4&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Progate&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;HP\u4f5c\u6210&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;jQuery&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Wordpress&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/section&gt;\n&lt;section&gt;\n  &lt;h4&gt;Information&lt;\/h4&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;\u57fa\u790e\u30fb\u5236\u4f5c&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;\u81ea\u5df1\u5b66\u7fd2&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;\u767a\u8868&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;\u304a\u554f\u3044\u5408\u308f\u305b&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/section&gt;\n&lt;small&gt;\uff1a&amp;copy;2009 - 2015 vpdesign&lt;\/small&gt;\n&lt;\/footer&gt;\n  &lt;div id=\"gototop\"&gt;&lt;a href=\"#top\"&gt;^&lt;\/a&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>\u3053\u3053\u307e\u3067\u3067HTML\u304c\u5b8c\u6210\u3067\u3059\u3002html\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<p>\u6b21\u306fCSS\u3067\u88c5\u98fe\u3092\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u51fa\u6765\u4e0a\u304c\u3063\u305fHTML\u306f\u6587\u6cd5\u7684\u306b\u304a\u304b\u3057\u306a\u3068\u3053\u308d\u304c\u306a\u3044\u304b\u3001\u4f5c\u6210\u3057\u305findex.html\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u3092<\/p>\n<p><a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u30d0\u30ea\u30c7\u30fc\u30bf\u30fc<\/a>\u3067\u4e00\u5ea6\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>Validate by direct input \u3092\u9078\u629e\u3057\u3066\u3001\u4f5c\u6210\u3057\u305findex.html\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u3059\u3079\u3066\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"font-size:16 line-height:20 lang:default decode:true\">This document was successfully checked as HTML5!<\/pre>\n<p>\u3068\u8868\u793a\u3055\u308c\u308c\u3070\u6587\u6cd5\u7684\u9593\u9055\u3044\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u9593\u9055\u3044\u304c\u898b\u3064\u304b\u308b\u3068\u3001\u3069\u306e\u884c\u306e\u3069\u3053\u3068\u3044\u3046\u3053\u3068\u304c\u66f8\u304b\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u9593\u9055\u3044\u306f\u4fee\u6b63\u3057\u3066\u6b21\u306b\u9032\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>CSS\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u524d\u306b\u4e0b\u8a18\u30d5\u30a9\u30eb\u30c0\u3092DL\u3057\u3066<\/p>\n<p><a href=\"http:\/\/mn-prof.bloggle.jp\/wp-content\/uploads\/2015\/02\/css.zip\">css<\/a><\/p>\n<p>port_sample\u3068\u3044\u3046\u30d5\u30a9\u30eb\u30c0\u306b\u5165\u308c\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u4eca\u56de\u4f7f\u3046\u30ea\u30bb\u30c3\u30c8CSS\u3068Slicknav\u306eCSS\u304c\u5165\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Chrome\u306b\u306f\u30a8\u30df\u30e5\u30ec\u30fc\u30bf\u30fc\u3068\u3044\u3046<span class=\"more-button\"><a href=\"https:\/\/mn-design.tokyo\/?p=863\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\">HTML\/CSS6-2\u3000\u30b9\u30de\u30db\u30b5\u30a4\u30c8\u4f5c\u6210 HTML\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u7de8<\/span><\/a><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-863","post","type-post","status-publish","format-standard","hentry","category-html-css"],"_links":{"self":[{"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=\/wp\/v2\/posts\/863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=863"}],"version-history":[{"count":0,"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=\/wp\/v2\/posts\/863\/revisions"}],"wp:attachment":[{"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mn-design.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}