押さえておきたいWeb知識 
Web知識を知っている人
これからWebサイトを構築してみようという方であれば、「HTMLとCSS」という言葉を聞いたことがあると思います。
HTMLとCSSはWebサイトを構築する際に必要な言語です。
このページでは、HTMLとCSSとは何か、HTMLとCSSの役割、記述方法などについてお話していきます。
これからWebサイト構築を行いたいという方にとって、HTMLとCSSの導入部分を把握することができるので是非最後まで読んで頂けたらと思います。
＼1分で登録完了! 受講料98,000円がなんと0円!／
【期間限定】ノーリスクで学びたい方におすすめ!
以下のプログラミングスクールもオススメです。
是非検討してみてはいかがでしょうか？
- 侍テラコヤ（初月50%OFF学び応援キャンペーン実施中）（解説記事はこちら）
⇒ 学び応援キャンペーンでお得に申し込む!
・コスパ最高! 月額2,980円〜利用できる!
・単月定額と比べて総額最大44,400円OFF!
・学び応援キャンペーン実施中!
- ZeroPlus Gate（受講料98,000円がなんと0円!）（解説記事はこちら）
⇒ 受講料0円でプログラミングを学ぶ!
・受講料0円
・現役エンジニアに質問し放題
・30日で副業レベルのWebスキルを学べる - 本気のパソコン塾
（無料体験特典3つあり）（解説記事はこちら）
⇒ 7日間無料体験または無料相談会に申し込む!
・実際に役立つウェブデザイン、ウェブプログラミングを身につけることができる
・【期間限定】無料相談会参加特典3つあり!
・7日間無料体験・無料相談会実施中!
Web知識を知っている人
目次
HTMLとは?
Web知識を知っている人
HTMLはWebページを記述するための言語となっています。
私たちが普段閲覧しているWebページの構造ほとんどはHTMLで記述されており、Webページ作成に欠かすことができない言語です。
HTMLはHyperText Markup Languageの略で、正式名称から分かるようにハイパーテキストとマークアップ言語の特徴をもっています。
読み方は「エイチティーエムエル」といいます。
ハイパーテキストとは?
ハイパーテキストとはハイパーリンクで複数のテキストを相互に関連付けることができるテキストのことです。
つまり、文章中の指定箇所にリンクをつけることができ、適宜他のWebページに移動することができます。
ハイパーリンクを利用すると他のページへの移動だけではなく、画像、動画、音声などのデータファイルもテキスト内に組み込むことができます。
マークアップ言語とは?
一方、マークアップ言語はタグと呼ばれる記号を用いてテキストの構造を定義できる言語のことです。
つまり、HTMLタグによってタイトル、見出し、リスト、段落など文書の中で特定の部分に意味を持たせ、全体を構造化していきます。
HTMLの種類
HTMLには種類があります。
HTMLには「HTML」、「HTML5」など種類があり、使用できるタグに違いがあります。
Webサイトを構築する場合、どのHTMLバージョンを使用するのか確認しておく必要があります。
HTMLファイルの作り方
最後にHTMLファイルの作り方を見ていきましょう。
ファイルの最後に「.html」という拡張子をつけることで、HTMLファイルであることをパソコンが認識してくれます。
例えば、トップページの場合「index.html」とつけるという感じです。
このようにハイパーテキストをマークアップすることでコンピューターは情報を理解できるようになります。
私たちが普段閲覧しているWebページは、コンピューターがHTMLを読み込んで処理することで、人間に読める形に表示してくれているのです。
ハイパーテキストとハイパーリンクについての詳しい詳細はこちら
プログラミング言語とマークアップ言語についての詳しい詳細はこちら
HTMLの記述方法
HTMLはWebページを記述するための言語ということが分かりました。
次にWebページを構築するためにHTMLでどのように記述していくのかみていきましょう。
Webページに記述したい文章や情報をタグと呼ばれる記号を用いることでHTMLを書いていきます。
例えば、「<タグ名>文章</タグ名>」という形で記述し、開きタグと閉じタグで囲むような形になります。
開始タグはタグで囲むだけですが、終了タグはタグ内の一番始めに「/（スラッシュ）」を書く必要があります。
このように囲んだものが1つの要素となり、この要素を組み合わせることで構造を作っていきます。
例えば、「<title>押さえておきたいWeb知識</title>」と記述すると、タイトルが「押さえておきたいWeb知識」になります。
HTMLの要素は様々ありますが、ですが、主要な要素をご紹介します。
| 要素名 | 意味 |
|---|---|
| html | html文書であることを宣言する |
| head | html文書の情報を表し、html要素の最初の要素として使用します |
| meta | 文章に関するメタデータを表します |
| title | 文書にタイトルをつける |
| body | 文章の内容を記述する領域を表します |
| h1~h6 | 見出しをつける |
| br | 改行する |
| a | リンクを貼る、リンクの出発点・到着点を指定する |
| img | 画像を表示する |
現在でもHTMLはWebの発展とともに何度もバージョン改定を重ねています。
CSSとは?
CSSとはどのようなものかみていきましょう。
CSSはCascading Style Sheetsの略で、HTMLで記述された文書に文字の色、大きさ、余白のスペース、背景の色等、Webページのスタイルを指定するための言語です。
読み方は「シーエスエス」といいます。
そのため、CSSはHTMLと一緒に使用されます。
例えば、CSSなしでWebページを構築しようとすると、文字と画像だけの単調なページになってしまいます。
HTMLでWebページの文章や画像を付け加え、CSSで文字の大きさ、背景の色、余白の調整等を行うことでWebページを整えることができます。
CSSが誕生する前、文字の大きさや色等、凝った表示にしようとすると、文章構造の記述と体裁の記述が混じり、HTMLが複雑になっていました。
CSSのおかげでCSSファイルとHTMLファイルを別管理でき、CSSを変更するだけで体裁の記述が変更できるようになりました。
CSSの記述方法
次にCSSの基本的な記述方法を見ていきましょう。
CSSではWebページのデザインを整えるためにセレクタ、プロパティ、値の3要素を使用します。
この3要素でどこの何をどのような値に変えるかを指定することができます。
この3要素はどのような意味を持っているのでしょうか。
セレクタ
CSSによるデザイン指定をどこの部分に適用させるのかを決めるものです。
例えば、h1{~}と記述するとh1タグ内のデザインを変えることになります。
プロパティ
セレクタで指定された部分の何を変更するのかを決めるものです。
例えば、プロパティにcolorと記述すると文字の色を変えることに、backgroundと記述すると背景の色を変えることになります。
値
値ではどのような見た目に変えるのかを決めるものです。
例えば、プロパティがcolorやbackgroundに指定されている場合、値で色を指定することができます。
ポイント
Web知識を知っている人
今回のポイントは以下の通りです。
- HTMLはWebページを記述するための言語です
- CSSはWebページのスタイルを指定するための言語です
