LoginSignup
29
28

More than 5 years have passed since last update.

@ag3_product(Sekiya Eiji)

マークアップ講座 Part1 プロローグ 〜 HTML

Last updated at Posted at 2014-09-22

Webをとりまく環境

UXデザイン、Web開発トレンド概要

  • UI、UX、UCD

  • デバイス

  • パフォーマンス

Webインタフェイス三要素 UI、UX、UCD

  • UI ： 使い勝手

  • UX ： 体験

  • UCD ： ユーザー中心設計
    　

UIとUXの違い

『The Difference Between UX and UI』
http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal
　

UI

  • 押下しやすいカートボタン

  • タッチUI 44px以上（Apple）

UX

  • いい買い物ができた

  • また利用したいと思った

UCD

  • ボタンUI

　［送信］［登録］
　　▽
　［カートに入れる］
　［確認画面にすすむ］
　［プロフィールを変更する］

  • 構成、サイトマップ

　この行為の次に表示されるべきページはどれか

デバイス

情報端末

  • PC

  • SP

  • TB
    　

デバイス最適化の現状

  • PCサイト

  • レスポンシブ

  • SP-1st レスポンシブ

  • SPサイト

  • 各デバイス最適化
    　

PCサイト

http://www.apple.com/
　

レスポンシブ

http://www.microsoft.com/
　

SP-1st レスポンシブ

http://instagram.com/
http://note.mu/
　

SPサイト

http://the575.jp/
https://lp500.liptonchilled.com/flavor_voting/
　

各デバイス最適化

http://www.yahoo.com/
　

レスポンシブ選択の判断基準

  • コンテンツ内容、量が全デバイスで統一できる

  • パフォーマンスが問われない

  • 活字、読み物主体でマルチデバイスのメリットが高い

  • デザイン、構成、サービス要件をシンプルにまとめることができる

  • 更新頻度が比較的低い
    　

パフォーマンス

  • UX、UCD観点において最重要項目

  • スマホ3G回線でストレスなく閲覧
    　

フロントエンドエンジニア（マークアップエンジニア）技術

HTML、CSS、JavaScript、JSON

基本４言語

フロントエンドエンジニア（マークアップエンジニア）の仕事とは

『フロントエンドエンジニア養成読本』
http://www.amazon.co.jp/gp/product/4774165786
斉藤祐也（株式会社 リッチメディア） 記

見た目に対する「思いやり」と
システマティックな「厳密さ」の
仲を取りなす

ブラウザ

シェア

『NetMarketShare』
http://www.netmarketshare.com/
　

PC

browser 最新ver vendor engine
Chrome 36 Google Blink
Internet Explorer 11 Microsoft Trident
Firefox 30 Mozilla Gecko
Safari 7 Apple WebKit
Opera 22 Opera Blink

　

スマートフォン

browser 最新ver vendor engine
iOS Mobile Safari 7 Apple WebKit
iOS Chrome（ネイティブアプリ UIWebView） 36 Google WebKit
Android Mobile Safari（標準ブラウザ） 4 Apple WebKit
Android Mobile Safari - Chrome（新標準ブラウザ） 1（Chrome 18） Google WebKit
Android Chrome 36 Google Blink

※ 上記ブラウザが占めるモバイルブラウザシェア 約89% （2014年9月現在）
http://www.netmarketshare.com/
　

ユーザーエージェント

  • HTTP User agent

Webにアクセスする環境が送信する識別名称文字列

  • 内容

ハードウェア情報
携帯キャリア名
ホストOS名
アプリケーション名
レンダリングエンジン名
バージョンナンバー
etc...

  • 規則

特にない
偽装可能

  • 例

・Chrome 36
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36

・Firefox 30.0
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0

・iOS 7.1.1
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53

・Xperia Z Ultra Android 4.2.2
Mozilla/5.0 (Linux; U; Android 4.2.2; ja-jp; SonySOL24 Build/14.1.K.1.217) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
　

