HTMLとCSSの違いは?Webサイトを作るための基本知識を学ぼう

2021.11.19
htmltocssnochigaiha

HTMLとCSSは、Webサイトを作成するために押さえておきたい知識です。しかしプログラミング初心者からすると、両者の明確な違いがわかりにくいものかもしれません。サイト作成のための基本的な知識を学んでいきましょう。

HTMLとCSSの役割は?

疑問に思う男性

まずはHTMLとCSSの違いから学んでいきましょう。二つはそれぞれできること、作れるものが違います。役割を知ることで、何ができるのかの理解が深まります。

HTMLはページの構造を作る

HTMLの主な役割は『Webサイトの構造を作ること』です。サイトにはそれぞれ、サイトタイトルや画像、テキストなどの構造を作る要素があります。

しかしコンピューターは、どのような役割を持った構成なのかが見た目からではわかりません。そこで、タグと呼ばれる機能を使って『これは画像である』『これはテキストである』と要素を定義するのが、HTMLの役割になります。

見た目には英語表記ばかりで難しそうに見えるかもしれません。しかし、『li=list(リスト、箇条書き)』や『img=image(画像)』など、英単語を縮めて使用しているタグもたくさんあります。タグの意味を知ると、何を表示させるための言葉なのかがわかりやすくなるはずです。

CSSはページのスタイルを調整する

CSSの主な役割は『見た目を調整すること』です。ただHTMLだけを書いても、デフォルトで設定された見た目になるので個性がありません。そこで、文字を太くしたり色を変えたり、背景やテキストのサイズを変えたりして調整を施します。

CSSの書き方には、ヘッダー内記述,、インライン、外部参照など複数あります。基本的には後から読み込まれたスタイルが優先的に適用されます。

また、HTMLで指定したタグを一括で修飾したり、特定のタグのみに装飾を施したりすることも可能です。HTMLとCSSはセットで覚えておきましょう。

HTMLの基本的な書き方

HTMLをソースコードとして書く際の、基本的な書き方について見ていきましょう。コードは法則に従って書かないと、サイトに反映されません。一つずつ確認してみましょう。

HTMLの基本構造

HTMLを書き出す際には、決まり事があります。コードを書き出すエディタの最初は『<!DOCTYPE html>』から始めましょう。次に、『<html lang=”ja”>』などと言語を指定します。langはLanguageで言語、jaはJapanで日本語を意味しています。

次からは、サイトの構造を指定します。<html lang=”ja”>の下に、ヘッダーとボディを定義します。サイトにはヘッダー(サイト上部)とフッター(サイト下部)があり、ヘッダーを『<head>…</head>』で囲みます。

ボディのタグは『<body>…</body>』で囲みましょう。終わりに『</html>』と記載します。タグは必ず『<タグ>~~</タグ>』と書くのが約束事です。ボディの中に、サイトタイトルや画像、テキストが入ってきます。

HTMLでよく使われるタグ

タグとは、画像やテキストなどを表示するために必要な要素です。よく使われるものを紹介します。

  • a:ハイパーリンク。リンクを定義して、ドキュメント同士をつなぎ合わせる。リンク先のURLを指定したり、ページ内にアンカーを指定して飛び先を作ったりできる
  • div:ページレイアウトの一種で意味を持たないタグ。このタグで囲むことにより、グループ化することができる
  • h1~h6:文章中の見出しを指定するタグ。<h1>が最重要な大見出しとなり、数字が上がるにつれて見出しの重要度が下がる
  • img:画像を表示させるタグ。画像を参照するための『src』と一緒に書く。『<img src=”dog.jpg” >』

このほかにも使えるタグはたくさんあります。焦らず、一つずつ覚えていけば問題ないので、外国語を習うようなイメージでタグの名前と意味を習得していきましょう。

HTMLだけでWebサイトは作れない?CSSが必要な理由

HTMLだけでも文字や画像を表示することはできます。そのため「HTMLでも十分では?」と考えてしまう人もいるかもしれません。しかし、CSSが存在するには理由があるのです。

Webページの制作作業を大幅に効率化できる

CSSはタグの指定だけで、複数あるページを一気に変更することが可能です。HTMLでは一つずつ変更しなければならない作業も、大幅に労力をカットできるでしょう。

例えば全20ページあるサイトの『文字の色』を変更したいとします。HTMLの場合は全20ページ、それぞれのHTMLファイルを変更しないといけません。しかしCSSならば、CSSファイルを変更するという1回の作業だけで、すべての文字色を変更できるのです。

さらには、違うHTMLのページでもCSSのスタイル(見た目の調整)を共有できます。一括で管理することで修正や調整も楽に行えるのがメリットです。スタイルの指定は、CSSで行う方がよいでしょう。

文書構造を保ちながらスタイルを指定できる

CSSなら、文書構造は保ったままスタイルを指定することが可能です。HTMLで見た目を調整しようとした場合、タグの中にスタイルを指定することになります。すると、余分な記載が増えて内容がわからなくなったり、文章構造が崩れたりするのです。

HTMLだけでスタイル指定をすると、コードがとても長くなり見づらくなってしまうでしょう。CSSを使うことで誰が読んでも理解できるコードになります。修正や変更もやりやすくなり、他の人も作業しやすいコードになるはずです。

