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

HTML/CSS

 HTML/CSS

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

Recruit Technologies

June 24, 2019
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

Transcript

  1. ブラウザ? • Chrome (Android, Desktop) • Internet Explorer • Safari

    (iOS, MacOS) • Firefox • ロボット(検索エンジン、クローラ) • スクリーンリーダー
  2. ブラウザとそのユーザー • Chrome (Android, Desktop) • Internet Explorer • Safari

    (iOS, MacOS) • Firefox • ロボット(検索エンジン、クローラ) • スクリーンリーダー → 様々なユーザー属性の方が、様々なデバ イス、通信環境で利用する
  3. ウェブアプリのパフォーマンス (現在) • コンテンツが表示されるまで何秒かかるか • 操作可能になるまで何秒かかるか 待ち時間の80-90%がフロントエンド → 期待する結果が得られるまでの時間 リクエスト

    レスポンス 過去10年間で モバイルページの中間値は、 ファイルサイズ:1568KB +983% 読み込み時間: 6s +25% おおきく増加している https://httparchive.org/
  4. パフォーマンスの重要性 • 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. パフォーマンスがページのユーザーのエクスペリエンスにどのように 影響するかについて広く考え、さまざまなユーザーエクスペリエンスの 測定基準を検討することを開発者に推奨します。
  5. ユーザー体験の要素 • やくにたつか • つかいやすいか • 探しやすい • 信頼できる •

    アクセスしやすい • 好ましい 参考:「The User Experience Honeycomb」 Peter Morville著
  6. • やくにたつか • つかいやすいか • 探しやすい • 信頼できる • アクセスしやすい

    • 好ましい スクロール操作性 表示速度 SEO 最適化されていない 画像、写真 低スペック端末 多様な通信環境 スクロール操作性 表示速度(TTI, FID) 参考:「The User Experience Honeycomb」 Peter Morville著 表示速度(FCP) パフォーマンスはユーザー体験を支えている ユーザー体験とパフォーマンス レスポンス返ってこない
  7. パフォーマンスの計測ツール(参 考) • Page Speed Insight 下記の CrUX と Lighthouse

    の情報をサマリでレポートするサービス • Chrome User Experience Report (CrUX) Chrome ブラウザの実際の膨大な利用データから サイト単位でパフォーマンス情報がBigQueryで公開されている • Lighthouse Chrome 上で実行できる開発機能としても提供されている ページ実行時のブラウザのパフォーマンス状態が詳細に取得できる • Web Page Test
  8. GDRP • EU一般データ保護規則(GDPR) • 2018年5月25日に施行 • 欧州議会、欧州理事会および欧州委員会が策定し た新しい個人情報保護の枠組み • IPアドレスやCookieのようなオンライン識別子

    も個人情報とみなされる。 • 企業は個人情報を取得する場合、自らの身元や連 絡先、処理の目的、第三者提供の有無、保管期間 などについてユーザーに明記し、同意を得なけれ ばならない。
  9. HTMLの構造 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport"

    content="width=device-width"> <title>Hello</title> <link rel="stylesheet" href="./assets/index.css" /> <script async src="./assets/index.js"></script> </head> <body> <p>Hello Text</p> </body> </html>
  10. HTMLの構造 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport"

    content="width=device-width"> <title>Hello</title> <link rel="stylesheet" href="./assets/index.css" /> <script async src="./assets/index.js"></script> </head> <body> <p>Hello Text</p> </body> </html> headタグ メタデータ bodyタグ コンテンツ
  11. <head></head> headタグ メタデータ bodyタグ コンテンツ • ページのメタデータ、画面に表示されない • タイトル •

    エンコーディング • ページの説明 • アイコン(faviocon) • OGP(open graph protocol)
  12. • インライン要素にブロックレベル要素を入 れることはできない • ブロックレベル要素は body タグ内のみに 存在する • CSS

    の display プロパティで変更可能 https://developer.mozilla.org/ja/docs/Web/CSS/display ブロックレベルとインライン要素
  13. CSSの目的 https://ja.wikipedia.org/wiki/Cascading_Style_Sheets headタグ メタデータ bodyタグ コンテンツ • HTML や XMLの要素をどのように修飾(表示)するかを指示する、W3Cに

    よる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に 提唱されたスタイルシートの、具体的な仕様の一つ。 • CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を 取り入れつつ、新たなデザイン機能を備える。また以下のような特徴を持つ。 • ページを表示するメディアに合わせてスタイルシートを切り替えること で、メディアごとに表示を変化させることができる。 • ユーザーエージェント(多くの場合ウェブブラウザ)、ウェブサイト制 作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる (カスケードする)ことができる。
  14. reset.css, normalize.css headタグ メタデータ bodyタグ コンテンツ • ブラウザのデフォルトスタイルをリセット → reset.css

    • ブラウザのデフォルトスタイルを活かしつつ差異 をなくす → normalize.css
  15. CSSの問題 headタグ メタデータ bodyタグ コンテンツ • 全てがグローバル • セレクタの詳細度 •

    スタイルが子要素に継承される • 同じセレクタに対してスタイルを設定できる • いろいろな場所に記述できる (cssファイル、style属性、styleタグ、JS) これらが組み合わせ可能
  16. スパイク headタグ メタデータ bodyタグ コンテンツ • XPのプラクティス • 質問や疑問に答えるための情報集め •

    より良い実現方法を探索する • 見積り精度を上げる • リスクを明らかにする → 小さく試して見立てる