スキル

HTMLとCSSを身につけたいWeb制作初心者が知っておくべき基礎知識

自分でWebサイトを作るために身につけておきたいのが、HTMLとCSSの知識です。しかし、Web制作やプログラミング初心者の中には、HTMLとCSSがどのようなものか分からないという方もいらっしゃるでしょう。

そこで、この記事では、Webデザイン初心者の方に向けて、HTMLとCSSの基礎と、それぞれの書き方をご紹介します。

Web制作に必須のHTMLとCSS

Web制作でよく聞くHTMLとCSSという言語。これらは、Webデザインやプログラミングに携わる人なら、知っておかなければならない言語です。

これからWeb制作を始めていくために、まずはHTMLとCSSとはどういったものなのかを解説します。

Webページの骨組みとなるHTML

HTMLはマークアップ言語といって、人間が使う言葉をコンピュータにも理解できるようにするための言語です。HTMLを使うと、Webページの骨組みを作ることができます。

例えば、「<h2>はじめまして</h2>」と書くと、コンピュータに「はじめましては中見出し(h2)だよ」と伝えられます。また、「<body>私はマカロンが大好きです。</body>」と書くと、「『私はマカロンが大好きです。』が本文だよ」と認識させられます。

WebページをデザインするCSS

HTMLで作ったWebページの骨組みを自由に装飾できるのがCSSです。CSSを使うと、HTMLで書いた文字のカラーやサイズを変更したり、背景色を変化させたりと、Webページの見た目を自由自在にデザインできます。HTMLで作成したシンプルなWebページを、CSSを使ってパソコンで表示するのに最適なデザインや、スマホで見やすい配置に調整する感じですね。

1つのHTMLページから、色々なWebページをデザインするのにCSSはとても便利です。

HTMLの書き方

Webページを制作するにあたって、まず手を付けるのがHTMLの記述です。HTMLコードは全て半角で書いていきます。最初はワケが分からなくて混乱してしまうこともありますが、慣れていくにつれてスラスラとHTMLが書けるようになっていきます。

では、HTMLページを作る流れを見ていきましょう。

Webページ全体の情報をheaderに書く

HTMLファイルはメモ帳で簡単に作成できます。メモ帳を開いてコードを書いていきましょう。

まずはhead部分から記述していきます。head部分には、Webページ全体の情報を記載します。「<title>山田の日記</title>」と記載すれば、Webページのタイトルを「山田の日記」と設定できます。

また、HTMLには色々な種類があり、現在はHTML5がメインに使われています。そこで、「このWebページの文書はHTML5で作成されています」と宣言するために、<!DOCTYPE html>と記述します。

では、<html>を書いていきましょう、と言いたいところですが、まだ書かなければならない要素があります。

1つ目が、<html lang=ja>で、Webページの文書が日本語で書かれていることを示すタグです。2つ目が<meta charset=UTF-8>で、UTF-8という日本語の文字コードを使っていることを表しています。

少しややこしいですが、head部分は以下のように記載するというルールを覚えておいてください。

<!DOCTYPE html>

<html lang=ja>

<head>

  <meta charset=UTF-8>

  <title>山田の日記</title>

</head>

</html>

ちなみにタイトル(title)部分はWebページには表示されません。タイトルを表示したい場合は、別途body部分のh1タグでタイトルを記述しましょう。

Webページの本文をbodyに書く

head部分を書き終えたら、次はbody部分を作成していきます。body内にはWebページの本文を記述していきましょう。新聞の見出しと同じように、Webページには「見出し」があります。タイトルをh1、大見出しをh2、中見出しをh3、小見出しをh4で指定するのが一般的です。

例えば、以下のように記述します。

<!DOCTYPE html>

<html lang=ja>

<head>

  <meta charset=UTF-8>

  <title>山田の日記</title>

</head>

<body>

  <h2>今日のランチ</h2>

  <p>今日は良い天気だったので、15分歩いて普段は行かないレストランへ行きました。初めてのイタリアンレストランで食べたペペロンチーノは非常に美味しかったです。</p>

</body>

</html>

