search
Ctrlk
MIXEDERGrapesFiles

🏋️MixederCloudでウェブサイトを作成しよう

このページではMixederCloudを活用し、安く簡単に自分のWebサイトを作成する方法を紹介していきます。

hashtag
1. Webサイトの仕組み

Webサイトは、インターネット上で情報を表示するためのページの集まりです。普段ブラウザ（ChromeやSafariなど）で見るページは、HTML、CSS、JavaScriptといった「コード」でできています。このコードが、ページの見た目や配置、色などを決めています。

  • HTML: ページに表示する内容を定義します（見出し、テキスト、画像など）。

  • CSS: HTMLで作った内容を、どのように見せるかを設定します（色、文字の大きさ、配置など）。

  • JavaScript: ページに動きをつけたり、ユーザーの操作に応じてページの内容を変えるために使われます。

まずは、HTMLとCSSの基本を書いてみましょう。これは、Webサイトの基礎的な「見た目」と「内容」を決める部分です。

hashtag
2. HTMLとCSSの書き方、サンプルコード

Webサイトのコードは、メモ帳や無料のテキストエディタ（例: Visual Studio CodeやAtomなど）を使って書きます。

HTMLの基本

まず、HTMLという「内容」を書くファイルを作ります。以下のコードをコピーし、「index.html」という名前で保存しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルWebサイト</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>私のWebサイト</h1>
        <p>ようこそ、私のWebサイトへ！</p>
    </header>
    <main>
        <section>
            <h2>自己紹介</h2>
            <p>こんにちは、これはサンプルのWebサイトです。</p>
        </section>
    </main>
</body>
</html>

CSSの基本

次に、HTMLで作成した内容に「デザイン」を付けるCSSファイルを作ります。このファイルを「style.css」という名前で保存してください。

これで、Webサイトの「index.html」と「style.css」という2つのファイルができました。ブラウザで「index.html」を開くと、自分のWebサイトが表示されます。

hashtag
3. ファイルのアップロード方法

Webサイトをインターネットに公開するには、作成したファイルを「サーバー」にアップロードします。サーバーは、インターネット上でファイルを公開するための「データを置く場所」です。サーバーを借りると、世界中の人が自分のサイトにアクセスできるようになります。サーバーを利用するために必要な情報は、以下の手順で確認・取得できます。

  1. サーバーとドメインを取得する

    • サーバー：ファイルを置く「場所」です。サーバーはホスティング会社から借ります。今回はMixederCloudのMixederISSHを利用します。

    • ドメイン：Webサイトの「住所」にあたるもので、例として「example.com」のようなものです。今回はMixederCloudのドメインを利用するため不要です。

  2. ファイルをアップロードする

今回はMixederCloudのMixederISSHを利用するため、ウェブで簡単に利用することができるファイルマネージャーを利用していきます。

  • MixederCloudのISSHarrow-up-right、ドメインエイリアスを入力しましょう。このエイリアスは英数文字で入力してください

https://hosting.mixedercloud.com/エイリアス/ でウェブサイトにアクセスできるようになります。 パスワードにはウェブサイトのファイルを管理するコントロールパネルに利用したいパスワードを入力しましょう。

ISSHの作成が完了したら、早速先ほどのファイルをアップロードしてみましょう

「ファイルマネージャーにログイン」をクリックすると、ファイルマネージャーにアクセスすることができます。

  1. ファイルをアップロードする

    • 「index.html」や「style.css」を、フォルダにドラッグ＆ドロップでアップロードします。

  2. Webサイトを確認する

    • アップロードが完了したら、ブラウザを開いて取得したドメインにアクセスします

    • Webサイトが表示されれば成功です。自分のWebサイトがインターネットに公開され、誰でもアクセスできるようになっています。

このように、HTMLとCSSで作ったファイルをサーバーにアップロードし、ドメインを通じて公開することで、自分のWebサイトをインターネット上に簡単に表示できます。

前へMixederCloudのサービス料金・お支払サイクルについて次へMixederCloud PTB Terms

最終更新