Webページ制作やWebデザイン学習において、基本知識となるのがHTMLとCSS。
しかし、HTML/CSSを忘れてしまったり、理解できなかったりして、復習したいけど、なかなか時間が取れなくて悩んでいませんか？
悩んでる人ポイントをおさえて復習したいけど、どれが大事なのか分からない
この記事では、HTMLとCSSの基本から、役割と違いまで、要点に絞って解説します。
以下のような方におすすめ
- HTMLとCSSの概要や全体像を知りたい方
- HTMLとCSSをさらっと復習したい方
手っ取り早くHTMLとCSSの概要を振り返りたい方は、ぜひ参考にしてみてください。
- システムエンジニア10年目
- 会社員3年⇒フリーランス7年目
- 保険系 / 物流系 / 鉄道系 / 小売系などのシステム開発に従事
- プログラミング講師
HTML/CSSの基本
HTMLとCSSは、Webページを作るための基礎です。
HTMLはWebページの骨組み、CSSはWebページのデザインということが分かれば、基本は完璧！！！
HTMLは、Webページの骨組み
- Webページの骨組みや土台を作るために用意された言語。
- Hyper Text Markup Language（ハイパー テキスト マークアップ ランゲージ）の略。
- マークアップ言語(タグと呼ばれる<>で囲まれた記号を用いて文書の構造や意味を明示する言語)の一つ。
HTMLを使えば、Webページの段落や見出し構成、テキスト配置や役割を、コンピュータが理解できます。
CSSは、Webページのデザイン
- Webページの見た目を整えるために用意された言語。
- HTMLで構成されたWebページのデザインを決める。
- Cascading Style Sheets（カスケーディング スタイル シート）の略。
次は、HTMLとCSSを使ったWebページ作成について、説明していきます。
HTML/CSSを使ったWebページの作り方
Webページは、次の流れで作成していきます。
- HTMLファイルを新規作成する
- Webページ内容をHTMLで組み立てる
- WebページのデザインをCSSで調整する
- Webブラウザで完成ページの表示を確認する
それぞれ、説明します。
STEP1：HTMLファイルを新規作成する
HTMLファイルは、メモアプリやテキストエディタなどを使い、ファイル名「Index.html」として新規作成します。
HTMLファイルは、Webページの土台となるファイルです。
ファイルの拡張子は「html」となります。
HTMLファイルを作成する際、ファイルの中身には、次の内容をテンプレートとして記述します。
おしけんテンプレートは、HTMLの中でも最低限必要な記述です
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webページのタイトル</title>
</head>
<body>
Webページの表示内容
</body>
</html>STEP2：Webページ内容をHTMLで組み立てる
HTMLを使って見出しや文章など、Webページに表示する内容を記述します。
STEP１で作成したHTMLファイルに対して、Webページの表示内容となるようにカスタマイズするイメージです。
HTMLファイルのカスタマイズでは、HTMLタグを使っていきます。
STEP3：WebページのデザインをCSSで調整する
HTMLで内容をカスタマイズした後、CSSを使って文字の色や大きさ、余白、レイアウトなどを整えます。
おしけん実務では、CSS用ファイルを作成して、HTMLファイルで読み込ませます
CSSを追加することで、見やすく、おしゃれなWebデザインを作ることができます。
CSSのカスタマイズでは、CSSプロパティを使っていきます。
STEP4：Webブラウザで完成ページの表示を確認する
最後に、作成したHTMLファイルをWebブラウザで開いて、表示結果を確認します。
おしけんWebブラウザで確認しながら、HTMLを書いたり、CSSを調整します
実務では、STEP1からSTEP4を繰り返しながら、Webページ制作は進めていきます。
よく使うHTMLの基本タグ一覧
Webページは、HTMLタグを組み合わせることで作ります。
HTMLタグは、用途に応じて様々なものが用意されています。
| HTMLタグ | 概要 | |
|---|---|---|
| pタグ | 使用例をチェック | 文章の段落やまとまりを作る |
| brタグ | 使用例をチェック | 文章の途中で改行する |
| h1～h6タグ | 使用例をチェック | 文章の見出しを作る |
| imgタグ | 使用例をチェック | ページ内に画像を挿入する |
それぞれのHTMLタグの使い方を説明していきます。
pタグ：文章の段落を作る
pタグは、Webページで、文章のまとまりや段落(paragraph)を作りたい時に使用する。
brタグ：文章の途中で改行する
brタグは、文章中に改行を入れたい場合に使用する。
h1～h6タグ：文章の見出しを作る
h1～h6は、見出しを作りたい場合に使用する。
imgタグ：画像を挿入する
imgタグは、Webページに画像を挿入したい場合に使用する。
よく使うCSSの基本プロパティ一覧
Webページは、CSSを使うことで、おしゃれで綺麗なデザインにすることができます。
CSSでは、調整したい項目をプロパティという形で指定し、様々なプロパティが用意されています。
| CSSプロパティ | 概要 | |
|---|---|---|
| colorプロパティ | 使用例をチェック | 文字色を指定する |
| font-weightプロパティ | 使用例をチェック | 文字の太さを指定する |
| text-decorationプロパティ | 使用例をチェック | 文字列に下線を引く |
| text-alignプロパティ | 使用例をチェック | 水平方向のテキスト配置を指定する |
それぞれのCSSプロパティの使い方を説明していきます。
colorプロパティ：文字色を指定する
colorプロパティを使うことで、文字色を指定できます。
font-weightプロパティ：文字の太さを指定する
font-weightプロパティを使うことで、文字の太さを指定できます。
text-decorationプロパティ：文字列に下線を引く
text-decorationプロパティを使うことで、文字列に下線を引くことができる
text-alignプロパティ：水平方向のテキスト配置を指定する
text-alignプロパティを使うことで、テキストの配置を水平方向に調整することができる
まとめ
本記事では、HTML/CSSのまとめとして、要点に絞って解説しました！
HTML/CSSの概要を大まかにイメージできていれば、自転車の乗り方のように、時間が経っても忘れなくなっていきます。
最後に今回のおさらいをしておきましょう。
- HTMLはWebページの骨組みを作るために用意されたもの
- CSSはWebページのデザインを整えるために用意されたもの
- Webページは表示内容をHTMLで記述しながらCSSでデザイン調整して完成する
最後に、皆さんの仕事が上手くいくことを願っております。
そして、この記事が皆様の参考になれば幸いです。