Tweet
Tweet

Slide 1

Slide 1 text

HTML/CSS 20190404 bootcamp

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

今日のながれ 1. 午前：HTML/CSS 概要 2. 午後：実際にコーディングする

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

HTMLの構造

今日はいい天気

•開始タグ •終了タグ

Slide 7

Slide 7 text

HTMLのネスト

今日はいい天気

•要素の終了タグの順番を守る

今日はいい天気

Slide 8

Slide 8 text

基本はこれだけ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

最近のサービス

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

休憩

Slide 46

Slide 46 text

あらためてHTML

Slide 47

Slide 47 text

HTMLの構造 Hello

Hello Text

Slide 48

Slide 48 text

HTMLの構造 Hello

Hello Text

headタグ メタデータ bodyタグ コンテンツ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

CSS Cascading Style Sheet

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

各ブラウザの対応状況

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

マシュマロ好きですか？

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

感想教えてください

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

No content