$30 off During Our Annual Pro Sale. View Details »

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

sekig
March 21, 2017

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

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

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

sekig

March 21, 2017
Tweet

More Decks by sekig

Other Decks in Design

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