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

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

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

Transcript

1. 関口 裕
   コ ー デ ィ ン グ な ん か こ わ く な い ！
   ［ と り あ え ず 慣 れ よ う 編 ］
   ア レ ル ギ ー 克 服 講 座
   

   View Slide

2. ［ 目的 ］
   とりあえずコードに慣れて、苦手意識を克服する
   ［ 対象 ］
   主にデザイナー。HTML と CSS
   とにかく
   3 3 3 3
   最初の一歩！
   

   View Slide

3. !
   今回は、まずわかった気になって
   「苦手意識をとりのぞく」
   ことが目的です。
   一部正確でない箇所もあるので、
   うまくいかないときや、気になったところは
   積極的にググっていきましょう！
   

   View Slide

4. コ ー ディン グ。
   

   View Slide

5. H T M L
   

   View Slide

6. C S S
   

   View Slide

7. j a v a S c r i p t
   

   View Slide

8. こ わ い で すよ ね 。
   

   View Slide

9. わ か りま す 。
   

   View Slide

10. み ん な の 声 、 あ つ め まし た 。
    

    View Slide

11. コーディング
    苦 手
    意 識
    調 査
    期間：2017 年 3 月 16 日〜 21日
    回答者：205 人
    Typeform による SNS アンケート
    しました！
    

    View Slide

12. 何がわからないのかわからない／本とかサイトとか書いてある通りにやっても、ちゃんとならへん！／全く理解がで
    きない！／答え ( デザイン ) があるところ。数学やってるときと同じ気持ちになる。デザインは一応答えがあるけど
    やり方は割とは自由だし提案もできるけど…。あとデバイスやブラウザによって動かない表示されないとき苛立ちが
    最高潮に…そして伝説へ…／直感的にレイアウト出来ないから／たった 1 つの正解に辿り着くまでに、何時間もか
    かる所／シリコンバレーではコードかけないデザイナーとか終わりみたいな記事をよく見かけるので、余計にきらい
    になってきた。 ほんとは 1 から勉強したいです。／構造とルールがわからない あと英語／まったくわからない／数
    学の授業みたいな難しさ。わかったと思っても応用編でつまづく／どれがほんまかわからへんとこ。／苦手というか
    そもそもデザイナーがそこまで携わるにはそれなりに学習や経験が必要になってしまうので、その労力はむしろデザ
    インにつぎ込みたい。／理解できる気がしない／ " 言語 " と認識できない／数学がそもそも苦手なので何かの単位と
    数字が並んでるだけで脳にフィルタがかかる。 そこに em やら rem やらが追加されもっと分からない。 わからな
    いけど紙並みに組版したいのに現状厳しい。 ボタン一つでも の時、 の時、 の時とか色々あって何
    が違うのかまだはっきりわからない。画像一つ置くにしてもわざわざ background-image にしなければならないと
    か謎。js や PHP はもってのほかだけど PHP のほうがまだ仲良くなれそうな気がする（PHP のほうが英語に近い印
    象）
    ブロック要素だけど高さや幅がないから content: ''
    ；
    とかの概念も謎。
    ブロックとは…／はじめての html がテー
    ブルレイアウトだったので、float が出てきたあたりからアレルギーです／意味が分からない !!! ／出来上がったもの
    を見ても喜びを感じられない。狙い通りに作って、
    狙い通りに出来上がって、
    そりゃそうだよね、
    そう作ったんだから、
    フーン……で終わり／習得する時間がない。その悔しさから、妙に動きのあるサイトに怒りすら覚えてくる／英数字
    の羅列がいやだ！／すでに出来てる人が怖い／ IE と Android ／英語がわかんないからスペルミスして動かないとこ
    ろが嫌。／勉強不足だと思うけど、どこから手をつけていいかわからない／英数字の羅列がそもそも怖いです。活字
    恐怖症に近いものがあるかもしれません。英数字が敷き詰められた画面を見るだけで 「うっ」となります／資料など
    を参考に組んでみる 動かない→なんで動かないのか分からない 動く→なんで動いたのか分からない／なにができる
    か想像がつかない。しくみがわからない。でも使えたらきっと素敵… デ ータ：
    「コーディング 苦 手 意 識 調 査！」“H T ML と C S S が 苦 手 ” な セグメントより抜 粋
    

    View Slide

