Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for chika chika
January 15, 2020

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

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

Avatar for chika

chika

January 15, 2020
Tweet

Other Decks in Programming

Transcript

  1. 2   © 2020 Ateam Inc.                     2 自己紹介

    ◧ 安井 智香 ( やすい ちか ) ◧ 前職 ■ Web制作会社に6年勤務 ◧ 業務 ■ 自社メディアのUI/UX改善 ◧ 好きなタグとプロパティ ■ dl, dt, dd ■ box-sizing
  2. 4   © 2020 Ateam Inc.                     4 今日のアジェンダ

    ◧ 1_ マークアップ知識をアップデートする理由 ◧ 2_ 今知っておきたい!HTML タグ ◧ 3_ こんなに便利!新しい CSS プロパティ ◧ 4_ HTML と CSS ってどこがアップデートしてるの?
  3. 5   © 2020 Ateam Inc.                     5 今日のアジェンダ

    ◧ 1_ マークアップ知識をアップデートする理由 ◧ 2_ 今知っておきたい!HTML タグ ◧ 3_ こんなに便利!新しい CSS プロパティ ◧ 4_ HTML と CSS ってどこがアップデートしてるの?
  4. 7   © 2020 Ateam Inc.                     7 マークアップ知識をアップデートする理由

    ◧ 知識をアップデートすると良いこと◎ ■ 技術の進化の恩恵を受けることができる • Flexbox などの新しいスタイルを覚えることで簡単・多機能に実装! ◧ 知識をアップデートしないと…× ■ 表示崩れや不具合などの温床に ■ 保守工数が増えがち
  5. 8   © 2020 Ateam Inc.                     8 今日のアジェンダ

    ◧ 1_ マークアップ知識をアップデートする理由 ◧ 2_ 今知っておきたい!HTML タグ ◧ 3_ こんなに便利!新しい CSS プロパティ ◧ 4_ HTML と CSS ってどこがアップデートしてるの?
  6. 9   © 2020 Ateam Inc.                     9 ◧

    picture 要素 ■ メディアクエリを使って画像を出し分けることが可能 • デバイスサイズ(max-width など)や解像度(Retina 対応など) 今知っておきたい!HTMLタグ(画像)
  7. 10   © 2020 Ateam Inc.                     10 今知っておきたい!HTML

    タグ(インタラクティブ) ◧ details 要素 ■ 追加の詳細情報を記載する ■ ブラウザ上は折りたたみ要素として表示される ◧ summary 要素 ■ 詳細情報の要約
  8. 11   © 2020 Ateam Inc.                     11 今知っておきたい!HTML

    タグ(インタラクティブ) ◧ details 要素 ■ 追加の詳細情報を記載する ■ ブラウザ上は折りたたみ要素として表示される ◧ summary 要素 ■ 詳細情報の要約
  9. 12   © 2020 Ateam Inc.                     12 今知っておきたい!HTML

    タグ(link) ◧ <link rel="★"> の値に canonical/alternate が追加 ■ canonical:正規ページ(主のページ) ■ alternate:重複ページ
  10. 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
  11. 14   © 2020 Ateam Inc.                     14 今日のアジェンダ

    ◧ 1_ マークアップ知識をアップデートする理由 ◧ 2_ 今知っておきたい!HTML タグ ◧ 3_ こんなに便利!新しい CSS プロパティ ◧ 4_ HTML と CSS ってどこがアップデートしてるの?
  12. 15   © 2020 Ateam Inc.                     15 こんなに便利!新しい

    CSS プロパティ(テキスト) ◧ text-overflow ■ エリアからはみ出た文字に対する扱いを設定
  13. 16   © 2020 Ateam Inc.                     16 こんなに便利!新しい

    CSS プロパティ(テキスト) ◧ font-feauture-settings ■ 自動文字詰め(カーニング)
  14. 17   © 2020 Ateam Inc.                     17 こんなに便利!新しい

    CSS プロパティ(画像) ◧ object-fit ■ 画像などをボックス内にどのように表示させるかの設定 縦横のうち小さい方を基準にして自動的に 拡大・縮小、 はみ出た部分はトリミング 縦横のうち大きい方を基準にして自動的に 拡大・縮小、 足りない部分は余白を表示
  15. 18   © 2020 Ateam Inc.                     18 こんなに便利!新しい

    CSS プロパティ(画像) ◧ object-fit ■ 画像などをボックス内にどのように表示させるかの設定
  16. 19   © 2020 Ateam Inc.                     19 こんなに便利!新しい

    CSS プロパティ(レイアウト) ◧ column-count ■ 文章の段組レイアウト ◧ display: flex ■ 横方向の多機能レイアウト ◧ display: grid ■ 縦・横方向の多機能レイアウト ■ Gridレイアウトを覚えるゲーム(Grid Garden)https://cssgridgarden.com/#ja
  17. 20   © 2020 Ateam Inc.                     20 今日のアジェンダ

    ◧ 1_ マークアップ知識をアップデートする理由 ◧ 2_ 今知っておきたい!HTML タグ ◧ 3_ こんなに便利!新しい CSS プロパティ ◧ 4_ HTML と CSS ってどこがアップデートしてるの?
  18. 22   © 2020 Ateam Inc.                     22 マークアップってどこがアップデートしてるの?(

    HTML) ◧ HTML の管理:WHATWG ◧ 「HTML(WHATWG Living Standard)」の日本語訳 ■ https://momdo.github.io/html/
  19. 23   © 2020 Ateam Inc.                     23 マークアップってどこがアップデートしてるの?(

    CSS) ◧ CSS の管理:W3C ◧ モジュール(font, text など)ごとの策定状況 ■ https://www.w3.org/TR/?tag=css
  20. 24   © 2020 Ateam Inc.                     24 マークアップってどこがアップデートしてるの?(

    CSS) ◧ 1. WD(Working Drafts) – 草案 ◧ 2. CR(Candidate Recommendation) – 勧告候補 ◧ 3. PR(Proposed Recommendation)– 勧告案 ◧ 4. REC(Recommendation)– 勧告 ◧ W3C は「CR(勧告候補)」を使うことを推奨 ■ しかし「CR」の状態でも主要ブラウザが未対応の場合も…
  21. 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/
  22. 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