こんにちは、ヨロと申します。
今回は初心者向けのホームページの作り方という事で、
HTMLとCSSの基本的な書き方をご紹介。
初心者の方にはおすすめの入門編で、実際に簡単なホームページを一緒に作ってみましょう。
という事で今回は、実際にこういうサイトを作ってみます。
このサイトを作るにあたって必要なものは、
パソコンとパソコンに元々インストールされているメモ帳だけ(Macの場合はテキストエディット)
という事で、早速まずはパソコンのメモ帳を開いてみましょう。
HTMLとCSSタグの書き方、ホームページの作り方｜初心者・入門編
という事でまずは「HTML」の基本的な書き方から、
まず最初にメモ帳に書く内容というのは、基本的なHTMLの形（テンプレート）から
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>これはHTMLの基本的な形で、HTMLを書く際には毎回書く事になります。
これらは毎度コピーして貼り付ければOK、という事で、わざわざ覚える必要はありません。
内容（HTMLの書き方）を１つずつ説明すると、
<html>～</html>このファイルはHTMLですよ～という事を意味してます。
<head>～</head>タイトルなど、ファイルの情報を書く部分
<title>～</title>ページのタイトルを書く部分。ここに書いたタイトルがインターネット上や、ブラウザのタブに表示される
「お気に入り」や「ブックマーク」に登録した際のタイトルにもなる
<body>～</body>実際にブラウザに表示される文章や画像などの処理をここに書いていく。
試しにタイトルとbodyの中に文字を書いてみる
<!DOCTYPE html>
<html>
<head>
<title>我が家の愛犬ポチの日記</title>
</head>
<body>
我が家の愛犬ポチの日記
うちの可愛い愛犬ポチを紹介するホームページです。
可愛いわんちゃんがうちに来てくれました
ポチの好きな食べ物
ポチの嫌いな食べ物
ポチが１才になりました
</body>
</html>この時点で、メモ帳を保存してみましょう。
ファイルの保存方法はメニューバーの「ファイル」から「上書き保存」を選び、ファイル名は「index.html」で保存しましょう。
そして、今開いているメモ帳はそのまま閉じずに、保存した「index.html」をダブルクリックで開く。
そうすると、先程bodyの中に入力した文字が、横並びになって表示されているはず。
※この時点で自分のパソコンのブラウザでは内容が表示されていますが、
これらのファイルはまだサーバにアップロードしていないため、他のパソコンからは見ることはできません。
これが、HTMLの基本。
ここまで出来ればもうホームページを作る事は簡単。
それぞれの文章をHTMLタグで囲む
まずは「我が家の愛犬ポチの日記」の部分を「h1タグ」で囲んでメモ帳を保存し、インターネット(ブラウザ)を更新。
<h1>我が家の愛犬ポチの日記</h1>そうするとこんな感じ↓
次に「うちの可愛い愛犬ポチを紹介するホームページです。」の部分を「h2タグ」で囲んでメモ帳を保存。
<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>するとこんな感じ。
そして、
「可愛いわんちゃんがうちに来てくれました」「ポチの好きな食べ物」「ポチの嫌いな食べ物」「ポチが１才になりました」のそれぞれを文章を「pタグ」で囲む。
<p>可愛いわんちゃんがうちに来てくれました</p>
<p>ポチの好きな食べ物</p>
<p>ポチの嫌いな食べ物</p>
<p>ポチが１才になりました<p>そうするとこんな感じ。
最終的にこんな感じ。
<!DOCTYPE html>
<html>
<head>
<title>我が家の愛犬ポチの日記</title>
</head>
<body>
<h1>我が家の愛犬ポチの日記</h1>
<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>
<p>可愛いわんちゃんがうちに来てくれました</p>
<p>ポチの好きな食べ物</p>
<p>ポチの嫌いな食べ物</p>
<p>ポチが１才になりました<p>
</body>
</html>これらの「h1タグ」「h2タグ」というのは見出し部分に使うタグで、
「pタグ」は、段落を意味するタグになるのですが、ここでは詳しくは覚えなくてもOK。
HTMLに画像を貼り付ける
次に画像を貼り付ける方法で、今回は「inu.png」という画像を用意しました。
この「inu.png」という画像を「index.html」のファイルがある場所と同じ場所に置いて下さい。
そして画像を貼り付けるHTMLタグは、
<img src="ファイル名">このタグは、HTML内の自分が画像を表示させたい部分に書きます。
そうすると、
<!DOCTYPE html>
<html>
<head>
<title>我が家の愛犬ポチの日記</title>
</head>
<body>
<h1>我が家の愛犬ポチの日記</h1>
<img src="inu.png">
<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>
<p>可愛いわんちゃんがうちに来てくれました</p>
<p>ポチの好きな食べ物</p>
<p>ポチの嫌いな食べ物</p>
<p>ポチが１才になりました<p>
</body>
</html>その結果、
CSS(スタイルシート)の書き方と読み込み方
次に、今回は「CSS」で、HTMLの内容全体を中央に寄せたいと思います。
CSSとは、文字の色を変えたり、画像の配置を変えたりといろいろなデザインを指定出来るもので、
CSSのファイル(今回はstyle.cssというファイル名)をHTMLに読み込ませる方法は、
<link rel="stylesheet" href="style.css">というものをhead内に書きます。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>我が家の愛犬ポチの日記</title>
</head>
<body>
<h1>我が家の愛犬ポチの日記</h1>
<img src="inu.png">
<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>
<p>可愛いわんちゃんがうちに来てくれました</p>
<p>ポチの好きな食べ物</p>
<p>ポチの嫌いな食べ物</p>
<p>ポチが１才になりました<p>
</body>
</html>CSSでHTMLの内容全体を真ん中に(中央寄せ)する場合
今回は「style.css」というファイルを作り、文字の中央寄せなどに使う text-align: ; という命令を使います。
という事で再度、別で「メモ帳」を開いて、中に、
body {
text-align: center;
}という命令を書いて「style.css」という名前でファイルを保存します。
このタグの意味合いとしては、bodyタグの中を「text-align: center;」という意味で、
: ; の中はcenter(真ん中)に限らず、left(左寄せ)でもright(右寄せ)でもOK。
そうするとこんな感じ。
リンクを指定するタグを書いてページと別のページを繋げる
ただ、今のままだと赤枠で囲われている「記事の部分」をクリックして、次のページを見る事が出来ないので、
ページと別のページを繋げるタグを書いて、今いるページと別のページを繋げ、リンクさせます。
そのためには「aタグ」というものを使う必要があります。
<a href=""></a>「pタグ」の中の文章をこの「aタグ」で囲む
pタグの中の文章をaタグで囲む
<p>可愛いわんちゃんがうちに来てくれました</p>
↓
<p><a href="">可愛いわんちゃんがうちに来てくれました</a></p>
<p>ポチの好きな食べ物</p>
↓
<p><a href="">ポチの好きな食べ物</a></p>
<p>ポチの嫌いな食べ物</p>
↓
<p><a href="">ポチの嫌いな食べ物</a></p>
<p>ポチが１才になりました<p>
↓
<p><a href="">ポチが１才になりました</a><p>そうすると最終的にこんな感じ。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>我が家の愛犬ポチの日記</title>
</head>
<body>
<h1>我が家の愛犬ポチの日記</h1>
<img src="inu.png">
<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>
<p><a href="">可愛いわんちゃんがうちに来てくれました</a></p>
<p><a href="">ポチの好きな食べ物</a></p>
<p><a href="">ポチの嫌いな食べ物</a></p>
<p><a href="">ポチが１才になりました</a><p>
</body>
</html>そうする事で「aタグ」で囲まれたリンク部分をクリックし、次のページに行く事が出来ます。
ただ、今のままだと、次のページを作っていないため、ページの作り方に関してはまた次回。
どこかに分かりやすく、簡単にまとめてあるサイトとかないかなぁ？