CSS6 〜横並びfloatの設定〜
floatを利用して図1のHTMLを図2のように横並びにしてください。
floatを利用して図1のように縦に並んでいるdivを図2のように左詰めに横並びにしてください。
図1のHTML
図2のHTML
図1のソースコードです。下記のHTMLソースコードを利用して横並びになったCSS設定を追加してください。
■HTMLソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> <style media="screen"> .sample1{ background:aqua; width:300px; height:300px; } .sample2{ background:pink; width:300px; height:300px; } .clear{ } </style> </head> <body> <h1>横並びの設定 float</h1> <div class="sample1"> </div> <div class="sample2"> </div> <div style="clear"> </div> </body> </html> |
事前準備
デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。
「webst8」フォルダの中に「css-lesson6」フォルダを作成して、Atomで「lesson6.html」を新規作成して先ほどのソースコードを利用して作成してください。
「lesson6.html」をダブルクリックして開きます。課題にあった画面通り表示されていれば、完成です。
参考
こたえ
CSSレッスンのソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> <style media="screen"> .sample1{ background:aqua; width:300px; height:300px; float:left; } .sample2{ background:pink; width:300px; height:300px; float:left; } .clear{ clear:both; } </style> </head> <body> <h1>横並びの設定 float</h1> <div class="sample1"> </div> <div class="sample2"> </div> <div style="clear"> </div> </body> </html> |