初心者でもできる！簡単なWebサイト作成プログラミング講座

導入部：ウェブサイト作りで挫折する前に - 自分のビジネスを始めるには？

「いつか自分のウェブサイトを作ってみたいけど、どこから始めたらいいかわからない…」そう思っているあなた。せっかくのアイデアや商品があるのに、なかなか形にならないのは辛いですよね。特に、個人で事業を始めようとすると、まずウェブサイトが必要になることが多いです。しかし、プログラミングが全く分からない状態だと、いきなり本格的なシステム開発に挑戦してしまうと、挫折してしまう可能性が高いものです。

実は、最近は初心者でも簡単にウェブサイトを作成できるツールがたくさんあります。HTMLやCSSといったプログラミング言語の知識がなくても、ドラッグ＆ドロップで直感的に操作できるビジュアルエディターを使えば、誰でも簡単に自分のウェブサイトを作ることができます。この記事では、そんな簡単なWebサイト作成プログラミング講座として、初心者の方にも分かりやすく解説していきます。

小島晴翔

ウェブ開発コンサルタント / フロントエンドエンジニア (初心者向け指導経験があることを考慮)

HTMLとCSSで世界に発信する！素晴らしい目標ですね。初心者向け講座とのことなので、まずはHTMLの構造（`

`～`
`など）をしっかり理解し、CSSで基本的なレイアウト（margin, padding, floatなど）を学ぶことが重要です。実践的な練習として、簡単なポートフォリオサイトを作成してみるのがおすすめです。レスポンシブデザインの基礎も少しずつ学んでおくと将来設計にも繋がりますよ！

「本文：HTMLとCSSを学んで、世界に発信する！」に関するアドバイス

本文：HTMLとCSSを学んで、世界に発信する！

1. なぜHTMLとCSSなのか？ – ウェブサイトの基本構造を理解する

ウェブサイトは、大きく分けて以下の3つの要素で構成されています。

HTML (HyperText Markup Language): コンテンツ（テキスト、画像など）を記述するための言語です。ウェブページの骨格を作る役割を担います。
CSS (Cascading Style Sheets): ウェブページの見た目（色、フォント、レイアウトなど）を整えるための言語です。HTMLで書かれたコンテンツを美しく装飾します。
JavaScript: ウェブページに動きやインタラクティブ性を持たせるための言語です。(今回は基本的な作り方なので触れません。)

これらの3つの技術を理解することで、ウェブサイトの構造とデザインの両方をコントロールできるようになります。最初はHTMLとCSSから始めるのがおすすめです。

2. 簡単なHTML構造 – 基礎文法をマスターする

HTMLで簡単なウェブページを作成するには、いくつかの基本的なタグを使います。

