【Webサイト制作】超初心者向けHTML・CSS入門講座

今回は、超初心者向けにHTML・CSSの書き方を解説していこうと思います。

HTML/CSSのことは全く分からないという人でも分かるように書いていきます。

HTML・CSSを勉強したいという方はぜひ参考にしてください。

環境構築
HTMLを書いてみよう
ブラウザで表示させてみよう
ページにテキストを表示してみよう
インデントを入れよう
CSSを書いてみよう
CSSをHTMLに反映させてみよう
まとめ

環境構築

まずはWebサイトを制作する環境を整えていきましょう。

テキストエディター

HTML/CSSを書くためのテキストエディターをインストールしましょう。

私がおすすめするのは、Visual Studio Codeです。

リンク

Visual Studio Code

とても高機能で使い勝手がよく、便利な拡張機能が豊富なのも魅力です。

また、利用者も多いので困った時や使い方を調べるとたくさんの情報が出てくるのもおすすめポイントです。

デフォルトでは英語表示ですが、以下の方法で日本語表示に変更することが可能です。

【Mac】Visual Studio Code で日本語化する方法 2020

Visual Studio Codeで日本語化する方法[Windows] – Qiita

ブラウザ

ブラウザはGoogle Chromeを使うのがおすすめです。

リンク

Google Chrome

Google ChromeにはDeveloper toolsという開発者ツールがあり、これがとても便利だからです。

WindowsのデフォルトブラウザのMicrosoft Edgeや、MacのSafariの開発者ツールは使いにくいのであまりおすすめできません。

Google Chromeは最も利用者の多いブラウザで、拡張機能も豊富にあります。

フォルダーの作成

HTMLファイルを保存するフォルダーも作っておきましょう。

今回は、デスクトップに「sample」というフォルダーを作成してください。

HTMLを書いてみよう

では、実際にHTMLを書いてみましょう。

Visual Studio Code（以降VSCode）を起動させて、「ファイル」→「新規ファイル」でファイルを作成します。

新規ファイルの作成は、Macならcommand+N、WindowsならControl+Nでも行えます。

そうすると、以下のような表示になります。

このままだと、HTMLだと認識されていないので、以下の手順で設定を行います。

画面右下に「プレーンテキスト」と書かれた部分をクリックします。

そしたら、言語一覧が出てくるので、「HTML」をクリックします。

これでHTMLだと認識され、分かりやすく色付けなど自動で行ってくれます。

今回は「新規ファイル」から作成でしたが、保存されているHTMLファイルを開くと自動でHTMLとして読み取ってくますので、この作業は不要です。

では、VSCodeに以下のように書いてください。

<!DOCTYPE html>

これは、この文書がHTML5で書かれたものだという宣言です。

ただの宣言ですので、これだけでは何も起こりません。

<!DOCTYPE html>
<html>
この中にHTMLを書いていく。
</html>

HTMLは、htmlタグの中に書いていきます。

<html>〜</html>をhtml要素と言います。

HTMLは<〇〇>〜</〇〇>というタグで囲む形で記述するのが基本です。

上のコードで言うと、<html>が開始タグ、</html>の部分を終了タグと呼びます。

続けて、次のように書いてみてください。

<!DOCTYPE html>
<html lang="ja">
この中にHTMLを書いていく。
</html>

lang="ja"という文が出てきました。これを属性と言います。

属性は、直前に半角スペースを入れて記述します。

HTMLのタグ内でスペースを打つときは、必ず半角スペースを使います。全角スペースを使ってはいけません。

HTMLに限らず、CSSや、JavaScriptなどのプログラミング言語でもスペースは半角を使います。

属性は、左の属性名と、右に”（ダブルクォーテーション）で囲んだ値を=（イコール）繋げて書きます。

langは言語、jaは日本語を意味します。つまり、「このHTMLは、日本語で書かれています」という意味になります。

次は、以下のように書き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    
</head>
</html>

html要素の中に、head要素が入りました。

このように、HTMLというのは要素の中に要素を入れ子にして書いていきます。

head要素の中に書かれたものはページ内に表示はされませんが、ページの情報（メタ情報）を記述する役割があります。

次は、以下のように書いてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
</html>

meta要素にはページの情報を記述します。

charsetは文字コードを指定する属性で、ここではUTF-8という文字コードを指定しています。

文字コードについては長くなるので詳しく書きませんが、文字化けしないように文字コードを指定します。

先ほども説明しましたが、charsetの前は半角スペース、属性名と値を=（イコール）で繋げます。

基本的には、<meta charset="UTF-8">はhead要素内の一番上に書くようにしましょう。

そして、<meta charset="UTF-8">の前にスペースが入っています。

次に、以下のように書いてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
</html>

title要素は、ページのタイトルを表す要素です。

では、一度作成したファイルを保存してみましょう。

MacならCommand + shift + S、WindowsならControl + Shift + Sで名前を付けて保存ができます。

デスクトップに作成した「sample」フォルダーの中に、「index.html」という名前を付けて保存してください。

HTMLでは、トップページのhtmlファイルには「index.html」という名前を付けることがほとんどです。

ブラウザで表示させてみよう

次は、保存したファイルをブラウザで表示させてみましょう。

保存したファイルを、Google Chromeに直接ドロップしてください。

ページにはまだ何も書いていないので何も表示されませんが、タブにタイトルが反映されています。

タブにタイトルが表示されているのは、title要素を設定したからですね。

補足情報

