HTMLとCSS知識をアップデートしよう

技術のアップデートの恩恵を受けるために、HTMLとCSSの知識をアップデートしましょう！
比較的新しいHTML要素やCSSプロパティの紹介と、アップデートの情報はどこに取りにいったらいいのかをご紹介します。

Transcript

1. 1 株式会社エイチームフィナジー HTMLとCSS知識をアップデートしよう 2020.1.15 金融メディア事業部 デザイナーチーム 安井 智香
2. 2 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 2 自己紹介 ◧ 安井 智香 ( やすい ちか ) ◧ 前職 ￭ Web制作会社に6年勤務 ◧ 業務 ￭ 自社メディアのUI/UX改善 ◧ 好きなタグとプロパティ ￭ dl, dt, dd ￭ box-sizing
3. 3 　 © 2019 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 3 マークアップ知識のアップデート （HTML・CSS） 今日の目的
4. 4 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 4 今日のアジェンダ ◧ １_ マークアップ知識をアップデートする理由 ◧ ２_ 今知っておきたい！HTML タグ ◧ ３_ こんなに便利！新しい CSS プロパティ ◧ ４_ HTML と CSS ってどこがアップデートしてるの？
5. 5 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 5 今日のアジェンダ ◧ １_ マークアップ知識をアップデートする理由 ◧ ２_ 今知っておきたい！HTML タグ ◧ ３_ こんなに便利！新しい CSS プロパティ ◧ ４_ HTML と CSS ってどこがアップデートしてるの？
6. 6 　 © 2019 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 6 そもそもなぜ新しい知識を 入れる必要があるのだろうか？
7. 7 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 7 マークアップ知識をアップデートする理由 ◧ 知識をアップデートすると良いこと◎ ￭ 技術の進化の恩恵を受けることができる • Flexbox などの新しいスタイルを覚えることで簡単・多機能に実装！ ◧ 知識をアップデートしないと…× ￭ 表示崩れや不具合などの温床に ￭ 保守工数が増えがち
8. 8 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 8 今日のアジェンダ ◧ １_ マークアップ知識をアップデートする理由 ◧ ２_ 今知っておきたい！HTML タグ ◧ ３_ こんなに便利！新しい CSS プロパティ ◧ ４_ HTML と CSS ってどこがアップデートしてるの？
9. 9 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 9 ◧ picture 要素 ￭ メディアクエリを使って画像を出し分けることが可能 • デバイスサイズ（max-width など）や解像度（Retina 対応など） 今知っておきたい！HTMLタグ（画像）
10. 10 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 10 今知っておきたい！HTML タグ（インタラクティブ） ◧ details 要素 ￭ 追加の詳細情報を記載する ￭ ブラウザ上は折りたたみ要素として表示される ◧ summary 要素 ￭ 詳細情報の要約
11. 11 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 11 今知っておきたい！HTML タグ（インタラクティブ） ◧ details 要素 ￭ 追加の詳細情報を記載する ￭ ブラウザ上は折りたたみ要素として表示される ◧ summary 要素 ￭ 詳細情報の要約
12. 12 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 12 今知っておきたい！HTML タグ（link） ◧ <link rel="★"> の値に canonical／alternate が追加 ￭ canonical：正規ページ（主のページ） ￭ alternate：重複ページ
13. 13 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 13 今知っておきたい！HTML タグ（link） ◧ <link rel="★"> の値に noopener が追加 ￭ 主に target="_blank" を設定する場合に使用 ￭ リンク元のページURLを操作できないようにする • 参考：HTML 本当は怖い target="_blank" 。rel="noopener" ってなに？ https://chaika.hatenablog.com/entry/2018/12/06/110000
14. 14 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 14 今日のアジェンダ ◧ １_ マークアップ知識をアップデートする理由 ◧ ２_ 今知っておきたい！HTML タグ ◧ ３_ こんなに便利！新しい CSS プロパティ ◧ ４_ HTML と CSS ってどこがアップデートしてるの？
15. 15 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 15 こんなに便利！新しい CSS プロパティ（テキスト） ◧ text-overflow ￭ エリアからはみ出た文字に対する扱いを設定
16. 16 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 16 こんなに便利！新しい CSS プロパティ（テキスト） ◧ font-feauture-settings ￭ 自動文字詰め（カーニング）
17. 17 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 17 こんなに便利！新しい CSS プロパティ（画像） ◧ object-fit ￭ 画像などをボックス内にどのように表示させるかの設定 縦横のうち小さい方を基準にして自動的に 拡大・縮小、 はみ出た部分はトリミング 縦横のうち大きい方を基準にして自動的に 拡大・縮小、 足りない部分は余白を表示
18. 18 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 18 こんなに便利！新しい CSS プロパティ（画像） ◧ object-fit ￭ 画像などをボックス内にどのように表示させるかの設定
19. 19 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 19 こんなに便利！新しい CSS プロパティ（レイアウト） ◧ column-count ￭ 文章の段組レイアウト ◧ display: flex ￭ 横方向の多機能レイアウト ◧ display: grid ￭ 縦・横方向の多機能レイアウト ￭ Gridレイアウトを覚えるゲーム（Grid Garden）https://cssgridgarden.com/#ja
20. 20 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 20 今日のアジェンダ ◧ １_ マークアップ知識をアップデートする理由 ◧ ２_ 今知っておきたい！HTML タグ ◧ ３_ こんなに便利！新しい CSS プロパティ ◧ ４_ HTML と CSS ってどこがアップデートしてるの？
21. 21 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 21 マークアップってどこがアップデートしてるの？ WHATWG W3C
22. 22 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 22 マークアップってどこがアップデートしてるの？（ HTML） ◧ HTML の管理：WHATWG ◧ 「HTML（WHATWG Living Standard）」の日本語訳 ￭ https://momdo.github.io/html/
23. 23 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 23 マークアップってどこがアップデートしてるの？（ CSS） ◧ CSS の管理：W3C ◧ モジュール（font, text など）ごとの策定状況 ￭ https://www.w3.org/TR/?tag=css
24. 24 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 24 マークアップってどこがアップデートしてるの？（ CSS） ◧ １. WD（Working Drafts） – 草案 ◧ ２. CR（Candidate Recommendation） – 勧告候補 ◧ ３. PR（Proposed Recommendation）– 勧告案 ◧ ４. REC（Recommendation）– 勧告 ◧ W3C は「CR（勧告候補）」を使うことを推奨 ￭ しかし「CR」の状態でも主要ブラウザが未対応の場合も…
25. 25 　 © 2020 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 25 マークアップってどこがアップデートしてるの？（ CSS） ◧ ブラウザごとの対応状況 ￭ Can I USE https://caniuse.com ◧ 消えたプロパティ ￭ OLD PROPOSED PROPERTIES https://www.w3.org/Style/CSS/all-properties.en.html#other ◧ 世界でよく使われるプロパティのリスト ￭ CSS usage on the web platform - Microsoft Edge Development https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/
26. 26 　 © 2019 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 26 マークアップ知識のアップデート （HTML・CSS） 今日の目的 まとめ
27. 27 　 © 2019 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 27 知識をアップデートして技術の進化の恩恵を受けよう！ ◧ HTML や CSS のアップデートを確認しよう ￭ 「HTML（WHATWG Living Standard）」の日本語訳 • https://momdo.github.io/html/ ￭ モジュール（font, text など）ごとの策定状況 • https://www.w3.org/TR/?tag=css
28. 28 「みんなで幸せになれる会社にすること」 「今から100年続く会社にすること」