webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

2カラムレイアウトの復習


今回は今までhtmlファイル内に記述していたcsscssファイル(style.css)に記述していく方法でやります。
htmlファイルが複数になっていくと、cssファイルを別に作り、そちらに書いていくようになるので、今の内になれてしまいましょう。
また、完成したデータを自身のサーバーにアップロードしてみましょう。


2カラムの復習


index.htmlのソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムの復習</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<header></header>
<nav>
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li class="last"><a href="#">ボタン4</a></li>
</ul>
</nav>
<div id="wrapper">
<div id="main"></div>
<div id="sub"></div>
</div><!--/#wrapper-->

<footer></footer>
</div><!--/#container-->
</body>
</html>

style.cssファイル

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

html,body,div,header,footer,ul,li,a {
	margin:0;
	padding:0;
	line-height:1.0;
}
ul {
	list-style:none;/*ulに付く黒丸を消す*/
}
a {
	text-decoration:none;/*a要素に付く下線を消す*/
	color:#222;/*a要素の文字の色を黒にする*/
}
#container {
	width:960px;
	margin:0 auto;
}
header {
	width:100%;
	height:300px;
	background:#09C;
}
nav {
	width:100%;
	height:50px;
}
ul {
	overflow:hidden;/*子要素のliがすべてフロートしている為、overflow:hiddenをかける*/
}
li {
	width:25%;
	height:50px;
	float:left;
}
li a {
	display:block;/*インライン要素のaをブロック要素に*/
	background:#CC9;
	text-align:center;/*水平方向に真ん中*/
	line-height:50px;/*垂直方向に真ん中*/
	border-right:1px solid #FFF;/*一旦全部のli aにborderの命令*/
}
li.last a {
	border-right:none;/*いらない最後のli aだけ無しにする*/
}
li a:hover {
	background:#99FF33;
}
#wrapper {
	overflow:hidden;
}
#main {
	width:660px;
	height:500px;
	background:#FF3333;
	float:right;
}
#sub {
	width:300px;
	height:500px;
	background:#FC0;
	float:left;
}
footer {
	width:100%;
	height:50px;
	background:#333333;
}