「Webサイト制作のワークショップ」のメモです。

頭で理解するよりも手で覚えることが大切。たとえば普段使っている Photoshop のショートカットを口で説明しようとすると、すぐには出てこない。手の形で覚えているため。エディタの基本的なショートカットを使いながら、サンプルデータを使ってまずは写経のようになぞっていく。

enjoy!

HTML/CSS/JavaScript

ざっくりいうと…

• HTML はコンテンツの構造
• CSS はデザイン
• JavaScript は動き

特殊なテキストエディタを使う理由

html は単なるテキストファイルなので、そもそもどんなエディタでも編集できる。わざわざコーディングに適したエディタを使う理由は…

• コード補完の機能があるので高速なコーディングが可能。
• 要素によって色分けされるシンタックスハイライトによって、コードが読みやすくなる。
• ディスプレイは発光しているので、白いウインドウだと目が疲れる。自分好みのテーマを設定できる。

主なテキストエディタ/オーサリングソフト。

• ATOM
• Sublime Text
• Coda
• Brackets
• Dreamweaver

など。ここでは ATOM を使っていく。

Emmet の使い方

コーディングを効率化するためのプラグイン。コマンドを打って［tabキー］でコードを展開できる。以下はリストタグの展開例。

ul>li*3［tabキー］

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul>liテキスト$*3 ［tabキー］

<ul>
  <li>テキスト1</li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>

ul#menu>li*3 ［tabキー］

<ul id="menu">
  <li></li>
  <li></li>
  <li></li>
</ul>

ul.menu>li*3 ［tabキー］

<ul class="menu">
  <li></li>
  <li></li>
  <li></li>
</ul>

ファイルを開くアプリを設定する

Finder で html ファイルを選択して、「情報を見る（command＋I）」から、「このアプリケーションで開く」に割り当てられているアプリを ATOM に変更する。同じく css/js/その他ファイルも同じく変更する。

html の基本構造

• head｜メタ情報、css、js など外部ファイルの読み込み
• body｜コンテンツ
• nav｜ナビゲーション
• header｜ヘッダー
• footer｜フッター

html 基本タグ

主な html タグ。内容に合った正しいタグでマークアップしていく。開始タグと終了タグがセットになっているものと、img や br のように終了タグのないものもある。

• header｜ヘッダー
• footer｜フッター
• nav｜ナビゲーション
• article｜コンテンツ
• section｜コンテンツ内の1ブロック
• aside｜サブコンテンツ、サイドメニューなど
• h1 – h6｜見出し
• p｜段落｜paragraph
• br｜改行｜break
• ul｜順序のないリスト｜Unordered List
• ol｜順序のあるリスト｜Ordered List
• li｜リスト｜list
• table｜ 表組み
• img｜画像
• a｜リンク
• div｜ブロック要素
• span｜インライン要素

id と class

• id｜ページ内にひとつだけ｜header、footer など
• class｜ページ内に複数｜再利用してページ内でデザインを統一する場合｜見出しなど

id/class の名前は自由に決められるが、wrapper、container など一般的に使われる名前がある。red-text のようにデザイン要素は記述せずに、warning-text のように要素の役割がわかる名前をつける。red-text にすると、デザインや色が変わった場合に矛盾が発生するため。

CSS でのスタイリング

• InDesign のスタイルシートと同じように、同じスタイルの要素がすべて同じデザインに統一される。
• 上から下へと内容が上書きされるので、後に書いたものが優先される。
• class よりも id が優先される。

カラー指定

16進法が基本
例）#ccc（#cccccc）

RGBA（Aは透明度）
例）rgba(204,204,204,1)

配色ツール
Adobe Color CC

width で幅を指定する

幅を指定する width プロパティは、ピクセルとパーセントの指定を組み合わせられる。

• width: 100%;｜通常の幅
• max-width: 1200px;｜幅の上限
• min-width: 960px;｜幅の下限

ul と ol のリストの違い

• ul｜順序のないリスト｜Unordered List
• ol｜順序のあるリスト｜Ordered List

リストのスタイリング

• ul｜list-style: square inside;
• ol｜list-style: decimal inside;

リストの字下げ

margin: 0 0 0 1em;
list-style: disc outside;

要素の float

内包する要素が float している場合、float を解除する clearfix を親要素に追加する。

.cf:before,
.cf:after
content:"";
display:table;
}
.cf:after
clear:both;
}
.cf
zoom:1;
}

css の margin と padding

• margin｜ボックスの外側の余白
• padding｜ボックスの内側の余白

• margin: 20px;｜上下左右
• margin: 20px 20px; ｜上下、左右
• margin: 20px 20px 20px; ｜上、左右、下
• margin: 20px 20px 20px 20px; ｜上、右、下、左

box-sizing

CSS3 からの対応。padding と border によってボックスサイズが変わるのではなく、常にボックスサイズを固定できる。padding と border の分だけボックスサイズの内側が小さくなる。

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

reset.css でリセットしているもの

html {
	color: #000;
	background: #FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
fieldset, img {
	border: 0
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal
}
ol, ul {
	list-style: none
}
caption, th {
	text-align: left
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal
}
q:before, q:after {
	content: ''
}
abbr, acronym {
	border: 0;
	font-variant: normal
}
sup {
	vertical-align: text-top
}
sub {
	vertical-align: text-bottom
}
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit
}
input, textarea, select {
	*font-size: 100%
}
legend {
	color: #000
}

擬似クラス

li:first-child｜最初の子要素
li:last-child｜最後の子要素

<ul>
  <li>最初の子要素</li>
  <li>2番めの子要素</li>
  <li>最後の子要素</li>
</ul>

li:nth-child(even)｜偶数
li:nth-child(odd)｜奇数

<ul>
  <li>奇数</li>
  <li>偶数</li>
  <li>奇数</li>
</ul>

SmoothScroll の使い方

ページ内リンクのアニメーション。「このページのトップにもどる」をクリックした際に、スムーズに移動する。ページ内の id を指定する。

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

公式 Git

jQuery Easing Plugin の動作サンプル

jQuery 3

1系と2系に分かれていたが、サポート終了したIE8を動作対象から外すことで、3系に統一された。とはいえ、jQuery のプラグインの対応状況もあるので、必ずしも3系だけで大丈夫とは限らない。

jQuery 3 の変更点

このように書く必要はなくなった。

<!-- JQuery -->
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<![endif]-->
<!--[if gte IE 9]>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--[if !IE]>-->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<![endif]-->
<!-- /JQuery -->

これだけでよくなった。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

ライブラリ（外部ファイル）は可能な限りサーバーには置かず、CDN（Contents Delivery Network）を利用することで、ページ読み込み速度の向上につながる。

コメントアウト

html や css に過度なコメントタグはいらない。美しいコードは語る。

宿題

iOS ヒューマンインターフェイスガイドライン（HIG）は、デベロッパー向けのガイドラインというよりは、UIデザインのバイブルです。ぜひ読んでみてください。

これはWebページです。
数年前にバズったページです。

iOS ヒューマンインターフェイスガイドライン
iOS のアプリを作るデベロッパーに向けたガイドラインです。iPhoneがどんな考えのもとに設計されているか書かれています。