すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

Rails

【Rails】 1.HTML & CSSのローカル開発環境を用意しよう

※この記事は、macOSをご利用の方向けになります。

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

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

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

テキストエディタとWebブラウザ

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

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

テキストエディタとWebブラウザ2

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

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

ローカル環境

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

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

ポイント
  1. Webページの制作は、「テキストエディタ」と「Webブラウザ」が必要になる
  2. テキストエディタは、テキストファイルを編集するためのソフトウェア
  3. Webブラウザは、HTMLやCSSの解析結果を画面に表示するソフトウェア

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

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

Webブラウザ

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

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

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

Google Chromeの特徴

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

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

Google Chrome

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

項目 特徴
OS Windows、Mac、Android、iOS、Linux全てに対応
利便性 拡張機能の豊富さで、自分に合った機能を追加できる
安全性 フィッシングや不正なソフトウェア保護を有効にするなどの高度なセキュリティ設定が可能
ドキュメント ユーザー人口が多いため、拡張機能の数やドキュメントが豊富
更新頻度 ユーザビリティ向上やセキュリティ性の強化のため、頻繁にアップデートがおこなわれる

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

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

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

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

Chromeをダウンロード

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

自動でダウンロード

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

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

ダウンロードフォルダ

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

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を起動

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

ウィンドウ

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

開始する

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

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

Chromeを規定のブラウザにする

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

MacのデフォルトのWebブラウザを変更する

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

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

Googleアカウントの作成が完了

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

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

Dockに追加する

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

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

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

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

テキストエディタ

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

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

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

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

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の公式サイト

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

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

ファイルを解凍

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

アプリケーションフォルダへドラッグ&ドロップする

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

管理者情報を入力

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

zipファイルを削除

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

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

VSCodeの画面構成

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

名称 説明
1. アクティビティバー 主要機能がアイコンで表示される(初期状態では7つ)
2. サイドバー アクティビティバーで選択した内容が表示される
3. エディタ ファイルを編集するメインエリア
4. ステータスバー プロジェクトやファイルの情報が表示される

Visual Studio Codeを日本語化しよう

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

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

Visual Studio Code.appをクリック

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

警告2

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

初期画面

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

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

拡張機能

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

拡張機能の追加

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

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

日本語化

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

再起動

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

拡張機能追加後の比較画面

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

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

Dockに追加

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

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

完成ページ

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

ここからフォルダやファイルを作成しますが、全て半角英数字で入力してください。全角入力しないように注意しましょう!

ぴかわかさん

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

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

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

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

フォルダ作成

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

フォルダ作成2

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

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

フォルダを開く

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

フォルダを開く2

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

確認画面

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

HTMLファイルを作成しよう

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

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

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

ファイル作成1

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

ファイル作成2

ファイル名を間違えた場合

サイドバーにある間違えたファイル上で右クリックし、表示されたメニューの「名前を変更」をクリックしてindex.htmlへ修正しましょう。

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

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

ファイル作成3

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

今回はサンプルとして以下のコードを用意しているので、コピーしてindex.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にコードを貼り付けます。

HTMLコードを貼り付ける

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

ファイル保存されていない状態

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

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

ファイル保存

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

ファイル保存2

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

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

index.html

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

webページに表示させる

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

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

webページに表示させる2

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

パス

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

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

次は、作成したHTMLをCSSで装飾していこう!

ぴかわかさん
ポイント
  1. HTMLファイル作成時は、ファイル名の末尾に.htmlという拡張子を付ける
  2. Webブラウザは、HTMLファイルの解析結果を画面に表示することができる

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

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

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

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

cssファイル作成

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

cssファイル作成2

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

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

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

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

cssのコードを貼り付ける

続いてstylesheet.cssindex.htmlに適用させるため、以下のハイライト箇所を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の解析結果を表示するページを再読み込み(リロード)します。

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

リロード1

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

リロード2

適用されない場合に確かめること

・HTMLとCSSのコードを間違って記述していないか
・各ファイルは、コード変更後にきちんと保存されているか

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

この記事のまとめ

  • Webブラウザは、HTMLやCSSの解析結果を画面に表示するソフトウェアのこと
  • テキストエディタは、テキストファイルを編集するためのソフトウェアのこと
  • 次は「HTMLとCSSの基礎」を学ぶよ!