WordPress/ワードプレス

【HTMLの基礎知識】仕組みとは?【初心者向け】に解説!

へびくん
へびくん
HTMLってなに?
ねっとここむ
ねっとここむ
サイトを作るために必要な言語のこと!

HTMLはCSSと一緒に組み合わされてサイトを作っています。つまり、両方の知識が無ければ0からサイトを構築することは厳しいです。

各役割が存在するので、どちらかが欠けてしまうとサイト内の欠落が目立ってしまいます。しかし、ブログサイトなどを運用する際にはある程度のコード入力は済んでいるので、プログラミングの知識が無くても運用することは可能です。

有名なWordpressで例えると、いくつかの無料テーマが存在するのでマニアックなコードの知識は不要だということです。自分自身のこだわりがあるのであれば、どうしてもコードの書き換えや追加が必要になってくるので知識が必要になります。

この記事でわかること

  • HTMLの基礎知識の学習の必要性
  • コード進行のやり方や使い方
  • 学習ステップの踏み方

無料で使うことの出来るテーマを利用すれば、何かと効率は捗りますが、オリジナリティが欠けてしまうので面白味がありません。また、宣伝項目を作ったりリンクを張ることもできないので、ある程度の基礎知識を抑えておくと良いでしょう。

プログラミングをすることによって、タイピングの向上や創造性が高まり、訪問者により情報を発信できるサイト作りをすることができます。オリジナリティを極めることによって内部リンクのクリック率や広告収入を得られること間違いなしです。

HTMLの仕組みを理解しよう!見出しと段落の基礎知識!

  1. HTMLの仕組みを理解しよう!
  2. HTMLの応用してみよう!
  3. リストを作って見やすいページにする!

へびくん
へびくん
HTMLの仕組みを理解するのは難しそうだね。
ねっとここむ
ねっとここむ
簡単に理解できるから大丈夫!

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

コードはタグから始まって、タグで終わるのがプログラミングの基礎知識なので、開始もしくは終止の合図が無ければエラー反応を起こしてしまい、うまくプログラㇺが作動しなくなってしまいます。

For example
タグはある値の印なので、文章の前と後ろの<>のことを示しています。 例えば、当記事のh2タイトルを作りたければ…
<h2>HTMLの仕組みを理解しよう!見出しと段落の基礎を学習しよう!</h2>

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

<>でコードを指定する必要がなぜあるのか考えれば、様々な断りがありますが、言葉のように決まっていることなので、これを無視してコード進行をすることは出来ません。

つまり、HTMLの基礎知識を身に付けるにはタグを自然と使えるようにトレーニングや練習をする必要があります。そのためには、ブログサイトを運営するなり、サイトを構築することが一番早いです。

タグってなに?どんな使い方があるの?

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

この終了タグはスラッシュ(/)が無ければプログラムとして認識されることはありません。プログラミング初心者の方はよく忘れがちなので、注意していくといいです。

例えば、<>の始まりに対して、同じ<>で終えるとします。すると、コンピューター側が終わりの指定されていないと認識するので、プログラムが動き続けるかエラーを起こすしかないと判断されます。

Googleなどの検索エンジンを使って既に出来上がっているコードをコピーして、任意の場所でペーストをするのもいいですが、それだといつまで経ってもHTMLを使いこなすことは叶いません。エディタを準備の上、まずはプログラムを作成する姿勢を作り上げると良いでしょう。

【HTML/CSSの始め方】何をする?【初心者向け】手順を解説! HTMLとCSSを独学で学習する面において、コードを打つ場所やプログラミング言語の始め方などを調べる人が多いです。HT...

エディタについては上記のリンクから学習することができるので、知らない方はエディタについて勉強する必要があります。タグがペンならエディタは紙に例えることができます。タグの使い方がわかったらエディタについて理解を深めていきましょう。

見出しの作り方

見出しは読者に読まれるように工夫をするなら、必要不可欠な基礎知識なので、HTMLを使ってみるなら一番簡単な見出しを作ってみることです。複雑な仕組みは一切ないので、ありのままのコードをそのままエディタに入力してみてください。

実際にエディタを使用することで、コードを暗記することなく、流れで感覚的に覚えるため、初心者の学習には打ってつけです。