※「スマホ」のカタカナ表記

  • スマートフォン
  • スマートホン
    　
  • スマフォ
  • スマホ
    　
  • スマートフォン
  • スマホ

→ Googleトレンドが教えてくれた
『Google トレンド』
http://goo.gl/Qlt4dE
　

言語の先にあるもの

  • ファイル管理、バージョン管理力

  • UI、UX、UCD力

  • 構成力、校正力

  • サービス力

  • 要件定義力

  • モック力、パッケージング力

  • 調整力、コミュニケーション力

  • 体力、健康力
    　

開発環境・ツール

CodePen

本講座にて多用します
『CodePen』
http://codepen.io/

Chrome Developer Tool

起動したら迷わず[F12] or [Ctrl + Shift + I] or [Ctrl + Shift + J]
（Macは[command + option + I] or [command + option + J]）

  • 設定

  • Emulation

  • Elements、Styles編集

  • Network

  • PageSpeed

Chrome 設定画面

『Chrome URLs』
chrome://chrome-urls/
chrome://flags/

Chrome to Mobile 拡張機能 （Chrome Mobile）

Chrome to Phone 拡張機能 （Android）

Validation

Minify

※個別に手作業でミニファイを行うならば
　

HTML

HTMLとは

世界初・最古のHTML

『The World Wide Web project』
http://info.cern.ch/hypertext/WWW/TheProject.html

1991年8月6日
Sir Timothy John Berners-Lee（ティム・バーナーズ＝リー）
CERN ： 欧州原子核研究機構
数千人に効率よく情報を行き渡らせるためのシステム開発の一貫

歴史

  • 1991年8月6日 ： 初公開

  • 1993年4月30日 ： WWW技術の無償化

  • 1994年 ： World Wide Web Consortium（W3C）設立

W3C

Webで使用される各種技術の標準化を推進
『W3C』
http://www.w3.org/

HTML
CSS
DOM ： JavaScriptのInterface

※ 日本ホスト ： 慶応SFC 萩野達也 環境情報学部教授

JavaScript

Ecma International（ECMAScript - ECMA-262） ： JavaScriptのObjectやMethod
Mozilla Foundation ： DOMとEcmaを結合、とりまとめ役的

※ ステイクホルダーが複数

JSON

IETF（Internet Engineering Task Force） RFC 4627
W3Cの親組織

HTMLの基本構造


<span id="id-name">text</span>

<start-tag attribute="value">content</end-tag>

<開始タグ 属性="属性値">コンテンツ</終了タグ>

<!--コメント-->
Empty-Element Tags （空要素、空要素タグ）

<img type="path">

（<img src="path" />）

『HTML5』とはなにか

HTMLマークアップの仕様のみにとどまらずWeb全体の枠組みを刷新する新しい規格群を表す用語
HTMLのメジャーアップデート第５版2014年正式勧告目標（現在未勧告）

HTML5規格

  • セマンティック ・・・ ①

  • CSS3 ・・・ ②

  • メディア、グラフィック、ストレージ、API、通信、パフォーマンス

HTML5要素の役割

セマンティックWebに則ったHTML5要素
『HTML5』
http://www.w3.org/TR/html5/

要素分類

  • コンテンツモデルによる要素分類

  • 要素タイプによる分類

※ ブロックレベル、インラインという分類は抹消
　

コンテンツモデル（Content models）による要素分類

  • メタデータ・コンテンツ（Metadata content）

  • フロー・コンテンツ（Flow content）

  • セクショニング・コンテンツ（Sectioning content）

  • ヘッディング・コンテンツ（Heading content）

  • フレージング・コンテンツ（Phrasing content）

  • エンベッディッド・コンテンツ（Embedded content）

  • インタラクティブ・コンテンツ（Interactive content）

メタデータ・コンテンツ（Metadata content）

http://www.w3.org/TR/html5/dom.html#metadata-content
http://www.html5.jp/tag/models/index.html#metadata-content-0

設定系要素

base link meta noscript script style template title

フロー・コンテンツ（Flow content）

