目的

ProgateでHTML&CSS勉強したけど、自分のPCでHTML&CSSを勉強したい人。
とりあえずHello Worldを出したい人
Mac個人向けの記事です。

準備するもの、知識

Mac
エディタ（Visual Studio Codeを推奨）
下記の準備物を終わらせてください。
https://qiita.com/YutakaYamasaki/items/cbf4a8ecea9b041d158a
マウスの操作がわかる人(右クリック)

Hellow Worldを表示させる手順

フォルダ作成

デスクトップで右クリックを押してフォルダを作成します。
フォルダ名は何でもいいですが、英語でわかりやすい言葉が望ましいです。
ここではHTML&CSSといったファイルを作成します。下記の手順のように作成してみてください。

HTMLファイル作成

エディタを起動します。（本記事ではVisual Studio codeを使用します。）
先ほど作成したフォルダをエディタにドロップアンドドロップします。
その後、そのフォルダにhello_world.htmlファイルを作成します。
ファイルを作成すると自動的にファイルが開いて編集することができます。
下記の手順のように作成してみてください。

hello_world.htmlファイルの編集

今回は下記のようにコードを書いてみてください。
h1タグでHelloWorldを囲ってください。

hellow_world.html


<h1>Hello World</h1>

作成ができたら、ファイルを保存します。
キーボードのcommandを押しながらsを押してください。
これで準備は整いました！
あとは表示するだけです。

HTMLのファイルをブラウザで表示する。

HTMLのファイルを作成します。
ファイルを右クリックしてパスをコピーしてください。
Google Chromeを開き、URL欄に貼り付けてEnterを押すと、HelloWorldが表示されます！

CSSを使ってHelloWorldを赤くする手順

CSSファイルを作成する。

先ほどのHTMLファイルを作成の手順を元にCSSファイルを新しく作成しましょう。
ここではhello.cssのファイルを作成します。

今回はh1のタグを指定して文字を赤くします。
下のようにコードを書きましょう。

hello.css

h1{
    color: red;
}

作成し終えたら、保存のコマンドも忘れずに
(command+s)

HTMLファイルを修正する。

CSSファイルを作成しましたが、これだけでは文字の色が反映されません。
HTMLファイルにCSSのファイルを紐付ける必要があります。
先ほど書いたコードを下のようにコードを編集してください。

hello_world.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="hello.css">
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

作成し終えたら、保存のコマンドも忘れずに
(command+s)

仕上げ

最後に編集したファイルをブラウザに表示させましょう。
先ほどの手順と一緒に、HTMLのファイルのパスをコピーし、
GoogleChromeのURLに貼り付けします。
Enterを押すと文字が赤くなっています！

終わりに

いかがでしょうか。
もう既に知っている方もおられるかたがほとんどかと思いますが、
自学習、復習でお役に立てると嬉しいです。

ちなみに補足ですが
Visual Studio Codeを使うとき、h1を入力して
そのままキーボードのtabキーを入力すると自動的に
<h1></h1>を作成してくれます。

最初は慣れないかと思いますが、とても便利な機能なのでぜひ使いこなしてください。
それではまた

【Mac】超簡単！HTMLとCSSファイルを作成し、Hello Worldをブラウザに表示させる方法

目的