13. 何がわからないのかわからない／本とかサイトとか書いてある通りにやっても、ちゃんとならへん！／全く理解がで
    きない！／答え ( デザイン ) があるところ。数学やってるときと同じ気持ちになる。デザインは一応答えがあるけど
    やり方は割とは自由だし提案もできるけど…。あとデバイスやブラウザによって動かない表示されないとき苛立ちが
    最高潮に…そして伝説へ…／直感的にレイアウト出来ないから／たった 1 つの正解に辿り着くまでに、何時間もか
    かる所／シリコンバレーではコードかけないデザイナーとか終わりみたいな記事をよく見かけるので、余計にきらい
    になってきた。 ほんとは 1 から勉強したいです。／構造とルールがわからない あと英語／まったくわからない／数
    学の授業みたいな難しさ。わかったと思っても応用編でつまづく／どれがほんまかわからへんとこ。／苦手というか
    そもそもデザイナーがそこまで携わるにはそれなりに学習や経験が必要になってしまうので、その労力はむしろデザ
    インにつぎ込みたい。／理解できる気がしない／ " 言語 " と認識できない／数学がそもそも苦手なので何かの単位と
    数字が並んでるだけで脳にフィルタがかかる。 そこに em やら rem やらが追加されもっと分からない。 わからな
    いけど紙並みに組版したいのに現状厳しい。 ボタン一つでも の時、 の時、 の時とか色々あって何
    が違うのかまだはっきりわからない。画像一つ置くにしてもわざわざ background-image にしなければならないと
    か謎。js や PHP はもってのほかだけど PHP のほうがまだ仲良くなれそうな気がする（PHP のほうが英語に近い印
    象）
    ブロック要素だけど高さや幅がないから content: ''
    ；
    とかの概念も謎。
    ブロックとは…／はじめての html がテー
    ブルレイアウトだったので、float が出てきたあたりからアレルギーです／意味が分からない !!! ／出来上がったもの
    を見ても喜びを感じられない。狙い通りに作って、
    狙い通りに出来上がって、
    そりゃそうだよね、
    そう作ったんだから、
    フーン……で終わり／習得する時間がない。その悔しさから、妙に動きのあるサイトに怒りすら覚えてくる／英数字
    の羅列がいやだ！／すでに出来てる人が怖い／ IE と Android ／英語がわかんないからスペルミスして動かないとこ
    ろが嫌。／勉強不足だと思うけど、どこから手をつけていいかわからない／英数字の羅列がそもそも怖いです。活字
    恐怖症に近いものがあるかもしれません。英数字が敷き詰められた画面を見るだけで 「うっ」となります／資料など
    を参考に組んでみる 動かない→なんで動かないのか分からない 動く→なんで動いたのか分からない／なにができる
    か想像がつかない。しくみがわからない。でも使えたらきっと素敵… デ ータ：
    「コーディング 苦 手 意 識 調 査！」“H T ML と C S S が 苦 手 ” な セグメントより抜 粋
    

    View Slide

14. わ か りま す 。
    

    View Slide

15. な ん か わ か ん な い 。
    で き る気 が し な い 。
    勉 強 す ること 多 す ぎ 。
    達 成 感 低 い 。
    

    View Slide

16. （ なん か 嫌 。 ）
    

    View Slide

17. 僕 も そ うで し た 。
    

    View Slide

18. そ ん な 僕 が 考 え た 、
    コ ード ア レ ル ギ ー を
    乗 り 越 え る コ ツ
    

    View Slide

