Instantly share code, notes, and snippets.

Embed
What would you like to do?

2017: HTML & CSS Odyssey

🚀 2017 年 HTML と CSS の旅

このページは、GMO ペパボ株式会社の 2017 年新卒研修座学の資料(旅のしおり)です。

📕 Chapter 1: プロローグ

📗 Chapter 2: HTML

📘 Chapter 3: CSS

📙 Chapter 4: 書いてみよう

📒 Chapter 5: エピローグ


プロローグ

こんにちは!

HTML と CSS の旅へようこそ!

この旅では、新卒 7 期生のみなさんといっしょに、いま HTML と CSS の世界ではいったいなにが起こっているのか、観光してみたいなあって思います。

…でも、これは旅なので、途中でもっといい道があるなーと思ったら、ぜんぜんちがう時間になってもよいと思います。旅は楽しいのがいちばん。そのために、きょうはネタをたくさん用意してきました。

この時間はみなさんの時間です。質問があったらいつでも教えてください!(もし答えられなかったら、持ち帰って調べさせてください…!)

インターネットたちのいるところ

はじめにアンケートです。

きょう、目が醒めてから、会社にきてこの時間を迎えるまで、インターネットを見ましたか?

それは、どんな場所でしたか?

ふむふむ。

それでは第 2 問です!

いまから 10 年前… 2007 年って、なにしてましたか? そのとき、どんなインターネットをしてたか覚えてますか?

📝 2007年の日本 - Wikipedia

70 年前のインターネット

image

神崎正英「ユニバーサルHTML/XHTML」4ページより

1945年 ヴァネヴァー・ブッシュがマイクロフィルムをリンクするシステムを考えた

1989年 ティム・バーナーズ=リーがブラウザエディタ WorldWideWeb を開発

1993年 ウェブブラウザ Mosaic 誕生

突然ですが、目をつむってインターネットしたことがありますか?

もし Mac をご利用でしたら、じつはいますぐ、目をつむってインターネットすることができます。

  1. まず、 Safari を立ち上げます。
  2. そして、 Command キーと F5 キーを同時に押します。
  3. そのあと、 Ctrl キーと Option キーと A キーを同時に押します。

Mac OS X には VoiceOver という音声読み上げ機能が搭載されていて、視覚に障害を持つ方のブラウジングを体験することができるんですね。

誰のためのインターネット?

誰がインターネットを見てるのか?

  • 人間
    • 性別
      • 例: 男性, 女性, …
    • å¹´é½¢
      • 例: ご年配, 幼児, …
    • ことば
      • 例: 日本語, 英語, …
    • 障害
      • 例: 視覚, 聴覚, …
    • そのほかのそれぞれ個人の違い
      • 例: 性格, 好み, …
  • ロボット
    • Googlebot
    • Twitter, Facebook, Slack

なにを使ってインターネットを見てるのか?

  • パソコン
    • どんな OS を使ってるのか?
      • 例: Mac, Windows, Linux, ラズベリーパイ, …
    • どんなディスプレイを使ってるのか?
      • 例: 液晶 24 インチ, 液晶 40 インチ, ブラウン管 17 インチ, …
  • スマホ
    • どんな OS を使ってるのか?
      • 例: iOS, Android, Firefox OS, BlackBerry, …
    • どんなディスプレイを使ってるのか?
      • 例: 4 インチ, 4.7 インチ, 5.5 インチ, …
  • 時計
    • 例: Apple Watch, Android Wear, Fitbit, …
  • テレビ
  • 車のカーナビ
  • 車の窓
  • 眼鏡
  • …

どうやってインターネットを見てるのか?

  • 座って
    • どこで座ってるのか?
      • 例: 部屋のソファで, 会社の机で, 公園のベンチで, 電車の座席で, 車の助手席で, …
    • どうやって座ってるのか?
      • 例: 背筋をのばして, ごろごろ、だらだら, …
  • 立って
  • 寝転がって
  • 歩きながら (だめ!)
  • …

いろんな人(人に限らない) が、 いろんな場所 から、 いろんな状況 で、私たちのウェブページにやってくる!

image image

パソコンで見た印象とスマホで見た印象は違う。パソコンはパソコンに最適な、スマホはスマホに最適なデザインがある。

📝 レスポンシブ ウェブデザインの基本 | Web | Google Developers

インターネットのことば

構造を定義するのがマークアップ、マークアップするための言語が HTML です。

見た目を定義するのがスタイル、スタイルを指定するための言語が CSS です。


HTML

名前の紹介

image
image
image
image

@sizucca さんが制作された 2016 年度コーディング研修の資料より

マークアップで表現する

<p>わたしは朝、パンを食べました。</p>
<p>私は朝、<strong>パン</strong>を食べました。</p>
<p>私は<strong>朝</strong>、パンを食べました。</p>

