インターネットを彩るWebページ

生活に密着し、便利な暮らしを提供している最も身近ともいえるIT技術であるインターネット。

今や生活に欠かせないともいえるほどに浸透しているインターネットですが、一般的に利用する目的は、やはり特定の「Webサイト」を閲覧することでしょう。

著名人のブログやSNS、動画共有サイトや通販サイトなど、何かしらの「Webサイト」を訪問して個人個人でコンテンツを楽しんでいます。

そんなWebサイトを構成しているのは「マークアップ言語」と呼ばれるものであることをご存知でしょうか。


Webページを構成するHTMLとCSS

今回の記事では、その「マークアップ言語」であるHTML、そして頻繁にセットで語られるCSSの2つに注目していきます。

HTMLとCSSはよくセットにして語られますが、どうして一緒に扱われるのかという点について解説。

それぞれの違いや持っている役割をはじめとし、HTML・CSSそれぞれの「基本的な書き方」までチェックしていきましょう。


セットにして語られる「HTML」と「CSS」の違いとは

書き方など実践的なことをチェックする前に、まずは「HTML」と「CSS」の違いについて確認しておきましょう。

この2つは大抵「HTML CSS」といったようにセットにされています。

事実、Webサイト構築にはこの2つは欠かせないといっていいでしょう。

HTMLでWebページの「骨組み」を作り、CSSで「見栄えをよくする」といったイメージです。

それぞれが明確な「違う役割」を持っています。

もちろんHTML単独でWebページを作ることは出来なくはありませんが、非常に「乏しい」印象のサイトになってしまうでしょう。

視覚に対して効果的に訴えるWebページを作るためにはCSSは欠かせません。

また、HTMLとCSSに加えてWebページを動的なものにするために「JavaScript」や「PHP」を利用するケースもあります。

＜関連記事＞

【JavaScript入門】JavaScriptの基本を解説！JavaScriptでできることや書き方・配列作成法も紹介

【CakePHP入門】CakePHPの特徴や使い方を解説！インストールや初期設定は？参考になるチュートリアルと書籍も紹介


それぞれが持つ役割

さて、先ほどそれぞれが持つ「役割」が異なっているということをお伝えしました。

それでは、HTMLとCSSそれぞれが持っている「役割」を解説いたします。


HTMLの持つ役割は「見た目を作る」こと

先ほどは「HTMLはWebページの骨組みを作る」とお伝えしました。

骨組み、つまり「大体の見た目」を作ることがHTMLの担う役割です。

Webページ上の「○○に画像を配置」、「△△に見出し」、「××には動画を配置」のように、適切な位置に文章やコンテンツを配置します。

様々なタグを用いて、コンピュータが理解できるように文章へ意味を持たせているというイメージです。


CSSの持つ役割

対して、CSSは「HTMLを装飾する」ものです。

先ほどは「見栄えを良くする」という表現をしました。

これはそのままの意味で、CSSは「HTMLで作ったWebページの見栄えを良くする（整える）」役割を担っています。

HTMLで指定した見出しや文章の「色」や「大きさ」を具体的に、細かくCSSで指定することが可能です。

また、Webページの上下左右に対する余白などを指定することもできます。

CSSを上手く扱うことで、見やすいだけでなく「効果的なWebページ」を作成することができるといえるでしょう。


HTMLは単独でも成立する

HTMLが「骨組み」でCSSが「見栄えを良くする」とそれぞれ異なる役割を持っていることが分かりました。

更にもう1つ頭に留めておきたいポイント、大きな違いがあります。

それは「HTMLは単独で成立する」ということです。

HTMLファイルは単独でも、Webページを制作できます。


CSS単独は基本的にない

単独で制作できるHTMLに対して、基本的にCSS単独で実現することは難しいです。

とはいえ、HTML単独で制作したWebページがどうしても質素な作りになってしまいがち。

そのため実際にWebサイトを作る際には、大抵CSSやJavaScriptなどもセットで扱うことになるでしょう。


書き方に注目する前に環境を構築する

続いては書き方を解説いたします。

ただ、その前に「HTMLやCSSを書く環境」を整える必要があります。