19. 「 ま ず カ タ チ か ら 」
    

    View Slide

20. ウェブ 開 発 は
    メモ 帳 で で き る
    “
    ”
    

    View Slide

21. View Slide

22. View Slide

23. 一 発 で
    コ ード 嫌 い に な る に
    決 まって る！
    

    View Slide

24. 「 ま ず カ タ チ か ら 」
    

    View Slide

25. ま ず コレ を 入 れ よ う
    Brackets
    なに も 考 えず、
    http://brackets.io
    最初から日本語化されてる。マシンにいろいろ設定しなくてもこれだけで完結する。みんなだいすき Adobe 製。
    

    View Slide

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
    この拡張機能をいれる
    なに も 考 えず、
    

    View Slide

27. - 「 ま ず カ タ チ か ら 」
    は じ め る コ ー デ ィン グ の コ ツ -
    ［ 1. ビ ジュア ル 化 する ］
    ［ 2 . 機 械 に 書 か せ る ］
    ［ 3. 勉 強しようとしない ］
    ［ 4 . カンプ を 再 現しない ］
    

    View Slide

28. ［ 1 . ビ ジュア ル 化 す る ］
    

    View Slide

29. ［ 1 . ビ ジ ュア ル 化 す る ］
    カ ラ ー テ ー マ
    S y n t a x h i g h l i g h t i n g
    

    View Slide

30. コ ード の 意 味 や 構 造 に そ って
    色 付 け してくれ る！
    ［ 1 . ビ ジ ュア ル 化 す る ］
    なんとなくの文字列が、ちょっとだけ意味を持ったものに見えてくる。お好みのテーマをいれて、気分を盛り上げよう。気分だいじ
    ！
    これはシンプルで強力な人気エディタ、
    「Sublime Text」の画面。
    

    View Slide

31. panda
    ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

32. pen-paper-coffee
    ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

33. mahou-shoujo
    ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

34. space-cowboy
    ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

35. sonho
    ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

36. chester
    ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

37. candy-light
    ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

38. ［ 1 . ビ ジ ュア ル 化 す る ］
    作 業 環 境 は 大 切 。
    お 好 み の テ ー マ で
    気 分 を 盛 り 上 げ よ う！
    （ 気 分 侮 る べ か ら ず ）
    巷では
    「Monokai」というテーマが人気です
    

    View Slide

39. ［ 1 . ビ ジ ュア ル 化 す る ］
    ラ イ ブ プ レビ ュー
    L i v e p r e v i e w
    

    View Slide

40. リ ア ル タ イム に 結 果 が 見 れ る！
    トライアンドエラーがその場でできる。さわっている所がハイライトされるので、自分がやっていることが視覚的にわかる。
    ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

41. ［ 1 . ビ ジ ュア ル 化 す る ］
    

    View Slide

42. ［ 1 . ビ ジ ュア ル 化 す る ］
    デ ザ イン ツ ー ル の よ う に
    さ わって わ か る 、
    直 感 的 な 環 境 に 近 づ けよ う！
    （ ト ラ イ & エ ラ ー は 大 切 ）
    

    View Slide

43. ［ 1 . ビ ジ ュア ル 化 す る ］
    と に か くグ ラフィカ ル にして 、
    た だ 文 字 を 打 つ だ け じ ゃ な い
    作 業 環 境 にし よ う
    見 え る 化 ま と め
    

    View Slide

44. ［ 2 . 機 械 に 書 か せ る ］
    

    View Slide

45. ［ 2 . 機 械 に 書 か せ る ］
    コ ードヒント
    A u t o c o m p l e t e
    

    View Slide

46. 途 中 ま で 書 け ば 、
    書 き た い も の を 表 示 してくれ る！
    数文字入れるだけで候補が出るので、全部打ち込まなくていい。スペルミスが減る。うろ覚えでも OK
    数文字打ち込むだけで、候補が出てくる
    ［ 2 . 機 械 に 書 か せ る ］
    

    View Slide

