SlideShare a Scribd company logo
1 of 15
Download to read offline
みんなで話し合いながら楽しくHTMLマークアップの知識を深めるイベント
html5j マークアップ部
Markup Cafe
マークアップカフェとは?
マークアップカフェは、HTMLマークアップを、ゲ
ーム感覚で楽しむイベントです。
気軽に参加できて、みんなで話し合いながら
HTMLマークアップについての知識を深めることが
できます。
マークアップカフェの流れ
1. チームをつくる
2. 出題
3. みんなで話し合う
4. 各テーブルの結果を発表する
5. 投票する
※ 出題数に応じて3∼4を繰り返します。
1. チームをつくる
参加者を人数に応じて各テーブルに振り分けます。
くじ引きで決めたり、席順は自由だったりくじ引きで決めたり。
A
B
C
1. チームをつくる
コミュニケーションで使うための模造紙、ペンを配ります。
模造紙はテーブル一面に広げて自由に書いてください。
※裏うつり等でテーブルが汚れないように注意してください。
2. 出題
司会者が問題を出題します。実際の制作にあるような問題を
だすのでよく聞いておきましょう。
カリスマ美容師が経営するWebサイト
のリニューアルで、PVが多くできるだ
け高速化したいと要望が...
問題の例
「カリスマ美容師が経営する美
容室のウェブサイトのリニューア
ル件。デザインは既に決定してい
る。サイトのリニューアルによっ
てPVアップを期待している。」
コンセプト欄のマークアップ、あ
なたならどうする?
みたいな感じ。
ココ
問題画像の例
出展: http://www.s-hoshino.com/
3. みんなで話し合う
問題の回答となるマークアップを30分間話し合います。
コード案やメモなどを気軽に模造紙に書いて会話を楽しみましょう。
考えたマークアップ結果を jsdo.it などに書いて発表に備えます。
4. 各チームの結果を発表する
各チームの考案したマークアップを発表します。
あとで投票を行うのでよく覚えておきましょう。
5. 投票する 各チームの発表でよかったと思うものに挙手で投
票を行います。一人2票。つまり良かったと思う2
チームに手を挙げることができます。
Aチーム! ※ 高得点のチームにはプレゼントがあるかも!?
HTMLのマークアップには決まった答えがありません。
どんなウェブページをつくりたいか。アクセスした人に
何を伝えたいか。どういう気持で伝えたいか。
それがページごとにちがうから、それぞれのページに
それぞれのマークアップがあるのです。
MarkupCafeは、みんなで気軽にHTMLマークアップについ
て気軽に話し合い、マークアップの知識を深め、より伝
わるマークアップ法をみんなでさがすイベントです。
MarkupCafeを通じて、あなたの意見、あなたの気持ちを
マークアップで伝えられるようになりませんか?
Let’s find your own Markup!!
Markup Cafe

More Related Content

Viewers also liked

Capturing the Elusive: Accounting for Study Attrition and Complex Trajectori...
Capturing the Elusive:  Accounting for Study Attrition and Complex Trajectori...Capturing the Elusive:  Accounting for Study Attrition and Complex Trajectori...
Capturing the Elusive: Accounting for Study Attrition and Complex Trajectori...Paul Brown
 
market research and audience theory
market research and audience theorymarket research and audience theory
market research and audience theorysallymcmanus
 
CONVITE TMA SANTA JOANA DOS MATADOUROS
CONVITE TMA SANTA JOANA DOS MATADOUROSCONVITE TMA SANTA JOANA DOS MATADOUROS
CONVITE TMA SANTA JOANA DOS MATADOUROSSinapsa
 
Workshop: Social Media for the Fashion & Textile Industries
Workshop: Social Media for the Fashion & Textile IndustriesWorkshop: Social Media for the Fashion & Textile Industries
Workshop: Social Media for the Fashion & Textile IndustriesJennifer Jones
 
