SlideShare a Scribd company logo
本日のアジェンダ
DreamWeaverのセッティング
制作仕様書に基づいてhtmlを
宿題と質問
5分
20分
5分
本日のアジェンダ
DreamWeaverでcssを書く
ワイヤーフレームを下書きに
宿題と質問
5分
20分
5分
html+cssを挫折した全ての人のための基礎実習
http://schoo.jp/class/390
!
挫折した人のための初心者速習html+css【2カラムボックスモデル編】
http://schoo.jp/class/518
下の授業は
フリーチケで
公開中にゃ
前提知識が
必要な授業なの
にゃ
CSSでレイアウトするなら絶対覚えておきたい配置のルール:
フロートや絶対配置、z-index とかいろいろ
http://webdesignrecipes.com/css-visual-formating-model/
意外と知らない!?CSSセレクタ20個のおさらい
http://weboook.blog22.fc2.com/blog-entry-268.html
html+cssを初めて学ぶ人は、
今日の完成サンプルは、
こちら
!
http://akikito.com/schoo/
20140522/
見比べて
みるにゃ自分の
cssと
Webデザインを始めたい方に贈る、「HTML文書を正しい構文で組み立てる」必要スキル【HTML編】 先生:田中晶子

More Related Content

What's hot

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 

What's hot (20)

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
Night Hack LT
Night Hack LTNight Hack LT
Night Hack LT
 
CSSのカバレッジツール
CSSのカバレッジツールCSSのカバレッジツール
CSSのカバレッジツール
 
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
 
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing  at HTML5 Conference 2016E2E CSS Testing  at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
 
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろうWordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
 
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon StyleノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
 
Mu seminor2014 06
Mu seminor2014 06Mu seminor2014 06
Mu seminor2014 06
 
コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意
 
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
 
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画するChart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画する
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
 
Wordpress buddypress3
Wordpress buddypress3Wordpress buddypress3
Wordpress buddypress3
 
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
 
え?まだMAMPで消耗してんの?
え?まだMAMPで消耗してんの?え?まだMAMPで消耗してんの?
え?まだMAMPで消耗してんの?
 

Viewers also liked

Materiales dentales ingles
Materiales dentales    inglesMateriales dentales    ingles
Materiales dentales ingles
ZulemaQuezz
 
Google sketchup w1 introduction
Google sketchup w1 introductionGoogle sketchup w1 introduction
Google sketchup w1 introduction
Noi Kapong
 

Viewers also liked (20)

【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
 
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
 
Materiales dentales ingles
Materiales dentales    inglesMateriales dentales    ingles
Materiales dentales ingles
 
【再放送】いろんな企画会議に参加してみよう!
【再放送】いろんな企画会議に参加してみよう!【再放送】いろんな企画会議に参加してみよう!
【再放送】いろんな企画会議に参加してみよう!
 
【再放送】ゼロから始めるオンラインストア
【再放送】ゼロから始めるオンラインストア【再放送】ゼロから始めるオンラインストア
【再放送】ゼロから始めるオンラインストア
 
Application security in a hurry webinar
Application security in a hurry webinarApplication security in a hurry webinar
Application security in a hurry webinar
 
Isevilikten hiristiyanliga
Isevilikten hiristiyanligaIsevilikten hiristiyanliga
Isevilikten hiristiyanliga
 
タクラムと考える未来の文化創造に必要なアーキテクチャ思考 先生:Kaz 米田
タクラムと考える未来の文化創造に必要なアーキテクチャ思考 先生:Kaz 米田タクラムと考える未来の文化創造に必要なアーキテクチャ思考 先生:Kaz 米田
タクラムと考える未来の文化創造に必要なアーキテクチャ思考 先生:Kaz 米田
 
Vapour phase a potential future use for essential oils as
Vapour phase a potential future use for essential oils asVapour phase a potential future use for essential oils as
Vapour phase a potential future use for essential oils as
 
Psmcartabelgrado
PsmcartabelgradoPsmcartabelgrado
Psmcartabelgrado
 
目標達成のための、人から吸収する技術①「答えは相手にある」 先生:永谷 研一
目標達成のための、人から吸収する技術①「答えは相手にある」 先生:永谷 研一目標達成のための、人から吸収する技術①「答えは相手にある」 先生:永谷 研一
目標達成のための、人から吸収する技術①「答えは相手にある」 先生:永谷 研一
 
Grip digi slideshare hb1 notities
Grip digi slideshare hb1 notitiesGrip digi slideshare hb1 notities
Grip digi slideshare hb1 notities
 
Google sketchup w1 introduction
Google sketchup w1 introductionGoogle sketchup w1 introduction
Google sketchup w1 introduction
 
ソーシャルメディア時代のリスクマネジメント 先生:福田 浩至
ソーシャルメディア時代のリスクマネジメント 先生:福田 浩至ソーシャルメディア時代のリスクマネジメント 先生:福田 浩至
ソーシャルメディア時代のリスクマネジメント 先生:福田 浩至
 
