HTMLワークショップ Part2 - toiee Lab · 2018-07-10 · こんにちは！「ソースコードから見た目を予想する」の、おさらいをやってみましょう。

HTMLワークショップ Part2 © toiee Lab

HTMLワークショップ Part2

「先人の知恵」を使いこなす感覚を手にいれて、HTMLをマスターしよう

1


ワークショップの流れ(1)イントロダクション

(2)推測ゲーム

(3)パーツ分析力を高めよう(1)

(4)パーツ分析力を高めよう(2)

(5)先人の知恵で遊んでみよう

(6)グリッドシステムを探求

(7)自由に制作してみよう

(8)まとめ

2

ページ 1／1

<!DOCTYPE html><html><head><meta charset="utf-8"><title>見た目を推測してみよう</title>

</head><body>

<h1>こんにちは！</h1><p>「ソースコードから見た目を予想する」の、おさらいをやってみましょう。</p><p>さて、この行はどんな見た目になるでしょう？<a href="https://google.co.jp">Googleはこちら</a></p>

<p>この下に書くソースコードは、どんな見た目になるでしょうか？</p><ul><li>こんな見た目</li><li>あんな見た目</li><li>そんな見た目</li>

</ul>

<p>つぎのコードと、上のコードはどんな見た目の違いがあるでしょう？</p><ol><li>まず野菜を洗います</li><li>次に野菜をきります</li><li>最後に野菜を炒めて完成です</li>

</ol></body>

</html>

こんにちは！「ソースコードから見た目を予想する」の、おさらいをやってみましょう。

さて、この行はどんな見た目になるでしょう？Googleはこちら

この下に書くソースコードは、どんな見た目になるでしょうか？

こんな見た目あんな見た目そんな見た目

つぎのコードと、上のコードはどんな見た目の違いがあるでしょう？

1. まず野菜を洗います2. 次に野菜をきります3. 最後に野菜を炒めて完成です

ページ 1／1

<!DOCTYPE html><html><head><meta charset="utf-8"><title>見た目を推測してみよう</title>

</head><body>

<h1>こんにちは！</h1><p>さらに「ソースコードから見た目を予想する」の、おさらいをやってみましょう。</p><p>この下には何が表示されるでしょうか？</p><img src="http://placehold.it/350x150">

<p>この下に書くソースコードは、どんな見た目になるでしょうか？</p>

<table border="1"><thead><tr><th>県番号</th><th>都道府県名</th><th>県庁所在地</th>

</tr></thead><tbody><tr><td>1</td><td>北海道</td><td>札幌</td>

</tr><tr><td>2</td><td>青森県</td><td>青森</td>

</tr><tr><td>3</td><td>岩手県</td><td>盛岡</td>

</tr><tr><td>4</td><td>宮城県</td><td>仙台</td>

</tr></tbody>

</table>

</html>

こんにちは！さらに「ソースコードから見た目を予想する」の、おさらいをやってみましょう。

この下には何が表示されるでしょうか？

この下に書くソースコードは、どんな見た目になるでしょうか？

県番号都道府県名県庁所在地1 北海道札幌2 青森県青森3 岩手県盛岡4 宮城県仙台

Project name

Jumbotron headingCras justo odio, dapibus ac facilisis in, egestas eget quam. Fuscedapibus, tellus ac cursus commodo, tortor mauris condimentum

nibh, ut fermentum massa justo sit amet risus.

Sign up today

© 2016 Company, Inc.

Home About Contact

SubheadingDonec id elit non mi porta gravida at eget metus.Maecenas faucibus mollis interdum.

SubheadingMorbi leo risus, porta ac consectetur ac,vestibulum at eros. Cras mattis consectetur purussit amet fermentum.

SubheadingMaecenas sed diam eget risus varius blandit sitamet non magna.

SubheadingDonec id elit non mi porta gravida at eget metus.Maecenas faucibus mollis interdum.

SubheadingMorbi leo risus, porta ac consectetur ac,vestibulum at eros. Cras mattis consectetur purussit amet fermentum.

SubheadingMaecenas sed diam eget risus varius blandit sitamet non magna.

index.html ページ 1／1

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico">

<title>Narrow Jumbotron Template for Bootstrap</title>

 <link href="bootstrap.min.css" rel="stylesheet">

 <link href="jumbotron-narrow.css" rel="stylesheet">

  </head>

<body>

<div class="container"> <div class="header clearfix"> <nav> <ul class="nav nav-pills pull-right"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">About</a></li> <li role="presentation"><a href="#">Contact</a></li> </ul> </nav> <h3 class="text-muted">Project name</h3> </div>

<div class="jumbotron"> <h1>Jumbotron heading</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> </div>

<div class="row marketing"> <div class="col-lg-6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

<h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

<h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div>

<div class="col-lg-6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

<h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

<h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div>

<footer class="footer"> <p>© 2016 Company, Inc.</p> </footer>

