Webデザイン実習

Size: px

Start display at page:

Download "Webデザイン実習"

みりあごちょう
7 years ago
Views:

1 Web デザイン実習担当 : 斉藤学

2 目次作品例... 1 CSS での ID 名やクラス名の例... 3 CSS レイアウト 2カラム... 4 CSS レイアウト 3カラム... 8 position:relative absolute によるボックスの浮動化 CSS で作るサンプルサイト CSS で作るサンプルサイト

3 作品例 CSSサンプルサイト1 1

4 CSSサンプルサイト2 2

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 3

6 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

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 id="footer"> Copyright (C) All rights reserved. </body> </html> 5

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

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

10 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

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

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

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

14 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

15 CSS で作るサンプルサイト1 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <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

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

17 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

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

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

20 /*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

21 CSS で作るサンプルサイト2 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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

22 index.html の basic.css なし状態 (Dreamweaver で表示 ) index.html と import.css+basic.css をリンクさせた状態 20

23 ファイル名 "utf-8"; /* 外部スタイルシートの読み込み "common.css"; 21

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

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

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

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

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; 完成図 26

29 index.html への追加 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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

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

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

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML