HTMLとCSSとでウェブサイトは出来ている！
こんにちは！
自分でウェブサイトを作りたいと思っているなら、
HTMLとCSSとを学ぶ必要があります。
いきなり結論が出ましたね。
ウェブサイトを作るために、
HTMLとCSSとが必要、というかそれでできてます。
ワードプレスのようにPHPが基本の場合もありますが、
HTMLとCSSでウェブサイトはできています。
いまさらお聞きしますが、HTMLって聞いたことありますよね。
同じように、CSSはどうですか。
聞いたことあるけどよくわからない？
そんなことないですよね。
ご存じじゃないとこのサイトにたどり着きませんよね。
失礼しました。
ここまで読んでいただいているということは、
HTMLやCSSに興味があるのではないでしょうか。
HTMLとCSSを使ってウェブサイトを作ってみたら面白いだろうなと思っているかもしれませんね。
そのウェブサイトを作ってみたいなら、
HTMLとCSSとを学ばないとできません。
それでは、そもそもHTMLとCSSとはどういうものなのか
概要を簡単に説明します。
HTMLとは
HTMLとは、Hyper Text Markup Language
（ハイパーテキスト・マークアップ・ランゲージ）の略です。
簡単に言うと、ウェブページを作成するための言語ですね。
「言語」というと難しく感じますが、
要はウェブサイトを作るうえで不可欠な、なくてはならないものです。
説明になっていないような気もしますが・・・。
CSSとは
そして、CSSとは、Cascading Style Sheets
（カスケーディング・スタイル・シート）の略です。
ウェブページのスタイルを指定するための言語です。
ウェブサイト作りに必要なHTMLとCSS
つまり簡単に言うと、HTMLで基本的な部分を書き、
CSSでデザインを担当するということですね。
だから、HTMLで一通りのことは表示可能ですが、
デザインの部分をCSSにやってもらわないと
とても読みにくかったり、わかりにくくなってしまいます。
なので、HTMLとCSSはセットで覚えないと
ウェブサイトを作っても思った通りには表示できないでしょうね。
簡単に言うと、ウェブページをいくつか集めてウェブサイトと言います。
ホームページはウェブサイトと同じ意味です。
当初本来のホームページは、ウェブサイトのトップページのこと を指していましたが、今ではウェブサイト全部を含めてホームページ と呼んでいます。
HTMLとCSSとをもっと詳しく知ろう
ここでは、初めに、１つのウェブページを作成していきます。
そして複数のページを作ってリンクで結び、 ウェブサイトの作成を目標にします。
前置きがちょっと長かったですが・・・
早速始めましょうか。
ここでは、HTML5(HTMLバージョン5)と
CSS3（CSSバージョン3）の 書式を基に作成していきます。
HTMLの基本的な型
HTML5全体の基本的な型は、以下のようになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>ウェブページタイトル</title>
</head>
<body>
<header>ヘッダー</header>
<main>
メイン内容
<section>
セクション
</section>
</main>
<footer>フッター</footer>
</body>
</html>
<!DOCTYPE html>
このテキストはHTMLであるとブラウザに宣言しています。
<html lang=”ja”>
日本語のHTMLですとブラウザに宣言しています。
<meta charset=”UTF-8″>
HTMLの文字コードが、UTF-8だとブラウザに宣言しています。
<head></head>
この head の中にmetaタグなどを記入します。
<title></title>
ウェブサイトのタイトルを書きます。
<body></body>
HTMLの本体で、ここに書かれてあるものが表示されます。
<header></header>
ヘッダーつまり、ウェブページに表示される頭の部分です。ここにサイトのタイトルなどを記入します。
<article></article>
アーティクル（記事）を書くところです。
<section></section>
セクション、文章などひとまとまりの部分です。
<footer></footer>
フッターつまり足の部分で、最後に何か情報を書きます。
いきなりいっぱい説明されてもやる気なくしますよね。
ここでは、HTMLというものがどういうものなのかが大体わかればいいので無理して覚える必要はありません。
CSSの基本書式
CSSの基本書式は、以下の通りです。
セレクタ{プロパティ:値;}
p {padding:5px;}という風に、セレクタの内容を{}で囲み、
各プロパティの後にコロン（:）を入れ、
値を書き、最後にセミコロン（;）を入れます。
CSSファイルを別に用意します。
“style.css”というCSSファイルの場合、
<link href=”style.css”>
と書いて読み込みます。
また、CSSをHTML上に直接書く場合、styleを使います。
ページ全体に適用する場合は、<head></head>の間に、
<style>
セレクタ{プロパティ:値;}
</style>
<style>
p {margin:3px;}
</style>と書きます。
個別に設定する場合、
<セレクタ style=”プロパティ:値;”>
<div style="margin:10px;">内容</div>という風にプロパティの後にコロン（:）を入れ、
値を書き、最後にセミコロン（;）を入れます。
複数の設定をする場合、
<セレクタ style=”プロパティ１:値;プロパティ２:値;”>
<div style="margin:10px;padding:5px;">内容</div>とセミコロン（;）を各プロパティの最後に書きます。
ということで、ウェブサイトの元であるHTMLとCSSについて
説明しました。
コメント