2024/09/21 LT初めて会（仮）

2024/09/21に行われた、「LTやったことない人で集まって初めてのLTやっちゃおうぜ！」という企画での発表資料です。

Transcript

1. マスター タイトルの書式設定 1 HTML/CSS事始め 「 H T M L / C S S っ て 要 す る に 何 を し て い る の ？ 」 2024年9月21日（土）
2. マスター タイトルの書式設定 2 私について 2
3. マスター タイトルの書式設定 3 Helda 3 • 制作会社勤務、主に保守担当 • 今年5月に未経験で入社 • 日々レガシーな作りのサイトと闘う • のべつまくなしに現れるdivとpが憎い • デザインよりはコーディング作業が好き • アクセシビリティ業務に携わりたい • 趣味：漫画、ゲーム、特撮 • 『ウルトラマンZ』を見てほしい 写真は非公開です
4. マスター タイトルの書式設定 4 今日のテーマ 4
5. マスター タイトルの書式設定 5 HTML/CSSって 要するに何をしているの？ 5
6. マスター タイトルの書式設定 6 「HTML/CSSって要するに何をしているの？」 • 普段の職務領域でHTML/CSSに触れる機会が少ない方 • HTML/CSSをこれから勉強する新人の指導をする方 • お客様に説明する方 6 主に上記のような方向けの、 「私はHTML/CSSをこういう感覚で捉えて使っていますよ～」 というお話
7. マスター タイトルの書式設定 7 HTML/CSSについて 7
8. マスター タイトルの書式設定 8 HTML/CSSについて 8 HTML CSS • マークアップ言語 • 家でたとえると「土台・骨組み」 • スタイルシート言語 • 家でたとえると「建具・壁紙」 ＝Webサイトの「見た目」を作るための言語たち
9. マスター タイトルの書式設定 9 HTML/CSSを書くときに やっていること 9
10. マスター タイトルの書式設定 10 HTML/CSSを書くときにやっていること 10 • Webページ ≒ 文書 ≒ 情報の集まり →構成するそれぞれのパーツに、「見出し」「リスト」「画像」などの「役割」を持たせる • この「役割」を、HTMLでは「要素」または「タグ」と呼ぶ この赤字部分→ • 「要素／タグ」は、種類がHTML側の規格で決まっている ↑Webページを読み込む機械に情報の役割を適切に伝えるため ①【HTML】役割を割り振る →ただしこれだけでは種類が少なくて不便
11. マスター タイトルの書式設定 11 HTML/CSSを書くときにやっていること 11 • さらに細分化して指定したいときは、「クラス」と「ID」を自由に決めることができる ↑「タグ／要素」と違って「役割」を機械に伝えることはできない • クラス：複数の要素に同じものを使うことができる（≒学校の「◦年△組」） • ID：ページ内で一つの要素にしかつけられない（≒学校の学籍番号） ②【HTML】名前を割り振る
12. マスター タイトルの書式設定 12 HTML/CSSを書くときにやっていること 12 ⑴要素・タグで呼ぶ ③【CSS】役割・名前を呼ぶ（＝セレクタ） ⑵クラスで呼ぶ ⑶IDで呼ぶ • 手順①②で指定した要素／タグ、クラス、IDなどを、まず呼び出す
13. マスター タイトルの書式設定 13 HTML/CSSを書くときにやっていること 13 ④【CSS】振る舞い（＝スタイル）を指定する
14. マスター タイトルの書式設定 14 役割を適切に割り振ることの 大切さ 14
15. マスター タイトルの書式設定 15 役割を適切に割り振ることの大切さ 15 • Webページの見た目に直結するのは手順③と④のCSSパート →手順①は地味な部分だと思われがち 私が特に気を付けている手順＝① ①を適当にやるとどうなるか？ ←手順①が 終わった段階 まだ見た目が 整っていない
16. マスター タイトルの書式設定 16 役割を適切に割り振ることの大切さ 16 例： 別にこれでもCSSを適切に指定してしまえばちゃんと見た目は整えられる
17. マスター タイトルの書式設定 17 役割を適切に割り振ることの大切さ 17 要素／タグの割り振りが適切でないと • SEOに悪影響 • アクセシビリティを低下させる • 保守担当の胃に穴が空く →最初は面倒かもしれないけれど、長い目で見れば 要素／タグの割り振りはちゃんとしておいた方が絶対に良い！！
18. マスター タイトルの書式設定 18 役割を適切に割り振ることの大切さ 18 例の振り直し（＝リファクタリング）
19. マスター タイトルの書式設定 19 役割を適切に割り振ることの大切さ 19 文書の構造・情報の役割は、 コーダーだけではなく 関わる人みんなが意識しましょう
20. マスター タイトルの書式設定 20 まとめ 20
21. マスター タイトルの書式設定 21 まとめ 21 1. HTML/CSSの基本の仕事は、 1. 役割／名前を割り振り、 2. 役割／名前を呼んで振る舞い方を命令する 2. ページ内の各情報の役割を 適切に割り振ることが大事
22. マスター タイトルの書式設定 22 ありがとうございました