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
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
500
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
技術同人誌をMCP Serverにしてみた
74th
1
630
GraphRAGの仕組みまるわかり
tosuri13
8
530
Select API from Kotlin Coroutine
jmatsu
1
230
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
680
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
3
440
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Featured
See All Featured
Visualization
eitanlees
146
16k
For a Future-Friendly Web
brad_frost
179
9.8k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Facilitating Awesome Meetings
lara
54
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
BBQ
matthewcrist
89
9.7k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
How to Ace a Technical Interview
jacobian
277
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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 ありがとうございました