2/12 ①CSS(CSSによるページ構築) / ②Photoshop(写真の補正)
本日の学習内容~まとめと感想~
CSSによるページ構築
文章構造によるグループ化 → DIV要素
- グループ化とは、div要素によるコンテンツのブロック化
- 見出しと本文のまとまりとを一緒に構造化
floatプロパティを使ったレイアウト
紙媒体と違いwebは横並びが苦手
演習課題
F01
ボックス「primary」「secondary」を背景色をつけて表示するよう記述しなさい
それぞれ、幅:200px、高さ:200px、背景色:適宜
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>floatの練習(1)</title> <style> #primary { float: right; width: 200px; height: 200px; background: #F1FAA3; } #secondary { float: left; width: 200px; height: 200px; background: #F2DDEE; } #wrapper { width: 450px; height: auto; background: #36C; overflow: hidden; } </style> </head> <body> <div id="wrapper"> <div id="primary"></div> <div id="secondary"></div> </div> </body> </html>
F02
「primary」を左に、「secondary」を右にfloatさせなさい
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>floatの練習(2)</title> <style> #primary { float: right; width: 200px; height: 200px; background: #F1FAA3; } #secondary { float: left; width: 200px; height: 200px; background: #F2DDEE; } #wrapper { margin: 0 auto; padding: 10px; padding: 10px; width: 430px; height: auto; background: #36C; overflow: hidden; } </style> </head> <body> <div id="wrapper"> <div id="primary"></div> <div id="secondary"></div> </div> </body> </html>
F03
「primary」と「secondary」を「wrapper」で囲みなさい
「wrapper」は、幅450px、高さ:auto、背景色:適宜
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>floatの練習(3)</title> <style> #primary { margin: 10px 10px 10px 0; float: right; width: 200px; height: 200px; background: #F1FAA3; } #secondary { margin: 10px 0 10px 10px; float: left; width: 200px; height: 200px; background: #F2DDEE; } #wrapper { margin: 0 auto; width: 450px; height: auto; background: #36C; overflow: hidden; } </style> </head> <body> <div id="wrapper"> <div id="primary"></div> <div id="secondary"></div> </div> </body> </html>
F04
「primary」を右に、「secondary」を左にfloatさせなさい
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>レイアウトの練習(1)</title> <style> body, div { margin: 0; padding: 0; } body { background-color: #CCCCCC; font-family: "Hiragino Kaku Gothic PronN", Meiryo, sans-serif; } #container { margin: 0 auto; background-color: #FFFFFF; width: 760px; height: auto; } #header { background-color: #B1DAF0; width:760px; height:100px; } #nav { background-color: #FFE3F1; width: 760px; height:40px; } #wrapper { background-color: #F3B2B3; width:760px; heght: auto; overflow: hidden; } #content { float: right; background-color: #F9F5E7; width: 560px; height: 300px; } #sidebar { float: left; background-color: #CFFAAB; width: 200px; height:300px; } #footer { background-color: #7FC4BF; width: 760px; height: 40px; } </style> </head> <body> <div id="container"> <div id="header">#header</div> <div id="nav">#nav</div> <div id="wrapper"> <div id="content">#content</div> <div id="sidebar">#sidebar</div> </div><!-- /#wrapper --> <div id="footer">#footer</div> </div><!-- /#container --> </body> </html>
F05
「wrapper」と「primary」「secondary」の空きを10pxに設定して表示させなさい
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>レイアウトの練習(1)</title> <style> /* reset */ body, div { margin: 0; padding: 0; } /*rayout */ body { background-color: #CCCCCC; font-family: "Hiragino Kaku Gothic PronN", Meiryo, sans-serif; } #container { margin: 0 auto; padding: 10px; background-color: #FFFFFF; width: 750px; height: auto; } #header { margin-bottom: 10px; background-color: #B1DAF0; width:750px; height:100px; } #nav { margin-bottom: 10px; background-color: #FFE3F1; width: 750px; height:40px; } #wrapper { margin: 0 auto; background-color: #F3B2B3; width:750px; heght: auto; overflow: hidden; } #content { float: right; background-color: #F9F5E7; width: 550px; height: 300px; } #sidebar { float: left; background-color: #CFFAAB; width: 190px; height:300px; } #footer { margin-top: 10px; background-color: #7FC4BF; width: 750px; height: 40px; } </style> </head> <body> <div id="container"> <div id="header">#header</div> <div id="nav">#nav</div> <div id="wrapper"> <div id="content">#content</div> <div id="sidebar">#sidebar</div> </div><!-- /#wrapper --> <div id="footer">#footer</div> </div><!-- /#container --> </body> </html>
paddingを使用する場合
paddingを使うとその分幅が大きくなるので、幅長をその分小さくする
コーディング時 ミスしやすいポイント
- スペルミス
- 色#抜け
- セミコロン、コロン抜け
- id名、名前 不一致
意図した通りに表示されないとき
- 検証サービス等で検証したうえで質問する
(Chromeで)右クリック「要素を調査」
[関連記事]
「floatを使ったレイアウト」の検索結果 - Webデザイン初心者の勉強 1月27日開講クラス