今回は、静的webサイトを作るのに欠かせないHTMLとCSSの基礎を学習してきます。
HTMLやCSSには様々な要素が存在しているので、それらを使ってどうやってサイトをデザインしていくのかについて知っていきましょう。
0.コードを書くための準備
まずは、コードを書くのに必要なテキストエディタをインストールしましょう。
最近ではAtom, Vim, Visual Studio Code(VSCode)と言った様々なものを無料でインストール出来ます。
それぞれ特徴が違うので、自分に合ったものを選ぶことが大事ですが、今回は「VSCode」を使用します。テキストエディタを持っていない方はインストールしましょう。
VSCodeにはプラグインという、便利な追加機能を簡単に導入することが出来ます。
様々な種類が存在しているので、興味のある方は「vscode plugin プログラミングの言語名」で検索するとお勧めのプラグインが出てくるので調べてみると良いでしょう。本記事では詳しく触れません。
次に、検証用のツールをインストールしましょう。
自分の書いたHTMLやCSS, JavaScriptのコードを確かめるのに便利なツールといえば、Google Chromeです。正確に言えば、Chromeに備わっている「Google Developer Tools」というものを使います。詳しい使い方は後ほど教えるので、まずはGoogle Chromeをインストールしましょう。
以上で準備は整いました。次節からは実際にHTMLを学んでいきましょう。
1.HTMLの書き方とタグ
文字や画像を表示したり、外部リンクを貼ったりとwebサイトの基本的な要素を書くのが「HTML」の役割です。要素のことを「エレメント」と言います。
また、HTMLではそういった基本的な要素を書く際に、「タグ <>」というものを使って表現します。
本節では、HTMLの基本的な要素とタグについて学んでいきましょう。
まずは、index.htmlというファイルをVSCodeで新規作成して、以下のコードを貼り付けましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS入門</title>
</head>
<body>
</body>
</html>
上記コードに書いてある「htmlタグ」,「headタグ」,「bodyタグ」について説明します。
htmlタグ
- Headタグbodyタグなどの全体を囲う。
- 「Rootエレメント」と言う。
<html></html>
headタグ
- このホームページは何のために存在するのか
- ホームページを表示させるために必要な情報の取得
- 外部のファイルを参照する(css/JavaScriptなど)
検索エンジンにおいて使われる
例: viewport, title
<head> <title>タイトル</title> </head>
bodyタグ
- 実際にディスプレイに表示させるものをこのタグの中に書く。
<body></body>
以上の3つが、HTMLを書く上で3つの基本的な要素となります。
次に、文字や画像、リンクなどを表示させるために必要な要素について学びましょう。
これからは、bodyタグの中に要素を書いていきます。
先ほどのコードを以下の通りに編集しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS入門</title>
</head>
<body>
<h1>１番大きなタイトル</h1>
<h2>２番目に大きいタイトル</h2>
<h3>３番目に大きいタイトル</h3>
<h4>４番目に大きいタイトル</h4>
<h5>５番目に大きいタイトル</h5>
<p>普通の文字
<img src="自分の好きな画像のURL" width="200px">
<a href="https://raretech.site/">RareTECHのHPだよ。</a>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ol>
<table>
<tr>
<th>静 / 動</th>
<th>言語</th>
</tr>
<tr>
<td>静</td>
<td>Java</td>
</tr>
<tr>
<td>動</td>
<td>Python</td>
</tr>
<tr>
<td>動</td>
<td>JavaScript</td>
</tr>
<tr>
<td>静</td>
<td>Swift</td>
</tr>
<tr>
<td>静</td>
<td>Go</td>
</tr>
</table>
</body>
</html>
上記コードに書いてある各要素について説明します。
h1,h2…h5タグ
- 記事のタイトルやサブタイトルで使う
- 数字が小さいほど大きなタイトル。
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5>
pタグ
- 段落を表す。
- タイトルではない、普通の文字。
<p></p>
imgタグ
<img src="">
aタグ
- リンク遷移
<a></a>
ul li タグ
- リストの作成
<ul> <li></li> <li></li> </ul>
ol li タグ
- 番号付きリストの作成
<ol> <li></li> <li></li> </ol>
tableタグ
- テーブルの作成
<table></table>
以上が、文字や画像、リンクなどを表示させる基本的な要素となります。
次節では、それらをより華やかなものにするためにCSSについて学んでいきます。
2.CSSの書き方
第1節ではHTMLの基本的な書き方について学んできました。ここまでで自分の作ったサイトを改めて見返してみると、まだまだ本格的なwebサイトとは程遠いと思う人も多いかもしれません。
本節では、それらに装飾を施し、よりwebサイトと言えるようなものに近づけていきましょう。
HTMLに装飾を施す際に使うのが、「CSS」です。
CSSを書く場所には2通りの方法があります。
- headタグ内に書いてあげる方法
- 別ファイルに書いてあげる方法 (〇〇.css)
今回はheadタグの中に書くことにします。
では、先ほどのindex.htmlを以下のように編集しましょう。
今回使わないimgなどの要素は消去しておきました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS入門</title>
<style>
h1 {
color: red;
}
li {
color: aqua;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1>１番大きなタイトル</h1>
<h2>２番目に大きいタイトル</h2>
<h3>３番目に大きいタイトル</h3>
<h4>４番目に大きいタイトル</h4>
<h5>５番目に大きいタイトル</h5>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</body>
</html>
h1の文字が赤になり、リストの文字が水色になったと思います。
念のために今回からは、Google Chromeの検証ツールを使ってCSSがきちんと適用されているか確認してみましょう。
先ほど書いたコードをブラウザに表示させ、そのタブ上で右クリックを押して検証を左クリックしましょう。そうすると検証ツールが開きます。以下の3つはメニューに書いてあるものの中で、普段よく使うものです。理解しておきましょう。
- 「Element」 → HTML
- Elementの右側「Styles」 → CSS
- 「Console」 → JavaScriptなどで表示されるデバッグやエラーなどのメッセージ
今回はElementを選択し、右側にあるStylesを見ます。
h1とliそれぞれにcolorが設定され、またliには文字の大きさや太さも設定されていることがわかります。
では、今度は試しにbodyタグの色を緑色に変えてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS入門</title>
<style>
h1 {
color: red;
}
li {
color: aqua;
font-weight: bold;
font-size: 20px;
}
body {
color: green;
}
</style>
</head>
<body>
<h1>１番大きなタイトル</h1>
<h2>２番目に大きいタイトル</h2>
<h3>３番目に大きいタイトル</h3>
<h4>４番目に大きいタイトル</h4>
<h5>５番目に大きいタイトル</h5>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</body>
</html>
ブラウザ上で確認してみると、h1とli以外が緑色になっています。
何故その2つは緑色にならなかったのでしょうか？
↓その理由は↓
- 2つの重複した指定がある場合、より自身に近いタグの方が優先して反映されるから
ここはとても重要なところです。
今回の場合はbodyタグに緑、h1に赤を設定したことによって、bodyタグの中に書いてあるh1には緑と赤の2色が設定されていることになります。その場合は、h1自身に近い方のCSSスタイルを適用させることになり、今回だと、h1に直接指定されている赤が適用されたと言うことです。
idとclass
さて、既存のサイトに装飾が出来るようになったことでwebサイトに可能性が広がりました。
しかし、現状ではCSSがそれぞれの要素全てに適用されてしまいます。例えば、リストの2番目だけを紫色にしてそれ以外のリストは青にしたいと言う場合はどうすればいいのでしょう。
そこで、「id」,「class」の登場です。それぞれの違いは以下の通りです。
- 「id」→ このページ上に1つしかない場合
例: #heading {color: red} - 「class」→ このページ上に複数存在する場合
例:.clr-green {color:green}
では、試しにidとclassを使ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS入門</title>
<style>
h1 {
color: red;
}
li {
color: aqua;
font-weight: bold;
font-size: 20px;
}
#number2 {
color: blueviolet;
}
.odd-numbers {
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="odd-numbers">１番大きなタイトル</h1>
<h2>２番目に大きいタイトル</h2>
<h3 class="odd-numbers">３番目に大きいタイトル</h3>
<h4>４番目に大きいタイトル</h4>
<h5 class="odd-numbers">５番目に大きいタイトル</h5>
<ul>
<li>リスト1</li>
<li id="number2">リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</body>
</html>
今回はまずnumber2というidを作り、その色を紫にするように設定し、liのリスト2にだけ適用しました。また、odd-numbersというclassを作り、その色をオレンジにするよう設定し、h1,h3,h5に適用しました。
divとspan
次に、「div」,「span」についても理解しておきましょう。
段落やグループごとに囲いそれらにidやクラスを当てはめると、囲った中にあるもの全てにスタイルを適用することが出来ます。Divとspanの違いは以下の通りです。
- 「div」 → 大きさなど指定があって変えたくない場合
- 「span」 → 大きさなど指定がない場合
では、試しにdivとspanを使ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS入門</title>
<style>
h1 {
color: red;
}
li {
font-weight: bold;
font-size: 20px;
}
.number2 {
color: blueviolet;
}
.contentsA {
background-color: azure;
border: 1px solid gray;
}
.contentsB {
background-color: aquamarine;
}
.strong-text {
color: red;
font-weight: bold;
font-size: 22px;
}
</style>
</head>
<body>
<h1>１番大きなタイトル</h1>
<h3>３番目に大きいタイトル</h3>
<h4>４番目に大きいタイトル</h4>
<h5>５番目に大きいタイトル</h5>
<div class="contentsA">
<h2>コンテンツA</h2>
<p>コンテンツ<span class="strong-text">A</span>の説明。</p>
</div>
<div class="contentsB">
<h2>コンテンツB</h2>
<p>コンテンツ<span class="strong-text">B</span>の説明。</p>
</div>
<div class="contentsA">
<h2>コンテンツA</h2>
<ul>
<li>リスト1</li>
<li class="number2">リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</div>
<div class="contentsB">
<h2>コンテンツB</h2>
<ul>
<li>リスト1</li>
<li class="number2">リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</div>
</body>
</html>
margin,とpadding
次は「margin」,「padding」について理解しましょう。
- 「margin」 → 枠と外側の要素との間の距離
- 「padding」 → 枠と内部コンテンツの間の距離
では、試しにmarginとpaddingを使ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS入門</title>
<style>
body {
margin: 0;
}
h1 {
color: red;
text-align: center;
}
h2 {
margin: 0;
}
li {
font-weight: bold;
font-size: 20px;
}
p {
margin: 0;
}
.number2 {
color: blueviolet;
}
.contentsA {
background-color: azure;
border: 1px solid gray;
width: 60%;
margin: 0 auto;
}
.contentsB {
background-color: aquamarine;
width: 60%;
margin: 0 auto;
}
.strong-text {
color: red;
font-weight: bold;
font-size: 22px;
padding: 10px;
}
</style>
</head>
<body>
<h1>１番大きなタイトル</h1>
<div class="contentsA">
<h2>コンテンツA</h2>
<p>コンテンツ<span class="strong-text">A</span>の説明。</p>
</div>
<div class="contentsB">
<h2>コンテンツB</h2>
<p>コンテンツ<span class="strong-text">B</span>の説明。</p>
</div>
<div class="contentsA">
<h2>コンテンツA</h2>
<ul>
<li>リスト1</li>
<li class="number2">リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</div>
<div class="contentsB">
<h2>コンテンツB</h2>
<ul>
<li>リスト1</li>
<li class="number2">リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</div>
</body>
</html>
フォントの変更
これまでの作業で、webサイトと言えるようなものにかなり近づいたと思います。
ここからは細かなところを拘ってみましょう。フォントを変えていきます。
- 「font-family」→ フォントを指定する。
また、外部からからフォントを読み込むには、styleタグの中でimportを記述します。
@import url(‘ふぉんとのURL’);
では、試しにフォントを変えてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS入門</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
body {
margin: 0;
font-family: 'Noto Serif JP', serif;
}
h1 {
color: red;
text-align: center;
font-family: Georgia, serif;
}
h2 {
margin: 0;
font-family: Georgia, serif;
}
li {
font-weight: bold;
font-size: 20px;
}
p {
margin: 0;
}
.number2 {
color: blueviolet;
}
.contentsA {
background-color: azure;
border: 1px solid gray;
width: 60%;
margin: 0 auto;
}
.contentsB {
background-color: aquamarine;
width: 60%;
margin: 0 auto;
}
.strong-text {
color: red;
font-weight: bold;
font-size: 22px;
padding: 10px;
}
</style>
</head>
<body>
<h1>１番大きなタイトル</h1>
<div class="contentsA">
<h2>コンテンツA</h2>
<p>コンテンツ<span class="strong-text">A</span>の説明。</p>
</div>
<div class="contentsB">
<h2>コンテンツB</h2>
<p>コンテンツ<span class="strong-text">B</span>の説明。</p>
</div>
<div class="contentsA">
<h2>コンテンツA</h2>
<ul>
<li>リスト1</li>
<li class="number2">リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</div>
<div class="contentsB">
<h2>コンテンツB</h2>
<ul>
<li>リスト1</li>
<li class="number2">リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
</div>
</body>
</html>
以上で基本的なCSSのハンズオンは終了です。
第1節で書いたサイトの見た目と比べてみると、かなり良くなりました！
最後に次節では、cssを更に使いこなすために重要な知識について学んでいきます。
3.CSSを使いこなす
本格的なwebサイトを作るためには、これまでにやった基本的なHTMLやCSSの他にも様々なことが必要になります。具体的に言えば、以下のようなことが言えるのではないでしょうか。
- それぞれの要素に対するより細かなサイズ設定
- SEO対策
- レスポンシブ対応 (どの端末からでも快適にwebサイトを表示できるようにする)
今回は上記の3つに関する問題を解決するために必要な知識について、軽く触れていきます。
display
それぞれの要素には予め「display」と言うものが当てはめられています。
displayの種類によって縦並びか横並びかが変わったり、widthやheightといった要素が指定できるか否かが変わるのです。
試しにどんなものか見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>displayの確認</title>
</head>
<body>
<h1>１番大きなタイトル</h1>
<p>段落</p>
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" width="100px">
<a href="raretech.site">RareTECH</a>
<p>段落2</p>
</body>
</html>
確認してみると、h1とpの要素はそれぞれ下に表示されているのに対し、imgとaは横に並んで表示されているのが分かると思います。このように表示された理由は、前者がBlock要素なのに対し、後者がInline要素だからです。それぞれの違いについて確認しましょう。
- 「Block」 → 縦並び, width-heightの指定ができる
例:div, h1...h5, p - 「Inline」 → 横並び, width-heightの指定ができない
文字の大きさなど内部コンテンツによって決まる
例:a, img - 「Inline-block」 → 横並び, width-heightの指定ができる
これらの違いについて把握した上で、Inlineの要素を必要に応じてInline-blockに変更できると、よりwebサイトの表現の幅が広がります。
Semantic-webs
これは直接Webサイトのレイアウトに関わってくるものではないのですが、「Semantic-webs」と言うものを上手くbodyタグに書いてあげることで良いSEO対策になります。以下にいくつか例を挙げておきます。
<nav></nav> <section></section> <article></article>
レスポンシブ対応！2つのレイアウト
本格的なwebサイトを作る上で大切なのが、レスポンシブ対応です。
今回はレスポンシブ対応させるために使用する2つのレイアウトの存在を知っておきましょう。
「Flex」
親要素にflexboxを指定,子要素にflex 1 flex 2とそれぞれ指定すると、1:2の比率で且つレスポンシブに要素を表示させることが出来る。
Flex-directionでflexの方向を指定することが出来る。(デフォルトは横方向)
Justify-contentsで横中央に、Align-itemsで縦中央に揃えることが出来る。「Grid」
格子状のマス目のグリッドを並べることでレイアウトを作る。
以上が、本格的なwebサイトを作る上で大切な知識となります。
また、これらはBootStrapなどのCSSフレームワークを使う際にも役に立つ知識です。
ここまで学習してきたことを上手く活用すれば、立派なwebサイトが作れるようになります。
以上でHTML/CSS入門は終了です。お疲れ様でした！
4.最後に
今回はHTMLとCSSについて、その基礎となるものを学んでいきました。
RareTECHではこのようなハンズオン形式を含めた授業を月に8回、ライブ講義にて行っています。
興味のある方、そして価値のあるエンジニアになりたいという方はRareTECHのHPをご覧ください。
raretech.site
また、RareTECH公式LINE＠では以下の内容を発信しています。
- おすすめのプログラミング言語
- 初心者がやりがちな意味のない勉強法
- おすすめの優良記事
- 簡単な質問対応
特に、勉強方法について困っていることがあれば質問してみるのもお勧めです！
以下の URLからRareTECH公式LINE＠を登録できます。
https://landing.lineml.jp/r/1654804352-xmngLnqd?lp=Ld9S5W