http://www.w3.org/TR/html5/dom.html#flow-content
http://www.html5.jp/tag/models/index.html#flow-content-1

本文格納系

a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr text

セクショニング・コンテンツ（Sectioning content）

http://www.w3.org/TR/html5/dom.html#sectioning-content
http://www.html5.jp/tag/models/index.html#sectioning-content-0

構成系

article aside nav section

ヘッディング・コンテンツ（Heading content）

http://www.w3.org/TR/html5/dom.html#heading-content
http://www.html5.jp/tag/models/index.html#heading-content-0

見出し系

h1 h2 h3 h4 h5 h6 hgroup

フレージング・コンテンツ（Phrasing content）

http://www.w3.org/TR/html5/dom.html#phrasing-content
http://www.html5.jp/tag/models/index.html#phrasing-content-1

文章系

a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text

エンベッディッド・コンテンツ（Embedded content）

http://www.w3.org/TR/html5/dom.html#embedded-content
http://www.html5.jp/tag/models/index.html#embedded-content-2

外部リソース系

audio canvas embed iframe img math object svg video

インタラクティブ・コンテンツ（Interactive content）

http://www.w3.org/TR/html5/dom.html#interactive-content
http://www.html5.jp/tag/models/index.html#interactive-content-0

インタラクション系

a audio (if the controls attribute is present) button embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the hidden state) keygen label object (if the usemap attribute is present) select textarea video (if the controls attribute is present)

要素タイプによる要素分類

  • ルート要素 （The root element）

  • メタデータ要素 （Document metadata）

  • セクション要素 （Sections）

  • グルーピング要素 （Grouping content）

  • セマンティックテキスト要素 （Text-level semantics）

  • エディット要素 （Edits）

  • 組み込み要素 （Embedded content）

  • テーブル要素 （Tabular data）

  • フォーム要素 （Forms）

  • スクリプト要素 （Scripting）

  • インタラクティブ要素 （Details content）

ルート要素 （The root element）

html

メタデータ要素 （Document metadata）

head title base link meta style

セクション要素 （Sections）

body article section nav aside h1～h6 header footer address

グルーピング要素 （Grouping content）

p hr pre blockquote ol ul li dl dt dd figure figcaption div main

セマンティックテキスト要素 （Text-level semantics）

a em strong small s cite q dfn abbr data time code var samp kbd sub sup i b u mark ruby rb rt rtc rp bdi bdo span br wbr

エディット要素 （Edits）

ins del

組み込み要素 （Embedded content）

img iframe embed object param video audio source track map area

テーブル要素 （Tabular data）

table caption colgroup col tbody thead tfoot tr td th

フォーム要素 （Forms）

form label input button select datalist optgroup option textarea keygen output progress meter fieldset legend

スクリプト要素 （Scripting）

script noscript template canvas

インタラクティブ要素 （Details content）

details summary dialog
　

HTML属性

グローバル属性 （Grobal attributes）

accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title
　

HTML5実装

xhtml1.0のコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[title値]</title>
<meta name="copyright" content="[コピーライト]" />
<meta name="description" content="[ページ概要]" />
<meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="canonical" href="[正規化フルパス URL]" />
<!--css-->
<link rel="stylesheet" href="[スタイルシートパス]" />
<!--/css-->
</head>
<body>

<p>contents here.</p>

<!--JavaScript-->
<script src="[JavaScriptパス]"></script>
<script>
/*[ローカル JavaScript]*/
</script>
<!--/JavaScript-->
</body>
</html>

　　▽▽▽ 変化 ▽▽▽

html5のコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>[title値]</title>
<meta name="author" content="[コピーライト]">
<meta name="description" content="[ページ概要]">
<meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="canonical" href="[正規化フルパス URL]">
<!--css-->
<link rel="stylesheet" href="[スタイルシートパス]">
<!--/css-->
</head>
<body>

<p>contents here.</p>

