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
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
テスト駆動Kaggle
isax1015
1
620
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
PicoRuby on Rails
makicamel
3
140
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Typedesign – Prime Four
hannesfritz
42
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
A better future with KSS
kneath
238
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Producing Creativity
orderedlist
PRO
346
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
4 Signs Your Business is Dying
shpigford
184
22k
Statistics for Hackers
jakevdp
799
220k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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 ありがとうございました