[初心者必見] HTML&CSSとは? できること・記述方法・作り方・読み方も分かりやすく解説!

これからWebサイトを構築してみようという方であれば、「HTMLとCSS」という言葉を聞いたことがあると思います。

HTMLとCSSはWebサイトを構築する際に必要な言語です。

このページでは、HTMLとCSSとは何か、HTMLとCSSの役割、記述方法などについてお話していきます。

これからWebサイト構築を行いたいという方にとって、HTMLとCSSの導入部分を把握することができるので是非最後まで読んで頂けたらと思います。

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を読み込んで処理することで、人間に読める形に表示してくれているのです。

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

[IT用語] 初心者必見! URLのWWW(World Wide Web)の意味をわかりやすく解説

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

[必見!] プログラミング言語とマークアップ言語の違いを分かりやすく解説します!




2.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の発展とともに何度もバージョン改定を重ねています。




3.CSSとは?

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

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

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

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

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

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

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

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




4.CSSの記述方法

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

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

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

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

セレクタ

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

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

プロパティ

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

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

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

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




5.HTMLとCSSをもっと習得したい方へ

HTMLとCSSの学習を一通り終えて、HTMLとCSSの知識を更に深めたいという方や中級編に挑戦したいという方にオススメのオンライン学習教材があります。

それは「Udemy(ユーデミー)」の「未経験からプロのWebデザイナーとして働けることがゴールの完全マスターコース」というものです。

※Udemy(ユーデミー)は進研ゼミで有名なベネッセが運営しています。

実際に受講してみましたが、とても満足のいく講座でした。

講義の内容も濃く、「Photoshop」、「実践Webデザイン」、「HTML」、「CSS」など幅広く学ぶことができるのでオススメです。

セール時には数千円で422レッスン受けることができます。

また、以下の記事でおすすめのHTML/CSS講座をまとめていますので、こちらも是非ご覧ください。

 




6.ポイント

ポイント
  • HTMLはWebページを記述するための言語です
  • CSSはWebページのスタイルを指定するための言語です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です