Web班番外編

Follow me Twitter @sprechchor44

Web班　番外編2014.10.29 Saita Tatsuya

1


本日のMENU

1.Web界隈の話　 P3 !

2.HTMLの話　　 P10 !

3.CSSの話　 P33

2

本日のMENU


1.Web界隈の話

3

1.Web界隈の話


クライアントサイドとサーバサイド

4

1.Web界隈の話

ブラウザで動作サーバで動作

HTTP

HTML CSS JavaScript (サーバサイドでも使える)

PHP Ruby Python…


ブラウザ間の差異

5

1.Web界隈の話

!

レンダリングエンジン →データを，条件やルールにしたがって　　適切な形に再構成するエンジン

↓ 各ブラウザで違うものを使っている


ブラウザ間の差異

6

1.Web界隈の話

Webブラウザレンダリングエンジン

Internet Explorer Trident

FireFox Gecko

Safari Webkit

Google Chrome Blink

Opera Blink

各ブラウザのレンダリングエンジン(2014年1月時点)


世界初のWebサイト

7

1.Web界隈の話

!HTMLの生みの親ティム・バーナーズ・リー (当時CERN在籍) WWWの仕組みを作った人 !!1991年8月6日に設立：世界初のWebサイト http://info.cern.ch/hypertext/WWW/TheProject.html

http://info.cern.ch/hypertext/WWW/TheProject.html


SublimeTextに恋しよう！

8

1.Web界隈の話

使いやすくするには… !1.設定ファイルをいじる !!2.プラグインを入れる Package Control https://sublime.wbond.net/installation

https://sublime.wbond.net/installation


参考サイト

9

1.Web界隈の話

HTTPとは?… http://viral-community.com/other-it/http-1873/ !ブラウザの仕組み http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ !SublimeText3をインストールしたら… http://keidrun.tumblr.com/post/73033053898/tips-sublime-text-sublime-text-3 !サーバサイドJavaScriptの本命「Node.js」… http://www.atmarkit.co.jp/ait/articles/1102/28/news105.html

http://viral-community.com/other-it/http-1873/

http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/

http://keidrun.tumblr.com/post/73033053898/tips-sublime-text-sublime-text-3

http://www.atmarkit.co.jp/ait/articles/1102/28/news105.html


2.HTMLの話

10

2.HTMLの話

http://goo.gl/bVm7Pr

http://goo.gl/bVm7Pr


HTMLひな形

11

2.HTMLの話

<!DOCTYPE html> <html> !<head> <title>タイトル</title> </head> !<body> これはHTMLで記述されたファイルです．<br> </body> !</html>


HTMLひな形

12

2.HTMLの話


DOCTYPE宣言： HTML5の文書だよと宣言する


HTMLひな形

13

2.HTMLの話


HTMLタグ： HTMLの範囲を示す


HTMLひな形

14

2.HTMLの話


HEADタグ： HTML文書全体の情報


HTMLひな形

15

2.HTMLの話


BODYタグ： HTML文書の内容


開始タグと終了タグ

16

2.HTMLの話

!!<body> これはHTMLで記述されたファイルです.<br> </body>


開始タグと終了タグ

17

2.HTMLの話

!!<body> ←開始タグこれはHTMLで記述されたファイルです.<br> </body>　←終了タグ

→タグの適用範囲を示している


単独タグ

18

2.HTMLの話



単独タグ

19

2.HTMLの話


単独タグ


単独タグ

20

2.HTMLの話

!

<br> or <br /> ! →どっちでもええけど，　　　　　統一して使おう!


文字化け対策

21

2.HTMLの話

以下を<head>タグ内に追加する． <meta http-equiv="Content-Type"

content="text/html;charset="utf-8"> !

!!!　　　　↓HTML5では短く出来る！！

<meta charset="utf-8">


文字化け対策

22

2.HTMLの話

それでも文字化けしたら... !

ブラウザの設定を変えてください


タグ(要素)と属性

23

2.HTMLの話

タグの中には属性を指定して，役割や情報を持たせることが出来る． !

例: <a href="http://www.xmlpro.org">

XMLPro公式サイト</a>

href属性でリンク先を示している


タグ(要素)と属性

24

2.HTMLの話

タグの中には属性を指定して，役割や情報を持たせることが出来る． !

例: <a href="http://www.xmlpro.org">

XMLPro公式サイト</a>

タグで囲まれた部分 = 要素


基本的なタグの紹介

25

2.HTMLの話 - 基本的なタグの紹介


文章の区別・改行 1

26


タグ役割記述例

<a> ハイパーリンク追加 <a href="a">ここ</a> をクリック

