今回は、このような構成で作ります。
今回は、このような構成で作ります。
今回、編集するファイルは、黄色い2つのファイルです。
「ダウンロード」フォルダに入ります。
「すべて展開」をクリック。
「展開(E)」をクリック。
展開でき、「202010」というフォルダができました。
このフォルダをダブルクリック。
「2020年10月講習会資料」フォルダをダブルクリック。
「assets」フォルダをクリック。
今回使う画像が入っています。
ウィンドウの何もないところで右クリック。
「新規作成(X)」＞「テキストドキュメント」
今回は、「index.html」という名前にします。
「index.html」と入力してEnterキーを押す。
「はい(Y)」を選択。
HTMLファイルが作成できた。
「assets」フォルダの何もないところで右クリック。
「新規作成(X)」＞「テキストドキュメント」
今回は、「style.css」という名前にします。
「style.css」と入力してEnterキーを押す。
「はい(Y)」を選択。
CSSファイルが作成できた。
「index.html」の上で右クリック。
「Open with Brackets」
Bracketsで開けた。
半角の「!」を入力し、Tabキーを押す。
入力できた。
<title>の内容を「ぱそぼらペット園 - TOP」に変更。
<head>内に
meta[name="viewport"][content="width=device-width,initial-scale=1"]
と入力し、Tabキーを押す。
※カーソルは行末に置いてください。
入力できた。
<head>内に「link:css」と入力し、Tabキーを押す。
入力できた。
「href="style.css"」の青いところにカーソルを合わせたまま、「a」と入力。
すると、「assets/」が出るのでクリック。
「assets/style.css」が出るのでクリック。
入力できた。
「assets」フォルダ内の「style.css」をBracketsで開く。
1行目に「@ch」と入力する。「@charset」が出るのでこれをクリック。
「"UTF-8";」と入力する。行末はセミコロン。