h2~h6の見出しが存在しますが、実際に使うのはh2~h4までです。番号の若い順から大きい文字として読者に届けられます。タグ(<>)の中に任意の数字を入力(h2~h4)して開始タグを生成後、終止タグ(</>)の中に同じようにh2~h4を入力します。

タグ(<>)を使ってh2の見出し(< h2>)を作成後に任意の文字を入力して、h2の終了タグ(</ h2>)で締めくくります。見出しはタグの中に2文字含めるだけなので、実際にコードを使ってみることで、多少の達成感を味わうことが出来ます。

サイトを構築する上で最も初歩的な見出しを作ることは、何かを作り上げることが出来たと実感することの出来るコードでもあるので、エディタを使って実際に自身の手でコード進行してみましょう。

段落の作り方

HMTLの基本知識ではありますが、達成感を得られないのが段落を構成するためのコードです。見出しを作成することよりも簡単なので、見出しコードが上手くできない方は段落を作ってみるところから始めるのも良いでしょう。

段落の作り方は一つですが、段落の作り方以外にも似たようなコードはたくさんあります。HTMLのコードの中でも最も簡単な基本知識なので、一番最初にサイト構築の実験としてエディタで実行するのも良いでしょう

既に見出しをHTMLコードを使って作成できたのであれば、直ぐに出来ます。段落のコードは最も単純で、<>の中にpを入れるだけです。

簡単に出来てしまうので、最初のうちは終止タグ</>を使うことを忘れてしまい、コードが認識してくれないというエラーが多発しています。そうならないためにも注意していきたい部分になります。

一つ一つのコードを簡単だからと安易に受け止めることなく、最初の段階はコードを確認しながら実行していきましょう。見出しが難しかった方も確認をしながら入力することで、認識してもらえるようになるはずです。

HTMLの応用してみよう!リンクと属性の基礎知識!

  1. HTMLの仕組みを理解しよう!
  2. HTMLの応用してみよう!
  3. リストを作って見やすいページにする!
へびくん
へびくん
HTMLの応用って絶対に大変でしょ。
ねっとここむ
ねっとここむ
復習みたいなものだから大丈夫だよ!

有名な記事などを読む際に、青い文字でページを飛ぶことの出来るワードを見かけたことがあると思います。HTMLの応用として、そのリンクと呼ばれる青い文字を実際に作ってみましょう

リンクを使うことで、ページを分けた説明や解説ができるので、サイト構築にしてもブログにしてもリンクを使わない選択肢はありません。1つのページ内で完結にまとめ上げると読者から読みづらいページになってしまいます。

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

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

URLリンクを繋げることが出来るとアクセス数上昇に繋がり、SEO対策的にも良いとされています。使いすぎはよくありませんが、全く使わないという選択肢もよくありません。

読者の見やすいページを作るためにもリンク構成は必要不可欠なので、見栄えのいいサイトを作っていきましょう。また、リンクは指定ページを選択する必要があるので、合わせて確認すると言いです。

リンクを活用する方法とは?ページを指定するには?

先ほどリンクの作り方を解説しましたが、コードを入力しただけでは指定リンクを定めることが出来ません。難易度は上がりますが、リンク指定ができればある程度のプログラムを書くことは出来るようになると考えられます。

リンク指定もHTMLにおける基礎知識なので、よく使う項目として認知されているコードです。しかし、コード内には「href」や「””」などの要素があるので、プログラムを作る際に大いに役立ちます。

ちなみに、href属性を使うことでページ指定することが出来るので、完成系は「<a href=”https://mafurab.com/”>まふらのトップページ</a>」と当サイトのリンクを指定することが出来ます。

サイト構築する上で「herf」や「””」などのコードは活用するので、リンク指定から学ぶことをおすすめします。初歩的な基礎知識になるので慣れるまではリンク指定から学ぶと良さそうです。

【レンタルサーバーを契約するなら】どこがいい?【初心者向け】解説 インターネット上にホームページを公開するために、セキュリティ設定をする必要があるので、レンタルサーバーを使います。 ...

エディタを使ってコードを真似れば、まふらのトップページに飛べるようになっています。そのように様々なサイトのリンクを指定していくと直ぐにコードを理解することが出来ることでしょう。

属性の書き方とは

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

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

画像を表示したい

