初心者向け!Webサイト作りに必須のHTMLとCSSの紹介

 

Webページは、HTMLとCSSというコンピュータ言語で書かれています。

 

洋一郎です。

 

ここでは、Webサイトを構成するコンピュータ言語について解説します。

 

例えば、アメリカ人やイギリス人と話をするためには、英語で話す必要がありますね。

また、物理学で物理現象を表現するのには、数学という数式、言語が必要です。

どちらも言語によって意思の疎通を行っています。

 

そしてそれらと同じように、コンピュータを通じてWebサイトを作ったり閲覧するためには、このHTMLとCSSと呼ばれる言語が必要になるわけです。

HTMLとCSSは、コンピュータ言語です。

それでは、具体的に説明していきましょう。

HTMLは文書の本体を記述し、CSSはそれを装飾するもの

HTMLについて

HTMLは、「HyperText Markup Language」の略で、エイチティーエムエルと読みます。

この言語は、Webページを作成するために開発された言語です。

 

HyperTextとは、普通のテキスト文書ではなく、高機能なテキスト文書という意味です。

 

別ページへリンクを貼ったり、画像を挿入したり、見出しを付けたりできるのが、HyperTextです。

 

これは、Windowsの「メモ帳」などで作成できる「文書」と比べるとわかりやすいです。

メモ帳の文書は、普通の紙媒体として扱われます。

ただ文字が記述されているだけですよね。

 

しかし、HyperTextは、それ以上の要素を持っています!

そして「HyperText Markup Language」(HTML)を、日本語で解釈すると「ハイパーテキストの目印をつける言語」という意味になります。

 

インターネットで閲覧できるWebページは、このHTMLで書かれています

ただし、現在、HTMLだけで書かれているWebサイトは、ほとんどありません

HTMLは、文書本体を記述する言語で、HTMLだけではデザインが整えられないからなんです!

CSSについて

そこで必要になってくる言語が、CSSと言われる言語です。

CSSは「Cascading Style Sheets」の略で、「シーエスエス」と読みます。

Cascading(カスケーディング)は、「小さな滝、垂れ下がる事」を意味するので、日本語では「スタイルシートの(垂れ下がりの)連続」というニュアンスになるでしょうね。

 

ちょっと余談ですが、電子回路でカスケード接続というものがあります。
私の専門の電子回路ですね。
現在のITのハードウェア世界では、カスケード接続をHUBのたこ足配線と呼ばれています。
要はたこ足みたいに繋がることですね。

 

戻ります。

文書のスタイルを指定する技術全般を、スタイルシートと呼んでいます。

CSSは、HTMLで書かれた文書に装飾を施し、そのスタイルシートを整えます

CSSは、HTMLと組み合わさって、Webページが表示される時のレイアウトや、文字の色やサイズなどを指定しているんですね。

HTMLとCSSで書かれたWebページが表示される仕組み

 

HTMLやCSSは、ルールに従って記述をすれば、Windowsの標準装備「メモ帳」などのテキストエディターで書くことができます。

そのままそのファイルを保存した場合は、ファイルの拡張子が「.txt」となります。

その「.txt」の部分を「.html」「.css」に書き換えることで、HTMLファイルとCSSファイルを完成させることができます。

簡単ですね。

ブラウザについて

そして、これら2種類のファイルをWebページとして閲覧するためには、「ブラウザ」というソフトウェアが必要になります。

Windowsの「インターネットエクスプローラー」やGoogleの「クローム」などが、ブラウザです。

 

完成したファイルをブラウザで閲覧することで、リンクが貼られたり、見出しが付けられたり、レイアウトを整えたりしてWebページが表示されます。

最初に説明した例と同じように、「ブラウザという人と話をするためには、HTMLとCSSという言語が必要」と言えますね。

 

通常、一般的に公開されているWebページでは、作成されたHTMLとCSSファイルがサーバーに保存されています。

そしてそのページを見たい人は、自分のPCのブラウザを使って、URLを入力することでその保存先のサーバーにアクセスし、HTMLとCSSを一時的にダウンロードしてWebページとして見ているのです。

ですから、Webページを一般公開するには、HTMLファイルとCSSファイルを作成し、サーバーを用意し、そこにこの2種類のファイルを転送する必要があります。

 

ちなみに、この時、サーバーを提供している業者が、レンタルサーバー業者です。

 

Xサーバーとかロリポップとかですね。

HTMLとCSSの書き方の基本

 

HTMLは、「<>(タグ)」を用いて書いていきます。

例えば、ページのタイトルを決めるときには、ページタイトルを「<title>○○○</title>」と囲みます。

また、大見出しは「<h1>○○○</h1>」、一段落は<p>と</p>で囲むなど、指定したい要素をタグで囲んでマークアップしていきます。

 

もう一つの言語CSSは、どの要素を装飾するか選び、そのプロパティと値を書いていきます。

 

例えば「h1{color:red}」などと書くことがあります。

これは「h1の、色を(color)、赤にする(red)」という意味を持っています。

 

このように、「どの要素の、何を、どうするか」を指定していくのが、CSSの基本的な書き方です。

なお、HTMLのタグの中に直接CSSを書き込むことも可能です。

 

しかし、それぞれを別ファイルとして作成し、HTMLファイルにCSSファイルをリンクさせる方法が一般的です。

それは、デザインを大きく変更する際は、CSSファイルをリンクさせた方が簡単だからです。

HTMLとCSSのまとめ

 

HTMLとCSSの概要をまとめると、以下のようになります。

  • Webページは、HTMLとCSSという言語で書かれたファイルであり、ブラウザを介してそれらのファイルをWebページとして閲覧することができる。
  • HTMLは、Webページの文書本体を記述する。
  • CSSは、HTMLを装飾してWebページのスタイルを整える。

Webサイトを作っていくと、いつかはHTMLとCSSを書き加えたり、削除することになります。

 

難しい操作や注意事項などは、専門的なサイトにたくさん公開されています。

必要な時は、専門的なサイトで確認していきましょう。

 

ここでは、HTMLとCSSの名前と役割を覚えておきましょう。

 

洋一郎でした。

コメント