HTML/CSS 勉強会 2015Coding コース (0)

何をやるのか、をイメージしよう

始める前に、、、

• マシンをお持ちになった方

–マシン起動してください

–ブラウザ立ち上げてください• https://gitter.im/SatoshiMukainakano/exposedTrial

–テキストエディタ立ち上げてください• ファイルを開く・保存する・閉じる、出来ますか？

今回は、、、

• ブラウザでHTMLを表示させよう

• HTMLを書こう

• CSSを書こう

• 作業の流れを掴もう

• And more

今回は、、、

• →【ブラウザでHTMLを表示させよう】.

• HTMLを書こう

• CSSを書こう

• 作業の流れを掴もう

• And more

ブラウザでHTMLを表示

表示させる方法は、、、、

• URLを入力する

• ブラウザにHTMLを直接ドロップ

ブラウザでHTMLを表示

▼じゃあ、やってみましょう、の 1

http://th-fs217.sakura.ne.jp/lib/work/2015/＞「0-1」 というリンクをクリック。＞ 何かテキストが表示されましたか？

▼じゃあ、やってみましょう、の 2

↑このサイトから HTML を【ダウンロード】して、ブラウザにぶっこんでみる。

ブラウザでHTMLを表示

Q. 「HTML を保存する」のようなメニューを使った？

×ブラウザが親切にタグを書きかえて保存するケース有

• 今後、うまくいかなくなる可能性あります

• 「ソースを表示」からソースを得る癖を

今回は、、、

• ブラウザでHTMLを表示させよう .

• →【HTMLを書こう】.

• CSSを書こう

• 作業の流れを掴もう

• And more

HTMLを書く

「片腕を一晩お貸ししてもいいわ。」と娘は言った。

そして右腕を肩からはずすと、

それを左手に持って私の膝に置いた。

（川端康成『片腕』）

HTMLを書く

「片腕を一晩お貸ししてもいいわ。」と娘は言った。

そして右腕を肩からはずすと、

それを左手に持って私の膝に置いた。

（川端康成『片腕』）

→ 「から」まで、発した言葉→ （から）まで、作品の情報→ 『から』まで、作品名

HTMLを書く

片腕を一晩お貸ししてもいいわ。と娘は言った。

そして右腕を肩からはずすと、

それを左手に持って私の膝に置いた。

川端康成片腕

…… カッコのない、プレーンなテキスト…… これにカッコをつけていく

HTMLを書く

• 言葉や情報を並べる

• どこからどこまで何か、をしるし付ける

• この時点では装飾・ビジュアルは考えない.

HTMLを書く

基本的な書き方）「どこからどこまでが何だ」

<何>情報やテキスト</何>

「から」のときは < と > で何をくくり、「まで」のときは </ と > で何をくくり、その間に情報やテキストを入れる。

HTMLを書く

<見出し>サンプルのHTML</見出し>

<段落>このテキストは、これで段落1つ</段落><段落>特に<重要>ここ</重要>が重要なとこ</段落>

HTMLを書く

• pタグ… 段落、まとまり

• hタグ（h1、h2、h3、h4 …）… 見出し

• strongタグ… このテキストは重要

HTMLを書く

<h1>サンプルのHTML</h1>

<p>このテキストは、これで段落1つ</p><p>特に<strong>ここ</strong>が重要なとこ</p>

HTMLを書く

▼じゃあ、書いてみましょう、の 1

http://th-fs217.sakura.ne.jp/lib/work/2015/＞「0-2」 というリンクをクリック。＞ 何も表示されないHTMLです。＞ ソースを開いて、手元に保存してください。

「これはテストのテキストです」 を pタグ に入れる。

その pタグ に続けて pタグ を並べ、自由に文字列を入れる。

最初のpタグ の前に h1タグ を置き、「HTMLの訓練課題・回答」 を入れる。

全部の h1タグ・pタグ を divタグ でくくる。

今回は、、、

• ブラウザでHTMLを表示させよう .

• HTMLを書こう.

• →【CSSを書こう】.

• 作業の流れを掴もう

• And more

CSSを書く

• 装飾、レイアウト・余白、動きを設定する

• 設定は HTML のタグを対象に

• タグが、装飾の選択範囲のような役割。基本的に、タグが設定されてないような範囲だけに装飾・ビジュアルを設定することはできない。（例外あり）.

CSSを書く

基本的な書き方）

設定した対象・タグ{

何の設定 : 設定内容;

}

CSSを書く

例）「pタグの中ではテキストの色を #333 にする」

p{

color:#333;

}

CSSを書く

例）「divタグの中ではテキストの色を #555 に、背景色を #eee; にする」

div{

color:#555;background-color:#eee;

}

CSSを書く

CSS で設定できること：

• 文字の装飾、区画の装飾、グラデーション

• レイアウト、余白

• 動き

CSSを書く

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

CSSを書く

▼じゃあ、書いてみましょう、の 2

さきほど書いた HTML をそのまま使いましょう。

pタグ の テキストの色 を #999 にかえる。

divタグ の 背景色 を #dedede にかえる。

今回は、、、

• ブラウザでHTMLを表示させよう .

• HTMLを書こう.

• CSSを書こう.

• →【作業の流れを掴もう】 .

• And more

コーディング作業の流れ

【納品する物】 …… 環境や案件によってさまざま →要確認

• HTML、CSS などのコード

• 画像、イメージなどのリソース

コード＝ ごりごり書く

リソース＝ がりがり作る

★コードとリソースを関連付ける

コーディング作業の流れ

特に HTML では、、、

• 言葉や情報を並べ、「意味・役割」でくくる

特に CSS では、、、

• どこをどのように装飾するかを記述する

合わせて画像を、、、

• 埋め込めるようにスライス

ブラウザや端末などで表示確認

まとまったら、納める

コーディング作業の流れ

ざっくり概要は、たったこれ【だけ】

コーディング作業の流れ

「だけ」じゃない戦い

▼予定の対戦カード

–ブラウザ、OS

–デバイス（PC、スマホ、タブレット

–データ量

–非人間• 検索エンジン、音声ブラウザ、プリンタ、 etc.

–バグ

–数々のタグ・パラメータ

–取りかかっている案件の仕様

コーディング作業

最初の時点から

「完璧なコード」を考えない。「最適なコード」を一発で作ろうと考えこまない。

１つずつ、少しずつ。

今回は、、、

• ブラウザでHTMLを表示させよう .

• HTMLを書こう.

• CSSを書こう.

• 作業の流れを掴もう .

• →【And more】.

And more . . .

調べてみてください。

• HTML

– aタグ、buttonタグ、ulタグ、olタグ、liタグ、h1～h6タグ、imgタグ、strongタグ、form、inputタグ、textareaタグ、selectタグ

• CSS

– margin、padding、border、color、background

今日はここまで

お疲れさまでした。散会いたします。

質問・相談などございましたら、どうぞ。

ここにタイトル

ここに本文