HTML/CSS

2020年度リクルート新人ブートキャンプ エンジニアコースの講義資料です

Transcript

1. HTML/CSS
   

   View Slide

2. 今日のゴール
   HTML/CSSの基本・概要を理解して、
   自分で調べられるようになる。
   

   View Slide

3. 今日のながれ
   1. 午前：HTML/CSS 概要
   2. 午後：ワークショップ
   

   View Slide

4. View Slide

5. HTMLとは
   https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started
   1. Hypertext Markup Language
   2. プログラミング言語ではない
   3. ウェブサイトの構成をブラウザに対して伝え
   る
   4. コンテンツをタグで囲むことで意味づけする
   → マークアップする
   

   View Slide

6. HTMLの構造
   今日はいい天気
   •開始タグ
   •終了タグ
   

   View Slide

7. HTMLのネスト
   今日はいい天気
   •要素の終了タグの順番を守る
   今日はいい天気
   

   View Slide

8. 基本はこれだけ
   

   View Slide

9. 質問：
   なぜマークアップするの？
   

   View Slide

10. なぜマークアップするの？
    ウェブサイトの構成をブラウザに対
    して伝える
    → コンテンツをユーザーに伝える
    

    View Slide

11. ブラウザ？
    • Chrome (Android, Desktop)
    • Internet Explorer
    • Safari (iOS, MacOS)
    • Firefox
    あとは？
    

    View Slide

12. ブラウザ？
    • Chrome (Android, Desktop)
    • Internet Explorer
    • Safari (iOS, MacOS)
    • Firefox
    • ロボット（検索エンジン、クローラ）
    • スクリーンリーダー
    

    View Slide

13. ブラウザとそのユーザー
    • Chrome (Android, Desktop)
    • Internet Explorer
    • Safari (iOS, MacOS)
    • Firefox
    • ロボット（検索エンジン、クローラ）
    • スクリーンリーダー
    → 様々なユーザー属性の方が、様々なデバ
    イス、通信環境で利用する
    

    View Slide

14. ユーザー属性
    • 若年層〜高齢層〜ハンディキャップも
    • 認識や視力などの能力にばらつき
    デバイス
    • 最新端末〜古い端末
    • 性能にばらつき
    通信環境
    • モバイル〜デスクトップ
    • 通信速度にばらつき
    

    View Slide

15. なぜマークアップするの？
    コンテンツをユーザーに伝える
    → アクセシビリティ
    • 情報の再利用
    • マシンリーダブル
    

    View Slide

16. ブラウザが解釈できるようにコンテン
    ツを適切に構造化すること
    →セマンティクス
    マークアップすること
    

    View Slide

17. View Slide

18. Important
    Important
    見た目は同じだけど…
    

    View Slide

19. Important
    bold”>Important
    見た目は同じだけど…
    意味（マークアップ）はまったくちがう
    →見た目ではなく、要素・構成
    

    View Slide

20. (参考) クローラのアクセス
    メディアによってはクローラのアク
    セスは無視できない量になっている
    → robots.txt で制御しきれない
    

    View Slide

21. (参考) 画像の alt 属性
    画像の読み込み失敗や、クローラーボット、また
    はスクリーンリーダーからアクセスしたときなど
    に画像コンテンツの代替になる文字。
    画像が使用できない場合にのみ使用される
    
    

    View Slide

22. (参考) 画像の alt 属性
    すべての画像に alt 属性は必要だが、常にテキスト
    が必要とは限らない。
    • 重要な画像には内容を説明する alt 属性を指定
    • 装飾的な画像にはalt=“” を指定する。
    

    View Slide

23. WEBは複雑に、用途もひろがる
    

    View Slide

24. リクルート初期のサービス
    

    View Slide

25. 最近のサービス
    

    View Slide

26. HTML5
    https://ja.wikipedia.org/wiki/HTML5
    • ウェブアプリケーションのプラットフォーム
    • さまざまな機能追加
    • マルチメディア要素（動画、音声）
    

    View Slide

27. Webアプリケーション
    • 主な目的が閲覧から操作へ
    • 価値が情報の取得から課題の解決へ
    https://ja.wikipedia.org/wiki/HTML5
    

    View Slide

28. Webアプリケーションでの
    HTMLの役割
    • UI: ユーザーインターフェース を担う
    • アプリケーションとのやりとり
    • 様々なユーザー
    • 様々なデバイス
    • 様々な通信環境
    → パフォーマンスの重要性
    

    View Slide

29. モバイルユーザーが重視するもの
    2017年のGoogle の調査報告：
    https://www.awwwards.com/brainfood-mobile-performance-vol3.pdf
    

    View Slide