HTMLファイルをブラウザで確認する

HTMLページが作成できたら、パソコンにHTMLファイルを保存します。名前は適当で構いませんが、文字コードは先ほどHTMLで指定した通りUTF-8を選びましょう。次に、保存したファイルをGoogle Chromeにドラッグします。

すると、先ほど作成したWebページがブラウザで確認できます。実際にWebサイトを作成する際は、自分でレンタルしたサーバーにファイルをアップロードすると、Webサイトを公開できますよ。

コメントアウト機能を活用しよう

HTMLには「コメントアウト」という機能があります。コメントアウトはメモ書きのようなもので、Webページには表示されません。そのため、自分でWebページを作成する際のメモや、複数人でWeb制作を分担する際の伝言板として活用できます。

コメントアウトは<!– ここを修正してください –>という風に「!」を使って記述します。

CSSでできること

HTMLページを作成したら、次にCSSでスタイルを設定していきます。ここからは、CSSでできることを紹介します。

文字や背景色を指定できるCSS

CSSでは色々なデザインの設定を行えます。例えば、文字のカラーやサイズを指定したり、背景色を一部分または全体に適用したりできます。その際、文字や背景の色は「orange」や「black」といった色の名前や、「#f6f6f6」といったカラーコードで指定できます。

HTMLとCSSを使い分けよう

実は、数年前はCSSを使わなくてもHTMLだけで文字のカラーやサイズの指定ができました。しかし、現在のHTML5では、文字のカラーやサイズなどを指定するタグは使えなくなっています。

そのため、思い通りのWebサイトを制作するには、HTMLとCSSを使い分ける必要があります。

CSSの3種類の書き方

HTMLページはメモ帳に書いて作成できましたが、CSSはどこに書いていけばよいのでしょうか。ここからは、CSSを記述する方法を紹介します。

3パターンを使い分けよう

CSSの書き方は3種類あります。1つ目は、CSSファイルを作成して、その中にCSSのコードを書いていく方法です。2つ目は、HTMLファイルの中にstyleタグを使ってCSSを記述する方法。そして3つ目は、HTMLタグの中に直接CSSを書き込む方法です。

それぞれの書き方のメリット

CSSファイルを作って読み込む方法が一般的に使われており、CSSファイルを複数用意することで、1つのHTMLファイルからデザイン違いのWebページが複数作れます。

HTMLファイルにstyleタグを追加してCSSを書くメリットは、Webページの一部分だけ簡単にデザインを変更できることです。

HTMLタグの中に直接CSSを書き込む方法は、Webページの1、2か所だけ変更したい時に最適です。

CSSの基本の書き方

初心者の頃はCSSのコードを見ても、よく分からなくて悩んでしまうと思います。しかし、CSSには文法のようなものがあるので、基本をマスターすればどんどん書けるようになります。早速、CSSの基本の書き方を見ていきましょう。

セレクタ・プロパティ・値で成り立つCSS

CSSは例えば、以下のように書き表せます。

body{color : orange }

この場合、body部分のフォントのカラーはオレンジであると指示しています。ここで、「body」はセレクタ、「color」はプロパティ、「orange」は値です。CSSは基本的に、セレクタ・プロパティ・値で成り立っています。

セレクタ・プロパティ・値とは

セレクタには、Webページ内のどの部分のデザインを変更するかを記述します。先ほどは「body」を指定しましたが、他にも「p」や「a:link」など色々なセレクタが指定できます。

プロパティは、指定したセレクタの何を変更するのかを指定します。例えば、「color」なら文字のカラーを変更し、「background」なら背景のカラーを変更できます。

値には、カラーやサイズなど具体的な値を指示します。カラーであれば「white」や「#6e6e6e」、文字のサイズであれば「14px」という風に表していきます。

CSSの注意点

CSSは半角の英数字や記号を使用して書いていきますが、途中で半角のスペースを入れたり、改行しても構いません。自分やチームメンバーが見やすいように書き方を自由に工夫しましょう。