47. ［ 2 . 機 械 に 書 か せ る ］
    エ メット
    E m m e t
    

    View Slide

48. 途 中 ま で 書 け ば 、
    間 違 い の な い 雛 形 を 書 い てくれ る！
    必要な記号や閉じタグなど、書かなければならないものを勝手に用意してくれるので、うろ覚えでも OK。
    「 ! 」や
    「div」などのあとで Tab キーを押すと 雛形を展開するなど、必要なものを勝手に入れてくれる
    ［ 2 . 機 械 に 書 か せ る ］
    

    View Slide

49. ［ 2 . 機 械 に 書 か せ る ］
    う ろ 覚 え で も い い か ら 、
    ま ず カ タ チ が 見 え る ま で を
    短 縮 して み よ う！
    機 械 に 書 か せ る ま と め
    

    View Slide

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 + ↑や↓で ちくちく 変 更 で き る
    

    View Slide

51. ［ 3. 勉 強 しよ うとし な い ］
    

    View Slide

52. ［ 3 . 勉 強 し よ う とし な い ］
    グ ー グ ル 先 生（ 笑 ）
    G o o g l e
    

    View Slide

53. グ グ れ ば すぐ 出 てくる！
    コ ード に 真 正 面 か ら 向 き 合 わ な い
    そもそもインターネッ
    トを作っている HTML や CSS。
    「HTML ◯◯◯」
    「CSS ◯◯◯」とググればすぐに出てくるので、
    いきなり本を最初から最後まで読破しようとしたり、理解できるまで手を止めたりしない。
    ［ 3 . 勉 強 し よ う とし な い ］
    

    View Slide

54. ［ 3 . 勉 強 し よ う とし な い ］
    い き な り マ ス タ ー は ムリ 。
    覚 え よ うと せ ず 、
    つ ど 調 べ る よ う にし よ う 。
    勉 強 し よ う とし な い ま と め
    

    View Slide

55. ［ 4 . カンプ を 再 現 し な い ］
    

    View Slide

56. ［ 4 . カ ン プ を 再 現 し な い ］
    イン ブ ラ ウ ザ・デ ザ イン
    D e s i g n i n g i n t h e b r o w s e r
    

    View Slide

57. 理 想 を 追 わ な い 。
    コ ード か ら 始 め て 、調 整 して い く！
    試行錯誤はデザインツールのほうが速い。ディテールを詰めるのも速い。おまけにコーディングは慣れてない。
    いきなりカンプを再現しようとせず、まずは要素を書き出して
    （ブラウザ上に置いて）
    、それをスタイリングして作っていく気持ちでやってみよう。
    ［ 4 . カ ン プ を 再 現 し な い ］
    

    View Slide

58. コンテンツインベントリ
    ： コンテンツ一覧。 ページ単位ではなくコンテンツ自体を要素ごとに一覧化して、媒体の内容を整理したもの。
    ここではページに依存しているニュアンスになっているけれど、
    「素の原稿」をシンプルにリニアな状態で記したものという意味で使っています。
    ［ 4 . カ ン プ を 再 現 し な い ］
    （ ち な み に ）
    必 要 な 情 報 ・ 要 素 を 、
    とり あ え ず
    上 か ら 順 に（ H T M L で ）書 き 下 す
    コ ン テ ン ツ イ ン ベ ントリ 作 成 と 同 じ よ う な も の
    

    View Slide

59. コ ード で デ ザ イン す る と
    レス ポ ン シ ブ な デ ザ イン が カ ン タ ン！
    @ m e d i a 〜
    要素をタテ積みにするところから始めてレイアウトを組むことになるインブラウザ・デザイン。
    好きなところでブレイクポイントを置いて、好きなだけ可変なレイアウトやスタイルをいじることができる。
    ［ 4 . カ ン プ を 再 現 し な い ］
    

    View Slide

