Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2024/09/21 LT初めて会(仮)
Search
Akira Tsuda
September 23, 2024
Programming
0
36
2024/09/21 LT初めて会(仮)
2024/09/21に行われた、「LTやったことない人で集まって初めてのLTやっちゃおうぜ!」という企画での発表資料です。
Akira Tsuda
September 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
CursorはMCPを使った方が良いぞ
taigakono
1
220
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
3.3k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
C++20 射影変換
faithandbrave
0
560
Discover Metal 4
rei315
2
110
NPOでのDevinの活用
codeforeveryone
0
730
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Done Done
chrislema
184
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Visualization
eitanlees
146
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
We Have a Design System, Now What?
morganepeng
53
7.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Transcript
マスター タイトルの書式設定 1 HTML/CSS事始め 「 H T M L /
C S S っ て 要 す る に 何 を し て い る の ? 」 2024年9月21日(土)
マスター タイトルの書式設定 2 私について 2
マスター タイトルの書式設定 3 Helda 3 • 制作会社勤務、主に保守担当 • 今年5月に未経験で入社 •
日々レガシーな作りのサイトと闘う • のべつまくなしに現れるdivとpが憎い • デザインよりはコーディング作業が好き • アクセシビリティ業務に携わりたい • 趣味:漫画、ゲーム、特撮 • 『ウルトラマンZ』を見てほしい 写真は非公開です
マスター タイトルの書式設定 4 今日のテーマ 4
マスター タイトルの書式設定 5 HTML/CSSって 要するに何をしているの? 5
マスター タイトルの書式設定 6 「HTML/CSSって要するに何をしているの?」 • 普段の職務領域でHTML/CSSに触れる機会が少ない方 • HTML/CSSをこれから勉強する新人の指導をする方 • お客様に説明する方
6 主に上記のような方向けの、 「私はHTML/CSSをこういう感覚で捉えて使っていますよ~」 というお話
マスター タイトルの書式設定 7 HTML/CSSについて 7
マスター タイトルの書式設定 8 HTML/CSSについて 8 HTML CSS • マークアップ言語 •
家でたとえると「土台・骨組み」 • スタイルシート言語 • 家でたとえると「建具・壁紙」 =Webサイトの「見た目」を作るための言語たち
マスター タイトルの書式設定 9 HTML/CSSを書くときに やっていること 9
マスター タイトルの書式設定 10 HTML/CSSを書くときにやっていること 10 • Webページ ≒ 文書 ≒
情報の集まり →構成するそれぞれのパーツに、「見出し」「リスト」「画像」などの「役割」を持たせる • この「役割」を、HTMLでは「要素」または「タグ」と呼ぶ この赤字部分→ • 「要素/タグ」は、種類がHTML側の規格で決まっている ↑Webページを読み込む機械に情報の役割を適切に伝えるため ①【HTML】役割を割り振る →ただしこれだけでは種類が少なくて不便
マスター タイトルの書式設定 11 HTML/CSSを書くときにやっていること 11 • さらに細分化して指定したいときは、「クラス」と「ID」を自由に決めることができる ↑「タグ/要素」と違って「役割」を機械に伝えることはできない • クラス:複数の要素に同じものを使うことができる(≒学校の「◦年△組」)
• ID:ページ内で一つの要素にしかつけられない(≒学校の学籍番号) ②【HTML】名前を割り振る
マスター タイトルの書式設定 12 HTML/CSSを書くときにやっていること 12 ⑴要素・タグで呼ぶ ③【CSS】役割・名前を呼ぶ(=セレクタ) ⑵クラスで呼ぶ ⑶IDで呼ぶ •
手順①②で指定した要素/タグ、クラス、IDなどを、まず呼び出す
マスター タイトルの書式設定 13 HTML/CSSを書くときにやっていること 13 ④【CSS】振る舞い(=スタイル)を指定する
マスター タイトルの書式設定 14 役割を適切に割り振ることの 大切さ 14
マスター タイトルの書式設定 15 役割を適切に割り振ることの大切さ 15 • Webページの見た目に直結するのは手順③と④のCSSパート →手順①は地味な部分だと思われがち 私が特に気を付けている手順=① ①を適当にやるとどうなるか?
←手順①が 終わった段階 まだ見た目が 整っていない
マスター タイトルの書式設定 16 役割を適切に割り振ることの大切さ 16 例: 別にこれでもCSSを適切に指定してしまえばちゃんと見た目は整えられる
マスター タイトルの書式設定 17 役割を適切に割り振ることの大切さ 17 要素/タグの割り振りが適切でないと • SEOに悪影響 • アクセシビリティを低下させる
• 保守担当の胃に穴が空く →最初は面倒かもしれないけれど、長い目で見れば 要素/タグの割り振りはちゃんとしておいた方が絶対に良い!!
マスター タイトルの書式設定 18 役割を適切に割り振ることの大切さ 18 例の振り直し(=リファクタリング)
マスター タイトルの書式設定 19 役割を適切に割り振ることの大切さ 19 文書の構造・情報の役割は、 コーダーだけではなく 関わる人みんなが意識しましょう
マスター タイトルの書式設定 20 まとめ 20
マスター タイトルの書式設定 21 まとめ 21 1. HTML/CSSの基本の仕事は、 1. 役割/名前を割り振り、 2.
役割/名前を呼んで振る舞い方を命令する 2. ページ内の各情報の役割を 適切に割り振ることが大事
マスター タイトルの書式設定 22 ありがとうございました