SlideShare ist ein Scribd-Unternehmen logo
1 von 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]

Weitere ähnliche Inhalte

Ähnlich wie it研修講座

IT研修講座
IT研修講座IT研修講座
IT研修講座annulus
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座annulus
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術ina job
 
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
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolistShinichiro Kumeuchi
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門柴田 篤志
 
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
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみようSaeki Tominaga
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩Atsushi Tadokoro
 
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
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 

Ähnlich wie it研修講座 (20)

IT研修講座
IT研修講座IT研修講座
IT研修講座
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術
 
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
 
Htmlの基本
Htmlの基本Htmlの基本
Htmlの基本
 
Htmlの基礎
Htmlの基礎Htmlの基礎
Htmlの基礎
 
Module02
Module02Module02
Module02
 
最速HTML勉強会
最速HTML勉強会最速HTML勉強会
最速HTML勉強会
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門
 
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops
 
Oktopartial Introduction
Oktopartial IntroductionOktopartial Introduction
Oktopartial Introduction
 
YUI
YUIYUI
YUI
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみよう
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
 
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
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
Html03
Html03Html03
Html03
 

Kürzlich hochgeladen

論文紹介: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
 
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
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
論文紹介: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
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム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
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
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
 

Kürzlich hochgeladen (10)

論文紹介: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
 
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
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
論文紹介: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
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
論文紹介: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...
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
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」の紹介
 

it研修講座