: 文書の種類を指定します。
: HTMLドキュメントのルート要素です。
: ウェブページのタイトルやメタデータなどを記述する場所です。
</code>: ウェブページのタイトルを設定します。ブラウザのタブに表示されます。</li> <li><code><meta charset="UTF-8"></code>: 文字コードを指定します。日本語を含む文字を正しく表示するために重要です。</li> <li><code><body></code>: ウェブページの内容（テキスト、画像など）を記述する場所です。</li> </ul> <p>例えば、以下のようなHTMLコードは、「Hello, World!」と表示するシンプルなウェブページの骨格になります。</p> <pre class="wp-block-code"><code><!DOCTYPE html> <html> <head> <title>My First Website</title> <meta charset="UTF-8"> </head> <body> <h1>Hello, World!</h1> </body> </html></code></pre> <p>このコードをテキストエディタにコピーし、<code>.html</code>という拡張子で保存してブラウザで開くと、「Hello, World!」と表示されます。</p> <h3 class="wp-block-heading">3. CSSで見た目を整える – 色やフォントを指定する</h3> <p>HTMLでコンテンツを記述したら、CSSを使って見た目を整えます。CSSもいくつかの基本的なルールがあります。</p> <ul class="wp-block-list"> <li><code>selector</code>: スタイルを適用したい要素を指定します。</li> <li><code>property</code>: スタイルを変更したいプロパティを指定します。（例：color, font-size, background-color）</li> <li><code>value</code>: プロパティに設定する値を指定します。</li> </ul> <p>例えば、以下のようなCSSコードは、「Hello, World!」の文字の色を赤くし、フォントサイズを大きくします。</p> <pre class="wp-block-code"><code>h1 { color: red; font-size: 32px; }</code></pre> <p>このCSSコードをHTMLファイルの<code><head></code>内に <code><style></code>タグで囲んで記述すると、「Hello, World!」の文字が赤色になり、フォントサイズが大きくなります。</p> <h3 class="wp-block-heading">4. 簡単なWebサイトの作成 – 具体的な手順を解説</h3> <ol class="wp-block-list"> <li> <strong>テキストエディタを用意:</strong> Visual Studio Code や Atom など、HTML/CSSを書くのに便利なテキストエディタをインストールします。</li> <li> <strong>新しいファイルを作成:</strong> テキストエディタで新しいファイルを開き、<code>.html</code>という拡張子で保存します。（例：index.html）</li> <li> <strong>基本的なHTML構造を記述:</strong> 上記の例のように、<code><html></code>, <code><head></code>, <code><body></code>タグなどを記述します。</li> <li> <strong>コンテンツを追加:</strong> <code><h1></code>, <code><p></code>, <code><img></code>などのHTMLタグを使って、ウェブページにテキストや画像を追加します。</li> <li> <strong>CSSで見た目を整える:</strong> <code><style></code>タグの中にCSSコードを記述し、要素のスタイルを設定します。</li> <li> <strong>ブラウザで表示:</strong> 作成した<code>.html</code>ファイルをブラウザで開きます。</li> </ol> <h3 class="wp-block-heading">5. Webサイトのデザイン – 色やフォントを変えてみる</h3> <p>ウェブサイトのデザインは、ユーザーの印象を大きく左右します。色やフォントだけでなく、レイアウトも重要です。</p> <ul class="wp-block-list"> <li><strong>配色:</strong> ウェブサイト全体の配色テーマを決めておくと、統一感が出ます。</li> <li><strong>フォント:</strong> 読みやすいフォントを選びましょう。ゴシック体や明朝体など、様々な種類があります。</li> <li><strong>レイアウト:</strong> コンテンツをどのように配置するかを考えましょう。シンプルで見やすいレイアウトがおすすめです。</li> </ul> <p>例えば、ブログのテーマとして、落ち着いた青色と白を基調としたデザインにする場合、背景色を薄い青色に、文字の色を黒または濃いグレーに設定し、フォントサイズを16px程度のゴシック体を使用すると良いでしょう。</p> <h3 class="wp-block-heading">6. Webサイト公開 – 自分のウェブサイトを見せるには？</h3> <p>作成したウェブサイトを公開するには、以下の方法があります。</p> <ul class="wp-block-list"> <li><strong>ホスティングサービスを利用:</strong> ランサーズやConoHaといったホスティングサービスにファイルをアップロードして、URLを取得します。</li> <li><strong>GitHub Pagesなどの静的サイトホスティングサービスを利用:</strong> GitHubでコードを公開すれば、無料でウェブサイトを表示できます。</li> <li><strong>Google Sitesなどの無料のWebサイト作成ツールを利用:</strong> 簡単なウェブサイトであれば、無料で作成・公開できます。</li> </ul> <h2 class="wp-block-heading">活用イメージ：個人ブログからオンラインショップまで - Webサイトの可能性は無限大</h2> <ul class="wp-block-list"> <li><strong>個人ブログ:</strong> 自分の考えや経験を共有するための場として、ウェブサイトを活用できます。</li> <li><strong>ポートフォリオ:</strong> 自分のスキルや実績を紹介するためのポートフォリオサイトを作成できます。</li> <li><strong>オンラインショップ:</strong> 商品を販売するためのオンラインショップを作成できます。(Shopifyなどのサービスを利用すると簡単に作成できます。)</li> <li><strong>ビジネスの集客:</strong> 自社のウェブサイトを制作することで、潜在顧客へのアプローチが容易になります。</li> </ul> <p>例えば、あなたが写真家で、自分の作品を公開したい場合、HTML/CSSを使ってシンプルなポートフォリオサイトを作成し、GitHub Pagesに公開することができます。これにより、あなたの作品を世界中の人に見てもらうチャンスが増えます。また、あなたがハンドメイドアクセサリーを作っている場合、オンラインショップとしてWordPressやShopifyを利用して、自分の商品を販売することも可能です。</p> <h2 class="wp-block-heading">まとめ・行動喚起：今日からWebサイト作成を始めよう！</h2> <figure class="wp-block-image size-large"> <img decoding="async" src="https://worker-fts.info/wp-content/uploads/2025/06/heading_h2_4_まとめ・行動喚起：今日からWebサイト作_20250611_051622.png" alt="まとめ・行動喚起：今日からWebサイト作成を始めよう！" class="wp-image-auto"/> <figcaption>まとめ・行動喚起：今日からWebサイト作成を始めよう！</figcaption> </figure> <p>この記事では、HTMLとCSSの基本的な知識を使って、初心者でも簡単にウェブサイトを作成する方法を紹介しました。最初は難しく感じるかもしれませんが、実際に手を動かしてみることで、必ず理解できるようになります。</p> <p>まずは、テキストエディタをインストールし、簡単なHTMLファイルを書いてみましょう。そして、CSSで見た目を整えて、ブラウザで表示してみましょう。</p> <p>「Webサイトを作ってみたいけど、何から始めたらいいかわからない…」という方も、この記事が少しでもお役に立てたら幸いです。</p> <p>今日からWebサイト作成を始めて、あなたのアイデアを世界に発信してください！</p> <p>さらに学習を進めるためのリソースとして、以下のようなものが役立ちます。</p> <ul class="wp-block-list"> <li><strong>Progate:</strong> <a href="https://prog-8.com/">https://prog-8.com/</a> HTML, CSS, JavaScriptの基礎をゲーム感覚で学べるオンライン学習サービスです。</li> <li><strong>ドットインストール:</strong> <a href="https://dotinstall.com/">https://dotinstall.com/</a> 動画形式でプログラミングを学べる学習サービスです。</li> </ul> <p>さあ、あなたもWebサイト作成に挑戦してみましょう！</p> </div> </div> <div class="adbox"> <div style="padding-top:10px;"> </div> </div> </div> <div class="sns st-sns-singular"> <ul class="clearfix"> </ul> </div> <div class="st-author-box"> <ul id="st-tab-menu"> <li class="active"><i class="st-fa st-svg-user st-css-no" aria-hidden="true"></i>この記事を書いた人</li> </ul> <div id="st-tab-box" class="clearfix"> <div class="active"> <dl> <dt> <a rel="nofollow" href="https://worker-fts.info/author/kaz/"> <img alt='' src='https://secure.gravatar.com/avatar/501cac838bc5a1215cb749e48f232b7e?s=80&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/501cac838bc5a1215cb749e48f232b7e?s=160&d=mm&r=g 2x' class='avatar avatar-80 photo' height='80' width='80' decoding='async'/> </a> </dt> <dd> <p class="st-author-nickname">カズマ</p> <p class="st-author-description">普通の会社員です。労働所得に加えてフリマサイトの物販収入、広告収入の3つの収入源を十分に確保して生活を安定させるのが目標です。ネットで稼ぐ定番の方法やAI×マネタイズなどを中心にコンテンツを投稿します。当然ながら、普通の会社員＆子育て中なので作業時間も限られるので効率良く時間を使う為のライフハック等も紹介してます。</p> <p class="st-author-sns"> </p> </dd> </dl> </div> </div> </div> <aside> <p class="author" style="display:none;"><a href="https://worker-fts.info/author/kaz/" title="カズマ" class="vcard author"><span class="fn">author</span></a></p>   <h4 class="point"><span class="point-in">この記事もおすすめ</span></h4> <div class="kanren" data-st-load-more-content data-st-load-more-id="52b4ea02-2a71-4e38-95ee-eb90a781e649"> <dl class="clearfix"> <dt><a href="https://worker-fts.info/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%b9%e3%82%ad%e3%83%ab%e5%90%91%e4%b8%8a%ef%bc%9a%e6%8c%ab%e6%8a%98%e3%81%97%e3%81%aa%e3%81%84%e3%81%9f%e3%82%81%e3%81%ae%e3%83%a2/"> <img width="1200" height="736" src="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上挫折しないためのモチベーション維持法_20250611_051103.png" class="attachment-full size-full wp-post-image" alt="アイキャッチ画像" decoding="async" srcset="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上挫折しないためのモチベーション維持法_20250611_051103.png 1200w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上挫折しないためのモチベーション維持法_20250611_051103-300x184.png 300w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上挫折しないためのモチベーション維持法_20250611_051103-1024x628.png 1024w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上挫折しないためのモチベーション維持法_20250611_051103-768x471.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /> </a></dt> <dd> <h5 class="kanren-t"> <a href="https://worker-fts.info/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%b9%e3%82%ad%e3%83%ab%e5%90%91%e4%b8%8a%ef%bc%9a%e6%8c%ab%e6%8a%98%e3%81%97%e3%81%aa%e3%81%84%e3%81%9f%e3%82%81%e3%81%ae%e3%83%a2/">プログラミングスキル向上：挫折しないためのモチベーション維持法</a> </h5> <div class="st-excerpt smanone"> <p>プログラミングスキル向上：挫折しないためのモチベーション維持法導入部：開発の壁にぶつかるあなたへ—孤独感と焦燥感を乗り越えようプログラミング。最初はワクワクするような新しい世界への扉を開くツールだ ... </p> </div> </dd> </dl> <dl class="clearfix"> <dt><a href="https://worker-fts.info/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%b9%e3%82%ad%e3%83%ab%e5%90%91%e4%b8%8a%ef%bc%9a%e7%84%a1%e6%96%99%e6%95%99%e6%9d%90%e3%82%92%e6%b4%bb%e7%94%a8%e3%81%99%e3%82%8b/"> <img width="1200" height="736" src="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上無料教材を活用する方法_20250611_052250.png" class="attachment-full size-full wp-post-image" alt="アイキャッチ画像" decoding="async" srcset="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上無料教材を活用する方法_20250611_052250.png 1200w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上無料教材を活用する方法_20250611_052250-300x184.png 300w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上無料教材を活用する方法_20250611_052250-1024x628.png 1024w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上無料教材を活用する方法_20250611_052250-768x471.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /> </a></dt> <dd> <h5 class="kanren-t"> <a href="https://worker-fts.info/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%b9%e3%82%ad%e3%83%ab%e5%90%91%e4%b8%8a%ef%bc%9a%e7%84%a1%e6%96%99%e6%95%99%e6%9d%90%e3%82%92%e6%b4%bb%e7%94%a8%e3%81%99%e3%82%8b/">プログラミングスキル向上：無料教材を活用する方法</a> </h5> <div class="st-excerpt smanone"> <p>プログラミングスキル向上：無料教材を活用する方法導入部：プログラミング学習の壁と、それを乗り越える方法「せっかく良い仕事があるのに、どうしてもプログラミングスキルが身につかない…」「転職したいけ ... </p> </div> </dd> </dl> <dl class="clearfix"> <dt><a href="https://worker-fts.info/web-html-css-javascript/"> <img width="1200" height="736" src="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ゼロから始めるWeb開発HTMLCSSJavaScript_20250611_044724.png" class="attachment-full size-full wp-post-image" alt="アイキャッチ画像" decoding="async" srcset="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ゼロから始めるWeb開発HTMLCSSJavaScript_20250611_044724.png 1200w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ゼロから始めるWeb開発HTMLCSSJavaScript_20250611_044724-300x184.png 300w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ゼロから始めるWeb開発HTMLCSSJavaScript_20250611_044724-1024x628.png 1024w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ゼロから始めるWeb開発HTMLCSSJavaScript_20250611_044724-768x471.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /> </a></dt> <dd> <h5 class="kanren-t"> <a href="https://worker-fts.info/web-html-css-javascript/">ゼロから始めるWeb開発：HTML、CSS、JavaScript</a> </h5> <div class="st-excerpt smanone"> <p>ゼロから始めるWeb開発：HTML、CSS、JavaScript 導入部：なぜWeb開発スキルが必要なのか？「将来的に何か別の仕事に転身したい」「副業で収入を増やしたい」「自分のアイデアを形にしたい ... </p> </div> </dd> </dl> <dl class="clearfix"> <dt><a href="https://worker-fts.info/%e9%96%a2%e6%95%b0%e5%9e%8b%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%ef%bc%9a%e5%ae%9f%e8%b7%b5%e7%9a%84%e5%bf%9c%e7%94%a8%e3%81%a8%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88/"> <img width="1200" height="736" src="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_関数型プログラミング実践的応用とメリット_20250611_034819.png" class="attachment-full size-full wp-post-image" alt="アイキャッチ画像" decoding="async" srcset="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_関数型プログラミング実践的応用とメリット_20250611_034819.png 1200w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_関数型プログラミング実践的応用とメリット_20250611_034819-300x184.png 300w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_関数型プログラミング実践的応用とメリット_20250611_034819-1024x628.png 1024w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_関数型プログラミング実践的応用とメリット_20250611_034819-768x471.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /> </a></dt> <dd> <h5 class="kanren-t"> <a href="https://worker-fts.info/%e9%96%a2%e6%95%b0%e5%9e%8b%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%ef%bc%9a%e5%ae%9f%e8%b7%b5%e7%9a%84%e5%bf%9c%e7%94%a8%e3%81%a8%e3%83%a1%e3%83%aa%e3%83%83%e3%83%88/">関数型プログラミング：実践的応用とメリット</a> </h5> <div class="st-excerpt smanone"> <p>関数型プログラミング：実践的応用とメリット導入部 – 複雑なコードに bogged down？関数型プログラミングで生産性を向上させよう！「最近、コードがどんどん複雑になってきた…」「バグの原因も ... </p> </div> </dd> </dl> <dl class="clearfix"> <dt><a href="https://worker-fts.info/web/"> <img width="1200" height="736" src="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ノーコードで始めるWeb制作プログラミング不要_20250611_043206.png" class="attachment-full size-full wp-post-image" alt="アイキャッチ画像" decoding="async" srcset="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ノーコードで始めるWeb制作プログラミング不要_20250611_043206.png 1200w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ノーコードで始めるWeb制作プログラミング不要_20250611_043206-300x184.png 300w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ノーコードで始めるWeb制作プログラミング不要_20250611_043206-1024x628.png 1024w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_ノーコードで始めるWeb制作プログラミング不要_20250611_043206-768x471.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /> </a></dt> <dd> <h5 class="kanren-t"> <a href="https://worker-fts.info/web/">ノーコードで始めるWeb制作：プログラミング不要？</a> </h5> <div class="st-excerpt smanone"> <p>山本智子 Webサイト制作コンサルタント (ノーコード専門) ノーコードでWeb制作が可能であるのは間違いありません！プログラミングは必須ではありませんが、ノーコードツールを最大限に活用するには、基 ... </p> </div> </dd> </dl> </div>  <div class="p-navi clearfix"> <a class="st-prev-link" href="https://worker-fts.info/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%b9%e3%82%af%e3%83%bc%e3%83%ab%e9%81%b8%e3%81%b3%e3%81%ae%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%ef%bc%9a%e8%87%aa%e5%88%86%e3%81%ab/"> <p class="st-prev"> <i class="st-svg st-svg-angle-right"></i> <img width="60" height="60" src="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスクール選びのポイント自分に合う学校を見つけよ_20250611_051409-100x100.png" class="attachment-60x60 size-60x60 wp-post-image" alt="アイキャッチ画像" decoding="async" srcset="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスクール選びのポイント自分に合う学校を見つけよ_20250611_051409-100x100.png 100w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスクール選びのポイント自分に合う学校を見つけよ_20250611_051409-150x150.png 150w" sizes="(max-width: 60px) 100vw, 60px" /> <span class="st-prev-title">プログラミングスクール選びのポイント：自分に合う学校を見つけよう！</span> </p> </a> <a class="st-next-link" href="https://worker-fts.info/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%82%b9%e3%82%ad%e3%83%ab%e5%90%91%e4%b8%8a%ef%bc%9a%e3%83%9d%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%aa%e3%82%aa%e4%bd%9c%e6%88%90/"> <p class="st-next"> <span class="st-prev-title">プログラミングスキル向上：ポートフォリオ作成が成功のカギ</span> <img width="60" height="60" src="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上ポートフォリオ作成が成功のカギ_20250611_051719-100x100.png" class="attachment-60x60 size-60x60 wp-post-image" alt="アイキャッチ画像" decoding="async" srcset="https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上ポートフォリオ作成が成功のカギ_20250611_051719-100x100.png 100w, https://worker-fts.info/wp-content/uploads/2025/06/eyecatch_プログラミングスキル向上ポートフォリオ作成が成功のカギ_20250611_051719-150x150.png 150w" sizes="(max-width: 60px) 100vw, 60px" /> <i class="st-svg st-svg-angle-right"></i> </p> </a> </div> </aside> </div>  </article> </main> </div>  </div>  </div> <footer> <div id="footer"> <div id="footer-wrapper"> <div id="footer-in"> <div class="footermenubox clearfix "><ul id="menu-%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="footermenust"><li id="menu-item-887" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-887"><a href="https://worker-fts.info/%e9%81%8b%e5%96%b6%e6%96%b9%e9%87%9d/">運営方針</a></li> <li id="menu-item-890" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-890"><a href="https://worker-fts.info/%e5%85%8d%e8%b2%ac%e4%ba%8b%e9%a0%85/">免責事項</a></li> <li id="menu-item-1197" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1197"><a href="https://worker-fts.info/specific/">特定商取引法に基づく表記</a></li> <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-888"><a href="https://worker-fts.info/privacy-policy/">プライバシーポリシー</a></li> <li id="menu-item-889" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-889"><a href="https://worker-fts.info/%e3%82%b5%e3%82%a4%e3%83%88%e3%83%9e%e3%83%83%e3%83%97/">サイトマップ</a></li> <li id="menu-item-891" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-891"><a href="https://worker-fts.info/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b/">お問い合わせ</a></li> </ul></div> <div id="st-footer-logo-wrapper">  <div id="st-text-logo"> <p class="footer-description st-text-logo-top"> <a href="https://worker-fts.info/"></a> </p> <h3 class="footerlogo st-text-logo-bottom">  <a href="https://worker-fts.info/"> 普通の会社員が作る不労所得 </a> </h3> </div> <div class="st-footer-tel"> </div> </div> <p class="copyr"><small>© 2025 普通の会社員が作る不労所得</small></p> </div> </div> </div> </footer> </div>  </div>  </div> <script> </script> <script> window.onload = function() { const boxElements = document.querySelectorAll('.st-mybox'); console.log('Number of box elements:', boxElements.length); // デバッグ情報を出力 boxElements.forEach(function(boxElement) { const titleElement = boxElement.querySelector('.st-mybox-title'); if (titleElement) { const titleWidth = titleElement.offsetWidth + 10; const borderWidth = window.getComputedStyle(boxElement, null).getPropertyValue('border-top-width'); console.log('Title width:', titleWidth, 'Border width:', borderWidth); // デバッグ情報を出力 boxElement.style.setProperty('--title-width', `${titleWidth}px`); boxElement.style.setProperty('--border-height', borderWidth); } }); }; </script> <script type="text/javascript" src="https://worker-fts.info/wp-includes/js/comment-reply.min.js?ver=6.6.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" id="copy-the-code-js-extra"> /* <![CDATA[ */ var copyTheCode = {"trim_lines":"","remove_spaces":"1","copy_content_as":"","previewMarkup":"<h2>Hello World<\/h2>","buttonMarkup":"<button class=\"copy-the-code-button\" title=\"\"><\/button>","buttonSvg":"<svg aria-hidden=\"true\" focusable=\"false\" role=\"img\" class=\"copy-icon\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"currentColor\"><path d=\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\"><\/path><path d=\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\"><\/path><\/svg>","selectors":[{"selector":"pre","style":"button","button_text":"\u30b3\u30d4\u30fc","button_title":"\u30bf\u30c3\u30d7\u3067\u30b3\u30d4\u30fc\u3067\u304d\u307e\u3059\u3002","button_copy_text":"\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3002","button_position":"inside","copy_format":"","conditions":[]}],"selector":"pre","settings":{"selector":"pre","button-text":"Copy to Clipboard","button-title":"Copy to Clipboard","button-copy-text":"Copied!","button-position":"inside","copy-format":"default"},"string":{"title":"Copy to Clipboard","copy":"Copy to Clipboard","copied":"Copied!"},"image-url":"https:\/\/worker-fts.info\/wp-content\/plugins\/copy-the-code\/\/assets\/images\/copy-1.svg","redirect_url":""}; /* ]]> */ </script> <script type="text/javascript" src="https://worker-fts.info/wp-content/plugins/copy-the-code/assets/js/copy-the-code.js?ver=4.0.0" id="copy-the-code-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/plugins/copy-the-code/assets/js/clipboard.js?ver=4.0.0" id="ctc-clipboard-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/plugins/copy-the-code/assets/js/copy-inline.js?ver=4.0.0" id="ctc-copy-inline-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/plugins/vk-blocks/vendor/vektor-inc/vk-swiper/src/assets/js/swiper-bundle.min.js?ver=11.0.2" id="vk-swiper-script-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/plugins/vk-blocks/build/vk-slider.min.js?ver=1.83.0.1" id="vk-blocks-slider-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/themes/affinger/vendor/slick/slick.js?ver=1.5.9" id="slick-js"></script> <script type="text/javascript" id="base-js-extra"> /* <![CDATA[ */ var ST = {"ajax_url":"https:\/\/worker-fts.info\/wp-admin\/admin-ajax.php","expand_accordion_menu":"","sidemenu_accordion":"","is_mobile":""}; /* ]]> */ </script> <script type="text/javascript" src="https://worker-fts.info/wp-content/themes/affinger/js/base.js?ver=6.6.1" id="base-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/themes/affinger/js/scroll.js?ver=6.6.1" id="scroll-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/themes/affinger/js/st-copy-text.js?ver=6.6.1" id="st-copy-text-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/plugins/st-blocks/assets/bundles/view.js?ver=07224efcfaadd62d42d3" id="st-blocks-view-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-content/plugins/highlighting-code-block/assets/js/prism.js?ver=2.0.1" id="hcb-prism-js"></script> <script type="text/javascript" src="https://worker-fts.info/wp-includes/js/clipboard.min.js?ver=2.0.11" id="clipboard-js"></script> <script type="text/javascript" id="hcb-script-js-extra"> /* <![CDATA[ */ var hcbVars = {"showCopyBtn":"1","copyBtnLabel":"\u30b3\u30fc\u30c9\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3059\u308b"}; /* ]]> */ </script> <script type="text/javascript" src="https://worker-fts.info/wp-content/plugins/highlighting-code-block/build/js/hcb_script.js?ver=2.0.1" id="hcb-script-js"></script> <div id="page-top"><a href="#wrapper" class="st-fa st-svg-angle-up"></a></div> </body></html>