📝 HTML 概論 - HTML | MDN

情報たちのいるところ

Google Chrome には、画像が読み込めなかったときの表示を確認する機能があります。

アドレスバーに chrome://settings/content/images と入力して表示されるページの「すべてを表示(推奨)」のトグルボタンを OFF にして、 Yahoo! を見てみましょう。

📝 Yahoo! JAPAN

image

画像がないのに、なんで Yahoo! JAPAN って書いてあるんだろう?

<img src="https://s.yimg.jp/images/top/sp2/cmn/logo-170307.png" alt="Yahoo! JAPAN" height="55" width="213">

Yahoo! のソースコードを見ると、 alt 属性に「Yahoo! JAPAN」って書いてある。

alt

この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合や指定された 画像の形式 が未対応のものであった場合、または画像がダウンロード中の場合にこのテキストを表示します。

📝 img - HTML | MDN


Facebook の投稿欄に URL を入力すると、ウェブページの内容がプレビューされます。

image

この情報はどこからやってきているのでしょうか?

<meta property="og:title" content="Yahoo! JAPAN">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.yahoo.co.jp/">
<meta property="og:image" content="https://s.yimg.jp/images/top/ogp/fb_y_1500px.png">
<meta property="og:description" content="日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決エンジン」を目指していきます。">
<meta property="og:site_name" content="Yahoo! JAPAN">

Yahoo! のソースコードを見ると、 Open Graph protocol の書式に沿って情報が指定されています。

📝 The Open Graph protocol

HTML の話をしよう

「タグ」にはどんな種類があるの?

📝 HTML Reference - A free guide to all HTML elements and attributes.

📝 HTML5リファレンス

DOCTYPE

<br> と <br />

HTML 4.01<br>
XHTML 1.0<br />
HTML5<br> でも <br /> でもどっちでもいい
  • HTML 4.01
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • HTML5
    • <!DOCTYPE html>

W3C と WHATWG

HTML の仕様を決めてる団体は 2 つ。いま HTML の仕様は 2 つある状態!

W3C HTML と WHATWG HTML Living Standard

  • 1999å¹´ W3C が HTML4.01 勧告
  • 2004å¹´ Apple, Mozilla, Opera の 3 社で WHATWG 設立
  • 2012å¹´ W3C と WHATWG がケンカ別れ…
  • 2014å¹´ W3C が HTML5 勧告、 WHATWG は開発を継続

で、どっちを見たらいいの…?

毎日のようにHTMLが更新され続けています。当面は勢いのあるHTML Living Standardを参照するようにしてはいかがでしょうか

W3Cのは『欠陥フォーク』!? HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート | HTML5Experts.jp

日本語訳で HTML の仕様を読めるサイト

📝 HTML Standard 日本語訳

( 📝 Home · momdo/momdo.github.io Wiki )

📝 ウェブ関連仕様 日本語訳 - WHATWG HTML 標準( “HTML5” )

マークアップの話をしよう

WAI-ARIA

📝 WAI-ARIA の基礎知識 — Website Usability Info

📝 2015年末におけるWAI-ARIAの今をものすごくざっくりと - 水底の血

Microdata + schema.org

📝 Microdata + schema.org を実際に使ってみる · terkel.jp

テンプレートエンジンの話をしよう


CSS

名前の紹介

image

@sizucca さんが制作された 2016 年度コーディング研修の資料より

📝 構文 - CSS | MDN

カラーミーショップの CSS を見てみよう

📝 https://shop-pro.jp/

ウェブサービスの開発には終わりがない

image

谷拓樹「Web制作者のためのCSS設計の教科書」21ページより

ウォーターフォールではなくイテレーション、コードが変わり続けるのがウェブサービス。

変更に耐えられるということは、いかに捨てやすいかということ。

なぜ捨てられないのか?

詳細度とカスケード

📝 100年後も崩れないCSS勉強会 · 第1回「詳細度」

コンポーネント

📝 100年後も崩れないCSS勉強会 · 第2回「コンポーネント」

CSS 設計

2017 年の CSS

プリプロセッサ

ベンダープレフィックス

コードをきれいに保つ

  • CSScomb
  • stylelint
  • stylefmt
  • scssfmt

スタイルガイド

  • Hologram

📝 Brand Style Guide Examples, Hand-picked by Saijo George

📝 おい、このスタイルガイド、生きてるぞ! Hologram と「Pepagram」ではじめるスタイルガイド入門 - ペパボテックブログ


書いてみよう

なにで書く?

エディタで書く

ウェブサービスで書く

📝 Code Editing Tools · GitBook

user agent stylesheet

image

* {
  margin: 0;
  padding: 0;
}

書いてみよう!

