test1.htmlのつづき
<title>タグを入れよう
→
<title>JavaScript</title>
たとえば<meta>タグには終了タグがない。
方法1:開始タグだけにする
方法2:
<meta charset="UTF-8" />
と、自分の中に終了を記述する方法がある。これは、HTML4の後にちょっと流行ったXMLのルールの名残。そういう風に記述する人もいる。どちらでもいい。
普通の要素は終了タグがある。
メタやイメージや改行タグなどは、例外的に終了がない。
<br>
改行タグ。これは終了タグのない代表的なタグ。
<br />と書いてもいい。
ソースとして改行してもブラウザでは改行されない。
❤CTRL+Z:
元に戻す。Windows共通のショートカット。
❤CTRL+S:
上書き保存
サクラエディタのファイル名が表示されているところが、
test1.html(更新)
となっていたら、保存されていないからちゃんと保存すること。
⭐F5:
再読み込み。アイコンを押す人も多いけど、ブラウザが面倒くさがってキャッシュを優先しちゃうことがある(特にChrome)。つまり、変更して保存して再読み込みしたつもりなのに、反映されないことがある。大きなものや複雑なファイルほどそうなりやすい。
なので、F5を押す癖をつけるように。
あるいは、
CTRL+F5
を連打する。
これでたいていはうまく反映される。
⭐それでも反映されなかったら、履歴を消す必要があるときもある。
Chrome
→右上の点3つアイコン
→履歴
→閲覧履歴データの削除
テキストエディタでみる:設計図を見ている
ブラウザで見る:完成品、観客席でみている
変更を加えた
→保存して
→ブラウザで確認
こういう手順でプログラムを組んでいく。
<link>要素 これも終了タグのないタグ。
⭐href(エイチ・レフ)と読む
ハイパーリファレンス(hypertext reference)
書き加えて保存しましょう。
<link rel="stylesheet" href="style.css">
❤chrome
→何もないところで右クリック
→検証
→Consoleを選択
→エラーが出てますね ERR_FILE_NOT_FOUND
なぜか→まだ読み込むCSSファイルを作ってないから。
❤Elements:画面のデザインや配置の調査。
❤Console:プログラムのデバックをしたりする。そもそもコンソールはJavaScriptの命令のひとつだったりする。
Failed to load resource:
材料を読み込むのに失敗した
右側にstyle.css:1
これがないデスよと言っている。
じゃあそれを作りましょう。
サクラエディタ
→新規ファイル
→名前を付けて保存
→test1.htmlがある同じところに
style.css
で保存。(中身はまだ空)
→chromeでF5を押す
→エラーが消えましたね。
⭐CSS:カスケーディング(直列の意味)スタイルシート
デザインを決めるひと(主体)はたくさんあって、
→
その当事者は3人。
1.スタイルシートを定義するデザイナー
2.利用者(ユーザー)
つまり視覚弱者とかが、デザイナーがきれいに整えたサイトでも、うんと大きなフォントサイズやら明度差を大きくした個人用のスタイルシートを適用されたりする。
WEBでは、紙媒体のものとは違って、見る人によって形がちがうのが当たり前!
3.デザイナーもユーザーも指定しなかったもの。それはブラウザがはじめからもってるデフォルトのスタイルが適用される。
リキッドレイアウト:
流体的な
画像など、横幅によってサイズが自由自在にデバイスの形によってきまる。
そういう指示はスタイルシート上でできる。
レスポンシブレイアウトは、
受け取ってから、デバイスに合わせて変化するイメージ。