HTML and CSS Class-c0 [2015]
-
Upload
satoshi-mukainakano -
Category
Education
-
view
152 -
download
2
Transcript of HTML and CSS Class-c0 [2015]
![Page 1: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/1.jpg)
HTML/CSS 勉強会 2015Coding コース (0)
何をやるのか、をイメージしよう
![Page 2: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/2.jpg)
始める前に、、、
• マシンをお持ちになった方
–マシン起動してください
–ブラウザ立ち上げてください• https://gitter.im/SatoshiMukainakano/exposedTrial
–テキストエディタ立ち上げてください• ファイルを開く・保存する・閉じる、出来ますか?
![Page 3: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/3.jpg)
今回は、、、
• ブラウザでHTMLを表示させよう
• HTMLを書こう
• CSSを書こう
• 作業の流れを掴もう
• And more
![Page 4: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/4.jpg)
今回は、、、
• →【ブラウザでHTMLを表示させよう】.
• HTMLを書こう
• CSSを書こう
• 作業の流れを掴もう
• And more
![Page 5: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/5.jpg)
ブラウザでHTMLを表示
表示させる方法は、、、、
• URLを入力する
• ブラウザにHTMLを直接ドロップ
![Page 6: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/6.jpg)
ブラウザでHTMLを表示
▼じゃあ、やってみましょう、の 1
http://th-fs217.sakura.ne.jp/lib/work/2015/>「0-1」 というリンクをクリック。> 何かテキストが表示されましたか?
▼じゃあ、やってみましょう、の 2
↑このサイトから HTML を【ダウンロード】して、ブラウザにぶっこんでみる。
![Page 7: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/7.jpg)
![Page 8: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/8.jpg)
ブラウザでHTMLを表示
Q. 「HTML を保存する」のようなメニューを使った?
×ブラウザが親切にタグを書きかえて保存するケース有
• 今後、うまくいかなくなる可能性あります
• 「ソースを表示」からソースを得る癖を
![Page 9: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/9.jpg)
今回は、、、
• ブラウザでHTMLを表示させよう .
• →【HTMLを書こう】.
• CSSを書こう
• 作業の流れを掴もう
• And more
![Page 10: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/10.jpg)
HTMLを書く
「片腕を一晩お貸ししてもいいわ。」と娘は言った。
そして右腕を肩からはずすと、
それを左手に持って私の膝に置いた。
(川端康成『片腕』)
![Page 11: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/11.jpg)
HTMLを書く
「片腕を一晩お貸ししてもいいわ。」と娘は言った。
そして右腕を肩からはずすと、
それを左手に持って私の膝に置いた。
(川端康成『片腕』)
→ 「から」まで、発した言葉→ (から)まで、作品の情報→ 『から』まで、作品名
![Page 12: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/12.jpg)
HTMLを書く
片腕を一晩お貸ししてもいいわ。と娘は言った。
そして右腕を肩からはずすと、
それを左手に持って私の膝に置いた。
川端康成片腕
…… カッコのない、プレーンなテキスト…… これにカッコをつけていく
![Page 13: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/13.jpg)
HTMLを書く
• 言葉や情報を並べる
• どこからどこまで何か、をしるし付ける
• この時点では装飾・ビジュアルは考えない.
![Page 14: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/14.jpg)
HTMLを書く
基本的な書き方)「どこからどこまでが何だ」
<何>情報やテキスト</何>
「から」のときは < と > で何をくくり、「まで」のときは </ と > で何をくくり、その間に情報やテキストを入れる。
![Page 15: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/15.jpg)
HTMLを書く
<見出し>サンプルのHTML</見出し>
<段落>このテキストは、これで段落1つ</段落><段落>特に<重要>ここ</重要>が重要なとこ</段落>
![Page 16: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/16.jpg)
HTMLを書く
• pタグ… 段落、まとまり
• hタグ(h1、h2、h3、h4 …)… 見出し
• strongタグ… このテキストは重要
![Page 17: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/17.jpg)
HTMLを書く
<h1>サンプルのHTML</h1>
<p>このテキストは、これで段落1つ</p><p>特に<strong>ここ</strong>が重要なとこ</p>
![Page 18: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/18.jpg)
HTMLを書く
▼じゃあ、書いてみましょう、の 1
http://th-fs217.sakura.ne.jp/lib/work/2015/>「0-2」 というリンクをクリック。> 何も表示されないHTMLです。> ソースを開いて、手元に保存してください。
「これはテストのテキストです」 を pタグ に入れる。
その pタグ に続けて pタグ を並べ、自由に文字列を入れる。
最初のpタグ の前に h1タグ を置き、「HTMLの訓練課題・回答」 を入れる。
全部の h1タグ・pタグ を divタグ でくくる。
![Page 19: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/19.jpg)
![Page 20: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/20.jpg)
![Page 21: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/21.jpg)
今回は、、、
• ブラウザでHTMLを表示させよう .
• HTMLを書こう.
• →【CSSを書こう】.
• 作業の流れを掴もう
• And more
![Page 22: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/22.jpg)
CSSを書く
• 装飾、レイアウト・余白、動きを設定する
• 設定は HTML のタグを対象に
• タグが、装飾の選択範囲のような役割。基本的に、タグが設定されてないような範囲だけに装飾・ビジュアルを設定することはできない。(例外あり).
![Page 23: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/23.jpg)
CSSを書く
基本的な書き方)
設定した対象・タグ{
何の設定 : 設定内容;
}
![Page 24: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/24.jpg)
CSSを書く
例)「pタグの中ではテキストの色を #333 にする」
p{
color:#333;
}
![Page 25: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/25.jpg)
CSSを書く
例)「divタグの中ではテキストの色を #555 に、背景色を #eee; にする」
div{
color:#555;background-color:#eee;
}
![Page 26: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/26.jpg)
CSSを書く
CSS で設定できること:
• 文字の装飾、区画の装飾、グラデーション
• レイアウト、余白
• 動き
![Page 27: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/27.jpg)
CSSを書く
※ CSS でできることに関しては、勉強会の「Styling コース」のほうでもう少し深く触れる予定です。
![Page 28: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/28.jpg)
CSSを書く
▼じゃあ、書いてみましょう、の 2
さきほど書いた HTML をそのまま使いましょう。
pタグ の テキストの色 を #999 にかえる。
divタグ の 背景色 を #dedede にかえる。
![Page 29: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/29.jpg)
![Page 30: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/30.jpg)
![Page 31: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/31.jpg)
今回は、、、
• ブラウザでHTMLを表示させよう .
• HTMLを書こう.
• CSSを書こう.
• →【作業の流れを掴もう】 .
• And more
![Page 32: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/32.jpg)
コーディング作業の流れ
【納品する物】 …… 環境や案件によってさまざま →要確認
• HTML、CSS などのコード
• 画像、イメージなどのリソース
コード= ごりごり書く
リソース= がりがり作る
★コードとリソースを関連付ける
![Page 33: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/33.jpg)
コーディング作業の流れ
特に HTML では、、、
• 言葉や情報を並べ、「意味・役割」でくくる
特に CSS では、、、
• どこをどのように装飾するかを記述する
合わせて画像を、、、
• 埋め込めるようにスライス
ブラウザや端末などで表示確認
まとまったら、納める
![Page 34: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/34.jpg)
コーディング作業の流れ
ざっくり概要は、たったこれ【だけ】
![Page 35: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/35.jpg)
コーディング作業の流れ
![Page 36: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/36.jpg)
「だけ」じゃない戦い
▼予定の対戦カード
–ブラウザ、OS
–デバイス(PC、スマホ、タブレット
–データ量
–非人間• 検索エンジン、音声ブラウザ、プリンタ、 etc.
–バグ
–数々のタグ・パラメータ
–取りかかっている案件の仕様
![Page 37: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/37.jpg)
コーディング作業
最初の時点から
「完璧なコード」を考えない。「最適なコード」を一発で作ろうと考えこまない。
1つずつ、少しずつ。
![Page 38: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/38.jpg)
今回は、、、
• ブラウザでHTMLを表示させよう .
• HTMLを書こう.
• CSSを書こう.
• 作業の流れを掴もう .
• →【And more】.
![Page 39: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/39.jpg)
And more . . .
調べてみてください。
• HTML
– aタグ、buttonタグ、ulタグ、olタグ、liタグ、h1~h6タグ、imgタグ、strongタグ、form、inputタグ、textareaタグ、selectタグ
• CSS
– margin、padding、border、color、background
![Page 40: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/40.jpg)
今日はここまで
お疲れさまでした。散会いたします。
質問・相談などございましたら、どうぞ。
![Page 41: HTML and CSS Class-c0 [2015]](https://reader031.fdocuments.net/reader031/viewer/2022020218/55a692211a28ab564d8b46b5/html5/thumbnails/41.jpg)
ここにタイトル
ここに本文