HTML & CSSのローカル開発環境を用意しよう

1.HTML & CSSを学ぶために必要なもの

リンクをコピーしました

Pikawakaのカリキュラムでは、手元のパソコンでWebページを作成しながらHTMLとCSSについて学習していきます。

Webページを作るには、主に「テキストエディタ」と「Webブラウザ」が必要になります。

テキストエディタは、テキストファイルを編集するためのソフトウェアのことです。テキストファイルとは「文字情報だけを含むファイル」のことで、HTMLやCSSのコードも文字情報なので、テキストエディタでコードを作成・編集することができます。

Webブラウザは、HTMLやCSSの解析結果を画面に表示するソフトウェアのことです。

Webページの製作は、テキストエディタにHTMLやCSSのコードを書いて編集し、Webブラウザで表示結果を確認しながら進めていきます。

また手元のパソコンに必要なソフトウェアをインストール・設定することで、インターネットに接続しなくても作業を進めることができます。

簡単に用語を説明すると、手元のパソコンのことをローカル、開発に必要なものを手元のパソコンに揃えた作業環境のことをローカル開発環境と呼びます。

それでは、Webブラウザから用意していきましょう。

2.Webブラウザを用意しよう

リンクをコピーしました

まずは「Webブラウザ」から用意していきましょう。

パソコンやスマートフォンでWebページを閲覧するときは、「Google Chrome、Firefox、Microsoft Edge、Safari」などを使っていますよね。

これらは「Webブラウザ」と呼ばれるソフトウェアです。

Macでは「Safari」がデフォルトのWebブラウザですが、Pikawakaのカリキュラムでは「Google Chrome」を使って開発を進めていきます。

Google Chromeの特徴

リンクをコピーしました

Google Chromeは、世界シェア１位のWebブラウザです。（2022年6月末日現在）

Google検索サイトやAndroidで有名なGoogle社が開発しており、信頼性も高いです。現在、SafariやMicrosoft Edgeといった純正のWebブラウザ以外では、ChromeかFirefoxを選ぶのがメジャーになっています。

以下のような特徴によって、Google Chromeはユーザから信頼され、人気を集めています。

ここからVSCodeをインストールする方法を説明します。すでに自分のPCにインストールされている方は「3.テキストエディタを用意しよう」へ進みましょう。

MacにGoogle Chromeをインストールをしよう

リンクをコピーしました

まずは「Google Chrome」を公式サイトからダウンロードします。

Google Chromeの公式サイトにアクセスし、以下の画像のように「Chromeをダウンロード」というボタンをクリックしましょう。

以下のようなウィンドウが表示される場合は、「許可」をクリックしておきましょう。

次に「Google Chrome」のインストールを行います。

Finderでダウンロードフォルダを表示し、ダウンロードした「googlechrome.dmg」をダブルクリックして開きましょう。

動画のようにファイルを開くとウィンドウが表示されるので、Chromeアイコンをアプリケーションフォルダまでドラッグ＆ドロップして、インストールを行いましょう。

最後に「Google Chrome」がインストールされているかを確かめてみましょう。

Finderでアプリケーションフォルダを表示し、以下の画像のように「Google Chrome」があれば無事にインストールすることができています。

ダウンロードフォルダにある「googlechrome.dmg」は、今後必要ないので右クリックで「ゴミ箱に入れる」か、「command＋ deleteキー」で削除しておきましょう。

次はMacのデフォルトのWebブラウザを「Safari」から「Google Chrome」に変更します。

Google Chromeを規定のWebブラウザに設定しよう

リンクをコピーしました

まずは「Google Chrome」を起動させます。

Finderでアプリケーションフォルダを表示し、以下の画像のように「Google Chrome」をダブルクリックしましょう。

以下のようなウィンドウが表示された場合は、「開く」をクリックしましょう。

Google Chromeを起動させると、以下の画面が表示されるので「開始する」というボタンをクリックしましょう。

各画面の案内に従って、アカウント作成に必要な情報を入力していきましょう。

「Chromeを規定のブラウザにする」という以下の画面が表示されたら、「デフォルトとして設定」をクリックしましょう。

「デフォルトとして設定」をクリックすると、以下のウィンドウが表示されるので「Chromeに変更」をクリックしましょう。

この設定によって、MacのデフォルトのWebブラウザを「Safari」から「Google Chrome」に変更することができました。

Googleアカウントの作成が完了すると、以下の画面が表示されます。

最後にGoogle Chromeを「Dock」に追加しておきましょう。

以下のように起動しているGoogle Chromeで「右クリック > オプション > Dockに追加」をクリックしましょう。

Dock上にGoogle Chromeのアイコンが追加されるので、次回からの起動がラクになります。

これでWebブラウザ（Google Chrome）の用意は完了です。
次はテキストエディタを用意していきます。

3.テキストエディタを用意しよう

リンクをコピーしました

次は「テキストエディタ」を用意していきましょう。

