Home > ウェブ > きっと初心者でもわかる、HTMLの書き方の考え方。

きっと初心者でもわかる、HTMLの書き方の考え方。

vanillate
2014-12-14 Sun 12:39:46
ウェブ

ブログを書いているときにちょっとコードを足したいような初心者さんから、仕事では使っているけどオーサリングツールを使っているから不安なところがあるひと、仕事にしたいけど、自信がないひと。
そんな人達のための考え方を書いてみたいと思います。

HTMLは「プログラム」ではなく、「マークアップ言語」

まず、最初に理解してもらいたいのが、HTMLは「プログラム」じゃないってことです。
「プログラムのような思考がいらない」と言ったほうがいいかもしれません。

マークアップ言語の基本は、「文章を装飾」することにあります。
タグとタグを装飾したい文字列に対して挟むだけ。

例えば、文の一部を太字（強調）にしたい場合、

文章の中で<strong>ここだけを太字</strong>にするよ。

というように、タグで挟んでやればいいのです。

ね、できそうな気がしてきませんか。

開始タグと終了タグ

HTMLには、「開始タグ」と「終了タグ」があります。
先ほどの例でいうなら、

■開始タグ
<strong>

■終了タグ
</strong>

になります。さて、どこが違うでしょうか。
そうです。「/」スラッシュがあるかないかですね。

HTMLでは、基本、開始タグからはじまり、終了タグで終わります。
（いくつか終了タグがないものもあります。有名なのは画像を貼り付ける <img> タグとかですかね。）

タグで挟んで、その間に何があるかをブラウザは解釈していきます。
なので、「始まり」と「終わり」の両方に「しるし」が必要なんです。

プロのひとでもたぶんよくやるのが、「終了タグ」の書き忘れ。
書き忘れると、ページ全体がリンク化されたり、太字化されたりと、「いじってたらおかしくなっちゃった状態」になります。

＊表示がおかしくなったり、段落ちしたりしたら、最初にチェックするのは、「終了タグ」が正しい位置に書き込まれているかどうかです。

タグには意味がある

なんとなく使っているかもしれないタグには、文脈的な意味があります。
意味と一緒に覚えれば、覚えやすいです。
あと、意味付けして覚えておけば、「HTMLの文章的におかしいソースコード」というのが減りますので、きちんと理解したコードを書ける技術につながっていきます。

■見出しタグ（Hxタグ）

<h1>ここに文章タイトルが入ります</h1>
<h2>ここに文章タイトルが入ります</h2>
<h3>ここに文章タイトルが入ります</h3>
<h4>ここに文章タイトルが入ります</h4>

Hとは「Heading」のこと。日本語でいうところの「文章内の見出し文字」に対して装飾したいときに使います。Hxのxには、数字が入ります。１が一番大きな見出しで、数値が増えるほど強さが弱まります。
スタイルシートで装飾せずとも、現在のブラウザでは太字の大きめの文字で表現してくれます。

■文章タグ

<p>ここに文章が入ります。</p>

文章のひとまとり、段落を挟むタグです。ブラウザでは自動で前後に空間を空けてくれます。昔も今も、この空間が邪魔でスタイルシートで打ち消しちゃうんですが、本当は便利なタグなんです。
段落ごとに挟んでいけば、読みやすい文章が出来上がります。

改行タグ

文章タグがでてきたので、必要になってくる改行タグについても書いておきます。
<br>と、<br />タグの動きは同じです。
<br />は、XHTML1.0というバージョンのときに、「閉じタグがないタグにはタグの最後にスラッシュをつけましょう」というような動きがあって、HTML5ではまた<br>に戻そうか。ということになり、いろいろ触ってますが両方見かけます。

HTML5が主流になってきていますので、<br>でいいのかなーと思うのですが、見かけた時に？が出てはいけないので、同じもの、とちょっと強引に言わせてもらいました。

改行タグは、その名の通り改行をしていくんですけど、適当に空間が開くので、<br>を連続で書き込んで無理やり空間を作ることがあります。本当は、こういうのはスタイルシート側でやるべきです。けれど、外枠が触れないようなものの場合、時々使ったほうが良い場合もあります。
本当はスタイルシートでやろうね、ということだけ覚えていて下さい。

参考：brタグに閉じスラッシュは必要か？

■リンクタグ

<a href="ここにリンク先URLを書きます">ここにリンク文字列が入ります</a>

