【WEBデザイン学習記録】-１

2024.6.27(日付回っちゃいましたが27日分です💦）

〇HTML
・aタグ
・imgタグ
・パスについて
〇CSS
・リセットCSS
・idとclassの使い方

・<p>タグ
段落を表すタグ（＝本文）
　ただ改行してセーブしても、改行は反映されない
段落を切り替えて改行させたければ→再度<p>タグで括る
　　　　段落中に改行さえたければ→<br>タグを置く

・<ul><li>タグ
箇条書きリスト
　shift＋Alt＋↓矢印キーで【複製】
・<ol><ul>
番号付きリスト
Ctrl＋Dで【箇条書きリストのタイトルを同時に削除】

・<a href>タグ　<a href="リンク先のURLかパス">リンクテキスト</a>
―別タブで開く設定
<target="_blank">
※【rel="noopener"】
<target="_blank">には脆弱性があるため、この脆弱性をカバーするためにつけるタグ

・<img arc="画像のパス"alt="画像の代替テキスト">
※imgタグのwidth/height属性は指定すること
width/height属性は、画像サイズを定義するもの
―役割と効果
width/height属性を指定すると。ブラウザは画像あがロードされる前に適切なスペース
を確保し、レイアウトのシフトを防ぐことができる
―レイアウトのシフトとは
WEBページがロードされる間に視覚的な要素が予期せずに動く現象。
ユーザーがページを読んでいるときやボタンをクリックしようとしているときに、突然ページ上の要素が移動したりサイズが変わったりするとユーザーにとってとても迷惑になるのでUX面からみても指定するほうが良い

―画像のパフォーマンス改善をする
・【decording=“async”】
「画像を同期的にデコードする」役割の属性です。
ページの読込み時に、コードも画像も順番に全部読み込んでからページを表示させると遅くなります。少しでも高速化をしたいために、decording=“async”を使い画像を非同期で読み込ませる。
・【loading=“lazy"】
ページ表示時に画像の読み込みはせず、表示位置に近付いたタイミングで読み込みを行う。それに対し、decoding=“async”は、ページ表示時の画像読み込み自体は発生するが、それらをページの読み込みと並行して行うというものです。スクリーン外に存在する画像も読み込む点に違いがあります。

・idタグ
例）<h1 id="titile">〇〇〇〇</h1>
↑CSSで指定する際は。。。＃title{.....}
※『＃』をつけること！！！
※idタグはHTML内で一回しか使用できないのであまり使わないが、javascriptと連動したいとき時に使用することがある

明日は提出課題のコーディングのCSSを完成させて提出までしたいと思います。（実は自分の怠惰が原因で、恥ずかしながらスクールでの学習進捗がとても遅く提出課題が溜まっています。。。）

早くもスクールに入塾して三か月目の後半戦。
デザイン/コーディングの授業や課題も応用的な部分が増えているのですが、あやふやなまま授業を聞いている状況が続いてるのにも関わらず、復習を怠って周りと遅れをとっていることを身に染みて感じています。。。
この状況を作った自分に喝を入れるためにもう一度基礎から！ということで
コーディングの基礎の動画を見ました。