MIXEDER For Developers
MixederCloud MIXEDERGrapesFilesLogin to console
MixederCloud Docs
MixederCloud Docs
  • 👋MIXEDER For Developersへようこそ!
  • まずはここから!
    • StartFromBeginner
  • 🍇GrapeAPI
    • GrapesAPIについて
    • GrapesAPIs 利用規約
    • APIリファレンス
      • GrapeQRAPI リファレンス
      • GrapeFaviconAPI リファレンス
      • GrapeAvaterAPI リファレンス
        • GrapesAPI サンプルコード
      • GrapesAPI(個人向け) リファレンス
    • Swagger
  • Conversion API
    • Conversion APIとは?
    • APIドキュメント
      • SVG Via PNG API
      • PNG Via HEIC API
      • HTML to PDF API
  • 🌍MixederPublicAPIs
    • MixederPublicAPIについて
    • サンプルコードを利用する前に
    • APIリファレンス
      • WhoisAPI
        • WhoisAPI TLDリスト
      • ConvertAPI
      • TimeZoneAPI
      • WEBFetchAPI
      • NETRecordAPI
      • WebInfoAPI
      • ImageConvertAPI
      • Profanity Detection and Cleaning API
      • Similarity Determination API
      • API利用料金
      • JSON Scalable Database (JSDB) API
        • ログイン・サインインシステムのサンプル
        • シンプルなメモ帳のサンプル
        • JSDB V1とV2の相違点
      • JSON Database API V2
        • JSONDB Login System (Node.js)
        • JSONDB管理アプリの紹介
      • EventFront MAIL API ドキュメント
  • 🐣TinytoolsAPI
    • TINYTOOLSAPIについて
    • TINYTOOLSAPI for Enterpriceについて(英語)
  • Product Guides
    • 📪How to configure MTM(Mixeder Traffic Manager) with MixederWaterStorage
      • VMC Machine specs per plan
    • MIXEDER ISSHとは?
    • 🖥️開発者向けAPIの公開について
    • 📎MixederIAM(Permissions)
  • MixederCloudのサービス料金・お支払サイクルについて
  • MixederCloudでウェブサイトを作成しよう
    • 🏋️MixederCloudでウェブサイトを作成しよう
GitBook提供
このページ内

役に立ちましたか?

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

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

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

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

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

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

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

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

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

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

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

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

  2. Webサイトを確認する

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

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


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

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

最終更新 7 か月前

役に立ちましたか?

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

🏋️
ISSH