webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

1column layout 演習

  • 1column layout
  • 面として、幅があるから左右の位置指定ができる、アタリマエのことをもう一度確認する。
  • #containerの幅を指定すれば、bodyに対して左右の位置を決められる。例えば、margin: o auto;といった具合に。
  • 1カラムの場合は、#containerの中央にレイアウトすることが多くなる。margin: 0 auto; が非常に有効な手段になる。#div を作って、幅を指定する。
  • text-indent はテキスト一行目の、文字下げを指定するときに使う。行頭の一文字を出したいときは、数値をマイナス指定する。単位は"em"が便利。
  • <img src="" alt=""> 。altの中に記述する内容は、画像検索の時には重要だけれども、文字検索では無視をされる。そもそもgoogleは読まない、らしい。
  • 以上を踏まえて画像の扱いを考える。といってみてもまだよくわからない。
  • 2行以上の<p>要素をセンター配置する方法をきちんと整理することが必要。
  • 2つのクラスを指定する際に、.yes .no、ではなく、.yes, .no、カンマを忘れて時間を無駄にした。

@charset "utf-8";
/* CSS Document */

html, body, h1, h2, ul, li, p{
margin:0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

body{
background: #FFFFEE;
}
body p, body li{
font-size: 14px;
line-height: 22px;
}/*原稿用紙の体裁を決める作業。bodyに記述してもダメ。body p, body liと具体的に*/

ul,li{
list-style-type: none;
}

a {
text-decoration: none;
}
img{
vertical-align: bottom;
}/*忘れないように!*/
/*reset
-------------------------------------------------------------*/
#container{
width: 600px;
margin: 0 auto;
background: #FFFFFF;
}

#header{
height: 445px;
background: url(img/main.gif) no-repeat 0 0;
margin-bottom: 50px;
}
#header h1{
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
/*header
------------------------------------------------ ---------*/
#lead{
margin: 0 auto 50px auto;
}
#lead h2{
background: url(img/b_1.gif) no-repeat 0 0;
height: 30px;
width: 450px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
margin:0 auto 35px auto;
}
#lead p{
width: 504px;/*この辺りは良い方法があるね、絶対に…*/
margin: 0 auto;
}
/*lead
-------------------------------------------------------------*/
#content h3{
margin-left: 10px;
}
#content p{
margin: 0 1em 0 3em;
}
#kiyaku ul{
margin:0 1em 50px 3em;
}

#kiyaku li{
text-indent: -1em;
line-height: 28px;
}
#kiyaku{
margin-bottom: 50px;
}
#kojin1 {
margin-bottom: 50px;
}
#kojin2 {
margin-bottom: 25px;
}
#kojin2 p a{
text-decoration: underline;
}
/*kiyaku
---------------------------------------------------------------*/
#foam .question{
width: 450px;
margin: 0 auto 30px auto;
}
#ans{
height: 31px;
width: 240px;
margin: 0 auto 50px auto;
overflow: hidden;
}
.yes{
float:left;
width: 72px;
}