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

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

あわせて読みたい

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に指定されている場合、値で色を指定することができます。

5.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【最短30秒で完了】侍テラコヤの申し込み手順

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

合わせて読みたい

2022年1月21日【副業スキル獲得】侍テラコヤの評判・口コミは？侍エンジニアとの違いは？

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

合わせて読みたい

2022年6月14日【受講料0円】ZeroPlus Gateの評判・口コミは?