ここでは、実際にHTMLのみで、カレーのレシピページを作ります。同じcodeを書いて同じ作業をして、タグの使い方を覚えましょう！
HTMLで作る絶品カレーのレシピ
できあがりイメージです。HTMLのコードのみで作成したページです。一緒に作業しながらタグについて学習していきましょう！
bodyの中にcodeを書く
ビジュアルスタジオコードを開きます。
コードを書くまでの流れは、【 Live Server が表示できない！！】VS code初心者あるある対処法 ←こちらからフォルダを作ってスタートしましょう！
<body>の中に、「タイトル（見出し）」「材料」「作り方」を書いてみましょう！
これをウェブ表示させると、改行されずに、くっついたまま横一列に表示されてしまいます。では、「見出し（タイトル」）「材料」「作り方」に区切って表示させてみましょう！
ウェブ表示アプリで表示させたい方はこちら↓↓↓
Live serverダウンロード←はこちらから
Live server使い方←はこちらから
見出し（タイトル）は <h1> タグ
区切りを作るために必要なのがタグです。では、見出し（タイトル）である「絶品カレーの作り方」を表示させてみましょう。
見出しに使うタグは <h1> です。なので、開始タグ<h1>と、閉じタグ</h1>の間に「絶品カレーの作り方」と入れます。
<h1>絶品カレーの作り方</h1>
と入力、保存し、ウェブ表示させるとこうなります。見出しなので大きく表示され、改行もされています。
ちなみに、 <h1>< h2>< h3>と数字が大きくなると、
文字は小さくなります。
段落は < p >タグ
次は「材料」です。とりあえず段落を分けます。段落を分けるタグは <p> タグです。なので、
<p> 材料 </p>
と入力、保存すると、「材料」の文字だけで区切られ、自動改行されて見やすくなります。
リストは < li > タグ
次は「材料の名前」のリストを作ります。リストを作るタグは <li> タグです。「材料の名前」を個別に <li> タグで囲みます
「材料の名前」の左側に黒丸・が付き、材料が縦に並びます。
次は「作り方」です。ココでも <p> タグを使って段落を分けます。
<p> 作り方 </p>
と入力、保存すると、「作り方」の文字だけ区切られ、自動改行されて見やすくなります。
次は「作り方の内容」ですが、これもリストの <li> タグ を使います。
「材料の内容」の時と同じように、黒丸・が左側についたリストができあがります。
しかし、作り方には順番があるので、黒丸・を番号に変えましょう！
順番付きリストは < ol > タグ
順番をつけたいときは、 リスト <li> タグ全体 を <ol> タグで囲みます。
たったこれだけで、黒丸・が数字に変わります！
最後に段落 <p> タグで「完成」を囲みます。
写真を入れるタグ
前回の学習した写真タグ <img> タグです。<img> タグか空要素なので閉じタグがありません。
・前回の記事はこちら→【写真を入れるタグ <img> は、なぜ開始タグしかないの？】
では、見出しの下に写真を入れてみましょう！
・見出しの下に img と入力します。すると、img タグの候補がいくつか出てきます。
・img を選択します
・写真を表示さるためのコードが表示されます。
・images フォルダの中にある写真ファイルを選択。
・右クリックでメニューを出します。
・コピーを選択して、写真をコピーします。
・カーソルを””の間に置いたまま
・右クリックでメニューを開きます。
・貼り付けを選択すると
・先ほどの写真ファイルが貼り付けられます。
・カーソルを””の間に置いて
・「絶品カレー画像」と入力します。
・⌘コマンドを押しながらSを押して更新します。
・◯が✖️に変わり更新されました。
さあ、ウェブで表示させてみましょう！index.html を選択して右クリックします。
・Open with Live Server を選択します。
・写真が表示されました！
ウェブ表示アプリ（Open with Live Server) で表示させたい方はこちら↓↓↓
Live serverダウンロード←はこちらから
Live server使い方←はこちらから
タブの表示を変える
最後に、<head> の中にある <title> はwebページのタブに表示されます。ここを変更してみましょう！
<title> Document </title> のDocumentの部分を
<title>HTMLでカレーレシピを作る方法</title> に変更すると、タブも変更されます！
次回は、超初心者向け！CSSはどこに書くの？ CSSの書き方について学びましょう！
コメント