さらに、HTMLとCSSをきっちりと分けることで、どんなブラウザにも安定して表示させることができます。

SEO対策につながる

SEO対策を考えたとき、テキストや画像がHTMLの構造として適切に配置されていることはとても重要です。Googleの検索エンジンは『ホームページを読み込むときの速度』も評価対象としていると言われています。

CSSにスタイルを記述することにより、スタイル指定だけを一つにまとめることが可能です。余計なコードを減らしてページを軽量化することで、サイトの読み込み速度がアップします。

ユーザーが快適にホームページを閲覧できるようになれば、アクセシビリティの向上も期待できるでしょう。

CSSの基本を学ぶ

CSSも、HTMLと同じように特定のエディタに記述していきましょう。コードを書くことに適したエディタでは、CSS用の編集モードが標準搭載されています。

CSSの基本要素

CSSは、主に『セレクタ』『プロパティ』『値』の3つの要素で作られます。主な記述方法は以下の通りです。

title { 
 font-weight:bold;
 color:#FFF;
}

{}で囲まれた記述がスタイルです。titleはセレクタ、font-weightやcolorはプロパティ、bold(太字)や#FFF(白色)を値と呼びます。

よく使われるプロパティ

CSSにおいて、よく使われるプロパティの一部を紹介します。プロパティに値を指定して使うセレクタを選択します。

  • width:幅の指定ができる
  • height:高さの指定ができる
  • font-size:フォント(文字)の大きさを指定できる
  • color:色を指定できる。『font-color』で文字の色を、『background-color』で背景の色を指定できる

CSSのプロパティを把握しておくと、いろいろな装飾が可能になります。見た目も華やかなサイトにできるので、ぜひプロパティを活用してみましょう。

HTML文書にCSSを適用させる方法

CSSは書くだけではHTMLとは別々の記述となってしまいます。そのままではサイトに反映されません。サイトに表示させるため、HTMLをCSSに適用させる方法を見ていきましょう。

外部ファイルとして読み込む

CSSを読み込む方法は『HTMLファイルに直接書き込む』『外部のCSSファイルからHTMLに読み込む』という大きく分けて2種類があります。HTMLに直接記述するのは文書構造が崩れるもとになるので、なるべく外部ファイルとしてCSSを読み込むようにしましょう。

読み込み方は簡単です。まず、拡張子が『.css』になっているファイルを用意します。そしてHTMLに『<link rel=”stylesheet” href=”sample.css”>』と記述しましょう。

これは「sample.cssというファイルのstylesheetを参照してCSSを適用してくださいね」という指定になります。

HTMLファイル内にCSSを記述

HTML内の<head>要素に、直接CSS要素を記述する方法も知っておきましょう。文書単体にスタイルを指定できるので、個別に指定することができます。

スタイルを付けたい場所に<style>タグを付けます。『” ”』の中に指定したいスタイルを記述すればOKです。

<body>
<p style=”color:red;”>コメント</p>
</body>

HTMLで直接スタイルを指定する場合、優先的に一部分を調整するには便利です。

HTMLとCSSを作成する流れ

言葉の意味を調べる様子

役割や記述の基本形がわかれば、HTMLとCSSを作成してサイトを作成できるようになります。Webサイトを制作する基本的な流れを見ていきましょう。

開発環境を整える

まずは制作するための開発環境を整えましょう。個別にindex.html、画像のためのimagesフォルダ、CSSフォルダを作成しておきます。

次に、Webサイト全体の構成を決めます。例えば、レストランの紹介サイトなら、トップに店舗の画像を持ってきて、画像には店名を入れ、その下にはメニューの紹介をして…といった細かい部分までを決めておくと、後の作業が楽になるはずです。

構成を決めたら、HTMLで記述していきます。全体をhtmlで囲み、その次にhead、body、bodyの中にpタグやdivタグを設置しましょう。その後、細かいタグを入れ込みます。

HTMLファイルを作成する

Webサイトを作成する際、すべてのページは拡張子が『.html』になります。サイト全体の構成を参考にしながら『トップ画像』『メニュー画面』『住所』などをタグを使って指定していきます。

ここでは大まかに、上からどのような要素が並んでいるかを指定するだけでかまいません。背景や色の指定は、後にCSSで行いましょう。

トップ画像のような要素は、すべてbodyタグの中に収納します。bodyの上をhead、bodyの最下層をfooterタグで囲みましょう。

HTMLファイルにCSSを適用する

CSSを反映させるため、HTMLファイルにCSSを読み込みましょう。headタグの中に、link属性を付けてCSSを適用させます。基本的な記述としては、以下の通りです。

<head>
      <link rel=”stylesheet” type=”css” href=”Main.css” />
    <title>sample</title>
</head>

CSSのファイルは『main.css』や『style.css』など、わかりやすい名称が一般的です。格納したフォルダをきちんと指定しているかもチェックしながら適用していきましょう。

HTMLとCSSを学習して自由にWebサイトを制作しよう

HTMLとCSSは、Webサイトを作成する際に基本となる知識です。最初はわかりづらくても、繰り返し記述していくことで身についていきます。

プロパティやタグの意味、使える範囲、記述の基本的な形を知って、自由にWebサイトを制作してみましょう。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5