コーディングなんかこわくない！ アレルギー克服講座

HTMLやCSSなどのコードにアレルギーのあるデザイナー向けに「ひとまずわかった気になって苦手意識を克服する」ための講座を開きました。

--
コーディング苦手意識調査してみた（結果発表）
http://www.hanarenoheya.com/note/enquete/

Transcript

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