minablog

hugo/github/wordpress/プログラミング言語/美容/ビジネス/マーケティングなど、ミレニアム世代やZ世代に有益な情報を共有するブログ。

小学生でもわかるHTML/CSSタグ講座 HTML基本編(超初心者向け)

皆さんこんにちは!

minablog管理人のみなです。

今回は、小学生でもわかるHTML/CSSタグ講座の基本編として、HTMLの書き方や簡単な用語の説明、そしてHTML記述を始める方法をご紹介します。

超初心者向けに書いていますので、基本的な知識がある方は見なくても問題ありません。

それでは始めましょう!

 

f:id:mkmkblog:20191226170302j:plain

 

HTMLってなに?

まずHTMLとはなんだと思いますか?

HTML:Hyper Text Makeup Language

この頭文字をとってHTML(エイチティーエムエル)と言います。

ウェブページを作る人は必ず知っていなければならない言語です。

他の言語に比べるとわかりやすいのが特徴で、HTMLさえできていればある程度Webページの形を作ることができます。

 

HTMLを書いてみよう!

エディタをダウンロード

HTMLを書くときにはHTMLエディタを使ったほうが見やすくなりますし、ショートカットキーによって作業を素早く行うことができます。

そして表示のされ方がいかにもプログラミングっぽいので、エディタを使うだけでも「やってる感」が出て楽しいですよ。

 

おすすめのフリーエディタはAtom(アトム)です。

プログラミング学習サイト「Progate」でも紹介されており、とても使いやすいのが特徴です。

ショートカットキーもたくさんあるので、ぜひ覚えて使いこなしましょう。

 

・ダウンロード方法

prog-8.com

 

・ショートカットキー

qiita.com

 

HTMLの宣言

まずはHTMLをこれから書きますよ~っていう宣言をします。

この下のコードは全て記述必須なので覚えておくようにしましょう。

f:id:mkmkblog:20191226163147p:plain

 

解説すると、下記のような意味合いがあります。

f:id:mkmkblog:20191226163316p:plain

<head>内はWebページに出てくるものではなくて、どちらかというとブラウザに対する説明書きですね。

文字は"utf=8"を使って、タイトルはこれだよっていうことをブラウザに教えてあげます。

 

また、HTMLは基本的に何か<○○>を書いたら</○>を書いて閉じてあげます。

これを閉じタグといい、<body>や<head>なども最後は全て閉じタグをつけています。

まれに閉じタグをつけないタグもありますので覚えておきましょう。

 

Webページに表示される文字を書く

Webページの表示される文字を書いてみましょう。

文字を書くときは<head></head>の間にTabキーで空白をいれてから書き出すと見やすくなります。

今回は

(タイトル)minablog

(本文)これはminablogです。管理人である"みな"が書いています。

と書いてみたいと思います。

 

書いた結果がこちらです。

f:id:mkmkblog:20191226163834p:plain

 

《タグ解説》

h1:headingの頭文字で見出しを表します。

  h1~h6まで存在し、h1が一番大きい見出しです。

p  :paragraphの頭文字で本文を表します。

 

ブラウザで表示を確認する

f:id:mkmkblog:20191226164313p:plain

 

そうするとこんな感じ。

f:id:mkmkblog:20191226164400p:plain

これでようやくブラウザで確認できました!

ちなみに、HTMLを保存するときのファイル名については「index.html」にしておきましょう。

これが一番無難です。

もうすこし出来るようになったら.htmlファイルをどんどん増やしていきましょうね!

 

HTML基本知識

これからは知っているとすごい(知らなくても問題はない)基本的な知識をご紹介します。

・<head> -開始タグ

 ○○    -コンテンツ

 </head>   -終了タグ

 これらを合わせて要素という。

・コンテンツをタグで囲って要素を作ることをマークアップという。

・閉じタグがない要素を空要素という。

・メモを書くときは<!--メモ-->とする。

 例)<!--ここは太字で強調する--> など

・HTMLを書くときは大文字・小文字どちらもOK。

 ※ただし、他の言語になると大文字・小文字が指定されているものもあるため注意。

・一つ上にある要素を親要素、一つ下にある要素を子要素という。

f:id:mkmkblog:20191226170308j:plain

まとめ

今回はHTMLの超初心者向けということで基本編を作ってみました。

かなりかみ砕いて作ったつもりですが、わかりづらいところがあればぜひご指摘いただければ幸いです。

次回もぜひご覧ください!