HTML, CSSタグの書き方, ホームページの作り方【初心者・入門編】

man

困ってる人

ホームページって、一体どうやって作るの?
どこかに分かりやすく、簡単にまとめてあるサイトとかないかなぁ?


こんにちは、ikuxxと申します。

今回は、初心者向けのホームページの作り方という事で、

HTML,CSSの基本的な書き方をご紹介。

初心者の方にはおすすめの入門編で、実際に簡単なホームページを一緒に作ってみましょう。

という事で今回は、実際にこういうサイトを作ってみます。

このサイトを作るにあたって必要なものは、

パソコンと、パソコンに元々インストールされているメモ帳だけ(Macの場合はテキストエディット)

という事で、早速まずはパソコンのメモ帳を開いてみましょう。

HTML, CSSタグの書き方, ホームページの作り方【初心者・入門編】

という事で、まずは「HTML」の基本的な書き方から、

まず最初にメモ帳に書く内容というのは、

これはHTMLの基本的な形で、HTMLを書く際には毎回書く事になります。

これらは毎度コピーして貼り付ければOK、という事で、わざわざ覚える必要はありません。

内容を1つずつ説明すると、

試しにタイトルとbodyの中に文字を書いてみる

この時点で、メモ帳を保存してみましょう。

ファイルの保存方法はメニューバーの「ファイル」から「上書き保存」を選び、ファイル名は「index.html」で保存しましょう。

そして、今開いているメモ帳はそのまま閉じずに、保存した「index.html」をダブルクリックで開く。

そうすると、先程bodyの中に入力した文字が、横並びになって表示されているはず。

※この時点で自分のパソコンのブラウザでは内容が表示されていますが、

これらのファイルはまだサーバにアップロードしていないため、他のパソコンからは見ることはできません。

これが、HTMLの基本

ここまで出来ればもうホームページを作る事は簡単。

それぞれの文章をHTMLタグで囲む

まずは「我が家の愛犬ポチの日記」の部分を「h1タグ」で囲んでメモ帳を保存し、インターネット(ブラウザ)を更新。

そうするとこんな感じ↓

次に「うちの可愛い愛犬ポチを紹介するホームページです。」の部分を「h2タグ」で囲んでメモ帳を保存。

するとこんな感じ。

そして、

「可愛いわんちゃんがうちに来てくれました」「ポチの好きな食べ物」「ポチの嫌いな食べ物」「ポチが1才になりました」のそれぞれを「pタグ」で囲む。

そうするとこんな感じ。

最終的にこんな感じ。

これらの「h1タグ」「h2タグ」というのは見出し部分に使うタグで、

「pタグ」は、段落を意味するタグになるのですが、ここでは詳しくは覚えなくてもOK。

HTMLに画像を貼り付ける

次に画像を貼り付ける方法で、今回は「inu.png」という画像を用意しました。

画像を貼り付けるHTMLタグは、

このタグは、HTML内の自分が画像を表示させたい部分に書きます。

そうすると、

その結果、

CSS(スタイルシート)の書き方と読み込み方

次に、今回は「CSS」で、HTMLの内容全体を中央に寄せたいと思います。

CSSとは、文字の色を変えたり、画像の配置を変えたりといろいろなデザインを指定出来るもので、

CSSのファイル(今回はstyle.cssというファイル名)をHTMLに読み込ませる方法は、

というものをhead内に書きます。

CSSでHTMLの内容全体を真ん中に(中央寄せ)する場合

今回は「style.css」というファイルを作り、文字の中央寄せなどに使う text-align: ; という命令を使います。

という事で再度、別で「メモ帳」を開いて、中に、

body {
text-align: center;
}

という命令を書いて「style.css」という名前でファイルを保存します。

このタグの意味合いとしては、bodyタグの中を「text-align: center;」という意味で、

: ; の中はcenter(真ん中)に限らず、left(左寄せ)でもright(右寄せ)でもOK。

そうするとこんな感じ。

リンクを指定するタグを書いてページと別のページを繋げる

ただ、今のままだと赤枠で囲われている「記事の部分」をクリックして、次のページを見る事が出来ないので、

ページと別のページを繋げるタグを書いて、今いるページと別のページを繋げ、リンクさせます。

そのためには「aタグ」というものを使う必要があります。

「pタグ」の中の文章をこの「aタグ」で囲む

そうすると最終的にこんな感じ。

そうする事で「aタグ」で囲まれたリンク部分をクリックし、次のページに行く事が出来ます。

ただ、今のままだと、次のページを作っていないため、ページの作り方に関してはまた次回。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール