【初心者必見】HTML&CSSとは？できること・記述方法・作り方・読み方も分かりやすく解説！

ハイパーテキストとは?

ハイパーテキストとはハイパーリンクで複数のテキストを相互に関連付けることができるテキストのことです。

つまり、文章中の指定箇所にリンクをつけることができ、適宜他のWebページに移動することができます。

ハイパーリンクを利用すると他のページへの移動だけではなく、画像、動画、音声などのデータファイルもテキスト内に組み込むことができます。

マークアップ言語とは?

一方、マークアップ言語はタグと呼ばれる記号を用いてテキストの構造を定義できる言語のことです。

つまり、HTMLタグによってタイトル、見出し、リスト、段落など文書の中で特定の部分に意味を持たせ、全体を構造化していきます。

HTMLの種類

HTMLには種類があります。

HTMLには「HTML」、「HTML5」など種類があり、使用できるタグに違いがあります。

Webサイトを構築する場合、どのHTMLバージョンを使用するのか確認しておく必要があります。

HTMLファイルの作り方

最後にHTMLファイルの作り方を見ていきましょう。

ファイルの最後に「.html」という拡張子をつけることで、HTMLファイルであることをパソコンが認識してくれます。

例えば、トップページの場合「index.html」とつけるという感じです。

このようにハイパーテキストをマークアップすることでコンピューターは情報を理解できるようになります。

私たちが普段閲覧しているWebページは、コンピューターがHTMLを読み込んで処理することで、人間に読める形に表示してくれているのです。

ハイパーテキストとハイパーリンクについての詳しい詳細はこちら

あわせて読みたい

2020年7月15日【IT用語】初心者必見！URLのWWW（World Wide Web）の意味をわかりやすく解説

プログラミング言語とマークアップ言語についての詳しい詳細はこちら

あわせて読みたい

2020年7月17日プログラミング言語とマークアップ言語の違いを分かりやすく解説

HTMLはWebページを記述するための言語ということが分かりました。

次にWebページを構築するためにHTMLでどのように記述していくのかみていきましょう。

Webページに記述したい文章や情報をタグと呼ばれる記号を用いることでHTMLを書いていきます。

例えば、「<タグ名>文章</タグ名>」という形で記述し、開きタグと閉じタグで囲むような形になります。

開始タグはタグで囲むだけですが、終了タグはタグ内の一番始めに「/（スラッシュ）」を書く必要があります。

このように囲んだものが1つの要素となり、この要素を組み合わせることで構造を作っていきます。

例えば、「<title>押さえておきたいWeb知識</title>」と記述すると、タイトルが「押さえておきたいWeb知識」になります。

HTMLの要素は様々ありますが、ですが、主要な要素をご紹介します。

現在でもHTMLはWebの発展とともに何度もバージョン改定を重ねています。

CSSとはどのようなものかみていきましょう。

CSSはCascading Style Sheetsの略で、HTMLで記述された文書に文字の色、大きさ、余白のスペース、背景の色等、Webページのスタイルを指定するための言語です。

読み方は「シーエスエス」といいます。

そのため、CSSはHTMLと一緒に使用されます。

例えば、CSSなしでWebページを構築しようとすると、文字と画像だけの単調なページになってしまいます。

HTMLでWebページの文章や画像を付け加え、CSSで文字の大きさ、背景の色、余白の調整等を行うことでWebページを整えることができます。

CSSが誕生する前、文字の大きさや色等、凝った表示にしようとすると、文章構造の記述と体裁の記述が混じり、HTMLが複雑になっていました。

CSSのおかげでCSSファイルとHTMLファイルを別管理でき、CSSを変更するだけで体裁の記述が変更できるようになりました。

次にCSSの基本的な記述方法を見ていきましょう。

CSSではWebページのデザインを整えるためにセレクタ、プロパティ、値の3要素を使用します。

この3要素でどこの何をどのような値に変えるかを指定することができます。

この3要素はどのような意味を持っているのでしょうか。

セレクタ

CSSによるデザイン指定をどこの部分に適用させるのかを決めるものです。

例えば、h1{~}と記述するとh1タグ内のデザインを変えることになります。

プロパティ

セレクタで指定された部分の何を変更するのかを決めるものです。

例えば、プロパティにcolorと記述すると文字の色を変えることに、backgroundと記述すると背景の色を変えることになります。

値

値ではどのような見た目に変えるのかを決めるものです。

例えば、プロパティがcolorやbackgroundに指定されている場合、値で色を指定することができます。