Skip to content

Instantly share code, notes, and snippets.

@shikakun

shikakun/2017: HTML & CSS Odyssey.md

Last active October 30, 2022 14:49
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save shikakun/debcd13ef2fdbbcf5f57370b607f1047 to your computer and use it in GitHub Desktop.
Save shikakun/debcd13ef2fdbbcf5f57370b607f1047 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
2017: HTML & CSS Odyssey.md

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 と CSS の旅はいかがでしたか？

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

👉 アンケートに回答する

Raw
example_a.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>私は朝、パンを食べました。</p>
</body>
</html>
Raw
example_b.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>
Raw
example_c.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