HTMLとCSSの違いは？Webサイトを作るための基本知識を学ぼう
HTMLとCSSは、Webサイトを作成するために押さえておきたい知識です。
しかしプログラミング初心者からすると、両者の明確な違いがわかりにくいものかもしれません。サイト作成のための基本的な知識を学んでいきましょう。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
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の最下層を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サイトを制作してみましょう。
