positionで位置を決める

>>ホームページの作り方TOP　>>positionで位置を決める

■positionで位置を決める

次に、スタイルシートにpositionを適用するとともに見栄えを付加して、サイトのデザインを変えてみます。

body {
　　　　margin:0;
　　　　}
a {
　　　　text-decoration:none;
　　　　}
img {
　　　　border:0;
　　　　}
.a2 {
　　　　margin-top:0;
　　　　position:absolute;
　　　　left:800px;
　　　　top:10px;
　　　　font-size:13px;
　　　　color:#777777;
　　　　font-family:"Comic Sans MS";
　　　　}
.a3 {
　　　　margin-top:0;
　　　　margin-bottom:0;
　　　　padding-top:0;
　　　　text-align:left;
　　　　}
.a5 {
　　　　margin-top:5px;
　　　　width:165px;
　　　　height:580px;
　　　　background-image:url(yoko.jpg);
　　　　}
.a6 {
　　　　position:absolute;
　　　　left:140px;
　　　　top:140px;
　　　　}
.a7 {
　　　　position:absolute;
　　　　left:200px;
　　　　top:470px;
　　　　}
.a8 {
　　　　position:absolute;
　　　　left:200px;
　　　　top:494px;
　　　　border-top:solid 1px #2222ff;
　　　　}
.a9 {
　　　　font-size:12px;
　　　　color:#000000;
　　　　font-family:"Gulim";
　　　　font-style:italic;
　　　　vertical-align:top;
　　　　padding-top:10px;
　　　　width:80px;
　　　　}
.a10 { 　　　　width:340px;
　　　　vertical-align:top;
　　　　padding-top:10px;
　　　　font-size:12px;
　　　　color:#7777ff;
　　　　font-family:"MS　明朝";
　　　　}
.a11 {
　　　　position:absolute;
　　　　left:700px;
　　　　top:150px;
　　　　width:160px;
　　　　height:100px;
　　　　background-image:url(back1.jpg);
　　　　}
.a12 {
　　　　position:absolute;
　　　　left:5px;
　　　　top:10px;
　　　　padding-right:0px;
　　　　padding-left:0px;
　　　　font-size:12px;
　　　　color:#666666;
　　　　font-family:"MS　明朝";
　　　　border:solid 1px #8888ff;
　　　　}
.a15 {
　　　　position:absolute;
　　　　left:5px;
　　　　top:240px;
　　　　padding-right:0px;
　　　　padding-left:0px;
　　　　font-size:11px;
　　　　color:#666666;
　　　　font-family:"MS　明朝";
　　　　border:solid 1px #8888ff;
　　　　}
p.a13 {
　　　　font-size:14px;
　　　　idth:160px;
　　　　line-height:24px;
　　　　background-color:#8888ff;
　　　　color:#fff;
　　　　text-align:center;
　　　　}
p.a14 {
　　　　margin:5px 10px 20px 10px;
　　　　}
.a16 {
　　　　position:absolute;
　　　　left:165px;
　　　　top:650px;
　　　　}
address {
　　　　position:absolute;
　　　　left:165px;
　　　　top:654px;
　　　　font-size:12px;
　　　　font-style:normal;
　　　　text-align:right;
　　　　width:736px;
　　　　margin-top:5px;
　　　　}
.n1 {
　　　　position:absolute;
　　　　left:520px;
　　　　top:160px;
　　　　}
.n2 {
　　　　position:absolute;
　　　　left:550px;
　　　　top:220px;
　　　　}
.n3 {
　　　　position:absolute;
　　　　left:560px;
　　　　top:280px;
　　　　}
.n4 {
　　　　position:absolute;
　　　　left:550px;
　　　　top:340px;
　　　　}
.n5 {
　　　　position:absolute;
　　　　left:520px;
　　　　top:400px;
　　　　}

すると、こうなって完成です。→サンプル

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■positionで位置を決める