HTML基礎がマンガでわかる

HTMLちゃんはなぜ混乱しているの?

Webデザイン初心者わかば

HTMLちゃん、どうしたの!?
突然混乱して。


HTML

混乱するとも!
このメモの書き方じゃ文書の構造がわからないんだもん。


Webデザイン初心者わかば

このメモの書き方でも、私にはわかるけどな。
HTMLちゃんにわかるように書き換えてあげなくちゃ。


HTMLちゃんに構造を教えてあげよう

Webデザイン初心者わかば

そういえばこの前の記事「HTMLって何?簡単解説!」のマンガの中で、HTMLの基本形を教えてもらったわね。
まずはHTMLの基本形を書こうかしら。


HTMLの基本形

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>●●のページ</title>
  </head>
  <body>
    文章
  </body>
</html>

初めて見るタグが出てきましたね。

!doctipe htmlは、「これはHTMLファイルですよ」という宣言をしています。

meta charsetというタグは、HTML文書の文字のエンコーディングを指定しています。
ここでは「UTF-8という文字コードを使いますよ」という宣言をしています。

普段使っているニュースサイト、ネットショップ、チケット予約サイト、すべてのWebページは大方この基本構造で表示されています。

ためしに、どこかのWebページ上で、「右クリック→ソースを見る」をしてみよう。

上の基本形に比べて、中身がたくさん詰まっていてわかりにくいかもしれませんが、headタグがあって、bodyタグがあって、それらがhtmlタグでくるまれているという構造は同じはずですよ。

body要素の中にコンテンツを入れこんでいこう

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>おやつの場所のメモページ</title>
  </head>
  <body>
    おやつの場所

    甘いおやつ
    ドーナツ
    机の上にあります
    ケーキ
    冷蔵庫にあります

    からいおやつ
    おせんべい
    引き出しにあります 
  </body>
</html>
Webデザイン初心者わかば

HTMLの基本形の中に、文章を入れてみたよ!
これでどう?完璧でしょ?


HTML

わかばちゃん、自信があるのはいいんだけど、文章がどういう構造になっているのか、まださっぱりわからないよ。
Webページだとそのコードがどう表示されるか見てみてくれ〜!
こちらの記事で紹介したWebページ用テキストエディタ、なければパソコンにもともとついているメモ帳にそのコードを貼り付けてごらん


HTML基本1

Webデザイン初心者わかば

ファイル名の後ろに拡張子「.html」をつけて保存だね。


HTML基本2

Webデザイン初心者わかば

HTMLファイルを保存できたよ!


HTML

ばっちりだね!次はブラウザでそのファイルを開いてみよう。


Webデザイン初心者わかば

ぶ、ぶらうざって何…?


HTML

ブラウザっていうのは、一言でいうと「インターネット上のページを閲覧するためのソフト」だよ。

代表的なものに、Google Chrome、Firefox、Safari、Internet Explorerなどがあるよ。
Webで調べ物をしたり、ネット通販をしたりと、君もよく使ってると思うよ!


Webデザイン初心者わかば

そういうことね。私はFirefoxを使ってるよ。


HTML

そしたら、さっき作ったHTMLファイルの上で「右クリック→このアプリケーションで開く→Firefox(任意のブラウザ)」を開いてみてね。
Windowsのパソコンだと「右クリック→このプログラムで開く→任意のブラウザ」だったかな?Windowsの操作方法についてはまた確認して追記するね。


HTML基本3

HTML基本4

Webデザイン初心者わかば

おお〜、ブラウザ上で表示された!
って、なんじゃこりゃあ〜!たしかにこれじゃどこが見出しか・どこが段落かわからないわね


見出しと段落をHTMLでマークアップしよう

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>おやつの場所のメモページ</title>
  </head>
  <body>
    <h1>おやつの場所</h1>
	
    <h2>甘いおやつ<h2>
    <h3>ドーナツ</h3>
    <p>机の上にあります</p>
    <h3>ケーキ</h3>
    <p>冷蔵庫にあります</p>

    <h2>からいおやつ</h2>
    <h3>おせんべい</h3>
    <p>引き出しにあります</p> 
  </body>
</html>
Webデザイン初心者わかば

HTMLちゃん、これでどうかしら?


HTML基本5

HTML

わかる、わかるぞ!
わかばちゃん、文書構造をマークアップしてくれてありがとう!Webにこのファイルをアップしたときに、閲覧者・プログラム双方にとって親切なマークアップになったね。


Webデザイン初心者わかば

自分で作っといてなんだけど、簡素な仕上がりよね。Webデザイナーを目指すなら、見た目をもっと強化したいわ。もっとババーンとした、ぐぉんぐぉん動くような、おしゃれなページを作りたいんだけど。


HTML

わかばちゃん、見た目だけに捉われていてはいいWebサイトを作れないんだよ。
HTMLを正しく書く事は、SEO(検索エンジン最適化)っていうものにも関わってくるんだから、あなどれないのだよ。


HTML

次回は他のHTMLタグも学んでいくよ!


記事作成:湊川 あい
マンガ・イラスト:湊川 あい


カテゴリー: HTML

湊川 あい

湊川あい(みなとがわ あい) 絵を描くWebデザイナー。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。 著書「わかばちゃんと学ぶWebサイト制作の基本」 Web連載「マンガでわかるGit」「わかばちゃんが行くオフィス訪問マンガ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です