ＷＥＢクリエイター修行日記｜ＷＥＢで連続スペシャリストを目指す

19日目 | css position | css float | 無料サーバー契約

授業

positionレイアウトの練習

position:absolute;は1ページに１つ使う
（使用例）ページ右上の「サイトマップ‐お問い合わせ」などのテキストリンクに使う
（使用例）左寄せナビゲーションに1つだけ右寄せの項目を使いたい時

position練習両側をまたぐフッターを配置する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>position練習 両側をまたぐフッターを配置する</title>
<link rel ="stylesheet" href="css/style.css" media="print,screen">
</head>
<body>
<div id="container">
<div id="header"><br></div>
<div id="wrapper">
<div id="primary"><br><br><br><br><br><br><br><br><br></div>
<div id="secondary"><br><br><br><br><br><br><br><br><br></div>
</div>
<div id="footer"><br></div>
</div>
</body>
</html>

@charset "UTF-8";

body{
	  text-align:center;
	}
#container{
	  width:760px;
		margin:0 auto;
		text-align:left;
}
#header{
	  background-color:#DDDDDD;
		height:50px;
}
#wrapper{
	  position:relative;
		margin:10px 0; /*上下方向に10pxのマージン*/
		width:100%; /*ボックスの幅を指定*/
}
#primary{
	  /*positionの指定を削除*/
		margin-left:210px; /*左方向に210pxのマージンを指定*/
		background-color:#C7D5ED;
}
#secondary{
	  position:absolute;
		left:0px;
		top:0px;  /*上方向からの配置位置を変更*/
		width:200px;
		background-color:#F9CFBA;
}
#footer{
	  background-color:#DDDDDD;
		height:50px;
}

positionでサイト情報を配置

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>positionでサイト情報を配置</title>
<link rel="stylesheet" href="css/style2.css" media="print, screen">
</head>
<div id="container">
<div id="header">
<div id="header_info">
<ul>
<li><a href="#">このサイトについて</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="primary"><br><br><br></div>
<div id="secondary"><br><br><br></div>
</div>
</div>
<body>
</body>
</html>

charset "UTF-8";

#container{
	  width:780px;
		height:auto;
		overflow:auto;
		margin:0 auto;
		position:relative;
		background-color:#999;
}
#header{
	  height:80px;
		margin:10px;
		background-color:#f4e2fb;
}
#header_info{
	  font-size:0.8em;
		width:360px;
		position:absolute;
		right:20px;
		top:30px;
}
#header_info li{
    display:inline;
		margin:0 0 0 10px;
}
#wrapper{
	  height:300px;
		margin:10px;
		position:relative;
		background-color:#f4ecd2;
}
#primary{
	  position:absolute;
		left:10px;
		top:10px;
		width:530px;
		height:280px;
		background-color:#cfe9af;
}
#secondary{
	  position:absolute;
		left:550px;
		top:10px;
		width:200px;
		height:280px;
		background-color:#b9e2f7;
}

floatレイアウトの復習

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatレイアウトのまとめ</title>
<link rel ="stylesheet" href="css/style3.css" media="print,screen">
<!--[if if IE6.0]>
<style>
  body {text-align:center;}
  #container{text-align:left;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1> floatレイアウトまとめ</h1>
<p class="sub">2012-12-11</p>
</div>
<div id="content">
<h2>コンテンツのタイトル</h2>
<p>
float:left;とfloat:right;を使っています<br>
直感的にわからないcss指定<br></p>
<ul class="css">
<li>overflow:auto; (ボックスの範囲からはみ出た部分の指定をブラウザまかせにする）<br></li>
<li>display:block; (指定要素をブロックレベルにする＝a linkを面として扱う＝広い面をクリックできるようにする<br></li>
<li>display:inline; (横並びリンクにする）<br></li>
</ul>
<p>header画像を変更しました<br>
</p>
</div>
<div id="sidebar">
<div id="nav">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
<li><a href="#">メニューのリンク6</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Copyright &copy; AUTHOR NAME, All Rights Reserved</p>
</div>
</div>
</body>
</html>

@charset "UTF-8";

*{
	  margin:0;
		padding:0;
		font-family:
		"メイリオ",
		Meiryo,
		Sans-serif
		;
}
body{
		background-color:#eee;
		font-size:0.95em;
		paddint:10px;
}
#container{
	  width:760px;
    height:auto;
	  margin:0 auto;
}
#header{
	height:200px;
	margin:0 0 30px 0;
	padding:20px; /*headerのpaddingでh1までの距離を指定*/
	background-image:url(../img/coffeefloat2.jpg);
	color:#040d19	
}
#content{
	  width:580px;
		float:left;
		margin:0 0 30px 10px;
}
h1{
	  margin:10px 0 0 0;
	  color:#fff;
		font-size:2.4em;
}
p.sub{
	  color:#fff;
		font-weight:bold;
		font-size:1.2em;
}
h2{
	font-weight:bold;
	font-size:1.2em;
	color:#fff;
	margin:0 0 15px 0;
	padding:8px 0 4px 10px;
	display:block;
	background-color:#7a9896;
}
img{
	  border:0;
}
p{
	line-height:1.6;
	font-size:0.875em;
	}
