恥ずかしながら管理人は、ホームページの基本的な要素である HTML や CSS について、初心者以下の知識しかもちあわせていません、、、
そんな管理人が生業では無いにしろ他所さまのホームページを作る事が出来るのは Dreamweaver（ドリームウィーバー）やホームページビルダー等のソフトのおかげでした。
また、WordPressになってからも投稿や固定ページの作成にはビジュアルエディタ、さらにプラグイン「TinyMCE Advanced」のおかげで基本的な知識が無くてもそれなりにページを作る事ができました。
[kanren postid="52"]さらに高度なデザイン装飾を施す場合は、他所さまのサイトからコードをコピーして使用して使うなどしています。
「習うより慣れろ」、「目で見て盗め」などと、都合の良いことを言ってみても、所詮はコーピーやエディタに頼ってばかりだと自分のスキルも上達しません、、、
ここは一つ50歳の手習い（正確には58歳）ではないですが ”基本” から勉強することにいたしました。
ただ近年、老眼も進み細かい文字が見にくくなってきていますし、昔ほど根気も続かなくなってきたので、分厚い専門書は避けて、優しく負担が少ない方法で学んでいこうと思います。
まずは専門書を購入する前にネットで初歩の初歩から調べてみました。
サルワカさまのサイトが、すごく判りやすそうなので、しばらくサルワカさまのサイトをなぞってみることにします！（サルワカって猿でもわかるの意味だったのですね ^^;)
HTMLの基本構造kome
←HTML宣言
<html> ←HTML開始タグ
<head> ←hdad開始タグ
<title>ちゅうどう日記</title> ←タイトル終了タグ
↑
タイトル開始タグ
</head> ←hdad終了タグ
<body> ←body開始タグ
<h1>ゼロからウェブデザインを勉強しよう！</h1>
<p>まずはHTMLについて学びましょう</p>
</body> ←body終了タグ
</html> ←HTML終了タグ
最初の は「このファイルはHTML文書です」と宣言している部分です。
さらに <html> ～ </html> （この範囲はhtmlです）で囲まれ、
その中に <head> ～ </head> （webページの基本情報、タイトルやメタ情報など）
<body> ～ </body> （実際にページが表示される部分）
タグには開始タグと終了タグ（/）がありその範囲で挟まれた部分が反映されますが、何重にも入れ子にすることも出来ます。WordPressの場合<html>～</html>や<head>～</head>また、<body>～</body> を記述する必要はありません。
憶えたこと
- HTMLは <開始タグ> ～ </終了タグ> の間に書く
- タグは入れ子に出来る
- 通常、bodyタグの <body> ～ </body> の部分がwebページとして表示される部分だがWordPressの場合必要ない
HTMLでよく使われるタグ
pタグ：段落をつくるタグ
例： <p> ～文章～ </p>
h1〜h6：見出しタグ
例：<h2>HTMLでよく使われるタグ</h2>
※h1〜h6まであり数字が小さいものほど文字が大きい
img（イメージタグ）
使い方：<img の次に半角スペースを空けてsrc="（画像のリンク先）"alt="･･･代替えテキスト等" 最後に /> で閉じる。
※終了タグは不要
例：<img src="https://･･･画像のリンク先" alt="･･･代替えテキスト等" />aタグ：リンクを指定するタグ
aタグ：リンクタグ
使い方：<a の次に半角スペースを空けて href="リンク先URL"> と記述
新しいタブで開く場合は（半角スペース）target="_blank" と記述し、後ろにリンクテキスト（または画像）を記述して終了タグ</a>を記述
<a href="リンク先のURL" target="_blank"> リンクテキスト </a>
例：<a href="https://saruwakakun.com/" target="_blank"> ちゅうどう日記 </a>
brタグ：改行
文章の途中で改行したい場合などに使用
[aside type="boader"]文章の途中で改行したい
場合などに使用
↓
文章の途中で改行したい<br>
場合などに使用[/aside]
終了タグは不要なようです
コメントアウト
HTMLコード内で <!-- と --> ではさまれたコードはブラウザでは非表示になります。メモ書き用です
憶えたこと
- pタグ（段落）
- h1～h6タグ（見出し）
- imgタグ（画像）
- aタグ（リンク
- <br>は改行タグ
- <!-- と --> ではさまれたコードは非表示
今まで、よく分からずに（なんとなく）使っていました ^^;)
箇条書きのタグ
ホームページにはよく箇条書きを使います。
使い方：<ul></ul>タグの中に入れ子で<li>テキスト</li>を入れる
例えば上の例では
[aside type="boader"]<ul><li>pタグ（段落）</li>
<li>h1～h6タグ（見出し）</li>
<li>imgタグ（画像）</li>
<li>aタグ（リンク</li>
</ul>[/aside]
また・も部分を数字にする場合↓
- pタグ（段落）
- h1～h6タグ（見出し）
- imgタグ（画像）
- aタグ（リンク
<ul>～</ul>の部分を<ol>～</ol>にする
[aside type="boader"]<ol><li>pタグ（段落）</li>
<li>h1～h6タグ（見出し）</li>
<li>imgタグ（画像）</li>
<li>aタグ（リンク</li>
</ol>[/aside]
classとid
id や class には任意の管理名をつけられます。
別途、id や class 名のCSS作っておくことにより、タグと紐付けして好きなデザインを読み出せます。
[kanren postid="1488"]id と class には幾つかの約束事があります。
- idとclassはどのタグにも書くことができます。
- id名とclass名は英数字で先頭に数字使えません。
- id は。1つのHTML文書内で同じid名を使うことができません
- class は、何回でも同じclass名を使うことができます
[aside type="normal"]cssを記述するとき、タグ名で適用先を指定した場合はタグ名そのままでOKですが id名で指定の場合 #id名{} と先頭に # を入れます。また、class名で指定の場合 .class名{〜}のように.ドット(ピリオド)を前につけます。[/aside]
cssの基本的なお勉強はこれからですが、この辺がイマイチよく判りません ^^;)
ちょっとづつ勉強していくつもりです
divとspanについて
<div>~</div> や <span>~</span> はコードにまとまりを作るためのコードで、まとまりごとにCSSを反映させてデザインを変える事が出来ます。
divとspanの違いは？
spanではまとまりの前後に改行が入りません（インライン要素）。
文章の途中のデザインを変更するのに向いています。
divではまとまりの前後に改行が入ります（ブロック要素）。
なんとか駆け足でHTMLの基本？をおさらいしてみました ^^;)
DWやHPビルダーなどを使っていると「なぜそのようなソースが出来るのか？」判らないことだらけでしたが、いろいろ得心がいきました。
サルワカさまのサイトをコピってるだけのような気もしますが、一つずつ自分でおさらいしていこうと思います。
当たり前の事ですが基本は大切ですね、、、先は遠そうですが（^^;)
