SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
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]

Contenu connexe

Similaire à 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
 

Similaire à 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
 

Dernier

ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 

Dernier (12)

ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 

it研修講座