読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

Positionレイアウト

f:id:yachin29:20150227152056p:plain

 

 

練習素材

 

 

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>positionとfloatを使ったレイアウト</title>
<style>
html,body,h1,p {
margin:0;
padding:0;
}
img {
vertical-align:bottom;
}
body {
background:#979797;
}
header {
width:800px;
height:120px;
margin:100px auto 0;
background:#FFFFFF;
position:relative;
}
h1 {
position:absolute;
left: 130px;
top: 50px;
font-size:34px;
}
#txt {
position:absolute;
left:130px;
top:25px;
}
#image {
width:100px;
height:100px;
position:absolute;
left:10px;
top:10px;
}
</style>
</head>

<body>
<header>
<h1>タイトル</h1>
<p id="txt">テキストテキストテキスト</p>
<p id="image"><img src="logo.png" alt="#"></p>
</header>
</body>
</html>

 

広告を非表示にする