超初心者のためにHTML・CSSを解説
今回は、HTMLやCSSを勉強してみたいって人のための入門記事です。
HTMLやCSSというのは、いわゆるマークアップ言語というもので、WEBサイトを作るために必須の言語になります。
HTMLは土台というか骨組みのようなもの。それを装飾するのがCSSです。
始めはちょっと難しく感じるかもしれませんが、慣れればそこまで難しいものではありません。
全く知識はないけど、WEBサイトを１から作ってみたい。ブログのカスタマイズがしたい。そんな人は一度目を通してみて下さい。
勉強したいけど、参考書買うお金がないよ…という人にはぴったりです。
筆者情報：
都内で働くWEBデザイナーです。個人としては、はてなブログ向けのデザインテーマも作ったりしてます。
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました
この記事の内容について
超初心者向けなので、ある程度知識がある人は退屈かもしれません。
すでに基礎は抑えたという人は、こちらをどうぞ。めちゃくちゃおすすめの教材です。
もし、独学での習得が難しいようでしたら、CodeCampがオススメです。私も体験レッスンを受講しました。
体験レビューも書いてます。
WEBデザインやプログラミングが学べるオンラインスクール『CodeCamp（コードキャンプ）』がとっても便利 – SHIROMAG
本記事は手を動かしてコードを書いてもらうのが目的なので、用語の詳しい説明は省いています。
1カラム、2カラムなどのレイアウトの仕方は別記事で解説する予定なのでこちらも省きます。説明すると長くなるので。
この記事では特に何かサイトを作っていく訳ではないですが、何を記述すると何がどのように表示されるかが解るように書いてみました。
実際にサイトを作ってみたいなどあれば、参考書を読んで本格的に学ぶことをオススメします。サイト作成をする記事を今後書くかもしれませんが、今の所未定です。
すごい長いため、誤字・脱字・説明漏れの可能性があるので、何かあればご報告いただけると助かります。
とりあえずみなさん、試しにHTML・CSSを書いてみよう！！
目次
- 超初心者のためにHTML・CSSを解説
どうだ、めっちゃ見出し多いだろ。今日の記事は超長いから時間がある時にゆっくり読んでな！
まずはテキストエディタを用意
さっそく始めていきます。HTML・CSSはテキストエディタにコードを書いていきます。PCにデフォルトで入っているメモ帳でもいいのですが、あまりに機能がなさすぎるので「Visual Studio Code（以下 VScode）」を使ってみましょう。無料で使えて高機能です。
Microsoft Virtual Academy のご紹介
私自身は「Sublime Text 3」というのを使っていますが、初期設定が面倒なので時間がある時に試してみて下さい。
ブラウザはGoogle ChromeかFirefox を使いましょう。IEだけは避けて下さい。
あと、私はWindowsユーザーなので、Windows前提で話を進めていきます。
HTMLを書いてみよう
HTMLを書く際のルールだけ覚えておいてください。
コードは全て半角。テキスト以外で全角は使わないでください。
スペースも半角。テキスト以外で全角のスペースは使わないでください。
<タグ名>～</タグ名>
上のように開始タグ（<タグ名>）と、終了タグ（</タグ名>）で文章などを囲って書きます。終了タグにはタグ名の直前にスラッシュ（/）が入ります。
囲まれた部分（タグ自体を含む）を要素と言います。今回、要素という言葉が頻繁に出てくるので覚えておきましょう。
<タグ名><タグ名>～</タグ名></タグ名>
このようにタグを入れ子にすることで、要素の中に要素を入れることもできます。
head要素に必要な情報を記述していこう
では、HTMLを書いてみましょう。テキストエディタを開きましたか？HTMLと一口にいってもいくつか種類があるのですが（HTML4.01、XHTMLなど）、現在主流なのが「HTML5」です。今回は「HTML5」で作成していきます。そのためには、始めに「この文書はHTML5です」という宣言が必要です（文書型宣言）。
テキストエディタに以下のコードを記述して下さい。
<!DOCTYPE html>
たったこれだけで「HTML5」の文書型宣言はOKです。次はHTMLの中身を書いていきましょう。
<!DOCTYPE html> <html> </html>
HTMLは、基本的に開始タグ（ここでは<html>）と終了タグ（</html>）で囲って、その中に内容を書いていきます。
タグはすべて半角で書いてください。（しつこい）
<!DOCTYPE html>
<html lang="ja">
</html>
langはlanguageのことですね。jaはjapaneseのja。つまり日本語のWEBサイトだということを表しています。
このように、lang=”ja”の部分を属性と言い、タグに付加情報を与えます。langの部分は属性名、””の中に記述されているjaの部分を属性値と言います。属性の直前には必ずスペースを入れましょう。
ここでは、<html>タグに「lang（言語）」は「ja（日本語）」という情報を付け加えています。
<!DOCTYPE html> <html lang="ja"> <head> </head> </html>
HTMLはhead要素とbody要素で構成されています。head要素の内容はWEBページに表示されませんが、HTML文書の必要な情報を記述していきます。headなので脳みそみたいなものだと思ってください。bodyについては後述。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
</html>
あれ？終了タグがありませんね。そうです、このように終了タグがない要素もあります。
meta要素はブラウザや検索エンジンなどに情報を知らせるためのものです。
ここでは、UTF-8という形式で書かれたHTML文書だということを表しています。文字コードについての説明今回は省きます。
<meta>タグの前にスペースが入ってますね。これは「Tab」キーを押して字下げをしています。字下げをすることで、「ここは入れ子になってるよー」って見て分かりやすいようにします。このような字下げをインデントと言います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
</head>
</html>
titleタグでページのタイトルを指定します。ブラウザのタブに表示されているタイトルですね。ブラウザのタブにポインターを当てみると分かりやすいですね。
実際のWEBサイトではheadにたくさん記述することがあるのですが、基本はこれでOKなので次はbodyに進みますね。
body要素にコンテンツの中身を記述してみよう
お次はbody要素です。ここには実際にWEBページで表示される内容を書いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
</head>
<body>
<h1>My Web Site</h1>
</body>
</html>
<h1>タグは見出しになります。見出しがあって、その下に文章などがあるのが記事の基本的な構造です。
このブログも記事のタイトルがあって文章がありますね。そんな感じです。hは「heading」の頭文字ですね。
見出しはh1→h2→h3→h4→h5→h6という順になります。大見出し、中見出し、小見出しと小さくなっていくイメージ。
お次は文章を書いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</body>
</html>
文章は<p>タグを使って表します（厳密に言うと段落）。
保存してブラウザで表示してみる
それでは、一度このファイルを保存してみましょう。「UTF-8」の文字コードで保存します。
どこか好きな場所に「test」という名前のフォルダを作ってください。この中にファイルを保存します。
VScodeを使っている人はデフォルトでUTF-8になっているので、「index.html」というファイル名でそのまま保存してください。
メモ帳を使っている人は、「index.html」という名前を付けて、文字コードを「UTF-8」に変更して保存します。
保存したファイルをChromeなどのブラウザにドラッグ＆ドロップしてください。もしくはファイルを「右クリック」→「プログラムから開く」でブラウザを選択。
表示例
表示されましたか？このファイルはローカルにあるものなので、自分のパソコンでしか見れないページになります。
サーバーをレンタルしてファイルをサーバーにアップすることで、全世界にWEBサイトを公開することができます。
コメントアウトを使ってみる
HTMLには、ページには表示されないメモを書きこむことができます。
<!-- この中身は表示されない -->
<!– ～ –> に囲まれた内容はWEBページには表示されません。何かメモを残したいとか、とりあえず一旦非表示にしたい部分などに使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<!-- ここ後で消す -->
</body>
</html>
上のように記述して保存して、ブラウザを更新（F5もしくはCtrl+R）してみましょう。先ほど書きこんだ部分は表示されません。
表示例
CSSでページを装飾してみよう
それにしても文字が真っ黒で味気ないですよね。今度はCSSを記述してページを装飾してみましょう。基本的に、CSSのコードは別ファイルに記述します。
ファイルを新規作成して、以下のように書きます。
@charset "UTF-8";
今回もUTF-8で指定します。CSSファイルは最初に@マークを記述します。
@charset "UTF-8";
h1 {
}
CSSで要素を指定して、その要素にスタイルを適用していきます。まずはh1要素を装飾していきます。
要素の後に{と}で囲んだ部分に装飾する内容を書いていきます。
@charset "UTF-8";
h1 {
color: #cc0033;
}
colorで文字の色を変えることができます。カラーは頭に#を付けて16進数で指定します。
カラーコードは別に覚える必要はなく、以下のようなサイトで調べたりPhotoshopからコピペしたりします。
白（#ffffff）と黒（#000000）はよく使うので覚えておいた方が良いでしょう。#fffと#000に省略可。大文字でもOKです。
セレクタ {
プロパティ名: 値;
プロパティ名: 値;
}
セレクタで要素を指定します。
CSSはプロパティ名の次にコロン（:）、そして値を書きます。セミコロン（;）で区切ると並べて指定ができます。
ちなみに…
セレクタ {プロパティ名:値;プロパティ名:値;プロパティ名:値}
このように改行せずに書いても問題なく表示されます。しかし、横にずらーと書きこんでいくと非常に見づらいです。
改行して字下げ（インデント）した方が見やすいので、そのように書きましょう。
CSSをHTMLに適用する
次に、CSSをHTMLに適用してみましょう。先ほど作成したファイルを「style.css」と名付けて保存してみましょう。保存場所はHTMLと同じ「test」フォルダ（さっき作ったやつ）にしてください。メモ帳の方は、「UTF-8」を指定するのを忘れずに。
もう一度、HTMLファイルを開きます。head内に、このCSSを読み込むためのコードを書いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</body>
</html>
これで保存して、ブラウザを更新（F5もしくはCtrl+R）してみましょう。いかがでしょうか？色が変わりましたね。
表示例
※以降、ファイルを書き換えたら上書き保存（Ctrl+S）して、ブラウザを更新（F5もしくはCtrl+R）して表示させて下さい。
それではCSSファイルに戻ってスタイルをさらに追加してみましょう。
@charset "UTF-8";
h1 {
color: #cc0033;
font-size: 20px;
}
p{
color: #666;
font-size: 16px;
}
表示例
font-sizeで文字の大きさを変えることができます。
CSSで使われるサイズの単位には、
- px
- em
- rem
- %
がありますが、今回はpx（ピクセル）だけを使っていきます。他の単位について知りたい人はググってみて下さい。
次は、テキストの一部だけにスタイルを適用してみます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テスト用サイト</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>My Web Site</h1> <p>あの<span>イーハトヴォ</span>のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p> </body> </html>
@charset "UTF-8";
h1 {
color: #cc0033;
font-size: 20px;
}
p {
color: #666;
font-size: 16px;
}
span {
font-weight: bold;
}
<span>タグを使うと、テキストの一部だけにスタイルを適用することができます。font-weightは文字の太さ、boldは太字を表します。
これで「イーハトヴォ」の部分だけが太字になりました。
表示例
ディベロッパーツール
突然の余談ですが、ここで一つワンポイントアドバイスをします。
ブラウザ上で右クリック→「要素を検証」「検証」「要素を調査」もしくは「F12」キーを押すとディベロッパーツールというのが出てきます。
追記：macだとcommand + option + i です。macでのディベロッパーツールの出し方が分かりづらいとのことで、念のために追記いたしました。
見ているページのHTMLやCSSのソースコードを覗くことができます。
画像右側「Styles」でCSSが見られるのですが、ここにCSSを書きこむとブラウザ上の表示を試しにいじることができます。かなり使える機能なので、覚えておきましょう。
閑話休題。
idやclassを使ってみよう
HTMLでは、idやclassを使って指定した場所にだけスタイルを適用することができます。
idは同じ名前を同一のページで複数個所に使うことができません。一箇所だけです。対して、classは同一のページ内で何回も使えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あの<span>イーハトヴォ</span>のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<h1 id="title">Test</h1>
<p class="text">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p class="text">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</body>
</html>
上のコードでは、titleというidを振りました。同じページにtitleはここだけです。他のタグにtitleという名前のidを付けてはいけません。
classは何度でも使えるので、textというclass名を複数個所に適用させています。
@charset "UTF-8";
h1 {
color: #cc0033;
font-size: 20px;
}
#title {
color: #6600ff;
}
p {
color: #666;
font-size: 16px;
}
.text {
font-size: 14px;
}
span {
font-weight: bold;
}
#id名でスタイルを適用させたいidを指定。
.class名でスタイルを適用させたいclassを指定。
さきほどh1に赤の文字色を指定しましたが、idを指定している方が優先されて適用されます。
同じく、textというclass名をふった文章は小さくなりましたが、他の文章は小さくなっていませんね。
こういう書き方もあります。
@charset "UTF-8";
h1 {
color: #cc0033;
font-size: 20px;
}
h1#title {
color: #6600ff;
}
p {
color: #666;
font-size: 16px;
}
p.text {
font-size: 14px;
}
span {
font-weight: bold;
}
表示例
このように、idやclassを指定して、特定の要素にだけスタイルを適用することができます。idを使う機会というのはあまり多くないので、初心者のうちはclassを使っておけば無難だと思います。
ちなみに、CSSにもコメントアウトでメモを残せます。
@charset "UTF-8";
/* テキストのCSS */
h1 {
color: #cc0033;
font-size: 20px;
}
#title {
color: #6600ff;
}
p {
color: #666;
font-size: 16px;
}
.text {
font-size: 14px;
}
span {
font-weight: bold;
}
/* ～ */で囲まれた部分は無視されて読み込まれません。メモを残したり、一時的にスタイルを適用外にしたいときなどに使います。
/* h1 {
font-size: 30px;
} */
このように、/* ～ */で囲まれたスタイルは無視され、ページに反映されません。
画像を挿入してみよう
WEBサイトはテキストだけでなく、画像も表示されますね。次は、ページに画像を挿入してみましょう。
そのためには、まず画像を用意しなくてはいけませんね。「test」フォルダの中に「img」という名前にフォルダを新規作成してください。
testフォルダ
次に、いらすとやにアクセスして好きな画像を選んで「image.png」という名前で保存してください。保存先は先ほど作成した「img」フォルダです。
私はこの画像をダウンロードしてみました。
保存したら、次のコードを記述して下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あの<span>イーハトヴォ</span>のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<h1 id="title">Test</h1>
<p class="text">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p class="text">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<img src="img/image.png" alt="テスト用の画像">
</body>
</html>
表示されましたか？srcで画像ファイルの場所とファイル名をしていします。alt属性は画像が読み込まれなかった時や画像表示をオフにしている時に表示されるテキストです。また、音声でブラウジングしていて画像が見れない人のためにもなるので、しっかり記述しておきましょう。
表示例
画像が大きすぎたので、CSSで画像のサイズを修正してみましょう。
@charset "UTF-8";
h1 {
color: #cc0033;
font-size: 20px;
}
#title {
color: #6600ff;
}
p {
color: #666;
font-size: 16px;
}
.text {
font-size: 14px;
}
span {
font-weight: bold;
}
img {
width: 300px;
height: auto;
}
widthは横の幅、heightは縦の高さになります。widthで幅を指定し、heightをauto（自動）にすることで、縦横比を保ったままサイズを修正することができます。
表示例
画像がゆがむことなくサイズが変更されました。
テキストに関するHTMLやCSS
ここで一度、テキストについてのHTMLやCSSをもう少し掘り下げて学んでみましょう。
先ほどまで書きこんだHTMLのbody内を一部削除して以下のようにして下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</body>
</html>
テキストの中に<br>というタグが入っていますね。これは改行を表しています。終了タグは不要です。<p>～</p>でくくられると改行したように見えますが、<p>タグが表しているのは改行ではなく「段落」です。
表示例
段落の中で改行するには、<br>タグを使ってください。
テキストを装飾するCSS
h1とp要素に色々なスタイルを適用させてみましょう。
※他の箇所は省略します。
h1 {
color: #cc0033;
font-size: 20px;
text-align: center;
}
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: center;
}
text-alignは左揃え（left）、中央揃え（center）、右揃え（right）を指定することができます。
line-heightは行の高さです。先ほどよりも行間が開いたのが分かると思います。
表示例
では、お次にフォントを変えてみましょう。以下のように書き足してみて下さい。
body {
font-family: 'メイリオ', 'Meiryo', sans-serif;
}
h1 {
color: #cc0033;
font-size: 20px;
text-align: center;
}
/* 以下略 */
font-familyでフォントを指定することができます。
基本的にフォントはbodyに設定します。そうすると、ページ内のテキスト全てにフォントが適用されます（他のセレクタで書き換えない限り）。ページ全体でフォントがちぐはぐだとおかしいので、基本は同じフォントにして統一感を出します。
フォントはOSやブラウザなどの環境によって適用されない場合があるので、複数記述しておきます。左から順に指定されたフォントが優先されて適用されます。
表示例
リンクを貼ってみよう
URLをクリックすると指定したサイトやページにとぶようにリンクを貼ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p><a href="http://www.yahoo.co.jp/">yahoo!</a>に飛びます。</p>
</body>
</html>
<a>タグで囲んだ部分がリンクになり、href属性の値（href=”値”）にURLを入れると、指定したサイトにリンクを貼ることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p><a href="http://www.yahoo.co.jp/" target="_blank">yahoo!</a>に飛びます。</p>
</body>
</html>
target=”_blank”を入れると、別のタブを開いて別サイト（別ページ）に飛ばすこともできます。
リンクのスタイルを少し変えてみましょう。
h1 {
color: #cc0033;
font-size: 20px;
text-align: center;
}
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: center;
}
a {
text-decoration: none;
}
デフォルトではリンクには下線が引かれます（text-decoration: underline）。下線を消したい時は、text-decoration: none;と記述して下さい。
ただ、ちょっと物足りないですね。ほとんどのWEBサイトでは、リンクにポインターを当てると色が変わりますよね？これを実装してみましょう。
h1 {
color: #cc0033;
font-size: 20px;
text-align: center;
}
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: center;
}
a {
text-decoration: none;
}
a:hover {
color: #6699ff;
text-decoration: underline;
}
表示例
:hoverは疑似クラスを呼ばれるもので、これを使うとポインターをのせた時のスタイルを変えることができます。
上のCSSでは、色を変えて下線が引かれるように指定しました。
他にも、リンク先に訪問済みの場合の記述もあります。
h1 {
color: #cc0033;
font-size: 20px;
text-align: center;
}
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: center;
}
a {
text-decoration: none;
}
a:visited {
color: #999;
}
a:hover {
color: #6699ff;
text-decoration: underline;
}
表示例
これで訪問済みのリンクのスタイルが変更されました。
お次に、クリックされている時だけスタイルを適用する方法です。
h1 {
color: #cc0033;
font-size: 20px;
text-align: center;
}
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: center;
}
a {
text-decoration: none;
}
a:visited {
color: #999;
}
a:hover {
color: #6699ff;
text-decoration: underline;
}
a:active {
color: #993366;
}
試しに「yahoo!」のリンクを長めにクリックしてみましょう。その間だけ赤っぽい色になったと思います。
例えば、リンクをボタンの形にして、押した時にボタンが凹むなんて場合に使えますね。
リストを作ってみよう
お次はリストを作ってみましょう。リストを頻繁に使うのはグローバルナビやサイドメニューの部分ですね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p><a href="http://www.yahoo.co.jp/" target="_blank">yahoo!</a>に飛びます。</p>
<ul>
<li>Google</li>
<li>yahoo!</li>
<li>bing</li>
</ul>
</body>
</html>
表示例
リストを表すタグには2種類あります。<ul>タグと<ol>タグです。リストの項目は<li>タグを使います。
<ul>タグは順序を付けないリストです。上のコードで、
<ul> <li>Google</li> <li>yahoo!</li> <li>bing</li> </ul>
↓↓順序を入れ替える
<ul> <li>yahoo!</li> <li>Google</li> <li>bing</li> </ul>
と変えたからと言って特に問題はありませんよね。ただ単に位置が変わったというだけです。
対して、<ol>タグは順序を付けるリストです。例えば、以下のようなリストを作ったとしましょう。
<h2>時価総額ランキング</h2> <ol> <li>トヨタ</li> <li>NTTドコモ</li> <li>NTT</li> </ol>
この場合、リストの順番に意味があります。2位の項目が3番目にくるとおかしいですよね？？この場合は<ol>タグを使います。
目次とかも順番に意味があるリストなので<ol>タグが使われますね。
基本的にリストはメニューに使われることが多く、<ul>の方が圧倒的に利用頻度が高いです。
親要素と子要素
先に進む前に、親要素と子要素について説明しておきます。
<ul> <li>Google</li> <li>yahoo!</li> <li>bing</li> </ul>
<ul>～</ul>の中にli要素が入れ子になっていますね。
この時、ul要素はli要素にとって親要素になります。逆に、li要素はul要素にとって子要素になります。
そして、以下の3つの要素は兄弟要素になります。
<li>Google</li> <li>yahoo!</li> <li>bing</li>
親子、兄弟の関係何となくわかりましたか？？親要素と子要素という用語は後から出てきますので、覚えておいてください。
では、先ほどのコードに戻ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p><a href="http://www.yahoo.co.jp/" target="_blank">yahoo!</a>に飛びます。</p>
<ul>
<li>Google</li>
<li>yahoo!</li>
<li>bing</li>
</ul>
</body>
</html>
このようにリストが表示されたかと思います。リストの各項目には黒丸が付きます。
この部分はlist-style-typeで変更することができます。デフォルトの値はdisc（黒丸）です。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: circle;
}
こうすると白丸になります。
表示例
他にも、黒い四角（square）にすることもできます。
今度は、これを消してみましょう。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
表示例
これで消えましたね。
このブログの上部にカテゴリが表示されたメニューがありますね。ここでul要素が使われています。メニューには黒丸などが表示されていないことがほとんどですよね。基本的には消してしまうことが多いです。
今度はメニューにリンクを貼ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p><a href="http://www.yahoo.co.jp/" target="_blank">yahoo!</a>に飛びます。</p>
<ul>
<li><a href="https://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">yahoo!</a></li>
<li><a href="https://www.bing.com/">bing</a></li>
</ul>
</body>
</html>
ここでa要素はli要素の入れ子になってます。ですので、li要素は親要素、a要素が子要素という関係になります。これは先ほど説明しましたね。
せっかくなので、メニューっぽい感じにしてみましょうか。
displayのblock、inlineを知ろう
追記：コメント欄にてご指摘があったので、一部修正いたしました。
メニューを作る前にちょっと脱線。
CSSを勉強する上で、理解しておかなくてはいけないのが、displayプロパティの値についてです。
セレクタ {
display: 値; //display,inlineなど
}
まずはdisplay:blockについて説明します。分かりやすいように背景をグレーにしてみました。
p要素
p要素
p要素はこのように横幅いっぱいに広がっているのが分かると思います。
- li要素
- li要素
li要素も同様です。h1～h6、p、ul、ol、li、divなどがdisplayの初期値がblockになっているからです。
displayがblockの要素は上のように表示されます。
要素がブロックを形成して積まれているようなイメージです。横に並ぶのではなく、改行のようになって、縦に積まれていきます。
displayには、inlineという値があります。先ほど出てきた<span>や<a>タグをテキストに挿入してみます。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
span要素やa要素は横いっぱいに広がることなく、タグで囲んだ部分だけの範囲になります。これは、span要素やa要素のdisplayの値がinlineなのでこのように表示されます。
displayの値によって見え方が違うのが分かるかと思います。
CSSを使って、displayの値を変更して見え方を変えてみましょう。先ほどのHTMLに戻ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p><a href="http://www.yahoo.co.jp/" target="_blank">yahoo!</a>に飛びます。</p>
<ul>
<li><a href="https://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">yahoo!</a></li>
<li><a href="https://www.bing.com/">bing</a></li>
</ul>
</body>
</html>
li要素のdisplayの値はblockだと説明しましたが、CSSを使ってこれをinlineにしてみましょう。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
表示例
縦に積まれていたli要素が、横並びに表示されました。ついでに装飾してみましょう。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
li a {
background-color: #333;
color: #fff;
}
li a:visited {
color: #fff;
}
表示例
ここで見慣れない記述がありますね。
li a {
background-color: #333;
color: #fff;
}
li a:visited {
color: #fff;
}
liの後にスペースを空けてaとなっています。これは、li要素の中にあるa要素だけにスタイルを適用するという意味になります。
「yahoo!に飛びます。」のリンクにはスタイルが適用されていませんね。
li要素内にあるリンクだけにスタイルが反映されているのが分かるかと思います。
親要素 子要素 {
}
それではinlineの話に戻します。
実は、display:inlineには欠点があります。それは、高さや幅を指定することができないということです。（逆に、displayをblockにすると高さや横幅を指定できる）
試しに、リストにwidthを指定してみましょう。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
li {
display: inline;
width: 100px;
}
li a {
background-color: #333;
color: #fff;
}
li a:visited {
color: #fff;
}
はい、何も変化がありません。
では、横並びにして、尚且つリストのリンクに幅を指定するには、どうしたらよいのでしょうか？
この場合、li要素の中にあるa要素をblockにして幅を指定してあげると良いです。
そして、横並びにするためにfloatの値をleftにしてあげます。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
li {
display: inline;
float: left;
}
li a {
display:block;
width: 100px;
background-color: #333;
color: #fff;
}
li a:visited {
color: #fff;
}
表示例
floatは左(left)に寄せたり右に寄せたり(right)する時に使います。floatについての詳しい説明は後述します。
最後の仕上げに、テキストを中央にして、ポインターをのせた時に背景色が変わるようにしてみます。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
li {
display: inline;
float: left;
}
li a {
display:block;
width: 100px;
background-color: #333;
color: #fff;
text-align: center;
}
li a:visited {
color: #fff;
}
li a:hover {
background-color: #999;
color: #fff;
text-decoration: none;
}
表示例
a要素のdisplayがblockになっているので、高さを指定することもできます。
高さを指定する場合、文字の高さも同じ数値にしてあげると縦に対して中央に配置されます。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
li {
display: inline;
float: left;
}
li a {
display:block;
width: 100px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
}
li a:visited {
color: #fff;
}
li a:hover {
background-color: #999;
color: #fff;
text-decoration: none;
}
要素を横並びにして、各項目に幅を指定する方法はもう一つあります。inline-blockを使う方法です。
inline-blockは、inlineのように横並びにでき、blockのように高さや幅を指定することができます。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
width: 100px;
height: 30px;
}
li a {
display:block;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
}
li a:visited {
color: #fff;
}
li a:hover {
background-color: #999;
color: #fff;
text-decoration: none;
}
こうすると、各項目の間に隙間ができていますね。
inline-blockでリストを横並びにすると、半角のスペースができてしまいます。それをなくすためには、フォントサイズを0にして、リンク部分にfontサイズを改めて指定してあげればOKです。
半角スペースはulの中、リストの各項目liの外にあるので、ulのフォントを0にします。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block;
width: 100px;
height: 30px;
}
li a {
display:block;
background-color: #333;
color: #fff;
font-size: 18px;
text-align: center;
line-height: 30px;
}
li a:visited {
color: #fff;
}
li a:hover {
background-color: #999;
color: #fff;
text-decoration: none;
}
他にも、displayにはtableやtable-cellなどもあるのですが、今回は省きます。知りたい人はググってみて下さい。
お次はfloatについて説明いたします。
floatの後ろの要素が回り込んでくる！！
CSSの記述をinlineとfloatを使った方法に戻し、p要素のテキストを一旦左寄せにします。
/* 省略 */
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: left;
}
a {
text-decoration: none;
}
a:visited {
color: #999;
}
a:hover {
color: #6699ff;
text-decoration: underline;
}
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
li {
display: inline;
float: left;
}
li a {
display:block;
width: 100px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
}
li a:visited {
color: #fff;
}
li a:hover {
background-color: #999;
color: #fff;
text-decoration: none;
}
HTMLに以下のように記述してみて下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p><a href="http://www.yahoo.co.jp/" target="_blank">yahoo!</a>に飛びます。</p>
<ul>
<li><a href="https://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">yahoo!</a></li>
<li><a href="https://www.bing.com/">bing</a></li>
</ul>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</body>
</html>
一度保存してブラウザを更新して確認すると…
表示例
さっき作ったメニューの横にテキストが回り込んでくる！
そうなんです。floatを使うと、後続の要素が回り込んでくるんです。うぜーーー。
これがなかなか初心者泣かせなのですが、これを防ぐ方法があります。それが、clearfixと呼ばれる手法です。
clearfixは、floatが使われている要素の親要素に以下の記述します。
親要素::after {
content: "";
display: block;
clear: both;
}
子要素 {
float: left;
}
これがclearfixという手法。clearfixというコードがあるのではなく、回り込みを解除する手法の名称です。
実際に書いてみるとこんな感じ。
/* 省略 */
a:active {
color: #993366;
}
ul {
list-style-type: none;
}
ul::after {
content: "";
display: block;
clear: both;
}
li {
display: inline;
float: left;
}
/* 省略 */
表示例
clearfixの仕組みについては、今回は説明を省きます。呪文みたいなもので、このように書くと回り込みを解除することができると覚えておいてください。
margin、padding、borderを理解しよう
CSS初心者がつまづくのが、marginとpaddingの違いです。
marginは要素の外側の余白。paddingは要素の内側の余白です。borderはその名の通り要素を囲む枠です。
要素の背景が白いと分かりづらいですが、色をつけてみるとイメージしやすいと思います。
先ほど記述したp要素にclassを振って、背景色をかえてみましょう。分かりやすいようにちょっとテキストの文字数を増やしてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト用サイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Site</h1>
<p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br>うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p><a href="http://www.yahoo.co.jp/" target="_blank">yahoo!</a>に飛びます。</p>
<ul>
<li><a href="https://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">yahoo!</a></li>
<li><a href="https://www.bing.com/">bing</a></li>
</ul>
<p class="article">あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br>
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br>
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</body>
</html>
/* 省略 */
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: left;
}
.article {
background-color: #eee;
}
/* 省略 */
表示例
背景がグレーになった部分に余白がなくてなんか見栄えが悪いですね。
paddingを使って、グレーの内側に余白をいれてみましょう。
/* 省略 */
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: left;
}
.article {
padding: 16px;
background-color: #eee;
}
/* 省略 */
表示例
paddingの値に数値を一つ入れると、上下左右に同じ値の余白が入ります。
上下左右を指定して余白を空けることもできます。
padding-top: 数値; padding-bottom: 数値; padding-left: 数値; padding-right: 数値;
paddingに複数の数値を入れて、いっぺんに複数の余白を指定することもできます。
padding: 数値 数値; /* 1番目の数値は上下の余白、2番目の数値は左右 */ padding: 数値 数値 数値; /* １番目は上、2番目は左右、3番目は下の余白 */ padding: 数値 数値 数値 数値; /* 上、右、下、左の順で余白が入ります（上から時計回りと覚えればいい） */
例えば、
padding-top: 6px; padding-bottom: 10px; padding-left: 8px; padding-right: 4px;
というコードがあったとしたら、
padding: 6px 4px 10px 8px;
このように1行にまとめることができます。こういう書き方ができるようになると、無駄を省けて楽ですし、コードが少なくて見やすくなります。
お次はmarginについて。marginは要素の外側に余白を空けます。要素と要素に距離をとってあげる時に使います。
数値の指定方法はpaddingと一緒です。それでは、テキストとメニューの間の余白を広げてみましょう。
/* 省略 */
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: left;
}
.article {
margin-top: 40px;
padding: 16px;
background-color: #eee;
}
/* 省略 */
表示例
これでメニューとテキストの距離が広がりましたね。marginはこのようにして使います。
margin-top: 数値; margin-bottom: 数値; margin-left: 数値; margin-right: 数値;
paddingと同じですね。複数の値を一行にまとめる方法も同様です。
margin: 数値 数値; /* 1番目の数値は上下の余白、2番目の数値は左右 */ margin: 数値 数値 数値; /* １番目は上、2番目は左右、3番目は下の余白 */ margin: 数値 数値 数値 数値; /* 上、右、下、左の順で余白が入ります（上から時計回りと覚えればいい） */
paddingとmarginは数値の指定方法は同じで、要素の内側か外側かの違いです。
お次はborderを使って境界線を入れてみましょう。
/* 省略 */
p {
color: #666;
font-size: 16px;
line-height: 26px;
text-align: left;
}
.article {
margin-top: 40px;
padding: 16px;
border: solid 1px #666;
background-color: #eee;
}
/* 省略 */
表示例
borderは以下のように指定してあげます。
border: 線のスタイル 太さ 色;
スタイルはいくつか種類があり、良く使うのがsolid、dashed、dottedです。
solid
borderのスタイル
dashed
borderのスタイル
dotted
borderのスタイル
上下左右を指定してラインを入れることもできます。
border-top: 線のスタイル 太さ 色; border-bottom: 線のスタイル 太さ 色; border-left: 線のスタイル 太さ 色; border-right: 線のスタイル 太さ 色;
例えば、
border-left: solid 6px #0099cc;
このように記述すると、
borderのスタイル
↑このように、左にラインが入りました。
HTMLタグの中にスタイルを入れることもできる
今回は、HTMLの装飾はすべてCSSで行ってきましたが、実はHTMLタグの中にスタイルを記述することもできます。
<p style="font-size:16px">テキスト</p>
しかし、スタイルの記述はCSSで行うのが原則なので（修正しづらいため）、できる限りHTMLタグ内に書かないようにしましょう。
うん、だいぶ長くなったので、HTML・CSS入門講座はこのあたりにしましょうか。
今回紹介したのは基礎中の基礎
以上で今回のHTML・CSS講座は終了なのですが、ここには書ききれないこともいっぱいありました。一つの記事で基礎を網羅するのは無理ですね。
しかし、テキストエディタに記述してブラウザに表示させてみるとWEBサイトの仕組みが少し分かったと思います。
本当はdiv要素やheaderとかfooterなどについても書きたかったのですが、この部分は1記事使って書いた方が良さそうなので、今後別記事にしてアップする予定です。
この記事でHTMLやCSSについて知ったことでWEB制作をもっと学びたいと思った方には、以下の本がオススメです。
一からWEBページを制作して実践で学べるので、とても身につきやすいです。
他にも、おススメの教材を紹介した記事も書いているので参考にしていただけると幸いです。
HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ – SHIROMAG
他にも、WEBサイトのコーディングを学べるオンラインスクールもあります。お金はかかりますが、空いた時間に受講できて、しかもマンツーマンなので質問もしやすいです。
CodeCampはあちこちで紹介されていて評判も良いようです。無料体験もできるみたいなので、興味がある人は無料体験してみても良いかもしれません。
あ、もしコードにおかしな点や誤字・脱字があった場合、コメント欄にて指摘してとても頂くと助かります。宜しくお願いいたします。
他にもこんな記事書いてます。
最近のコメント