Web班番外編

Web班　番外編
2014.10.29
Saita Tatsuya
Follow me Twitter
@sprechchor44
1

本日のMENU
1.Web界隈の話　 P3
!
2.HTMLの話　　 P10
!
3.CSSの話　 P33
Follow me Twitter
@sprechchor44
2
本日のMENU

1.Web界隈の話
Follow me Twitter
@sprechchor44
3
1.Web界隈の話

クライアントサイドとサーバサイド
Follow me Twitter
@sprechchor44
4
1.Web界隈の話
HTTP
ブラウザで動作サーバで動作
HTML CSS JavaScript
(サーバサイドでも使える)
PHP Ruby Python…

ブラウザ間の差異
Follow me Twitter
@sprechchor44
5
1.Web界隈の話
!
レンダリングエンジン
→データを，条件やルールにしたがって
　　適切な形に再構成するエンジン
↓
各ブラウザで違うものを使っている

ブラウザ間の差異
Follow me Twitter
@sprechchor44
6
1.Web界隈の話
Webブラウザレンダリングエンジン
Internet Explorer Trident
FireFox Gecko
Safari Webkit
Google Chrome Blink
Opera Blink
各ブラウザのレンダリングエンジン(2014年1月時点)

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

SublimeTextに恋しよう！
Follow me Twitter
@sprechchor44
8
1.Web界隈の話
使いやすくするには…
!
1.設定ファイルをいじる
!
!
2.プラグインを入れる
Package Control
https://sublime.wbond.net/installation

参考サイト
Follow me Twitter
@sprechchor44
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

2.HTMLの話
Follow me Twitter
@sprechchor44
10
2.HTMLの話
http://goo.gl/bVm7Pr

HTMLひな形
Follow me Twitter
@sprechchor44
11
2.HTMLの話
<!DOCTYPE html>
<html>
!
<head>
<title>タイトル</title>
</head>
!
<body>
これはHTMLで記述されたファイルです．<br>
</body>
!
</html>

HTMLひな形
Follow me Twitter
@sprechchor44
12
2.HTMLの話
<!DOCTYPE html>
<html>
!
<head>
</head>
!
<body>
</body>
!
</html>
DOCTYPE宣言：
HTML5の文書だよ
と宣言する

HTMLひな形
Follow me Twitter
@sprechchor44
13
2.HTMLの話
<!DOCTYPE html>
<html>
!
<head>
</head>
!
<body>
</body>
!
</html>
HTMLタグ：
HTMLの範囲を示す

HTMLひな形
Follow me Twitter
@sprechchor44
14
2.HTMLの話
<!DOCTYPE html>
<html>
!
<head>
</head>
!
<body>
</body>
!
</html>
HEADタグ：
HTML文書全体の情報

HTMLひな形
Follow me Twitter
@sprechchor44
15
2.HTMLの話
<!DOCTYPE html>
<html>
!
<head>
</head>
!
<body>
</body>
!
</html>
BODYタグ：
HTML文書の内容

開始タグと終了タグ
Follow me Twitter
@sprechchor44
16
2.HTMLの話
!
!
<body>
これはHTMLで記述されたファイルです.<br>
</body>

開始タグと終了タグ
Follow me Twitter
@sprechchor44
17
2.HTMLの話
!
!
<body> ←開始タグ
</body>　←終了タグ
→タグの適用範囲を示している

単独タグ
Follow me Twitter
@sprechchor44
18
2.HTMLの話
!
!
<body>
</body>

単独タグ
Follow me Twitter
@sprechchor44
19
2.HTMLの話
!
!
<body>
</body>
単独タグ

単独タグ
Follow me Twitter
@sprechchor44
20
2.HTMLの話
!
<br> or <br />
!
→どっちでもええけど，
　　　　　統一して使おう!

文字化け対策
Follow me Twitter
@sprechchor44
21
2.HTMLの話
以下を<head>タグ内に追加する．
<meta http-equiv="Content-Type"
content="text/html;charset="utf-8">
!
!
!
!
　　　　↓HTML5では短く出来る！！
<meta charset="utf-8">

文字化け対策
Follow me Twitter
@sprechchor44
22
2.HTMLの話
それでも文字化けしたら...
!
ブラウザの設定を
変えてください

タグ(要素)と属性
Follow me Twitter
@sprechchor44
23
2.HTMLの話
タグの中には属性を指定して，役割や情報
を持たせることが出来る．
!
例:
<a href="http://www.xmlpro.org">
XMLPro公式サイト</a>
href属性でリンク先を示している

タグ(要素)と属性
Follow me Twitter
@sprechchor44
24
2.HTMLの話
タグの中には属性を指定して，役割や情報
を持たせることが出来る．
!
例:
<a href="http://www.xmlpro.org">
XMLPro公式サイト</a>
タグで囲まれた部分 = 要素

基本的なタグの紹介
Follow me Twitter
@sprechchor44
25
2.HTMLの話 - 基本的なタグの紹介