とはいえ、HTMLやCSSはその環境構築がほとんど要らないというのも事実。

用意するのは「テキストエディタ」くらいでしょう。

このエディタですが、WindowsやMacにプリインストールされているメモ帳などでも記述は可能です。


専用のエディタを使うのがおすすめ

メモ帳などでもHTML・CSSファイルを作ることは問題なくできます。

しかし、できればSublime TextやBrackets、AtomといったHTMLやCSSのコーディングに適したエディタをダウンロード・インストールすることをおすすめします。

それぞれの公式ページへのリンクはこちらからチェックしてください。

Sublime Text公式ページ

Brackets公式ページ

Atom公式ページ

上記リンクからそれぞれダウンロードできます。

3つとも軽量で、様々な拡張機能をインストールして「自分だけの理想のエディタ」へカスタマイズ可能。

全て日本語化が可能ですが、Bracketsのみ最初から日本語対応しているという特徴を持っています。

特にこだわりがなければ最初はBracketsという選択が取り組みやすいかもしれません。

テキストエディタは種類が多く選択肢が豊富ですが、これを機に自分に合うテキストエディタを探してみてはいかがでしょうか。

以下の記事ではSublime Text、Brackets、Atomについてそれぞれ詳しく解説していますので、興味がある方はぜひこちらの記事も併せてご参照ください。

Sublime Textの使い方と設定方法を徹底解説！便利な機能と使用方法は？ダウンロード方法とインストール手順も紹介

Bracketsの特徴や拡張機能・使い方を徹底解説！初心者におすすめの理由とは？OS別のダウンロード方法もチェックしよう

Atomエディタの基本的な使い方を徹底解説！インストールの手順と日本語化・初期設定の方法は？使えるおすすめ機能もご紹介


HTMLの書き方

ではここから、実際にHTMLとCSSの「書き方」を解説していきます。

今回は基本的な要素についてチェックしていきましょう。

まずはHTMLからです。


タグで囲んで意味を持たせていく

HTMLは「<>」で囲んだ様々なタグと呼ばれるもので文章へ意味付けを行っていきます。

「<タグ名>」から「</タグ名>」の間に記述した文章が、そのタグで指定されます。

忘れがちなのが、タグを閉じるときの「/」。

これを忘れてしまうと適切にタグが閉じられず、変な挙動やおかしな見た目になってしまうことがあるので注意してください。

タグは要素といわれることもあります。

有名なタグをチェックしていきましょう。


bodyタグ

bodyタグは、簡単に言い表すならば画面に表示される部分です。

そのため、実際にWebページを閲覧しているとき目にしているのは「bodyタグ」で構成されている部分ということになります。

実際にbodyタグの中へ、様々な要素を詰め込んでいくといった形でWebページを制作していくことになるでしょう。

使い方は他のタグと同様、<body>〜</body>と、中に実際に表示させたい要素を書いていきます。

基本的に1ページで1回しか使えないという注意点も頭に留めておきましょう。


divタグ

divタグは、コードの「まとまり」を作るタグです。

例えば、以下のようなコードがあったとします。

  1. <div class=“test1”>
  2. <h1>見出し1</h1>
  3. <p>これは段落です。</p>
  4. </div>
  5. <div class=“test2”>
  6. <h1>見出し1</h1>
  7. <p>これは段落です。</p>
  8. </div>

<div>で囲っているものの、内容はほとんど同じになっています。

唯一異なっているのが「class=」の部分で、test1とtest2というクラスが作られています。

CSSを用いて、このtest1と2で「異なるデザインを指定する」といったことをdivタグを使えばまとめてできます。

divはこのように、まとめてデザインを変えたりするのに適しています。

その際にはclassなども同時に使うことをチェックしておきましょう。


その他の基本的なタグ

今回は他にも「基本的なタグ」をいくつか紹介します。

  • <h1>見出し1</h1>
  • <p>段落</p>
  • <strong>太字</strong>

それぞれのタグで囲んである文字が、それぞれのタグが持つ意味を表しています。


エディタの利用がおすすめな理由

いちいちこのタグを書くのが面倒に感じる方も多いでしょう。

そういった方におすすめなのが、先ほどお伝えしたSublime Textなどのエディタです。