<h1>~<h6> 見出し <h1>見出し</h1>

<p> 段落 <p>一つのパラグラフ</p>

<br> 改行改行<br>するよ


文章の区別・改行 2

27



<ul> 箇条書き範囲 <li>タグで項目を指定

<ul> 　<li>項目1</li> 　<li>項目2</li> 　<li>項目3</li> </ul>

<ol> 番号付き箇条書き範囲 <li>タグで項目を指定

<ol> 　<li>項目1</li> 　<li>項目2</li> 　<li>項目3</li> </ol>


文章などをまとめる

28



<div>コンテンツのまとまりを表す．要素の前後に改行が入る(=ブロック要素)

文章1<div>文章2</div>文章3

<span>コンテンツのまとまりを表す．要素の前後に改行は入らない(=インライン要素)

文章1<span>文章2</span>文章3


画像を表示させる

29



<img>

画像の表示． src属性で画像ファイル(PNG，GIF，JPEG)を指定． alt属性で画像の代わりに表示される文字列を指定．

<img src=sample.jpg alt="サンプル写真" >


HTMLにおけるコメント

30

!

 !

!

!

!

!

コメントはWebページに表示されない


これで囲む


やってみよう！part.1

31

!1.「xpweb_100」フォルダを作成し，その中に「index.html」を作るべし！ !2.「index.html」をいじって自分の自己紹介ページを好きなように作るべし！！ (なんでもいいから画像を1枚以上使うこと) !

2.HTMLの話


参考サイト

32

2.HTMLの話

HTML クイック・リファレンス http://www.htmq.com/ !Can I use … ? http://caniuse.com/ !W3Cバリデータ http://validator.w3.org/

http://www.htmq.com/

http://caniuse.com/

http://validator.w3.org/


3.CSSの話

33

3.CSSの話


CSSとは

34

3.CSSの話

CSS(Cascading Style Sheet) !

!

→デザインやレイアウトなど，　文書の見栄え(スタイル)を指定する


Webページの構成

35

3.CSSの話

.html .css

.js

.css

.js

image

other


CSSの置き場所

36

3.CSSの話

・style属性で指定 !

・style要素で指定 !

・外部ファイルから読み込む


CSSの置き場所

37

3.CSSの話

・style属性で指定 !

・style要素で指定 !

・外部ファイルから読み込む←

Follow me Twitter @sprechchor44 38

3.CSSの話

CSSの使い方CSSファイルを作成後，HTMLファイルの <head>タグ内に下記を記入する． !

<link rel="stylesheet" href="styles.css">

ここに自分で作成した CSSファイルの場所を記載


3.CSSの話

やってみよう！part.2１．part.1で作った自己紹介ページと同じ場所に空の「styles.css」を作るべし！ !

２．自己紹介ページの<head>タグ内に，「styles.css」とのリンクを書くべし！


要素の指定

40

HTMLのタグ(要素)には属性を指定して情報を持たせることが出来る(※P23̃24)

3.CSSの話 - 要素の指定


id属性とclass属性

41


グローバル属性 →ほぼすべての要素に指定できる属性

↓id属性とclass属性



42


id属性　 >>識別子(id)を指定．1つのドキュメント内に同じ名前のid属性は1つのみ　例: <div id="name">̃</div>



43


class属性>>クラス名を指定．1つのドキュメント内に複数の同一クラスを指定可能 !

例: <div class="name">̃</div>


セレクタ

44

3.CSSの話 - セレクタ


適用先の指定

45


方法書式(セレクタ)タグで指定タグ名 { }

タグとクラス名で指定タグ名.クラス名 {}クラス名で指定 .クラス名 {}

idで指定 #id名 {}複数の要素に指定タグ名1, タグ名2 {}すべての要素に適用 * {}


色を変える

46


.mycolor { color: #ff000; background-color: #999999; } !

(cssファイル)


色を変える

47


.mycolor { color: #ff000; background-color: #999999; }

セレクタ


色を変える

48



プロパティ


色を変える

49



プロパティの値


色を変える

50


color:文字色を指定 !

!

background-color:背景色を指定


色を変える

51


色の指定

色名 red

rgb()と%値 rgb(100%,0,0)

rgb()と10進数の値 rgb(255,0,0)

# と16進数の値 #ff0000


色を変える

52


カラーコード一覧 !

HTML,CSS カラーコード http://www.netyasun.com/home/color.html

http://www.netyasun.com/home/color.html


3.CSSの話

やってみよう！part.3１．自己紹介ページをcssで装飾すべし！

Technology

Web班番外編