ウェブページの作り方:全体像

ウェブページの作り方について、作成から公開までの全体像をざっくりと説明します。その前に、前提と準備のお話があります。前提では、ウェブページ、ウェブサイト、ホームページの違いを説明し、準備ではブラウザとエディタについて説明します。前提と準備の後に、ウェブページの作り方が始まります。

前提

ウェブページ、ウェブサイト、ホームページの違い

• ウェブページ
  • インターネット上に存在し、ブラウザによって表示される個々のページを指す
  • 例:今表示しているこの記事
• ウェブサイト
  • 複数のウェブページが集まった特定のサイト全体を指す
• ホームページ
  • 現在では、ウェブサイトと同じように使われている
  • 本来は、ブラウザを立ち上げたときに最初に表示されるページを指す
  • いつからかホームページは、サイトのトップページを指すようになり、現在では、ウェブサイトを指すことが一般的

ホームページ=ウェブサイトは誤用です。

準備

ブラウザとエディタ

• ブラウザ
  • ウェブページを表示するためのソフトウェア
  • 例:Google Chrome、Mozilla Firefox、Microsoft Edge、Safari、Operaなど
• エディタ
  • プログラムやテキストを作成・編集するためのソフトウェア
  • 例:Notepad(メモ帳)、Visual Studio Code、Sublime Textなど

エディタでウェブページのファイルを作成・編集し、その内容をブラウザで表示させます。ウェブページを作成するには、ブラウザとエディタを用意してください。

ウェブページの作り方

ウェブページの作成

HTML/CSS/JavaScriptでのコーディング

ウェブページを作るには、HTML、CSS、JavaScriptのコードを記述したファイルを作成します。それぞれの役割は以下の通りです。

• HTML
  • ウェブページの構造と内容(コンテンツ)を定義する
• CSS
  • ウェブページの見た目やレイアウトを装飾する
• JavaScript
  • ウェブページに動きを持たせる

HTMLで構造とコンテンツを作り、CSSでスタイルを設定し、JavaScriptで動的な機能を追加することで、インタラクティブなウェブページが作成できます。

ウェブページの公開準備

レンタルサーバの契約

レンタルサーバ(例:Conoha、mixhost、エックスサーバなど)とは、作成したウェブページのファイルを保管し、インターネット上で公開するために必要なサーバを借りることができるサービスです。レンタルサーバにファイルを置くことで、ウェブページが全世界に公開されます。

ウェブサイトに訪れた人は、レンタルサーバにアップロードされたファイルの内容を閲覧します。

» ConoHa WING キャンペーン実施中！ / mixhost / ã‚¨ãƒƒã‚¯ã‚¹ã‚µãƒ¼ãƒãƒ¼ / ãŠåå‰.com レンタルサーバー

ドメインの取得

自分のウェブサイトに独自のURL(例:www.example.com/のexample.comに当たる部分)を付けたい場合は、ドメインを取得します。ドメインとは簡単に言えば、ウェブサイトの住所です。

ドメインは、ドメイン登録サービス(例:お名前.com、バリュードメイン、ムームードメインなど)から取得できます。

» â– ãƒ‰ãƒ¡ã‚¤ãƒ³å–るならお名前.comâ–  / ãƒ‰ãƒ¡ã‚¤ãƒ³ç™»éŒ²ã€ãƒãƒªãƒ¥ãƒ¼ãƒ‰ãƒ¡ã‚¤ãƒ³ã€‘ / ãƒ ãƒ¼ãƒ ãƒ¼ãƒ‰ãƒ¡ã‚¤ãƒ³

※ドメイン取得は必須ではなく、レンタルサーバ側で用意されたURLも利用可能です。

レンタルサーバとドメインの連携

ドメインを取得した場合は、レンタルサーバとドメインを連携させます。具体的な方法については、各レンタルサーバやドメイン登録サービスのガイドをご確認ください。

SSL証明書の設定

セキュリティ向上とSEO対策のためにSSL証明書を設定し、サイトをHTTPS化します。これにより、URLが「https://」で始まるようになります。

ウェブページの公開

FTPソフトでファイルのアップロード

作成したウェブページのファイルをレンタルサーバに配置します。FTPソフトかレンタルサーバのFTP機能を使ってファイルをアップロードします。

• FPTソフト
  • ネットワーク経由でコンピュータ間でファイルを送受信するためのソフトウェア
  • 例:Cyberduck、WinSCP、FFFTPなど

公開後の確認と設定

表示・動作確認

各ブラウザやデバイスでウェブページが正しく表示されるか確認します。自分のウェブサイトのURLをブラウザのアドレスバーに入力してアクセスしてください。

SEOと解析ツールの設定

Google Search ConsoleやGoogle Analyticsなどの分析ツールを設定し、サイトパフォーマンスを可視化します。必要なければ設定しなくても問題ありません。

まとめ

以上がウェブページの作り方の全体像です。この手順に沿って進めることで、自分自身でウェブページを作成し公開することができます。具体的な作業内容については、当ブログや他のリソース(書籍や動画など)も参考にしてください。

おすすめ記事

» HTML|入門ガイド

» CSS|入門ガイド

» JavaScriptの記事一覧

» å€‹äººãŒãƒãƒƒãƒˆä¸Šã§æƒ…報発信するための手段