{"id":5394,"date":"2025-09-25T13:52:28","date_gmt":"2025-09-25T06:52:28","guid":{"rendered":"https:\/\/siammakemoney.com\/?p=5394"},"modified":"2026-01-30T17:35:20","modified_gmt":"2026-01-30T10:35:20","slug":"code-html-css-js","status":"publish","type":"post","link":"https:\/\/siammakemoney.com\/ja\/code-html-css-js\/","title":{"rendered":"\u57fa\u672c\u7684\u306a HTML CSS JS \u30b3\u30fc\u30c9\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-color has-link-color wp-elements-b811a28942ca2757d0d4f299fd4594c6\" style=\"color:#0c3237\">\u57fa\u672c\u7684\u306a HTML CSS JS \u30b3\u30fc\u30c9\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059<\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-a375b967830d5f566e720aaf520c1dd9\">\u30c6\u30ad\u30b9\u30c8\u3068\u7c21\u5358\u306a\u5199\u771f\u3067\u30ea\u30f3\u30af\u3057\u307e\u3059<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-767f52782f39e0b3c47c611b337d606b\">\u30e1\u30c3\u30bb\u30fc\u30b8\u306b\u30ea\u30f3\u30af\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-50200cfd227cffefe741b68107661577\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;p&gt;\n  Visit my website:\n  &lt;a href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n    SiamMakeMoney\n  &lt;\/a&gt;\n&lt;\/p&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-75adf87f1edfd1785f973fcef4d6723d\">\u5199\u771f\u306b\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-63527b0e77ae93fe577833ed05cd1694\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;a href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n  &lt;img src=\"https:\/\/via.placeholder.com\/300x200\" alt=\"SiamMakeMoney\"&gt;\n&lt;\/a&gt;\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u666e\u901a\u306e\u5199\u771f<\/h2>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-2beab887686d068e39024df708e1f59e\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;img src=\"https:\/\/via.placeholder.com\/300x200\" alt=\"Sample Image\"&gt;<\/code><\/pre>\n\n\n<style scoped>.gc-numhead{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:30px}@media only screen and (min-width:480px){.gc-numhead{flex-wrap:nowrap}}.gc-numhead__title{margin:0!important}.gc-numhead__sub{line-height:20px;margin-top:5px;opacity:.5}.gc-numhead__circle{border:3px solid #111;border-radius:50%;box-sizing:content-box;display:inline-block;font-size:23px;font-weight:700;height:40px;line-height:40px;margin-right:19px;min-width:40px;text-align:center;width:40px}.gc-numhead__position{color:#d3d3d3;font-size:70px;font-weight:700;line-height:1;margin-right:19px}.gc-numhead__position span{line-height:.78}.gc-numhead__position span:after{content:\".\"}.gc-numhead__logo{margin-left:auto;margin-top:18px;width:100%}@media only screen and (min-width:480px){.gc-numhead__logo{margin-top:0;width:auto}}.gc-numhead__logo img{max-height:60px;width:auto!important}.gc-numhead__logo-cont{display:inline-block;max-height:60px;max-width:150px}.gc-numhead__mcenter{display:block;text-align:center}@media only screen and (min-width:480px){.gc-numhead__mcenter{display:flex;text-align:inherit}}.gc-numhead__mcenter .gc-numhead__circle{margin-bottom:15px;margin-right:0}@media only screen and (min-width:480px){.gc-numhead__mcenter .gc-numhead__circle{margin-bottom:0;margin-right:19px}}.gc-numhead__mcenter .gc-numhead__position{margin-bottom:15px;margin-right:0}@media only screen and (min-width:480px){.gc-numhead__mcenter .gc-numhead__position{margin-bottom:0;margin-right:19px}}<\/style><div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead090e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>1<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#10a399\">\u7b87\u6761\u66f8\u304d\u306e\u30b3\u30fc\u30c9\u4f8b (\u30c9\u30c3\u30c8 \u30ea\u30b9\u30c8)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><br>\u3053\u308c\u306f\u3001\u30ea\u30b9\u30c8\u306b\u30b5\u30d6\u30ea\u30b9\u30c8\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b HTML \u30bf\u30b0\u3067\u3059\u3002 (\u30c9\u30c3\u30c8 \u30ea\u30b9\u30c8) \u307e\u305f\u306f (\u756a\u53f7\u30ea\u30b9\u30c8\u306e\u30ea\u30b9\u30c8) \u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u305d\u3057\u3066\u306f\u3063\u304d\u308a\u3068\u7406\u89e3\u3067\u304d\u307e\u3059<\/div><\/div><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"516\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot.webp\" alt=\"\" class=\"wp-image-6036\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot.webp 732w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-300x211.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-18x12.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-400x282.webp 400w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-8713bff98c6ffac55c14922eb51d4f22\" style=\"border-style:none;border-width:0px\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Section box *\/\n.list-box {\n  max-width: 600px;\n  background: #fff;\n  padding: 25px 30px;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n  margin-bottom: 30px;\n}\n\nh2 {\n  color: #333;\n}\n\n\/* Unordered list *\/\nul.custom-ul {\n  list-style: none;\n  padding-left: 0;\n}\n\nul.custom-ul li {\n  padding-left: 28px;\n  margin-bottom: 12px;\n  position: relative;\n}\n\nul.custom-ul li::before {\n  content: \"\u2714\";\n  position: absolute;\n  left: 0;\n  color: #4a6cff;\n  font-weight: bold;\n}\n\n\/* Ordered list *\/\nol.custom-ol {\n  counter-reset: item;\n  list-style: none;\n  padding-left: 0;\n}\n\nol.custom-ol li {\n  counter-increment: item;\n  margin-bottom: 12px;\n  padding-left: 30px;\n  position: relative;\n}\n\nol.custom-ol li::before {\n  content: counter(item);\n  position: absolute;\n  left: 0;\n  background: #4a6cff;\n  color: #fff;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  text-align: center;\n  line-height: 22px;\n  font-size: 13px;\n}\n&lt;\/style&gt;\n\n\n&lt;div class=\"list-box\"&gt;\n  &lt;h2&gt;Unordered List (Bullet)&lt;\/h2&gt;\n  &lt;ul class=\"custom-ul\"&gt;\n    &lt;li&gt;Learn HTML basics&lt;\/li&gt;\n    &lt;li&gt;Style pages with CSS&lt;\/li&gt;\n    &lt;li&gt;Make websites interactive with JavaScript&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"list-box\"&gt;\n  &lt;h2&gt;Ordered List (Numbered)&lt;\/h2&gt;\n  &lt;ol class=\"custom-ol\"&gt;\n    &lt;li&gt;Plan your website structure&lt;\/li&gt;\n    &lt;li&gt;Design the layout and style&lt;\/li&gt;\n    &lt;li&gt;Publish and improve continuously&lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/div&gt;\n\n<\/code><\/pre>\n\n\n<style scoped>\n            .gc-box{margin-bottom:30px;padding:20px;border-left:5px solid transparent;line-height:24px}.gc-box .label-info{background-color:#5bc0de;display:inline-block;margin:0 5px 10px 0;padding:3px 6px;font-size:75%;font-weight:700;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;line-height:14px}.gc-box.green_type{color:#3c763d;background-color:#dff0d8;border-color:#cae6be}.gc-box.blue_type{color:#31708f;background-color:#d9edf7;border-color:#bcdff1}.gc-box.red_type{color:#a94442;background-color:#f2dede;border-color:#e8c4c4}.gc-box.grey_type{background:#ddd;border-color:#ccc;color:#444}.gc-box.info_type{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.gc-box.info_type svg{fill:#30a030}.gc-box.download_type{color:#004085;background-color:#cce5ff;border-color:#b8daff}.gc-box.download_type svg{fill:#3a9aff}.gc-box.update_type{color:#004458;background-color:#d9edf7;border:1px solid #bce8f1}.gc-box.notice_type{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.gc-box.notice_type svg{fill:#f7a000}.gc-box.error_type{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.gc-box.error_type svg{fill:#c70000}.gc-box.border_type{border:2px solid #ddd}.gc-box.icon_type{display:flex}.gc-box.icon_type .gc-box-icon{width:28px}.gc-box.icon_type .gc-box-text{flex-grow:1;margin:0 15px}.gc-box-text > *{margin-bottom: 20px;}\n        .gc-box-text > *:last-child{margin-bottom:0}        \n        <\/style><div class=\"gc-box notice_type icon_type\" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><svg x=\"0px\" y=\"0px\" viewbox=\"0 0 486.463 486.463\" > <g> <g> <path d=\"M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z\"\/> <path d=\"M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8 c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z\"\/> <path d=\"M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z\"\/> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading\" style=\"font-size:25px\">CSS \u30b3\u30fc\u30c9\u306e\u524a\u9664\u30dd\u30a4\u30f3\u30c8 <code>&lt;li&gt;<\/code> \u5f3e\u4e38<\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-45844484e48bbc7ee1d499a6c0cbaf91\" style=\"font-size:20px\">\u3059\u3079\u3066\u306e\u7b87\u6761\u66f8\u304d\u3092\u524a\u9664\u3057\u307e\u3059 <code>&lt;ul&gt;<\/code> \u305d\u3057\u3066 <code>&lt;ol&gt;<\/code> \u3069\u3053\u3067\u3082\u69cb\u3044\u307e\u305b\u3093<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-c4b5f2d9a6fad49062aba6419f743610\" style=\"border-style:none;border-width:0px\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>ul, ol {\n  list-style: none !important;\n  padding-left: 0 !important;\n  margin-left: 0 !important;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-770e044898238e85bdf58fe560daf7f3\" style=\"font-size:20px\">Bullet \u3092\u7591\u4f3c\u8981\u7d20\u304b\u3089\u524a\u9664\u3057\u307e\u3059<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-9c50b371256024dadd0ba2f01c9b8a7e\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>li::before {\n  content: none !important;\n}<\/code><\/pre>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead2583\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>2<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#10a399\">\u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u30a2\u30a4\u30b3\u30f3\u306f\u3001\u6700\u521d\u306e\u30da\u30fc\u30b8\u3067\u306f\u306a\u304f\u5bb6\u306a\u3069\u3001\u610f\u5473\u3084\u6a5f\u80fd\u3092\u8868\u3059\u5c0f\u3055\u306a\u753b\u50cf\u3067\u3059\u3002 \u62e1\u5927\u93e1\u306e\u753b\u50cf\u3092\u691c\u7d22\u3059\u308b\u4ee3\u308f\u308a\u306b\u3001\u307e\u305f\u306f\u524a\u9664\u306e\u4ee3\u308f\u308a\u306b\u30b4\u30df\u7bb1\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u3001\u591a\u304f\u306e\u6587\u5b57\u3092\u8aad\u3080\u5fc5\u8981\u306a\u304f\u3001Web \u3084\u30a2\u30d7\u30ea\u304c\u4f1d\u3048\u305f\u3044\u3053\u3068\u3092\u3059\u3050\u306b\u7406\u89e3\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u4f7f\u3044\u3084\u3059\u304f\u3001\u30e2\u30c0\u30f3\u306b\u898b\u3048\u3001\u3059\u3070\u3084\u304f\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u304d\u307e\u3059\u3002<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-fb0a2eac9dd9798fe60eee3b644d9657\" style=\"font-size:25px\">2.1 \u7c21\u5358\u306a 20\u00d720 \u30d4\u30af\u30bb\u30eb\u306e\u753b\u50cf\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-6530248047e7b151c7c6b1fb18bc49b0\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;img src=\"https:\/\/example.com\/icon.png\" alt=\"icon\" width=\"20\" height=\"20\"&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead426e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>3<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u30d5\u30a9\u30f3\u30c8\u3059\u3054\u3044\u30a2\u30a4\u30b3\u30f3<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Font Awesome \u30a2\u30a4\u30b3\u30f3\u306f\u3001Web \u30b5\u30a4\u30c8\u3067\u4f7f\u7528\u3055\u308c\u308b\u65e2\u88fd\u306e\u30a2\u30a4\u30b3\u30f3\u306e\u30bb\u30c3\u30c8\u3067\u3059\u3002 \u6587\u5b57\u307e\u305f\u306f\u30d9\u30af\u30c8\u30eb\u306e\u5f62\u3067\u63d0\u4f9b\u3055\u308c\u307e\u3059\u3002 \u30d5\u30a9\u30f3\u30c8\u306e\u8abf\u6574\u306a\u3069\u3001\u30b5\u30a4\u30ba\u3001\u8272\u3001\u30d1\u30bf\u30fc\u30f3\u3092\u7c21\u5358\u306b\u8abf\u6574\u3067\u304d\u307e\u3059\u3002 \u30db\u30fc\u30e0 \u30a2\u30a4\u30b3\u30f3\u3001\u96fb\u8a71\u3001\u30e1\u30fc\u30eb\u3001\u30bd\u30fc\u30b7\u30e3\u30eb \u30e1\u30c7\u30a3\u30a2\u306a\u3069\u306e\u8a18\u53f7\u306e\u4ee3\u308f\u308a\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002 \u8907\u6570\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u305b\u305a\u306b\u3001Web \u30b5\u30a4\u30c8\u3092\u7f8e\u3057\u304f\u30e2\u30c0\u30f3\u306b\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/div><\/div><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"405\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1024x405.webp\" alt=\"\" class=\"wp-image-6027\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1024x405.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-300x119.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-768x304.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1536x607.webp 1536w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-18x7.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-400x158.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-800x316.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-832x329.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1664x658.webp 1664w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1248x493.webp 1248w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon.webp 2004w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-efc57c181c9c30496effd82d139032fc\" style=\"font-size:25px\">3.1 \u3059\u3070\u3089\u3057\u3044 CDN \u30d5\u30a9\u30f3\u30c8\u3092\u8ffd\u52a0\u3059\u308b (\u307e\u3060\u3067\u306a\u3044\u5834\u5408)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-0d131670acc49fbb35bb2c7b02dc97e3\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;head&gt;\n  &lt;!-- Font Awesome CDN --&gt;\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-ebf410f16baa182aa355893340da6bd5\" style=\"font-size:25px\">3.2 \u30a2\u30a4\u30b3\u30f3\u3092\u633f\u5165\u3057\u3066\u30b5\u30a4\u30ba\u5909\u66f4\u3057\u307e\u3059<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-1de3b5a75ca4b7c8b3fc066f91c8d8f6\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>\n&lt;i class=\"fa-solid fa-house\" style=\"font-size:20px;\"&gt;&lt;\/i&gt;\n\n&lt;i class=\"fa-solid fa-star\" style=\"font-size:20px;\"&gt;&lt;\/i&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-9e6d002dcb1d0dace3520e2a83ec95f1\" style=\"font-size:25px\">3.3 (\u5225\u306e CSS \u304c\u5fc5\u8981\u306a\u5834\u5408)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-a1a28e39adb1eb430cc73362bfb399e0\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.icon-small {\n  font-size: 20px;\n  color: #000; \n}\n&lt;\/style&gt;\n\n&lt;i class=\"fa-solid fa-heart icon-small\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead240e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>4<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">iframe \u306f\u5225\u306e Web \u30da\u30fc\u30b8\u3092\u57cb\u3081\u8fbc\u307f\u307e\u3059<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">iframe \u306f\u3001YouTube \u30d3\u30c7\u30aa\u3001\u30de\u30c3\u30d7\u3001Google \u30de\u30c3\u30d7\u3001\u307e\u305f\u306f\u5916\u90e8 Web \u30b5\u30a4\u30c8\u306a\u3069\u306e Web \u30da\u30fc\u30b8\u306b\u8868\u793a\u3059\u308b Web \u30da\u30fc\u30b8\u307e\u305f\u306f\u4ed6\u306e Web \u30b5\u30a4\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u57cb\u3081\u8fbc\u3080\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b HTML \u306e\u30bf\u30b0\u3067\u3059\u3002 \u5225\u306e Web \u30b5\u30a4\u30c8\u306e\u300c\u5c0f\u3055\u306a\u30a6\u30a3\u30f3\u30c9\u30a6\u300d\u3092\u79c1\u305f\u3061\u306e Web \u30b5\u30a4\u30c8\u306b\u63b2\u8f09\u3059\u308b\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002 \u5185\u90e8\u306e\u5185\u5bb9\u3082\u5143\u306e Web \u30b5\u30a4\u30c8\u304b\u3089\u306e\u3082\u306e\u3067\u3059\u3002 \u305f\u3060\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u305d\u306e Web \u30da\u30fc\u30b8\u3092\u96e2\u308c\u308b\u3053\u3068\u306a\u304f\u3001\u8868\u793a\u3057\u3066\u5bfe\u8a71\u3067\u304d\u307e\u3059\u3002<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-167b651b5126e27136ee3b955a5737ab\" style=\"font-size:25px\">4.1 iframe \u306f Web \u30da\u30fc\u30b8\u3092\u57cb\u3081\u8fbc\u307f\u307e\u3059<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-3b99d783d68e46503064bd2227526660\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;iframe \n  src=\"https:\/\/www.example.com\" \n  width=\"800\" \n  height=\"600\"&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-1e3378980d6076d9e6262afe2b791d7c\" style=\"font-size:25px\">4.2 iframe \u57cb\u3081\u8fbc\u307f YouTube \u30d3\u30c7\u30aa<\/h3>\n\n\n\n<iframe loading=\"lazy\" \n  width=\"1349\" \n  height=\"759\" \n  src=\"https:\/\/www.youtube.com\/embed\/DZIASl9q90s\" \n  frameborder=\"0\" \n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n  allowfullscreen>\n<\/iframe>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f412d5d701357354f05f2b4e805fe408\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;iframe \n  width=\"1349\" \n  height=\"759\" \n  src=\"https:\/\/www.youtube.com\/embed\/DZIASl9q90s\" \n  frameborder=\"0\" \n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n  allowfullscreen&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead76c4\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>5<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u8aac\u660e\u3092\u8868\u793a\u3059\u308b (\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30db\u30fc\u30e0\u753b\u9762\u3092\u90aa\u9b54\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u30c6\u30ad\u30b9\u30c8\u3001\u30a2\u30a4\u30b3\u30f3\u3001\u307e\u305f\u306f\u30dc\u30bf\u30f3\u3092\u30de\u30a6\u30b9\u3092\u5411\u3051\u305f\u308a\u3001\u30bf\u30c3\u30d7\u3057\u305f\u308a\u3059\u308b\u3068\u3001\u8ffd\u52a0\u306e\u8aac\u660e\u3092\u8868\u793a\u3059\u308b\u5c0f\u3055\u306a\u30c6\u30ad\u30b9\u30c8 \u30dc\u30c3\u30af\u30b9\u3067\u3059\u3002 \u610f\u5473\u3084\u4f7f\u3044\u65b9\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u8aac\u660e\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002 \u7c21\u5358\u306a\u30ac\u30a4\u30c9\u3092\u63d0\u4f9b\u3057\u3066\u3001Web \u3084\u30a2\u30d7\u30ea\u3092\u4f7f\u3044\u3084\u3059\u304f\u3001\u3088\u308a\u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u306b\u898b\u305b\u308b\u306e\u306b\u6700\u9069\u3067\u3059\u3002<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-786acdfe787af4679552bfc6a678900a\" style=\"font-size:25px\">5.1 \u57fa\u672c\u7684\u306a\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-8d641a6ecd812cb1847eaea0cd0eba0e\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.tooltip {\n  position: relative;\n  cursor: pointer;\n  color: #6a5acd;\n  font-weight: bold;\n}\n\n.tooltip::after {\n  content: attr(data-text);\n  position: absolute;\n  bottom: 140%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #333;\n  color: #fff;\n  padding: 8px 12px;\n  border-radius: 8px;\n  white-space: nowrap;\n  opacity: 0;\n  pointer-events: none;\n  transition: 0.3s;\n}\n\n.tooltip::before {\n  content: \"\";\n  position: absolute;\n  bottom: 120%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #333;\n  opacity: 0;\n  transition: 0.3s;\n}\n\n.tooltip:hover::after,\n.tooltip:hover::before {\n  opacity: 1;\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  Hover over &lt;span class=\"tooltip\" data-text=\"HTML defines the structure of a web page\"&gt;HTML&lt;\/span&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-e8881a9309d5e49a1af04071914ed456\" style=\"font-size:25px\">5.2 \u30c4\u30fc\u30eb\u30c1\u30c3\u30d7 \u30d5\u30a7\u30fc\u30c9 + \u30b9\u30e9\u30a4\u30c9 \u30d7\u30ec\u30df\u30a2\u30e0 \u30d3\u30e5\u30fc<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-32eadd517c5b65910ec3a432a6557092\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.tooltip-box {\n  position: relative;\n  display: inline-block;\n  color: #009688;\n  cursor: pointer;\n}\n\n.tooltip-box .tooltip-text {\n  position: absolute;\n  bottom: 130%;\n  left: 50%;\n  transform: translateX(-50%) translateY(10px);\n  background-color: #009688;\n  color: #fff;\n  padding: 8px 14px;\n  border-radius: 20px;\n  opacity: 0;\n  white-space: nowrap;\n  transition: all 0.3s ease;\n}\n\n.tooltip-box:hover .tooltip-text {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  Hover over \n  &lt;span class=\"tooltip-box\"&gt;\n    CSS\n    &lt;span class=\"tooltip-text\"&gt;CSS styles the website&lt;\/span&gt;\n  &lt;\/span&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-c24b0ec93269f50d664a891f68cbe6a5\" style=\"font-size:25px\">5.3 \u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306f\u3001\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-179aa18ce73793954316672bb3d86b3f\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.click-tooltip {\n  position: relative;\n  display: inline-block;\n  color: #e91e63;\n  cursor: pointer;\n}\n\n.click-tooltip .tooltip-content {\n  display: none;\n  position: absolute;\n  top: 120%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #e91e63;\n  color: #fff;\n  padding: 10px;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  &lt;span class=\"click-tooltip\" onclick=\"toggleTooltip(this)\"&gt;\n    JavaScript\n    &lt;span class=\"tooltip-content\"&gt;JavaScript makes websites interactive&lt;\/span&gt;\n  &lt;\/span&gt;\n&lt;\/p&gt;\n\n&lt;script&gt;\nfunction toggleTooltip(element) {\n  const tooltip = element.querySelector(\".tooltip-content\");\n  tooltip.style.display = tooltip.style.display === \"block\" ? \"none\" : \"block\";\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadfba6\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>6<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 \u30ab\u30fc\u30c9 \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 \u30ab\u30fc\u30c9\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 \u30ab\u30fc\u30c9\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002 \u3053\u308c\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30dc\u30bf\u30f3\u3001\u30c6\u30ad\u30b9\u30c8\u3001\u307e\u305f\u306f\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u753b\u9762\u306b\u300c\u30ab\u30fc\u30c9\u300d\u304c\u8868\u793a\u3055\u308c\u3001Web \u30da\u30fc\u30b8\u3092\u5909\u66f4\u305b\u305a\u306b\u3001\u5199\u771f\u3001\u540d\u524d\u3001\u30a2\u30a4\u30b3\u30f3\u3001\u8aac\u660e\u306a\u3069\u306e\u8a73\u7d30\u3092\u8868\u793a\u3059\u308b\u60c5\u5831\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u5f62\u5f0f\u3067\u3059\u3002 \u4fbf\u5229\u306b\u60c5\u5831\u3092\u8868\u793a\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002Web \u306f\u6563\u3089\u304b\u3063\u3066\u3044\u306a\u3044\u3088\u3046\u306b\u898b\u3048\u307e\u3059\u3002 \u305d\u3057\u3066\u3001\u4f7f\u7528\u3092\u30e2\u30c0\u30f3\u3067\u30d7\u30ed\u30d5\u30a7\u30c3\u30b7\u30e7\u30ca\u30eb\u306b\u898b\u305b\u307e\u3059<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-90d7334c6be800ad2f23231d6538a0a5\" style=\"font-size:25px\">6.1 \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 \u30ab\u30fc\u30c9 (HTML + CSS + JS) \u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-1d9b7262c9a3c037011e08855c4c615f\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f4f6f8;\n  text-align: center;\n  padding-top: 100px;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 12px 24px;\n  font-size: 16px;\n  background: #4a6cff;\n  color: #fff;\n  border: none;\n  border-radius: 30px;\n  cursor: pointer;\n}\n\n\/* Overlay *\/\n.overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.popup-card {\n  background: #fff;\n  width: 360px;\n  padding: 30px;\n  border-radius: 16px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 20px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n\n\n&lt;body&gt;\n\n&lt;button class=\"open-btn\" onclick=\"openCard()\"&gt;Click Me&lt;\/button&gt;\n\n&lt;div class=\"overlay\" id=\"overlay\"&gt;\n  &lt;div class=\"popup-card\"&gt;\n    &lt;h2&gt;Hello \ud83d\udc4b&lt;\/h2&gt;\n    &lt;p&gt;This is a popup card shown after clicking.&lt;\/p&gt;\n    &lt;button class=\"close-btn\" onclick=\"closeCard()\"&gt;Close&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openCard() {\n  document.getElementById(\"overlay\").style.display = \"flex\";\n}\n\nfunction closeCard() {\n  document.getElementById(\"overlay\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-fe97618ef2ac43f8bd432493dd5007e9\" style=\"font-size:25px\">6.2 \u5199\u771f\u3001\u30a2\u30a4\u30b3\u30f3\u3001\u8aac\u660e\u3092\u542b\u3080\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 \u30ab\u30fc\u30c9\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-4b02252c0563fdf208b0fc8feed879d4\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Popup Card with Image&lt;\/title&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f2f4f8;\n  text-align: center;\n  padding-top: 100px;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 12px 26px;\n  background: #4a6cff;\n  color: #fff;\n  border: none;\n  border-radius: 30px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n\/* Overlay *\/\n.overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.card {\n  background: #fff;\n  width: 360px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from { transform: scale(0.85); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n\/* Image *\/\n.card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n\/* Content *\/\n.card-content {\n  padding: 24px;\n}\n\n.card-content h2 {\n  margin: 10px 0;\n}\n\n.icon {\n  font-size: 32px;\n  color: #4a6cff;\n}\n\n.description {\n  color: #555;\n  margin-top: 10px;\n  font-size: 15px;\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 20px;\n  padding: 8px 20px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;button class=\"open-btn\" onclick=\"openCard()\"&gt;Show Card&lt;\/button&gt;\n\n&lt;div class=\"overlay\" id=\"overlay\" onclick=\"closeCard()\"&gt;\n  &lt;div class=\"card\" onclick=\"event.stopPropagation()\"&gt;\n\n    &lt;img src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\" alt=\"Image\"&gt;\n\n    &lt;div class=\"card-content\"&gt;\n      &lt;div class=\"icon\"&gt;\n        &lt;i class=\"fa-solid fa-lightbulb\"&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n\n      &lt;h2&gt;SiamMakeMoney&lt;\/h2&gt;\n\n      &lt;p class=\"description\"&gt;\n        Learn digital skills and build online income with practical knowledge.\n      &lt;\/p&gt;\n\n      &lt;button class=\"close-btn\" onclick=\"closeCard()\"&gt;Close&lt;\/button&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openCard() {\n  document.getElementById(\"overlay\").style.display = \"flex\";\n}\n\nfunction closeCard() {\n  document.getElementById(\"overlay\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-a99c6ed2018709a9c635f087ae46c6be\" style=\"font-size:25px\">6.3 \u7f8e\u3057\u3044\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 \u30ab\u30fc\u30c9 + SEO \u30d5\u30ec\u30f3\u30c9\u30ea\u30fc<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-035a3e51e43c3a51f85be6ef989f15e6\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;SiamMakeMoney \u2013 SEO Friendly Popup&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Learn digital skills and build online income with SiamMakeMoney\"&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 60px;\n  text-align: center;\n}\n\n\/* Main content *\/\nh1 {\n  color: #333;\n}\n\np {\n  color: #555;\n  max-width: 600px;\n  margin: 20px auto;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 10px 22px;\n  border-radius: 25px;\n  border: none;\n  background: #4a6cff;\n  color: #fff;\n  cursor: pointer;\n  font-size: 15px;\n}\n\n\/* Overlay *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.popup-card {\n  background: #fff;\n  width: 380px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n\/* Image *\/\n.popup-card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n\/* Content *\/\n.card-content {\n  padding: 24px;\n}\n\n.card-content h2 {\n  margin: 12px 0;\n  color: #333;\n}\n\n.icon {\n  font-size: 30px;\n  color: #4a6cff;\n}\n\n.description {\n  font-size: 15px;\n  color: #555;\n  margin-top: 10px;\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 18px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;main&gt;\n  &lt;!-- SEO main content --&gt;\n  &lt;h1&gt;SiamMakeMoney&lt;\/h1&gt;\n  &lt;p&gt;\n    SiamMakeMoney helps people learn digital skills and build sustainable\n    online income with practical knowledge.\n  &lt;\/p&gt;\n\n  &lt;button class=\"open-btn\" onclick=\"openPopup()\"&gt;Learn More&lt;\/button&gt;\n\n  &lt;!-- Popup (content already in HTML = SEO friendly) --&gt;\n  &lt;section class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n    &lt;article class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n\n      &lt;img src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\" alt=\"Digital learning\"&gt;\n\n      &lt;div class=\"card-content\"&gt;\n        &lt;div class=\"icon\"&gt;\n          &lt;i class=\"fa-solid fa-lightbulb\"&gt;&lt;\/i&gt;\n        &lt;\/div&gt;\n\n        &lt;h2&gt;Digital Knowledge&lt;\/h2&gt;\n\n        &lt;p class=\"description\"&gt;\n          Learn online business, marketing, and digital skills with step-by-step\n          guidance designed for real results.\n        &lt;\/p&gt;\n\n        &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n      &lt;\/div&gt;\n\n    &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n\n&lt;script&gt;\nfunction openPopup() {\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-341849e52864bae4837641281e02cba5\" style=\"font-size:25px\">6.4 \u30c0\u30a4\u30ca\u30df\u30c3\u30af \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 \u30ab\u30fc\u30c9 (\u5358\u4e00\u306e HTML \u30d5\u30a1\u30a4\u30eb)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f4cc34b69257d73b29db6e07c173d73b\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;SiamMakeMoney \u2013 Dynamic Cards&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Learn digital skills and build online income with SiamMakeMoney\"&gt;\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n  text-align: center;\n}\n\n\/* Grid *\/\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 20px;\n  max-width: 900px;\n  margin: 40px auto;\n}\n\n\/* Card item *\/\n.card-item {\n  background: #fff;\n  padding: 20px;\n  border-radius: 16px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n\n.card-item:hover {\n  transform: translateY(-5px);\n}\n\n.card-item i {\n  font-size: 32px;\n  color: #4a6cff;\n}\n\n.card-item h3 {\n  margin-top: 10px;\n  color: #333;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 380px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.popup-card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n.popup-content {\n  padding: 24px;\n}\n\n.popup-content h2 {\n  margin: 10px 0;\n}\n\n.popup-content p {\n  color: #555;\n}\n\n.close-btn {\n  margin-top: 15px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h1&gt;SiamMakeMoney&lt;\/h1&gt;\n&lt;p&gt;Click a card to learn more&lt;\/p&gt;\n\n&lt;!-- Cards --&gt;\n&lt;div class=\"card-grid\" id=\"cardGrid\"&gt;&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;img id=\"popupImage\" src=\"\" alt=\"\"&gt;\n    &lt;div class=\"popup-content\"&gt;\n      &lt;i id=\"popupIcon\" class=\"\"&gt;&lt;\/i&gt;\n      &lt;h2 id=\"popupTitle\"&gt;&lt;\/h2&gt;\n      &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n      &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n\/\/ Card data (Dynamic)\nconst cards = &#91;\n  {\n    title: \"Online Business\",\n    icon: \"fa-solid fa-briefcase\",\n    image: \"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\",\n    description: \"Learn how to build and grow online businesses step by step.\"\n  },\n  {\n    title: \"Digital Marketing\",\n    icon: \"fa-solid fa-bullhorn\",\n    image: \"https:\/\/images.unsplash.com\/photo-1557838923-2985c318be48\",\n    description: \"Understand SEO, ads, and social media marketing strategies.\"\n  },\n  {\n    title: \"Passive Income\",\n    icon: \"fa-solid fa-coins\",\n    image: \"https:\/\/images.unsplash.com\/photo-1605902711622-cfb43c44367f\",\n    description: \"Create income streams that work for you automatically.\"\n  }\n];\n\n\/\/ Render cards\nconst cardGrid = document.getElementById(\"cardGrid\");\n\ncards.forEach((card, index) =&gt; {\n  const div = document.createElement(\"div\");\n  div.className = \"card-item\";\n  div.innerHTML = `\n    &lt;i class=\"${card.icon}\"&gt;&lt;\/i&gt;\n    &lt;h3&gt;${card.title}&lt;\/h3&gt;\n  `;\n  div.onclick = () =&gt; openPopup(card);\n  cardGrid.appendChild(div);\n});\n\n\/\/ Popup functions\nfunction openPopup(card) {\n  document.getElementById(\"popupImage\").src = card.image;\n  document.getElementById(\"popupImage\").alt = card.title;\n  document.getElementById(\"popupIcon\").className = card.icon;\n  document.getElementById(\"popupTitle\").textContent = card.title;\n  document.getElementById(\"popupDescription\").textContent = card.description;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead8c10\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>7<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u57fa\u672c\u7684\u306a\u30c6\u30fc\u30d6\u30eb \u30b3\u30fc\u30c9 <\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u30c6\u30fc\u30d6\u30eb\u306f\u3001\u30c7\u30fc\u30bf\u3092\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u914d\u7f6e\u3057\u3001\u884c\u3068\u5217\u306b\u914d\u7f6e\u3059\u308b\u305f\u3081\u306e\u5f62\u5f0f\u3067\u3059\u3002 \u4fa1\u683c\u8868\u3001\u30ea\u30b9\u30c8 \u30c6\u30fc\u30d6\u30eb\u3001\u30b9\u30b3\u30a2\u30ea\u30f3\u30b0\u7d50\u679c\u306a\u3069\u3001\u60c5\u5831\u3092\u6574\u7406\u3057\u3066\u6bd4\u8f03\u3057\u3084\u3059\u304f\u3059\u308b\u305f\u3081\u3001\u8aad\u8005\u306f\u60c5\u5831\u3092\u306f\u3063\u304d\u308a\u3068\u7406\u89e3\u3057\u3001\u7d20\u65e9\u304f\u7406\u89e3\u3057\u3001\u5fc5\u8981\u306a\u60c5\u5831\u3092\u7c21\u5358\u306b\u898b\u3064\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-189b8720b8b13e81ef51e39d896407c8\" style=\"font-size:25px\">7.1 \u57fa\u672c\u7684\u306a\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 \u30c6\u30fc\u30d6\u30eb \u30b3\u30fc\u30c9\u306f\u3001\u3059\u3079\u3066\u306e\u30c7\u30d0\u30a4\u30b9\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"245\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-1024x245.webp\" alt=\"\" class=\"wp-image-6026\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-1024x245.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-300x72.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-768x184.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-18x4.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-400x96.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-800x191.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-832x199.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot.webp 1171w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-56002361d52eb72fde2e629e31cc7905\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Responsive Table&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table wrapper *\/\n.table-container {\n  max-width: 1000px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\n\/* Table *\/\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 600px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\nth {\n  font-weight: bold;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\ntbody tr:hover {\n  background: #eaf0ff;\n}\n\n\/* Mobile view *\/\n@media (max-width: 600px) {\n  table {\n    min-width: 100%;\n  }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Course List&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n  &lt;table&gt;\n    &lt;thead&gt;\n      &lt;tr&gt;\n        &lt;th&gt;Course&lt;\/th&gt;\n        &lt;th&gt;Level&lt;\/th&gt;\n        &lt;th&gt;Duration&lt;\/th&gt;\n        &lt;th&gt;Price&lt;\/th&gt;\n      &lt;\/tr&gt;\n    &lt;\/thead&gt;\n    &lt;tbody&gt;\n      &lt;tr&gt;\n        &lt;td&gt;HTML Basics&lt;\/td&gt;\n        &lt;td&gt;Beginner&lt;\/td&gt;\n        &lt;td&gt;4 Weeks&lt;\/td&gt;\n        &lt;td&gt;Free&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;CSS Design&lt;\/td&gt;\n        &lt;td&gt;Intermediate&lt;\/td&gt;\n        &lt;td&gt;6 Weeks&lt;\/td&gt;\n        &lt;td&gt;$49&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;JavaScript&lt;\/td&gt;\n        &lt;td&gt;Advanced&lt;\/td&gt;\n        &lt;td&gt;8 Weeks&lt;\/td&gt;\n        &lt;td&gt;$99&lt;\/td&gt;\n      &lt;\/tr&gt;\n    &lt;\/tbody&gt;\n  &lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-1808e3d519b53641e88c42a29458d625\" style=\"font-size:25px\">\u30a2\u30a4\u30b3\u30f3 + \u30af\u30ea\u30c3\u30af\u53ef\u80fd\u306a\u540d\u524d + \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 + Web \u30b5\u30a4\u30c8 \u30dc\u30bf\u30f3\u306e\u3042\u308b 7.2 \u30c6\u30fc\u30d6\u30eb<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"215\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-1024x215.webp\" alt=\"\" class=\"wp-image-6039\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-1024x215.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-300x63.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-768x162.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-18x4.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-400x84.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-800x168.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-832x175.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot.webp 1122w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f5ec3b4fdbf29eff44000d516fd6ed24\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Interactive Table&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table container *\/\n.table-container {\n  max-width: 1000px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 700px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\n\/* Name clickable *\/\n.name {\n  color: #4a6cff;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n.icon {\n  margin-right: 8px;\n  color: #4a6cff;\n}\n\n\/* Button *\/\n.visit-btn {\n  padding: 8px 16px;\n  background: #4caf50;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 20px;\n  font-size: 14px;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 360px;\n  border-radius: 16px;\n  padding: 24px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.close-btn {\n  margin-top: 16px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Learning Platforms&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Name&lt;\/th&gt;\n      &lt;th&gt;Category&lt;\/th&gt;\n      &lt;th&gt;Website&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;i class=\"fa-solid fa-lightbulb icon\"&gt;&lt;\/i&gt;\n        &lt;span class=\"name\" onclick=\"openPopup('SiamMakeMoney','A platform that teaches digital skills and online income step by step.')\"&gt;\n          SiamMakeMoney\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Online Business&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n          Visit\n        &lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;i class=\"fa-solid fa-code icon\"&gt;&lt;\/i&gt;\n        &lt;span class=\"name\" onclick=\"openPopup('Web Learning','Learn HTML, CSS, and JavaScript from beginner to advanced.')\"&gt;\n          Web Learning\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Programming&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/www.w3schools.com\" target=\"_blank\"&gt;\n          Visit\n        &lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;h3 id=\"popupTitle\"&gt;&lt;\/h3&gt;\n    &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n    &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openPopup(title, description) {\n  document.getElementById(\"popupTitle\").textContent = title;\n  document.getElementById(\"popupDescription\").textContent = description;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-95efdbd3e1e42505cda07415c1c5cf04\" style=\"font-size:25px\">\u30a2\u30a4\u30b3\u30f3 + \u30af\u30ea\u30c3\u30af\u53ef\u80fd\u306a\u540d\u524d + \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 + Web \u30b5\u30a4\u30c8 \u30dc\u30bf\u30f3\u3092\u542b\u3080 7.3 \u30c6\u30fc\u30d6\u30eb<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-1024x466.webp\" alt=\"\" class=\"wp-image-6042\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-1024x466.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-300x137.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-768x350.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-18x8.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-400x182.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-800x364.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-832x379.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot.webp 1236w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-89acb2b87593e298c37c25923d332590\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Advanced Table with Popup&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table container *\/\n.table-container {\n  max-width: 1100px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 800px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\n\/* Icon image *\/\n.icon-img {\n  width: 20px;\n  height: 20px;\n  vertical-align: middle;\n  margin-right: 8px;\n}\n\n\/* Clickable name *\/\n.name {\n  color: #4a6cff;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n\/* Stars *\/\n.stars {\n  color: #ffb400;\n  font-size: 16px;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.55);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 400px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 25px 50px rgba(0,0,0,0.3);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.popup-card img {\n  width: 100%;\n  height: 220px;\n  object-fit: cover;\n}\n\n.popup-content {\n  padding: 24px;\n}\n\n.popup-content h3 {\n  margin: 10px 0;\n}\n\n.popup-content p {\n  color: #555;\n  font-size: 15px;\n}\n\n.price {\n  margin: 12px 0;\n  font-size: 18px;\n  font-weight: bold;\n  color: #4caf50;\n}\n\n.popup-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 16px;\n}\n\n.visit-btn {\n  padding: 10px 18px;\n  background: #4a6cff;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 22px;\n  font-size: 14px;\n}\n\n.close-btn {\n  padding: 8px 16px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Recommended Platforms&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Name&lt;\/th&gt;\n      &lt;th&gt;Category&lt;\/th&gt;\n      &lt;th&gt;Rating&lt;\/th&gt;\n      &lt;th&gt;Website&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;img src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1828\/1828884.png\" class=\"icon-img\" alt=\"icon\"&gt;\n        &lt;span class=\"name\"\n          onclick=\"openPopup(\n            'SiamMakeMoney',\n            'https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f',\n            'A platform that teaches digital skills and online income step by step.',\n            '$49 \/ month',\n            'https:\/\/siammakemoney.com'\n          )\"&gt;\n          SiamMakeMoney\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Online Business&lt;\/td&gt;\n      &lt;td class=\"stars\"&gt;\u2605\u2605\u2605\u2605\u2605&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;Visit&lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;img src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1055\/1055687.png\" class=\"icon-img\" alt=\"icon\"&gt;\n        &lt;span class=\"name\"\n          onclick=\"openPopup(\n            'Web Learning',\n            'https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475',\n            'Learn HTML, CSS, and JavaScript from beginner to advanced.',\n            'Free',\n            'https:\/\/www.w3schools.com'\n          )\"&gt;\n          Web Learning\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Programming&lt;\/td&gt;\n      &lt;td class=\"stars\"&gt;\u2605\u2605\u2605\u2605\u2606&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/www.w3schools.com\" target=\"_blank\"&gt;Visit&lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;img id=\"popupImage\" src=\"\" alt=\"\"&gt;\n    &lt;div class=\"popup-content\"&gt;\n      &lt;h3 id=\"popupTitle\"&gt;&lt;\/h3&gt;\n      &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n      &lt;div class=\"price\" id=\"popupPrice\"&gt;&lt;\/div&gt;\n\n      &lt;div class=\"popup-actions\"&gt;\n        &lt;a id=\"popupLink\" class=\"visit-btn\" href=\"#\" target=\"_blank\"&gt;Visit Website&lt;\/a&gt;\n        &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openPopup(title, image, description, price, link) {\n  document.getElementById(\"popupTitle\").textContent = title;\n  document.getElementById(\"popupImage\").src = image;\n  document.getElementById(\"popupDescription\").textContent = description;\n  document.getElementById(\"popupPrice\").textContent = price;\n  document.getElementById(\"popupLink\").href = link;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadcb35\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>8<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u6700\u3082\u5358\u7d14\u306a\u30ea\u30f3\u30af \u30b3\u30fc\u30c9<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>\u30ea\u30f3\u30af \u30dc\u30bf\u30f3<\/strong> \u901a\u5e38\u306f\u3001\u30dc\u30bf\u30f3\u306e\u3088\u3046\u306b\u30c7\u30b6\u30a4\u30f3\u3055\u308c\u3066\u3044\u308b Web \u30b5\u30a4\u30c8 \u30ea\u30f3\u30af\u3092\u7528\u610f\u3057\u3066\u3001\u4ed6\u306e Web \u30b5\u30a4\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3001\u767b\u9332\u3059\u308b\u3001\u8a73\u7d30\u3092\u8abf\u3079\u308b\u306a\u3069\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u4f55\u3092\u3059\u308b\u304b\u3092\u306f\u3063\u304d\u308a\u3068\u78ba\u8a8d\u3057\u3001\u3059\u3050\u306b\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3067\u3001\u30ea\u30f3\u30af \u30dc\u30bf\u30f3\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001CSS \u3068\u9023\u643a\u3057\u3066 HTML \u304b\u3089\u69cb\u7bc9\u3055\u308c\u3001\u305d\u308c\u3089\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u901a\u5e38\u306e\u30ea\u30f3\u30af\u306e\u3088\u3046\u306b\u6a5f\u80fd\u3057\u307e\u3059\u304c (SEO \u306b\u9069\u3057\u3066\u3044\u3066\u3001\u4f7f\u3044\u3084\u3059\u3044)\u3001\u898b\u305f\u76ee\u304c\u7f8e\u3057\u304f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30af\u30ea\u30c3\u30af\u3059\u308b\u53ef\u80fd\u6027\u304c\u9ad8\u304f\u306a\u308a\u307e\u3059\u3002<\/div><\/div><\/div>\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-53ce3d46c3f858939580183275f08348\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.btn {\n  display: inline-block;\n  padding: 12px 24px;\n  background: #4a6cff;\n  color: #ffffff;\n  text-decoration: none;\n  border-radius: 25px;\n  font-size: 16px;\n}\n&lt;\/style&gt;\n&lt;a href=\"https:\/\/siammakemoney.com\" class=\"btn\" target=\"_blank\"&gt;\n  Visit Website\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-00a9c7e39d2e8868fec38719966748c3\" style=\"font-size:25px\">8.1 \u30db\u30d0\u30fc\u52b9\u679c\u306e\u3042\u308b\u30ea\u30f3\u30af \u30dc\u30bf\u30f3<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-ff11b34ce6a5bfc4f388c4cf5368a9fc\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.btn {\n  padding: 12px 24px;\n  background: #4a6cff;\n  color: white;\n  text-decoration: none;\n  border-radius: 30px;\n  transition: 0.3s;\n}\n\n.btn:hover {\n  background: #324de3;\n  transform: translateY(-2px);\n}\n&lt;\/style&gt;\n\n&lt;br&gt;\n&lt;a href=\"https:\/\/siammakemoney.com\" class=\"btn\" target=\"_blank\"&gt;\n  Visit Website\n&lt;\/a&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadcdff\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>9<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u57fa\u672c\u7684\u306a\u30e1\u30cb\u30e5\u30fc \u30b3\u30fc\u30c9<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u30e1\u30cb\u30e5\u30fc \u30b3\u30fc\u30c9\u306f\u3001Web \u30b5\u30a4\u30c8\u306b\u30e1\u30cb\u30e5\u30fc \u30d0\u30fc\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u4e00\u9023\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3059\u3002 \u30e6\u30fc\u30b6\u30fc\u304c\u30af\u30ea\u30c3\u30af\u3057\u3066\u30da\u30fc\u30b8 (Home About Us\u3001Services\u3001\u307e\u305f\u306f Contact Us) \u306a\u3069\u306e\u30da\u30fc\u30b8\u306b\u79fb\u52d5\u3059\u308b\u305f\u3081\u306b\u3001\u30e1\u30cb\u30e5\u30fc \u30b3\u30fc\u30c9\u306f\u901a\u5e38\u3001\u30ea\u30f3\u30af\u69cb\u9020\u306e HTML\u3001\u88c5\u98fe\u7528\u306e CSS \u3067\u69cb\u6210\u3055\u308c\u3001\u30ba\u30fc\u30e0 \u30e1\u30cb\u30e5\u30fc\u3084\u30e2\u30d0\u30a4\u30eb \u30e1\u30cb\u30e5\u30fc\u306a\u3069\u306e\u7279\u5225\u306a\u6a5f\u80fd\u3092\u5f37\u5316\u3059\u308b\u305f\u3081\u306b JavaScript \u3092\u542b\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u30e1\u30cb\u30e5\u30fc \u30b3\u30fc\u30c9\u306b\u3088\u308a\u3001Web \u30b5\u30a4\u30c8\u304c\u4f7f\u3044\u3084\u3059\u304f\u6574\u7406\u3055\u308c\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u5fc5\u8981\u306a\u60c5\u5831\u3092\u3088\u308a\u8fc5\u901f\u306b\u898b\u3064\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-a557623bcb2cb8411ecaf81b004eb889\" style=\"font-size:25px\">9.1 \u57fa\u672c\u7684\u306a\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3 \u30e1\u30cb\u30e5\u30fc<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-4d5a3900ab9150a6e9acc99dae941c35\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Simple Menu&lt;\/title&gt;\n&lt;style&gt;\nbody {\n  margin: 0;\n  font-family: Arial, sans-serif;\n}\n\nnav {\n  background: #4a6cff;\n  padding: 12px 24px;\n}\n\nnav a {\n  color: #fff;\n  text-decoration: none;\n  margin-right: 20px;\n  font-weight: bold;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;nav&gt;\n  &lt;a href=\"#\"&gt;Home&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;About&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;Services&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;Contact&lt;\/a&gt;\n&lt;\/nav&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-13624e31f5eddf0b15196cbcc9bdac8d\" style=\"font-size:25px\">9.2 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 \u30e1\u30cb\u30e5\u30fc (\u3059\u3079\u3066\u306e\u30c7\u30d0\u30a4\u30b9\u306b\u63a8\u5968)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-3f3f5c4f77f40fab47342a64872210be\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Responsive Menu&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  margin: 0;\n  font-family: Arial, sans-serif;\n}\n\nnav {\n  background: #4a6cff;\n  padding: 14px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.logo {\n  color: #fff;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.menu {\n  display: flex;\n  gap: 20px;\n}\n\n.menu a {\n  color: #fff;\n  text-decoration: none;\n  font-weight: bold;\n}\n\n.menu-btn {\n  display: none;\n  font-size: 24px;\n  color: #fff;\n  cursor: pointer;\n}\n\n\/* Mobile *\/\n@media (max-width: 768px) {\n  .menu {\n    display: none;\n    flex-direction: column;\n    background: #4a6cff;\n    position: absolute;\n    top: 56px;\n    right: 0;\n    width: 100%;\n    text-align: center;\n    padding: 20px 0;\n  }\n\n  .menu.show {\n    display: flex;\n  }\n\n  .menu-btn {\n    display: block;\n  }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;nav&gt;\n  &lt;div class=\"logo\"&gt;MyWebsite&lt;\/div&gt;\n\n  &lt;div class=\"menu-btn\" onclick=\"toggleMenu()\"&gt;\u2630&lt;\/div&gt;\n\n  &lt;div class=\"menu\" id=\"menu\"&gt;\n    &lt;a href=\"#\"&gt;Home&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;About&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;Services&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;Contact&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n\n&lt;script&gt;\nfunction toggleMenu() {\n  document.getElementById(\"menu\").classList.toggle(\"show\");\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead0b83\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>10<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u30b3\u30fc\u30c9 \u30b0\u30ea\u30c3\u30c9 \u30ab\u30fc\u30c9 (\u30ab\u30fc\u30c9 \u30b0\u30ea\u30c3\u30c9)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>\u30b0\u30ea\u30c3\u30c9\u30ab\u30fc\u30c9<\/strong> \u3053\u308c\u306f\u3001\u30b0\u30ea\u30c3\u30c9 (\u30b0\u30ea\u30c3\u30c9) \u306b\u914d\u7f6e\u3055\u308c\u305f\u3044\u304f\u3064\u304b\u306e\u300c\u30ab\u30fc\u30c9\u300d\u3092\u4f7f\u7528\u3057\u305f Web \u30b5\u30a4\u30c8\u4e0a\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5f62\u5f0f\u3067\u3059\u3002 \u88fd\u54c1\u3001\u8a18\u4e8b\u3001\u30b5\u30fc\u30d3\u30b9\u3001\u307e\u305f\u306f\u30b3\u30fc\u30b9\u306e\u30ea\u30b9\u30c8\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002 \u30b0\u30ea\u30c3\u30c9 \u30ab\u30fc\u30c9\u306e\u5229\u70b9\u306f\u3001\u6574\u7406\u3055\u308c\u3066\u3044\u3066\u7f8e\u3057\u304f\u3001\u8aad\u307f\u3084\u3059\u304f\u3001\u753b\u9762\u30b5\u30a4\u30ba\u306b\u5fdc\u3058\u3066\u5217\u6570\u3092\u81ea\u52d5\u7684\u306b\u8abf\u6574\u3067\u304d\u308b\u3053\u3068\u3067\u3059\u3002 \u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u3068\u643a\u5e2f\u96fb\u8a71\u306e\u4e21\u65b9\u3067\u3046\u307e\u304f\u6a5f\u80fd\u3057\u307e\u3059\u3002<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-41067ab524c48302a507b4f6ad3d09ae\" style=\"font-size:25px\">10.1 \u30ab\u30fc\u30c9 \u30b0\u30ea\u30c3\u30c9 \u2013 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1024x285.webp\" alt=\"\" class=\"wp-image-6064\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1024x285.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-300x84.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-768x214.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-18x5.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-400x111.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-800x223.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-832x232.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1248x348.webp 1248w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot.webp 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-18910c19484491f33915ff7c5ef370d2\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Beautiful Card Grid&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  margin: 0;\n  padding: 40px;\n  font-family: Arial, sans-serif;\n  background: #f0f2f5;\n}\n\n\/* Grid *\/\n.grid {\n  max-width: 1200px;\n  margin: auto;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 30px;\n}\n\n\/* Card *\/\n.card {\n  background: #fff;\n  border-radius: 20px;\n  padding: 24px;\n  box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n  position: relative;\n  transition: 0.3s;\n}\n\n.card:hover {\n  transform: translateY(-8px);\n  box-shadow: 0 25px 50px rgba(0,0,0,0.15);\n}\n\n\/* Badge *\/\n.badge {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  background: #ff5722;\n  color: #fff;\n  font-size: 12px;\n  padding: 6px 12px;\n  border-radius: 20px;\n}\n\n\/* Icon *\/\n.icon {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n\/* Content *\/\n.card h3 {\n  margin: 0 0 10px;\n}\n\n.card p {\n  font-size: 14px;\n  color: #555;\n}\n\n\/* Button *\/\n.card a {\n  display: inline-block;\n  margin-top: 16px;\n  padding: 10px 18px;\n  background: #4a6cff;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 24px;\n  font-size: 14px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2 style=\"text-align:center;\"&gt;Our Services&lt;\/h2&gt;\n\n&lt;div class=\"grid\"&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;span class=\"badge\"&gt;Popular&lt;\/span&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\ude80&lt;\/div&gt;\n    &lt;h3&gt;Online Business&lt;\/h3&gt;\n    &lt;p&gt;Learn how to build online income step by step.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;span class=\"badge\"&gt;New&lt;\/span&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\udcbb&lt;\/div&gt;\n    &lt;h3&gt;Web Development&lt;\/h3&gt;\n    &lt;p&gt;HTML, CSS, JavaScript for beginners.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\udcc8&lt;\/div&gt;\n    &lt;h3&gt;Digital Marketing&lt;\/h3&gt;\n    &lt;p&gt;Grow your business with online marketing.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>","protected":false},"excerpt":{"rendered":"\u57fa\u672c\u7684\u306a HTML\u3001CSS\u3001\u304a\u3088\u3073 JavaScript \u30b3\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c6\u30ad\u30b9\u30c8\u3084\u753b\u50cf\u306b\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3059\u308b\u306a\u3069\u3001Web \u30b5\u30a4\u30c8\u3092\u4f5c\u6210\u304a\u3088\u3073\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3059\u308b\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u30dd\u30a4\u30f3\u30c8\u307e\u305f\u306f\u6570\u5b57\u306e\u914d\u7f6e \u30d5\u30a9\u30f3\u30c8\u3092\u4ecb\u3057\u3066\u30a2\u30a4\u30b3\u30f3\u3092\u8ffd\u52a0\u3059\u308b \u7d20\u6674\u3089\u3057\u3044 Web \u30b5\u30a4\u30c8\u3092\u30e2\u30c0\u30f3\u306b\u898b\u305b\u308b\u305f\u3081\u306b\u3059\u3070\u3089\u3057\u3044\u3002 \u4ed6\u306e Web \u30b5\u30a4\u30c8\u304b\u3089\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u57cb\u3081\u8fbc\u307f\u3092 iframe \u306b\u542b\u3081\u308b\u3053\u3068\u3067\u3001\u521d\u5fc3\u8005\u304c Web \u958b\u767a\u306b\u7406\u89e3\u3057\u3084\u3059\u304f\u3001\u9069\u7528\u3059\u308b\u3053\u3068\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002","protected":false},"author":1,"featured_media":6013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[23,28],"tags":[],"class_list":["post-5394","post","type-post","status-publish","format-standard","has-post-thumbnail","category-website-creation","category-html-css-javascript","cs-entry"],"_links":{"self":[{"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/posts\/5394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/comments?post=5394"}],"version-history":[{"count":36,"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/posts\/5394\/revisions"}],"predecessor-version":[{"id":6077,"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/posts\/5394\/revisions\/6077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/media\/6013"}],"wp:attachment":[{"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/media?parent=5394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/categories?post=5394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siammakemoney.com\/ja\/wp-json\/wp\/v2\/tags?post=5394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}