演習課題「pタグを設置」
右側のコードエリアに表示されているhtmlは、"hello world"とテキストを表示します。
コードを修正して、テキスト"Project Nyaan web page"の部分をリードとして出力されるようにしてください。
リードとして追加するには、pタグにclass="lead"を追加します。
なお、leadクラスは表示領域の幅によって文字サイズが変化することに注意してください。
コードの実行をして、エラーが出なければ、演習課題クリアです！
期待する出力値
演習課題「ボタンを追加」
右側のコードエリアに表示されているhtmlは、「hello world」という見出しを表示します。
コードを修正して、見出しの下に「OK」ボタンを表示するようにしてください。
ボタンを追加するため、aタグには、次の属性を追加します。
class="btn btn-primary" href="#"
コードの実行をして、エラーが出なければ、演習課題クリアです！
期待する出力値
＃04:Bootstrapを使ってみよう
ここでは、もう少ししっかりとしたWebページを作ります。先ほど作成したWebページは、HTMLの基本を説明するために、本来必要なタグをかなり省略していました。今回は、Webページを作るために、HTML5という最新の規格とBootstrapというHTMLフレームワークを使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Project Nyaan</title>
</head>
<body>
<h1>吾輩は猫である。</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project Nyaan</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<h1>吾輩は猫である。</h1>
<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>
</html>
ここでは省略していますが、本来は、古いブラウザ(IE8など)に対応するためのコードを追加します。
HTML5入門
http://html5.cyberlab.info/
html5入門
http://html5.imedia-web.net/
とほほのBootstrap入門
http://www.tohoho-web.com/ex/bootstrap.html