Nova presentation 2014-03-11 4 new
Nova presentation   2014-03-11 4 newNova presentation   2014-03-11 4 new
Nova presentation 2014-03-11 4 newNova Interiors
 
Accessibility of Twitter
Accessibility of TwitterAccessibility of Twitter
Accessibility of Twittercsunwebmaster
 
Usabilidad - Productos que ame la gente
Usabilidad  - Productos que ame la gente  Usabilidad  - Productos que ame la gente
Usabilidad - Productos que ame la gente UX Nights
 
Linkedin, Creating Your Professional Profile
Linkedin, Creating Your Professional ProfileLinkedin, Creating Your Professional Profile
Linkedin, Creating Your Professional Profilestouffer
 
Revolución del neolítico
Revolución del neolíticoRevolución del neolítico
Revolución del neolíticojisset soto
 
Os talentos vivem no LinkedIn - Osvaldo Barbosa de Oliveira, ConnectIn 2016
Os talentos vivem no LinkedIn - Osvaldo Barbosa de Oliveira, ConnectIn 2016 Os talentos vivem no LinkedIn - Osvaldo Barbosa de Oliveira, ConnectIn 2016
Os talentos vivem no LinkedIn - Osvaldo Barbosa de Oliveira, ConnectIn 2016 LinkedIn
 
15 Emails That Worked - Sample
15 Emails That Worked - Sample15 Emails That Worked - Sample
15 Emails That Worked - Samplejgannonslideshare
 
10 things i wish i had known
10 things i wish i had known10 things i wish i had known
10 things i wish i had knownRashmi Sinha
 

Viewers also liked (15)

Capturing the Elusive: Accounting for Study Attrition and Complex Trajectori...
Capturing the Elusive:  Accounting for Study Attrition and Complex Trajectori...Capturing the Elusive:  Accounting for Study Attrition and Complex Trajectori...
Capturing the Elusive: Accounting for Study Attrition and Complex Trajectori...
 
market research and audience theory
market research and audience theorymarket research and audience theory
market research and audience theory
 
CONVITE TMA SANTA JOANA DOS MATADOUROS
CONVITE TMA SANTA JOANA DOS MATADOUROSCONVITE TMA SANTA JOANA DOS MATADOUROS
CONVITE TMA SANTA JOANA DOS MATADOUROS
 
Workshop: Social Media for the Fashion & Textile Industries
Workshop: Social Media for the Fashion & Textile IndustriesWorkshop: Social Media for the Fashion & Textile Industries
Workshop: Social Media for the Fashion & Textile Industries
 
Nova presentation 2014-03-11 4 new
Nova presentation   2014-03-11 4 newNova presentation   2014-03-11 4 new
Nova presentation 2014-03-11 4 new
 
Accessibility of Twitter
Accessibility of TwitterAccessibility of Twitter
Accessibility of Twitter
 
Presentación sobre el futbol
Presentación sobre el futbolPresentación sobre el futbol
Presentación sobre el futbol
 
Visión
VisiónVisión
Visión
 
Usabilidad - Productos que ame la gente
Usabilidad  - Productos que ame la gente  Usabilidad  - Productos que ame la gente
Usabilidad - Productos que ame la gente
 
Linkedin, Creating Your Professional Profile
Linkedin, Creating Your Professional ProfileLinkedin, Creating Your Professional Profile
Linkedin, Creating Your Professional Profile
 
Revolución del neolítico
Revolución del neolíticoRevolución del neolítico
Revolución del neolítico
 
Os talentos vivem no LinkedIn - Osvaldo Barbosa de Oliveira, ConnectIn 2016
Os talentos vivem no LinkedIn - Osvaldo Barbosa de Oliveira, ConnectIn 2016 Os talentos vivem no LinkedIn - Osvaldo Barbosa de Oliveira, ConnectIn 2016
Os talentos vivem no LinkedIn - Osvaldo Barbosa de Oliveira, ConnectIn 2016
 