<!--JavaScript-->
<script src="[JavaScriptパス]"></script>
<script>
/*[ローカル JavaScript]*/
</script>
<!--/JavaScript-->
</body>
</html>

html5のコード 解説

ポイントは４箇所

<!DOCTYPE html>　←　HTML5にて「DOCTYPE」の役割は薄い、DTDなどのスキーマは設定されない
<html lang="ja">　←　一般的には「lang属性」のみ指定 （※ manifest属性 ： アプリオフライン動作向け）
<head>
<meta charset="utf-8">　←　「charset属性」が新設
<title>[title値]</title>
<meta name="author" content="[コピーライト]">　←　「meta name="copyright"」は廃止
<meta name="description" content="[ページ概要]">
<meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="canonical" href="[正規化フルパス URL]">
<!--css-->
<link rel="stylesheet" href="[スタイルシートパス]">
<!--/css-->
</head>
<body>

<p>contents here.</p>

<!--JavaScript-->
<script src="[JavaScriptパス]"></script>
<script>
/*[ローカル JavaScript]*/
</script>
<!--/JavaScript-->
</body>
</html>

　

利用頻度の高い要素

要素 役割
div − （汎用ブロック）　division
span − （汎用インライン）　span
p 段落　paragraph
a ハイパーリンク　anchor
img 画像　image
br 改行　breake
hr 水平線　horizontal rule
ul 順序なしリスト unordered list
li リスト　list
dl 定義リスト　difinition list
dt 定義リストタイトル　difinition list title
dd 定義リストデータ　difinition list data
h1〜6 見出し　heading

　

利用頻度の高いhtml5新設要素

要素 役割
header ヘッダー　header
footer フッター　footer
nav ナビゲーション　navigation
article 記事　article
section 章　section
aside その他　aside
main メイン　main

　

Microdataの役割と実装

『HTML Microdata』
http://www.w3.org/TR/microdata/

『microdata について - ウェブマスター ツール ヘルプ』
https://support.google.com/webmasters/answer/176035?hl=ja

Microdataでなにができる？

『Google検索 ： iPad Air Wi-Fiモデル 16GB』
http://goo.gl/LHjUrr

検索画面キャプチャ

Google検索

　

Microdata属性

itemscope itemprop itemtype itemref itemid

Microdataのサンプルコード

『価格.com - APPLE iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー] 価格比較』
http://kakaku.com/item/K0000587933/

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">iPad Air Wi-Fiモデル 16GB</span></a>
  <span itemprop="name">iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー]</span>
  <img itemprop="image" alt="iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー] 製品画像">
  <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
    <span itemprop="lowPrice">&yen;46,190</span>
    <span itemprop="highPrice">&yen;65,664</span>
    <span  itemprop="offerCount">24</span>
    <meta itemprop="priceCurrency" content="JPY" />
  </div>
  <li itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.52</span>
    <span itemprop="reviewCount">47</span>
  </li>
  <span itemprop="name">iPad Air Wi-Fiモデル 16GB</span>
</div>

itemscope

包含する要素がitemであることを定義
　

itemtype

itemtypeで囲まれた情報が「何を」表す情報のグループかを定義

  • microformats.org
    Facebookが一部利用歴あり
    　

  • data-vocabulary.org
    Googleの検索エンジンが一部利用
    　

  • schema.org
    Google、Microsoft、Yahoo!の検索大手3社が策定中
    　

schema.orgの例

『Full Hierarchy - schema.org』
http://schema.org/docs/full.html
大量なtype定義あり
　

itemprop

情報１つ１つの意味属性を定義

『Article - schema.org』
http://schema.org/docs/schemas.html
膨大（!!）なproperty定義あり

itemのネスト

上記の例の通り、itemはネストすることができる
ネストすると、情報の親子関係を明確にし、情報階層をより詳細に表現することができる

<div itemscope itemtype="http://schema.org/Product">
  <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"></div>
  <li itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"></li>
</div>

　

