2014-09-06

2014-09-06

CSSレイアウト基礎演習(2)Add Star

 

 

A

  • 以下のように表示するよう記述しなさい(値は適宜)

 

f:id:web-0127:20140222204223j:image

 


宮沢賢治作品
いてふの実
そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。


B

 

f:id:web-0127:20140222203847j:image

 


 

f:id:web-0127:20140222204709j:image

 



C

 

f:id:web-0127:20140222205824j:image

 


 

f:id:web-0127:20140222210149j:image

 



D

  • #container 幅760px
  • 各ブロックの空き 10px
  • 他、適宜設定

f:id:web-lesson:20140720202357p:image



E

  • #container 幅760px
  • 各ブロックの空き 10px
  • 他、適宜設定

f:id:web-lesson:20140720205547p:image






解答例

E
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>三つのボックスを左右に寄せる</title>
<style>
html, body, div {
  margin: 0;
  padding: 0;
}
#container {
  width: 760px;
  margin: 20px auto;
}
#header {
  background: #DDD;
  height: 50px;
  margin-bottom: 10px; /* 下方向のマージンを指定 */
}
#wrapper {
  overflow: hidden;
  float: left;
}
#primary {
  float: right; /* ボックスを左寄せに変更 */
  width: 450px; /* ボックスの幅を変更 */
  height: 300px;
  margin-bottom: 10px; /* 下方向のマージンを指定 */
  background: #C7D5ED;
}
#secondary {
  float: left;
  width: 145px; /* ボックスの幅を変更 */
  height: 300px;
  margin: 0 10px 10px 0; /* 下方向のマージンを指定 */
  background: #F9CFBA;
}
#advertisement {
  float: right; /* ボックスを右寄せに指定 */
  width: 145px; /* ボックスの幅を指定 */
  height: 300px;
  margin-bottom: 10px; /* 下方向のマージンを指定 */
  background: #E5C7ED;
}
#footer {
  clear: both;
  background: #DDD;
  height: 50px;
}
</style>
</head>
<body>
<divid="container">
<divid="header"></div>
<divid="wrapper">
<divid="primary"></div>
<divid="secondary"></div>
</div><!-- /#wrapper -->
<divid="advertisement"></div>
<divid="footer"></div>
</div><!-- /#container -->
</body>
</html>