HTML/CSS

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

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

<html /> https://developer.mozilla.org/ja/docs/Web/HTML

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

HTMLの構造 <p>今日はいい天気</p> •開始タグ •終了タグ

HTMLのネスト <p>今日は<span>いい天気</span></p> •要素の終了タグの順番を守る <p>今日は<span>いい天気</p></span>

基本はこれだけ

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

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

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

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

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

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

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

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

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

<strong>Important</strong> <span style=“font-weight: bold”>Important</span> 見た目は同じだけど… 意味（マークアップ）はまったくちがう →見た目ではなく、要素・構成

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

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

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

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

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

最近のサービス

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

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

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

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

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

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

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

パフォーマンスの重要性 • 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. パフォーマンスがページのユーザーのエクスペリエンスにどのように影響するかについて広く考え、さまざまなユーザーエクスペリエンスの測定基準を検討することを開発者に推奨します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(参考) サービス機能影響への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/

今後、さらに加速していく意図していない影響については、今後代替手段が提供される 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

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

あらためてHTML

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 defer src="./assets/index.js"></script> </head> <body> <p>Hello Text</p> </body> </html>

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 defer src="./assets/index.js"></script> </head> <body> <p>Hello Text</p> </body> </html> headタグメタデータ bodyタグコンテンツ

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

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

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

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

ul.post-message-actions ショートカット button(profile-icon-button クラス) h1 button.post-movie Button.post-message header button.post-movie <button
class=“post-movie” ></button>

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

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

CSS Cascading Style Sheet

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

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

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

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

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

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

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

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

HTML/CSS

HTML/CSS

More Decks by Recruit Technologies

Other Decks in Technology

Featured

Transcript