Macには簡単な文章を作成できる「テキストエディット」というテキストエディタが標準で搭載されていますが、今回は初心者におすすめの「Visual Studio Code」というテキストエディタをインストールします。

「テキストエディット」のような標準のテキストエディタを使って、HTMLやCSSのコードを書くことはできますが、文章作成のための必要最低限の機能しかないので、やや不便です。

以下のように「Visual Studio Code」には、シンタックスハイライト（特定のコードに色を付ける機能）があります。

また入力補完（入力内容を予測して候補を表示する機能）という便利な機能もあります。

Visual Studio Codeは、「ソースコードエディタ」と呼ばれるエディタです。

ソースコードエディタは、HTMLやCSS、その他プログラミング言語を編集することに特化するエディタで、効率的に開発を進めることができます。

Visual Studio Codeの特徴

リンクをコピーしました

Visual Studio Codeとは、Microsoft社が開発・提供しているソースコードエディタです。

以下の理由により、開発者から高い人気を誇るエディタです。

• 動作が軽い
• 豊富な拡張機能でカスタマイズ性が高い
• ドキュメントがしっかりしている

初期状態でも機能が充実しているので、ベテランの方だけではなく初心者でも扱いやすいエディタです。

MacにVisual Studio Codeをインストールをしよう

リンクをコピーしました

まずは「Visual Studio Code」を公式サイトからダウンロードします。

Visual Studio Codeの公式サイトにアクセスし、以下の画像のように「Download Mac Universal」というボタンをクリックしましょう。

以下の画面に切り替わり、自動でダウンロードが開始されます。

ダウンロード完了後は、ウィンドウの左下に表示される「VSCode-darwin-universal.zip」をクリックして開き、インストールを完了させます。

インストール完了後は、Finderのダウンロードフォルダに「Visual Studio Code.app」が作成されるので、アプリケーションフォルダへドラッグ＆ドロップして、移動させましょう。

以下のようなウィンドウが表示された場合は、「認証」をクリックし、管理者のログイン情報を入力してください。

最後にダウンロードフォルダにある「VSCode-darwin-universal.zip」を削除しましょう。

Visual Studio Codeの画面構成を確認しよう

リンクをコピーしました

VSCodeの基本的な画面構成は、以下のように４つの要素で構成されています。

各要素の役割は、以下の表の通りです。

Visual Studio Codeを日本語化しよう

リンクをコピーしました

まずは「Visual Studio Code」を起動させます。

Finderでアプリケーションフォルダを表示し、以下の画像のように「Visual Studio Code.app」をダブルクリックしましょう。

以下のようなウィンドウが表示された場合は、「開く」をクリックしましょう。

初期画面が表示されたら、Visual Studio Codeを起動は完了です。

次に拡張機能を使って、「Visual Studio Code」を日本語化します。

拡張機能は、以下のようにアクティビティバーの上から５番目にある「EXTENSIONS」で管理することができます。

拡張機能の追加方法は、以下のように「EXTENSIONS」の検索窓に追加したい拡張機能の名前を入力して、検索結果から「Install」ボタンをクリックするだけです。

それでは、拡張機能で日本語化してみましょう。

動画のように「EXTENSIONS」の検索窓に「Japanese Language Pack for Visual Studio Code」を入力して、検索結果の表示から「Install」ボタンをクリックしましょう。

インストール後に右下へ表示される「Restart」をクリックして再起動させます。

再起動後、以下のように日本語でメニューなどが表示されます。

Visual Studio Codeは初期状態でも機能が充実していますが、拡張機能を導入することでより効率的に作業が行えます。

最後にChromeの時と同様の手順で「Visual Studio Code」をDockに追加しておきましょう。

4.Webページを表示させてみよう

リンクをコピーしました

ここからは、用意した「Webブラウザ」と「テキストエディタ」を使って、以下のWebページを表示させていきます。

なお、この章ではHTMLとCSSのコード解説は行いません。
次の「HTMLとCSSの基礎を学ぼう」で各コードの解説を行います。

作業用のフォルダを作成しよう

リンクをコピーしました

通常Webページを作成するときは、HTMLやCSSのファイル、画像ファイルやJavaScriptファイルなど様々なファイルが必要になります。これらの関連するファイルは、作業用のフォルダに格納してまとめる必要があります。

作業用フォルダを作成

リンクをコピーしました

まずは、作業用のフォルダを作成していきましょう。

以下の動画のように、デスクトップ上で右クリックして、メニューから「新規フォルダ」をクリックし、lessonという名前のフォルダを作成しましょう。

フォルダの作成が完了すると、以下のようにFinderの「デスクトップ」にlessonと表示されます。

作業用フォルダーを開く

リンクをコピーしました

続いて、lessonフォルダを「Visual Studio Code」で開いてみましょう。

Visual Studio Codeを起動させて、以下のようにアクティビティバーの1番上にあるアイコンをクリックして、「フォルダーを開く」という青いボタンをクリックします。

