コード判定結果
コンテンツブロックなどが動作していないかご確認ください。
paizaの会員登録が必要です
#05:レスポンシブデザインにしよう
この動画を見るにはpaizaの会員登録が必要です
無料会員登録して始める実技課題 「divタグのクラスにcontainerを追加する」
右側のコードエリアのhtmlのdivタグに「container」というクラスを追加してください。
採点をして、エラーが出なければ、演習課題クリアです！
期待する出力値
実技課題 「見出しにCSSクラスを適用する」
右側のコードエリアのhtmlは、divタグの中に「hello paiza」という見出しを表示します。
このdivタグに「starter-template」というクラスを追加して、見出しの周囲のエリアに「starter-template」のスタイルを適用してください。
採点をして、エラーが出なければ、演習課題クリアです！
期待する出力値
ここでは、Bootstrapのコンテナという機能を使って、Webページのデザインを整えていきます。そして、PCでもスマートフォンでも、レイアウトが崩れにくいレスポンシブデザインを実現します。
レスポンシブデザインとは、スマホやタブレット・PCなどサイズが異なるディスプレイでも、単一のHTMLファイルで、最適なデザインで表示する技術です。縦持ちで細長いディスプレイのスマホと、大きな画面のPCでは、最適なレイアウトが違っています。レスポンシブデザインでは、これを単一のHTMLで自動的に表示し分けます。
<body>
<div class="container">
<div class="starter-template">
<h1>吾輩は猫である。</h1>
<p class="lead">名前はまだない。</p>
<a class="btn btn-primary" href="#">OK</a>
</div>
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
レスポンシブデザインとは｜レスポンシブWebデザイン｜RWD｜responsive design
- 意味/定義/解説/説明 ： IT用語辞典
http://e-words.jp/w/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3.html
【WEBデザイン10選】これぞ進化系！今どきのレスポンシブWEBデザインサイトまと
め | インバウンドサイトを作るときに知っておきたいこと | エムハンド
http://www.m-hand.info/blog/3292/
ASCII.jp：レスポンシブWebデザインとは
｜ゼロから始めるレスポンシブWebデザイン入門
http://ascii.jp/elem/000/000/697/697463/
Bare - Bootstrap Starter Template - Start Bootstrap
http://startbootstrap.com/template-overviews/bare/