「い・ろ・は」から始めるために
こんにちは。はじめまして。。お疲れ様です。。。さとのかwebの「さとのか」でございます。
ホームページを作りたい！作ってみたい！作り始めたけどイマイチ分からない！という方に大変役立つ、ワードプレスとテーマの参考書・事典・マニュアルを作成しました。
当トップページに『HTMLとCSSの基礎中の基礎』を画像を使って直感的に理解できるように、かつ、文章でも説明していますので、いつでもすぐに確認していただくことができるようになりました。
ではさっそくはじめましょう。
HTML文書の基礎
ワードプレスではHTMLの知識がなくても比較的簡単に記事を書くことができますが、少し知っているだけで、編集時に大いに役立ちます。
難しいことや、高度な知識を学ぶためのノウハウではありません。実践で「いま、すぐ」に使える基礎中の基礎を掲載しています。初心者の方には「痒い所にピンポイントで手が届く」と思います。
開始タグと終了タグと要素
＜開始タグ＞と＜／終了タグ＞は、テキストや画像などの様々なコンテンツに「どんな性質を持たせるのか」をマークアップするためのHTML文の書き方のルールです。インターネットを介してブラウザで正しく表示ができるように「それ」が「何」かを記すために使います。
- 1.＜開始タグ＞内には、その性質を表す要素名を記述します。
- ＜ 要素名 ＞
- 2.要素名だけではその性質を十分に表すことができない場合には、属性という形式を追加して詳細を指定することができます。
- ＜ 要素名 + 属性 ＞
- 3.属性は「属性名」と「値」で構成され、要素ごとに指定できる属性と値があらかじめ決められています。
- 要素名 属性名 値
※指定できない属性を指定しても、表示に反映されることはありません。
- 4.属性を指定するには、要素名の後に半角スペースを1つ入れてから「属性名=”値”」の形で記述します。
- ＜ 要素名 半角 属性名＝”値” ＞
※”値”は既定のものや数字、文字などをルールに沿って指定します。属性を複数指定することも可能です。 - 5.＜開始タグ＞内にすべての性質を記述したらタグを閉じ、テキストなどのコンテンツを挟んで最後に＜／終了タグ＞を記述して一つのまとまりを作ります。
- ＜ 要素名 属性名＝”値” ＞テキストなどのコンテンツ＜／終了タグ＞
- 6.＜／終了タグ＞には、スラッシュ記号（/）を書き込んでから要素名を記述します。
- ＜／要素名＞
※終了タグの要素名に属性は付きません。タグの中にはスラッシュ記号（/）と要素名だけを記述します。 - 7.＜開始タグ＞から＜／終了タグ＞までの一つのまとまり」を要素といいます。
- ＜要素名 属性名＝”値”＞テキストなどのコンテンツ＜／要素名＞
※＜imgタグ＞や＜linkタグ＞など、＜／終了タグ＞のない要素もあります。
コンテンツと、それに付随した要素を読み取ることでブラウザは正しい表示をすることが可能になります。
複数の属性を指定する場合の記述
- 8.複数の属性を指定する場合には、属性と属性の間に半角スペースを入れて追記していきます。
- ＜要素名 半角 属性名＝”値” 半角 属性名＝”値” 半角 属性名＝”値”＞
※記述する順序に決まりはありません。
CSSの基礎
ワードプレスでは必ず1つのテーマを使用します。ですからCSSファイルを直接作成するということはほとんどなく、カスタマイズ（カスタマイザー）でCSSを追加したり、テキストエディタを使って直接書き込んだりします。HTMLと同じように、CSSも基本的なことを知っておくと様々な応用を利かせることができます。
CSSの書き方
CSSとは、HTML文書で記述した文書や画像などのコンテンツのうち、各要素ごとにスタイルを指示する方法です。
- 1.「セレクタを、宣言ブロック｛｝内に記述された宣言のとおりのスタイルにする」という書き方をします。
- セレクタ ｛ 宣言 ｝
- 2.セレクタには様々な種類があり、記述するルールも決められています。基本的で分かりやすいセレクタは要素名です。
- 要素名 ｛ 宣言 ｝
※セレクタを要素名で指定した場合は、該当する要素に宣言のスタイルが適用されます。 - 3.宣言のスタイルは、プロパティと値で指示します。
- プロパティ：値；
※プロパティはスタイルの形式を、値は表示の仕方を指示します。プロパティと値は、ともに記述のルールが決められており、要素によって、指定することができるものと、できないものがあります。 - 4.宣言ブロックは、セレクタごとの宣言をひとまとまりにまとめるためのものです。
- ｛宣言 宣言 宣言 ｝
※１つのセレクタに複数の宣言を指定することもあるため、「どこ」から「どこ」までの範囲をセレクタに反映させるのかを中括弧｛｝によって明確に指定します。
半角スペース
- 5.CSS構文の各項目の間には半角スペースを入れることができます。
- セレクタ 半角 ｛ 半角 プロパティ 半角 ： 半角 値 半角 ； ｝
※見やすくなるように前後に半角スペースを入れて表示させることも可能です。
半角スペースは人間の視覚的な見やすさを目的とするためのものなので、ブラウザで表示させる際の記述の妨げにはなりません。ワードプレスでCSSを設定した場合は、自動的に一部に半角スペースが入ることがあります。
改行
CSS文を一行で表示させずに複数行で表示させることも可能です。
- 6.宣言ブロックの内側を区切るような形で改行を入れ、宣言が一行で表示されるようにします。
- セレクタ｛
プロパティ：値；
｝
箇条書き（リスト）のような書き方なので、後から見直したり、編集する際に見やすい記述方法です。
複数の宣言を指定する場合
- 7.複数の宣言を指定する場合は、宣言ブロックの中に宣言を並べる形で追加していきます。
- セレクタ｛ プロパティ：値； プロパティ：値； プロパティ：値；｝
※複数の宣言を指定する場合、宣言の終わりには忘れずにセミコロン（；）をつけるようにしてください。
横一列に並べても、改行して縦に並べてもどちらの記述でも大丈夫ですが、宣言の数が多くなったり、後の編集作業のために見やすさを考えながら記述すると良いです。
- 8.宣言をならべて記述するととても見やすくなります。
- セレクタ ｛
宣言プロパティ：値；
宣言プロパティ：値；
宣言プロパティ：値；
｝
※記載の順序に決まりはありませんが、アルファベット順で並べたり、書式の種類や分類ごとに並べたりする方法がよく採られています。
以上で、HTMLとCSSの基礎の基礎を終わります。その他の詳細は、各記事等をお読みになってください。お疲れさまでした。
WordPressとテーマTHE THORの機能、操作、設定のすべてを一覧にし、そこから該当の説明リンクへ移動することができます。 数字 数字から始まる機能、設定などの一覧です。 0～9 1ページに表示する最大投稿数 404ペ[…]
このページはワードプレステーマTHE THOR（ザ・トール）のカスタマイザー（カスタマイズ機能）の全機能一覧です。 THE THORは多くの機能があるため、操作方法が煩雑に感じるかもしれません。一覧から目的の機能や操作方法を探せるよう[…]
