- デスクトップに「課題4」フォルダーを作り、その中に「1」「2」フォルダーを作る。
- Visual Studio Codeを起動する。
- 「File」→「Preferences」→「Settings」で設定メニューを出し、「render whitespace」で検索して設定を「all」に変える。
- Visual Studio Codeで「File」→「Open Folder」で「課題4」フォルダーを開く。
- 「課題4」の中の「1」フォルダーの中に「index.html」というファイルを作る。
- 以下のコードをコピー＆ペーストして上書き保存する。
- index.htmlをFireFoxで開く。
<ul> と </ul> で囲んだものは「番号なしの箇条書き」、<ol> と </ol> で囲んだものは「番号つきの箇条書き」になる。
箇条書きのそれぞれの項目は <li> と </li> で囲む。
(こう書けば、材料の項目の「・」や手順の項目の数字が自動的につく)
この段階では、「材料」と「牛 薄切り肉 500g」の間、「手順」と「1. 鍋に○を入れる」の間が空きすぎていてバランスが悪い。
- CSSの部分に以下のものを追加してブラウザを更新する。
このように「材料」「手順」の下の隙間が狭くなればOK。
- CSSの部分と本文にそれぞれに以下のものを追加してブラウザを更新する。
このように「水 500cc」の前の ● が ○ になればOK。
- 以下のような表示になるように、本文に必要なものを追加する。
(「玉ねぎ～」は「牛～」をベースに、「醤油～」以降は「水～」をベースにして作ると楽)
- CSSの部分と本文にそれぞれに以下のものを追加してブラウザを更新する。
このように「鍋に～」の前の「1. 」が「一、」になればOK。
「list-style-type」に設定するもので箇条書きの前の記号・数字を変えられる (参考)。
- 以下のような表示になるように、本文に必要なものを追加する (参考)。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style type="text/css">
img {
max-width: 100%;
}
.dai {
font-size: 2.0em;
}
.chuu {
font-size: 1.5em;
}
.futoji {
font-weight: bold;
}
.jisage {
margin-left: 20px;
}
</style>
<title>課題4-1. 箇条書き</title>
</head>
<body>
<span class="dai futoji">牛丼のレシピ</span>
<div class="jisage">
<span class="chuu futoji">材料</span>
<ul>
<li>牛 薄切り肉 500g</li>
<li>水 500cc</li>
</ul>
<span class="chuu futoji">手順</span>
<ol>
<li>鍋に○を入れる</li>
</ol>
</div>
</body>
</html>