{"id":430,"date":"2025-10-23T15:22:07","date_gmt":"2025-10-23T06:22:07","guid":{"rendered":"http:\/\/turu2026.com\/portfolio\/?p=430"},"modified":"2025-10-28T13:32:27","modified_gmt":"2025-10-28T04:32:27","slug":"10-23%e5%ad%a6%e7%a7%91-html-css%e5%9f%ba%e7%a4%8e%e2%91%a5","status":"publish","type":"post","link":"https:\/\/turu2026.com\/portfolio\/10-23%e5%ad%a6%e7%a7%91-html-css%e5%9f%ba%e7%a4%8e%e2%91%a5\/","title":{"rendered":"10\/23\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">-\u672c\u65e5\u306e\u30a2\u30b8\u30a7\u30f3\u30c0-<\/h2>\n\n\n\n<p>1\u9650\u76ee<br>\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465<br>CSS\u306e\u8a18\u8ff0\u65b9\u6cd5\u306b\u3064\u3044\u3066<\/p>\n\n\n\n<p>2\u9650\u76ee<br>\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465<br>CSS\u306e\u8a18\u8ff0\u65b9\u6cd5\u306b\u3064\u3044\u3066<\/p>\n\n\n\n<p>3\u9650\u76ee<br>\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465<br>Web\u30da\u30fc\u30b8\u5236\u4f5c\u5b9f\u8df5<\/p>\n\n\n\n<p>4\u9650\u76ee<br>\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465<br>Web\u30da\u30fc\u30b8\u5236\u4f5c\u5b9f\u8df5<\/p>\n\n\n\n<p>5\u9650\u76ee<br>\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465<br>\u672c\u65e5\u306e\u8b1b\u7fa9\u306e\u307e\u3068\u3081<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u672c\u65e5\u306e\u30c6\u30fc\u30de<\/h2>\n\n\n\n<p>CSS\u306e\u8a18\u8ff0\u3092\u3057\u307e\u3057\u3087\u3046<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30bb\u30ec\u30af\u30bf\u306e\u5f97\u70b9\u306b\u3064\u3044\u3066<\/h2>\n\n\n\n<p>\u30bb\u30ec\u30af\u30bf\u306b\u306f\u512a\u5148\u9806\u4f4d\u304c\u3042\u308a\u70b9\u6570\u8a08\u7b97\u3092\u3057\u3066\u9ad8\u5f97\u70b9\u306e\u3082\u306e\u304c\u63a1\u7528\u3055\u308c\u307e\u3059\u3002\u540c\u3058\u5f97\u70b9\u306e\u5834\u5408\u306f\u5f8c\u308d\u306b\u66f8\u3044\u3066\u3042\u308b\u3082\u306e\u304c\u63a1\u7528\u3055\u308c\u307e\u3059\u3002\u70b9\u6570\u8a08\u7b97\u306e\u7d50\u679c\u306b\u3088\u3063\u3066\u306f\u524d\u306b\u66f8\u3044\u3066\u3042\u308b\u30bb\u30ec\u30af\u30bf\u304c\u63a1\u7528\u3055\u308c\u3066\u3057\u307e\u3046\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u610f\u56f3\u3057\u305f\u30b9\u30bf\u30a4\u30eb\u306b\u306a\u3089\u306a\u3044\u6642\u306f\u70b9\u6570\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS\uff1a\u30de\u30fc\u30b8\u30f3\u7cfb\u30d7\u30ed\u30d1\u30c6\u30a3\u3010\u5fa9\u7fd2\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>margin-top\/-bottom\/-left\/-right \u30d7\u30ed\u30d1\u30c6\u30a3\uff08\u30de\u30fc\u30b8\u30f3\u4e0a\u4e0b\u5de6\u53f3\uff09<\/li>\n\n\n\n<li>margin \u30d7\u30ed\u30d1\u30c6\u30a3\uff08\u30de\u30fc\u30b8\u30f3\u4e00\u62ec\u63aa\u5b9a\uff09<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">CSS\uff1a\u30d1\u30c7\u30a3\u30f3\u30b0\u7cfb\u30d7\u30ed\u30d1\u30c6\u30a3\u3010\u5fa9\u7fd2\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>padding-top\/-bottom\/-left\/-right \u30d7\u30ed\u30d1\u30c6\u30a3\uff08\u30d1\u30c7\u30a3\u30f3\u30b0\u4e0a\u4e0b\u5de6\u53f3\uff09<\/li>\n\n\n\n<li>padding \u30d7\u30ed\u30d1\u30c6\u30a3\uff08\u30d1\u30c7\u30a3\u30f3\u30b0\u4e00\u62ec\u6307\u5b9a\uff09<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">CSS\uff1a\u30d0\u30c3\u30af\u30b0\u30e9\u30f3\u30c9\u7cfb\u30d7\u30ed\u30d1\u30c6\u30a3\u3010\u5fa9\u7fd2\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>background-color \u30d7\u30ed\u30d1\u30c6\u30a3\uff08\u80cc\u666f\u8272\uff09<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">CSS\uff1a\u30ec\u30a4\u30a2\u30a6\u30c8\u7cfb\u30d7\u30ed\u30d1\u30c6\u30a3\u3010\u5fa9\u7fd2\u3011<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>width \u30d7\u30ed\u30d1\u30c6\u30a3\uff08\u5185\u5bb9\u306e\u5e45\uff09<\/li>\n\n\n\n<li>height \u30d7\u30ed\u30d1\u30c6\u30a3\uff08\u5185\u5bb9\u306e\u9ad8\u3055\uff09<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Web\u30da\u30fc\u30b8\u5236\u4f5c\u5b9f\u8df5\u2462<\/h2>\n\n\n\n<p>\u30de\u30fc\u30b8\u30f3\u3001\u30d1\u30c7\u30a3\u30f3\u30b0\u3001\u30d0\u30c3\u30af\u30b0\u30e9\u30f3\u30c9\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u7cfb\u306e\u305d\u308c\u305e\u308c\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3044\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u8abf\u6574\u3057\u306a\u304c\u3089html\u306e\u89aa\u3068\u5b50\uff08\u5165\u308c\u5b50\uff09\u306e\u95a2\u4fc2\u3092\u7406\u89e3\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u2460html\u3068css\u30d5\u30a1\u30a4\u30eb\u306e\u6e96\u5099<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n\u3000\u3000\u3000\u3000\u3000&lt;meta&gt;\u301c\u301c\u301c\n\u3000\u3000\u3000\u3000\u3000&lt;meta&gt;\u301c\u301c\u301c\n\u3000\u3000\u3000\u3000\u3000&lt;title&gt;\u301c\u301c\u301c&lt;\/title&gt;\n\u3000\u3000\u3000\u3000\u3000&lt;link href=\"reset.css\" rel=\"stylesheet\"&gt;\n\u3000\u3000\u3000\u3000\u3000&lt;link href=\"style.css\" rel=\"stylesheet\"&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n\u3000\u3000\u3000\u3000&lt;div class=\"oya_a\"&gt;\n\u3000\u3000\u3000\u3000\u3000\u3000&lt;div class=\"kodomo_a1\"&gt;&lt;\/div&gt;\n          &lt;div class=\"kodomo_a2\"&gt;&lt;\/div&gt;\n\u3000\u3000\u3000\u3000&lt;\/div&gt;\n\u3000\u3000\u3000\u3000&lt;div class=\"oya_b\"&gt;\n\u3000\u3000\u3000\u3000\u3000\u3000&lt;div class=\"kodomo_b\"&gt;&lt;\/div&gt;\n\u3000\u3000\u3000\u3000&lt;\/div&gt;\n\u3000\u3000\u3000\u3000&lt;div class=\"oya_c\"&gt;\n\u3000\u3000\u3000\u3000\u3000\u3000&lt;div class=\"kodomo_c\"&gt;&lt;\/div&gt;\n\u3000\u3000\u3000\u3000&lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u2461\u89aa\u5b50\uff08\u5165\u308c\u5b50\uff09\u306e\u95a2\u4fc2\u3092\u30d6\u30e9\u30a6\u30b6\u3067\u78ba\u8a8d\u3059\u308b<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.oya_a {\n    width: 800px;\n    height: 800px;\n    background: red;\n}\n\n.kodomo_a1 {\n    width: 300px;\n    height: 300px;\n    background: blue;\n}\n\n.kodomo_a2 {\n    width: 400px;\n    height: 400px;\n    background: green;\n}<\/code><\/pre>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306bbackground\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u80cc\u666f\u306b\u4eee\u8272\u3092\u5165\u308c\u308b\u3068\u3001\u30d6\u30e9\u30a6\u30b6\u3067html\u3092\u8868\u793a\u3057\u305f\u6642\u306b\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u78ba\u8a8d\u3057\u3084\u3059\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u2462\u30de\u30fc\u30b8\u30f3\u3068\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u4f7f\u3063\u3066\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u4f4d\u7f6e\u3092\u8abf\u6574\u3057\u3066\u307f\u307e\u3057\u3087\u3046<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.oya_a {\n    width: 800px;\n    height: 800px;\n    background: red;\n\u3000\u3000\u3000padding: 0 0 0 150px;\n}\n\n.kodomo_a1 {\n    width: 300px;\n    height: 300px;\n    background: blue;\n    margin: 0 auto;\n}\n\n.kodomo_a2 {\n    width: 400px;\n    height: 400px;\n    background: green;\n    margin: 50px 0 0 0;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u2463\u30de\u30a4\u30ca\u30b9\u30de\u30fc\u30b8\u30f3\u3068\u3001\u30dc\u30c3\u30af\u30b9\u306e\u53f3\u7aef\u914d\u7f6e\u306b\u3064\u3044\u3066<\/h4>\n\n\n\n<h2 class=\"wp-block-heading\">\u672c\u65e5\u306e\u8ab2\u984c<\/h2>\n\n\n\n<p>Web\u30da\u30fc\u30b8\u5236\u4f5c\u5b9f\u8df5\u3067\u4f5c\u6210\u3057\u305f\u30da\u30fc\u30b8\u306e\u30ad\u30e3\u30d7\u30c1\u30e3\u3092\u53d6\u5f97\u3057\u3066WordPress\u306e\u6295\u7a3f\u30da\u30fc\u30b8\u306b\u8cbc\u308a\u4ed8\u3051\u3092\u884c\u3044\u307e\u3057\u3087\u3046\u3002\uff08\u51fa\u6765\u305f\u3068\u3053\u308d\u307e\u3067\u3067\u5927\u4e08\u592b\u3067\u3059\uff09<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"533\" height=\"2560\" src=\"http:\/\/turu2026.com\/portfolio\/wp-content\/uploads\/2025\/10\/C__Users_0237_Desktop_training-3_training-3_training_index.html-scaled.png\" alt=\"\" class=\"wp-image-434\" srcset=\"https:\/\/turu2026.com\/portfolio\/wp-content\/uploads\/2025\/10\/C__Users_0237_Desktop_training-3_training-3_training_index.html-scaled.png 533w, https:\/\/turu2026.com\/portfolio\/wp-content\/uploads\/2025\/10\/C__Users_0237_Desktop_training-3_training-3_training_index.html-213x1024.png 213w, https:\/\/turu2026.com\/portfolio\/wp-content\/uploads\/2025\/10\/C__Users_0237_Desktop_training-3_training-3_training_index.html-320x1536.png 320w\" sizes=\"(max-width: 533px) 100vw, 533px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u611f\u60f3<\/h2>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>-\u672c\u65e5\u306e\u30a2\u30b8\u30a7\u30f3\u30c0- 1\u9650\u76ee\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465CSS\u306e\u8a18\u8ff0\u65b9\u6cd5\u306b\u3064\u3044\u3066 2\u9650\u76ee\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465CSS\u306e\u8a18\u8ff0\u65b9\u6cd5\u306b\u3064\u3044\u3066 3\u9650\u76ee\u5b66\u79d1 HTML\/CSS\u57fa\u790e\u2465Web\u30da\u30fc\u30b8\u5236\u4f5c\u5b9f\u8df5 4\u9650\u76ee\u5b66\u79d1 HTML\/ [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[5],"tags":[],"class_list":["post-430","post","type-post","status-publish","format-standard","hentry","category-5"],"_links":{"self":[{"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/posts\/430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/comments?post=430"}],"version-history":[{"count":3,"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/posts\/430\/revisions"}],"predecessor-version":[{"id":435,"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/posts\/430\/revisions\/435"}],"wp:attachment":[{"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/media?parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/categories?post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/turu2026.com\/portfolio\/wp-json\/wp\/v2\/tags?post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}