60. せ っ か くコ ード を 書 くな ら 、
    コ ード 脳 で
    ゆ っくり 作 って み よ う 。
    カ ン プ を 再 現 し な い ま と め
    ［ 4 . カ ン プ を 再 現 し な い ］
    

    View Slide

61. - お さ ら い： 「 ま ず カ タ チ か ら 」
    は じ め る コ ー デ ィン グ の コ ツ -
    ［ 1. ビ ジュア ル 化 する ］
    ［ 2 . 機 械 に 書 か せ る ］
    ［ 3. 勉 強しようとしない ］
    ［ 4 . カンプ を 再 現しない ］
    

    View Slide

62. とに か くラ クに 。
    気 持 ち の ハードル を
    下 げ よう 。
    「 ま ず カ タ チ か ら 」
    

    View Slide

63. 「 カ タ チ」は エ ン ジ ニ ア の
    効 率 化 の た め の も の 。
    オートマ 車 に 乗 って い る
    よ う な も の と 考 え よ う 。
    

    View Slide

64. 本 来 大 事 な の は 、
    コ ード を 理 解 して い る こと 。
    ま ず 抵 抗 感 を 減 らして か ら 、
    基 礎 を 学 ぼ う！
    

    View Slide

65. 休 憩 。
    

    View Slide

66. 関口 裕
    コ ー デ ィ ン グ な ん か こ わ く な い ！
    ［ 雰 囲 気 で 覚 え よ う 編 ］
    ア レ ル ギ ー 克 服 講 座
    

    View Slide

67. ［ 目的 ］
    とりあえずコードに慣れて、苦手意識を克服する
    ［ 対象 ］
    主にデザイナー。HTML と CSS
    とにかく
    3 3 3 3
    最初の一歩！
    

    View Slide

68. !
    今回は、まずわかった気になって
    「苦手意識をとりのぞく」
    ことが目的です。
    一部正確でない箇所もあるので、
    うまくいかないときや、気になったところは
    積極的にググっていきましょう！
    

    View Slide

69. H T M L C S S J S
    イン タ ー ネット を つ くる
    主 役 の コ ード た ち
    （ ほかにもいっぱいあるよ
    ！ ）
    

    View Slide

70. H T M L
    ［ . h t m l ］
    機 械 に とって 、
    人 間 の 文 章 の 意 味 が
    わ か る よ う に
    印 を つ け た も の 。
    ペ ー ジ の 本 体 。
    

    View Slide

71. H T M L
    基 本 の お まじ な い
    最 低 限 、
    こ れ が あ れ ば O K 。
    拡 張 子 を 変 え る の を
    お 忘 れ な く！
    こ こ に 内 容 を 書 く
    
    
    
    
    ページタイトル
    
    
    
    
    

    View Slide

72. ［ . c s s ］
    配 置 や 色・ 間 隔 な ど 、
    体 裁 を つ くる も の 。
    ペ ー ジ の 見 た め を 変 え る
    指 示 書 き 。
    い ち ば ん 身 近 な や つ 。
    C S S
    

    View Slide

73. C S S
    基 本 の お まじ な い
    最 低 限 、
    こ れ が あ れ ば O K 。
    拡 張 子 を 変 え る の を
    お 忘 れ な く！
    @charset “utf-8”;
    こ こ に 内 容 を 書 く
    type=”text/css”>
    読み込み方：
    HTML の 〜 の中に下記を書く
    

    View Slide

74. J S
    ［ . j s ］
    H T M L や C S S を
    切 っ た 貼 っ た して 、
    動 か し た り す る も の 。
    手 元 に い る メ カ 。
    （ 最 近 は 主 役 と 補 佐 役 が い る ）
    

    View Slide

75. J S
    基 本 の お まじ な い
    ほ ん と は い ろ い ろ あ る け ど 、
    とり あ え ず い き な り 書 け ば
    動 く… は ず 。
    とくになし
    読み込み方：
    HTML の 〜 の中に下記を書く
    .js”>
    

    View Slide

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
    全 部 、
    た だ の テ キ ストファイル 。
    メモ帳で開けるよ。拡張子が違うだけ。
    

    View Slide

