※ 当記事は、MacOS向けの記事です
■ 事前に揃えておくべきもの
- MacOSの入ったコンピュータ
- VSCodeのインストール
- Google Chromeのインストール
イントロダクション
「いい感じのサイト思いついたし、作り始めるか〜」と思っても、我々Web開発者は中々制作を始められない。
何故だろうか。
何時何分何曜日に地球が何回回ったから？
自分のコンピュータのキーボードがバタバタ叩かれて可哀想だから？
それとも制作を始めるまでの準備が面倒だから？
そうですね、間違いなく「準備が面倒だから」でしょう！
HTMLサイトを作り始めるまでの準備を定例化する
ということで早速やっていきましょう。
「HTMLサイトを作り始めるまでの準備を定例化する」です。
元来、サイト制作もWeb開発も、最初に「手順書」を作るのが良いと...誰かがそう教えてくれた......
それでは、下に手順書を書いたので、まずはこれを把握しておきましょう。
1, ターミナルを起動する
2, Desktopディレクトリに移動する
3, サイトの親ディレクトリを作成する
4, サイトの親ディレクトリに移動する
5, 「index.html」ファイルを作成する
6, 「css」ディレクトリを作成する
7, 「style.css」ファイルを作成する
8, VSCodeを起動する
9, 作った親ディレクトリをVSCodeにドラッグする
10, Chromeを開く
11, 作った親ディレクトリの「index.html」をChromeにドラッグする
12, 完了(作業開始)
以上、12の手順です。
今回は、「ステーキハウスのサイトを作る」という想定で準備を行います。
ちなみに、「文章で読んでもあまり分からない」という方はこちら動画もあります！
https://www.youtube.com/watch?v=pL7Sm9vVuOs&t=227s
＝＝＝
それでは、今から12の手順のやるべきことと、打つべきコマンドを紹介していきます。
手順書通りの作業
1, ターミナルを起動する
まずはターミナルの起動、MacOSの純正のものでOK。
デスクトップ画面で、「Command + スペースキー」を押すと、Spotlight検索というやつが出てくる。
ここに「terminal」と入力。
すると、検索候補に「ターミナル」と出てくるので、ここでそのままEnterを押下。
これで、ターミナルの起動は完了です。
2, Desktopディレクトリに移動する
ここからは、先ほど開いたターミナルで操作。
まずはこれを入力し、Enterを押下。
cd Desktop
これで2番目の「Desktopディレクトリに移動する」は完了です。
いや、適当にやってるわけじゃないよ？
ここでやるのは本当にこれだけなんだからね！///（唐突なツンデレ）
3, サイトの親ディレクトリを作成する
次にサイトを作る箱みたいなこのを作リマショウ。
ここではその箱を「親ディレクトリ」と呼びます。
そして、今回のサイトは「ステーキハウスのサイト」なので、パッと見て分かりやすいように「steak_site」とかにしておきましょう。
（こういうサイト名なんかもルールを作っておくと良いかもね）
mkdir steak_site
これもターミナルに入力し、Enterを押下。
これで親ディレクトリが完成です。
4, サイトの親ディレクトリに移動する
次に、サイトの親ディレクトリに移動。
これも同じくターミナルで操作、「cd」コマンドを使います。
cd steak_site
ターミナルに入力し、Enterを押下。
親ディレクトリの完成。
5, 「index.html」ファイルを作成する
続いては、「ファイルの作成」
これもターミナルで行います。
touch index.html
ターミナルに入力し、Enterを押下。
ディレクトリ作成は「mkdir」
ファイル作成は「touch」
と、条件反射で言えるようになると良いですね。
6, 「css」ディレクトリを作成する
続いて、cssファイルを格納するディレクトリを作成。
そう、ディレクトリ作成は、まごうことなき「mkdir」である。
mkdir css
ターミナルに入力し、Enterを押下。
7, 「style.css」ファイルを作成する
ここは、今までと違い、構造としては「cssディレクトリの中にstyle.cssファイルを作成する」という感じなので、以下のようになります。
touch css/style.css
ターミナルに入力し、Enterを押下。
cssディレクトリの中に作成したファイルが入っていればOKです。
これで、ファイル作成の準備は完了。
8, VSCodeを起動する
さあ、残り3ステップは、開発を始めるための「テキストエディタの準備」です！
今度は懐かしの「Spotlight検索」を「Command + スペースキー」で表示して、ここに「code」と入力します。（vscodeと入力しないように注意）
検索候補に「Visual Studio Code」が出ている状態でEnterを押下。
これがVSCodeの正式名称だね！
すると、VSCodeもといVisual Studio Codeが立ち上がります。
9, 作った親ディレクトリをVSCodeにドラッグする
そして、ここに自分のデスクトップに作ってきた親ディレクトリを丸ごとドラッグ&ドロップで投げましょう。
これで、VSCode内でサイト制作が進められるようになりました。
10, Chromeを開く
あと、忘れてはならないのが「サイトの見た目確認」これをこまめにやっていかないと、気づいたら訳のわからないサイトになってしまいます。
なので、先にGoogle Chrome等のWebブラウザでファイルの見た目を確認できる状態にしておきましょう。
またもや、Spotlight検索の登場、「Command + スペースキー」で出現。
そしたら、「Chrome」と入力。
「Google Chrome」が検索候補に出てきたら、迷わずEnterを押下。
さあ、呪いの煤（Webブラウザ）の始まりだ。
11, 作った親ディレクトリの「index.html」をChromeにドラッグする
さあ、ついに最後の仕上げだ。
VSCodeから「index.html」を持ち出して、Chromeに投げる。
12, 完了(作業開始)
あとは、reset cssをかけたり、style.cssとindex.htmlをlinkしたりすれば制作を始められます。
サイト制作を始めるのが億劫に思ったときは、ぜひ当記事に立ち戻ってみてください。
ここまで読んでいただきありがとうございました！