元気ですか〜
いきなり何だよ
なんなら、突然3〜6日目ってサボりかよって声が聞こえてきそうですね…。
…なぜなら、
私が元気でもなく、
三日間学校へ行けなかったからです
あれだけ休むとめっちゃ厳しいと言われたのに…
コロナのバカヤロウ…
休みの間に「少しでも予習しておこう！」と
PC開いたけど、
CSSの勉強に入った途端、
どこをどうしていいのか分からないの
なぁぜなぁぜ
ってことで、
6日目はHTMLの最後をすっ飛ばして、
なんとHTMLを装飾して見栄えを良くする
“CSS”
という言語もまぁまぁ進んでたところから
始まります…
先生も
「できるだけ前回やったところをフォローしていく形で進めていくので、
たくさん質問して下さいね。」
って、優しい
けど、正直授業に追いていくのがやっとで、
何がわかってないのか分からないから
質問まで至らない
とりあえず、
自宅に戻って再度復習し終えたら
なんとな〜く雰囲気がつかめたのでまとめいきます
①まずはVSコード内で
必要な拡張機能を3っつダウンロード
1、Auto Rename Tag
2、Highlight Matcching Tag
3、htmltagwrap
中身の意味はイマイチわかりません…
②VSコードを立ち上げ、
左側にあるエクスプローラから(←コレ大事)
HTMLのファイルを開く
③同じくエクスプローラからCSSファイルを開く。(※この時右クリックで「横に並べて開く」を選択する)
④HTMLとCSSファイルを連動させる
1、HTMLのheadタグに以下を記入
<mate charset=“UTFｰ8”>
<link ret=“stylesheet” href=“css/reset.css>
<link ret=“stylesheet” href=“css/style.css>
青字はファイル名、
赤字はファイルの保管場所(フォルダ名/ファイル名)を表す
ファイルの保管場所はHTMLファイルの保管場所から辿る。一つ上の階層に戻る時は../を入れる。
※これを間違えると連動しません…
苦戦しすぎて死にました
2、CSSファイル１行目に以下を入力
@charset “utf-8”;
④までできたらあとはCSSファイルに指示を書き込んでいく。
だけ見たら教科書通りに進められそうって思うでしょう？
いやいや、
・そもそもどこからファイル開いてどういう画面配置で作業するのかや
・タグに書きこむ時の挿入するファイル等(ファイルパス)の決まりごとや
・<a herf=…>がaタグであるとか
前提として先生が口頭で説明してくれるから分かるけど、
そこらへん意識してなかったら読み飛ばしてしまって分からなくなるって思いました
そんな感じで悪戦苦闘しながら、自宅で再度ワークを完成できました
以下、前回すっ飛ばしたところからの
HTMLの覚え書きです。
CSSの覚書は次回に回します。
・基本的に<タグ>〜</タグ>と開始と終了がセットになる。
・タグの間に別のタグを入れる場合、タグ同士は親子関係にある。
・外側のタグが親要素、
内側のタグは子要素と言われる。
<head>
コンピュータ上にしか存在しないため、
見た目には出てこない設定部分
<body>
web上に見える部分
<h1>〜<h6>
見出し。数字が小さい方が重要度が高い
<p>
パラグラフ(文章)
<br>
改行。単体で使用する。
<ul>
順序が関係ない(箇条書き)リスト。
中に<li>リストアイテムが入る。
<ol>
順序が関係ある(レシピや順番などの)リスト。
中に<li>が入る
<dl>
項目とその説明がセットのリスト。
中に<dt>項目</dt><dd>説明</dd>が入る。
<a herf=“リンク先URL”>リンク先日本語名称</a>
aはアンカーの略。
〜に属性を入れてリンクを貼る。
</a>を入れるのを忘れない！
<img src=“ファイルパス” alt=“日本語ファイル名”>
画像を表記するファイルパスと保管先が
相違無いよう注意する。
<em>
強調。
<table>
表。間に以下を入れて</table>で終了する
<tr><th>項目1</th><th>項目2</th></tr>
<tr><td>値1</td><td>値2</td></tr>
<tr><td>値3</td><td>値4</td></tr>
<address>
住所や電話番号などの宛先。