広告

超簡単ホームページ入門

2022.10.10更新

JavaScriptでプログラミング入門のタイトル画像になります

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

おまけ１　超簡単ホームページ入門

「JavaScriptでプログラミング入門」を終えた方へ、応用編に移る前に少しだけホームページを作る為の言語、「html」と「css」について解説いたします！

あくまでも応用編をこなす為だけにいろいろなテクニックをかいつまんで、とびとびに説明していきますので、もっと正確にきちんと知りたい！という方は「html 入門」などのキーワードでインターネット検索してそちらで一通り学んでみてください！

「何を言っているかわからない」という方は

1日目 必要なものとキホンの知識

2日目 最初の設定と実行、エラーの消し方

3日目 プログラムの書き方

このへんをご覧ください！

それではいってみましょう！

注意

だいぶ説明を省略しながら駆け足で無理矢理に説明していきます！

よくわからないトコロもたくさんあると思いますので、「こんな技術があるのか」程度に流し読みしていって頂ければと思います。

htmlとcssとJavaScript

あらためまして、htmlとcssとJavaScriptの関係について少しお話します。

html(エイチティーエムエル)

htmlっていうのはホームページを記述する為の言語になります。

何かを計算したり、動きをつけたりする事はできません。

css(シーエスエス)

cssっていうのはホームページを装飾する為の言語です。

別名で「スタイル」と言われたりもします。

色をつけたり、文字を大きくしたりとかそんな感じです。

「html」で書いた文書を「css」を使って装飾していきます。

昔は「html」だけでやってましたが、装飾部分は分けた方が何かと都合が良いという事で文書部分は「html」で装飾部分は「css」でというようになりました。

JavaScript(ジャバスクリプト)

そしてホームページ上で何かを計算したり、動きをつける為の言語が「JavaScript」になります。

JavaScriptを使えばhtmlとcssで作ったホームページに動きなどの変化をつけられるようになるというワケです。

ちなみに「JavaScript」では基本的にファイルの内容を変更したりする事はできません。

このへんの壁にぶちあたった人は「html」・「css」・「JavaScript」をある程度学んだあとにまずは「php　入門」などのキーワードでインターネット検索して学んでみるといいかもしれません。

htmlを学ぼう！

それではまずhtmlを学んでいきましょう。

さっそくプログラムを書いていきます。

実行の仕方などは「JavaScript」の手順と変わらないので

2日目 最初の設定と実行、エラーの消し方

このへんをご覧ください！

■おまけ１　プログラム１■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おまけ１　プログラム１</title>
</head>
<body>
	<p>超簡単ホームページ入門</p>
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像1

■説明■

まずは基本のカタチです。


<!DOCTYPE html>

一番最初のこちらはドックタイプというものなのですが、今は特に気にせずおまじないだと思って最初に書いておいてください。

続いて「html」の本体ですが、「」かぎカッコのように始まりと終わりを表しながら書いていきます。


<html>

</html>

これが一番大きな部分で見てわかるように「html」ですよーって意味を表しています。

終わりの部分は「/」を前につけます。

この始まりと終わりをきちんと書かないとエラーになってしまうので注意です。

ではこの中身はと言いますと大きく２つの部分に分かれます。

<head>部分


<head>
<meta charset="UTF-8">
<title>おまけ１　プログラム１</title>
</head>

この部分はヘッダーと言いまして「<head>～</head>」の間に主にそのホームページに関する情報の他、「css」や「JavaScript」などもこの部分に書いていきます。

「<meta charset="UTF-8">」という部分は文字コードと言いまして何の文字コードで書かれているのかをここに書きます。

現在の主流は「UTF-8」というものなのですが、これは使っているテキストエディターで設定します。

メモ帳の場合で「UTF-8」にする場合は

簡単なホームページの作り方の説明画像2

保存画面下の方で「UTF-8」に合わせて保存します。

文字コードを合わせないとおかしな文字が表示されるいわゆる「文字化け」という状態になります。