タグの自動補完や、閉じタグをエディタ側が配置してくれるので非常に便利です。

ライブプレビューという、リアルタイムで自分の記述しているHTML・CSSファイルの見た目をプレビューできる機能も備えています。

ぜひ活用してみてください。


CSSの書き方

続いてはCSSの書き方です。

CSSを利用すればHTMLのページを非常に魅力的に装飾することができます。


基本的な構文

CSSの書き方で基本となるのが「セレクター{ プロパティ : 値; }」という書き方です。

例えば、HTMLファイル上全ての「段落」、つまり「pタグ」の文字色を赤くする書き方はこうなります。

  1. p{ color: #ff0000; }

こうすると、HTML上のpタグ で囲われている文字が全て「赤」になります。


divタグとの連携

特定の箇所に限って文字色などを指定したいという場合に、先ほど触れた「divタグ」が有効に働きます。

例えば「divタグの中にあるpタグ」といった指定も可能です。

その際にはこのように記述します。

  1. div p{
  2. color: #ff0000;
  3. font-size: 14px
  4. }

これで「divタグの中にあるpタグ」内の文字色を「赤」にし、フォントサイズを「14px」に指定できました。

このように、divタグのclassなどを巧みに用いれば細かく文字の効果や背景色などを指定し、魅力あるWebページを作ることができるでしょう。


セミコロンを常に付ける癖をつけておく

ちなみに「;（セミコロン）」は指定するプロパティが1つだけの場合、不要です。

しかし、後から書き足したりすることも多いのがCSS。

その際セミコロンを付け忘れたとすれば、やはりうまく適用できません。

常に付けておく癖をつけておけばそういった事態を防ぐことにも繋がります。

プロパティが1つだけのときもなるべくセミコロンを付けるよう意識しましょう。


CSSはフレームワークを利用するという選択肢も

昨今のIT業界…Web業界では、CSSフレームワークというものを用いてWebページを制作することも少なくありません。


CSSのフレームワークは「パーツ集」

CSSのフレームワークとは、簡単にいえば「Webページのパーツ集」といったイメージです。

Webページで使えるボタンやアイコンなど、予め用意された様々な部品がまとまっているもののことを指します。

有名なのはTwitterがリリースしているBootstrapや、Foundationなどといったフレームワークです。

他にも数多くのフレームワークがリリースされています。

＜関連記事＞

Bootstrapの使い方を入門者向けにわかりやすく紹介！ダウンロード方法やグリッドシステムについても解説！


誰でもデザイン性の高いWebページ・サイトを作れる

CSSフレームワークを活用すれば、誰でも簡単に「見栄えのいいWebサイト」を作れてしまうでしょう。

パーツデザインをする手間・工程が省けるので、開発時間や労力を大きく削減することにも繋がります。

また、複数のフレームワークを併用することもできます。

ただし、フレームワークの組み合わせ次第では競合してしまうこともあるので注意が必要です。

これから新しくWebページを作ってみようと考えていらっしゃる方は、ぜひCSSフレームワークの導入を考慮に入れてみてください。


HTMLとCSSに加えてスクリプト言語まで自由自在に扱えるWebエンジニアへ

今回の記事では、HTMLとCSSに注目してきました。

一緒に語られることの多い2つですが、それぞれの違いや役割についてが分かったのではないでしょうか。

また、座学的な要素に加えて基本的な書き方についてもチェックしてきました。

HTML、CSSどちらも、基本的な部分はさほど複雑ではありません。

実際に書いてみると、自分の記述したコードがWebブラウザで描画・確認でき、成果がすぐにチェックできるのでとても楽しく感じる方も多いでしょう。

プログラミング同様、Webページ制作も試行錯誤を繰り返しながら取り組んでいくものといえます。

HTMLやCSSをある程度扱えるようになったら、ぜひ次はJavaScriptやPHPなどの習得を目指してみてください。

そうすれば、Webページに「動き」を加えることができます。

エンジニアとして、最新技術と触れ合い知識を蓄えていくのは非常に重要です。

ぜひ1つのスキルや言語で満足せず、新しい技術などに触れて習得していくよう心がけましょう。


toiroフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。