プログラミングを始めたいけど何から始めたらいいかわからない。。。
こういった方に基本からわかりやすく説明したいと思います。
プログラミングを始めようとして、もしくは一度挫折して再開しようとして、このページを見られた方が多いかと思います。
初歩の初歩からわかりやすく解説していきます。
HTMLの仕組み
まずはHTMLについて説明していきます。
HTMLでは、テキストに「タグ」と呼ばれる<???></???>で囲んでいきます。下のようにテキストをタグで囲むことにより、囲まれたテキストが「見出し」や「リンク」といった意味をもつことになります。
<h1>Hallo world</h1>
<a>nabelog</a>上の例では<h1>,<a>を開始タグといいます。
上のように入力すると以下のように表示されます。
Hallo world
nabelog<h1>タグ 【見出し】
<h1>などを見出しといいます。
見出しの要素は<h1>要素以外にも、<h2>, <h3>… <hn>要素があります。
hはheading（見出し）の頭文字です。
以下のように、<h1>から数が大きくなると小さくなっていきます。（Wordpressの仕様で目次が作成されてしまっていますがこちらは別で説明します。）
<h1>nabelog</h1>
<h2>nabelog</h2>
<h3>nabelog</h3>
<h4>nabelog</h4>
<h5>nabelog</h5>nabelog
nabelog
nabelog
nabelog
nabelog
<p>タグ 【段落】
pタグはparagraph（段落）の略です。
<h2>要素や<p>要素のテキストは改行されて表示されます。
<h2>【初心者向け】ＨＴＭＬの基本</h2>
<p>HTMLの仕組み</p>【初心者向け】ＨＴＭＬの基本
HTMLの仕組み
<a>タグ 【リンク】
リンクを作成には<a>要素を用います。
テキストを<a>タグで囲むと、リンクを作ることができます。
<a>要素にリンクのアクセス先を指定するには、href属性を追加します。
<a href=”url”>というように書き、url部分にリンク先のURLを指定することで、そのページへのリンクを作ることができます。
<a href="http://nabelog.org/">nabelog</a>属性
先ほど属性と書きましたが、HTMLには、hrefのような属性というものがあります。
これらは、上のように開始タグ中に書きます。
属性を記入には、ダブルクォーテーション（”）を忘れないようにしてください。
<img>タグ 【画像】
画像を表示させたい場合は<img>要素を使います。
リンクと同様<img src=”url”>と、src属性のurlの部分に画像のリンクを指定することで、画像が表示されます。
<img>要素は終了タグが必要ありません。
<img src="http://nabelog.org/wp-content/uploads/2020/07/valery-sysoev-p9OkL4yW3C8-unsplash-scaled.jpg">
<ul>タグ <ol>タグ <li>タグ 【リスト】
リストを作成するには、<li>要素を用います。
<li>要素は、囲む親要素の種類によって表示が変わります。
<ul>のような親要素で囲むと、黒点が先頭につきます。
<ol>要素で囲むと、数字が連番でつきます。
このように要素を要素で囲むことを入れ子またはネストと言います。
囲む方の要素を親要素、囲まれる要素を子要素と呼びます。
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ol>
<li>Step1</li>
<li>Step2</li>
</ol>- HTML
- CSS
- Step1
- Step2
インデント
上記のように入れ子構造の場合は、インデント（字下げ）を付けます。
インデントをつけることで入れ子構造が複雑になっても親子関係がわかりやすくなります。行の先頭で「tab」キーを押すと簡単にインデントをすることができます。
表示は変わりません。
<!--インデントなし-->
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<!--インデントあり-->
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>まとめ
いかがだったでしょうか。意外と簡単だったと思います。
あとはCSSで色や大きさを変えてみましょう。
また、Chromeを使っている方はF12(Windows),⌘ + option + i (Mac)を押してデベロッパーツールを使ってHTMLをみてみましょう。
コメント