Movatterモバイル変換

[0]ホーム
URL:

XMLProJ2014, profile picture
Uploaded byXMLProJ2014
701 views

Web班番外編

Web班番外編．HTMLとCSSの超基礎．

Embed presentation

Download to read offline
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> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html> DOCTYPE宣言： HTML5の文書だよ と宣言する
HTMLひな形 Follow me Twitter @sprechchor44 13 2.HTMLの話 <!DOCTYPE html> <html> ! <head> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html> HTMLタグ： HTMLの範囲を示す
HTMLひな形 Follow me Twitter @sprechchor44 14 2.HTMLの話 <!DOCTYPE html> <html> ! <head> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html> HEADタグ： HTML文書全体の情報
HTMLひな形 Follow me Twitter @sprechchor44 15 2.HTMLの話 <!DOCTYPE html> <html> ! <head> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html> BODYタグ： HTML文書の内容
開始タグと終了タグ Follow me Twitter @sprechchor44 16 2.HTMLの話 ! ! <body> これはHTMLで記述されたファイルです.<br> </body>
開始タグと終了タグ Follow me Twitter @sprechchor44 17 2.HTMLの話 ! ! <body> ←開始タグ これはHTMLで記述されたファイルです.<br> </body>　←終了タグ →タグの適用範囲を示している
単独タグ Follow me Twitter @sprechchor44 18 2.HTMLの話 ! ! <body> これはHTMLで記述されたファイルです.<br> </body>
単独タグ Follow me Twitter @sprechchor44 19 2.HTMLの話 ! ! <body> これはHTMLで記述されたファイルです.<br> </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 2.HTMLの話 - 基本的なタグの紹介 タグ役割記述例 <a> ハイパーリンク追加<a href="a">ここ</a> をクリック <h1>~<h6> 見出し<h1>見出し</h1> <p> 段落<p>一つのパラグラフ</p> <br> 改行改行<br>するよ
文章の区別・改行 2 Follow me Twitter @sprechchor44 27 2.HTMLの話 - 基本的なタグの紹介 タグ役割記述例 <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 2.HTMLの話 - 基本的なタグの紹介 タグ役割記述例 <div> コンテンツのまとまりを 表す．要素の前後に改行 が入る(=ブロック要素) 文章1<div>文章2</div>文 章3 <span> コンテンツのまとまりを 表す．要素の前後に改行 は入らない(=インライン 要素) 文章1<span>文章2</span> 文章3
画像を表示させる Follow me Twitter @sprechchor44 29 2.HTMLの話 - 基本的なタグの紹介 タグ役割記述例 <img> 画像の表示． src属性で画像ファイル (PNG，GIF，JPEG)を指定． alt属性で画像の代わりに表 示される文字列を指定． <img src=sample.jpg alt="サンプル写真" >
2.HTMLの話 - 基本的なタグの紹介 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.2 １．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 3.CSSの話 - 要素の指定 グローバル属性 →ほぼすべての要素に指定できる属性 ↓ id属性とclass属性
id属性とclass属性 Follow me Twitter @sprechchor44 42 3.CSSの話 - 要素の指定 id属性　 >>識別子(id)を指定．1つの ドキュメント内に同じ名前のid属性は 1つのみ 　例: <div id="name">̃</div>
id属性とclass属性 Follow me Twitter @sprechchor44 43 3.CSSの話 - 要素の指定 class属性>>クラス名を指定．1つの ドキュメント内に複数の同一クラスを 指定可能 ! 例: <div class="name">̃</div>
セレクタ Follow me Twitter @sprechchor44 44 3.CSSの話 - セレクタ
適用先の指定 Follow me Twitter @sprechchor44 45 3.CSSの話 - セレクタ 方法書式(セレクタ) タグで指定タグ名 { } タグとクラス名で指定タグ名.クラス名 {} クラス名で指定.クラス名 {} idで指定#id名 {} 複数の要素に指定タグ名1, タグ名2 {} すべての要素に適用* {}
色を変える Follow me Twitter @sprechchor44 46 3.CSSの話 - セレクタ .mycolor { color: #ff000; background-color: #999999; } ! (cssファイル)
色を変える Follow me Twitter @sprechchor44 47 3.CSSの話 - セレクタ .mycolor { color: #ff000; background-color: #999999; } セレクタ
色を変える Follow me Twitter @sprechchor44 48 3.CSSの話 - セレクタ プロパティ .mycolor { color: #ff000; background-color: #999999; }
色を変える Follow me Twitter @sprechchor44 49 3.CSSの話 - セレクタ .mycolor { color: #ff000; background-color: #999999; } プロパティの値
色を変える Follow me Twitter @sprechchor44 50 3.CSSの話 - セレクタ color:文字色を指定 ! ! background-color:背景色を指定
色を変える Follow me Twitter @sprechchor44 51 3.CSSの話 - セレクタ 色の指定 色名red rgb()と%値rgb(100%,0,0) rgb()と10進数の値rgb(255,0,0) # と16進数の値#ff0000
色を変える Follow me Twitter @sprechchor44 52 3.CSSの話 - セレクタ カラーコード一覧 ! HTML,CSS カラーコード http://www.netyasun.com/home/color.html
3.CSSの話 やってみよう！part.3 １．自己紹介ページをcssで装飾すべし！ Follow me Twitter @sprechchor44 53

Recommended

PDF
スキーマとURI
PDF
DBpedia Japanese
PPTX
DBpedia Japaneseとは？
PDF
はじめてのMongoDB
PDF
Html5でword pressテーマを作るよ！
PDF
オープンデータとLinked Open Data
PDF
Web講座　第２回
PPTX
CSS勉強会（第1回）
PDF
私の考えるドキュメント指向
PDF
MongoDBざっくり解説
PDF
Phpcon kansai 2011 ichikaway
PPT
京都　IT講座　9月
PDF
MongoDB very basic (Japanese) / MongoDB基礎の基礎
PDF
Web Packaging - Use cases and Loading
PDF
LODを使ってみよう！
PPTX
LODI/Linked Open Data連続講義 第1回　「オープンデータからLinked Open Dataへ」
PPTX
オープン・データの技術としてのLinked Data
PDF
To write a better HTML
 
PDF
情報編集 (web) 第2回：HTML入門
KEY
HTML5での制作、いつから始める？
PDF
今からハジメるHTML5マークアップ
PDF
WEB開発はじめの一歩　講師:村井亮介様
PDF
Htmlの基礎
PDF
Htmlの基本
PDF
HTML初心者向け勉強会
PPT
CSS勉強会
KEY
Webapp startup example_to_dolist
PPTX
Webコーディングの基本+α
PPTX
メディア工房サマーワークショップ「Webアプリ制作」1日目

More Related Content

PDF
スキーマとURI
PDF
DBpedia Japanese
PPTX
DBpedia Japaneseとは？
PDF
はじめてのMongoDB
PDF
Html5でword pressテーマを作るよ！
PDF
オープンデータとLinked Open Data
PDF
Web講座　第２回
スキーマとURI
DBpedia Japanese
DBpedia Japaneseとは？
はじめてのMongoDB
Html5でword pressテーマを作るよ！
オープンデータとLinked Open Data
Web講座　第２回

What's hot

PPTX
CSS勉強会（第1回）
PDF
私の考えるドキュメント指向
PDF
MongoDBざっくり解説
PDF
Phpcon kansai 2011 ichikaway
PPT
京都　IT講座　9月
PDF
MongoDB very basic (Japanese) / MongoDB基礎の基礎
PDF
Web Packaging - Use cases and Loading
PDF
LODを使ってみよう！
PPTX
LODI/Linked Open Data連続講義 第1回　「オープンデータからLinked Open Dataへ」
PPTX
オープン・データの技術としてのLinked Data
CSS勉強会（第1回）
私の考えるドキュメント指向
MongoDBざっくり解説
Phpcon kansai 2011 ichikaway
京都　IT講座　9月
MongoDB very basic (Japanese) / MongoDB基礎の基礎
Web Packaging - Use cases and Loading
LODを使ってみよう！
LODI/Linked Open Data連続講義 第1回　「オープンデータからLinked Open Dataへ」
オープン・データの技術としてのLinked Data

Similar to Web班番外編

PDF
To write a better HTML
 
PDF
情報編集 (web) 第2回：HTML入門
KEY
HTML5での制作、いつから始める？
PDF
今からハジメるHTML5マークアップ
PDF
WEB開発はじめの一歩　講師:村井亮介様
PDF
Htmlの基礎
PDF
Htmlの基本
PDF
HTML初心者向け勉強会
PPT
CSS勉強会
KEY
Webapp startup example_to_dolist
PPTX
Webコーディングの基本+α
PPTX
メディア工房サマーワークショップ「Webアプリ制作」1日目
PDF
PPT
最速HTML勉強会
PDF
HTML2
PDF
141115 making web site
PDF
CSS Design and Programming
PDF
Html1
PDF
GDG Women DevfestW
PDF
HTML
To write a better HTML
 
情報編集 (web) 第2回：HTML入門
HTML5での制作、いつから始める？
今からハジメるHTML5マークアップ
WEB開発はじめの一歩　講師:村井亮介様
Htmlの基礎
Htmlの基本
HTML初心者向け勉強会
CSS勉強会
Webapp startup example_to_dolist
Webコーディングの基本+α
メディア工房サマーワークショップ「Webアプリ制作」1日目
最速HTML勉強会
HTML2
141115 making web site
CSS Design and Programming
Html1
GDG Women DevfestW
HTML

More from XMLProJ2014

PPTX
Java班講義資料第3回
PPTX
Java班講義資料第2回
PPTX
第1回Java講義資料
PPTX
00環境構築
PPTX
Mash up awards（クリスマス会）
PPTX
きのこたけのこ戦争
PPTX
クリパ用Lt2014
PPTX
ポケモン解説
PPTX
クリスマス会Lt
PPTX
一年ツイッター
PPTX
C++班
PPTX
C#班
PPTX
Web班
PPTX
Web 11
PPTX
Web 09
PPTX
Android班第4回
PPTX
Web 10
PPTX
OpenSource
PPTX
百合について
PPTX
Web 08
Java班講義資料第3回
Java班講義資料第2回
第1回Java講義資料
00環境構築
Mash up awards（クリスマス会）
きのこたけのこ戦争
クリパ用Lt2014
ポケモン解説
クリスマス会Lt
一年ツイッター
C++班
C#班
Web班
Web 11
Web 09
Android班第4回
Web 10
OpenSource
百合について
Web 08

Web班番外編

  • 1.
    Web班　番外編 2014.10.29 SaitaTatsuya Follow me Twitter @sprechchor44 1
  • 2.
    本日のMENU 1.Web界隈の話　 P3! 2.HTMLの話　　 P10 ! 3.CSSの話　 P33 Follow me Twitter @sprechchor44 2 本日のMENU
  • 3.
    1.Web界隈の話 Follow meTwitter @sprechchor44 3 1.Web界隈の話
  • 4.
    クライアントサイドとサーバサイド Follow meTwitter @sprechchor44 4 1.Web界隈の話 HTTP ブラウザで動作サーバで動作 HTML CSS JavaScript (サーバサイドでも使える) PHP Ruby Python…
  • 5.
    ブラウザ間の差異 Follow meTwitter @sprechchor44 5 1.Web界隈の話 ! レンダリングエンジン →データを，条件やルールにしたがって 　　適切な形に再構成するエンジン ↓ 各ブラウザで違うものを使っている
  • 6.
    ブラウザ間の差異 Follow meTwitter @sprechchor44 6 1.Web界隈の話 Webブラウザレンダリングエンジン Internet Explorer Trident FireFox Gecko Safari Webkit Google Chrome Blink Opera Blink 各ブラウザのレンダリングエンジン(2014年1月時点)
  • 7.
    世界初のWebサイト Follow meTwitter @sprechchor44 7 1.Web界隈の話 ! HTMLの生みの親 ティム・バーナーズ・リー (当時CERN在籍) WWWの仕組みを作った人 ! ! 1991年8月6日に設立：世界初のWebサイト http://info.cern.ch/hypertext/WWW/TheProject.html
  • 8.
    SublimeTextに恋しよう！ Follow meTwitter @sprechchor44 8 1.Web界隈の話 使いやすくするには… ! 1.設定ファイルをいじる ! ! 2.プラグインを入れる Package Control https://sublime.wbond.net/installation
  • 9.
    参考サイト Follow meTwitter @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
  • 10.
    2.HTMLの話 Follow meTwitter @sprechchor44 10 2.HTMLの話 http://goo.gl/bVm7Pr
  • 11.
    HTMLひな形 Follow meTwitter @sprechchor44 11 2.HTMLの話 <!DOCTYPE html> <html> ! <head> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html>
  • 12.
    HTMLひな形 Follow meTwitter @sprechchor44 12 2.HTMLの話 <!DOCTYPE html> <html> ! <head> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html> DOCTYPE宣言： HTML5の文書だよ と宣言する
  • 13.
    HTMLひな形 Follow meTwitter @sprechchor44 13 2.HTMLの話 <!DOCTYPE html> <html> ! <head> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html> HTMLタグ： HTMLの範囲を示す
  • 14.
    HTMLひな形 Follow meTwitter @sprechchor44 14 2.HTMLの話 <!DOCTYPE html> <html> ! <head> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html> HEADタグ： HTML文書全体の情報
  • 15.
    HTMLひな形 Follow meTwitter @sprechchor44 15 2.HTMLの話 <!DOCTYPE html> <html> ! <head> <title>タイトル</title> </head> ! <body> これはHTMLで記述されたファイルです．<br> </body> ! </html> BODYタグ： HTML文書の内容
  • 16.
    開始タグと終了タグ Follow meTwitter @sprechchor44 16 2.HTMLの話 ! ! <body> これはHTMLで記述されたファイルです.<br> </body>
  • 17.
    開始タグと終了タグ Follow meTwitter @sprechchor44 17 2.HTMLの話 ! ! <body> ←開始タグ これはHTMLで記述されたファイルです.<br> </body>　←終了タグ →タグの適用範囲を示している
  • 18.
    単独タグ Follow meTwitter @sprechchor44 18 2.HTMLの話 ! ! <body> これはHTMLで記述されたファイルです.<br> </body>
  • 19.
    単独タグ Follow meTwitter @sprechchor44 19 2.HTMLの話 ! ! <body> これはHTMLで記述されたファイルです.<br> </body> 単独タグ
  • 20.
    単独タグ Follow meTwitter @sprechchor44 20 2.HTMLの話 ! <br> or <br /> ! →どっちでもええけど， 　　　　　統一して使おう!
  • 21.
    文字化け対策 Follow meTwitter @sprechchor44 21 2.HTMLの話 以下を<head>タグ内に追加する． <meta http-equiv="Content-Type" content="text/html;charset="utf-8"> ! ! ! ! 　　　 　↓HTML5では短く出来る！！ <meta charset="utf-8">
  • 22.
    文字化け対策 Follow meTwitter @sprechchor44 22 2.HTMLの話 それでも文字化けしたら... ! ブラウザの設定を 変えてください
  • 23.
    タグ(要素)と属性 Follow meTwitter @sprechchor44 23 2.HTMLの話 タグの中には属性を指定して，役割や情報 を持たせることが出来る． ! 例: <a href="http://www.xmlpro.org"> XMLPro公式サイト</a> href属性でリンク先を示している
  • 24.
    タグ(要素)と属性 Follow meTwitter @sprechchor44 24 2.HTMLの話 タグの中には属性を指定して，役割や情報 を持たせることが出来る． ! 例: <a href="http://www.xmlpro.org"> XMLPro公式サイト</a> タグで囲まれた部分 = 要素
  • 25.
    基本的なタグの紹介 Follow meTwitter @sprechchor44 25 2.HTMLの話 - 基本的なタグの紹介
  • 26.
    文章の区別・改行 1 Followme Twitter @sprechchor44 26 2.HTMLの話 - 基本的なタグの紹介 タグ役割記述例 <a> ハイパーリンク追加<a href="a">ここ</a> をクリック <h1>~<h6> 見出し<h1>見出し</h1> <p> 段落<p>一つのパラグラフ</p> <br> 改行改行<br>するよ
  • 27.
    文章の区別・改行 2 Followme Twitter @sprechchor44 27 2.HTMLの話 - 基本的なタグの紹介 タグ役割記述例 <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.
    文章などをまとめる Follow meTwitter @sprechchor44 28 2.HTMLの話 - 基本的なタグの紹介 タグ役割記述例 <div> コンテンツのまとまりを 表す．要素の前後に改行 が入る(=ブロック要素) 文章1<div>文章2</div>文 章3 <span> コンテンツのまとまりを 表す．要素の前後に改行 は入らない(=インライン 要素) 文章1<span>文章2</span> 文章3
  • 29.
    画像を表示させる Follow meTwitter @sprechchor44 29 2.HTMLの話 - 基本的なタグの紹介 タグ役割記述例 <img> 画像の表示． src属性で画像ファイル (PNG，GIF，JPEG)を指定． alt属性で画像の代わりに表 示される文字列を指定． <img src=sample.jpg alt="サンプル写真" >
  • 30.
    2.HTMLの話 - 基本的なタグの紹介HTMLにおけるコメント Follow me Twitter @sprechchor44 30 ! <!-- ここにコメントを書きます --> ! ! これで! 囲む ! ! コメントはWebページに表示されない
  • 31.
    2.HTMLの話 やってみよう！part.1 Followme Twitter @sprechchor44 31 ! 1.「xpweb_100」フォルダを作成し，その中に 「index.html」を作るべし！ ! 2.「index.html」をいじって自分の自己紹介ペー ジを好きなように作るべし！！ (なんでもいいから画像を1枚以上使うこと) !
  • 32.
    参考サイト Follow meTwitter @sprechchor44 32 2.HTMLの話 HTML クイック・リファレンス http://www.htmq.com/ ! Can I use … ? http://caniuse.com/ ! W3Cバリデータ http://validator.w3.org/
  • 33.
    3.CSSの話 Follow meTwitter @sprechchor44 33 3.CSSの話
  • 34.
    CSSとは Follow meTwitter @sprechchor44 34 3.CSSの話 CSS(Cascading Style Sheet) ! ! →デザインやレイアウトなど， 　文書の見栄え(スタイル)を指定する
  • 35.
    Webページの構成 Follow meTwitter @sprechchor44 35 3.CSSの話 .html .css .js .css .js image other
  • 36.
    CSSの置き場所 Follow meTwitter @sprechchor44 36 3.CSSの話 ・style属性で指定 ! ・style要素で指定 ! ・外部ファイルから読み込む
  • 37.
    CSSの置き場所 Follow meTwitter @sprechchor44 37 3.CSSの話 ・style属性で指定 ! ・style要素で指定 ! ・外部ファイルから読み込む←
  • 38.
    3.CSSの話 CSSの使い方 CSSファイルを作成後，HTMLファイルの<head>タグ内に下記を記入する． ! <link rel="stylesheet" href="styles.css"> ここに自分で作成した CSSファイルの場所を記載 Follow me Twitter @sprechchor44 38
  • 39.
    3.CSSの話 やってみよう！part.2 １．part.1で作った自己紹介ページと同じ場所に空の「styles.css」を作るべし！ ! ２．自己紹介ページの<head>タグ内に， 「styles.css」とのリンクを書くべし！ Follow me Twitter @sprechchor44 39
  • 40.
    3.CSSの話 - 要素の指定要素の指定 Follow me Twitter @sprechchor44 40 HTMLのタグ(要素)には属性を指定し て情報を持たせることが出来る(※P23̃24)
  • 41.
    id属性とclass属性 Follow meTwitter @sprechchor44 41 3.CSSの話 - 要素の指定 グローバル属性 →ほぼすべての要素に指定できる属性 ↓ id属性とclass属性
  • 42.
    id属性とclass属性 Follow meTwitter @sprechchor44 42 3.CSSの話 - 要素の指定 id属性　 >>識別子(id)を指定．1つの ドキュメント内に同じ名前のid属性は 1つのみ 　例: <div id="name">̃</div>
  • 43.
    id属性とclass属性 Follow meTwitter @sprechchor44 43 3.CSSの話 - 要素の指定 class属性>>クラス名を指定．1つの ドキュメント内に複数の同一クラスを 指定可能 ! 例: <div class="name">̃</div>
  • 44.
    セレクタ Follow meTwitter @sprechchor44 44 3.CSSの話 - セレクタ
  • 45.
    適用先の指定 Follow meTwitter @sprechchor44 45 3.CSSの話 - セレクタ 方法書式(セレクタ) タグで指定タグ名 { } タグとクラス名で指定タグ名.クラス名 {} クラス名で指定.クラス名 {} idで指定#id名 {} 複数の要素に指定タグ名1, タグ名2 {} すべての要素に適用* {}
  • 46.
    色を変える Follow meTwitter @sprechchor44 46 3.CSSの話 - セレクタ .mycolor { color: #ff000; background-color: #999999; } ! (cssファイル)
  • 47.
    色を変える Follow meTwitter @sprechchor44 47 3.CSSの話 - セレクタ .mycolor { color: #ff000; background-color: #999999; } セレクタ
  • 48.
    色を変える Follow meTwitter @sprechchor44 48 3.CSSの話 - セレクタ プロパティ .mycolor { color: #ff000; background-color: #999999; }
  • 49.
    色を変える Follow meTwitter @sprechchor44 49 3.CSSの話 - セレクタ .mycolor { color: #ff000; background-color: #999999; } プロパティの値
  • 50.
    色を変える Follow meTwitter @sprechchor44 50 3.CSSの話 - セレクタ color:文字色を指定 ! ! background-color:背景色を指定
  • 51.
    色を変える Follow meTwitter @sprechchor44 51 3.CSSの話 - セレクタ 色の指定 色名red rgb()と%値rgb(100%,0,0) rgb()と10進数の値rgb(255,0,0) # と16進数の値#ff0000
  • 52.
    色を変える Follow meTwitter @sprechchor44 52 3.CSSの話 - セレクタ カラーコード一覧 ! HTML,CSS カラーコード http://www.netyasun.com/home/color.html
  • 53.
[8]ページ先頭
©2009-2025 Movatter.jp