ここで注意なのですがちょっと古いメモ帳を使っている場合「UTF-8」がない、または「UTF-8」に合わせているのに文字化けしてしまう可能性があります。

詳しい理由は省略しますが、その場合はテキストエディタの文字コードを「ANSI」というのにして「meta charset」の部分を


<meta charset="Shift_JIS">

「Shift_JIS」というものにすれば直るかもしれません。

「<title>」タイトルという部分は

簡単なホームページの作り方の説明画像3

ここに表示されるタイトルになります。

<body>部分


<body>
	<p>超簡単ホームページ入門</p>
</body>

そして「<body>～</body>」の中に実際に画面に表示される本文と言いますか内容を書いていきます。

この「<p>」というのは段落を表す記号でこれを入れると文章を段落としてそこで区切って表示してくれます。

「<p>」の前にスペースが空いているのは「JavaScript」のプログラムなどと同じようにプログラムを見やすくする為に空けております。

なので空けても空けなくても大丈夫です。

段落を表す「<p>」記号の他に題名・見出しを表す「<h1>」記号などいろいろあります。

一度この「<p>」やら「<h1>」を抜いて書いてみるとわかりやすいです。

まずは「<p>」やら「<h1>」を抜いた場合です。

■おまけ１　プログラム２■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おまけ１　プログラム２</title>
</head>
<body>
		超簡単ホームページ入門

その１

あいうえおあいうえおあいうえおあいうえおあいうえお
かきくけこかきくけこかきくけこかきくけこかきくけこ

その２

あいうえおあいうえおあいうえおあいうえおあいうえお
かきくけこかきくけこかきくけこかきくけこかきくけこ

その３

あいうえおあいうえおあいうえおあいうえおあいうえお
かきくけこかきくけこかきくけこかきくけこかきくけこ
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像4

■説明■

見た目では文章を整えたつもりでもコンピューターの側からは知ったこっちゃないのでこんな感じで表示されてしまいます。

なのでそれをコンピューターに教える為に「<p>」やら「<h1>」を書いていきます。

続きまして「<p>」・「<h1>」などを入れた場合です。

■おまけ１　プログラム３■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おまけ１　プログラム３</title>
</head>
<body>
<h1>超簡単ホームページ入門</h1>
<h2>その１</h2>
<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
<h2>その２</h2>
<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
<h2>その３</h2>
<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像5

■説明■

それっぽくなりましたね！

違いをわかりやすくするためにつめつめにプログラムを書いてしまいましたが、見にくいのでそれぞれに空白などを空けても大丈夫です。

このように「html」では「<p>」やら「<h1>」のような記号を使ってコンピューターの側に「それぞれの文章の役わり」を伝えながらプログラムを書いていきます。

「html」やら「head」やら「body」やら「p」やらをひっくるめて「タグ」って言います。

もちろんこれだけではなくいろいろな種類のタグがあります。

何も言わずに使ってしまいましたが、「h1」は「h1～h5」までありまして題名のレベルによって使い分けます。

主題、副題みたいな感じです。

「h1」は最大の主題になりますので一つのページで一回しか使ってはいけません。

タグの終わりがないタグ

タグの終わりがない例外のタグもいくつかあります。

画像を表示する「img」タグや改行の「br」タグなどがそれにあたります。

プログラムで確認してみましょう！

事前にプログラムを保存している場所と同じトコロに「test.jpg」という名前で適当な画像ファイルを用意してください。

■おまけ１　プログラム４■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おまけ１　プログラム４</title>
</head>
<body>
	<p>画像を表示してみよう！</p>
	<img src="test.jpg" width="300px" height="200px" alt="画像">
	<p>改行してみよう！</p>
	<p>あいうえお<br>かきくけこ<br>さしすせそ</p>
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像6

■説明■

画像が表示されたと思います。

改行の方は文章の途中で「<br>」と入れたトコロが改行しているかと思います。

このようにタグの終わりがいらないタグも一部あります。

いちよう画像を表示する「img」タグは


<img src="画像ファイルへのパスとファイル名" width="横の長さ" height="縦の長さ" alt="画像の説明分など">