6th biosimilars congregation 2015
6th biosimilars congregation 20156th biosimilars congregation 2015
6th biosimilars congregation 2015
 
15 Emails That Worked - Sample
15 Emails That Worked - Sample15 Emails That Worked - Sample
15 Emails That Worked - Sample
 
10 things i wish i had known
10 things i wish i had known10 things i wish i had known
10 things i wish i had known
 

More from Masakazu Muraoka

Kerasで可視化いろいろ
Kerasで可視化いろいろKerasで可視化いろいろ
Kerasで可視化いろいろMasakazu Muraoka
 
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Masakazu Muraoka
 
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Masakazu Muraoka
 
react-jsonschema-formについて
react-jsonschema-formについてreact-jsonschema-formについて
react-jsonschema-formについてMasakazu Muraoka
 
JS非同期処理のいま
JS非同期処理のいまJS非同期処理のいま
JS非同期処理のいまMasakazu Muraoka
 
Swaggerのさわりだけ
SwaggerのさわりだけSwaggerのさわりだけ
SwaggerのさわりだけMasakazu Muraoka
 
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜Masakazu Muraoka
 
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみるWeb屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみるMasakazu Muraoka
 
FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?Masakazu Muraoka
 
実はとれました。System xhrでcsv形式のopen dataを取得する
実はとれました。System xhrでcsv形式のopen dataを取得する実はとれました。System xhrでcsv形式のopen dataを取得する
実はとれました。System xhrでcsv形式のopen dataを取得するMasakazu Muraoka
 
HTML5でOpen Dataをやってみた
HTML5でOpen DataをやってみたHTML5でOpen Dataをやってみた
HTML5でOpen DataをやってみたMasakazu Muraoka
 
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?Masakazu Muraoka
 
Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Masakazu Muraoka
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Masakazu Muraoka
 
Html5でOpen Dataをやってみる
Html5でOpen DataをやってみるHtml5でOpen Dataをやってみる
Html5でOpen DataをやってみるMasakazu Muraoka
 

More from Masakazu Muraoka (20)

Kerasで可視化いろいろ
Kerasで可視化いろいろKerasで可視化いろいろ
Kerasで可視化いろいろ
 
Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
 
Thing.jsについて
Thing.jsについてThing.jsについて
Thing.jsについて
 
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満
 
react-jsonschema-formについて
react-jsonschema-formについてreact-jsonschema-formについて
react-jsonschema-formについて
 
Fetch apiについて
Fetch apiについてFetch apiについて
Fetch apiについて
 
JS非同期処理のいま
JS非同期処理のいまJS非同期処理のいま
JS非同期処理のいま
 
Swaggerのさわりだけ
SwaggerのさわりだけSwaggerのさわりだけ
Swaggerのさわりだけ
 
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
 
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみるWeb屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
 
Espruinoの紹介
Espruinoの紹介Espruinoの紹介
Espruinoの紹介
 
FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?
 
実はとれました。System xhrでcsv形式のopen dataを取得する
実はとれました。System xhrでcsv形式のopen dataを取得する実はとれました。System xhrでcsv形式のopen dataを取得する
実はとれました。System xhrでcsv形式のopen dataを取得する
 
HTML5でOpen Dataをやってみた
HTML5でOpen DataをやってみたHTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
 
Htmlのコトバ
HtmlのコトバHtmlのコトバ
Htmlのコトバ
 
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
 
Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
 
Html5でOpen Dataをやってみる
Html5でOpen DataをやってみるHtml5でOpen Dataをやってみる
Html5でOpen Dataをやってみる
 
HTML5 and Graphics
HTML5 and GraphicsHTML5 and Graphics
HTML5 and Graphics
 

Recently uploaded

ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfTakayuki Nakayama
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルCRI Japan, Inc.
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルCRI Japan, Inc.
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用KLab Inc. / Tech
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperleger Tokyo Meetup
 

Recently uploaded (7)

ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 

MarkupCafe - html5j Markup group