HTMLの基礎知識とは？コードを書く前に仕組みを理解しよう！

HTMLはCSSと一緒に組み合わせて作られているので、両方を学ばなければサイトを作り上げることはできません。

HTMLについてはこれからかんたんに基礎知識をまとめていきますが、CSSについての基礎知識を知りたい方は下記のリンクから学んでいきましょう！

「仕組み」「タグ」「見出し」「段落」「コメント」「リンク」「属性」「画像」「リスト」

今回はホームページを作る前提の基礎知識なので、まとめてかんたんに解説していくので、シンプルに考えていくことです。

基礎的な学習は済んでいる方は他のリンクからHTMLとCSSの応用を学んでいくとスキルアップにつながります。

本来であれば、コードを覚えてはいけないのですが基礎知識がなければ身に着けることはできないので、今回は暗記していきます。

HTMLの仕組みを理解しよう！見出しと段落の基礎を学習しよう！

HTMLはホームページを作成する際に、コマンドを打ち込むエディタを利用して、その中のテキストにタグと呼ばれる印をつけます。

エディタについて確認事項がある方は下記のリンクから学んでいきましょう！

初心者のHTMLとCSSの始め方とは？←手順に沿って操作の仕方を解説！ HTMLとCSSを使って学習しようとすると、コードを書く場所やコードそのものの学習方法をわからない方が多いです。 ...

タグはある値の印なので、文章の前と後ろの<>のことを示しています。

この記事のh2タイトルを作りたければ…

<h2>HTMLの仕組みを理解しよう！見出しと段落の基礎を学習しよう！</h2>

上記のような<>で印をつけていくのですが、後ろには</>をつけて「終わり」を知らせます。

始めと終わりのタグを使ってコードを書く

<>の始まりを「開始タグ」といい、</>の終わりを「終了タグ」といいます。

この終了タグはスラッシュ（/）を必要とするので、忘れられてしまいがちなので、最初は注意していくといいです。

見出しと段落をつけるやり方とは？

この記事も見出しと段落を応用して作っているので、この記事を例として紹介していきます。

見出しというのは下記で構成されている一種のタイトルのことを示しているので、ブログを日ごろから触っている方は知っていることでしょう。

<h2>○○○○</h2>

<h3>○○○○</h3>

<h4>○○○○</h4>

<h5>○○○○</h5>

<h6>○○○○</h6>

因みにいうと、上が大きい見出しで下に行くにつれて小さな見出しになります。

段落を作る方法はかんたん！

先ほど見出しについてのHTMLコードを学びましたが、段落も形は同じなので分かりやすいです。

段落は<>の中にpを入れるだけなので、比較的簡単であることが言えます。

例は以下のようになるので、この記事では見出しの下の文章に値します。

<p>文章はこちらのコードでくくることができます</p>

他の例外はないので、段落を使う場合は上記を利用すると覚えておけば大丈夫です。

リンクと属性を使って基礎知識を固めよう！

リンクというのはURLのことを示しており、<>の中にaを含めたコードのことを言います。

<a>リンク</a>

<>の中に含めて、文字を入力すると完成後のページでは「リンク」の部分が青くなるのでわかりやすいです。

リンクを指定すると青くなるので、第三者から見てクリックすれば他のページに飛ぶことを意味していると理解できます。

リンクで指定ページへ飛ぶように設定！

リンクの作り方はわかりましたが、文字の入力だけでは指定するリンクへ飛ばすことはできないので、クリックでサイトが飛ぶように設定します。

href属性を使ってリンクの飛び先を指定することができるので、<>の中に入れていきます。

<a href="https://mafurab.com/">まふらのトップページ</a>

上記のようにhref属にURLを入れてから、開始タグを閉じたら「任意の言葉」を入力して、終了タグを使いましょう。

コードに間違いがなければ、まふらのトップページをクリックすると僕のブログサイトのトップページへアクセスすることができます。

属性の書き方とは？

リンク指定をする際に上記ではhref属性を使いましたが、<>の開始タグに記述することを属性といいます。

属性を使う場合は「” “」を忘れないように記述しなければエラーが起きてしまい、プログラムが実行されないので注意して書きましょう。

画像を表示したい！

ページに表示したい画像を<>の中にimgで記述することで、任意の画像を使うことができます。

あとは属性を使って指定画像をプログラムに入れるだけで、ページ内に指定した画像を表示させることができます。

画像表示の際は、src属性を使って示すので、コードを間違えることなく書き進めるといいです。

<img src="画像のURL">

</>終了タグを今回は使っていないのですが、画像を表示させる際は不要なので覚えておきましょう。

他にも終了タグを使わない場合もありますが、最初のうちは指定のモノだけ頭に留めて置くといいです。

リストを作って見やすいページにする！

点と番号を使った段落の使い方をリストと呼びます。

リストは親要素と子要素の2構成で1つのモノをプログラムできると覚えていきましょう。

親要素には「点」か「番号」を決める選択肢が設けられますが、子要素は一定のコードしか使えないです。

点を使ったリストを作成しよう！

点を使ったリストを作成する際は、親要素を<>の中にulと記載して開始タグと終了タグを書きます。

親要素の中に子要素であるliを記載して文字を打ち込む形になるので、子要素を使用した際には、1つ1つ開始タグと終了タグを忘れずに記載していきましょう！

<ul>
     <li>文字を入力</li>
     <li>文字を入力</li>
     <li>文字を入力</li>
</ul>

コードは上記のようになるのですが、ページを更新すると下記のような点にて表示がされるようになります。

• 文字を入力
• 文字を入力
• 文字を入力

番号を使ったリストを作成しよう！

番号を使ったリストを作成する際にも同様のコードを使うのですが、親要素だけ異なるので、注意してしましょう。

<>の中にolを使って開始タグと終了タグを記載していきます。

子要素は同様にliを使うので、覚えるのは比較的簡単です。

<ol>
     <li>文字を入力</li>
     <li>文字を入力</li>
     <li>文字を入力</li>
</ol>

点と番号のリストの違いが「u」と「o」だけなので、初心者の方でもリストは気軽に使えるコードです。

1. 文字を入力
2. 文字を入力
3. 文字を入力