文章の区別・改行 1
Follow me Twitter
@sprechchor44
26
タグ役割記述例
<a> ハイパーリンク追加<a href="a">ここ</a>
をクリック
<h1>~<h6> 見出し<h1>見出し</h1>
<p> 段落<p>一つのパラグラフ</p>
<br> 改行改行<br>するよ

文章の区別・改行 2
Follow me Twitter
@sprechchor44
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>

文章などをまとめる
Follow me Twitter
@sprechchor44
28
<div>
コンテンツのまとまりを
表す．要素の前後に改行
が入る(=ブロック要素)
文章1<div>文章2</div>文
章3
<span>
コンテンツのまとまりを
表す．要素の前後に改行
は入らない(=インライン
要素)
文章1<span>文章2</span>
文章3

画像を表示させる
Follow me Twitter
@sprechchor44
29
<img>
画像の表示．
src属性で画像ファイル
(PNG，GIF，JPEG)を指定．
alt属性で画像の代わりに表
示される文字列を指定．
<img src=sample.jpg
alt="サンプル写真"
>

HTMLにおけるコメント
Follow me Twitter
@sprechchor44
30
!

!
!
これで!
囲む
!
!
コメントはWebページに表示されない

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

参考サイト
Follow me Twitter
@sprechchor44
32
2.HTMLの話
HTML クイック・リファレンス
http://www.htmq.com/
!
Can I use … ?
http://caniuse.com/
!
W3Cバリデータ
http://validator.w3.org/

3.CSSの話
Follow me Twitter
@sprechchor44
33
3.CSSの話

CSSとは
Follow me Twitter
@sprechchor44
34
3.CSSの話
CSS(Cascading Style Sheet)
!
!
→デザインやレイアウトなど，
　文書の見栄え(スタイル)を指定する

Webページの構成
Follow me Twitter
@sprechchor44
35
3.CSSの話
.html .css
.js
.css
.js
image
other

CSSの置き場所
Follow me Twitter
@sprechchor44
36
3.CSSの話
・style属性で指定
!
・style要素で指定
!
・外部ファイルから読み込む

CSSの置き場所
Follow me Twitter
@sprechchor44
37
3.CSSの話
・style属性で指定
!
・style要素で指定
!
・外部ファイルから読み込む←

3.CSSの話
CSSの使い方
CSSファイルを作成後，HTMLファイルの
<head>タグ内に下記を記入する．
!
<link rel="stylesheet" href="styles.css">
ここに自分で作成した
CSSファイルの場所を記載
Follow me Twitter
@sprechchor44 38

3.CSSの話
１．part.1で作った自己紹介ページと同じ
場所に空の「styles.css」を作るべし！
!
２．自己紹介ページの<head>タグ内に，
「styles.css」とのリンクを書くべし！
Follow me Twitter
@sprechchor44 39

3.CSSの話 - 要素の指定
要素の指定
Follow me Twitter
@sprechchor44
40
HTMLのタグ(要素)には属性を指定し
て情報を持たせることが出来る(※P23̃24)

id属性とclass属性
Follow me Twitter
@sprechchor44
41
グローバル属性
→ほぼすべての要素に指定できる属性
↓

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

Follow me Twitter
@sprechchor44
43
class属性>>クラス名を指定．1つの
ドキュメント内に複数の同一クラスを
指定可能
!
例:
<div class="name">̃</div>

セレクタ
Follow me Twitter
@sprechchor44
44
3.CSSの話 - セレクタ

適用先の指定
Follow me Twitter
@sprechchor44
45
方法書式(セレクタ)
タグで指定タグ名 { }
タグとクラス名で指定タグ名.クラス名 {}
クラス名で指定.クラス名 {}
idで指定#id名 {}
複数の要素に指定タグ名1, タグ名2 {}
すべての要素に適用* {}

色を変える
Follow me Twitter
@sprechchor44
46
.mycolor {
color: #ff000;
background-color: #999999;
}
!
(cssファイル)

色を変える
Follow me Twitter
@sprechchor44
47
.mycolor {
color: #ff000;
}
セレクタ

色を変える
Follow me Twitter
@sprechchor44
48
プロパティ
.mycolor {
color: #ff000;
}

色を変える
Follow me Twitter
@sprechchor44
49
.mycolor {
color: #ff000;
}
プロパティの値

色を変える
Follow me Twitter
@sprechchor44
50
color:文字色を指定
!
!
background-color:背景色を指定

色を変える
Follow me Twitter
@sprechchor44
51
色の指定
色名red
rgb()と%値rgb(100%,0,0)
rgb()と10進数の値rgb(255,0,0)
# と16進数の値#ff0000

色を変える
Follow me Twitter
@sprechchor44
52
カラーコード一覧
!
HTML,CSS カラーコード
http://www.netyasun.com/home/color.html

3.CSSの話
１．自己紹介ページをcssで装飾すべし！
Follow me Twitter
@sprechchor44 53

Web班番外編

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Web班番外編

Similar to Web班番外編 (20)

More from XMLProJ2014

More from XMLProJ2014 (20)

Recently uploaded

Recently uploaded (8)

Web班番外編