コード判定結果
コンテンツブロックなどが動作していないかご確認ください。
paizaの会員登録が必要です
#04:CSSのレイアウト指定を理解しよう
この動画を見るにはpaizaの会員登録が必要です
無料会員登録して始める実技課題 「見出しに枠線を付ける」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグの枠線(border)を付けてください。プロパティの設定値は、「solid #00A0A0」とします。
コードの実行をして、エラーが出なければ、演習課題クリアです！
期待する出力値
実技課題 「bodyの内側に余白を付ける」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、bodyタグの内側の余白(padding)を100ピクセルにしてください。
コードの実行をして、エラーが出なければ、演習課題クリアです！
期待する出力値
実技課題 「見出しの外側に余白を追加する」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグのの外側の余白(margin)を80ピクセルにしてください。
コードの実行をして、エラーが出なければ、演習課題クリアです！
期待する出力値
ここではCSSを使ったパーツのレイアウトに挑戦します。そのために、CSSを使った余白や間隔の指定方法について学習しましょう。
・要素の枠線を表示border: dotted;
・要素の内側の余白padding: 30px;
・要素の外側の余白margin: 30px;
・Google Chrome
1. 右上の設定ボタンをクリック
2. 「その他ツール」 > デベロッパーツールを選択
3. 「インスペクタ」ボタンをクリック
・Firefox
1. 右上のメニューボタンをクリック
2. 「開発ツール」 > 「インスペクタ」を選択
・Safari
1. 編集 > 設定
2. 環境設定が表示されたら、「詳細」タブの「メニューバーに「開発」メニューを表示」をオン
2. 「開発」メニューで、Webインスペクタを選択
・Microsoft Eage
1. 「F12」キーを押す
2. 「要素の選択」ボタンをクリック
CSS： marginの正しい理解 (CSSのmarginが難しい)｜Web Design KOJIKA17
http://kojika17.com/2012/08/margin-of-css.html
テーブルレイアウトから抜け出せないエンジニアがとりあえず最低限押さえるべき仕様 - タオルケット体操
http://hachibeechan.hateblo.jp/entry/2014/10/16/%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%8B%E3%82%89%E6%8A%9C%E3%81%91%E5%87%BA%E3%81%9B%E3%81%AA%E3%81%84%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2
CSSのわからないを解決する基礎知識 ボックスモデル編 - タオルケット体操
http://hachibeechan.hateblo.jp/entry/css-howto-box-model