ホーム > 上級レベル > HTMLとCSSを学ぼう

女性&先生
ホームページは、ブログと違って 記事内容はもちろん、文字色から背景、レイアウトまで、 すべて自分の手入力で打ち込まなければなりません。

また、その手入力するべき、ホームページを表示するためのHTML言語も学ぶ必要があります。

では、その前に準備するものがあります。
手入力するためのテキスト文字編集ソフトです。 Windowsにあるメモ帳でも構いませんが、 使い勝手が悪いので、サクラエディタ(無料)をおすすめします。

サクラエディタは、無料なのに高機能です。 HTMLのタグも色分けしてくれ、非常に見やすく使いやすいです。 ぜひ、利用してください。リンク先から入手可能です。

これさえあれば、あとは何もいりません。
勉強あるのみです。


HTMLについて

まず、言っておきますが、HTMLは非常に簡単です。
誰でもすぐに理解できると思います。

早速ですが、ご説明します。
ホームページは、タグと呼ばれる要素で構成されています。

タグとは、「<h1>文章</h1>」(見出しタグ)のように、 「<」と「>」で括られたものです。

タグは開始タグ「<h1>」と 終了タグ「</h1>」のセットで使用するものと、 開始タグ「<br>」(改行タグ)のみで使用するものがあります。

そして、このタグを使用して1ページを構成します。

<1つのHTMLファイルの中身>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 ↑ ドキュメント宣言と呼ばれるものです。必ず全ページの先頭に挿入します。
<html>
<head>
 ← この部分にページのヘッダー情報を挿入します。
   ページのタイトル、概要、キーワードなど
</head>
<body>
 ← この部分にページの本文情報を挿入します。
   ユーザーが閲覧するページの記事内容
</body>
</html>

これが1ページの全体像です。
各ページでヘッダー情報と本文情報を作成することにより、ホームページ全体を構成します。


  • ヘッダー情報に挿入するタグ
    metaタグ(文章に関する情報(キーワード、概要))、 linkタグ(参照、関連文章との関係)、 titleタグ(文章のタイトル)をこの要素内に挿入します。

  • 本文情報に挿入するタグ
    ブラウザの画面上に表示されるタグを挿入していきます。
    主に、文章の枠組みとなるブロックレベル要素である h1タグ(見出し)、 pタグ(段落) などをこの要素内に挿入します。 そして、修飾(表示)やリンク、画像などのインライン要素である aタグ(リンク)、 imgタグ(画像)、 bタグ(強調=太字)、 brタグ(改行) などをこの要素内に挿入します。


このような形で、HTMLのタグを使用して、ホームページを作成していきます。
HTML言語は詳しく説明しようとすると、それだけで分厚い参考書ができるぐらい情報があるため、 当サイトでは、最初のさわり程度のご紹介とさせていただきますが、 以下のサイトなどは、詳しく情報が整理されていて、やりたいことがすぐに調べられるので、参考にしてみては如何でしょうか。

CSSについて

まず、CSS(Cascading Style Sheets)とは、 ページのスタイルを指定するためのプログラム言語です。 簡単に言うと、文章の見栄えを良くする指示言語です。

CSSのメリットは、HTMLファイルと分離できることと、 複数ページに適用ができるという点です。

すなわち、共通化が可能ということです。
各HTMLファイルを修正することなく、ページの修飾(表示)を変更できるので、メンテナンスが楽になります。

また、CSSを使い、HTMLから切り離して共通化すると、各ページのHTMLファイルの記述少なくなり、 ファイルサイズが減少、ページが軽くなるという利点もあります。

早速、具体例でご説明します。
pタグ(段落)の文字色を赤に設定する場合、CSSの記述方法は以下の通りです。

<CSSの中身>
p {
    color: red;
}

<HTMLの中身>
<p>こんにちは</p>

すると、以下のような表示となります。
こんにちは

p」部分をセレクタ(Selector)、 「{ }」で囲まれた部分を宣言(Declaration)と言います。 宣言の中には、プロパティと値を「:」(コロン)で区切って記述します。

セレクタは適用したいタグ要素を、 プロパティは定義するスタイルの内容(色、サイズ、形など)を指示します。 プロパティと値は「;」(セミコロン)で区切ることで、以下のように複数のスタイルを指示できます。

<CSSの中身>
p {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

すると、以下のような表示となります。
こんにちは


でも、これではすべてのpタグ(段落)が赤文字になってしまいます。
セレクタはクラス名を付けることにより、限定したタグだけを変更可能です。

<CSSの中身>
p.red {
    color: red;
}

<HTMLの中身>
<p class="red">こんにちは</p>
<p>Hello</p>

すると、以下のような表示となります。
こんにちは
Hello


HTML言語と同様、CSSもかなりの情報量なので概要のみとします。
CSSは大変便利なので、ぜひ活用してください。以下のサイトが大変参考になりますのでご覧ください。



次ページ > アフィリエイトの始め方と実践方法