Lecture Notes

HTML/CSS Lesson 2

ステップ毎にファイルを別名で保存する

Lesson 1で作成した「sample_01.html」ファイルをBracketsで開いておきます。ステップ毎にファイルを分けながら作業したいので、ファイルメニューから「名前を付けて保存」で保存を選択します。

保存の設定画面が表示されるので、デスクトップを選択して、左下の「新規フォルダ」を選択します。

新規フォルダの名前は「Lesson_02」とします。

ファイル名も「sample_02.html」として保存しましょう。

この後のレッスンでもステップ毎にフォルダ及びファイルを分けながら作業していくので、上記の手順を理解しておきましょう。

Lesson 2

ページのタイトルを作る

Lesson 1の状態から、少し書き足してみましょう。

bodyタグの前にheadダグを追加して、その中にtitleタグを入れます。titleタグには「初めてのHTML」を入力してみましょう。headタグはWebページの情報を記述する場所で、titleタグはその名の通りページのタイトルを記述するタグです。

入力が終わったら、ライブプレビューを確認してみます。ファイルを分けたので、ライブプレビューを表示し直す必要があります。

bodyのh1〜h6、pタグの記述を作る

では引き続きコーディングを進めます。今度は、bodyタグ内にh1〜h6とpタグで書き込んでみましょう。

書けたらライブプレビューを確認してみます。

hタグはheadingといい「見出し」を表すタグで、h1からh6までありh1が一番上の大見出しで順番に階層が下になっていきます。pタグはparagraphで「段落」を表します。これらのタグを使うことで、Webブラウザは自動的に見栄えを変えて表示しているのが分かりますね。

タグの途中で改行する

pタグの途中で改行したいとします。文章の途中で「returnキー」を押してもライブプレビューで確認すると改行されないのが分かります。

タグを分ければ段落が変わるので改行されますが、段落毎にスペースが生まれてしまいます。

段落の中で強制的に改行させたい場合は「br」タグを使います。

Pocket
LINEで送る

Return Top