#content ul.css{
	padding:0 0 0 20px;
}
#sidebar{
		width:150px;
		float:right;
		margin:0 0 30px 0;
}
#nav ul{
		border-top:1px solid #ccc;
}
#nav ul li{
	  list-style-type:none;
		border-bottom:1px solid #ccc;
		line-height:1.8em;
		display:block;

}
#nav ul li a{
	  text-decoration:none;
				color:#000;
}
#nav ul li a:hover{
	  color:#f80;
}
#footer{
	clear:both;
	text-align:center;
	border-top:solid 4px #444;
	margin:0 0 15px0;
	padding:5px 0 0 0;
	font-size:0.7em;
}

オリジナルポータルサイト制作

floatレイアウトのまとめサイトを流用して作る

自分のポートフォリオとして使うためのもの
記載内容はまだ暫定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WEB勉強まとめサイト</title>
<link rel ="stylesheet" href="css/style4.css" media="print,screen">
<!--[if if IE6.0]>
<style>
  body {text-align:center;}
  #container{text-align:left;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>WEB勉強まとめ</h1>
<p class="sub">How to make smart web site</p>
</div>
<div id="content">
<h2>floatレイアウトまとめ</h2>
<p>
float:left;とfloat:right;を使っています<br>
直感的にわからないcss指定<br></p>
<ul class="css">
<li>overflow:auto; (ボックスの範囲からはみ出た部分の指定をブラウザまかせにする）<br></li>
<li>display:block; (指定要素をブロックレベルにする＝a linkを面として扱う＝広い面をクリックできるようにする<br></li>
<li>display:inline; (横並びリンクにする）<br></li>
</ul>
<p>header画像を変更しました<br>
</p>
</div>
<div id="sidebar">
<div id="linktitle">作品集</div>
<div id="nav">
<ul>
<li><a href="#">企業系サイト</a></li>
<li><a href="#">カフェ</a></li>
<li><a href="#">旅行ガイド</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">メニューのリンク5</a></li>
<li><a href="#">参考にしたいサイト集</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Copyright &copy; sugar-m All Rights Reserved</p>
</div>
</div>
</body>
</html>

@charset "UTF-8";

*{
	  margin:0;
		padding:0;
		font-family:
		"メイリオ",
		Meiryo,
		Sans-serif
		;
}
body{
		background-color:#eee;
		font-size:0.95em;
		paddint:10px;
		color:#333333;
}
#container{
	  width:760px;
    height:auto;
	  margin:0 auto;
}
#header{
	height:200px;
	margin:0 0 30px 0;
	padding:20px; /*headerのpaddingでh1までの距離を指定*/
	background-image:url(../img/pancake.jpg);
	background-position:0  0;
	color:#040d19	
}
#content{
	  width:580px;
		float:left;
		margin:0 0 30px 10px;
}
h1{
	  margin:5px 0 0 0;
	  color:#fff;
		font-size:2.4em;
}
p.sub{
	  color:#fff;
		font-weight:bold;
		font-size:1.1em;
}
h2{
	font-weight:bold;
	font-size:1.2em;
	color:#fff;
	margin:0 0 15px 0;
	padding:8px 0 4px 10px;
	display:block;
	background-color:#ff6161;
}
img{
	  border:0;
}
p{
	line-height:1.6;
	font-size:0.875em;
	}
#content ul.css{
	padding:0 0 0 20px;
}
#sidebar{
		width:150px;
		float:right;
		margin:0 0 30px 0;
}
#linktitle{
	  background-color:#cc6666;
		padding:3px 0  3px  5px;
		color:#fff;
		font-size:0.75em;
}
#nav ul{
		border-top:1px solid #cc9999;
}
#nav ul li{
	  list-style-type:none;
		border-bottom:1px solid #cc9999;
		line-height:2em;
		display:block;
		font-size:0.875em;

}
#nav ul li a{
	  text-decoration:none;
				color:#333;
}
#nav ul li a:hover{
	  color:#cc3333;
}
#footer{
	clear:both;
	text-align:center;
	border-top:solid 4px #ffa28c;
	margin:0 0 15px0;
	padding:5px 0 0 0;
	font-size:0.7em;
	color:#663333;
}

忍者ホームページ契約（無料サーバー）

ポートフォリオサイトをアップロードするための準備