リンクタグの「a」は「Anchor」の頭文字から来ています。
同じページ内の別の位置へ飛ばしたり、他のサーバーのファイルへのリンクを示します。
イメージ的には、イカリで他の場所への基点をつくっているようなイメージでしょうか。イカリの鎖でページがつながっていきます。

■画像タグ

<img src="画像のURL" alt="画像の説明">
<img src="画像のURL" alt="画像の説明" />

画像を貼り付けるタグです。これも、閉じタグがないタグとなりますので、<br>タグと同様ラストにスラッシュのあるバージョンがあります。

画像を「貼り付ける」とよく表現されるんですが、HTMLのしくみ的には「外部ファイルを読み込む」ということをやっているだけなので、HTML内に埋め込むイメージではちょっとズレがあるように思います。
見た目には、貼ったように見えるんですけど・・。

画像タグを使う際には、別途画像ファイルを作ってサーバーに置いておく必要があります。この１行に対して、画像ファイルが「セット」であると覚えておきましょう。

HTML構文という「枠」

とりあえず、ここまでで簡単なHTML文章を作ることが出来ます。メモ帳などに書いて、拡張子を「.html」にして保存し、ブラウザで開いたら装飾されます。
ただ、これだけではいろいろと乱暴なので、HTMLでは、「この文章はHTMLですよー」ということを明示する「枠」があります。


<html>
<head>
	
	<title>ここにページのタイトルが入ります</title>
	
</head>
<body>
	
	ここにhtml文章を入れていきます。
	
</body>
	
</html>

HTMLのバージョンを書いたり、文字コードや言語を設定したりと、実際はいろいろありますが、一番シンプルなのはこれです。
見ていただいたらわかるように、外枠さえ、挟んでます。HTMLは挟む言語ですねー。

一番大きな枠を<html>で挟みます。

<head>タグには、ページのタイトルタグ（検索結果や、ブラウザのタブなどに表示されるもの）や、他に参照するCSSファイルや、jsファイルなどを入れる「メタ情報」エリアです。メタってよくわからないかもですが、実際のHTML文章に直接表示されない、「情報をいれておくところ」と考えてみてください。

<body>に、今回説明したようなタグを入れていきます。実際にブラウザで表示されるエリアです。

実践してみましょう

本当にこれだけで装飾できるのか、確認してみましょう。
使うのは、今回説明したタグだけです。本当に空間が空くでしょうか・・？

→実践してみたのがこちらです。

そっけないですが、読めますね。これが、HTMLの基本です。
ここに、もっと装飾をつけたり、読みやすくしたり、デザインっぽくしていくのがスタイルシートだったり、jsだったりするわけです。

☆

厳密には、そういう解釈じゃない等いろいろあるとおもいますが、全体的に強引に説明してみました。

ここが基本で、基本は簡単なんですけど
デザイン性を求めるといろいろとテクニックが必要になっていきます。挟むだけは挟むだけなんですが、複合技になっていく感じです。あと、ブラウザごとの解釈の違いも必要になっていきます。
興味がある人は、いろいろ調べてみてください。

HTMLを勉強する上で便利なのは、
ウェブ上なら、「HTMLクイックリファレンス」を見たり、
書籍ならHTML辞典をさがして読みやすそうなのを１冊買うとよいです。
よく使うタグを覚えて、あとは、「こういうことができる」っていうのだけ覚えておいてあとで検索ー。みたいなのが効率いいのかもです。

ご参考にどうぞ。

関連記事

海外にも対応したいときに、使えそうなネットショップサービス 2015/04/20
Ameba ownd でできること、できそうなことをまとめてみました。 2015/03/22
スマホサイト作成のコツと作業環境 2015/01/07
きっと初心者でもわかる、HTMLの書き方の考え方。 2014/12/14
読んでもらえる、ファンになってもらえる、ブログの書き方とデザイン。 2014/11/20
web制作で気疲れしないようにする方法を考えてみました。 2014/10/17
最近気になったウェブ制作に関するキーワードを振り返ってみる 2013/06/30

Comments: 0

Trackback+Pingback: 0

TrackBack URL for this entry: http://vanidesign.blog.fc2.com/tb.php/124-fe50c288
Listed below are links to weblogs that reference: きっと初心者でもわかる、HTMLの書き方の考え方。 from バニデザノート

Home > ウェブ > きっと初心者でもわかる、HTMLの書き方の考え方。