HTML運用の効率化

  • モジュール指向マークアップ

  • ループオブジェクト

  • id属性とclass属性

  • id属性やclass属性の役割分離

  • a要素の指定範囲

  • 本文ブロックの定常テスト
    　

モジュール指向マークアップ

Anti pattern

Sample

http://codepen.io/sekiyaeiji/pen/mlBon?editors=100　
　

ループオブジェクト

『レディースファッション通販トップ - Yahoo!ショッピング - Ｔポイントが貯まる！使える！ネット通販』
http://shopping.yahoo.co.jp/category/13457/2494/recommend?sc_i=shp_pc_top_cate_menu_fash:ladi_fash:2494
「カテゴリグリッド」

<ul id="pc02_cr_2494" class="exCfx">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul id="pc02_cr_2494" class="exCfx">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul id="pc02_cr_2494" class="exCfx">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

『トップスファッション通販 - ZOZOTOWN』
http://zozo.jp/category/tops/
「商品グリッド」

<ul id="searchResultList" class="goodsResult clearfix">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

上記の例の場合、汎用性が高いのはZOZOTOWNのコード
マルチカラムグリッドレイアウトは、inline-blockやfloatを利用して、
同型のマークアップのループになるように設計する
　

id属性とclass属性

id属性の特長

  • １文書に１箇所のみ記述できる

  • JSセレクタにおいて高パフォーマンス

class属性の特長

  • １文書に複数記述できる

  • JSセレクタにおいて低パフォーマンス
    　

CSS要件におけるid属性とclass属性の使い分け

HTML要素のセマンティック性が向上した影響もあり、CSSセレクタとしての、id属性の役割はあまりなくなった現状では、スタイル定義はなるべくclassのみで設定すべきである
　

JavaSdript要件におけるid属性とclass属性の使い分け

JSセレクタとしてのid属性は、パフォーマンスにおいて存在価値が高い
"文書に一意"という特性により、DOM走査において発見次第処理を中断する仕様になっているためである

『id vs class vs tag vs pseudo vs. attribute selectors · jsPerf』
http://jsperf.com/id-vs-class-vs-tag-selectors/2

id属性やclass属性の役割分離

CSSセレクタとJSセレクタ、またはid属性アンカー（ページ内リンク）のためのidの分離

<style>
#sample {}
</style>

<div id="sample">sampleを一意に定義</div>

<a href="#sample">sample</a>

<script>
$('#sample');
</script>

上記の例では、「sample」idにかかる役割がCSS、JS、idアンカーにまたがり、id「sample」を変更した場合の影響範囲が大きい
このようなコードは、運用コストの上昇とバグのリスクを招く
　


<style>
#sample {}
</style>

<div id="sample js-sample link-sample">役割毎にsample、js-sample、link-sampleのようにidを分離する</div>

<a href="#link-sample">sample</a>

<script>
$('#js-sample');
</script>

上記はJSセレクタとアンカー用のidにそれぞれ命名規則「js-」「link-」を付与した例
「sample」、「js-sample」、「link-sample」の機能的な役割が分離されており、修正時に他機能への影響がなくシンプルな運用が可能
　

class属性においても、以下の通り分離する


<style>
.sample {}
</style>

<div class="sample js-sample">役割毎にsample、js-sampleのようにclassを分離する</div>

<script>
$('.js-sample');
</script>

　

a要素の指定範囲

本文ブロックの定常テスト

以下を代入してレイアウトが崩れないことを確認


テキストテキスト１０テキストテキスト２０テキストテキスト３０テキストテキスト４０テキストテキスト５０テキストテキスト６０テキストテキスト７０テキストテキスト８０テキストテキスト９０テキストテキスト００

texttext10texttext20texttext30texttext40texttext50texttext60texttext70texttext80texttext90texttext00

　

※ インデントのお話

現在のコード内の集計結果
http://sideeffect.kr/popularconvention#javascript

さまざまな役割のメンバーが
さまざまなエディタを通して編集を行う

→ より汎用的な可読性が求められている

　
　
　
　
　
　

29
28
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
29
28