Photoshopはいらなくなる? これからのWebで変わるワークフロー 先生:イシジマ ミキ
Photoshopはいらなくなる? これからのWebで変わるワークフロー 先生:イシジマ ミキPhotoshopはいらなくなる? これからのWebで変わるワークフロー 先生:イシジマ ミキ
Photoshopはいらなくなる? これからのWebで変わるワークフロー 先生:イシジマ ミキ
 
よりよいアプリ制作に必要なエンジニアとデザイナーの連携術 先生:山本麻美
よりよいアプリ制作に必要なエンジニアとデザイナーの連携術 先生:山本麻美よりよいアプリ制作に必要なエンジニアとデザイナーの連携術 先生:山本麻美
よりよいアプリ制作に必要なエンジニアとデザイナーの連携術 先生:山本麻美
 
プログラミングはじめの一歩 先生:関根 元和
プログラミングはじめの一歩 先生:関根 元和プログラミングはじめの一歩 先生:関根 元和
プログラミングはじめの一歩 先生:関根 元和
 
India under transformation
India under transformationIndia under transformation
India under transformation
 
Rating july16
Rating july16Rating july16
Rating july16
 
ゼロからのWordPress(1限目)〜WordPressの今と未来・基本について知る〜 先生:高野直子先生・相原知栄子先生
ゼロからのWordPress(1限目)〜WordPressの今と未来・基本について知る〜 先生:高野直子先生・相原知栄子先生ゼロからのWordPress(1限目)〜WordPressの今と未来・基本について知る〜 先生:高野直子先生・相原知栄子先生
ゼロからのWordPress(1限目)〜WordPressの今と未来・基本について知る〜 先生:高野直子先生・相原知栄子先生
 

More from schoowebcampus

i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...
schoowebcampus
 
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
schoowebcampus
 
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...
schoowebcampus
 
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...
schoowebcampus
 
i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...
schoowebcampus
 
個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~
schoowebcampus
 
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
schoowebcampus
 
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
schoowebcampus
 
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
schoowebcampus
 
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
schoowebcampus
 

More from schoowebcampus (20)

Compl exxx after
Compl exxx afterCompl exxx after
Compl exxx after
 
Compl exxx before
Compl exxx beforeCompl exxx before
Compl exxx before
 
ビジネスプラン概要資料 New
ビジネスプラン概要資料 Newビジネスプラン概要資料 New
ビジネスプラン概要資料 New
 
2479
24792479
2479
 
schoo法人利用-ビジネスプランのご案内
schoo法人利用-ビジネスプランのご案内schoo法人利用-ビジネスプランのご案内
schoo法人利用-ビジネスプランのご案内
 
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
 
i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...
 
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
 
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...
 
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...
 
i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...
 
ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法
 
1840
18401840
1840
 
授業資料(スクー)
授業資料(スクー)授業資料(スクー)
授業資料(スクー)
 
個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~
 
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
 
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
 
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
 
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 

Recently uploaded

《ビルコム株式会社》エンジニア向け会社紹介資料.pptx
《ビルコム株式会社》エンジニア向け会社紹介資料.pptx《ビルコム株式会社》エンジニア向け会社紹介資料.pptx
《ビルコム株式会社》エンジニア向け会社紹介資料.pptx
ssuser82ee2b
 
最先端の勝ち筋 を常に考えてきた SAKIYOMIだからできる 全く新しい運用代行 Instagram総合支援
最先端の勝ち筋 を常に考えてきた SAKIYOMIだからできる 全く新しい運用代行 Instagram総合支援最先端の勝ち筋 を常に考えてきた SAKIYOMIだからできる 全く新しい運用代行 Instagram総合支援
最先端の勝ち筋 を常に考えてきた SAKIYOMIだからできる 全く新しい運用代行 Instagram総合支援
toshifumiyase1
 

Recently uploaded (8)

株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
 
HRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreachHRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreach
 
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL HoldingsThe AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
 
《ビルコム株式会社》エンジニア向け会社紹介資料.pptx
《ビルコム株式会社》エンジニア向け会社紹介資料.pptx《ビルコム株式会社》エンジニア向け会社紹介資料.pptx
《ビルコム株式会社》エンジニア向け会社紹介資料.pptx
 
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
 
【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer
 
最先端の勝ち筋 を常に考えてきた SAKIYOMIだからできる 全く新しい運用代行 Instagram総合支援
最先端の勝ち筋 を常に考えてきた SAKIYOMIだからできる 全く新しい運用代行 Instagram総合支援最先端の勝ち筋 を常に考えてきた SAKIYOMIだからできる 全く新しい運用代行 Instagram総合支援
最先端の勝ち筋 を常に考えてきた SAKIYOMIだからできる 全く新しい運用代行 Instagram総合支援
 
株式会社種村建設_新卒向け会社紹介資料_____________________
株式会社種村建設_新卒向け会社紹介資料_____________________株式会社種村建設_新卒向け会社紹介資料_____________________
株式会社種村建設_新卒向け会社紹介資料_____________________