30. ウェブアプリのパフォーマンス
    (これまで)
    • サーバからの何秒でコンテンツを返せるか
    • 秒間にいくつのリクエストを扱えるか
    リクエスト
    レスポンス
    

    View Slide

31. ウェブアプリのパフォーマンス
    (これまで)
    • サーバからの何秒でコンテンツを返せるか
    • 秒間にいくつのリクエストを扱えるか
    リクエスト
    レスポンス
    

    View Slide

32. ウェブアプリのパフォーマンス
    (これまで)
    • サーバからの何秒でコンテンツを返せるか
    • 秒間にいくつのリクエストを扱えるか
    リクエスト
    レスポンス
    

    View Slide

33. ウェブアプリのパフォーマンス
    (これまで)
    • サーバからの何秒でコンテンツを返せるか
    • 秒間にいくつのリクエストを扱えるか
    リクエスト
    レスポンス
    

    View Slide

34. ウェブアプリのパフォーマンス
    (現在)
    • コンテンツが表示されるまで何秒かかるか
    • 操作可能になるまで何秒かかるか
    待ち時間の80-90%がフロントエンド
    → 期待する結果が得られるまでの時間
    リクエスト
    レスポンス
    

    View Slide

35. ウェブアプリのパフォーマンス
    (現在)
    • コンテンツが表示されるまで何秒かかるか
    • 操作可能になるまで何秒かかるか
    待ち時間の80-90%がフロントエンド
    → 期待する結果が得られるまでの時間
    リクエスト
    レスポンス
    過去10年間で
    モバイルページの中間値は、
    ファイルサイズ：1568KB +983%
    読み込み時間： 6s +25%
    おおきく増加している
    https://httparchive.org/
    

    View Slide

36. パフォーマンスの重要性
    • 2018/07 Google の SpeedUpdate
    “Using page speed in mobile search ranking”
    https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
    ページの速度 をモバイルの検索順位に使用する
    We encourage developers to think broadly about how performance
    affects a user’s experience of their page and to consider a variety
    of user experience metrics.
    パフォーマンスがページのユーザーのエクスペリエンスにどのように
    影響するかについて広く考え、さまざまなユーザーエクスペリエンスの
    測定基準を検討することを開発者に推奨します。
    

    View Slide

37. https://developers.google.com/web/fundamentals/performance/rail
    参考
    

    View Slide

38. パフォーマンスの計測ツール（参
    考）
    • Page Speed Insight
    下記の CrUX と Lighthouse の情報をサマリでレポートするサービス
    • Chrome User Experience Report (CrUX)
    Chrome ブラウザの実際の膨大な利用データから
    サイト単位でパフォーマンス情報がBigQueryで公開されている
    • Lighthouse
    Chrome 上で実行できる開発機能としても提供されている
    ページ実行時のブラウザのパフォーマンス状態が詳細に取得できる
    • Web Page Test
    

    View Slide

39. ITP2.1
    Mixed
    Contents
    Same Site
    Cookie
    Cookie規制
    ガイドライン
    ITP2.2
    ITP2.3
    MFI
    UA固定
    Speed
    Update
    最近よく聞く、、
    

    View Slide

40. ITP2.1
    Mixed
    Contents
    Same Site
    Cookie
    Cookie規制
    ガイドライン
    ITP2.2
    ITP2.3
    MFI
    Flash
    サポート停止
    Speed
    Update
    SEO
    SEO
    ブラウザ
    ブラウザ
    ブラウザ
    法規制
    SEO
    ブラウザ
    ブラウザ
    最近よく聞く、、
    

    View Slide

41. 最近、Webというプラットフォームまわりの
    アップデートについて話題が多い。
    業界的にも高い関心が集まっている。
    

    View Slide

42. Webというプラットフォームの構成要素
    • OS：iOS, iPadOS, Android, Windows, Mac,
    • ブラウザ：Chrome, Safari(Webkit), Firefox, Edge, IE
    • ITプラットフォーマー：Google, Apple, Microsoft, など
    • ほかにも、検索(SEO)、Web自体の仕様など
    → Webサービスの収益に直接的に影響する
    ような破壊的な変更が増えている
    

    View Slide

43. プライバシー保護
    • ユーザートラッキング広告
    • 多くのユーザー情報を取得可能な問題
    • トラッキングされる情報の種類や、その利用方法
    などに関する明確な基準がない
    • 情報収集の方法も不透明
    • 現在の仕組みや法律では、ユーザーの意図しない
    形でそれらの情報が利用されることを防止できな
    い
    

    View Slide

