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

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

enjoy!

HTML/CSS/JavaScript

ざっくりいうと…

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

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

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

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

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

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

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がどんな考えのもとに設計されているか書かれています。

こちらの関連記事もあわせてどうぞ!

    WS|コーディング 2

    「Webサイト制作のワークショップ」のメモです。 サンプルデータを使ってスマホ対応(レスポンシブWebデザイン)を行う。スマホの仮想ウインドウサイズの横幅を取得して、CSSで表示を振り分ける。Web…

    WS|ページの読み込みスピード

    「Webサイト制作のワークショップ」のメモです。 Webサイトの読み込みスピードは非常に重要な要素。PCのネット回線は高速化したが、スマホはまだまだ回線速度が貧弱。 ネットショップの場合、読み込みス…

    WS|Webサイトのテキスト

    「Webサイト制作のワークショップ」のメモです。 デバイスによって表示されるフォントは異なる。ゴシック系や明朝系という指定をするのが基本。ある程度デバイス共通フォントもでてきたが、ウエイトも含めると…

    WS|Webサイト制作

    Webサイト制作のワークショップを各所で行いたいと思います 都内某所でWebサイト制作のワークショップをやっています。他にも各所で開催していきたいと思うので、ご興味のある方はよろしくお願いします。何…

    WS|WordPressのインストール

    「Webサイト制作のワークショップ」のメモです。 あらゆるWebサイトで CMS(コンテンツ・マネジメント・システム)が導入されており、その中でも WordPress が多くの割合を占める。Word…