ボタンをクリックすると、動画のようにフォルダを選べるようになるので「デスクトップ」にあるlessonをクリックし、「開く」をクリックします。

フォルダにアクセスするかの確認や以下のような画面が表示されたら「ok」や「はい」の方をクリックしましょう。

これで作業用のフォルダ作成は完了です。

HTMLファイルを作成しよう

リンクをコピーしました

「Visual Studio Code」でHTMLファイルを作成していきましょう。

HTMLファイルは、ファイル名の末尾に.htmlという拡張子を付けて作成します。今回はindex.htmlというファイルを作成します。

index.htmlの作成

リンクをコピーしました

まずは、以下のように「lesson」の右側にあるアイコンをクリックします。

アイコンをクリックするとファイル名の入力欄が表示されるので、動画のようにindex.htmlと入力して、returnキーを押しましょう。

これでlessonフォルダ内にindex.htmlを作成することができました。

Finderのデスクトップを確認してみると、以下のようにlessonフォルダ内にindex.htmlを作成することができていますね。

HTMLのコードを書く

リンクをコピーしました

次は、index.htmlにHTMLのコードを書いてみましょう。

今回はサンプルとして以下のコードを用意しているので、コピーしてindex.htmlに貼り付けてみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>技術書一覧</title>
</head>
<body>
  <h1>技術書一覧</h1>
  <ol>
    <li>リーダブルコード</li>
    <li>CSS設計完全ガイド</li>
    <li>Webを支える技術</li>
  </ol>
</body>
</html>

動画のようにindex.htmlにコードを貼り付けます。

ファイルの保存方法

リンクをコピーしました

ファイルに変更を加えると、以下の画像のように未保存のマークが表示されます。

ファイルに書いたコードは保存されていない状態なので、動画のようにファイルを閉じようとするとウィンドウが表示されます。

ウィンドウの「保存」をクリックするか、通常はcommand + Sでコードを保存することができます。

ファイルにコードが保存されているかどうかは、以下の画像のようにファイル名の右横のマークで確認することができます。

ブラウザ上に表示させる方法

リンクをコピーしました

最後にWebブラウザでindex.htmlの解析結果を画面に表示させてみましょう。

Webブラウザの画面に表示させる方法はいくつかありますが、サイドバーもしくはタブのindex.htmlをGoogle Chromeにドラッグ&ドロップして表示させることもできます。

動画のようにindex.htmlをドラッグ&ドロップさせます。

他にも、Finderからファイルを開いて画面に表示させることができます。

以下の動画のようにindex.htmlを右クリックしてメニューを表示させて、「このアプリケーションで開く > Google Chrome（デフォルト）」をクリックするだけです。

アドレスバーのpathを確認

リンクをコピーしました

Google Chromeのアドレスバーには、以下のようにpath（パス）と呼ばれる文字列が表示されます。pathは、フォルダやファイルの場所を示します。

上の画像の場合は、index.htmlがどこにあるのかを示す文字列が表示されており、pikawakaの部分は自身のホームフォルダ名になります。

pathに関しては「Rubyのカリキュラム」で学ぶので、今は「pathはファイルの場所を示している」ということだけ覚えておきましょう。

CSSのファイルを作成しよう

リンクをコピーしました

今度は、lessonフォルダ内にCSSのファイルを作成していきましょう。

CSSファイルは、ファイル名の末尾に.cssという拡張子を付けて作成します。今回はstylesheet.cssというファイルを作成します。

まずは、HTMLファイル作成時と同様の手順でstylesheet.cssを作成しましょう。

Finderのデスクトップを確認してみると、以下のようにlessonフォルダ内にstylesheet.cssを作成することができていますね。

次は、stylesheet.cssにCSSのコードを書いてみましょう。

今回は見出しの文字の色を変えるCSSを用意しているので、以下のコードをコピーしてstylesheet.cssに貼り付けてみましょう。

1
2
3
.title {
  color: #02ccba;
}

動画のようにstylesheet.cssにコードを貼り付けて、command + Sでファイルを上書き保存しましょう。

続いてstylesheet.cssをindex.htmlに適用させるため、以下のハイライト箇所をindex.htmlに書き、ファイルを上書き保存しましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="stylesheet.css">
  <title>技術書一覧</title>
</head>
<body>
  <h1 class='title'>技術書一覧</h1>
  <ol>
    <li>リーダブルコード</li>
    <li>CSS設計完全ガイド</li>
    <li>Webを支える技術</li>
  </ol>
</body>
</html>

最後に「Google Chrome」でindex.htmlの解析結果を表示するページを再読み込み（リロード）します。

以下のようにアドレスバーの左側にあるマークをクリックしましょう。

動画のように技術書一覧の文字の色が変われば、正しくCSSが適用されています。

これで「HTML & CSS」の開発環境の用意は完了です。