のように使います。

「画像ファイルへのパス」っていうのは画像ファイルの場所の事を言います。

プログラムと同じフォルダ内であれば特に気にせず画像ファイルの名前だけ書けば大丈夫です。

長さの「px」っていうのはピクセルという長さの単位になります。

詳しくは説明しませんが、中の数字を適当に変えたりしてみればなんとなくわかると思います。

最後の「alt」っていうのは画像が表示されなかった時に表示される文章になります。

下へ下へと表示される

ここらで気づいたかもしれませんが、「html」は基本下へ、下へと表示されます。

横に並べて表示する事などももちろんできます。

いくつか方法がありますが、その中の一つだけ後ほど紹介します。

他のページにつなげるタグ

せっかくなので他のページへとつなげる事のできる「<a>」アンカータグというものもご紹介します。

それぞれ指定された名前でファイルを２つ作ってそれぞれにプログラムを書いて同じ場所に保存してください。

■おまけ１　プログラム５(その１)■

ファイル名jspgm15_5_1.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おまけ１　プログラム５(その１)</title>
</head>
<body>
	<p>ページ１になります！</p>
	<p>あいうえおあいうえおあいうえおあいうえお</p>
	<p><a href="jspgm15_5_2.html">ページ２へ</a></p>
</body>
</html>

■おまけ１　プログラム５(その２)■

ファイル名jspgm15_5_2.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おまけ１　プログラム５(その２)</title>
</head>
<body>
	<p>ページ２になります！</p>
	<p>かきくけこかきくけこかきくけこかきくけこ</p>
	<p><a href="jspgm15_5_1.html">ページ１へ</a></p>
</body>
</html>

■実行結果■

ページ１

簡単なホームページの作り方の説明画像7

ページ２

簡単なホームページの作り方の説明画像8

■説明■

それぞれのページを「<a>」アンカータグでつなげてみました。

これで他のページへとジャンプする事ができるようになります。

使い方は


<a href="つなげたいページのパスとファイル名">表示するメッセージ</a>

のようになります。

htmlは文章の構造を記述する

まとめると「html」は文章のおおもとの構造を書いていきます。

これを書く事によってコンピューターの側にそれぞれの文章の役わりを伝えます。

見た目などを気にしなければ「html」部分さえしっかり書ければあとはネット上にアップロードするだけで普通にホームページとして使えます。

ホームページの公開

ホームページをインターネット上に公開するにはレンタルサーバーというものを借りてそこにアップロードする事によって公開する事ができます。

詳しくは「おまけ３　ホームページの公開」こちらをご覧ください。

cssを学ぼう！

続けて「css」の説明に入ります。

「css」によって文章の見た目を細かく設定する事ができます。

「html」のヘッダー部分に書いていきます。(通常cssはファイルを別にして記述しますがここでは説明を簡単にする為に同じファイル内に記述していきます)

さっそくプログラムを書いてみましょう！

■おまけ１　プログラム６■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

body{
	background-color: aqua;
	text-align: center;
}

h1{
	color: red;
	font-size: 48px;
}

h2{
	color: green;
}

p{
	color: blue;
}

</style>
<title>おまけ１　プログラム６</title>
</head>
<body>
	<h1>超簡単ホームページ入門</h1>
	<h2>その１</h2>
	<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
	<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	<h2>その２</h2>
	<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
	<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	<h2>その３</h2>
	<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
	<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像9

■説明■

ヘッダー部分の


<style>

body{
	background-color: aqua;
	text-align: center;
}

h1{
	color: red;
	font-size: 48px;
}

h2{
	color: green;
}

p{
	color: blue;
}

</style>

こちらが「css」になります。

「<style> ～ </style>」の間にタグの種類などを書いてその色やその中の字の大きさ、文章の位置などを書いていきます。

上のプログラムだと「body」全体の色をアクアにして、中の文章を「text-align: center;」で中央配置に、「h1」は文字の大きさを「48px」にして色をレッドに・・・、とかみたいな感じです。

