About HTML and CSS Coding for beginners. (written by japanese)

1. HTML/CSS 勉強会 2015
Coding コース (0)
何をやるのか、をイメージしよう

2. 始める前に、、、
• マシンをお持ちになった方
– マシン 起動してください
– ブラウザ 立ち上げてください
• https://gitter.im/SatoshiMukainakano/exposedTrial
– テキストエディタ 立ち上げてください
• ファイルを開く・保存する・閉じる、出来ますか？

3. 今回は、、、
• ブラウザでHTMLを表示させよう
• HTMLを書こう
• CSSを書こう
• 作業の流れを掴もう
• And more

4. 今回は、、、
• →【ブラウザでHTMLを表示させよう】.
• HTMLを書こう
• CSSを書こう
• 作業の流れを掴もう
• And more

5. ブラウザでHTMLを表示
表示させる方法は、、、、
• URLを入力する
• ブラウザにHTMLを直接ドロップ

6. ブラウザでHTMLを表示
▼じゃあ、やってみましょう、の 1
http://th-fs217.sakura.ne.jp/lib/work/2015/
＞「0-1」 というリンクをクリック。
＞ 何かテキストが表示されましたか？
▼じゃあ、やってみましょう、の 2
↑このサイトから HTML を 【ダウンロード】 して、
ブラウザにぶっこんでみる。

8. ブラウザでHTMLを表示
Q. 「HTML を保存する」 のようなメニューを使った？
× ブラウザが親切にタグを書きかえて保存するケース有
• 今後、うまくいかなくなる可能性あります
• 「ソースを表示」 からソースを得る癖を

9. 今回は、、、
• ブラウザでHTMLを表示させよう .
• →【HTMLを書こう】.
• CSSを書こう
• 作業の流れを掴もう
• And more

10. HTMLを書く
「片腕を一晩お貸ししてもいいわ。」と娘は
言った。
そして右腕を肩からはずすと、
それを左手に持って私の膝に置いた。
（川端康成 『片腕』）

11. HTMLを書く
「片腕を一晩お貸ししてもいいわ。」と娘は
言った。
そして右腕を肩からはずすと、
それを左手に持って私の膝に置いた。
（川端康成 『片腕』）
→ 「 から 」 まで、発した言葉
→ （ から ） まで、作品の情報
→ 『 から 』 まで、作品名

12. HTMLを書く
片腕を一晩お貸ししてもいいわ。と娘は言った。
そして右腕を肩からはずすと、
それを左手に持って私の膝に置いた。
川端康成 片腕
…… カッコのない、プレーンなテキスト
…… これにカッコをつけていく

13. HTMLを書く
• 言葉 や 情報 を並べる
• どこ から どこ まで 何 か、をしるし付ける
• この時点では 装飾・ビジュアル は考えない.

14. HTMLを書く
基本的な書き方）
「どこ から どこ までが 何 だ」
<何>情報やテキスト</何>
「から」 のときは < と > で 何 をくくり、
「まで」 のときは </ と > で 何 をくくり、
その間 に 情報やテキスト を入れる。

15. HTMLを書く
<見出し>サンプルのHTML</見出し>
<段落>このテキストは、これで段落1つ</段落>
<段落>特に<重要>ここ</重要>が重要なとこ</段落>

16. HTMLを書く
• pタグ
… 段落、まとまり
• hタグ （h1、h2、h3、h4 …）
… 見出し
• strongタグ
… このテキストは重要

17. HTMLを書く
<h1>サンプルのHTML</h1>
<p>このテキストは、これで段落1つ</p>
<p>特に<strong>ここ</strong>が重要なとこ</p>

18. HTMLを書く
▼じゃあ、書いてみましょう、の 1
http://th-fs217.sakura.ne.jp/lib/work/2015/
＞「0-2」 というリンクをクリック。
＞ 何も表示されないHTMLです。
＞ ソースを開いて、手元に保存してください。
「これはテストのテキストです」 を pタグ に入れる。
その pタグ に続けて pタグ を並べ、自由に文字列を入れる。
最初のpタグ の前に h1タグ を置き、
「HTMLの訓練課題・回答」 を入れる。
全部の h1タグ・pタグ を divタグ でくくる。

21. 今回は、、、
• ブラウザでHTMLを表示させよう .
• HTMLを書こう.
• →【CSSを書こう】.
• 作業の流れを掴もう
• And more

22. CSSを書く
• 装飾、レイアウト・余白、動き を設定する
• 設定は HTML の タグ を対象に
• タグが、装飾の 選択範囲 のような役割。
基本的に、タグ が設定されてないような範囲
だけに 装飾・ビジュアル を設定することはで
きない。（例外あり）.

23. CSSを書く
基本的な書き方）
設定した対象・タグ{
何の設定 : 設定内容;
}

24. CSSを書く
例）
「pタグ の中では テキストの色 を #333 にする」
p{
color:#333;
}

25. CSSを書く
例）
「divタグ の中では テキストの色を #555 に、
背景色を #eee; にする」
div{
color:#555;
background-color:#eee;
}

26. CSSを書く
CSS で設定できること：
• 文字の装飾、区画の装飾、グラデーション
• レイアウト、余白
• 動き

27. CSSを書く
※ CSS でできることに関しては、
勉強会の 「Styling コース」 のほうで
もう少し深く触れる予定です。

28. CSSを書く
▼じゃあ、書いてみましょう、の 2
さきほど書いた HTML をそのまま使いましょう。
pタグ の テキストの色 を #999 にかえる。
divタグ の 背景色 を #dedede にかえる。

31. 今回は、、、
• ブラウザでHTMLを表示させよう .
• HTMLを書こう.
• CSSを書こう.
• →【作業の流れを掴もう】 .
• And more

32. コーディング作業の流れ
【納品する物】 …… 環境や案件によってさまざま →要 確認
• HTML、CSS などの コード
• 画像、イメージ などの リソース
コード＝ ごりごり書く
リソース＝ がりがり作る
★コード と リソース を関連付ける

33. コーディング作業の流れ
特に HTML では、、、
• 言葉 や 情報 を並べ、 「意味・役割」 でくくる
特に CSS では、、、
• どこ を どのように 装飾するか を記述する
合わせて 画像 を、、、
• 埋め込めるようにスライス
ブラウザ や 端末 などで表示確認
まとまったら、納める

34. コーディング作業の流れ
ざっくり概要は、たった これ【だけ】

35. コーディング作業の流れ

36. 「だけ」じゃない戦い
▼予定の対戦カード
– ブラウザ、OS
– デバイス（PC、スマホ、タブレット
– データ量
– 非 人間
• 検索エンジン、音声ブラウザ、プリンタ、 etc.
– バグ
– 数々の タグ・パラメータ
– 取りかかっている案件の仕様

37. コーディング作業
最初の時点から
「完璧なコード」 を 考えない。
「最適なコード」 を 一発で作ろう と考えこまない。
１つずつ、少しずつ。

38. 今回は、、、
• ブラウザでHTMLを表示させよう .
• HTMLを書こう.
• CSSを書こう.
• 作業の流れを掴もう .
• →【And more】.

39. And more . . .
調べてみてください。
• HTML
– aタグ、buttonタグ、
ulタグ、olタグ、liタグ、
h1～h6タグ、imgタグ、strongタグ、
form、inputタグ、textareaタグ、selectタグ
• CSS
– margin、padding、border、
color、background

40. 今日はここまで
お疲れさまでした。散会いたします。
質問・相談などございましたら、どうぞ。

41. ここにタイトル
ここに本文