image
  • 幅 375px
  • 高さ 48px
  • ボタンの色 #fb8c00
  • テキストフォームの線の太さ 1px
  • テキストフォームの線の色 #ccc
  • ボタンとテキストフォームの間隔 10px

👉 https://codepen.io/pen

ボタン

  1. ボタンを作ってみてください
  2. ボタンを枠線だけにしてみてください

image

テキストフォーム

  1. テキストフォームを作ってみてください
  2. iPhone でも同じ見た目にしてください

検索フォーム

  1. ボタンとテキストフォームを横に並べてください

📝 https://codepen.io/shikakun/pen/xrdMae


エピローグ

デザイン vs コーディング

いまペパボでは、サービスやプロジェクトによりますが、グラフィックや UI の案を提案して、 HTML と CSS を書いて形にするところまで、デザイナーの仕事として捉えられています。

ペパボ以外のウェブの制作会社・事業会社では、デザイナーの仕事はもっと細分化されていて、グラフィックや UI の案を考えるデザイナーと、その実装を担当するフロントエンドエンジニア、といったように職種が分かれていることも珍しくありません。それは、高いユーザー体験を提供するために求められるフロントエンドの技術の要件と、それを実現するために必要な知識がどんどん高度になっている… という背景もあると思います。

📝 昔ながらの「片手間に書くJavaScript」の限界 - mizchi's blog

「(グラフィックや UI の)デザイン」と「(HTML や CSS の)コーディング」は、別のものなのでしょうか?

HTML は構造を、 CSS は見た目を定義することばです。僕は、それらのことばは、情報を整理して、インターネットのむこうにいる人へ伝わるものにするためにある、と考えています。その目的は、「(グラフィックや UI の)デザイン」と同じだと思います。

HTML や CSS の仕様は、これまでたくさんのウェブページに登場してきた、デザインのパターンの集大成なのではないでしょうか。 HTML や CSS だけではなく、どんな言語でも、自分たちのウェブサービスを動かしている技術・仕様に触れると、「(グラフィックや UI の)デザイン」で考えられる射程も広がるように思います。

おすすめ

📗 本

🌏 ウェブサイト

  • HTML 要素リファレンス - HTML | MDN
  • CSS リファレンス - CSS | MDN
    • なんとなく信頼を置いている MDN (Mpzilla Developer Network) 。 Google 検索結果に MDN があったらどのページよりも先に見ます。
  • HTML Reference - A free guide to all HTML elements and attributes.
  • CSS Reference - A free visual guide to CSS
    • HTML 要素と CSS のプロパティが一覧になって、 Command + F キーで調べやすいきれいなサイト。
  • hail2u/html-best-practices: For writing maintainable and scalable HTML documents
    • HTML の「正しい」記法がまとまっているドキュメント。まとめてる人の個人的な趣味もちょっとあるかも…? でも、とても参考になります。
  • CodeGrid - フロントエンドに関わる人々のガイド
    • おもにフロントエンドの技術を紹介してくれる月額 800 円の有料メールマガジン。 z-index の仕様について話しつづけるみたいな渋い連載があっておもしろいです。
  • Bootstrap · The most popular HTML, CSS, and JS framework in the world.
    • 世界でいちばん使われている (?) CSS フレームワークの Twitter Bootstrap で現在開発されている最新バージョン。あらゆる開発者の集合知が結集していて、コードもドキュメントも参考になります。
  • Introduction - Material design - Material design guidelines
    • Google の Material Design のガイドライン。コンポーネントの名前や形が参考になるのでよく見ます。
  • W3C CSS Module 仕様書もくもく会@東京 - connpass
    • 集まって W3C の CSS Module の仕様書を読みながらおしゃべりする会。怖くてリアル会場には行ったことないけど、 Slack でリモート参加もできます。
  • Frontrend powered by CyberAgent, Inc.
    • サイバーエージェントのフロントエンドエンジニアたちが主催していた伝説 (?) のイベント。そのころの人たちは辞めちゃったけど、最近また復活してたまに開催してるので要チェックです。
  • 目が見えなくてもスト2はできる。全盲ゲーマーと対戦! - connpass
    • アクセシビリティキャンプ東京という団体が主催するイベントでは、視覚に障害をもった当事者の方が話されていて貴重な話が聞けます。
  • Website Usability Info
    • ユーザビリティ・アクセシビリティに関する情報のブログ。
  • Hail2u
  • terkel.jp
    • 海外で話題になった記事を翻訳してくれています。

おかえりなさい!

HTML と CSS の旅はいかがでしたか?

今後の参考のため、ぜひアンケートにご協力お願いします!

👉 アンケートに回答する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>私は朝、パンを食べました。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>私は朝、<strong>パン</strong>を食べました。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>私は<strong>朝</strong>、パンを食べました。</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment