Webデザイン実習

(1)

Web デザイン実習

担当：斉藤学

(2)

作品例 ... １ CSS での ID 名やクラス名の例 ... ３ CSS レイアウト２カラム ... ４ CSS レイアウト３カラム ... ８ position:relative、absolute によるボックスの浮動化 ... １２ CSS で作るサンプルサイト① ... １３ CSS で作るサンプルサイト② ... １９

(3)

―１―

作品例

(4)

―２― ＣＳＳサンプルサイト②

(5)

―３―

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

(6)

―４―

CSS レイアウト２カラム

【index.html】 <html> <head> <title>★CSS サンプル</title>

(7)

―５― <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> <div id="footer">

</div>

</body> </html>

(8)

―６― 【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; }

(9)

―７― #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; }

(10)

―８―

CSS レイアウト３カラム

【index.html】 <html> <head> <title>★CSS サンプル</title>

(11)

―９― <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> <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> <div id="footer">

</div>

</body> </html>

(12)

―１０― 【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; }

(13)

―１１― #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; }

(14)

―１２―

position:relative、absolute によるボックスの浮動化

【index.html】への追加

<body>

<div id="Layer"><img src="giza.gif" width="120" height="120"></div> <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; }

(15)

―１３―

CSS で作るサンプルサイト①

【index.html】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<div id="h_l"><img src="image/top_01.gif" align="left" /> <h1>匠が造る自然の家</h1>

<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> </div> </div> <!—メニュー--> <div id="menu"> <ul> <li class="menu_l"></li> <li>店舗紹介・会社案内</li> <li>イベント情報</li> <li>建築家紹介</li> <li>見学のお申し込み</li> <li class="menu_r"></li> </ul>

(16)

―１４― </div>

<div id="top_image"><img src="image/top_image.jpg" width="870" height="525" /></div> <!—コンテンツ--> <div id="contents"> <div id="contents_l"> <h2>ＮＥＷＳ</h2> お客様の声を2 件追加しました。<br /> ＞東京都三鷹市邸宅<br /> ＞東京都武蔵野市邸宅<br /><br /> 写真で見る邸宅<br /> ＞神奈川県相模原市邸宅<br /><br /> <h2>住まいのことなんでも相談ください</h2>

<div id="contents_r"><img src="image/compass.jpg" alt="" width="590" height="55" /> <h3>資金計画～お客様の求めるものを確実につかむことからスタートします～ </h3> 設計者（デザイナー）と作り上げていくオーダーメイドの住宅です。お客様のイメージされる外観やお部屋の雰囲気などをよく聞き、具体的な形にしてお示しします。納得のいくまでお話を伺い、お客様の求めるものを確実につかんでから設計を行います。 <h3>建築家と建てる家～建てたあとから始まるお付き合い～</h3> 住宅の建築は一生の一大事。特に資金計画は今までに扱ったことのない多額の資金を動かすため、特別の注意が必要です。私たちは「建てる」だけの役割だけでなく、資金計画から住宅ローンの申し込みなどファイナンシャルプラン全体についてもご一緒に考えさせていただきます。安心してご相談ください。 </div> <div id="footer">｜イベント情報｜見学のお申込み｜会社案内｜お問合わせ｜サイトマップ｜プライバシーポリシー｜<br />

</div> </div> </body> </html>

(17)

―１５― 【basic.css】 /*ＩＤによるブロック設定*/ #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;

(18)

―１６― 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; }

(19)

―１７― /*メインイメージ*/ #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; }

(20)

―１８― /*ＨＴＭＬの再定義*/ 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; }

(21)

―１９―

CSS で作るサンプルサイト②

【index.html】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>ＣＳＳサンプルサイト②</title>

<body>

<div id="menu">テキストメニュー</div>

<div id="top_image">トップイメージ画像 or Flash を入れる</div> <div id="bottom_contents"> <div id="left_contents"> <div id="left_top">テーブルタグを用い、製品紹介や会社概要、投資家への情報を入れる </div> <div id="left_bottom"> <div id="box_left">新着情報を入れるボックス</div> <div id="box_right">重要なお知らせを入れるボックス</div> </div> </div> <div id="rightmenu"> <div id="right_top">検索ボックス＆バナー×２を入れる</div> <div id="right_bottom">投資家の皆様へ投資家情報を箇条書きで入れる</div> </div> </div> <div id="footer">フッターメニュー（著作権表示）</div> </div></body></html>

(22)

―２０―

【index.html の basic.css なし状態】（Dreamweaver で表示）

(23)

―２１― 【ファイル名：import.css】 @charset "utf-8"; /* 外部スタイルシートの読み込み --- */ @import "basic.css"; @import "common.css";

(24)

―２２― 【ファイル名：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; }

(25)

―２３― #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;

(26)

―２４― 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; }

(27)

―２５― 【ファイル名：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;

(28)

―２６― 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; } 【完成図】

(29)

―２７― 【index.html への追加】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>ＣＳＳサンプルサイト②</title>

<body>

製品情報会社案内投資家情報採用情報</div>

<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>

(30)

―２８― <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> <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> <div id="box_right"> <h2>重要なお知らせ</h2> <dl>

(31)

―２９― <dt>新製品販売に関する重要なお知らせ</dt> <dd>詳しくはこちらをご覧ください</dd> <dt>「超整理手帳」</dt> <dd>バリエーション追加のお知らせ</dd> <dt>弊社手帳、ＴＶコマーシャルの日程</dt> <dd>0000 年 00 月 00～0000 年 00 月 00 日</dd> <dt>連載「手帳と文房具」</dt> <dd>来月単行本化予定</dd> </dl> </div> </div> </div> <div id="rightmenu"> <div id="right_top"> <div align="center">

</div> </div> <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> </div> </div> <div id="footer">

</div> </body> </html>

Webデザイン実習