教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
このパートでは基本のHTMLの形を設定します。
このパートではブラウザのツールバーにタイトルを表示するところまでやっていきます。画面にはまだ何も表示されない状態です。
では、HTMLの基本の形を作成してみましょう。
まずエディタ上でindex.html
を作成します。(既に、index.html
がある方は作成されなくて大丈夫です。)
画面上部にあるメニューバーの「ファイル」をクリックして「新規ファイル」を押してください。
「Untitled-1」というファイルが作成されるので、ファイルを保存しましょう。
Macの方は、「command + s」で保存できます。
Windowsの方は「control + s」で保存できます。
ファイル名をindex.html
にし、デスクトップなど、ファイルを保存したい場所を選択して「保存」をクリックしてください。
これでindex.html
ファイルの作成は終了です。
ファイルを作成したら以下のコードをindex.html
に追加してください。(既にindex.html
が作成されている場合は、index.html
のコードを下記のコードに書き換えてください。)
html1234567891011 Copied!<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サイト名</title>
</head>
<body>
</body>
</html>
コードを追加したら、コードを保存します。
Macの方は、「command + s」で保存できます。
Windowsの方は「control + s」で保存できます。
ちなみにコードが保存されたかどうかの確認は下記の画像のように、「●」があれば保存されていません。
保存すると「●」が消えるので、「●」で保存されているかどうか確認してください。
次にコードがHTMLの基本の形になります。下記に解説を記載していきます。
はじめに、以下の<!DOCTYPE html>
というコードにより、このファイルがHTML5という言語で作成されたものであることを宣言します。
html1 Copied!<!DOCTYPE html>
次に<head>
の中にmeta情報を記述します。
html12345 Copied!<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サイト名</title>
</head>
html1 Copied!<meta charset="UTF-8">
UTF-8の宣言により文字化けを防止します。
html1 Copied!<meta name="viewport" content="width=device-width, initial-scale=1">
viewport
は、タブレットなどでも適切に表示させる為の記述となります。
viewport
が指定されていなければ、下記のようにスマートフォンサイズで画面を見た際に、コンテンツが縮小されます。
下記にコードの詳細の説明を記載します。
width=device-width
により幅をデバイスの幅に合わせます。
initial-scale=1
は初期の表示倍率です。ここでは1倍を指定します。
最後に<title>
です。下記のコードのように<title>
を記載することでブラウザのツールバーにタイトルを表示できます。
html1 Copied!<title>サイト名</title>
ブラウザのツールバーにタイトルが表示されているか確かめてみましょう。
0章で導入した「Live HTML Previewer」の機能を使って、ブラウザに画面を表示させます。
下記の画像のように、index.html
を開いている画面で右クリックして表示されるメニューから、「Open in browser」を選択してください。
すると下記の画像のようにブラウザにコードの結果を表示できます。(現状は何も表示されないです。)下記の画像のようにタイトルに「サイト名」が記載されていれば、うまく動作しています。
以上で今回のパートは終了です。
お疲れ様でした。