ただ、初心者にありがちなエラーとして、間違って全角スペースを入れてしまうというケアレスミスがあります。初心者の場合は間違いにすぐに気づくことが難しく、そんな小さなケアレスミスに数時間悩んでしまうこともあるので、注意しましょう。

Webページ制作の流れ

HTMLとCSSを書けるようになるためには、実際に手を動かしてWebページを作り上げていくのが一番です。そこで、ここからは、Webサイトを作る一連の流れを解説します。

Webサイトのイメージを固める

まずは、自分がどんなWebサイトを作りたいか、そのイメージを固めないことには始まりません。Webサイトに訪れて欲しい人(ターゲット)を設定し、Webサイト内にどんなコンテンツを作成すればよいかプランを立てていきましょう。

Webサイトに含めるコンテンツを作成する

Webサイトに含めたいコンテンツが想定できたら、実際にWebサイトの本文を書いていきます。この段階では、素材となる文章を作っていくだけなので、Wordやメモ帳などに書いていきましょう。

その際、文章のどの部分が大見出し、中見出しに当たるのかを指定しておくと、後のコーディング作業がスムーズに進みますよ。

Webサイトのデザインを考える

Webサイトの本文を書くのと同時並行で、各Webページのデザイン・レイアウトを考えていきましょう。ターゲットとなる人によって、最適なデザインは異なります。例えば、20代前半の女性向けなら明るいパステルカラーが好まれますし、50代の女性向けなら落ち着いた上品なカラーが好まれます。

WebページのデザインはCSSで自由にコーディングできますし、1つのHTMLファイルから2種類以上のWebページを生み出すこともできるので、デザイン案も複数用意しておくと良いでしょう。

HTMLとCSSのフォルダを作る

Webサイトを作成する際は、HTMLファイルやCSSファイルがごちゃごちゃにならないように、それぞれ1つのフォルダにまとめておくのが基本です。HTMLファイルを入れるためのHTMLフォルダと、CSSファイルを入れるCSSフォルダ、さらに画像を収納するimageフォルダも作っておくと、スッキリとまとまります。

HTMLファイルを作成する

HTMLフォルダの中に「index.html」ファイルを作成します。「index.html」はWebサイトのトップページになるので必ず作成しましょう。他にも、各コンテンツを盛り込むためのHTMLファイルを複数用意します。

HTMLで、それぞれのコンテンツの骨組みを作成していきましょう。先ほど作成した文章をHTMLのbody部分に貼り付け、大見出しや中見出しなどを設定していきます。

CSSを書く

デザイン案を元に、CSSを書きます。「大見出しのフォントや背景はこの色を指定して・・・。」という風に、デザインを具体的に指定していきます。

デザインする順番は、特に決められてはいませんが、headerは赤、sideはオレンジ、mainはピンクというように、大まかなカラーから設定していくとイメージを形にしやすくなりますよ。

ブラウザで表示テストをする

HTMLファイルとCSSファイルを作成できたら、ブラウザで問題なく表示されるかどうかテストしてみましょう。ブラウザはGoogle Chrome、Internet Explorer、Firefoxなど、何でも構いません。

HTMLファイルを右クリックして、「プログラムから開く」を選択することで、いずれかのブラウザで表示させられます。

サーバーにアップロードする

Webサイトは全て、サーバーという空間にファイルをアップロードした上で世界に発信することになります。個人でWebサイトを発信する場合は、レンタルサーバーを利用しましょう。レンタルサーバーは賃貸住宅を借りるのと同じようなもので、月々利用料を払って使用します。

サーバー上にHTMLファイルとCSSファイルをアップロードすると、世界中からWebサイトが閲覧できるようになりますよ。

初心者からHTMLとCSSをマスターしよう

Web制作の初心者にとって、最初の壁となるのがHTMLとCSSです。始めは意味が分からなくて挫折しそうになるかもしれません。しかし、エラーと修正を繰り返していくうちに、思い通りのWebサイトを作れるようになりますよ。

今回ご紹介したHTMLとCSSの基礎知識を参考にしつつ、効率的にWeb制作を勉強して素敵なWebサイトを作り上げてくださいね。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
などアクシグ代表の吉田が、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。