とてもおおざっぱに書いてしまいましたが、もちろんもっと細かく設定して、一部分だけ色を変えたりなど繊細に表現する事ができます。

cssは文章の装飾を記述する

まとめると「css」はホームページ上の文章の色を変える、文字の大きさを変えるなど装飾部分を書いていきます。

cssの「default値(初期値)」

特に「css」を自分で設定しなくても、すべてのタグには最初から「default値(最初に設定されている値)」というものが設定されております。

たとえば「p」タグだと文字の大きさとか文字の色とか文字同志の幅などなど・・・。

その他にも表示するかどうかなど実にいろいろな項目が設定されております。

ですので「css」を設定するというのは正確に言いますとその「css」の設定を変更するみたいな作業になります。

この「default値(初期値)」はブラウザによって異なります。

JavaScriptでタグを書き換える

そしてJavaScriptの出番ですが、JavaScriptを使うとこのタグとその内容そのものをリアルタイムに書き換える事ができるので、その結果、アニメーションなどの動きをつける事ができるようになります。

そちらに関しましては

JavaScriptテクニック集

このへんで説明いたしますので、ここでは応用編に必要なタグの知識とcssの技術をもう少し説明します。

「div」タグ

まずはとてもよく使う「div」タグの紹介です。

これは汎用タグ(色々な事に使えるタグ)とか呼ばれているタグで自分の好きな部分に名前をつけてそこだけ「css」の設定を好きなようにできたりします。

プログラムで確認してみましょう！

とりあえずは「div」タグだけを設定してみます。

■おまけ１　プログラム７■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おまけ１　プログラム７</title>
</head>
<body>
	<h1>超簡単ホームページ入門</h1>
	<div id="top_block">
		<h2>その１</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
	<div id="middle_block">
		<h2>その２</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
	<div id="bottom_block">
		<h2>その３</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像10

■説明■

「div」タグだけを設定してみました。

まだ「css」を設定していないので何も変化はないと思います。(「p」タグと同じ段落の働きもあるので「div」タグで囲った部分は区切られて改行されます)


<div id="名前">

	～内容～

</div>

設定の仕方ですが、「id」というトコロに名前を付けます。

自分で管理する名前なので好きな名前で大丈夫です。

すると「<div id="名前"> ～ </div>」で囲まれた部分がその名前で管理できるようになります。

(一つのページ内で同じ名前のidを使ってはいけません！)

では何か「css」を試しに設定してみます。

■おまけ１　プログラム８■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

#top_block{
	width: 400px;
	height: 200px;
	background-color: red;
}

#middle_block{
	width: 400px;
	height: 200px;
	background-color: green;
}

#bottom_block{
	width: 400px;
	height: 200px;
	background-color: blue;
}

</style>
<title>おまけ１　プログラム８</title>
</head>
<body>
	<h1>超簡単ホームページ入門</h1>
	<div id="top_block">
		<h2>その１</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
	<div id="middle_block">
		<h2>その２</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
	<div id="bottom_block">
		<h2>その３</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像11

■説明■

「css」を設定する時は頭に「#」をつけてその名前を書きます。

それぞれに「width→横の長さ」・「height→縦の長さ」を設定して枠のようなものを作り背景の色を別々に設定してみました。

こんな感じで「div」要素を使うと自分の好きな場所で区切っていろいろな設定をできるようになります。

文章の段組み(文章をブロックごとに区切って横に配置するなど)もこの「div」タグを使って作ったりします。

広告

絶対配置

次は「div」と「css」の「position」というものを使った絶対配置というものを説明します。

絶対配置というのはそれぞれのブロックの配置を直接数値で指定してそこに配置するというものになります。

先ほどのプログラムに少し加えて試してみましょう。

■おまけ１　プログラム９■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

#base_block{
	width: 500px;
	height: 400px;
	background-color: aqua;
	position: relative;
}

#top_block{
	width: 400px;
	height: 200px;
	background-color: red;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

#middle_block{
	width: 400px;
	height: 200px;
	background-color: green;
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 5;
}