</div> 

</body></html>

Our Pricing ModelIt's Quite Easy To Understand.

You Can Contact Us

[email protected]

COPYRIGHT 2014 - LANDING SUMO

BLACKTIE.CO

Welcome to our new app site.Sign up now & prepare to enjoy our

service.

SART YOUR FREE TRIAL

30 DAY FREE TRIAL - NO CREDIT CARD NEEDED.

Enter your e-mail address...

All the features you want in this kind ofapps you'll got it here.

Lorem Ipsum is simply dummy text of the printing and typesetting

industry. Lorem Ipsum has been the industry's standard dummy text

ever since the 1500s, when an unknown printer took a galley of type

and scrambled it to make a type specimen book.

Join your experiences with the people you caremore. Let us help you.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem

Ipsum has been the industry's standard dummy text ever since the 1500s.

LEARN MORE

STANDARD

10GB Storage Space

Free Support

100 Users

100GB Bandwith

29

SUBSCRIBE NOW

$ /mo.

BUSINESS

50GB Storage Space

Free Support

500 Users

500GB Bandwith

49

SUBSCRIBE NOW

$ /mo.

CORPORATE

100GB Storage Space

Free Support

10,000 Users

3TB Bandwith

89

SUBSCRIBE NOW

$ /mo.

I enjoyed so much the last edition of Landing Sumo,that I bought the tickets for the new one edition of the

event the first day.DAVID JHONSON


<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="assets/img/favicon.ico">

<title>BlackTie.co - Sumo Lading</title>

 <link href="assets/css/bootstrap.css" rel="stylesheet">

 <link href="assets/css/ionicons.min.css" rel="stylesheet"> <link href="assets/css/style.css" rel="stylesheet">

 <script src="assets/js/ie10-viewport-bug-workaround.js"></script>

  </head>

<body>

<div id="h"> <div class="logo">BLACKTIE.CO</div> <div class="social hidden-xs"> <a href="#"><i class="ion-social-twitter"></i></a> <a href="#"><i class="ion-social-instagram"></i></a> <a href="#"><i class="ion-social-facebook"></i></a> </div> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2 centered"> <h1>Welcome to our new app site.<br/>Sign up now & prepare to enjoy our service.</h1> <div class="mtb"> <form role="form" action="register.php" method="post" enctype="plain"> <input type="email" name="email" class="subscribe-input" placeholder="Enter your e-mail address..." required> <button class='btn btn-conf btn-green' type="submit">Sart your free trial</button> </form> </div> <h6>30 DAY FREE TRIAL - NO CREDIT CARD NEEDED.</h6> </div> </div> </div> </div>

<div class="container ptb"> <div class="row"> <div class="col-md-6"> <h2>All the features you want in this kind of apps you'll got it here.</h2> <p class="mt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p class="store"> <a href="#"><img src="assets/img/app-store.png" height="50" alt=""></a> <a href="#"><img src="assets/img/google-play.png" height="50" alt=""></a> </p> </div> <div class="col-md-6"> <img src="assets/img/phone.png" class="img-responsive mt" alt=""> </div> </div> </div>

<div id="sep"> <div class="container"> <div class="row centered"> <div class="col-md-8 col-md-offset-2"> <h1>Join your experiences with the people you care more. Let us help you.</h1> <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</h4> <p><button class="btn btn-conf-2 btn-green">Learn More</button></p>


</div> </div> </div> </div>

<div class="container ptb"> <div class="row centered"> <h2 class="mb">Our Pricing Model<br/>It's Quite Easy To Understand.</h2> <div class="col-md-4"> <div class="price-table"> <div class="p-head"> Standard </div> <div class="p-body"> <ul class="features"> <li>10GB Storage Space</li> <li>Free Support</li> <li>100 Users</li> <li>100GB Bandwith</li> </ul> <div class="price"> <span class="sub">$</span> <span class="detail">29</span> <span class="sub">/mo.</span> </div> <button class="btn btn-conf-2 btn-green">Subscribe Now</button> </div> </div> </div>

<div class="col-md-4"> <div class="price-table"> <div class="p-head"> Business </div> <div class="p-body"> <ul class="features"> <li>50GB Storage Space</li> <li>Free Support</li> <li>500 Users</li> <li>500GB Bandwith</li> </ul> <div class="price"> <span class="sub">$</span> <span class="detail">49</span> <span class="sub">/mo.</span> </div> <button class="btn btn-conf-2 btn-green">Subscribe Now</button> </div> </div> </div>

<div class="col-md-4"> <div class="price-table"> <div class="p-head"> Corporate </div> <div class="p-body"> <ul class="features"> <li>100GB Storage Space</li> <li>Free Support</li> <li>10,000 Users</li> <li>3TB Bandwith</li> </ul> <div class="price"> <span class="sub">$</span> <span class="detail">89</span> <span class="sub">/mo.</span> </div> <button class="btn btn-conf-2 btn-green">Subscribe Now</button> </div> </div> </div> </div> </div>

