SlideShare a Scribd company logo
1 of 39
IT研修講座 NPO 法人全国女性シェルターネット企画講座 WEB サイト作成
ホームページの構成要素 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],css img js index.html layout.css side.css image01.gif image02.gif rollover.js iepngfix.js / inquiry about index.html index.html root
URLと絶対パスと相対パス ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML の基本構成要素 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML  HTML で記述されたドキュメントであることを宣言 head  HTML ファイルの情報を記述 body   ブラウザに表示する内容
タグの基本ルール ,[object Object],要素名 属性名 値 属性 開始タグ 終了タグ 要素
タグの基本ルール 2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DOCTYPE 宣言 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
W3C ,[object Object]
XHTML とは ,[object Object]
文章を構成する基本のタグ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
文章を構成する基本のタグ 3 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
文章を構成する基本のタグ 2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
課題 1 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS  カスケーディングスタイルシート ,[object Object],[object Object],[object Object],[object Object]
1.Style 要素を使って head 内に指定する ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
2.Style 属性を使って要素に直接指定する ,[object Object],[object Object],[object Object],[object Object],[object Object]
3.Link 要素で外部の css ファイルをリンクさせる ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSSの基本 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],セレクタ
複数のプロパティをまとめる定義方法 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
セレクタの種類 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
セレクタの種類 2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
セレクタの種類 3 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
セレクタの種類 4 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
課題 2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
余白 ,[object Object],[object Object],[object Object],[object Object]
マージン ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
パディング ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
課題 3 ,[object Object],[object Object],[object Object]
ボックスの構造 ,[object Object],高さ height 幅  width 内容を表示する領域 padding border margin
課題 4 ,[object Object],[object Object]
課題 5 ,[object Object],[object Object],[object Object],[object Object]
画像について ,[object Object],[object Object],[object Object]
画像の張り込み ,[object Object]
回り込み ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
課題 6 ,[object Object],[object Object],[object Object],[object Object],[object Object]
リンクをはる ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
課題 7 ,[object Object],[object Object],[object Object]
2 段組レイアウト ,[object Object],float:left; width:400px; margin:0 10px 0 0; float:right; width:200px; width:630px; padding:10px;
課題 8 ,[object Object],[object Object]

More Related Content

Viewers also liked

6 c flat plans-1
6 c   flat plans-16 c   flat plans-1
6 c flat plans-1LD2034
 
Business Information module2: market information
Business Information module2: market informationBusiness Information module2: market information
Business Information module2: market informationSabina Cisek
 
Lzs Lip Trans BobróWko
Lzs Lip Trans BobróWkoLzs Lip Trans BobróWko
Lzs Lip Trans BobróWkokafolec
 
WeGov: 2nd Evaluation - 1st Interview
WeGov: 2nd Evaluation - 1st InterviewWeGov: 2nd Evaluation - 1st Interview
WeGov: 2nd Evaluation - 1st InterviewTimo Wandhoefer
 
The comet technology on Jetty
The comet technology on Jetty The comet technology on Jetty
The comet technology on Jetty wavefly
 
Environmental science-spring-2012
Environmental science-spring-2012Environmental science-spring-2012
Environmental science-spring-2012Bruce Slutsky
 

Viewers also liked (7)

6 c flat plans-1
6 c   flat plans-16 c   flat plans-1
6 c flat plans-1
 
Business Information module2: market information
Business Information module2: market informationBusiness Information module2: market information
Business Information module2: market information
 
Lzs Lip Trans BobróWko
Lzs Lip Trans BobróWkoLzs Lip Trans BobróWko
Lzs Lip Trans BobróWko
 
WeGov: 2nd Evaluation - 1st Interview
WeGov: 2nd Evaluation - 1st InterviewWeGov: 2nd Evaluation - 1st Interview
WeGov: 2nd Evaluation - 1st Interview
 
George apt case study
George apt case studyGeorge apt case study
George apt case study
 
The comet technology on Jetty
The comet technology on Jetty The comet technology on Jetty
The comet technology on Jetty
 
Environmental science-spring-2012
Environmental science-spring-2012Environmental science-spring-2012
Environmental science-spring-2012
 

Similar to 京都 IT講座 9月

HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5George Harada
 
Html5 入門編 その2
Html5 入門編 その2Html5 入門編 その2
Html5 入門編 その2ngi group.
 
Htmlの基本
Htmlの基本Htmlの基本
Htmlの基本SD Labo
 
Htmlの基礎
Htmlの基礎Htmlの基礎
Htmlの基礎SD Labo
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップSwapSkills
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門柴田 篤志
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolistShinichiro Kumeuchi
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみようSaeki Tominaga
 
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoopsTom Hayakawa
 
Oktopartial Introduction
Oktopartial IntroductionOktopartial Introduction
Oktopartial IntroductionTakeshi AKIMA
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩Atsushi Tadokoro
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening SlideLDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slideohotech
 
第三回ネットワークチーム講座資料
第三回ネットワークチーム講座資料第三回ネットワークチーム講座資料
第三回ネットワークチーム講座資料densan_teacher
 
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップHTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップShumpei Shiraishi
 
2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoops2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoopsTom Hayakawa
 

Similar to 京都 IT講座 9月 (20)

HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
 
Html5 入門編 その2
Html5 入門編 その2Html5 入門編 その2
Html5 入門編 その2
 
Module02
Module02Module02
Module02
 
Htmlの基本
Htmlの基本Htmlの基本
Htmlの基本
 
Htmlの基礎
Htmlの基礎Htmlの基礎
Htmlの基礎
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみよう
 
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops
 
YUI
YUIYUI
YUI
 
Oktopartial Introduction
Oktopartial IntroductionOktopartial Introduction
Oktopartial Introduction
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
 
Html03
Html03Html03
Html03
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening SlideLDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
 
第三回ネットワークチーム講座資料
第三回ネットワークチーム講座資料第三回ネットワークチーム講座資料
第三回ネットワークチーム講座資料
 
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップHTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
 
Web班番外編
Web班番外編Web班番外編
Web班番外編
 
2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoops2005 09 17_osc2005_xoops
2005 09 17_osc2005_xoops
 

More from annulus

IT研修講座
IT研修講座IT研修講座
IT研修講座annulus
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座annulus
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座annulus
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008annulus
 
kyoto IT
kyoto ITkyoto IT
kyoto ITannulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 

More from annulus (7)

IT研修講座
IT研修講座IT研修講座
IT研修講座
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座
 
it研修講座
it研修講座it研修講座
it研修講座
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008
 
kyoto IT
kyoto ITkyoto IT
kyoto IT
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 

Recently uploaded

SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案sugiuralab
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 

Recently uploaded (8)

SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 

京都 IT講座 9月