ブログで今すぐに使えるHTMLの基礎知識

f:id:kazuchishiki:20210124143452p:plain

最近ブログを始め、記事もそこそこ書きそろそろHTMLとCSSについて勉強した方良さそうだと思い、今回はHTML、CSSの初心者の僕が初心者でもわかりやすいようにまとめてみましたので、ぜひお読みください。

CSS、HTMLとタグとは？
HTMLの基本
まとめ

CSS、HTMLとタグとは？

CSS（Cascading Style Sheets、カスケーディングスタイルシート）とはウェブページ上のスタイル（デザイン）を指定するための言語です。

HTML（Hyper Text Markup Language、ハイパーテキストマークアップラングウィッヂ）とはウェブページ上の文字の部分です。

タグとは、ウェブ上でどのように表現されるかを伝える「命令文」のことです

HTMLの基本

HTMLの段落、リストと見出しを紹介していきます。これは基本なので、ぜひ見ながらマスターしてください。

段落、<p>

Pとは「paragraph」の略で、段落を指定するためのタグです。<P>～</P>の間はひとつの段落を表します。

Pの例

<p>ここに文書ここに文書</p>

ここに文書ここに文書

リスト、<li>

Liとは「list item」の略で、リストの項目を表示するためのタグです。

<ul>~</ul>または<ol>~</ol>の間で使用します。

<ul>~</ul>は順番のないリスト

<ol>~</ol>は順番のあるリスト

で使用します。

<ul> ~ </ul>（順番のない）の例

<ul>

<li type="disc"> ここに文書</li>

</ul>

ここに文書
ここに文書

応用編

<li type="disc">のdiscの部分を下記のように変更すると最初のマークを変更できます。

種類	黒丸	白丸	四角
HTML	disc	circle	spare

<ol> ~ </ol>（順番のある）の例

<ol>

<li type="1"> ここに文書</li>

</ol>

ここに文書
ここに文書

応用編

li type="1">の1の部分を下記のように変更すると最初のマークを変更できます。

種類	A - C	a - c	I - III
HTML	A	a	I

見出し、<h>

<h1>から<h6>というのは見出しのタグです。Hというのは「Heading」の略で、数字が小さいほど大きな見出しを表します。

見出しタグ一覧

<h1> ~ <h1>：1番大きな見出し
<h2> ~ <h2>：2番目に大きな見出し
<h3> ~ <h3>：3番目に大きな見出し
<h4> ~ <h4>：4番目に大きな見出し
<h5> ~ <h5>：5番目に大きな見出し
<h6> ~ <h6>：6番目に大きな見出し

<h1>は1ページの中で1回だけ使うようにしましょう。OES対策で1回だけ使うと良いです。基本的にはタイトルを<h1>にします。

はてなブログではタイトルは自動的に<h1>になっているので、<h2>から使うようにしましょう。

<h>使い方の例

<h2>ウーバーイーツ注文方法<h2>

　<h3>インストロール方法<h3>

　　<h4>注文キャンセル方法<h4>

<h2>アプリアンインストロール方法<h2>

このようにして、数字が小さい見出しから使い、どんどん数字を大きくしていきます。

まとめ

いかがでしたか？まだまだHTMLの奥は深いのですが、これだけ知っているでもかなり役に立つので、少しでも参考になれたらうれしいです。