SlideShare une entreprise Scribd logo
1  sur  72
授業のアジェンダ
 

html5とは何? 10分
 

サイトの裏側を覗いてみよう 5分
 

Sublimeでhtml5を書いてみよう 30分
 

cssとは何? 10分
 

Sublimeでcssを書いてみよう 15分
 

質疑応答・宿題 20分
schooの「授業を探す」ページ
の裏側を覗いてみましょう!

http://schoo.jp/class?f=live
Sublimeを使って
html5を書いてみましょう。
ここから演習素材を落として、解凍してください。

http://akikito.com/schoo/schoo20140125_16.zip
RPGのカラーチャート
普通のRGBカラーチャート
http://www.scollabo.com/banban/lectur/
websafe.html

マンセルのカラーチャート
http://hue360.herokuapp.com/
Sublime 設定参考URL
初心者用Sublime の設定
http://ch.nicovideo.jp/tanzo/blomaga/ar152449

使いやすいテーマまとめ
http://coliss.com/articles/freebies/freebies-sublimetext-themes-2014-newyear.html
宿 題
次の授業はどんな事が習いたいか、
ご要望はありますか?
要望が多かった物を取り上げていくつもりですので、
ふるって宿題の提出をお願いします。

確定している物は、JQueryと
レスポンシブデザインです。

Contenu connexe

Tendances

非同期処理をちょっとはラクに。Promises:aほか
 非同期処理をちょっとはラクに。Promises:aほか 非同期処理をちょっとはラクに。Promises:aほか
非同期処理をちょっとはラクに。Promises:aほか
Masakazu Muraoka
 

Tendances (13)

HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
 
人の言うことを簡単に信じるな!
人の言うことを簡単に信じるな!人の言うことを簡単に信じるな!
人の言うことを簡単に信じるな!
 
Mass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScriptMass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScript
 
初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!
 
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたプログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
 
HTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向けHTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向け
 
CSS3を用いた、Webサイトのデザイン表現 先生:田中 晶子
CSS3を用いた、Webサイトのデザイン表現 先生:田中 晶子CSS3を用いた、Webサイトのデザイン表現 先生:田中 晶子
CSS3を用いた、Webサイトのデザイン表現 先生:田中 晶子
 
Module02
Module02Module02
Module02
 
あるマークアップエンジニアの 初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの 初期制作時のテンプレ事情
 
非同期処理をちょっとはラクに。Promises:aほか
 非同期処理をちょっとはラクに。Promises:aほか 非同期処理をちょっとはラクに。Promises:aほか
非同期処理をちょっとはラクに。Promises:aほか
 
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解するこれで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
 
mrubyで作るマイコンボード
mrubyで作るマイコンボードmrubyで作るマイコンボード
mrubyで作るマイコンボード
 
自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について
 

En vedette

新人プロジェクトリーダーが抑えるべき勘所
新人プロジェクトリーダーが抑えるべき勘所新人プロジェクトリーダーが抑えるべき勘所
新人プロジェクトリーダーが抑えるべき勘所
schoowebcampus
 

En vedette (20)

201605 fa勉強会スライド
201605 fa勉強会スライド201605 fa勉強会スライド
201605 fa勉強会スライド
 
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
 
Illustratorでクリエイティブ名刺をつくってみよう!(3限目)
Illustratorでクリエイティブ名刺をつくってみよう!(3限目)Illustratorでクリエイティブ名刺をつくってみよう!(3限目)
Illustratorでクリエイティブ名刺をつくってみよう!(3限目)
 
WordPressでブログサイト制作実習(第2回:実制作編) 先生:藤本 陽介
WordPressでブログサイト制作実習(第2回:実制作編) 先生:藤本 陽介WordPressでブログサイト制作実習(第2回:実制作編) 先生:藤本 陽介
WordPressでブログサイト制作実習(第2回:実制作編) 先生:藤本 陽介
 
Illustratorでクリエイティブ名刺をつくってみよう! 先生:イシジマ ミキ
Illustratorでクリエイティブ名刺をつくってみよう! 先生:イシジマ ミキIllustratorでクリエイティブ名刺をつくってみよう! 先生:イシジマ ミキ
Illustratorでクリエイティブ名刺をつくってみよう! 先生:イシジマ ミキ
 
【schoo WEB-campus】どうすれば小さなチームでも大きな成果を出せるのか
【schoo WEB-campus】どうすれば小さなチームでも大きな成果を出せるのか【schoo WEB-campus】どうすれば小さなチームでも大きな成果を出せるのか
【schoo WEB-campus】どうすれば小さなチームでも大きな成果を出せるのか
 
WordPressを始めたい方の第一歩 先生:庄崎 大祐
WordPressを始めたい方の第一歩 先生:庄崎 大祐WordPressを始めたい方の第一歩 先生:庄崎 大祐
WordPressを始めたい方の第一歩 先生:庄崎 大祐
 