44. プライバシー保護のグローバルな動き
    • GDPR（EU）：2018年施行
    • CCPA（米国）：2020年施行
    • 公取委 Cookie規制ガイドライン案：2019年発表
    • ePrivacy規則（EU）：検討中
    自分の個人データをコントロールする権利を保障する目的
    ePrivacy規則：
    主にcookieなどによる個人の行動トラッキングを規制する内容まで踏み込んでいる。
    

    View Slide

45. 個人の行動トラッキング
    • ユーザー操作、流入経路などを可視化・分析する
    例）
    • アクセス解析
    • コンバージョン計測
    • リターゲティング
    → たとえば、複数のサイトをまたがって計測する
    クロスサイトトラッキングが問題になっている
    

    View Slide

46. クロスサイトトラッキングの問題
    サイト1 広告基盤など
    Aさん
    

    View Slide

47. クロスサイトトラッキングの問題
    Aさん 広告基盤など
    閲覧 送信
    Aさん：サイト1：閲覧
    サイト1
    

    View Slide

48. クロスサイトトラッキングの問題
    広告基盤など
    カート 送信
    Aさん
    Aさん：サイト1：閲覧
    Aさん：サイト1：カート
    サイト1
    

    View Slide

49. クロスサイトトラッキングの問題
    広告基盤など
    CV 送信
    Aさん
    Aさん：サイト1：閲覧
    Aさん：サイト1：カート
    Aさん：サイト1：CV
    サイト1
    

    View Slide

50. Aさん：サイト1：閲覧
    Aさん：サイト1：カート
    Aさん：サイト1：CV
    Aさん：サイト2：閲覧
    クロスサイトトラッキングの問題
    Aさん 広告基盤など
    閲覧 送信
    サイト2
    

    View Slide

51. クロスサイトトラッキングの問題
    広告基盤など
    カート 送信
    Aさん サイト2
    Aさん：サイト1：閲覧
    Aさん：サイト1：カート
    Aさん：サイト1：CV
    Aさん：サイト2：閲覧
    Aさん：サイト2：カート
    

    View Slide

52. クロスサイトトラッキングの問題
    広告基盤など
    CV 送信
    Aさん サイト2
    Aさん：サイト1：閲覧
    Aさん：サイト1：カート
    Aさん：サイト1：CV
    Aさん：サイト2：閲覧
    Aさん：サイト2：カート
    Aさん：サイト2：CV
    

    View Slide

53. クロスサイトトラッキングの問題
    • サービス・サイトをまたがって全く別の場所の行動を紐づけ可能
    >> 本来の目的での必要分を超えて情報が収集できてしまう
    >> その情報の管理は収集者に委ねられている
    >> ユーザーはコントロールできていない
    

    View Slide

54. ブラウザベンダーの動き
    • クロスサイトトラッキングを制限する方向
    • ユーザーの識別に利用される機能、情報利用の制限
    （Cookie、Referrer、ブラウザストレージなど利用が対象）
    → 破壊的な変更(ITP, Same Site Cookieなど)になり、
    副作用としてサイトの機能不全が多発。
    

    View Slide

55. 副作用の例
    • 広告のパーソナライズ
    • 効果測定
    • セッション管理
    • ユーザー情報保存
    • アクセス解析
    • 外部ASP機能
    • ABテスト
    (Googleの試算では、50%収益減)
    https://www.youtube.com/watch?v=WnCKlNE52tc&list=PLNYkxOF6
    rcIDA1uGhqy45bqlul0VcvKMr&index=17&t=0s
    

    View Slide

56. (参考) サービス機能影響へのWebkitの声明
    以下は、意図しない副作用と説明されている
    • Funding websites using targeted or personalized advertising (see Private Click Measurement below).
    • Measuring the effectiveness of advertising. （広告の効果計測）
    • Federated login using a third-party login provider.（ログインIDプロバイダー）
    • Single sign-on to multiple websites controlled by the same organization. （SSO）
    • Embedded media that uses the user’s identity to respect their preferences.
    • “Like” buttons, federated comments, or other social widgets.（ソーシャルWidget）
    • Fraud prevention.（不正防止）
    • Bot detection.（ボット検知）
    • Improving the security of client authentication.（クライアント認証のセキュリティ向上）
    • Analytics in the scope of a single website. （単一サイトでのアクセス解析）
    • Audience measurement.
    https://webkit.org/tracking-prevention-policy/
    

    View Slide

57. 今後、さらに加速していく
    意図していない影響については、今後代替手段が提供される
    Google, Apple は標準化に向けて協働している
    • Privacy Sandbox API
    • Privacy Preserving Ad Click Attribution
    Google は
    2年を目標に段階的なクロスオリジンCookie廃止
    をアナウンス
    → Webに関わる仕様の変更も起きてきている
    https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html
    

    View Slide

