ProgateなどでHTMLを勉強中、またはこれから勉強する予定の方向けに、HTMLの概要を簡単に説明します。HTMLとは何をするもので、HTMLを勉強すると何ができるのかが分かります。
Progateやスクールに行く前の予習として、どうぞご活用ください。
HTMLとは?
HTMLとはHyperText Markup Languageの略で、ウェブページの内容や構造を記述する言語です。このサイトや普段目にしているウェブページのほとんどはHTMLで書かれています。
HTMLはウェブページの内容や構造を記述するだけなので、色を変えたり、ボタンを並べたりといった見た目は変えられません。 見た目をカッコよくキレイに変えるのはCSS(Cascading Style Sheets)の役目です。またウェブページの要素をアニメーションで動かしたり、ボタンやスイッチなどで内容を変更したりするのはJavaScriptの役目です。ウェブページはHTML,CSS,JavaScriptの3つの言語を基本として作られています。
HTMLの基本構造
HTMLは要素(タグ)と属性の大きく分けて2つの構造から成り立ちます。タグで表示したい内容を囲みながら、見た目を変えたい部分だけ属性を指定します。
例えばtestという文字を表示するには次のようにします
この例ではdivが要素で、idのhogeが属性です。
ブラウザで表示できるようなHTMLファイルにするには次のようにします。
1行目の<!DOCTYPE html>はDOCTYPE宣言と言って、これから書くHTMLファイルがHTML5で書かれたものであることをブラウザに伝えています。昔のブラウザ(IEなど)で表示させたい場合に書き換える必要があります。
2行目以降の<html>タグ内がHTMLの内容です。HTMLには必ず<head>と<body>タグが必要です。<head>にはページのタイトル(<title>)などを書きます。<body>タグ内が実際にページに表示される内容です。
試しに上のコードをコピーして、index.htmlという名前で保存してから、ブラウザで開いてみてください。下の画像のようなページが表示されます。
HTMLタグの種類
HTMLでは用途に合わせて様々なタグが用意されています。ここでは一部のよく使うタグをご紹介します。
<html>
HTMLの内容を記述していく要素です。<html>は全ての要素の基点となる要素なので、ルート要素とも呼ばれています。HTMLでの全ての要素はこの<html>タグ内に書かなければいけません。
<head>
<head>はHTMLファイルに関する情報(メタデータ)を記述する要素です。ここにはファイルの文字コードやページタイトル、CSSなどのスタイルシートへのパスやJavaScriptへのパスなどを記述します。
<title>
HTMLのタイトルを指定する要素です。<title>の内容がブラウザのタイトルに表示されます。
<body>
HTMLファイル内のコンテツを入れる要素です。<body>はファイル内にひとつだけ書くことができます。
<h1> ~ <h6>
<h1> ~ <h6>は見出しをつけることができます。数が増えていくごとに、見出しが小さくなります。
See the Pen h1-h6.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
<p>
<p>は段落を表現することができます。
See the Pen p.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
<img>
<img>はsrc属性に画像のURLを指定すると、画像を表示させることができます。
See the Pen img.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
<a>
<a>は他のページへのリンクを指定することができます。
See the Pen a.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
<ul>, <ol>, <li>
<li>を使うとリストを作ることができます。さらに<li>を<ul>で囲むと・付きのリストを作れます。<ol>で囲むと連番付きのリストにもできます。
See the Pen li-ol-ul.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
<div>
要素のレイアウトを指定するための要素です。下の例のように要素を囲ってひとまとめにしたり、大きさや色を変える時に使います。
See the Pen div.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
ブロックレベル要素とインライン要素
要素にはブロックレベル要素とインライン要素の2種類があります。
ブロックレベル要素は前後に改行が入って親要素いっぱいに広がる要素です。例えばdiv,h1~h6,pなどがブロックレベル要素です。要素は縦に並んでいきます。
See the Pen block.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
これに対してインライン要素は改行が入らず、要素のサイズもタグで囲まれた内容を表示するために必要な大きさになります。例えばimg,aなどがインライン要素です。要素は横に並んでいきます。
See the Pen inline.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
HTML要素についてはこちらのサイトが参考になります。分からない要素はここで調べると良いです。
HTMLの属性
HTMLの要素には属性をつけることができます。属性を使うとCSSで見た目を編集するときに属性名を指定できたり、要素のオプションなどを設定したりすることができます。
例えば下の例のように<span>のclass属性に'highlight'という名前をつけて、CSSで背景色を変えると、マーカー線を引くことができます。
See the Pen highlight.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
要素によってはclassやid以外に固有の属性を持っていて、それらを指定することで表示の仕方を変えることができます。例えば<input>はtype属性を指定することで、次のように入力欄やボタン、チェックボックスなど、様々な用途で使用できます。
See the Pen input.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
HTMLのコメントアウト
HTMLでコードのコメントアウトをするには<!--- --->で囲みます。
See the Pen comment.html by tombo gokuraku (@tombo_gokuraku) on CodePen.
参考になるサイト
HTMLを書いていく上で参考になるサイトを紹介します。
MDN web docs
実質的なレファレンスです。HTMLで迷うことがあれば、とりあえずここを見ておけばなんとかなります。
w3schools.com
w3schools.comには具体的な書き方、よくあるユースケースなどが載っています。実装段階で迷うことがあったときのヒントになるページがたくさんあるので、確認しておくと良いです。
codepen.io
codepen.ioはHTML,CSS,JavaScriptのコードを書いて共有することができるサイトです。この記事でも何度か登場しています。
書いたコードをシェアできるので、例えばPicksやPopularなどを覗いてみるとカッコよくて、使えるコードが見つけられます。なんとなくインスピレーションがほしいとか、作りたいものはあるけど、作り方が分からない、といった時に参考にしてみると良いです。
ウェブページを作る時はエディタでHTMLファイルを開き、ブラウザで内容を確認しながらコーディングすることになります。この場合、ファイルを保存した後にブラウザの更新ボタンを押さないと変更が反映されません。何かを書き換える度に、ブラウザの更新ボタンを押しに行くのは面倒です。
そんな時はBrowserSyncが使えます。BrowserSyncを使うと、ファイルを保存した瞬間に、ブラウザを更新してくれるので、自動的に結果を反映してくれます。
コメント