ページに表示したい画像を<>の中にimgで記述することで、任意の画像を使うことができます。そこに属性を加えて、指定画像をプログラムに入れるだけで、ページ内に指定した画像を表示させることができます

画像を表示させるのであれば img src を覚えておくと便利です。コード自体は複雑ではないことから遊び感覚で属性等を使いこなすことでできます。

実際にプログラミングを作るとなれば「<img src=”画像のURL”>」となりますが、終了タグを使っていないことがわかります。この終了タグ(</>)は画像を表示させる上では不要です。

リストでページを綺麗にする!訪問者の目に留まる!

  1. HTMLの仕組みを理解しよう!
  2. リンクと属性を使って基礎知識を固めよう!
  3. リストを作って見やすいページにする!
へびくん
へびくん
リストって一覧表のこと?
ねっとここむ
ねっとここむ
ソースコードと呼ばれるものだよ!

使い方は人によって異なりますが、点と番号を使った段落の使い方をリストと呼びます。ブログの多くは文字の見栄えが揃うから使っているという方が多いようです。

リストでは親要素子要素の2構成で1つのモノをプログラムできると覚えていきましょう。親要素には「点」か「番号」を決める選択肢が設けられますが、子要素は一定のコードしか使えないです。

For example

親要素が「点」の場合は< ul >を使っていく必要があります。

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

親要素が「番号」の場合は< lo >を使っていく必要があります。

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

SEO対策になるからサイトが検索エンジンに対して有利になるという話もありますが、大幅に評価基準が変わることはなさそうです。あくまで、読者に見栄えのいいページを届ける感覚で利用すると良いです。

当ページ内ではリストを見出し下で活用していますが、文章中のリストとして使うこともありです。使い方は人それぞれなので、いろいろなアレンジが必要になってくることでしょう。

リストの注意点とは?エラーが起きやすい?

リストを作成する際は、親要素を<>の中にul、olの使う方を記載して開始タグと終了タグを書きます。作成時に注意することはスペルミス、終了タグ(</>)の2つです。

親要素の中に子要素であるliは「点」や「番号」のリストによって変動することはありません。よくあるミスとしては開始タグ(<>)と終了タグ(</>)のうち忘れです。

簡潔に言うと、子要素がliではなくllになってしまっていた、<>で指定をしているのに終わりのコードを忘れていたというケースです。

リストの数が多いほど、必要なコードが増えるので、そこからエラーが発生することがあります。そのため、打ちミスをしない為にも実際にWordpressを使って練習すると良いでしょう。

【WordPressダウンロード】の手順!【初心者向け】に解説 Wordpressをダウンロードするには独紙ドメインとサーバーが必要になってきます。サーバーを契約してからドメイン契約...

「点」と「番号」の2つだからと言ってプログラム確認をせずにコードを進行していくとエラー発生してしまうので、気にかけていく必要がありそうです。当サイトではリストを毎回使っているので、打ちミスはほとんどありません。

点のリスト作成

親要素は「ul」で子要素は「li」です。主に関連性の低い場合に使われることが多いので、使い勝手は番号リストの方が良いのかなと感じます

番号であれば、数字の順序で手順の説明と解釈することが出来ます。しかし、点のリストだと目安程度にしかならないので、文章中の文字分けとして使われていることが多いです。

当ブログの見出し下には番号リストがありますが、関連性が高そうに見えると思います。また、上から順に数列が並んでいることからどの位置に何が書かれているのかを把握しやすいですよね。

番号のリスト作成

点のリストと異なり、親要素は「ol」で子要素は同じ単語で「li」を使っていきます。サイトにアクセスしてきた訪問者側に手順や順序を示したい時によく使われています。

「ol」と「ul」の違いだけでもサイトの見栄えは大きく変わるので、直帰率等に影響する可能性が大いにあります。どのようなサイトを作るかによって使い分けをする必要がありそうです。

【HTML/CSSの始め方】何をする?【初心者向け】手順を解説!

HTMLタグ/リンクタグ/別ページの特定部分へリンクする

ABOUT ME
まふゆ らん
ブログを長いことやっています。 ブログ|アフィリエイト|猫を日々愛して毎日を送っています。 フリーなので、大体はPCかスマホとのにらめっこです。 人生の歩み方はそれぞれなので正解も間違えもないという信念を持ち合わせる。