HTML/CSS

HTML/CSS 20190404 bootcamp

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

ユーザー体験の要素 • やくにたつか • つかいやすいか • 探しやすい • 信頼できる •
アクセスしやすい • 好ましい参考：「The User Experience Honeycomb」 Peter Morville著

• やくにたつか • つかいやすいか • 探しやすい • 信頼できる • アクセスしやすい
• 好ましいスクロール操作性表示速度 SEO 最適化されていない画像、写真低スペック端末多様な通信環境スクロール操作性表示速度（TTI, FID）参考：「The User Experience Honeycomb」 Peter Morville著表示速度（FCP）パフォーマンスはユーザー体験を支えているユーザー体験とパフォーマンスレスポンス返ってこない

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

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

DNT（Do Not Track） • 行動追跡を拒否する宣言するhttpヘッダ • ユーザーの意思をつたえるもの • 受け取り側が従うかは強制されない →実際に従わないサービスも存在する

GDRP • EU一般データ保護規則（GDPR） • 2018年5月25日に施行 • 欧州議会、欧州理事会および欧州委員会が策定した新しい個人情報保護の枠組み • IPアドレスやCookieのようなオンライン識別子
も個人情報とみなされる。 • 企業は個人情報を取得する場合、自らの身元や連絡先、処理の目的、第三者提供の有無、保管期間などについてユーザーに明記し、同意を得なければならない。

Intelligent Tracking Prevention https://webkit.org/blog/category/privacy/ • Safari(MacOS, iOS)に実装されている • トラッキング拒否機能 •
ITP 1.0 • ITP 2.0 • ITP 2.1 • StorageAccess API

休憩

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

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

ブロックレベルとインライン要素 headタグメタデータ bodyタグコンテンツ • インライン要素コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有する •
ブロックレベル要素常に新しい行から始まり、横いっぱいに可能な限り幅をとる。

ブロックレベルとインライン要素 headタグメタデータ bodyタグコンテンツ • インライン要素コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有する <div>これは<span
style="background:yellow;">インライン要素</span>です</div>

ブロックレベルとインライン要素 headタグメタデータ bodyタグコンテンツ • ブロックレベル要素常に新しい行から始まり、横いっぱいに可能な限り幅をとる。 <div>これは<div
style="background:yellow;">インライン要素</div>です</div>

• インライン要素にブロックレベル要素を入れることはできない • ブロックレベル要素は body タグ内のみに存在する • CSS
の display プロパティで変更可能 https://developer.mozilla.org/ja/docs/Web/CSS/display ブロックレベルとインライン要素

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

各ブラウザの対応状況

昼食！みんなで行きましょう！

マシュマロ好きですか？

マシュマロチャレンジ headタグメタデータ bodyタグコンテンツ

感想教えてください

まなび headタグメタデータ bodyタグコンテンツ •振り返り •改善 •計画 •スパイク

スパイク headタグメタデータ bodyタグコンテンツ • XPのプラクティス • 質問や疑問に答えるための情報集め •
より良い実現方法を探索する • 見積り精度を上げる • リスクを明らかにする → 小さく試して見立てる

グループワーク： Facebook Messangerを HTMLで作ってみる

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

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

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

デザインを整える CSS Grid Flexbox display •Lighthouse で計測してみる •点数を改善してみる、など

HTML/CSS

HTML/CSS

More Decks by Recruit Technologies

Other Decks in Technology

Featured

Transcript