超簡単WEBサイト作成

WEBサイト作成の基本(HTML&CSS)を学び、無料ブログのデザインをカスタマイズして、見た目ブログではないオリジナルデザインのWEBサイトにしてみよう!

1-1 Webとは何か

そもそもWeb(ウェブ)って何?

Web(ウェブ)とは、インターネットを利用して、文書データで表された画像や文章、映像・音楽などの情報を発信したり見たりすることができる仕組みのことです。また、WEBの正式名称は、WWW(World Wide Web)になります。webの日本語訳は、「クモの巣、クモの巣状のもの」になります。

インターネットって何?

インターネットとは、世界中のコンピュータやスマホが繋がることができる世界レベルの通信回線網のことを言いいます。インターネットはWebだけでなく、IP電話やEメールなど、様々なサービスでも使われています。

Webとインターネットの違いは

Webとインターネットは、「クモの巣状のもの」と「ネット(網)」という意味では、ほぼ同じように思われますが、それをあえて、Webは「クモの巣状の仕組み」、インターネットは「世界通信網」としているのです。

1-2 Webの仕組みはどうなっているの

Webサイトとは

伝えたい情報を1ページにまとめて、インターネット上で公開している文書のことを「Webページ」といいます。Webサイト(web site)は、WEBページの集まりのことです。もちろん、 Webページが1ページしかなくても、Webサイトになります。

Webブラウザとは

インターネット上にある情報(Webページ)を見せてくれるのがWebブラウザです。Webブラウザには、Internet Explorer(インターネットイクスプローラー)、Google Chrome(グーグルクローム)、Safari(サファリ)、Firefox(ファイヤーフォックス)などがあります。

URLとは

URLはUniform Resource Locatorの略。URLは、インターネット上の情報資源の場所とその属性を指定する記述方式で、簡単に言えばネットワーク上の「Webサイト(情報)の住所」のことです。

例えば、パソコン上にあるChromeアイコンをクリックするとGoogleの検索画面が立ち上がります。この検索画面には表示されていませんが、その「URL」は「www.google.com」です。正確には「https://www.google.com/」になります。

1-3 サイトの作成と公開方法

Webサイトはどうやって作成するの

まず、WEBサイトに表示するWEBページは、HTMLという記述言語を使って作成します。具体的には、パソコンなどにインストールしたテキストエディターソフトでHTMLを書きます。

無料のテキストエディターには、TeraPad、Notepad++などがあり、 ダウンロードは次のサイトでできます。

TeraPad:窓の杜からダウンロード

Notepad++:窓の杜:作者サイトからダウンロード

HTMLをテキストエディターで書いてみよう!

テキストエディターで簡単なHTMLを書いてみましょう。

HTML
<html>
こんにちは!
</html>

このHTMLを「hellow.html」という名前を付けて保存します。「.html」は拡張子といい、このファイルが「htmlファイルですよ」という意味があります。このhtmlファイルをダブルクリックすると、ファイルが開きWEBページが表示されます。表示される内容は、「こんにちは!」という文字です。

Webサイトを公開するにはどうすればいいの

作成したWebページ(htmlファイル)を公開するには、Webページを設置する場所としてWebサーバーが必要になります。要するに公開するためのサーバーを用意するのです。

サーバーを用意する方法は、三通りあります。一つ目の方法は、有料ですがレンタルサーバーを使うことです。この方法はドメインを取得したり、Webサーバーに作成するサイトのフォルダやファイルの階層構造を理解し、管理できないとできません。

二つ目は、自前のサーバー(自宅サーバー)を作成することです。この方法は、さらに難しくなります。この方法ができる人はほぼプロになります。

三つ目の方法は、Web上に提供されているブログサービスを利用して公開することです。これが最も簡単な方法になります。この方法では、HTMLとCSSを学びながら、デザインなどのブログのカスタマイズができます。さらに見た目が日記風のブログではない、自分好みのWebサイトにもできます。

2-1 HTMLとは

HTMLとはWebページを作成するための記述言語

HTML(HyperText Markup Language)は、Webページを作成するための記述言語です。HTMLでは、表示する文章(テキスト)をブラウザが解釈できるドキュメントの表示形式の指定「マークアップ」を行います。

基本的なHTMLドキュメントの例を次に示します。

HTML
<!DOCTYPE html>
<html>
<head>
<title>HTMLドキュメントの例</title>
</head>
<body>
<p>初めてのHTML</p>
</body>
</html>

ブラウザの表示結果は次のようになります。

HTMLドキュメントの例

初めてのHTML

タグ(Tag)と要素(Element)

タグ(Tag)とは、「 <」記号と「>」記号を用いて構成されるもので、 開始タグ終了タグの2種類があり、この「<」記号から「>」記号までの部分の文字列のことを指します。

要素(Element)とは、開始タグと終了タグを用いて構成される全体を指します。

例えば、<p>(開始タグ)</p>(終了タグ)「pタグ」といい、pタグで囲まれた文字列全体を「p要素」といいます。このp要素による表示形式は「段落」になります。

タグ
タグ
<p>初めてのHTML</p>
要 素

属性

要素には「属性」という追加の情報を含めることができ、要素に対するオプション設定のような役割をします。次の例で、段落のp要素に追加されたalignは、「水平方向の配置位置」を示す属性です。属性値は、属性に対する具体的な値を示すもので、属性値centerを指定すると「水平方向の中央寄せ」になります。

属性名
属性値
<p align="center">初めてのHTML</p>
属 性

文書型宣言

HTMLドキュメントでは、最初に文書型宣言を記述します。HTML5の文書型宣言は、仕様で「<!DOCTYPE html>」と決められています。

<!DOCTYPE html>

コメントの記述

HTMLの記述のうち、「<!--」と「-->」で囲んだ内容はブラウザで表示されない「コメント」を表します。コメントは、HTMLの内容についての説明や覚書として使われます。
<!-- この内容は表示されません -->

2-2 CSSとは

CSSとは、HTML文書のスタイルを設定するための言語

CSSは、HTMLで作成された文書のデザインの設定に使用される言語です。「Cascading Style Sheets」の略で、「段々になっているスタイルシート」といった意味になります。

↑このページのトップヘ