WordPressでブログサイト制作実習(第1回:開発環境構築編) 先生:藤本 陽介
WordPressでブログサイト制作実習(第1回:開発環境構築編) 先生:藤本 陽介WordPressでブログサイト制作実習(第1回:開発環境構築編) 先生:藤本 陽介
WordPressでブログサイト制作実習(第1回:開発環境構築編) 先生:藤本 陽介
 
ウェブディレクションの基礎(第3回:運用編) 先生:中村 健太
ウェブディレクションの基礎(第3回:運用編) 先生:中村 健太ウェブディレクションの基礎(第3回:運用編) 先生:中村 健太
ウェブディレクションの基礎(第3回:運用編) 先生:中村 健太
 
Schoo web campus「相手に伝わる」文章を書く技術 3限目
 Schoo web campus「相手に伝わる」文章を書く技術 3限目 Schoo web campus「相手に伝わる」文章を書く技術 3限目
Schoo web campus「相手に伝わる」文章を書く技術 3限目
 
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
 
Illustratorでクリエイティブ名刺をつくってみよう! 先生:イシジマ ミキ
Illustratorでクリエイティブ名刺をつくってみよう! 先生:イシジマ ミキIllustratorでクリエイティブ名刺をつくってみよう! 先生:イシジマ ミキ
Illustratorでクリエイティブ名刺をつくってみよう! 先生:イシジマ ミキ
 
新人プロジェクトリーダーが抑えるべき勘所
新人プロジェクトリーダーが抑えるべき勘所新人プロジェクトリーダーが抑えるべき勘所
新人プロジェクトリーダーが抑えるべき勘所
 
「熱狂し続ける場の発明」に必要な5つのkeyword 先生:中村 真広
「熱狂し続ける場の発明」に必要な5つのkeyword 先生:中村 真広「熱狂し続ける場の発明」に必要な5つのkeyword 先生:中村 真広
「熱狂し続ける場の発明」に必要な5つのkeyword 先生:中村 真広
 
プロジェクトリーダーになったら学ぶべき、プロジェクト・マネジメント入門 先生:芝本 秀徳
プロジェクトリーダーになったら学ぶべき、プロジェクト・マネジメント入門 先生:芝本 秀徳プロジェクトリーダーになったら学ぶべき、プロジェクト・マネジメント入門 先生:芝本 秀徳
プロジェクトリーダーになったら学ぶべき、プロジェクト・マネジメント入門 先生:芝本 秀徳
 
ゼロからのWordPress(1限目)〜WordPressの今と未来・基本について知る〜 先生:高野直子先生・相原知栄子先生
ゼロからのWordPress(1限目)〜WordPressの今と未来・基本について知る〜 先生:高野直子先生・相原知栄子先生ゼロからのWordPress(1限目)〜WordPressの今と未来・基本について知る〜 先生:高野直子先生・相原知栄子先生
ゼロからのWordPress(1限目)〜WordPressの今と未来・基本について知る〜 先生:高野直子先生・相原知栄子先生
 
ビジネスプラン概要資料 New
ビジネスプラン概要資料 Newビジネスプラン概要資料 New
ビジネスプラン概要資料 New
 
July Tech Festa 2014発表資料
July Tech Festa 2014発表資料July Tech Festa 2014発表資料
July Tech Festa 2014発表資料
 
CSSをさわってみよう
CSSをさわってみようCSSをさわってみよう
CSSをさわってみよう
 
HTML初心者講座
HTML初心者講座HTML初心者講座
HTML初心者講座
 

Plus de 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
 
ゲームや映像で使えるフリー音楽素材「魔王魂」の運営者に聞く、BGM・効果音活用講座
ゲームや映像で使えるフリー音楽素材「魔王魂」の運営者に聞く、BGM・効果音活用講座ゲームや映像で使えるフリー音楽素材「魔王魂」の運営者に聞く、BGM・効果音活用講座
ゲームや映像で使えるフリー音楽素材「魔王魂」の運営者に聞く、BGM・効果音活用講座
schoowebcampus
 

Plus de schoowebcampus (20)

Compl exxx after
Compl exxx afterCompl exxx after
Compl exxx after
 
Compl exxx before
Compl exxx beforeCompl exxx before
Compl exxx before
 
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デザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 
ゲームや映像で使えるフリー音楽素材「魔王魂」の運営者に聞く、BGM・効果音活用講座
ゲームや映像で使えるフリー音楽素材「魔王魂」の運営者に聞く、BGM・効果音活用講座ゲームや映像で使えるフリー音楽素材「魔王魂」の運営者に聞く、BGM・効果音活用講座
ゲームや映像で使えるフリー音楽素材「魔王魂」の運営者に聞く、BGM・効果音活用講座
 

Dernier

Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipService-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
Yasuyoshi Minehisa
 
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
Michael Rada
 

Dernier (8)

事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)
 
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチUP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
 
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdfストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
 
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
 
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipService-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
 
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
 
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
 
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
 

html+cssを挫折した全ての人のための基礎実習 先生:田中 晶子