HTMLとCSSの基礎の基礎│さとのかweb

「い・ろ・は」から始めるために

こんにちは。はじめまして。。お疲れ様です。。。さとのかwebの「さとのか」でございます。

ホームページを作りたい！作ってみたい！作り始めたけどイマイチ分からない！という方に大変役立つ、ワードプレスとテーマの参考書・事典・マニュアルを作成しました。

当トップページに『HTMLとCSSの基礎中の基礎』を画像を使って直感的に理解できるように、かつ、文章でも説明していますので、いつでもすぐに確認していただくことができるようになりました。

ではさっそくはじめましょう。

HTML文書の基礎

ワードプレスではHTMLの知識がなくても比較的簡単に記事を書くことができますが、少し知っているだけで、編集時に大いに役立ちます。

難しいことや、高度な知識を学ぶためのノウハウではありません。実践で「いま、すぐ」に使える基礎中の基礎を掲載しています。初心者の方には「痒い所にピンポイントで手が届く」と思います。

開始タグと終了タグと要素

HTML文書の基礎　開始タグと終了タグと要素

＜開始タグ＞と＜／終了タグ＞は、テキストや画像などの様々なコンテンツに「どんな性質を持たせるのか」をマークアップするためのHTML文の書き方のルールです。インターネットを介してブラウザで正しく表示ができるように「それ」が「何」かを記すために使います。

1.＜開始タグ＞内には、その性質を表す要素名を記述します。: ＜要素名＞
2.要素名だけではその性質を十分に表すことができない場合には、属性という形式を追加して詳細を指定することができます。: ＜要素名 + 属性＞
3.属性は「属性名」と「値」で構成され、要素ごとに指定できる属性と値があらかじめ決められています。: 要素名属性名値
※指定できない属性を指定しても、表示に反映されることはありません。

4.属性を指定するには、要素名の後に半角スペースを1つ入れてから「属性名=”値”」の形で記述します。: ＜要素名半角属性名＝”値” ＞
※”値”は既定のものや数字、文字などをルールに沿って指定します。属性を複数指定することも可能です。
5.＜開始タグ＞内にすべての性質を記述したらタグを閉じ、テキストなどのコンテンツを挟んで最後に＜／終了タグ＞を記述して一つのまとまりを作ります。: ＜要素名属性名＝”値” ＞テキストなどのコンテンツ＜／終了タグ＞
6.＜／終了タグ＞には、スラッシュ記号（/）を書き込んでから要素名を記述します。: ＜／要素名＞
※終了タグの要素名に属性は付きません。タグの中にはスラッシュ記号（/）と要素名だけを記述します。
7.＜開始タグ＞から＜／終了タグ＞までの一つのまとまり」を要素といいます。: ＜要素名属性名＝”値”＞テキストなどのコンテンツ＜／要素名＞
※＜imgタグ＞や＜linkタグ＞など、＜／終了タグ＞のない要素もあります。

コンテンツと、それに付随した要素を読み取ることでブラウザは正しい表示をすることが可能になります。

複数の属性を指定する場合の記述

複数の属性を指定する場合の書き方

8.複数の属性を指定する場合には、属性と属性の間に半角スペースを入れて追記していきます。: ＜要素名半角属性名＝”値” 半角属性名＝”値” 半角属性名＝”値”＞
※記述する順序に決まりはありません。

CSSの基礎

ワードプレスでは必ず1つのテーマを使用します。ですからCSSファイルを直接作成するということはほとんどなく、カスタマイズ（カスタマイザー）でCSSを追加したり、テキストエディタを使って直接書き込んだりします。HTMLと同じように、CSSも基本的なことを知っておくと様々な応用を利かせることができます。

CSSの書き方

CSSの基礎　セレクタとプロパティと宣言

CSSとは、HTML文書で記述した文書や画像などのコンテンツのうち、各要素ごとにスタイルを指示する方法です。

1.「セレクタを、宣言ブロック｛｝内に記述された宣言のとおりのスタイルにする」という書き方をします。: セレクタ｛宣言｝
2.セレクタには様々な種類があり、記述するルールも決められています。基本的で分かりやすいセレクタは要素名です。

要素名｛宣言｝
※セレクタを要素名で指定した場合は、該当する要素に宣言のスタイルが適用されます。
3.宣言のスタイルは、プロパティと値で指示します。: プロパティ：値；
※プロパティはスタイルの形式を、値は表示の仕方を指示します。プロパティと値は、ともに記述のルールが決められており、要素によって、指定することができるものと、できないものがあります。
4.宣言ブロックは、セレクタごとの宣言をひとまとまりにまとめるためのものです。: ｛宣言宣言宣言｝
※１つのセレクタに複数の宣言を指定することもあるため、「どこ」から「どこ」までの範囲をセレクタに反映させるのかを中括弧｛｝によって明確に指定します。