テキストやタグを書いてブラウザで表示
02:21テキストやタグを書いてブラウザで表示
このステップでは、HTMLをブラウザで表示する方法について学んでいきます。
前ステップで学んだHTMLの基本構文にテキストやタグなどを書き、ブラウザでその表示を確認してみましょう。
記述したコードをブラウザで確認
HTMLをブラウザで表示するための手順
- 新しいHTMLファイルを作成しよう
Finderでフォルダを新規作成し、Visual Studio Codeを起動してください。
その後、新しいHTMLファイルを作成しましょう。 - テキストやタグを記述しよう
先ほど作成したHTMLファイルにテキストやタグを記述していきましょう。
記述後は必ず、保存されていることを確認してください。See the Pen 258_テキストやタグを書いてブラウザで表示_001 by Yugo Harima (@yh-dezadezi) on CodePen.
- ブラウザで表示を確認する
記述したHTMLをブラウザで確認していきましょう。FinderでHTMLファイルが保存されているフォルダを開き、ファイルをダブルクリックしてください。
その他にも、ファイルをブラウザウィンドウにドラッグ&ドロップするか、ファイルのパスをURLバー(アドレスバー)に入力する方法があります。- ファイルをダブルクリック

- ブラウザウィンドウにドラッグ&ドロップ

- ファイルのパスをURLバー(アドレスバー)に入力

上記の方法でHTMLファイルをブラウザで表示し、HTMLファイルに記述されているテキストが表示されているか確認しましょう。
- ファイルをダブルクリック
- コードを変更して再確認する
HTMLコードを自由に編集して、ブラウザでどのように表示が変わるかを確認しましょう。
新しいテキストの追加もしくは変更などして、HTMLの基本構文がどのように影響を与えるかを学んでみてください。※下記コードの変更でも問題ありません。
See the Pen 258_テキストやタグを書いてブラウザで表示_002 by Yugo Harima (@yh-dezadezi) on CodePen.
コードを変更したら、再度保存し、ブラウザに戻ってリロードしてください。
そして、追加/変更した箇所が表示されていたら完了です。
ショートコード:Command⌘ + R
以上が、「HTMLをブラウザで表示する方法」についての説明でした。
次のステップで、「 頻出のタグ説明」について説明していきます。