Web デザイン 実 習 担 当 : 斉 藤 学
目 次 作 品 例... 1 CSS での ID 名 やクラス 名 の 例... 3 CSS レイアウト 2カラム... 4 CSS レイアウト 3カラム... 8 position:relative absolute によるボックスの 浮 動 化... 12 CSS で 作 るサンプルサイト1... 13 CSS で 作 るサンプルサイト2... 19
作 品 例 CSSサンプルサイト1 1
CSSサンプルサイト2 2
CSS での ID 名 やクラス 名 の 例 ページ 全 体 wrap wrapper page all container top-wrapper frame all-frame pagetop allcontents layout carrier ヘッダー 部 分 head header headline headerarea global_header 上 部 メニュー navi navigation gnav globalnav navbar gnavi g-navi global-navi globalnavi globalnavigation globalheader カラム main_contents left_contents right_contents contents content area main maincontent center left right contents-inner contentsarea column left_column right_column wrappercontent contentcolumn content-block base entries mainbox right-body left-body section item box inner entry entryblock entrydate separator bodyarea block sub lead spot frame-margin サイドメニュー sidemenu menu menuarea mainmenu site_menu side_container side localmenu rightside leftside rightcol leftcol sub sub-menu フッター footer foot footnavi footerarea footerbar globalfooter copyright copy 3
CSS レイアウト 2カラム index.html <html> <head> <title> CSS サンプル</title> <link href="common.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="header"> スタイルシートによるレイアウト <div id="menu"> HOME コンテンツ リンク 集 サイトマップなど <div id="sidemenu"> <br /> <ul> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> </ul> <div id="main"> <h2> スタイルシートによるレイアウト<br /> <br /><br /> <br /> ID を 使 用 <br /> 4
<br /> </h2> <ul> <li>このページのパーツごとに ID 分 けをしています </li> <li> 一 番 外 枠 #page</li> <li>タイトル 部 分 #header</li> <li>home コンテンツ リンク 集 部 分 #menu</li> <li> 左 メニュー 項 目 #sidemenu</li> <li> 本 文 #main</li> <li>ページ 下 #footer<br /> <br /> </li> </ul> <p> 外 部 スタイルシートから 読 み 込 んでいます </p> <br /> <div id="footer"> Copyright (C) All rights reserved. </body> </html> 5
common.css body { background-color: #F5F5F5; font-size: 15px; line-height: 150%; text-align: center; color: #333333; margin: 15px; #page { text-align: left; border: 1px solid #333333; width: 962px; margin:0 auto; #header { font-size: 18px; background: #DEEED9; height: 50px; line-height: 50px; #menu { background: #239923; border-top: 1px solid #333333; border-bottom: 1px solid #333333; height: 20px; #sidemenu { width: 282px; height: 475px; float: left; 6
#main { margin: 0px; border-left: 1px solid #CCCCCC; padding: 20px 0px; background: #FFFFFF; width: 678px; height: 475px; float: right; #footer { border-top: 1px solid #333333; text-align: center; background: #239923; color: #FFFFFF; clear:both; 7
CSS レイアウト 3カラム index.html <html> <head> <title> CSS サンプル</title> <link href=" common.css " rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="header"> スタイルシートによるレイアウト <div id="menu"> HOME コンテンツ リンク 集 サイトマップなど <div id="sidemenu"> <br /> <ul> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> </ul> <div id="main"> <h2> スタイルシートによるレイアウト<br /> <br /><br /> <br /> ID を 使 用 <br /> 8
<br /> </h2> <ul> <li>このページのパーツごとに ID 分 けをしています </li> <li> 一 番 外 枠 #page</li> <li>タイトル 部 分 #header</li> <li>home コンテンツ リンク 集 部 分 #menu</li> <li> 左 メニュー 項 目 #submenu</li> <li> 本 文 #main</li> <li>ページ 下 #footer<br /> <br /> </li> </ul> <p> 外 部 スタイルシートから 読 み 込 んでいます </p> <br /> <div id="right"><br /> <ul> <li><a href="#">right column</a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> <li><a href="#">メニュー 項 目 </a></li> </ul> <div id="footer"> Copyright (C),All rights reserved. </body> </html> 9
common.css body { background-color: #F5F5F5; font-size: 15px; line-height: 150%; text-align: center; color: #333333; margin: 15px; #page { text-align: left; border: 1px solid #333333; width: 962px; margin:0 auto; #header { font-size: 18px; background: #DEEED9; height: 50px; line-height: 50px; #menu { background: #239923; border-top: 1px solid #333333; border-bottom: 1px solid #333333; height: 20px; #sidemenu { width: 220px; height: 475px; float: left; 10
#main { margin: 0px; border-left: 1px solid #CCCCCC; padding: 20px 0px; background: #FFFFFF; border-right: 1px solid #CCCCCC; width: 518px; height: 475px; float: left; #right { width: 220px; height: 475px; float: left; #footer { border-top: 1px solid #333333; text-align: center; background: #239923; color: #FFFFFF; clear:both; 11
position:relative absolute によるボックスの 浮 動 化 index.html への 追 加 <body> <div id="page"> <div id="layer"><img src="giza.gif" width="120" height="120"> <div id="header"> common.css への 追 加 #page { text-align: left; border: 1px solid #333333; width: 762px; margin:0 auto; position:relative; #Layer { position:absolute; left:900px; top:-25px; width:120px; height:120px; z-index:1; #Layer { position:absolute; left:638px; top:30px; width:120px; height:120px; z-index:1; 12
CSS で 作 るサンプルサイト1 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis" /> <title>cssサンプルサイト</title> <link href="css/basic.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <div id="container"> <div id="header"> <div id="h_top"> <div id="h_l"><img src="image/top_01.gif" align="left" /> <h1> 匠 が 造 る 自 然 の 家 </h1> <img src="image/top_02.gif" align="left" /><img src="image/home.gif" align="right" /> <div id="h_r"><img src="image/migi.gif" width="11" height="11" /> お 問 い 合 わせ <img src="image/migi.gif" width="11" height="11" /> サイトマップ<br /> <img src="image/tel.gif" vspace="12" /> <! メニュー--> <div id="menu"> <ul> <li class="menu_l"></li> <li> 店 舗 紹 介 会 社 案 内 </li> <li>イベント 情 報 </li> <li> 建 築 家 紹 介 </li> <li> 見 学 のお 申 し 込 み</li> <li class="menu_r"></li> </ul> 13
<!--メインイメージ--> <div id="top_image"><img src="image/top_image.jpg" width="870" height="525" /> <! コンテンツ--> <div id="contents"> <div id="contents_l"> <h2>news</h2> お 客 様 の 声 を 2 件 追 加 しました <br /> > 東 京 都 三 鷹 市 邸 宅 <br /> > 東 京 都 武 蔵 野 市 邸 宅 <br /><br /> 写 真 で 見 る 邸 宅 <br /> > 神 奈 川 県 相 模 原 市 邸 宅 <br /><br /> <h2> 住 まいのことなんでも 相 談 ください</h2> <img src="image/q.gif" width="250" height="102" /> <br /> <div id="contents_r"><img src="image/compass.jpg" alt="" width="590" height="55" /> <h3> 資 金 計 画 ~お 客 様 の 求 めるものを 確 実 につかむことからスタートします~ </h3> 設 計 者 (デザイナー)と 作 り 上 げていくオーダーメイドの 住 宅 です お 客 様 のイメージさ れる 外 観 やお 部 屋 の 雰 囲 気 などをよく 聞 き 具 体 的 な 形 にしてお 示 しします 納 得 のいく までお 話 を 伺 い お 客 様 の 求 めるものを 確 実 につかんでから 設 計 を 行 います <h3> 建 築 家 と 建 てる 家 ~ 建 てたあとから 始 まるお 付 き 合 い~</h3> 住 宅 の 建 築 は 一 生 の 一 大 事 特 に 資 金 計 画 は 今 までに 扱 ったことのない 多 額 の 資 金 を 動 か すため 特 別 の 注 意 が 必 要 です 私 たちは 建 てる だけの 役 割 だけでなく 資 金 計 画 か ら 住 宅 ローンの 申 し 込 みなどファイナンシャルプラン 全 体 についてもご 一 緒 に 考 えさせて いただきます 安 心 してご 相 談 ください <div id="footer"> イベント 情 報 見 学 のお 申 込 み 会 社 案 内 お 問 合 わせ サイトマッ プ プライバシーポリシー <br /> CopyrightcNakano School of Business, All rights reserved. </body> </html> 14
basic.css /*IDによるブロック 設 定 */ #wrap{ width: 930px; background-image: url(../image/back.gif); background-repeat: repeat-y; text-align: center; margin-right: auto; margin-left: auto; #container{ width: 900px; margin-right: auto; margin-left: auto; /*ヘッダー*/ #header{ width: 900px; height:60px; padding-top: 7px; #h_top{ width: 870px; margin-right: auto; margin-left: auto; #h_l{ width: 300px; float:left; #h_r{ width: 500px; 15
float:right; text-align: right; /* 上 部 メニュー*/ #menu{ width: 870px; clear: both; margin-right: auto; margin-left: auto; margin-bottom: 10px; margin-top: 10px; #menu ul{ height:35px; line-height: 35px; list-style-type: none; padding: 0px; /* 横 メニューの 余 白 を 削 除 */ #menu li{ width:145px; display: block; float: left; background: url(../image/menu_c.gif) no-repeat; #menu li.menu_l{ background: url(../image/menu_l.gif) no-repeat; height:35px; width:145px; #menu li.menu_r{ background: url(../image/menu_r.gif) no-repeat; height:35px; width:145px; 16
/*メインイメージ*/ #top_image{ margin-bottom: 20px; /* 下 部 コンテンツ*/ #contents{ width: 870px; text-align:left; margin-right: auto; margin-left: auto; #contents_l{ width:260px; float: left; #contents_r{ width:590px; float: right; /*フッター*/ #footer{ text-align:center; padding-top: 15px; padding-bottom: 15px; clear:both; 17
/*HTMLの 再 定 義 */ body{ font-size:12px; margin-top: 0px; margin-bottom: 0px; line-height: 150%; h1{ font-size:12px; font-weight: normal; text-align: left; padding-left: 0px; h2{ background: url(../image/h2_bg.gif) no-repeat; font-size: 12px; font-weight: normal; height: 25px; width: 250px; line-height: 25px; padding-left: 30px; margin-top: 0px; h3{ font-size: 12px; line-height: 34px; font-weight: normal; background: url(../image/h3_bg.gif) no-repeat; height: 34px; width: 570px; padding-left: 30px; 18
CSS で 作 るサンプルサイト2 index.html <!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> <title>cssサンプルサイト2</title> <link href="import.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="outer"> <div id="header"> 会 社 ロゴ <div id="menu">テキストメニュー <div id="top_image">トップイメージ 画 像 or Flash を 入 れる <div id="bottom_contents"> <div id="left_contents"> <div id="left_top">テーブルタグを 用 い 製 品 紹 介 や 会 社 概 要 投 資 家 への 情 報 を 入 れる <div id="left_bottom"> <div id="box_left"> 新 着 情 報 を 入 れるボックス <div id="box_right"> 重 要 なお 知 らせを 入 れるボックス <div id="rightmenu"> <div id="right_top"> 検 索 ボックス&バナー 2を 入 れる <div id="right_bottom"> 投 資 家 の 皆 様 へ 投 資 家 情 報 を 箇 条 書 きで 入 れる <div id="footer">フッターメニュー( 著 作 権 表 示 ) </body></html> 19
index.html の basic.css なし 状 態 (Dreamweaver で 表 示 ) index.html と import.css+basic.css をリンクさせた 状 態 20
ファイル 名 :import.css @charset "utf-8"; /* 外 部 スタイルシートの 読 み 込 み ------------------------------------------------------------ */ @import "basic.css"; @import "common.css"; 21
ファイル 名 :basic.css #outer { text-align: left; border: 1px solid #333333; width: 762px; margin:0 auto; #header { height: 50px; padding-top: 12px; padding-left: 15px; #menu { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #333333; border-bottom-color: #333333; padding-left: 15px; height: 20px; #top_image { height: 200px; #bottom_contents{ width:762; height:415px; #left_contents { width: 495px; height: 415px; float: left; 22
#left_top { width: 495px; height: 153px; padding: 5px; border: 1px solid #666666; margin: 5px; #left_top td { font-size: 12px; padding: 8px; #left_bottom { width: 512px; #box_left { width: 270px; border: 1px solid #333333; float:left; margin-left: 5px; #box_right { width: 225px; border: 1px solid #333333; float:right; #rightmenu { width: 245px; height: 400px; float: right; #right_bottom { width: 222px; height: 196px; border: 1px solid #333333; padding: 5px; 23
margin-top: 8px; margin-right: auto; margin-left: auto; #right_bottom ul { margin-left: 10px; padding-top: 5px; line-height: 20px; margin-right: 3px; #footer { width:762px; height:20px; text-align: center; clear:both; border-top-width: 1px; border-top-style: solid; border-top-color: #333333; 24
ファイル 名 :common.css body { font-size: 12px; line-height: 150%; text-align: center; color: #333333; margin: 15px; h1 { background-color:#999999; color:#ffffff; font-size:12px; text-align:center; margin-bottom: 0px; padding-bottom: 0px; h2 { background-color:#999999; color:#ffffff; font-size:12px; text-align:center; margin-bottom: 0px; ul{ list-style: none; padding-left: 0px; margin: 0px; li{ margin-left: 0px; background: url(image/button.gif) no-repeat 0px; padding-left: 14px; 25
dl{ margin-bottom: 10px; dt{ margin-top: 5px; margin-left: 10px; margin-bottom: 0px; dd { line-height: 18px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; margin: 0px 10px; 完 成 図 26
index.html への 追 加 <!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> <title>cssサンプルサイト2</title> <link href="import.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="outer"> <div id="header"> <img src="image/title.gif" width="128" height="30" /> <div id="menu"> 製 品 情 報 会 社 案 内 投 資 家 情 報 採 用 情 報 <div id="top_image"><img src="image/main.jpg" width="762" height="200" /><br /> <div id="bottom_contents"> <div id="left_contents"> <div id="left_top"> <table width="479" height="101" border="0" align="center"> <tr valign="top"> <td width="132"><img src="image/midasi_1.jpg" width="70" height="17" /><br /> <br /> <ul> <li>cd-rom</li> <li>dvd-rom</li> <li>フロッピーディスク</li> <li>usb メモリ</li> <li>インターフェース</li> </ul> </td> <td width="108"><img src="image/midasi_2.jpg" width="70" height="17" /><br /> <br /> <ul> 27
<li> 会 社 概 要 </li> <li> 経 営 理 念 </li> <li> 組 織 図 </li> <li>アクセス</li> </ul> </td> <td width="108"><img src="image/midasi_3.jpg" width="89" height="17" /><br /> <br /> <ul> <li> 投 資 家 の 皆 様 へ</li> <li> 株 価 情 報 </li> <li> 決 算 データ</li> <li>r カレンダー</li> </ul> </td> <td width="113"><img src="image/midasi_4.jpg" width="70" height="17" /><br /> <br /> <ul> <li> 新 卒 採 用 情 報 </li> <li> 中 途 採 用 情 報 </li> </ul> </td> </tr> </table> <div id="left_bottom"> <div id="box_left"> <h1> 新 着 情 報 </h1> <dl> <dt>0000 年 00 月 00 日 </dt> <dd> 弊 社 Web サイトをリニューアル </dd> <dt>0000 年 00 月 00 日 </dt> <dd>コラム 手 帳 を 使 いこなす <br /> 連 載 開 始 いたしました </dd> <dt>0000 年 00 月 00 日 </dt> <dd>ワンポイント メモの 管 理 を 考 える <br /> 追 加 執 筆 いたしました </dd> </dl> <div id="box_right"> <h2> 重 要 なお 知 らせ</h2> <dl> 28
<dt> 新 製 品 販 売 に 関 する 重 要 なお 知 らせ</dt> <dd> 詳 しくはこちらをご 覧 ください</dd> <dt> 超 整 理 手 帳 </dt> <dd>バリエーション 追 加 のお 知 らせ</dd> <dt> 弊 社 手 帳 TVコマーシャルの 日 程 </dt> <dd>0000 年 00 月 00~0000 年 00 月 00 日 </dd> <dt> 連 載 手 帳 と 文 房 具 </dt> <dd> 来 月 単 行 本 化 予 定 </dd> </dl> <div id="rightmenu"> <div id="right_top"> <div align="center"> <img src="image/search_box.gif" width="245" height="30" /> <img src="image/banner.jpg" width="234" height="60" vspace="10" /> <img src="image/banner.jpg" width="234" height="60" /> <div id="right_bottom"> <h2> 投 資 家 の 皆 様 へ</h2> <div align="left"> <dl> <dt>0000 年 00 月 00 日 </dt> <dd> 有 価 証 券 報 告 書 を 掲 載 いたしました </dd> <dt>0000 年 00 月 00 日 </dt> <dd> 決 算 公 告 を 掲 載 したしました </dd> <dt>0000 年 00 月 00 日 </dt> <dd> 定 時 株 主 総 会 決 議 のご 通 知 </dd> </dl> <div id="footer"> Copyright (C) All rights reserved. </body> </html> 29