77. < 中身 >
    < イジる >
    < 体裁 >
    ＋
    H T M L C S S
    J S
    こ ん な
    イメ ー ジ 。
    

    View Slide

78. 厳 密 に 言 うと 違 うけど
    こ ん な 感 じ で 捉 え て ま す 。
    

    View Slide

79. - 雰 囲 気 で 覚 え る イ ン タ ー ネッツ -
    ［ 1. ブ ラウザ とサ ー バ ー ］
    ［ 2 . H T ML の 書 き 方 ］
    ［ 3. C S S の 書 き 方 ］
    ［ 4 . 見 え 方 ル ー ル ］
    ［ 5 . デ ベロッパ ーツー ル ］
    

    View Slide

80. ［ 1 . ブ ラ ウ ザ と サ ー バ ー ］
    

    View Slide

81. テ レ ビ と 放 送 局
    の よ う な イメ ー ジ 。
    ［ ブ ラ ウ ザ と サ ー バ ー ］
    

    View Slide

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
    

    View Slide

83. ［ 2 . H T M L の 書 き 方 ］
    

    View Slide

84. 文 章 を タ グ で 囲 って
    意 味 付 け す る 。
    よ う な イメ ー ジ 。
    ［ H T M L の 書 き 方 ］
    

    View Slide

85. < タグ > これは文章だよ < / タグ >
    ［ H T M L の 書 き 方 ］
    基 本 、ぜ ん ぶ コレ 。
    

    View Slide

86. ［ H T M L の 書 き 方 ］
    これは段落 < /p>
    パ ラ グ ラ フ
    これは見出し < /h1>
    ヘッ ダ ー
    基 本 形
    

    View Slide

87. ［ H T M L の 書 き 方 ］
    これはリンク < /a>
    ア ン カ ー ハ イパ ー な レファレン ス
    
    イメ ー ジ ソ ース オ ル タ ネ ート
    オ プ ション が 付 くや つ も あ る
    

    View Slide

88. ［ H T M L の 書 き 方 ］
    〜〜〜〜
    〜〜〜〜
    ブ レ イク
    〜〜いろいろ入る〜〜 < /div>
    デ ィビ ジ ョン
    単 体 の も の や 、グ ル ー ピ ン グ の た め の も の も
    

    View Slide

89. ［ H T M L の 書 き 方 ］
    イン デ ント や 改 行 は
    人 間 が 読 み や すくす る
    た め に や って る だ け 。
    （ 機 械 に は 必 要 な い ）
    自分ひとりしか触らないコードなら、自分さえわかればいいとも言える。
    

    View Slide

90. ［ H T M L の 書 き 方 ］
    「 マ ー ク アップ」
    M a r k u p
    HTML
    （など）
    を使ってヒトの言葉を機械が認識できるようにしてあげること。テキストの構造化。
    

    View Slide

91. ［ 3 . C S S の 書 き 方 ］
    

    View Slide

92. H T M L の 中 に 目 印 を つ け て
    そこ の 見 た 目 を 決 め る
    よ う な イメ ー ジ 。
    ［ C S S の 書 き 方 ］
    

    View Slide

93. . 目印 { こんな見ためにしたい }
    ［ C S S の 書 き 方 ］
    基 本 、ぜ ん ぶ コレ 。
    

    View Slide

94. . 目印 { 〜〜〜〜〜 }
    〜
    ［ C S S の 書 き 方 ］
    CSS
    HTML
    

    View Slide

95. color: 数値 ;
    文字色
    width: 数値 ;
    幅
    font-size: 数値 ;
    文字サイズ
    margin: 数値 ;
    要素間のアキ
    line-height: 数値 ;
    行の高さ
    ［ C S S の 書 き 方 ］
    基 本 、ぜ ん ぶ コレ 。
    

    View Slide