<div id="g"> <div class="container"> <div class="row sponsor centered"> <div class="col-sm-2 col-sm-offset-1"> <img src="assets/img/client1.png" alt=""> </div>


<div class="col-sm-2"> <img src="assets/img/client3.png" alt=""> </div> <div class="col-sm-2"> <img src="assets/img/client2.png" alt=""> </div> <div class="col-sm-2"> <img src="assets/img/client4.png" alt=""> </div> <div class="col-sm-2"> <img src="assets/img/client5.png" alt=""> </div> </div> </div> </div>

<div id="green"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 centered"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <div class="carousel-inner"> <div class="item active"> <h3>I enjoyed so much the last edition of Landing Sumo, that I bought the tickets for the new one edition of the event the first day.</h3> <h5><tgr>DAVID JHONSON</tgr></h5> </div> <div class="item"> <h3>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</h3> <h5><tgr>MARK LAWRENCE</tgr></h5> </div> <div class="item"> <h3>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration, by injected humour.</h3> <h5><tgr>LISA SMITH</tgr></h5> </div> </div> </div>

</div> </div> </div> </div>

<div id="f"> <div class="container"> <div class="row centered"> <h2>You Can Contact Us</h2> <h5>[email protected]</h5>

<p class="mt"> <a href="#"><i class="ion-social-twitter"></i></a> <a href="#"><i class="ion-social-dribbble"></i></a> <a href="#"><i class="ion-social-instagram"></i></a> <a href="#"><i class="ion-social-facebook"></i></a> <a href="#"><i class="ion-social-pinterest"></i></a> <a href="#"><i class="ion-social-tumblr"></i></a> </p> <h6 class="mt">COPYRIGHT 2014 - LANDING SUMO</h6> </div> </div> </div>

  <script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/retina-1.1.0.js"></script> </body></html>


ボタンを分析

3

？

(1) ソースコードを書き写して、確認してみましょうエディタに書き写して、ブラウザーで確認をしましょう。自分の予想との違いなどから、どんなルールか？を考えてみましょう。

(2) ドキュメントを参考に、さらに試して見ましょう http://getbootstrap.com/css/#buttons を参考にしましょう。たくさん試してみましょう。

(3) どんなルールかを考えましょうチームで話し合って見ましょう。

ヒント）・普通の<a>と何が違うのでしょうか？

※ 「ソースコードの結果を予想する」を意識しましょう

http://getbootstrap.com/css/#buttons


さらにパーツを試してみよう

4

• 画像 ★ • ヘルパークラス（文字装飾など）★ • パンくずリスト ★★ • アラート（警告）★★ • ラベル ★★ • パネル ★★★

• リスト・グループ ★★★★ • モーダル（ポップアップウィンドウ）★★★★★

• カルーセル（スライドショー）★★★★★

※ 調査にはドキュメントを使いましょう

★は難易度です。参考にしてください

英語版（本家）： http://getbootstrap.com 日本語版（有志）： http://www.wivern.com/bootstrap/

http://getbootstrap.com

http://www.wivern.com/bootstrap/


グリッドシステム

• 横幅を12分割して、要素を横並びにできる

• 要素の幅を決めて、横並びにできる（「幅4を3つ」や「幅8と幅4」など）

• 画面の幅に合わせて、要素の幅を変えることもできる（「スマホなら幅12、パソコンなら幅4」など）

5

合計12カラム

4 4 4

12

パソコン

スマホ

HTMLワークショップ Part2 © toiee Lab 6

① ② ③

追加しようさらに追加しよう

(1) ①のソースコードを書いて確認してみましょう結果を予想してみましょう（間違っていてもOK）。ブラウザーで確認をしましょう。画面の幅を、縮めたり、伸ばしたりして何が起こるかを確認しましょう。

(2) ②、③も同様に実験しましょう。 ①のソースコードを、②に変更して見ましょう。また、②の確認をしたら③のコードに変更をして、さらに確認をして見ましょう。

(3) チームの人と結果を見比べてみましょうお互いに結果をシェアしてみましょう。また、どんなルールがあるか？を話し合ってみましょう。

ヒント）・rowとは「行」、col(column)は「列」という意味です・では、数字は何を意味しているでしょうか？・xs(extra small)、sm(small)、md(medium)とは何を意味しているでしょうか？

※何度もソースコードと結果を見比べて、どんなルールがあるか？を考えてみよう

Documents

HTMLワークショップ Part2 - toiee Lab · 2018-07-10 · こんにちは！ 「ソースコードから見た目を予想する」の、おさらいをやってみましょう。

HTMLワークショップ Part2 - toiee Lab · 2018-07-10 · こんにちは！「ソースコードから見た目を予想する」の、おさらいをやってみましょう。