#bottom_block{
	width: 400px;
	height: 200px;
	background-color: blue;
	position: absolute;
	top: 60px;
	left: 60px;
	z-index: 10;
}

</style>
<title>おまけ１　プログラム９</title>
</head>
<body>
	<h1>超簡単ホームページ入門</h1>
	<div id="base_block">
		<div id="top_block">
			<h2>その１</h2>
			<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
			<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
		</div>
		<div id="middle_block">
			<h2>その２</h2>
			<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
			<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
		</div>
		<div id="bottom_block">
			<h2>その３</h2>
			<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
			<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
		</div>
	</div>
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像12

■説明■

「div」で名前をつけたブロックをそれぞれ重ね合わせてみました。

この絶対配置にすると今までは下へ下へと自動的に配置されていたブロックを自分で指定した場所に配置できるようになります。

使い方はまず絶対配置にしたい「div」のブロックすべてを「div」タグをもう一つ作って囲みます。


<div id="base_block">

	～絶対配置にしたいブロックを入れる～

</div>

上のプログラムだとこちらですね。

「base_block」という名前ですがもちろん好きな名前で大丈夫です。

そして絶対配置にしたい「div」のブロックをすべて中に書いたら「css」の設定をします。


#base_block{
	position: relative;
}

まず下地となる「base_block」の「css」ですがこれはそのまま覚えてください。

「position: relative;」というものを書けば大丈夫です。

これは絶対配置にしますよ！という合図みたいなものになります。

今回見た目わかりやすいように「width,height」で枠を作りましたがこれはなくても大丈夫です。

あとは絶対配置にしたいブロックの「css」を設定します。


#top_block{
	width: 400px;
	height: 200px;
	background-color: red;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

こちらは「position: absolute;」というものに設定します。

そして、


top: 上からの距離
left: 左からの距離
z-index: 重なり順(数が小さいほど下になる)

これらを設定すれば終了です。

重なり順の数字は特に「1,2,3」など連続した番号でなければいけないというキマリはないので適当で大丈夫です。

クラス

最後に「class」というものを説明します。

「div」で複数のブロックを作った時に同じ「css」を適用させたい！みたいな時に使います。

■おまけ１　プログラム１０■


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

.style1{
	background-color: black;
	color: white;
	text-align: center;
}

.style2{
	background-color: yellow;
	color: black;
	text-align: left;
}

</style>
<title>おまけ１　プログラム１０</title>
</head>
<body>
	<h1>超簡単ホームページ入門</h1>
	<div class="style1">
		<h2>その１</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
	<div class="style1">
		<h2>その２</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
	<div class="style1">
		<h2>その３</h2>
		<p>あいうえおあいうえおあいうえおあいうえおあいうえお</p>
		<p>かきくけこかきくけこかきくけこかきくけこかきくけこ</p>
	</div>
</body>
</html>

■実行結果■

簡単なホームページの作り方の説明画像13

■説明■

先ほどのプログラムを少し変えて同じ背景色、文字色などを設定しました。

使い方は「<div id="名前">」とほぼ同じような感じで


<div class="名前">

	～内容～

</div>

「id」を「class」にして名前を付けます。

「css」のほうは


.style1{
	background-color: black;
	color: white;
	text-align: center;
}

「#」が「.」に変わるだけでほぼ変わりありません。

「class」を使えば「id」で名前を付けた時と違って何度でも使えるので複数の場所に同じ色や文字の大きさなどを適用させたい時に使います。

「id」と「class」を一緒に使う事もできます。

これは自分でホームページを作ってみないと最初使い分けが難しいと思いますのでなんとなく覚えてもらえば大丈夫です。

終わりに

このページだけですべて理解する事はとてもできないので、なんとなくこんなものかなと感じてもらえれば大丈夫です。

それでは

おまけ２　JavaScriptテクニック集

こちらのページを読みつつ応用編に挑戦してみてください！

CONTENTS

～はじめに～

～基本編～

～応用編～

広告

プチテックのロゴの画像になります

広告

Copyright 2016 K.N/petitetech.com