58. Webに関わる仕様の変更が起きている
    ↓
    サービスはもちろん影響を受けるし、
    HTMLの仕様の追加・変更も起きている
    

    View Slide

59. あらためてHTML
    

    View Slide

60. HTMLの構造
    
    
    
    
    
    Hello
    
    
    
    
    Hello Text
    
    
    

    View Slide

61. HTMLの構造
    
    
    
    
    
    Hello
    
    
    
    
    Hello Text
    
    
    headタグ
    メタデータ
    bodyタグ
    コンテンツ
    

    View Slide

62. 
    headタグ
    メタデータ
    bodyタグ
    コンテンツ
    • ページのメタデータ、画面に表示されない
    • タイトル
    • エンコーディング
    • ページの説明
    • アイコン（faviocon）
    • OGP(open graph protocol)
    

    View Slide

63. マークアップしてみよう
    知っているタグでやってみましょう。
    ここからは各自PCで。
    早く終わった人はグループ内で困っ
    ている人がいたら助けてあげてくだ
    さい。
    

    View Slide

64. 流れ：
    1. ペーパーコーディング
    2. マークアップ（HTML作成）
    3. デザインを整える（CSS作成）
    

    View Slide

65. ペーパーコーディング
    •(重要)全員で１つの構成をつくって
    いく
    •コードを書く前にざっくり設計する
    •まずは大まかに要素わけ
    •ヘッダー、ナビゲーション、新規追
    加など役割を明らかにする
    •繰り返すもの
    •共通なもの
    

    View Slide

66. ul.post-message-actions
    ショートカット
    button(profile-icon-button クラス) h1 button.post-movie Button.post-message
    header
    button.post-movie
    
    

    View Slide

67. タグの例
    • html, head, body, meta, script, link
    • header
    • main
    • nav
    • ol, ul, li
    • div
    • span
    • button
    • a
    • img
    

    View Slide

68. HTMLのデバッグ
    headタグ
    メタデータ
    bodyタグ
    コンテンツ
    • 「Cmd+opt+u」で ソースを表示
    • 「Cmd+opt+i」で Chrome devtools を開く
    Source > 左ペインからドキュメントを選択
    

    View Slide

69. CSS
    Cascading Style Sheet
    

    View Slide

70. CSSの目的
    https://ja.wikipedia.org/wiki/Cascading_Style_Sheets
    headタグ
    メタデータ
    bodyタグ
    コンテンツ
    • HTML や XMLの要素をどのように修飾（表示）するかを指示する、W3Cに
    よる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に
    提唱されたスタイルシートの、具体的な仕様の一つ。
    • CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を
    取り入れつつ、新たなデザイン機能を備える。また以下のような特徴を持つ。
    • ページを表示するメディアに合わせてスタイルシートを切り替えること
    で、メディアごとに表示を変化させることができる。
    • ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制
    作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる
    （カスケードする）ことができる。
    

    View Slide

71. View Slide

72. View Slide

73. reset.css, normalize.css
    headタグ
    メタデータ
    bodyタグ
    コンテンツ
    • ブラウザのデフォルトスタイルをリセット
    → reset.css
    • ブラウザのデフォルトスタイルを活かしつつ差異
    をなくす
    → normalize.css
    

    View Slide

74. CSSの問題
    headタグ
    メタデータ
    bodyタグ
    コンテンツ
    • 全てがグローバル
    • セレクタの詳細度
    • スタイルが子要素に継承される
    • 同じセレクタに対してスタイルを設定できる
    • いろいろな場所に記述できる
    (cssファイル、style属性、styleタグ、JS)
    これらが組み合わせ可能
    

    View Slide

75. (参考)セレクタの詳細度
    https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
    headタグ
    メタデータ
    bodyタグ
    コンテンツ
    

    View Slide

76. • BEM
    • OOCSS
    • FLOCSS
    • ITCSS
    • Atomic Design
    設計で対処
    

    View Slide

77. BEM: Block Element Modifier
    BEMの例
    ルール化することでCSSの問題を回避しようとする
    

    View Slide

78. • ブラウザのネイティブ実装
    • カスタム要素を定義できる
    • HTMLテンプレート
    • ShadowDOM
    • 要素に閉じたスタイルを定義できる
    • 記述したスタイルの影響をコントロール可能
    WebComponents
    

    View Slide

79. 各ブラウザの対応状況
    https://caniuse.com/#search=shadow%20dom
    

    View Slide