kazuchishiki

日記と商品紹介の雑記ブログです。

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

f:id:kazuchishiki:20210124143452p:plain

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

CSS、HTMLとタグとは?

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

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

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

HTMLの基本

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

段落、<p>

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

Pの例

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

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

ここに文書ここに文書

ここに文書ここに文書

リスト、<li>

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

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

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

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

で使用します。

<ul> ~ </ul>(順番のない)の例

<ul>

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

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

</ul>

  • ここに文書
  • ここに文書

応用編

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

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

 

<ol> ~ </ol>(順番のある)の例

<ol>

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

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

</ol>

  1. ここに文書
  2. ここに文書

応用編

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>

<p> ~ <P>

<h2>アプリ<h2>

<p> ~ <P>

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

 <p> ~ <P>

 <h3>操作方法<h3>

 <p> ~ <P>

  <h4>注文方法<h4>

  <p> ~ <P>

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

  <p> ~ <P>

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

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

まとめ

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