96. .main-heading { width: 100px; colo
    ［ C S S の 書 き 方 ］
    

    View Slide

97. .main-heading {
    width: 100px;
    color: #fefefe;
    font-size: 20px;
    }
    ［ C S S の 書 き 方 ］
    基 本 、ぜ ん ぶ コレ 。
    

    View Slide

98. ［ C S S の 書 き 方 ］
    イン デ ント や 改 行 は
    人 間 が 読 み や すくす る
    た め に や って る だ け 。
    （ 機 械 に は 必 要 な い ）
    自分ひとりしか触らないコードなら、自分さえわかればいいとも言える。
    

    View Slide

99. ［ 4 . 見 え 方 ル ー ル ］
    ボックスモデル ／ ブロックレベル要素 ／ インライン要素 ／ 時計回り
    

    View Slide

100. ボ ックスモ デ ル
     B o x M o d e l
     ［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
     

     View Slide

101. デ ザ イン ツ ー ル の よ う な
     ボック ス の 考 え 方 が
     コ ード に も あ る 。
     ［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
     

     View Slide

102. ［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
     こんにちは
     行 の 高 さ を 0 として 考 え た 時 … 。
     HTML
     

     View Slide

103. こんにちは
     ［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
     デ フォルト は ちょっと 不 自 然 … 。
     高さや幅を指定しても、アキの設定がその外にあるからちょっと不慣れな感じ。ボックスでエリアを区切りにくい。
     height
     width
     padding
     margin
     線幅も
     寸法に
     加味される
     border
     

     View Slide

104. ［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
     p { box-sizing: border-box; }
     寸 法 の 基 準 を 変 え る お まじ な い ♡
     CSS
     

     View Slide

105. margin
     ［ 見 え 方 ル ー ル： ボ ッ ク ス モ デ ル ］
     慣 れ た 感 じ の サ イ ズ 感 。
     「線の位置」を内側に設定したような感じになる。padding は詰め物＝内側のアキ、margin は外側のアキ。
     height
     width
     padding
     こんにちは
     border
     線幅も
     寸法に
     加味される
     

     View Slide

106. ブ ロッ クレ ベ ル 要 素
     B l o c k - L e v e l E l e m e n t s
     ［ 見 え 方 ル ー ル ：ブ ロ ッ クレ ベ ル 要 素 ］
     

     View Slide

107. ~, , , , , , など
     なにもしないと横幅 100% でタテ積みになる
     「かたまり」
     ［ 見 え 方 ル ー ル ：ブ ロ ッ クレ ベ ル 要 素 ］
     画面や
     親要素の幅
     幅を指定したとき
     左右センターにしたとき
     ふつうこうなる。とにかく下へ下へタテ積みが基本
     

     View Slide

108. イン ラ イン 要 素
     I n l i n e E l e m e n t s
     ［ 見 え 方 ル ー ル ：イ ン ラ イ ン 要 素 ］
     

     View Slide

109. , ,
     , , , , , など
     行の中の文章の一部
     ［ 見 え 方 ル ー ル ：イ ン ラ イ ン 要 素 ］
     ブロックレベル要素
     画面や
     親要素の幅
     

     View Slide

110. 時 計 回 り
     C l o c k w i s e
     ［ 見 え 方 ル ー ル： 時 計 回 り ］
     

     View Slide

111. ［ 見 え 方 ル ー ル： 時 計 回 り ］
     .class { margin: 0 5px
     20px
     10px
     ; }
     な に 言 ってっ か わ か ん ね え よ！
     ！
     ！
     CSS
     

     View Slide

112. ［ 見 え 方 ル ー ル： 時 計 回 り ］
     こう い う の は だ い た い 時 計 回 り 。
     bottom
     top
     right
     left
     

     View Slide

113. ［ 見 え 方 ル ー ル： 時 計 回 り ］
     .class { margin: 0 5px
     20px
     10px
     ; }
     僕 は い つ も「 上 ・ 右 ・下 ・ 左 … 」
     と
     心 の な か で 唱 え て ま す 。
     0
     10 5
     20
     

     View Slide

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
     

     View Slide

115. ［ 5 . デ ベ ロッパ ー ツ ー ル ］
     

     View Slide

116. 世の中にすでにあるサイトや、エンジニアさんが組み上げてくれたページを
     どうなっているのか覗いたり、自分が好きなようにいじって調整できる。数値がわかるから、どう調整してほしいか伝えやすくなる
     ！
     「もうちょっとだけ…」とか曖昧なこと言わなくて済む。
     ［ デ ベ ロ ッ パ ー ツ ー ル ］
     右 クリッ ク > 要 素 を 検 証
     

     View Slide

117. ［ デ ベ ロ ッ パ ー ツ ー ル ］
     1
     2
     3
     そのコードの
     スタイル
     （CSS）を
     教えてくれる。
     上から順に
     強く掛かってる。
     コード上の
     どこのこと
     なのかを
     教えてくれる
     表 示 を 見 な が ら 上 書 き で き る
     HTML
     CSS
     

     View Slide

118. テキストを打ち替えたり要素を増やしたりして
     CSS の数値を変えたり追記したりして
     シ ミュレ ー ション で き る
     デ ィテ ー ル の 調 整 が で き る
     ［ デ ベ ロ ッ パ ー ツ ー ル ］
     ブラウザ上で試せるだけなので、サーバーのコードは変わらない。
     コードが壊れることがないので、安心して手元で試すことができる。
     

     View Slide

119. デ ザ イナ ー の 味 方！
     エ ン ジ ニ ア さ ん と の 意 思 疎 通 が
     し や すくな る！ 具 体 的 に 伝 えら れ る！
     ［ デ ベ ロ ッ パ ー ツ ー ル ］
     

     View Slide

120. - お さ ら い： 雰 囲 気 で 覚 え る イ ン タ ー ネッツ -
     ［ 1. ブ ラウザ とサ ー バ ー ］
     ［ 2 . H T ML の 書 き 方 ］
     ［ 3. C S S の 書 き 方 ］
     ［ 4 . 見 え 方 ル ー ル ］
     ［ 5 . デ ベロッパ ーツー ル ］
     

     View Slide

121. I n D e s i g n
     触 った こ と あ る ひ と は
     な ん と な ー く
     わ か る の で は？
     僕だけ？
     

     View Slide

122. コン テンツ を 整 理（ 構 造化 ）
     して 、
     そ れ ぞ れ に 指 定（ スタイリング ）
     をする 、
     とい う の は 変 わ ら な い 。
     

     View Slide

123. 試 行 錯 誤 の 方 法 が
     い き な り 文 字 列 に な る か ら
     戸 惑 うだ け 。
     で き る だ け 慣 れ た 感 覚 に
     近 づ け て あ げ る ことで
     とっか か り が で き る！
     

     View Slide

124. とっか か りさ え で き れ ば 、
     答 え は ぜ ん ぶ
     ネット 上 に 書 い て あ る！
     

     View Slide

125. とに か くラ クに 。
     気 持 ち の ハードル を
     下 げ よう 。
     「 ま ず カ タ チ か ら 」
     

     View Slide

126. 本 当 は
     細 か な ル ー ル も あ るし 、
     完 全 に 理 解 し よ うとす る と
     い つ ま で た って も
     書 き 始 め ら れ な い 。
     

     View Slide

127. 本 来 大 事 な の は 、
     コ ード を 理 解 して い る こと 。
     

     View Slide

128. ま ず 抵 抗 感 を 減 らして か ら 、
     基 礎 を 学 ぼ う！
     

     View Slide

129. E n joy ,
     C o d i n g !
     

     View Slide

130. おわり。
     

     View Slide