HTMLとCSSって何？HTMLの役割とCSSの役割

公開日：2017/03/26　更新日：2019/09/18　

※本ページにはプロモーション(広告)が含まれています

HTMLやCSSという言葉を聞いたことありますか？Webサイトを作るにあたり知っておかなければいけない知識です。それぞれどのような意味があり役割を担っているのでしょうか。ここでは「HTMLとCSSって何？HTMLの役割とCSSの役割」について、紹介いたします。プログラミングに興味がある方や、HTMLやCSSについて知りたい方は、参考にご覧ください。

１.HTMLの役割とCSSの役割
- １.HTMLとは？HTMLの役割
- ２.CSSとは？CSSの役割
２.HTMLやCSSを学習する
３.HTMLとCSSを体験する
- １.メモ帳でも作れる
- ２.サイトに動きを付けられる「JavaScript」
４.HTMLとCSSのおすすめ入門書
- １.スラスラわかるHTML＆CSSのきほん
- ２.作りながら学ぶHTML／CSSデザインの教科書

１.HTMLの役割とCSSの役割

ここでは、HTMLとCSSの基礎知識・役割について紹介いたします。

１.HTMLとは？HTMLの役割

HTMLとはHyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略で、ホームページなどを作成する際に用いられます。文書構造を定義するものであり、骨組みや構造となるマークアップ言語 です。コンピュータに画像やテキスト、ロゴなどを認識させるための役割を担います。例えば内をh1で大見出しを示し、h3で小見出し、pで段落であることを認識させます。

HTMLタグと呼ばれ、認識させたいテキストなどの前後をタグで囲むことで、コンピュータがその通りに表示します。タグは他にもbでテキストを太字にする、buttonでボタンを作成する、dirでリストを表示するなどさまざまです。

２.CSSとは？CSSの役割

CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略で ホームページなどの見た目・スタイルを定義するための言語 のことです。HTMLで画面に表示する文書構造などを定義し、CSSで表示方法や装飾などを定義します。まさにCSSはデザインであり、テキストに下線を引いたり、枠で囲ったり、文字の大きさを変えたりします。

HTMLで作ったものを装飾して見やすくする役割を担います。よく例えられるのは、HTMLがすっぴんの似顔絵であれば、CSSは（その似顔絵の）化粧後の姿を作れます。HTML＋CSSを使うことで、そのWEBページが見やすくなります。

２.HTMLやCSSを学習する

ウェブサイトを作成するための方法はいくつかありますが、いずれの方法もHTMLに関する知識は持っておく必要があります。

ブログなどでは、HTMLコードを書けなくても運営できるようなシステムが構築されていますが、自分で好きなように機能を追加したりはできませんよね。自分で好きなようにウェブサイトを作成するために は HTMLやCSSの学習は必須 となります。

１.初心者でも学習しやすい

HTMLは厳密には、マークアップ言語と言われるもので、プログラミング言語ではありません。

タグを当てはめていくだけでもそれなりの形にできる特徴があり 初心者にとっても比較的習得のハードルが低い言語 となっています。このような特徴から、プログラミングの導入として学ぶ方も多い傾向にあります。

またHTMLと合わせて使うことになるCSSも学習しやすい特徴があります。HTMLを装飾するためのプロパティは無数に存在するのですが、それを利用するための書式さえ理解してしまえば後は自由に使いこなすことができるんです。

２.ウェブサイトの仕組みが分かる

皆さんが普段見ているウェブサイトは、HTMLやCSSによって作成されています。もちろん本サイトもHTMLコードを利用したものです。

HTMLに関する知識がないとどのような作りになっているか完全に不透明ですが、自分で学習してみるとウェブサイトの仕組みをある程度理解できるように。

３.ウェブデザインができる

自分でHTMLやCSSを使ってウェブページを作成できるようになれば、ウェブデザインをできるということにも繋がります。自分のウェブサイトはもちろん、ブログなどのデザインを変更する時にも役立つ知識となります。

自分自身のホームページを持たない場合でも、何かと役に立つHTML&CSSです。学習のハードルも低いので、時間がある時にでも勉強してみてはいかがでしょうか。

３.HTMLとCSSを体験する

実際にHTMLやCSSを勉強するにはどうすれば良いのか。何から手を付けたらいいのか分からないという方もいると思います。

ウェブ上の情報をたよりにするのも良いですし、入門書を参考にしながら勉強を進めるのもおすすめです。入門書の多くはHTMLの基本や開発環境の整え方を紹介していますので、一冊購入すれば困ることはないでしょう。

しかしこういった行動を起こす前に、とりあえずHTMLやCSSに触れてみたいという方もいるのではないでしょうか。実は本格的な開発環境を整えなくても Windowsに標準搭載されているメモ帳でHTMLやCSSを体験することが可能 なんです。

１.メモ帳でも作れる

メモ帳のファイル形式をhtmlで保存する事とhtmlファイルとして認識され、ファイルをダブルクリックするとブラウザが開かれます。

たったこれだけの手順で、HTMLの記述とその反映結果を確認する環境が出来上がりました。を使ったHTMLタグも正しく認識されますからできないことはほとんどありません。

CSSも適用できる

HTMLコードの記述だけではなく、CSSを適用させることもできます。ここではHTMLファイル内に記述する方法をご紹介します。

記述方法は簡単です。styleタグの中にCSSの記述をするだけです。
＜style＞
*{color:#FF0000;}
＜style＞

上記の例ですと、全体の文字色を赤色に指定したことになります。試しに何かしら文字を記述してからブラウザを開いてみてください。文字の色が赤色になっているのが分かると思います。

複数指定することもできます。
＜style＞
*{
color:#FF0000; //赤色
font-size:50px; //50ピクセル
font-style:oblique; //斜体
font-family:Times New Roman,”ＭＳＰゴシック”; //ゴシック体
}
＜style＞

以上のようにいくつでも追加することができます。例では全体指定にしていますが、基本的には、pタグなどを指定することが多くなります。