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

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

1. Webサイトの仕組み

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

HTML: ページに表示する内容を定義します（見出し、テキスト、画像など）。
CSS: HTMLで作った内容を、どのように見せるかを設定します（色、文字の大きさ、配置など）。
JavaScript: ページに動きをつけたり、ユーザーの操作に応じてページの内容を変えるために使われます。

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

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」という名前で保存してください。

/* 全体のスタイル */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ヘッダーのスタイル */
header {
    background-color: #f4f4f4;
    text-align: center;
    padding: 20px;
}

/* セクションのスタイル */
section {
    padding: 20px;
    margin: 10px;
}

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

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

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

サーバーとドメインを取得する
- サーバー：ファイルを置く「場所」です。サーバーはホスティング会社から借ります。今回はMixederCloudのMixederISSHを利用します。
- ドメイン：Webサイトの「住所」にあたるもので、例として「example.com」のようなものです。今回はMixederCloudのドメインを利用するため不要です。
ファイルをアップロードする

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

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

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

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

ファイルをアップロードする
- 「index.html」や「style.css」を、フォルダにドラッグ＆ドロップでアップロードします。
Webサイトを確認する
- アップロードが完了したら、ブラウザを開いて取得したドメインにアクセスします
- Webサイトが表示されれば成功です。自分のWebサイトがインターネットに公開され、誰でもアクセスできるようになっています。

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

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

最終更新 7 か月前

役に立ちましたか？

<!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>

/* 全体のスタイル */ body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; } /* ヘッダーのスタイル */ header { background-color: #f4f4f4; text-align: center; padding: 20px; } /* セクションのスタイル */ section { padding: 20px; margin: 10px; }