🚀 2017 年 HTML と CSS の旅
このページは、GMO ペパボ株式会社の 2017 年新卒研修座学の資料(旅のしおり)です。
HTML と CSS の旅へようこそ!
この旅では、新卒 7 期生のみなさんといっしょに、いま HTML と CSS の世界ではいったいなにが起こっているのか、観光してみたいなあって思います。
…でも、これは旅なので、途中でもっといい道があるなーと思ったら、ぜんぜんちがう時間になってもよいと思います。旅は楽しいのがいちばん。そのために、きょうはネタをたくさん用意してきました。
この時間はみなさんの時間です。質問があったらいつでも教えてください!(もし答えられなかったら、持ち帰って調べさせてください…!)
はじめにアンケートです。
きょう、目が醒めてから、会社にきてこの時間を迎えるまで、インターネットを見ましたか?
それは、どんな場所でしたか?
ふむふむ。
それでは第 2 問です!
いまから 10 年前… 2007 年って、なにしてましたか? そのとき、どんなインターネットをしてたか覚えてますか?
1945年 ヴァネヴァー・ブッシュがマイクロフィルムをリンクするシステムを考えた
1989年 ティム・バーナーズ=リーがブラウザエディタ WorldWideWeb を開発
1993年 ウェブブラウザ Mosaic 誕生
もし Mac をご利用でしたら、じつはいますぐ、目をつむってインターネットすることができます。
- まず、 Safari を立ち上げます。
- そして、
Command
キーとF5
キーを同時に押します。 - そのあと、
Ctrl
キーとOption
キーとA
キーを同時に押します。
Mac OS X には VoiceOver という音声読み上げ機能が搭載されていて、視覚に障害を持つ方のブラウジングを体験することができるんですね。
誰がインターネットを見てるのか?
- 人間
- 性別
- 例: 男性, 女性, …
- 年齢
- 例: ご年配, 幼児, …
- ことば
- 例: 日本語, 英語, …
- 障害
- 例: 視覚, 聴覚, …
- そのほかのそれぞれ個人の違い
- 例: 性格, 好み, …
- 性別
- ロボット
- Googlebot
- Twitter, Facebook, Slack
なにを使ってインターネットを見てるのか?
- パソコン
- どんな OS を使ってるのか?
- 例: Mac, Windows, Linux, ラズベリーパイ, …
- どんなディスプレイを使ってるのか?
- 例: 液晶 24 インチ, 液晶 40 インチ, ブラウン管 17 インチ, …
- どんな OS を使ってるのか?
- スマホ
- どんな OS を使ってるのか?
- 例: iOS, Android, Firefox OS, BlackBerry, …
- どんなディスプレイを使ってるのか?
- 例: 4 インチ, 4.7 インチ, 5.5 インチ, …
- どんな OS を使ってるのか?
- 時計
- 例: Apple Watch, Android Wear, Fitbit, …
- テレビ
- 車のカーナビ
- 車の窓
- 眼鏡
- …
どうやってインターネットを見てるのか?
- 座って
- どこで座ってるのか?
- 例: 部屋のソファで, 会社の机で, 公園のベンチで, 電車の座席で, 車の助手席で, …
- どうやって座ってるのか?
- 例: 背筋をのばして, ごろごろ、だらだら, …
- どこで座ってるのか?
- 立って
- 寝転がって
- 歩きながら (だめ!)
- …
いろんな人(人に限らない) が、 いろんな場所 から、 いろんな状況 で、私たちのウェブページにやってくる!
パソコンで見た印象とスマホで見た印象は違う。パソコンはパソコンに最適な、スマホはスマホに最適なデザインがある。
📝 レスポンシブ ウェブデザインの基本 | Web | Google Developers
構造を定義するのがマークアップ、マークアップするための言語が HTML です。
見た目を定義するのがスタイル、スタイルを指定するための言語が CSS です。
@sizucca さんが制作された 2016 年度コーディング研修の資料より
<p>わたしは朝、パンを食べました。</p>
<p>私は朝、<strong>パン</strong>を食べました。</p>
<p>私は<strong>朝</strong>、パンを食べました。</p>
Google Chrome には、画像が読み込めなかったときの表示を確認する機能があります。
アドレスバーに chrome://settings/content/images
と入力して表示されるページの「すべてを表示(推奨)」のトグルボタンを OFF にして、 Yahoo! を見てみましょう。
画像がないのに、なんで 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 が間違っている場合や指定された 画像の形式 が未対応のものであった場合、または画像がダウンロード中の場合にこのテキストを表示します。
Facebook の投稿欄に URL を入力すると、ウェブページの内容がプレビューされます。
この情報はどこからやってきているのでしょうか?
<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 の書式に沿って情報が指定されています。
📝 HTML Reference - A free guide to all HTML elements and attributes.
<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>
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 の仕様を読めるサイト
( 📝 Home · momdo/momdo.github.io Wiki )
📝 ウェブ関連仕様 日本語訳 - WHATWG HTML 標準( “HTML5” )
📝 WAI-ARIA の基礎知識 — Website Usability Info
📝 2015年末におけるWAI-ARIAの今をものすごくざっくりと - 水底の血
📝 Microdata + schema.org を実際に使ってみる · terkel.jp
- Haml
- Ruby
- Slim
- Ruby
- EJS
- JavaScript
- Pug (Jade)
- JavaScript
- Smarty
- PHP
@sizucca さんが制作された 2016 年度コーディング研修の資料より
ウォーターフォールではなくイテレーション、コードが変わり続けるのがウェブサービス。
変更に耐えられるということは、いかに捨てやすいかということ。
なぜ捨てられないのか?
📝 100年後も崩れないCSS勉強会 · 第2回「コンポーネント」
- BEM (MindBEMding)
- FLOCSS
- ECSS
- LESS
- Sass (SCSS)
- cssnext (PostCSS)
- CSScomb
- stylelint
- stylefmt
- scssfmt
- Hologram
📝 Brand Style Guide Examples, Hand-picked by Saijo George
📝 おい、このスタイルガイド、生きてるぞ! Hologram と「Pepagram」ではじめるスタイルガイド入門 - ペパボテックブログ
エディタで書く
ウェブサービスで書く
- CodePen 💰 有料(無料プランあり)
- jsbin.com 💰 有料(無料プランあり)
- jsfiddle.net
- liveweave.com
- Plunker
📝 Code Editing Tools · GitBook
- Google Chrome (webkit)
- Firefox
- Firefox のアドレスバーに
resource://gre-resources/html.css
を入力してアクセス
- Firefox のアドレスバーに
* {
margin: 0;
padding: 0;
}
- 幅
375px
- 高さ
48px
- ボタンの色
#fb8c00
- テキストフォームの線の太さ
1px
- テキストフォームの線の色
#ccc
- ボタンとテキストフォームの間隔
10px
- ボタンを作ってみてください
- ボタンを枠線だけにしてみてください
- テキストフォームを作ってみてください
- iPhone でも同じ見た目にしてください
- ボタンとテキストフォームを横に並べてください
📝 https://codepen.io/shikakun/pen/xrdMae
いまペパボでは、サービスやプロジェクトによりますが、グラフィックや 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 の旅はいかがでしたか?
今後の参考のため、ぜひアンケートにご協力お願いします!