index.htmlをダブルクリックすると、初期設定ではブラウザが起動するかと思います。

このままだと、htmlファイルを編集するときに不便なので設定を変更しましょう。

Macならhtmlファイルを右クリックで「情報を見る」→「このアプリケーションで開く」でVSCodeを指定してください。

Windowsならhtmlファイルを右クリックで「プログラムから開く」から「別のプログラムを選択」をクリックし、VSCodeを選択して「常にこのアプリを使って .htmlファイルを開く」をチェックして「OK」をクリックします。

これでhtmlファイルをダブルクリックするとVSCodeが起動するようになります。

ページにテキストを表示してみよう

次は、実際にページにテキストを表示させてみましょう。

以下のようにHTMLを書いてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
    
</body>
</html>

body要素は、実際にページに表示されるコンテンツを記述する場所になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<p>ここにテキストが入ります。</p>
</body>
</html>

p要素は、段落を意味する要素です。

Macならcommand+S、WindowsならControl+Sで上書き保存をしてください。

上書きしたら、ブラウザを更新して変更を反映させてください。

Macならcommand+R、WindowsならF5かControl+Rで更新できます。

ブラウザにテキストの追加が反映されたかと思います。

このように、ファイルの修正を反映させるには、ファイルを保存してブラウザを更新します。

インデントを入れよう

では、先ほどのコードをもう一度見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<p>ここにテキストが入ります。</p>
</body>
</html>

body要素の中に、p要素が入っている状態ですが、このままですと入れ子になっているのが分かりづらいです。

<p>ここにテキストが入ります。</p>

この行にカーソルを持っていき、Macならcommand+]、WindowsならControl+]を押してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
    <p>ここにテキストが入ります。</p>
</body>
</html>

このように、字下げを行うことを、インデントと言います。

もうお気づきかと思いますが、VSCodeを使っていれば自動でインデントが挿入されます。

head要素内も同様にインデントを入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    <p>ここにテキストが入ります。</p>
</body>
</html>

HTMLが複雑になるほど、インデントがあると見やすくなります。

以下の例をみてください。

<body>
<div class="wrapper">
<div class="wrapper-inner">
<div class="content">

</div>
</div>
</div>
</body>

同じような要素が並んでおり、終了タグがどれに対応しているのかがよく分かりません。

<body>
    <div class="wrapper">
        <div class="wrapper-inner">
            <div class="content">
                
            </div>
        </div>
    </div>
</body>

このようにインデントを入れるだけで、どの要素の終了タグなのかがハッキリしますし、入れ子になっているのが一目で分かります。

CSSを書いてみよう

では、次はCSSを書いてみましょう。

CSSは、HTMLで書いたコンテンツのカラーやレイアウトなどを指定するためのマークアップ言語です。

新たにファイルを作成します。

新規ファイルの作成は、Macならcommand+N、WindowsならControl+Nでも行えます。

こちらもHTML同様、CSSとして認識させます。

一度CSSで保存した保存したファイルを開く時は自動でCSSとして認識されるので、この作業は不要です。

新規作成したファイルに、以下のように記述してください。

@charset "UTF-8";

これは、文字コードを指定する記述です。文字化けを防ぐために必要になります。

次に、以下のように書いてください。

@charset "UTF-8";

p {
    color: #ad1a1a;
}

この例ですと、pの部分をセレクタ、colorの部分をプロパティ、#ad1a1aを値と言います。

プロパティと値はワンセットになっており、:（コロン）で繋げます。

{と}で囲まれた部分が、p要素のスタイルになります。

p{color:#ad1a1a;}

短く書くとこのような形になりますが、プロパティが増えると見づらいので、インデントと改行、スペースを入れて見やすくします。これもVSCodeが自動で行ってくれます。

値の後ろには必ず;（セミコロン）を入れます。

colorプロパティは文字色、#ad1a1aはカラーコードです。カラーコードは#から始まり、16進数の文字が並びます。

VSCodeでカラーコードにマウスカーソルを当てて1秒くらい待つと、カラーピッカーが表示されます。

カラーコードではなくrgbで表示される場合、rgb(173, 26, 26)と書かれた所をクリックすると、#で始まるカラーコードに変更できます。

実際にカラーピッカーをいじってみると、色に応じたカラーコードが表示されるかと思います。

カラーコードは覚える必要はなく、実務でPhotoshopやエディターなどのカラーピッカーからコピペして使います。

CSSをHTMLに反映させてみよう

先ほど新規作成したCSSを、「style.css」という名前で、sampleフォルダの中に保存してください。

sampleフォルダー内は以下のような構成になっていることを確認してください。

保存しただけでは、HTMLには反映されません。

HTML側でCSSを読み込むコードを書く必要があります。

index.htmlを以下のように書いてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <p>ここにテキストが入ります。</p>
</body>
</html>

link要素は外部のファイルを読み込むための要素です。

rel="stylesheet"はスタイルシートとして読み込むため、href="./style.css"はファイルの場所を指定する記述です。

href="./style.css"の./は「同じフォルダのファイル」を示しています。

例えば、style.cssがCSSフォルダーに入っている場合はhref="css/style.css"、上の階層にある場合は、href="../style.css"と書きます。

ちなみに、このようなファイル指定の書き方を相対パスと言います。

URLで指定する絶対パスという書き方もあるので、気になる方はググって調べてください。

index.htmlを上のように書き換えたら、上書き保存してブラウザを更新してみましょう。