カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-1

基本のHTMLの形を設定する

このパートでは基本のHTMLの形を設定します。

このパートの目標物

このパートではブラウザのツールバーにタイトルを表示するところまでやっていきます。画面にはまだ何も表示されない状態です。

image

基本の形を生成

では、HTMLの基本の形を作成してみましょう。

まずエディタ上でindex.htmlを作成します。(既に、index.htmlがある方は作成されなくて大丈夫です。)

画面上部にあるメニューバーの「ファイル」をクリックして「新規ファイル」を押してください。

1-1-1

「Untitled-1」というファイルが作成されるので、ファイルを保存しましょう。

Macの方は、「command + s」で保存できます。

Windowsの方は「control + s」で保存できます。

ファイル名をindex.htmlにし、デスクトップなど、ファイルを保存したい場所を選択して「保存」をクリックしてください。

1-1-2

これでindex.htmlファイルの作成は終了です。

ファイルを作成したら以下のコードをindex.htmlに追加してください。(既にindex.htmlが作成されている場合は、index.htmlのコードを下記のコードに書き換えてください。)

html
1234567891011
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」で保存できます。

ちなみにコードが保存されたかどうかの確認は下記の画像のように、「●」があれば保存されていません。

1-1-3

保存すると「●」が消えるので、「●」で保存されているかどうか確認してください。

次にコードがHTMLの基本の形になります。下記に解説を記載していきます。

はじめに、以下の<!DOCTYPE html>というコードにより、このファイルがHTML5という言語で作成されたものであることを宣言します。

html
1
Copied!
<!DOCTYPE html>

次に<head>の中にmeta情報を記述します。

html
12345
Copied!
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サイト名</title> </head>
html
1
Copied!
<meta charset="UTF-8">

UTF-8の宣言により文字化けを防止します。

html
1
Copied!
<meta name="viewport" content="width=device-width, initial-scale=1">

viewportは、タブレットなどでも適切に表示させる為の記述となります。

viewportが指定されていなければ、下記のようにスマートフォンサイズで画面を見た際に、コンテンツが縮小されます。

image

下記にコードの詳細の説明を記載します。

width=device-widthにより幅をデバイスの幅に合わせます。

initial-scale=1は初期の表示倍率です。ここでは1倍を指定します。

最後に<title>です。下記のコードのように<title>を記載することでブラウザのツールバーにタイトルを表示できます。

html
1
Copied!
<title>サイト名</title>

ブラウザのツールバーにタイトルが表示されているか確かめてみましょう。

0章で導入した「Live HTML Previewer」の機能を使って、ブラウザに画面を表示させます。

下記の画像のように、index.htmlを開いている画面で右クリックして表示されるメニューから、「Open in browser」を選択してください。

1-1-4

すると下記の画像のようにブラウザにコードの結果を表示できます。(現状は何も表示されないです。)下記の画像のようにタイトルに「サイト名」が記載されていれば、うまく動作しています。

image

以上で今回のパートは終了です。
お疲れ様でした。

現在のパート (0)
全パート (13)
みんなで助け合おう!
現在のパートのディスカッション 全0件