{"id":606,"date":"2021-07-29T19:57:24","date_gmt":"2021-07-29T10:57:24","guid":{"rendered":"https:\/\/techmania.rensa.jp.net\/?p=606"},"modified":"2024-11-15T12:01:04","modified_gmt":"2024-11-15T03:01:04","slug":"programming0012","status":"publish","type":"post","link":"https:\/\/techmania.jp\/blog\/programming0012\/","title":{"rendered":"\u3010JavaScript\u5165\u9580\u3011\u7c21\u5358\u306a\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3057\u3066\u7fd2\u5f97"},"content":{"rendered":"\n<p><a href=\"https:\/\/techmania.jp\/index.php\/2021\/04\/12\/post-391\/\" data-type=\"URL\" target=\"_blank\" rel=\"noreferrer noopener\">\u524d\u56de\u306e\u8a18\u4e8b<\/a>\u304b\u3089\u306e\u7d9a\u304d\u3068\u306a\u308a\u307e\u3059\u3002<br>\u4eca\u56de\u306f JavaScript \u3092\u7528\u3044\u305f\u7c21\u5358\u306a\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u57fa\u790e\u89e3\u8aac\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"outline__1\" class=\"wp-block-heading\">\u3053\u306e\u8a18\u4e8b\u306e\u5bfe\u8c61\u8005<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u521d\u5fc3\u8005\u3067\u3053\u308c\u304b\u3089 HTML \/ CSS \/ JavaScript \u3092\u5b66\u307c\u3046\u3068\u3057\u3066\u3044\u308b\u4eba<\/li>\n\n\n\n<li>\u30c7\u30a3\u30ec\u30af\u30bf\u30fc\u7b49\u306e\u696d\u52d9\u3092\u884c\u3063\u3066\u304a\u308a\u3001\u9759\u7684\u30da\u30fc\u30b8\u306e\u4f5c\u6210\u65b9\u6cd5\u3092\u77e5\u308a\u305f\u3044\u4eba<br><br>\u203b <a href=\"https:\/\/techmania.rensa.jp.net\/index.php\/2021\/04\/12\/post-391\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u524d\u56de\u306e\u8a18\u4e8b<\/a>\u306f\u5fc5\u9808\u3067\u306f\u306a\u3044\u3067\u3059\u304c\u3001\u304a\u8aad\u307f\u3044\u305f\u3060\u304f\u3068\u3088\u308a\u7406\u89e3\u3057\u3084\u3059\u304f\u306a\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 id=\"outline__2\" class=\"wp-block-heading\">\u6240\u8981\u6642\u9593<\/h2>\n\n\n\n<p>10 \u5206\u7a0b<\/p>\n\n\n\n<h2 id=\"outline__3\" class=\"wp-block-heading\">\u4e8b\u524d\u6e96\u5099<\/h2>\n\n\n\n<p>\u307e\u305a\u306f\u4ee5\u4e0b\u306e html \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308a\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3057\u307e\u3057\u3087\u3046\u3002<br>\u524d\u56de\u8a18\u4e8b\u306e\u6700\u5f8c\u3067\u4f5c\u6210\u3057\u305f\u3082\u306e\u3068\u540c\u4e00\u3067\u3059\u304c\u3001script \u30bf\u30b0\u5185\u306e <span class=\"has-inline-color has-vivid-red-color\"><strong>alert(&#8220;Hello JavaScript&#8221;);<\/strong><\/span>  \u3060\u3051\u524a\u9664\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;h1&gt;Hello World&lt;\/h1&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n \n&lt;style&gt;\n&lt;\/style&gt;\n \n&lt;script&gt;\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<h2 id=\"outline__4\" class=\"wp-block-heading\">\u307e\u305a\u306f\u571f\u53f0\u3068\u306a\u308b HTML \u3092\u69cb\u7bc9\u3059\u308b\u3002<\/h2>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>&lt;html><\/strong><\/mark> \u30bf\u30b0\u306b\u66f8\u304b\u308c\u305f\u5185\u5bb9\u304c Web \u30da\u30fc\u30b8\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u304a\u3051\u308b\u57fa\u76e4\u3068\u306a\u308a\u307e\u3059\u3002<br>JavaScript \u3082 Style \u3082\u305d\u308c\u306b\u5bfe\u3057\u3066\u64cd\u4f5c\u3092\u884c\u3046\u5f62\u3068\u306a\u308b\u305f\u3081\u3001\u958b\u767a\u306b\u304a\u3044\u3066\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b9\u30c6\u30c3\u30d71\u3092\u8e0f\u3080\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"has-white-color has-black-background-color has-text-color has-background wp-block-list\">\n<li>HTML \u3092\u69cb\u7bc9\u3059\u308b<\/li>\n\n\n\n<li>Style \u3067\u898b\u6804\u3048\u3092\u6574\u3048\u308b<\/li>\n\n\n\n<li>JavaScript \u3067\u52d5\u304d\u3092\u3064\u3051\u305f\u308a\u8272\u3005\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p>\u3055\u3066\u3001\u305d\u3093\u306a\u308f\u3051\u3067\u307e\u305a\u306f HTML \u306e\u571f\u53f0\u69cb\u7bc9\u3067\u3059\u3002<br>\u4ee5\u4e0b\u306e\u3088\u3046\u306b <span class=\"has-inline-color has-vivid-red-color\"><strong>p<\/strong><\/span> \u30bf\u30b0\u3068 <span class=\"has-inline-color has-vivid-red-color\"><strong>div<\/strong><\/span> \u30bf\u30b0\u3092\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;h1&gt;Hello World&lt;\/h1&gt;\n\n        &lt;!-- \u2193\u2193\u2193 \u8ffd\u52a0 \u2193\u2193\u2193 --&gt;\n        &lt;p&gt;this is a p&lt;\/p&gt;\n        &lt;div&gt;this is a div&lt;\/div&gt;\n\n    &lt;\/body&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n&lt;\/style&gt;\n\n&lt;script&gt;\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>\u8a2d\u5b9a\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u306e\u753b\u9762\u3092\u66f4\u65b0\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<br>\u7d9a\u3044\u3066 Style \u306b\u3088\u308b\u88c5\u98fe\u3092\u8ffd\u52a0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/web-img.rensa.jp.net\/rensa\/images\/techmania\/post202104141221\/img01.png\" class=\"post-img\" style=\"border: 3px solid black;\">\n\n\n\n<h3 id=\"outline__4_1\" class=\"wp-block-heading\">Style \u306b\u3088\u308b\u4fee\u98fe<\/h3>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u30c6\u30ad\u30b9\u30c8\u306e\u3088\u3046\u306b\u3001<strong><span class=\"has-inline-color has-vivid-red-color\">style<\/span><\/strong> \u30bf\u30b0\u3078\u306e\u5b9a\u7fa9\u306e\u8ffd\u52a0\u3068 <span class=\"has-inline-color has-vivid-red-color\"><strong>p<\/strong><\/span> \u30bf\u30b0\u3078\u306e\u8a2d\u5b9a\u3092\u65bd\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;h1&gt;Hello World&lt;\/h1&gt;\n\n        &lt;!-- \u2193\u2193\u2193 class=\"deco\" \u3092\u8ffd\u52a0 \u2193\u2193\u2193 --&gt;\n        &lt;p class=\"deco\"&gt;this is a p&lt;\/p&gt;\n        &lt;div&gt;this is a div&lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n    \/* \u2193\u2193\u2193 \u8ffd\u52a0 \u2193\u2193\u2193 *\/\n    p.deco {\n        color: red;\n    }\n&lt;\/style&gt;\n\n&lt;script&gt;\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>\u4e0a\u8a18\u306e\u8a2d\u5b9a\u3092\u633f\u5165\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3001<span class=\"has-inline-color has-vivid-red-color\"><strong>p<\/strong><\/span> \u30bf\u30b0\u3067\u62ec\u3089\u308c\u3066\u3044\u308b\u30c6\u30ad\u30b9\u30c8\u304c\u8d64\u8272( red ) \u306b\u306a\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/web-img.rensa.jp.net\/rensa\/images\/techmania\/post202104141221\/img02.png\" class=\"post-img\" style=\"border: 3px solid black;\">\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u8a00\u3048\u3070\u300c <strong><span class=\"has-inline-color has-vivid-red-color\">p<\/span><\/strong> \u30bf\u30b0\u306b\u306e\u307f\u4f5c\u7528\u3059\u308b <span class=\"has-inline-color has-vivid-red-color\"><strong>deco<\/strong><\/span> \u3068\u3044\u3046 class \u3092\u8a2d\u5b9a\u3057\u305f\u300d\u3068\u3044\u3046\u610f\u5473\u5408\u3044\u306b\u306a\u308a\u307e\u3059\u3002<br><span class=\"has-inline-color has-black-color\">style \u30bf\u30b0\u5185\u3067\u8a2d\u5b9a\u3059\u308b<\/span><strong><span class=\"has-inline-color has-vivid-red-color\"> {}<\/span><\/strong> \u3067\u62ec\u3063\u305f\u5185\u5bb9\u3092 Style( CSS ) \u306e\u30af\u30e9\u30b9\u5b9a\u7fa9\u3068\u547c\u3073\u3001\u305d\u308c\u3092\u660e\u793a\u7684\u306b HTML \u30bf\u30b0\u5185\u306e p \u30bf\u30b0\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u4fee\u98fe\u3092\u65bd\u3059\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002 <br><br>\u306a\u304a\u3001\u8a2d\u5b9a\u3067\u304d\u308b style \u306f\u975e\u5e38\u306b\u591a\u5c90\u306b\u308f\u305f\u308b\u305f\u3081\u3053\u308c\u4ee5\u4e0a\u306e\u7d39\u4ecb\u306f\u5272\u611b\u3057\u307e\u3059\u3002<br><br>\u4f8b\u3048\u3070\u67a0\u7dda\u3092\u3064\u3051\u305f\u3044\u5834\u5408\u300cCSS \u67a0\u7dda\u300d\u3068\u3044\u3063\u305f\u30ad\u30fc\u30ef\u30fc\u30c9\u3067\u691c\u7d22\u3059\u308b\u3068\u6709\u7528\u306a\u60c5\u5831\u30b5\u30a4\u30c8\u304c\u51fa\u3066\u304f\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u3001\u8ffd\u52a0\u3057\u305f\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u9069\u5b9c\u691c\u7d22\u3057\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h2 id=\"outline__5\" class=\"wp-block-heading\">JavaScript \u3092\u8a2d\u5b9a\u3059\u308b<\/h2>\n\n\n\n<p>\u3055\u3066\u3001\u3044\u3088\u3044\u3088 JavaScript \u306e\u8a2d\u5b9a\u3067\u3059\u306d\u3002<br>Web \u30da\u30fc\u30b8\u306b\u304a\u3051\u308b JavaScript \u306e\u4f7f\u7528\u65b9\u6cd5\u306f\uff12\u30d1\u30bf\u30fc\u30f3\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>HTML \u30bf\u30b0\u5185\u306e\u8981\u7d20\u306b\u5bfe\u3057\u3066\u306e\u5909\u66f4\u9069\u7528\u3001\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u5b9f\u88c5<\/li>\n\n\n\n<li>\u76ee\u306b\u898b\u3048\u306a\u3044\u5834\u6240\u3067\u52d5\u4f5c\u3059\u308b\u51e6\u7406\u306e\u5b9f\u88c5<\/li>\n<\/ol>\n\n\n\n<p>\u3069\u3061\u3089\u306e\u30d1\u30bf\u30fc\u30f3\u3082\u899a\u3048\u308b\u5fc5\u8981\u304c\u3042\u308b\u305f\u3081\u3001\u3072\u3068\u3064\u305a\u3064\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__5_1\" class=\"wp-block-heading\">\u305d\u306e\uff11\u3001\u8981\u7d20\u306e\u5909\u66f4\u3068\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<p>\u307e\u305a\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b <strong><span class=\"has-inline-color has-vivid-red-color\">div<\/span><\/strong> \u30bf\u30b0\u3078 <span class=\"has-inline-color has-vivid-red-color\"><strong>id<\/strong><\/span> \u5c5e\u6027\u306e\u8ffd\u52a0\u3068\u3001\u5f8c\u307b\u3069\u4f7f\u7528\u3059\u308b <span class=\"has-inline-color has-vivid-red-color\"><strong>button<\/strong><\/span> \u30bf\u30b0\u3092\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;h1&gt;Hello World&lt;\/h1&gt;\n\n        &lt;p class=\"deco\"&gt;this is a p&lt;\/p&gt;\n\n        &lt;!-- \u2193\u2193\u2193 id=\"text\" \u3092\u8ffd\u52a0 \u2193\u2193\u2193 --&gt;\n        &lt;div id=\"text\" &gt;this is a div&lt;\/div&gt;\n\n        &lt;!-- \u2193\u2193\u2193 button \u30bf\u30b0\u3092\u8ffd\u52a0 \u2193\u2193\u2193 --&gt;\n        &lt;button&gt;\u30dc\u30bf\u30f3&lt;\/button&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n    p.deco {\n        color: red;\n    }\n&lt;\/style&gt;\n\n&lt;script&gt;\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>\u5909\u66f4\u3092\u9069\u7528\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u304c\u8868\u793a\u3067\u304d\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/web-img.rensa.jp.net\/rensa\/images\/techmania\/post202104141221\/img03.png\" class=\"post-img\" style=\"border: 3px solid black;\">\n\n\n\n<p>\u305d\u308c\u3067\u306f\u3053\u3053\u304b\u3089\u304c\u672c\u984c\u3002<br><span class=\"has-inline-color has-black-color\"><strong>id<\/strong> \u3092\u8a2d\u5b9a\u3057\u305f <strong>div<\/strong> <\/span>\u8981\u7d20\u306e <span class=\"has-inline-color has-vivid-red-color\"><strong><em>\u30c6\u30ad\u30b9\u30c8\u306e\u5909\u66f4\u51e6\u7406<\/em><\/strong><\/span> \u3068\u3001<em><strong><span class=\"has-inline-color has-vivid-red-color\">\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u6642\u306b\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u3092\u8868\u793a\u3059\u308b\u51e6\u7406<\/span><\/strong><\/em>\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br>\u6700\u4e0b\u90e8\u306e <strong><span class=\"has-inline-color has-vivid-red-color\">script<\/span><\/strong> \u30bf\u30b0\u306b\u4ee5\u4e0b\u306e\u4f8b\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<br>\u307e\u305f\u3001\u540c\u6642\u306b <strong><span class=\"has-inline-color has-vivid-red-color\">HTML<\/span><\/strong> \u3067\u5148\u307b\u3069\u8ffd\u52a0\u3057\u305f <strong><span class=\"has-inline-color has-vivid-red-color\">button<\/span><\/strong> \u30bf\u30b0\u306b <span class=\"has-inline-color has-vivid-red-color\"><strong>onclick<\/strong><\/span> \u5c5e\u6027\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;h1&gt;Hello World&lt;\/h1&gt;\n\n        &lt;p class=\"deco\"&gt;this is a p&lt;\/p&gt;\n        &lt;div id=\"text\" &gt;this is a div&lt;\/div&gt;\n\n        &lt;!-- \/\/\u2193\u2193\u2193 onclick=\"buttonClickAction()\" \u3092\u8ffd\u52a0\u3002 onclick \u306b\u66f8\u304b\u308c\u305f\u95a2\u6570\u540d\u3092\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u306f\u81ea\u52d5\u3067\u63a2\u3057\u51fa\u3057\u3001\u5b9f\u884c\u3057\u3066\u304f\u308c\u307e\u3059\u3002 \u2193\u2193\u2193 --&gt;\n        &lt;button onclick=\"buttonClickAction()\"&gt;\u30dc\u30bf\u30f3&lt;\/button&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n    p.deco {\n        color: red;\n    }\n&lt;\/style&gt;\n\n&lt;script&gt;\n\n    \/* \u2193\u2193\u2193 \u8ffd\u52a0 \u2193\u2193\u2193 *\/\n    let textElement = $(\"#text\"); \/\/ id \u304c text \u306e\u8981\u7d20\u3092\u53d6\u5f97\u3057\u3001\u5909\u6570\u306b\u4fdd\u5b58\u3059\u308b\u3002\n    textElement.html( \"Changed div text\" ); \/\/ \u53d6\u5f97\u3057\u305f element \u306e\u672c\u6587\u30c6\u30ad\u30b9\u30c8\u3092\u66f4\u65b0\u3002\n\n    \/\/ \u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\u53c2\u7167\u3059\u308b\u95a2\u6570(\u51e6\u7406)\u306e\u5b9a\u7fa9\n    function buttonClickAction() {\n        \/\/ {} \u306e\u4e2d\u306f\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u6642\u306b\u51e6\u7406\u3055\u308c\u308b\u5185\u5bb9\n        alert(\"button clicked\"); \n    }\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u8868\u793a\u7d50\u679c\u304c\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u5316\u3057\u305f\u304b\u3068\u601d\u3044\u307e\u3059\u3002<br><strong><span class=\"has-inline-color has-vivid-red-color\">div<\/span><\/strong> \u30bf\u30b0\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u305f\u6587\u7ae0\u304c\u300c<span class=\"has-inline-color has-vivid-cyan-blue-color\">Changed div text<\/span>\u300d\u306b\u7f6e\u304d\u63db\u308f\u3063\u3066\u3044\u307e\u3059\u306d\u3002<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/web-img.rensa.jp.net\/rensa\/images\/techmania\/post202104141221\/img04.png\" class=\"post-img\" style=\"border: 3px solid black;\">\n\n\n\n<p>\u6b21\u306f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br>\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u4ee5\u4e0b\u306e\u753b\u50cf\u306e\u3088\u3046\u306a\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u304c\u8868\u793a\u3055\u308c\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/web-img.rensa.jp.net\/rensa\/images\/techmania\/post202104141221\/img05.png\" class=\"post-img\" style=\"border: 3px solid black;\">\n\n\n\n<p>\u8981\u7d20\u3078\u306e\u5909\u66f4\u9069\u7528\u3084\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u5834\u5408\u306e\u51e6\u7406\u5b9f\u884c\u306f\u3053\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3067\u5b9f\u73fe\u304c\u53ef\u80fd\u3067\u3059\u3002<br>\u89e3\u8aac\u306f\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u90e8\u5206\u306b\u30b3\u30e1\u30f3\u30c8\u3067\u66f8\u3044\u3066\u304a\u308a\u307e\u3059\u305f\u3081\u3001\u8aad\u3093\u3067\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h3 id=\"outline__5_2\" class=\"wp-block-heading\">\u305d\u306e\uff12\u3001\u76ee\u306b\u898b\u3048\u306a\u3044\u5834\u6240\u3067\u52d5\u4f5c\u3059\u308b\u51e6\u7406\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<p>\u3055\u3066\u3001\u30b7\u30f3\u30d7\u30eb\u306b\u8868\u793a\u6587\u5b57\u306e\u5909\u66f4\u3084\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u51e6\u7406\u306f\u5b9f\u88c5\u3067\u304d\u307e\u3057\u305f\u3002<br>\u3067\u3059\u304c\u3053\u3053\u307e\u3067\u306e\u5185\u5bb9\u306f\u300c\u6c7a\u3081\u3089\u308c\u305f\u5909\u66f4\u3092\u9069\u7528\u3059\u308b\u300d\u3060\u3051\u306e\u51e6\u7406\u3067\u3042\u308a\u3001\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u304b\u3068\u8a00\u308f\u308c\u308b\u3068\u5fae\u5999\u3067\u3059\u3002<br><br>\u5c11\u3057\u3060\u3051\u96e3\u6613\u5ea6\u306f\u4e0a\u304c\u308a\u307e\u3059\u304c\u3001\u3082\u3046\u5c11\u3057\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u5bc4\u308a\u306e\u5909\u66f4\u3092\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br><strong><span class=\"has-inline-color has-vivid-red-color\">\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u5ea6\u306b div \u30bf\u30b0\u3067\u8868\u793a\u3057\u3066\u3044\u305f\u6587\u5b57\u90e8\u5206\u306b\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u56de\u6570\u3092\u8868\u793a\u3059\u308b<\/span><\/strong>\u51e6\u7406\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br><br>\u305d\u308c\u3067\u306f\u65e9\u901f\u3001\u5909\u66f4\u5185\u5bb9\u3092\u307f\u3066\u304f\u3060\u3055\u3044\u3002<br><strong><span class=\"has-inline-color has-vivid-red-color\">script<\/span><\/strong> \u30bf\u30b0\u306e\u4e2d\u8eab\u3060\u3051\u5909\u66f4\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;h1&gt;Hello World&lt;\/h1&gt;\n\n        &lt;p class=\"deco\"&gt;this is a p&lt;\/p&gt;\n        &lt;div id=\"text\" &gt;this is a div&lt;\/div&gt;\n        &lt;button onclick=\"buttonClickAction()\"&gt;\u30dc\u30bf\u30f3&lt;\/button&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n    p.deco {\n        color: red;\n    }\n&lt;\/style&gt;\n\n&lt;!-- \u4eca\u56de\u306f script \u30bf\u30b0\u306e\u4e2d\u8eab\u3060\u3051\u5909\u66f4\u3057\u3066\u3044\u307e\u3059 --&gt;\n&lt;script&gt;\n\n    let buttonCount = 0; \/\/ \u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u56de\u6570\u3092\u4fdd\u5b58\u3059\u308b\u5909\u6570\u3092\u5ba3\u8a00\n    let textElement = $(\"#text\"); \/\/ id \u304c text \u306e\u8981\u7d20\u3092\u53d6\u5f97\u3057\u3001\u5909\u6570\u306b\u4fdd\u5b58\u3059\u308b\u3002\n    textElement.html( buttonCount ); \/\/ \u53d6\u5f97\u3057\u305f element \u306e\u672c\u6587\u30c6\u30ad\u30b9\u30c8\u3092\u66f4\u65b0\u3002\n    \n    \/\/ \u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\u53c2\u7167\u3059\u308b\u95a2\u6570(\u51e6\u7406)\u306e\u5b9a\u7fa9\n    function buttonClickAction() {\n        \/\/ {} \u306e\u4e2d\u306f\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u6642\u306b\u51e6\u7406\u3055\u308c\u308b\u5185\u5bb9\n\n        buttonCount += 1; \/\/ \u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u56de\u6570\u3092\u30d7\u30e9\u30b9\uff11\u3059\u308b\u3002\n        textElement.html( buttonCount ); \/\/ \u5909\u6570 element \u306e\u672c\u6587\u30c6\u30ad\u30b9\u30c8\u3092\u66f4\u65b0\u3002\n    }\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u306b\u4f55\u304b\u306e\u60c5\u5831\u3092\u8a18\u61b6\u3055\u305b\u308b\u306b\u306f <strong><span class=\"has-inline-color has-vivid-red-color\">\u5909\u6570<\/span><\/strong> \u3068\u547c\u3070\u308c\u308b\u30c7\u30fc\u30bf\u3092\u751f\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br>\u5909\u6570\u3068\u306f\u4f55\u306e\u60c5\u5831\u3092\u6301\u305f\u305b\u308b\u304b\u306f\u4eba\u305d\u308c\u305e\u308c\u3001\u66f8\u3044\u305f\u308a\u6d88\u3057\u305f\u308a\u3067\u304d\u308b\u30db\u30ef\u30a4\u30c8\u30dc\u30fc\u30c9\u306e\u3088\u3046\u306a\u3082\u306e\u3060\u3068\u601d\u3063\u3066\u304f\u3060\u3055\u3044\u3002<br><br>\u4f8b\u3048\u3070\u6708\u3042\u305f\u308a\u306e\u53ce\u652f\u306e\u5408\u8a08\u6570\u5024\u3092\u30e1\u30e2\u3057\u3066\u304a\u304f\u3068\u3057\u305f\u5834\u5408\u3001\u8a08\u7b97\u7d50\u679c\u3092\u90fd\u5ea6\u66f8\u304d\u51fa\u3057\u307e\u3059\u3088\u306d\u3002<br>\u5909\u6570\u3068\u3044\u3046\u306e\u306f\u305d\u306e\u8a08\u7b97\u7d50\u679c\u3092\u4e00\u6642\u7684\u306b\u4fdd\u5b58\u3059\u308b\u5834\u6240\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4eca\u56de\u306e\u4f8b\u3067\u8a00\u3048\u3070\u3001\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u56de\u6570\u3092\u30e1\u30e2\u3057\u3066\u304a\u304f\u305f\u3081\u306e\u30db\u30ef\u30a4\u30c8\u30dc\u30fc\u30c9\u3092 24 \u884c\u76ee\u3067\u7528\u610f\u3057\u3066\u304a\u308a\u3001\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u308b\u305f\u3073\u306b 32 \u884c\u76ee\u3067\u52a0\u7b97\u3057\u3066\u3044\u308b\u308f\u3051\u3067\u3059\u306d\u3002<br><br><span class=\"has-inline-color has-black-color\">\u3053\u306e\u3088\u3046\u306b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306f\u5909\u6570\u3092\u7528\u610f\u3057\u3066\u73fe\u5728\u306e\u5024\u3084\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u4fdd\u5b58\u3001\u6d3b\u7528\u3057\u3066\u3044\u304f\u306e\u304c\u57fa\u672c\u3068\u306a\u308a\u307e\u3059\u3002<\/span><br><br><br><br><br><br><br>\u7c21\u5358\u306a\u8aac\u660e\u3068\u6f14\u7fd2\u3067\u306f\u3054\u3056\u3044\u307e\u3059\u304c\u3001\u4ee5\u4e0a\u3068\u306a\u308a\u307e\u3059\u3002<br>\u4eca\u56de\u306e\u8a18\u4e8b\u306f\u3044\u304b\u304c\u3060\u3063\u305f\u3067\u3057\u3087\u3046\u304b\u3002<br><br>\u4eca\u5f8c\u306f\u30b5\u30fc\u30d0\u69cb\u7bc9\u3084\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u8a00\u8a9e\u306e\u5c0e\u5165\u3001\u4e16\u754c\u306b\u5411\u3051\u3066\u516c\u958b\u3059\u308b\u624b\u9806\u7b49\u3082\u4f5c\u6210\u3057\u3066\u3044\u3051\u305f\u3089\u3068\u601d\u3044\u307e\u3059\u3002<br>\u697d\u3057\u307f\u306b\u304a\u5f85\u3061\u304f\u3060\u3055\u3044\u3002<br><br>\u3067\u306f\u3067\u306f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"\u524d\u56de\u306e\u8a18\u4e8b\u304b\u3089\u306e\u7d9a\u304d\u3068\u306a\u308a\u307e\u3059\u3002\u4eca\u56de\u306f JavaScript \u3092\u7528\u3044\u305f\u7c21\u5358\u306a\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u57fa\u790e\u89e3\u8aac\u3092\u884c\u3044\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u306e\u5bfe\u8c61\u8005 \u6240\u8981\u6642\u9593 10 \u5206\u7a0b \u4e8b\u524d\u6e96\u5099 \u307e\u305a\u306f\u4ee5\u4e0b\u306e html \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308a\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3057\u307e\u3057\u3087\u3046\u3002\u524d\u56de\u8a18\u4e8b\u306e\u6700\u5f8c\u3067\u4f5c\u6210\u3057\u305f\u3082\u306e\u3068\u540c\u4e00\u3067\u3059\u304c\u3001script \u30bf\u30b0\u5185\u306e alert(&#8220;Hello JavaScript&#8221;); \u3060\u3051\u524a\u9664\u3057\u3066\u3044\u307e\u3059\u3002 \u307e\u305a [&hellip;]","protected":false},"author":2,"featured_media":608,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[21,20,19,17],"class_list":["post-606","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-beginner","tag-css","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/posts\/606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/comments?post=606"}],"version-history":[{"count":100,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/posts\/606\/revisions"}],"predecessor-version":[{"id":5247,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/posts\/606\/revisions\/5247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/media\/608"}],"wp:attachment":[{"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/media?parent=606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/categories?post=606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/tags?post=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}