今回はHTMLとCSSの基本についてお話しします。
HTMLとCSSはホームページを作ったり、ブログのデザインをカスタマイズするのに必要です。
そんなHTMLとCSSを基本的な概念から、実際の記述法までまとめてみました。
後で実際にホームページやブログを作る際にも、HTMLやCSSの辞書として使うこともできるようになっています。
HTMLの基本
HTMLとは
HTMLは、ページの要素や構造を指定するための言語です。
HTMLの記法は、下のコードのように開きタグと閉じタグで囲むような形になっています。
<タグ名>...</タグ名>
このように囲んだものが一つの要素となります。
この要素を組み合わせることによって構造を作っていきます。
例えば、下のように書けば、div要素の中にp要素が二つ入っているという感じです。
<div> <p>あいうえお</p> <p>かきくけこ</p> </div>
要素の順序は、上から順に並ぶようになっています。
このように、HTMLは要素を入れ子にして記述することで、構造を表しているんです。
またこの要素には、idとclassを振り分けることができます。
厳密には違うのですが、イメージとしては名前をつけれると思ってもらえれば大丈夫です。
idはこのように指定します。
<p id="name">名前</p>
classはこのように指定します。
<p class="name">名前</p>
idとclassの違いは、idが唯一無二で、classが唯一無二でないということです。
そのことについては、「idとclassの違いちゃんと分かってる？大変なことになる前に知っておいてな」で詳しく紹介しているので、参考にしてください。
HTMLの基本はたったこれだけです。
あとはそれぞれのタグがどのような役割をしているか覚えればOK。
しかも覚えるのは良く使うものだけでいいんです。
それもこの記事の最後にリストアップしたまとめがありますのでご安心ください。
CSSの基本
CSSとは
CSSはHTMLで作った要素を装飾するスタイルを指定する言語です。
ページのデザインは基本的にCSSで記述できます。
CSSはデザインを指定したい要素を宣言し、その中にどのような装飾をするのかを記述するといった形になります。
下のような感じです。
要素名 { プロパティ名:値; }
要素名はHTMLのタグ名やid、class名になります。
idとclassの指定は後で説明しますね。
プロパティ名というのは、何のデザインをいじるのか、という部分ですね。
背景をいじるのか、幅をいじるのか、高さをいじるのかなどです。
値は、そのプロパティをどんな値にするのかということです。
色を赤くしたいとか、幅を100pxにしたいとかです。
実際のCSSはこんな感じになります。
div { background:red; }
ここでは、div要素の背景を赤にする、という装飾を指定しています。
これが一番基本なのですが、細かい話があるので、一つずつ見ていきましょう。
CSSは3種類の書き方がある
CSSには3種類の書き方があります。
- HTMLタグに埋め込む
- HTMLファイル内に埋め込む
- CSSファイルに記述
この3種類です。
これで何が変わるかといえば、デザインを適用する優先順位が決まります。
1のHTMLタグに埋め込んだスタイルが一番優先され、次にHTMLファイルに埋め込んだもの、一番優先されないのがCSSファイルに記述したものです。
ただし、綺麗な書き方を目指すために、できる限りHTMLタグに埋め込む書き方はやめることを推奨します。
ここで注意してほしいのが、このCSSの種類以外でも優先順位が決まるポイントがあることです。
何かと言うと、CSSを記述する順番なんですね。
下に書いたものほど優先されます。
このことも記憶の片隅に置いておくと、なぜだか上手く適用されていないというデザインのバグを見つけやすくなるかもしれません。
さて、ではそれぞれの書き方を1つずつ見ていきましょう。
HTMLタグに埋め込む
ここでは下のように書きます。
<p style="color:red;">あいうえお</p>
この「style=""」がキーワードとなっています。
""で囲まれた部分にCSSを書くことで、スタイルを指定します。
HTMLファイルに埋め込む
この書き方では、下のようなコードになります。
<style> div { background:red; } </style>
これは上の例で書いたときと同じ記述方法ですが、styleタグで囲んでいます。
このstyleタグで囲まれた部分がCSSとして認識されるわけです。
CSSファイルに書き込む
これが一番一般的な書き方だと思います。
一番最初に紹介したCSSの書き方です。
div { background:red; }
これは独立したCSSファイルに書き込む時の書き方になります。
はてなブログでいえば、デザインCSSに当たる部分ですね。
idとclassに対するCSS
idに対するCSS
idに対するCSSは次のようにして記述します。
#name { background:red; }
#をid名の前に付けることで指定するわけです。
これでidごとにCSSを記述できます。
classに対するCSS
classに対するCSSは次にように記述します。
.name { background:red; }
.をclass名の前に付けることで、classに対するCSSを記述することができます。
ページを作る
まずは設計から
ホームページを作ったり、ブログのデザインを作ろうとしたときに、いきなりHTMLやCSSを書き出そうとする人がいます。
これは絶対にやめた方がいいです。
設計をせずに始めると、結局うまくいきません。
設計といっても難しいことではないんです。
例えば、全体の設計をしようとしたときにどのようなデザインにしようか、といったときに自分がしたいようにノートにでも書いてみましょう。
細かい話ですが、ヘッダーは横全体がいいのか、サイドバーはどこまでの範囲がいいのか、など最初に決めておいた方がいいです。
それを決めたら、 次はパーツごとの設計をしましょう。
例えば、ヘッダーの設計をしようとしたときには次のような感じです。
さらにグローバルメニューの設計をどうするか。
このように大きなところから小さなところに向けて設計していきましょう。
このときに、idやclass名も決めてしまうといいかもしれません。
この段階で決めておくと、どの部分を共通のものとして作れるか決めやすいんですよね。
例えばグローバルメニューならこんな感じで。
それか、タグ名まで決めてしまえばもっと効率よくできるかもしれないですね。
例えば、順序のないリストでグローバルメニューを作ることにすれば、下のようにするのがいいでしょう。
このように、設計をしっかりとしておけば、あとで作るのがかなり楽になりますよ。
どのレベルまで設計しておくかは、自分のさじ加減でいいと思いますが、僕としてはこのあたりまでやっておくことをお勧めします。
大枠から小さい方へ向けて順番に作る
先ほどの設計の段階でも、大きなところから小さなところに向けて設計していきましたよね？
実際にページを作る段階でもこのようにするのがいいです。
まずは大枠を作って、次にパーツを作っていき、大きなパーツができてきたらパーツの中の細かな部分を作っていく。
このようにすることで、全体のページがバランスよく出来上がっていきます。
勉強法
HTMLとCSSを勉強するのは、他のプログラミング言語の勉強をするよりも簡単ではあります。
覚えることもあまり多くない（よく使う物に限れば）です。
そこで、勉強の仕方を簡単にまとめてみたいと思います。
ここまでの内容を理解する
まずは、ここまでに説明した内容を理解してください。
それでさわりとしては問題ありません。
HTMLタグを覚える
これが大変だと思うかもしれませんが、必要最低限な部分に限定すれば簡単です。
覚えるべきHTMLタグはこちらにまとめております。
CSSプロパティを覚える
これもよく使うものに絞って大丈夫です。
よく使うCSSプロパティはこちらにまとめています。
ここまでの注意点
一口に覚えると言っても、全てを網羅する必要はありません。
必要な範囲を勉強すればいいです。
これは、他のプログラミング言語を勉強する際にも、共通することで、「初心者から中級者まで正しく学べるプログラミングの勉強法」でも解説しています。
displayとfloatを使ったデザインを練習
この2つを使ったデザインはよく出てきます。
しかし、これらが原因でデザインが崩れてしまうことがよくあります。
しっかりと練習しておきましょう。
練習に最適なサービス
自分で自由にHTMLやCSSの練習をしたいときには、CodePenというサービスがオススメです。
無料で登録でき、練習するのに非常によい環境です。
また、実際のホームページを作る流れを練習したいのであればProgateというサービスがオススメです。
HTMLとCSS以外のプログラミング言語も勉強できますが、このサービスは割とわかりやすいです。
間違えたときのメッセージの質もいいです。
独学がきつい人にはプログラミング教室がおすすめ
これは注意点なのですが、勉強している中でわからないことなどが必ず出てきます。それは、絶対に放置せずきちんと誰かに聞くようにしましょう。でないと、後から困るのは自分です。
もし、近くに教えてくれる相手がいないなら、プログラミング教室に通うのもいいでしょう。プログラミング教室なら、先生がいつでもあなたの疑問に答えてくれます。
プログラミング教室の中でも、僕が特に押しているのは「WebCamp」という、Webプログラミングを1ヶ月で学べるサービスです。以下の記事で、詳しく紹介しています。
書籍を使って学ぶのも良い
体系立てて学びたいなら書籍を使うこともおすすめです。以下の記事では、おすすめの書籍を紹介していますので、参考にしてください。
HTMLタグ一覧
見出し（h1〜h6要素）
これは、その名の通り見出しとなる要素です。
1が最も大きな見出しで、数字が増えるにしたがって小さな見出しになっていきます。
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5>
<h6>見出し6</h6>
段落（p要素）
p要素は段落を表します。
pタグに囲まれた部分が段落となるわけです。
<p>段落になります</p>
インライン要素（span要素）
span要素はそれ自体は特に意味を持ちません。
しかし、spanタグで囲んだ部分が一塊の要素となります。
また、囲んだ要素のdisplayプロパティの初期値はinlineです。
displayプロパティについてはこちらで確認できます。
これ、結構重要なのでちゃんと理解してくださいね。
<span>インライン要素です</span>
順序なしリスト（ul要素、li要素）
順序なしリストは、まずul要素を作り、その中にli要素を並べる形で記述します。
<ul> <li>要素1</li> <li>要素2</li> <li>要素3</li> </ul>
ブロック要素（div要素）
div要素はそれ自体は特に意味を持ちません。
しかし、divタグで囲んだ部分が一塊の要素となります。
また、囲んだ要素のdisplayプロパティの初期値はblockです。
ここがspan要素との違いですね。
displayプロパティについてはこちらで確認できます。
<div>ブロック要素です</div>
リンク（a要素）
a要素はリンクを表します。
外部のページへのリンクや内部リンクとしても使えます。
内部リンクではidを指定してその要素へ飛ぶこともできます。
<a href="#">リンクです</a>
ここでhrefで指定する内容はリンク先のurlかidです。
画像（img要素）
img要素は画像を表示します。
<img src="profile-image.png" alt="shunはJava系ブロガーである。" title="プロフィール画像">
ここでsrcに指定している内容が画像のurlです。
次に問題なのがaltとtitleですね。
altは代替テキストと言って、画像が表示されなかった時に表示されるテキストです。
なので、文脈に合うような文章を入れてください。
titleはその通りの意味で、画像のタイトルです。
CSSプロパティ一覧
ボックス
ボックスというのはその名の通り、箱だと思ってください。
先ほどの設計のところで書いた四角がボックスだと思ってくれれば大丈夫です。
このボックスの大きさや、余白、配置などのプロパティを指定してデザインを決めます。
大きさ
ボックスの大きさを指定するプロパティはwidthとheightが基本です。
どちらも、pxか%で大きさを指定できます。
次のようにして記述します。
div { width:100px; /* 幅 */ height:100px; /* 高さ */ }
これで、ボックスの幅と高さを指定して、大きさを決めることができました。
また、使う場面は限られるのですが幅と高さの最大値、最小値を決めておくことができます。
次のような書き方です。
div { max-width: 200px; /* 幅の最大値 */ min-width: 50px; /* 幅の最小値 */ max-height: 200px; /* 高さの最大値 */ min-height: 50px; /* 高さの最小値 */ }
ボックスの大きさ関係は以上です。
背景
背景を指定するプロパティはbackground-colorとbackground-imageが基本です。
それぞれ、背景色と背景画像を指定します。
背景色はこのように指定します。
div { background-color:red; }
ここでの背景色の値はredとなっていますが、色コード(#fffみたいなの)でも大丈夫です！
背景画像はこのように指定します。
div { background-image:url(image.png); }
ここでurlの中身は画像のurlです。
margin padding border
これらは重要なポイントですよ。
何かと言うと、余白や枠線を指定することができるプロパティなんですね。
それぞれが、どれを表しているかというのは、次の図でわかります。
このような関係になっているんです。
まず内容領域というのが実際のボックスです。
指定された高さと幅の領域になっています。
次にpaddingですが、これは内容領域に付け足す余白です。
この部分は内容領域と同じ背景色などが適用されます。
borderは枠線です。
内容領域とpadding領域の外に枠線をつけることができます。
marginはボックスの外の余白です。
外の領域とボックスの間の余白を指定することができます。
それぞれの書き方を見ていきましょう。
marginの書き方
marginの書き方は、次のようになります。
div { margin:10px 20px 10px 30px; }
これだけではどれがどこの大きさを指定しているかわかりませんね。
実際には省略して書くこともできるので、全部リストアップしておきますね。
こんな感じです。
margin:10px; /*（上下左右）*/ margin:10px 20px; /*（上下）（左右）*/ margin:10px 20px 30px; /*（上）（左右）（下）*/ margin:10px 20px 10px 30px; /*（上）（右）（下）（左）*/
カッコの中がそれぞれの値がどこの大きさを指定しているか、という部分になります。
また、上だけを指定したい、というような場合もあるかと思いますがもちろんそれもできます。
こんな感じです。
margin-top:10px; /*（上）*/ margin-bottom:10px; /*（下）*/ margin-left:10px; /*（左）*/ margin-right:10px; /*（右）*/
paddingの書き方
paddingは基本的にmarginと同じです。
div { padding:10px 20px 10px 30px; }
同じですよね（笑）
意味も全く同じで、こんな感じです。
padding:10px; /*（上下左右）*/ padding:10px 20px; /*（上下）（左右）*/ padding:10px 20px 30px; /*（上）（左右）（下）*/ padding:10px 20px 10px 30px; /*（上）（右）（下）（左）*/
それぞれの場所を指定する場合も同じです。
padding-top:10px; /*（上）*/ padding-bottom:10px; /*（下）*/ padding-left:10px; /*（左）*/ padding-right:10px; /*（右）*/
borderの書き方
borderは先ほどまでより複雑です。
基本の形はこんな感じ。
div { border:2px solid #000000; }
これがそれぞれどんな意味かというとこんな感じです。
div { border:太さ 線のスタイル 色; }
枠線の太さと色は大丈夫だと思いますので、線のスタイルについて説明します。
線のスタイルは、実線や破線などを指定することができる値です。
代表的なものを幾つか紹介しておきますね。
- solid（実線）
- double（二重線）
- dotted（点線）
- dashed（破線）
また、何も指定しなければ非表示になります。
枠線の幅分の余白を作ることもできるわけです。
borderもそれぞれの場所だけに適用することができます。
こんな感じです。
border-top:2px solid #000000; /*（上）*/ border-bottom:2px solid #000000; /*（下）*/ border-left:2px solid #000000; /*（左）*/ border-right:2px solid #000000; /*（右）*/
表示形式
表示形式を扱うCSSとしてよく使うのがdisplayプロパティです。
ただ、このdisplayが非常にややこしい。
説明していきましょう
まずは基本的な書き方です。
これはよくあるCSSのプロパティと同じです。
div { display:inline; }
次にdisplayの代表的な4つの値を紹介します。
- none（非表示）
- inline（インライン要素）
- block（ブロック要素）
- inline-block（インラインに入れるブロック要素）
none
これは、そのままの意味で非表示にするというものです。
ページ上から完全に消えます。
inlineとblock
inlineは要素を行として扱い横並びにする効果があります。
逆にblockは要素をボックスとして扱い、縦に並べます。
ここで注意してほしいのですが、inlineはボックスではなくなるので高さや幅を指定できなくなるということです。
例えば、こんなHTMLとCSSがあったとしましょう。
HTML
<div class="box"> あいうえお </div> <div class="box"> かきくけこ </div> <div class="box"> さしすせそ </div>
CSS
.box { width:100px; height:30px; background:#999; margin:2px; }
div要素はもともとブロック要素なので、このように表示されています。
これに対してdisplay:inline;をつけてみましょう。
こういうことです。
.box { width:100px; height:30px; background:#999; margin:2px; display:inline; }
それを表示すると、こんな感じになります。
高さや幅が無視されて、横並びになったのがわかりますよね。
これがinlineとblockの違いです。
inline-block
これはなかなか便利。
inline要素の中にブロックを入れたようになります。
実際にやってみましょう。
display:inline-block;を入れます。
.box { width:100px; height:30px; background:#999; margin:2px; display:inline-block; }
これを表示するとこんな感じ。
高さと幅が指定された上で、インライン要素のように横並びになっていますよね。
これがinline-blockです。
配置
配置を扱うプロパティには大きく分けてfloatとpositionがあります。
float
これは、ボックスを左か右に寄せるためのプロパティですね。
実際に見てみましょう。
このようなHTMLとCSSがあったとします。
HTML
<div> かきくけこ <div class="box"> あいうえお </div> </div>
CSS
.box { width:100px; height:30px; background:#999; margin:2px; }
このとき、実際の表示はこのようになります。
これに対してfloat:leftを指定します。
.box { width:100px; height:30px; background:#999; margin:2px; float:left; }
すると、このようになるんです。
ブロックが左寄せされて、テキストがその隣に回り込みます。
こんなことができるわけですね。
他にも、float:left;をつけたブロックを二つ並べると、横並びにできたりもします。
同じCSSでこのHTMLを使ったのがそれですね。
<div> <div class="box"> あいうえお </div> <div class="box"> かきくけこ </div> </div>
これを表示するとこんな感じになります。
position
positionはボックスの配置方法を指定することができます。
基本となる書き方はこんな感じです。
div { position:relative; top:20px; left:20px; }
positionで指定した配置方法で、どの位置からどれだけ動かすか、ということを指定できるわけです。
まずpositionプロパティの値は次の通りです。
- static（初期位置）
- relative（初期位置を基準とした相対位置）
- absolute（親要素を基準とした絶対位置）
- fixed（絶対位置・固定）
次に位置の指定は、次の中から組み合わせて行います。
top:20px; /*上から20px*/ bottom:20px; /*下から20px*/ left:20px; /*左から20px*/ right:20px; /*右から20px*/
このあたりは、CodePenを使って実際に確認してみるのがいいと思います。
テキスト
テキストのスタイルはよく編集したくなりますが、覚えることは少ないです。
文字の色
文字の色はcolorプロパティで指定します。
基本的な書き方は次の通りです。
p { color:#ffffff; }
文字の大きさ
文字の大きさはfont-sizeプロパティで指定します。
基本的な書き方は次の通りです。
p { font-size:13px; }
文字の太さ
文字の太さはfont-weightプロパティで指定します。
基本的な書き方は次の通りです。
p { font-weight:bold; }
値の種類は以下の通りです。
- normal（普通の太さ）
- bold（太字）
- 100〜900の値（大きい程太い）
フォントの指定
フォントの指定はfont-familyプロパティで指定します。
基本的な書き方は次の通りです。
p { font-family: "ＭＳ Ｐゴシック"; }
左寄せ・中央寄せ・右寄せ
テキストの寄せ方はtext-alignで指定します。
基本的な書き方は次の通りです。
p { text-align: center; }
値の種類は以下の通りです。
- left（左寄せ）
- center（中央寄せ）
- right（右寄せ）
動きをつける
最後に動きをつけるための記述を説明します。
これは非常に簡単です。
動きにはhoverとactiveがあります。
hoverはマウスが要素の上に乗ったときのCSSを指定できます。
activeはクリック中のCSSを指定できます。
hoverの書き方は次の通りです。
div:hover { background:red; }
要素名の後に記述します。
もちろんidやclass名の後にも記述できますよ。
activeも同様です。
div:active { background:red; }
まとめ
今回は初心者向けのHTMLとCSSの基本をまとめた記事でした。
量は少し多いですが、どれも重要なポイントです。
マスターして、自分のブログやホームページをどんどんカスタマイズしていきましょう！
HTMLの次はJavaScriptを勉強してみましょう！
