スタイルシート - Webデザインの基礎

Webデザインの基礎 HTML CSS チュートリアルファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/structure.css" />
<link rel="stylesheet" type="text/css" href="css/util.css" />
<title>webデザインの基礎（授業用）</title>
</head>
<body>
<div id="header">
Webデザインの基礎
</div>
<div id="menu">
<div id="menu_in">
<ul>
<li id="m1"><a href="index.html">トップ</a></li>
<li id="m2"><a href="index.html">メニュー１</a></li>
<li id="m3"><a href="index.html">メニュー２</a></li>
<li id="m4"><a href="index.html">メニュー３</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="main_in" class="clearﬁx">
<div id="left_util">
<h1>お知らせ</h1>
<div class="honmon">
01.htmlの基本
02.CSSの基本
03.セレクタについて
</div>
</div>
<div id="center">
<h1>お知らせ</h1>
<h2>授業の概要</h2>
<div class="honmon">
インターネットはデスクトップコンピュータ、タブレット、携帯電話端末等を通じ、様々な情報の伝達に使わ
れ日常の生活に根ざしています。情報を受け取る形でインターネットを利用する事だけでなく、情報を発信する
事もまたインターネットの利用方法です。
</div>
</div>
<div id="right_util">
<h1>お知らせ</h1>
<div class="honmon">
01.htmlの基本
02.CSSの基本
03.セレクタについて
</div>
</div>
</div>
</div>
<div id="footer"><img src="img/logo_footer.gif" width="227" height="60" alt="ウェブデザインの基礎" /></div>
</body>
</html>
スタイルシート
common.css
body , div ,ul ,li ,h1 ,h2 ,h3 ,h4 ,h5 , h6{
margin:0;
padding:0;
}
.clearﬁx {width:100%;}
.clearﬁx:after {
content: " ";
display: block;
clear: both;
}
Webデザインの基礎 HTML CSS チュートリアルファイル
スタイルシート
structure.css
body{
}
#header{
}
#menu{
}
#main_in{
background:#cecece;
height:200px;
background:url(../img/title.jpg) center;
text-indent:-1000px;
height:60px;
background:#fa8181;
}
#menu_in li{
list-style:none;
ﬂoat:left;
text-indent:-3000px;
}
#menu_in li a{
display:block;
width:160px;
height:40px;
}
#menu_in li#m1{
background:url(../img/menu1.gif);
}
#menu_in li#m2{
background:url(../img/menu2.gif);
}
#menu_in li#m3{
background:url(../img/menu3.gif);
}
#menu_in li#m4{
background:url(../img/menu4.gif);
}
#menu_in li#m1:hover{
background:url(../img/menu1_h.gif);
}
#menu_in li#m2:hover{
background:url(../img/menu2_h.gif);
}
#menu_in li#m3:hover{
background:url(../img/menu3_h.gif);
}
#menu_in li#m4:hover{
background:url(../img/menu4_h.gif);
}
#menu_in{
height:40px;
width:980px;
margin:0 auto;
}
#menu:after{
content:" ";
display:block;
height:20px;
background:url(../img/shadow.gif);
}
#main{
background:#ﬀf;
}
#main h1{
font-size:18px;
height:30px;
padding-top:2px;
}
#main h2{
font-size:16px;
}
#main:after{
}
#left_util{
padding-bottom:20px;
width:980px;
margin:0 auto;
ﬂoat:left;
width:150px;
border-radius:3px;
background:#ﬀeeee;
padding-bottom:30px;
}
#center{
}
h1{
}
h2{
}
ﬂoat:left;
width:640px;
margin-left:20px;
border-radius:3px;
background:#ﬀeeee;
padding-bottom:30px;
background:#fddede;
border-radius:3px 3px 0 0;
height:30px;
text-align:center;
font-weight:normal;
color:#990000;
font-size:17px;
padding-left:77px;
padding-top:10px;
font-size:15px;
background:url(../img/h2.png) no-repeat 17px 8px;
color:#990000;
margin-bottom:14px;
.honmon{
font-size:14px;
padding-left:14px;
padding-right:14px;
line-height:24px;
color:#343434;
}
#right_util{
}
#footer{
}
ﬂoat:right;
width:150px;
border-radius:3px;
background:#ﬀeeee;
padding-bottom:30px;
height:60px;
width:980px;
margin:0 auto;

Download Report