Slide 1
Slide 1 text
関口 裕
コ ー デ ィ ン グ な ん か こ わ く な い ！
［ と り あ え ず 慣 れ よ う 編 ］
ア レ ル ギ ー 克 服 講 座
Slide 2
Slide 2 text
［ 目的 ］
とりあえずコードに慣れて、苦手意識を克服する
［ 対象 ］
主にデザイナー。HTML と CSS
とにかく
3 3 3 3
最初の一歩！
Slide 3
Slide 3 text
!
今回は、まずわかった気になって
「苦手意識をとりのぞく」
ことが目的です。
一部正確でない箇所もあるので、
うまくいかないときや、気になったところは
積極的にググっていきましょう！
Slide 4
Slide 4 text
コ ー ディン グ。
Slide 5
Slide 5 text
H T M L
Slide 6
Slide 6 text
C S S
Slide 7
Slide 7 text
j a v a S c r i p t
Slide 8
Slide 8 text
こ わ い で すよ ね 。
Slide 9
Slide 9 text
わ か りま す 。
Slide 10
Slide 10 text
み ん な の 声 、 あ つ め まし た 。
Slide 11
Slide 11 text
コーディング
苦 手
意 識
調 査
期間：2017 年 3 月 16 日〜 21日
回答者：205 人
Typeform による SNS アンケート
しました！
Slide 12
Slide 12 text
何がわからないのかわからない／本とかサイトとか書いてある通りにやっても、ちゃんとならへん！／全く理解がで
きない！／答え ( デザイン ) があるところ。数学やってるときと同じ気持ちになる。デザインは一応答えがあるけど
やり方は割とは自由だし提案もできるけど…。あとデバイスやブラウザによって動かない表示されないとき苛立ちが
最高潮に…そして伝説へ…／直感的にレイアウト出来ないから／たった 1 つの正解に辿り着くまでに、何時間もか
かる所／シリコンバレーではコードかけないデザイナーとか終わりみたいな記事をよく見かけるので、余計にきらい
になってきた。 ほんとは 1 から勉強したいです。／構造とルールがわからない あと英語／まったくわからない／数
学の授業みたいな難しさ。わかったと思っても応用編でつまづく／どれがほんまかわからへんとこ。／苦手というか
そもそもデザイナーがそこまで携わるにはそれなりに学習や経験が必要になってしまうので、その労力はむしろデザ
インにつぎ込みたい。／理解できる気がしない／ " 言語 " と認識できない／数学がそもそも苦手なので何かの単位と
数字が並んでるだけで脳にフィルタがかかる。 そこに em やら rem やらが追加されもっと分からない。 わからな
いけど紙並みに組版したいのに現状厳しい。 ボタン一つでも の時、 の時、 の時とか色々あって何
が違うのかまだはっきりわからない。画像一つ置くにしてもわざわざ background-image にしなければならないと
か謎。js や PHP はもってのほかだけど PHP のほうがまだ仲良くなれそうな気がする（PHP のほうが英語に近い印
象）
ブロック要素だけど高さや幅がないから content: ''
；
とかの概念も謎。
ブロックとは…／はじめての html がテー
ブルレイアウトだったので、float が出てきたあたりからアレルギーです／意味が分からない !!! ／出来上がったもの
を見ても喜びを感じられない。狙い通りに作って、
狙い通りに出来上がって、
そりゃそうだよね、
そう作ったんだから、
フーン……で終わり／習得する時間がない。その悔しさから、妙に動きのあるサイトに怒りすら覚えてくる／英数字
の羅列がいやだ！／すでに出来てる人が怖い／ IE と Android ／英語がわかんないからスペルミスして動かないとこ
ろが嫌。／勉強不足だと思うけど、どこから手をつけていいかわからない／英数字の羅列がそもそも怖いです。活字
恐怖症に近いものがあるかもしれません。英数字が敷き詰められた画面を見るだけで 「うっ」となります／資料など
を参考に組んでみる 動かない→なんで動かないのか分からない 動く→なんで動いたのか分からない／なにができる
か想像がつかない。しくみがわからない。でも使えたらきっと素敵… デ ータ：
「コーディング 苦 手 意 識 調 査！」“H T ML と C S S が 苦 手 ” な セグメントより抜 粋
Slide 13
Slide 13 text
何がわからないのかわからない／本とかサイトとか書いてある通りにやっても、ちゃんとならへん！／全く理解がで
きない！／答え ( デザイン ) があるところ。数学やってるときと同じ気持ちになる。デザインは一応答えがあるけど
やり方は割とは自由だし提案もできるけど…。あとデバイスやブラウザによって動かない表示されないとき苛立ちが
最高潮に…そして伝説へ…／直感的にレイアウト出来ないから／たった 1 つの正解に辿り着くまでに、何時間もか
かる所／シリコンバレーではコードかけないデザイナーとか終わりみたいな記事をよく見かけるので、余計にきらい
になってきた。 ほんとは 1 から勉強したいです。／構造とルールがわからない あと英語／まったくわからない／数
学の授業みたいな難しさ。わかったと思っても応用編でつまづく／どれがほんまかわからへんとこ。／苦手というか
そもそもデザイナーがそこまで携わるにはそれなりに学習や経験が必要になってしまうので、その労力はむしろデザ
インにつぎ込みたい。／理解できる気がしない／ " 言語 " と認識できない／数学がそもそも苦手なので何かの単位と
数字が並んでるだけで脳にフィルタがかかる。 そこに em やら rem やらが追加されもっと分からない。 わからな
いけど紙並みに組版したいのに現状厳しい。 ボタン一つでも の時、 の時、 の時とか色々あって何
が違うのかまだはっきりわからない。画像一つ置くにしてもわざわざ background-image にしなければならないと
か謎。js や PHP はもってのほかだけど PHP のほうがまだ仲良くなれそうな気がする（PHP のほうが英語に近い印
象）
ブロック要素だけど高さや幅がないから content: ''
；
とかの概念も謎。
ブロックとは…／はじめての html がテー
ブルレイアウトだったので、float が出てきたあたりからアレルギーです／意味が分からない !!! ／出来上がったもの
を見ても喜びを感じられない。狙い通りに作って、
狙い通りに出来上がって、
そりゃそうだよね、
そう作ったんだから、
フーン……で終わり／習得する時間がない。その悔しさから、妙に動きのあるサイトに怒りすら覚えてくる／英数字
の羅列がいやだ！／すでに出来てる人が怖い／ IE と Android ／英語がわかんないからスペルミスして動かないとこ
ろが嫌。／勉強不足だと思うけど、どこから手をつけていいかわからない／英数字の羅列がそもそも怖いです。活字
恐怖症に近いものがあるかもしれません。英数字が敷き詰められた画面を見るだけで 「うっ」となります／資料など
を参考に組んでみる 動かない→なんで動かないのか分からない 動く→なんで動いたのか分からない／なにができる
か想像がつかない。しくみがわからない。でも使えたらきっと素敵… デ ータ：
「コーディング 苦 手 意 識 調 査！」“H T ML と C S S が 苦 手 ” な セグメントより抜 粋
Slide 14
Slide 14 text
わ か りま す 。
Slide 15
Slide 15 text
な ん か わ か ん な い 。
で き る気 が し な い 。
勉 強 す ること 多 す ぎ 。
達 成 感 低 い 。
Slide 16
Slide 16 text
（ なん か 嫌 。 ）
Slide 17
Slide 17 text
僕 も そ うで し た 。
Slide 18
Slide 18 text
そ ん な 僕 が 考 え た 、
コ ード ア レ ル ギ ー を
乗 り 越 え る コ ツ
Slide 19
Slide 19 text
「 ま ず カ タ チ か ら 」
Slide 20
Slide 20 text
ウェブ 開 発 は
メモ 帳 で で き る
“
”
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
一 発 で
コ ード 嫌 い に な る に
決 まって る！
Slide 24
Slide 24 text
「 ま ず カ タ チ か ら 」
Slide 25
Slide 25 text
ま ず コレ を 入 れ よ う
Brackets
なに も 考 えず、
http://brackets.io
最初から日本語化されてる。マシンにいろいろ設定しなくてもこれだけで完結する。みんなだいすき Adobe 製。
Slide 26
Slide 26 text
Emmet （必須）
Brackets File Icons
Indent Guides
Brackets Outline List
Minimap
colorHints
Brackets CSS Class Code hint
Paste and Indent
More HTML5 Code Hints +
Fat-Free Framework Template Tags
この拡張機能をいれる
なに も 考 えず、
Slide 27
Slide 27 text
- 「 ま ず カ タ チ か ら 」
は じ め る コ ー デ ィン グ の コ ツ -
［ 1. ビ ジュア ル 化 する ］
［ 2 . 機 械 に 書 か せ る ］
［ 3. 勉 強しようとしない ］
［ 4 . カンプ を 再 現しない ］
Slide 28
Slide 28 text
［ 1 . ビ ジュア ル 化 す る ］
Slide 29
Slide 29 text
［ 1 . ビ ジ ュア ル 化 す る ］
カ ラ ー テ ー マ
S y n t a x h i g h l i g h t i n g
Slide 30
Slide 30 text
コ ード の 意 味 や 構 造 に そ って
色 付 け してくれ る！
［ 1 . ビ ジ ュア ル 化 す る ］
なんとなくの文字列が、ちょっとだけ意味を持ったものに見えてくる。お好みのテーマをいれて、気分を盛り上げよう。気分だいじ
！
これはシンプルで強力な人気エディタ、
「Sublime Text」の画面。
Slide 31
Slide 31 text
panda
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 32
Slide 32 text
pen-paper-coffee
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 33
Slide 33 text
mahou-shoujo
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 34
Slide 34 text
space-cowboy
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 35
Slide 35 text
sonho
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 36
Slide 36 text
chester
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 37
Slide 37 text
candy-light
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 38
Slide 38 text
［ 1 . ビ ジ ュア ル 化 す る ］
作 業 環 境 は 大 切 。
お 好 み の テ ー マ で
気 分 を 盛 り 上 げ よ う！
（ 気 分 侮 る べ か ら ず ）
巷では
「Monokai」というテーマが人気です
Slide 39
Slide 39 text
［ 1 . ビ ジ ュア ル 化 す る ］
ラ イ ブ プ レビ ュー
L i v e p r e v i e w
Slide 40
Slide 40 text
リ ア ル タ イム に 結 果 が 見 れ る！
トライアンドエラーがその場でできる。さわっている所がハイライトされるので、自分がやっていることが視覚的にわかる。
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 41
Slide 41 text
［ 1 . ビ ジ ュア ル 化 す る ］
Slide 42
Slide 42 text
［ 1 . ビ ジ ュア ル 化 す る ］
デ ザ イン ツ ー ル の よ う に
さ わって わ か る 、
直 感 的 な 環 境 に 近 づ けよ う！
（ ト ラ イ & エ ラ ー は 大 切 ）
Slide 43
Slide 43 text
［ 1 . ビ ジ ュア ル 化 す る ］
と に か くグ ラフィカ ル にして 、
た だ 文 字 を 打 つ だ け じ ゃ な い
作 業 環 境 にし よ う
見 え る 化 ま と め
Slide 44
Slide 44 text
［ 2 . 機 械 に 書 か せ る ］
Slide 45
Slide 45 text
［ 2 . 機 械 に 書 か せ る ］
コ ードヒント
A u t o c o m p l e t e
Slide 46
Slide 46 text
途 中 ま で 書 け ば 、
書 き た い も の を 表 示 してくれ る！
数文字入れるだけで候補が出るので、全部打ち込まなくていい。スペルミスが減る。うろ覚えでも OK
数文字打ち込むだけで、候補が出てくる
［ 2 . 機 械 に 書 か せ る ］
Slide 47
Slide 47 text
［ 2 . 機 械 に 書 か せ る ］
エ メット
E m m e t
Slide 48
Slide 48 text
途 中 ま で 書 け ば 、
間 違 い の な い 雛 形 を 書 い てくれ る！
必要な記号や閉じタグなど、書かなければならないものを勝手に用意してくれるので、うろ覚えでも OK。
「 ! 」や
「div」などのあとで Tab キーを押すと 雛形を展開するなど、必要なものを勝手に入れてくれる
［ 2 . 機 械 に 書 か せ る ］
Slide 49
Slide 49 text
［ 2 . 機 械 に 書 か せ る ］
う ろ 覚 え で も い い か ら 、
ま ず カ タ チ が 見 え る ま で を
短 縮 して み よ う！
機 械 に 書 か せ る ま と め
Slide 50
Slide 50 text
ク イッ ク エ デ ィット イ ン デ ント ／イ ン デ ント 解 除
ホ バ ー ク イッ クビ ュ ー 行 コ メント の 切 り 替 え
複 数 選 択 数 値 の 増 減（ E m m e t ）
［ 2 . 機 械 に 書 か せ る ］
コ ード で も 直 感 的 に 操 作 で き る！
Brackets の機能紹介、使い方解説 - Qiita
http://qiita.com/assialiholic/items/c8137321c7599a168b16
（ オ マ ケ ）
c o m m a n d + E で C S S や 色 、アニメーションのカーブ を調 整 できる イン デ ント の 深 さ を c o m m a n d + [ か ] で 移 動 で き る
画 像 や 色の 部 分に ポインタをの せるとプレビューできる c o m m a n d + / で 行 を コ メント（ 非 表 示 ）にし た り 解 除 し た り
文 字 列 を 選 択して c o m m a n d + B であら不 思 議 。他にもいろいろ 数 値 部 分 を c o m m a n d + s h i f t + ↑や↓で ちくちく 変 更 で き る
Slide 51
Slide 51 text
［ 3. 勉 強 しよ うとし な い ］
Slide 52
Slide 52 text
［ 3 . 勉 強 し よ う とし な い ］
グ ー グ ル 先 生（ 笑 ）
G o o g l e
Slide 53
Slide 53 text
グ グ れ ば すぐ 出 てくる！
コ ード に 真 正 面 か ら 向 き 合 わ な い
そもそもインターネッ
トを作っている HTML や CSS。
「HTML ◯◯◯」
「CSS ◯◯◯」とググればすぐに出てくるので、
いきなり本を最初から最後まで読破しようとしたり、理解できるまで手を止めたりしない。
［ 3 . 勉 強 し よ う とし な い ］
Slide 54
Slide 54 text
［ 3 . 勉 強 し よ う とし な い ］
い き な り マ ス タ ー は ムリ 。
覚 え よ うと せ ず 、
つ ど 調 べ る よ う にし よ う 。
勉 強 し よ う とし な い ま と め
Slide 55
Slide 55 text
［ 4 . カンプ を 再 現 し な い ］
Slide 56
Slide 56 text
［ 4 . カ ン プ を 再 現 し な い ］
イン ブ ラ ウ ザ・デ ザ イン
D e s i g n i n g i n t h e b r o w s e r
Slide 57
Slide 57 text
理 想 を 追 わ な い 。
コ ード か ら 始 め て 、調 整 して い く！
試行錯誤はデザインツールのほうが速い。ディテールを詰めるのも速い。おまけにコーディングは慣れてない。
いきなりカンプを再現しようとせず、まずは要素を書き出して
（ブラウザ上に置いて）
、それをスタイリングして作っていく気持ちでやってみよう。
［ 4 . カ ン プ を 再 現 し な い ］
Slide 58
Slide 58 text
コンテンツインベントリ
： コンテンツ一覧。 ページ単位ではなくコンテンツ自体を要素ごとに一覧化して、媒体の内容を整理したもの。
ここではページに依存しているニュアンスになっているけれど、
「素の原稿」をシンプルにリニアな状態で記したものという意味で使っています。
［ 4 . カ ン プ を 再 現 し な い ］
（ ち な み に ）
必 要 な 情 報 ・ 要 素 を 、
とり あ え ず
上 か ら 順 に（ H T M L で ）書 き 下 す
コ ン テ ン ツ イ ン ベ ントリ 作 成 と 同 じ よ う な も の
Slide 59
Slide 59 text
コ ード で デ ザ イン す る と
レス ポ ン シ ブ な デ ザ イン が カ ン タ ン！
@ m e d i a 〜
要素をタテ積みにするところから始めてレイアウトを組むことになるインブラウザ・デザイン。
好きなところでブレイクポイントを置いて、好きなだけ可変なレイアウトやスタイルをいじることができる。
［ 4 . カ ン プ を 再 現 し な い ］
Slide 60
Slide 60 text
せ っ か くコ ード を 書 くな ら 、
コ ード 脳 で
ゆ っくり 作 って み よ う 。
カ ン プ を 再 現 し な い ま と め
［ 4 . カ ン プ を 再 現 し な い ］
Slide 61
Slide 61 text
- お さ ら い： 「 ま ず カ タ チ か ら 」
は じ め る コ ー デ ィン グ の コ ツ -
［ 1. ビ ジュア ル 化 する ］
［ 2 . 機 械 に 書 か せ る ］
［ 3. 勉 強しようとしない ］
［ 4 . カンプ を 再 現しない ］
Slide 62
Slide 62 text
とに か くラ クに 。
気 持 ち の ハードル を
下 げ よう 。
「 ま ず カ タ チ か ら 」
Slide 63
Slide 63 text
「 カ タ チ」は エ ン ジ ニ ア の
効 率 化 の た め の も の 。
オートマ 車 に 乗 って い る
よ う な も の と 考 え よ う 。
Slide 64
Slide 64 text
本 来 大 事 な の は 、
コ ード を 理 解 して い る こと 。
ま ず 抵 抗 感 を 減 らして か ら 、
基 礎 を 学 ぼ う！
Slide 65
Slide 65 text
休 憩 。
Slide 66
Slide 66 text
関口 裕
コ ー デ ィ ン グ な ん か こ わ く な い ！
［ 雰 囲 気 で 覚 え よ う 編 ］
ア レ ル ギ ー 克 服 講 座
Slide 67
Slide 67 text
［ 目的 ］
とりあえずコードに慣れて、苦手意識を克服する
［ 対象 ］
主にデザイナー。HTML と CSS
とにかく
3 3 3 3
最初の一歩！
Slide 68
Slide 68 text
!
今回は、まずわかった気になって
「苦手意識をとりのぞく」
ことが目的です。
一部正確でない箇所もあるので、
うまくいかないときや、気になったところは
積極的にググっていきましょう！
Slide 69
Slide 69 text
H T M L C S S J S
イン タ ー ネット を つ くる
主 役 の コ ード た ち
（ ほかにもいっぱいあるよ
！ ）
Slide 70
Slide 70 text
H T M L
［ . h t m l ］
機 械 に とって 、
人 間 の 文 章 の 意 味 が
わ か る よ う に
印 を つ け た も の 。
ペ ー ジ の 本 体 。
Slide 71
Slide 71 text
H T M L
基 本 の お まじ な い
最 低 限 、
こ れ が あ れ ば O K 。
拡 張 子 を 変 え る の を
お 忘 れ な く！
こ こ に 内 容 を 書 く
ページタイトル
Slide 72
Slide 72 text
［ . c s s ］
配 置 や 色・ 間 隔 な ど 、
体 裁 を つ くる も の 。
ペ ー ジ の 見 た め を 変 え る
指 示 書 き 。
い ち ば ん 身 近 な や つ 。
C S S
Slide 73
Slide 73 text
C S S
基 本 の お まじ な い
最 低 限 、
こ れ が あ れ ば O K 。
拡 張 子 を 変 え る の を
お 忘 れ な く！
@charset “utf-8”;
こ こ に 内 容 を 書 く
読み込み方：
HTML の 〜 の中に下記を書く
Slide 74
Slide 74 text
J S
［ . j s ］
H T M L や C S S を
切 っ た 貼 っ た して 、
動 か し た り す る も の 。
手 元 に い る メ カ 。
（ 最 近 は 主 役 と 補 佐 役 が い る ）
Slide 75
Slide 75 text
J S
基 本 の お まじ な い
ほ ん と は い ろ い ろ あ る け ど 、
とり あ え ず い き な り 書 け ば
動 く… は ず 。
とくになし
読み込み方：
HTML の 〜 の中に下記を書く
Slide 76
Slide 76 text
There are many variations of passages of Lorem Ipsum
available, but the majority have suffered alteration in
some form, by injected humour, or randomised words
which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be
sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the
Internet tend to repeat predefined chunks as necessary,
making this the first true generator on the Internet. It
uses a dictionary of over 200 Latin words, combined
with a handful of model sentence structures, to generate
Lorem Ipsum which looks reasonable. The generated
Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc. There
are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form,
by injected humour, or randomised words which don't
look even slightly believable. If you are going to use a
passage of Lorem Ipsum, you need to be sure there isn't
anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the
全 部 、
た だ の テ キ ストファイル 。
メモ帳で開けるよ。拡張子が違うだけ。
Slide 77
Slide 77 text
< 中身 >
< イジる >
< 体裁 >
＋
H T M L C S S
J S
こ ん な
イメ ー ジ 。
Slide 78
Slide 78 text
厳 密 に 言 うと 違 うけど
こ ん な 感 じ で 捉 え て ま す 。
Slide 79
Slide 79 text
- 雰 囲 気 で 覚 え る イ ン タ ー ネッツ -
［ 1. ブ ラウザ とサ ー バ ー ］
［ 2 . H T ML の 書 き 方 ］
［ 3. C S S の 書 き 方 ］
［ 4 . 見 え 方 ル ー ル ］
［ 5 . デ ベロッパ ーツー ル ］
Slide 80
Slide 80 text
［ 1 . ブ ラ ウ ザ と サ ー バ ー ］
Slide 81
Slide 81 text
テ レ ビ と 放 送 局
の よ う な イメ ー ジ 。
［ ブ ラ ウ ザ と サ ー バ ー ］
Slide 82
Slide 82 text
［ ブ ラ ウ ザ と サ ー バ ー ］
の よ う な イメ ー ジ 。
< 表示する >
Browser Server
< データを返す >
「データくれー」
R e qu e s t
D o w nl o a d
「これかー」
H T M L C S S J S
Slide 83
Slide 83 text
［ 2 . H T M L の 書 き 方 ］
Slide 84
Slide 84 text
文 章 を タ グ で 囲 って
意 味 付 け す る 。
よ う な イメ ー ジ 。
［ H T M L の 書 き 方 ］
Slide 85
Slide 85 text
< タグ > これは文章だよ < / タグ >
［ H T M L の 書 き 方 ］
基 本 、ぜ ん ぶ コレ 。
Slide 86
Slide 86 text
［ H T M L の 書 き 方 ］
これは段落 < /p> パ ラ グ ラ フ
これは見出し < /h1> ヘッ ダ ー 基 本 形
Slide 87
Slide 87 text
Slide 88
Slide 88 text
［ H T M L の 書 き 方 ］
〜〜〜〜
〜〜〜〜 ブ レ イク
〜〜〜〜 ブ レ イク
〜〜いろいろ入る〜〜 < /div>
デ ィビ ジ ョン
単 体 の も の や 、グ ル ー ピ ン グ の た め の も の も
Slide 89
Slide 89 text
［ H T M L の 書 き 方 ］
イン デ ント や 改 行 は
人 間 が 読 み や すくす る
た め に や って る だ け 。
（ 機 械 に は 必 要 な い ）
自分ひとりしか触らないコードなら、自分さえわかればいいとも言える。
Slide 90
Slide 90 text
［ H T M L の 書 き 方 ］
「 マ ー ク アップ」
M a r k u p
HTML
（など）
を使ってヒトの言葉を機械が認識できるようにしてあげること。テキストの構造化。
Slide 91
Slide 91 text
［ 3 . C S S の 書 き 方 ］
Slide 92
Slide 92 text
H T M L の 中 に 目 印 を つ け て
そこ の 見 た 目 を 決 め る
よ う な イメ ー ジ 。
［ C S S の 書 き 方 ］
Slide 93
Slide 93 text
. 目印 { こんな見ためにしたい }
［ C S S の 書 き 方 ］
基 本 、ぜ ん ぶ コレ 。
Slide 94
Slide 94 text
. 目印 { 〜〜〜〜〜 }
〜
［ C S S の 書 き 方 ］
CSS
HTML
Slide 95
Slide 95 text
color: 数値 ;
文字色
width: 数値 ;
幅
font-size: 数値 ;
文字サイズ
margin: 数値 ;
要素間のアキ
line-height: 数値 ;
行の高さ
［ C S S の 書 き 方 ］
基 本 、ぜ ん ぶ コレ 。
Slide 96
Slide 96 text
.main-heading { width: 100px; colo
［ C S S の 書 き 方 ］
Slide 97
Slide 97 text
.main-heading {
width: 100px;
color: #fefefe;
font-size: 20px;
}
［ C S S の 書 き 方 ］
基 本 、ぜ ん ぶ コレ 。
Slide 98
Slide 98 text
［ C S S の 書 き 方 ］
イン デ ント や 改 行 は
人 間 が 読 み や すくす る
た め に や って る だ け 。
（ 機 械 に は 必 要 な い ）
自分ひとりしか触らないコードなら、自分さえわかればいいとも言える。
Slide 99
Slide 99 text
［ 4 . 見 え 方 ル ー ル ］
ボックスモデル ／ ブロックレベル要素 ／ インライン要素 ／ 時計回り
Slide 100
Slide 100 text
ボ ックスモ デ ル
B o x M o d e l
［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
Slide 101
Slide 101 text
デ ザ イン ツ ー ル の よ う な
ボック ス の 考 え 方 が
コ ード に も あ る 。
［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
Slide 102
Slide 102 text
［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
こんにちは
行 の 高 さ を 0 として 考 え た 時 … 。 HTMLSlide 103
Slide 103 text
こんにちは
［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
デ フォルト は ちょっと 不 自 然 … 。
高さや幅を指定しても、アキの設定がその外にあるからちょっと不慣れな感じ。ボックスでエリアを区切りにくい。
height
width
padding
margin
線幅も
寸法に
加味される
border
Slide 104
Slide 104 text
［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
p { box-sizing: border-box; }
寸 法 の 基 準 を 変 え る お まじ な い ♡
CSS
Slide 105
Slide 105 text
margin
［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
慣 れ た 感 じ の サ イ ズ 感 。
「線の位置」を内側に設定したような感じになる。padding は詰め物＝内側のアキ、margin は外側のアキ。
height
width
padding
こんにちは
border
線幅も
寸法に
加味される
Slide 106
Slide 106 text
ブ ロッ クレ ベ ル 要 素
B l o c k - L e v e l E l e m e n t s
［ 見 え 方 ル ー ル ：ブ ロ ッ クレ ベ ル 要 素 ］
Slide 107
Slide 107 text
~,
,
,
- ,
- , など なにもしないと横幅 100% でタテ積みになる 「かたまり」 ［ 見 え 方 ル ー ル ：ブ ロ ッ クレ ベ ル 要 素 ］ 画面や 親要素の幅 幅を指定したとき 左右センターにしたとき ふつうこうなる。とにかく下へ下へタテ積みが基本
- ,
Slide 108
Slide 108 text
イン ラ イン 要 素
I n l i n e E l e m e n t s
［ 見 え 方 ル ー ル ：イ ン ラ イ ン 要 素 ］
Slide 109
Slide 109 text
Slide 110
Slide 110 text
時 計 回 り
C l o c k w i s e
［ 見 え 方 ル ー ル： 時 計 回 り ］
Slide 111
Slide 111 text
［ 見 え 方 ル ー ル： 時 計 回 り ］
.class { margin: 0 5px
20px
10px
; }
な に 言 ってっ か わ か ん ね え よ！
！
！
CSS
Slide 112
Slide 112 text
［ 見 え 方 ル ー ル： 時 計 回 り ］
こう い う の は だ い た い 時 計 回 り 。
bottom
top
right
left
Slide 113
Slide 113 text
［ 見 え 方 ル ー ル： 時 計 回 り ］
.class { margin: 0 5px
20px
10px
; }
僕 は い つ も「 上 ・ 右 ・下 ・ 左 … 」
と
心 の な か で 唱 え て ま す 。
0
10 5
20
Slide 114
Slide 114 text
［ 見 え 方 ル ー ル ：オ マ ケ ］
レ イ ア ウト は「 d i s p l a y : f l e x ; 」
f l e x b o x
要素を横に並べたり、グリッ
ド状にするレイアウトは、新しめの技術「Flexbox」を使おう
！
IE などでバグがあったりするけれど、無理やり並べるのではない、レイアウトのために作られた CSS なので、断然とっつきやすい。
CSS3 の Flexbox でグリッ
ドレイアウトしてみる | webOpixel - http://www.webopixel.net/html-css/1216.html
Slide 115
Slide 115 text
［ 5 . デ ベ ロッパ ー ツ ー ル ］
Slide 116
Slide 116 text
世の中にすでにあるサイトや、エンジニアさんが組み上げてくれたページを
どうなっているのか覗いたり、自分が好きなようにいじって調整できる。数値がわかるから、どう調整してほしいか伝えやすくなる
！
「もうちょっとだけ…」とか曖昧なこと言わなくて済む。
［ デ ベ ロ ッ パ ー ツ ー ル ］
右 クリッ ク > 要 素 を 検 証
Slide 117
Slide 117 text
［ デ ベ ロ ッ パ ー ツ ー ル ］
1
2
3
そのコードの
スタイル
（CSS）を
教えてくれる。
上から順に
強く掛かってる。
コード上の
どこのこと
なのかを
教えてくれる
表 示 を 見 な が ら 上 書 き で き る
HTML
CSS
Slide 118
Slide 118 text
テキストを打ち替えたり要素を増やしたりして
CSS の数値を変えたり追記したりして
シ ミュレ ー ション で き る
デ ィテ ー ル の 調 整 が で き る
［ デ ベ ロ ッ パ ー ツ ー ル ］
ブラウザ上で試せるだけなので、サーバーのコードは変わらない。
コードが壊れることがないので、安心して手元で試すことができる。
Slide 119
Slide 119 text
デ ザ イナ ー の 味 方！
エ ン ジ ニ ア さ ん と の 意 思 疎 通 が
し や すくな る！ 具 体 的 に 伝 えら れ る！
［ デ ベ ロ ッ パ ー ツ ー ル ］
Slide 120
Slide 120 text
- お さ ら い： 雰 囲 気 で 覚 え る イ ン タ ー ネッツ -
［ 1. ブ ラウザ とサ ー バ ー ］
［ 2 . H T ML の 書 き 方 ］
［ 3. C S S の 書 き 方 ］
［ 4 . 見 え 方 ル ー ル ］
［ 5 . デ ベロッパ ーツー ル ］
Slide 121
Slide 121 text
I n D e s i g n
触 った こ と あ る ひ と は
な ん と な ー く
わ か る の で は？
僕だけ？
Slide 122
Slide 122 text
コン テンツ を 整 理（ 構 造化 ）
して 、
そ れ ぞ れ に 指 定（ スタイリング ）
をする 、
とい う の は 変 わ ら な い 。
Slide 123
Slide 123 text
試 行 錯 誤 の 方 法 が
い き な り 文 字 列 に な る か ら
戸 惑 うだ け 。
で き る だ け 慣 れ た 感 覚 に
近 づ け て あ げ る ことで
とっか か り が で き る！
Slide 124
Slide 124 text
とっか か りさ え で き れ ば 、
答 え は ぜ ん ぶ
ネット 上 に 書 い て あ る！
Slide 125
Slide 125 text
とに か くラ クに 。
気 持 ち の ハードル を
下 げ よう 。
「 ま ず カ タ チ か ら 」
Slide 126
Slide 126 text
本 当 は
細 か な ル ー ル も あ るし 、
完 全 に 理 解 し よ うとす る と
い つ ま で た って も
書 き 始 め ら れ な い 。
Slide 127
Slide 127 text
本 来 大 事 な の は 、
コ ード を 理 解 して い る こと 。
Slide 128
Slide 128 text
ま ず 抵 抗 感 を 減 らして か ら 、
基 礎 を 学 ぼ う！
Slide 129
Slide 129 text
E n joy ,
C o d i n g !
Slide 130
Slide 130 text
おわり。