YURIA's DESIGN WEB

WEBデザイナーを志すユリアのポートフォリオサイトです

WORKS

WEB SITE

さいたま大学

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>さいたま大学</title>
<meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
<meta name="keywords" content="さいたま大学,さいたま市,大学,">
<meta name="description" content="さいたま大学のホームページです。平成25年度入試情報公開中致しました。">
<link href="top.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="common.css" >
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slides.js"></script>
<script>
	$(function(){
		$("#slides").slidesjs({
		width: 800,
		height: 270
		});
	});
</script>
</head>
<body>
<div id="container">
	<div id="header">
		<div id="header-left">
			<h1 class="logo"><img src="img/logo.gif" width="270" height="120" alt="さいたま大学"></h1>
		<!--header-left--></div>
		<div id="header-right">
			<div id="header-menuleft">
				<div id="gengo">
					<ul>
					<li><a href="#">日本語</a></li>
					<li><a href="#">ENGLISH</a></li>
					<li><a href="#">中文</a></li>
					</ul>
				<!--gengo--></div>
				<div class="clear"></div>
				<div id="gnsub">
					<ul>
					<li><a href="#">HOME</a></li>
					<li><a href="#">交通案内</a></li>
					<li><a href="#">お問い合わせ</a></li>
					<li><a href="#">サイトマップ</a></li>
					</ul>
					<form method="get" action="#" class="search">
					<div id="form">
						<input type="text" name="example" class="textBox">
						<input type="submit" value="検索" class="btn">
					<!--form--></div>
					</form>
				<!--gnsub--></div>
			<!--heder-menuleft--></div>
			<div id="siryou"> <a href="#"><img src="img/siryou.gif" width="170" height="50" alt="資料請求はこちら"></a>
			<!--siryou--></div>
			<div id="jyuken">
				<ul>
				<li><a href="#"><img src="img/hd_jyuken.gif" width="105" height="50" alt="受験生の方"></a></li>
				<li><a href="#"><img src="img/hd_zaigakusei.gif" width="105" height="50" alt="在学生の方"></a></li>
				<li><a href="#"><img src="img/hd_hogosya.gif" width="105" height="50" alt="保護者の方"></a></li>
				<li><a href="#"><img src="img/hd_sotsugyou.gif" width="105" height="50" alt="卒業生の方"></a></li>
				<li><a href="#"><img src="img/hd_saiyou.gif" width="105" height="50" alt="採用担当の方"></a></li>
				<li><a href="#"><img src="img/hd_ippan.gif" width="105" height="50" alt="一般の方"></a></li>
				</ul>
			<!--/jyuken--></div>
		<!--/header-right--></div>
		<div class="clear"></div>
	<!--/header--></div>
	<div id="gn">
		<ul>
		<li id="gn1"><a href="#"><img src="img/gn_gaiyou.png" width="130" height="60" alt="大学概要"></a></li>
		<li id="gn2"><a href="#"><img src="img/gn_daigaku.png" width="130" height="60" alt="大学・大学院案内"></a></li>
		<li id="gn3"><a href="#"><img src="img/gn_nyushi.png" width="130" height="60" alt="入試・入学案内"></a></li>
		<li id="gn4"><a href="#"><img src="img/gn_gakusei.png" width="130" height="60" alt="学生生活"></a></li>
		<li id="gn5"><a href="#"><img src="img/gn_campus.png" width="130" height="60" alt="キャンパス案内"></a></li>
		<li id="gn6"><a href="#"><img src="img/gn_syukatsu.png" width="130" height="60" alt="就活・キャリア支援"></a></li>
		<li id="gn7"><a href="#"><img src="img/gn_event.png" width="130" height="60" alt="イベント案内"></a></li>
		</ul>
		<div class="clear"></div>
	<!--gn--></div>
	<div id="catch">
		<div id="slide-wrap">
			<div id="slides">
				<a href="#"><img src="img/catch01.jpg"></a>
				<a href="#"><img src="img/catch02.jpg"></a>
			<!-- slides --></div>
		<!-- slide-wrap --></div>
	<!-- catch--></div>
	<div id="content">
		<div id="sidebar">
			<div class="sidemenu1">
				<h2><img src="img/sd_manabu.gif" width="220" height="30" alt="さいたま大学で学ぶ"></h2>
				<ul>
				<li><a href="#"><img src="img/sd_hougaku.gif" width="200" height="35" alt="法学部"></a></li>
				<li><a href="#"><img src="img/sd_bungaku.gif" width="200" height="35" alt="文学部"></a></li>
				<li><a href="#"><img src="img/sd_keiei.gif" width="200" height="35" alt="経営学部"></a></li>
				<li><a href="#"><img src="img/sd_kokusai.gif" width="200" height="35" alt="国際文化学部"></a></li>
				<li><a href="#"><img src="img/sd_syakai.gif" width="200" height="35" alt="社会学部"></a></li>
				<li><a href="#"><img src="img/sd_daigakuin.gif" width="200" height="35" alt="大学院"></a></li>
				<li><a href="#"><img src="img/sd_kyouyou.gif" width="200" height="35" alt="教養学環"></a></li>
				</ul>
			<!--sidemenu1--></div>
			<div class="sidemenu2">
				<h2><img src="img/sd_shiru.gif" width="220" height="30" alt="さいたま大学を知る"></h2>
				<table class="shiru">
				<tr>
				<th><a href="#"><img src="img/sd_manabi.gif" width="45" height="45" alt="大学の学びはこんなに面白い"></a></th>
				<td><a href="#">大学の学びはこんなに面白い</a><br><p>毎月シリーズとして紹介</p></td>
				</tr>
				<tr>
				<th><a href="#"><img src="img/sd_colum.gif" width="45" height="45" alt="学長便り"></a></th>
				<td><a href="#">学長便り</a><p>毎月1日更新</p></td>
				</tr>
				<tr>
				<th><a href="#"><img src="img/sd_twitter.gif" width="45" height="45" alt="公式twitter"></a></th>
				<td><a href="#">公式twitter</a><p>新着情報をお届けします</p></td>
				</tr>
				<tr>
				<th><a href="#"><img src="img/sd_face.gif" width="45" height="45" alt="FACE BOOK"></a></th>
				<td><a href="#">facebook</a><p>公式ページ</p></td>
				</tr>
				<tr>
				<th><a href="#"><img src="img/sd_blog.gif" width="45" height="45" alt="ブログ"></a></th>
				<td><a href="#">ブログ</a><p>各学部ごとに更新中</p></td>
				</tr>
				<tr>
				<th><a href="#"><img src="img/sd_kenkyu.gif" width="45" height="45" alt="研究室・プロジェクト紹介"></a></th>
				<td><a href="#">研究室・プロジェクト紹介</a><p>各研究室情報はこちら</p></td>
				</tr>
				</table>
			<!--sidemenu2--></div>
		<!--sidebar--></div>
		<div id="mainmenu">
			<div class="maintable"> 
				<img src="img/shintyaku_bar.gif" width="700" height="20" alt="新着情報">
				<div style="height:200px; width:700px; overflow-y:scroll;">
					<table>
					<tr class="kisu">
					<th>4/20</th>
					<td><a href="#">本校大学院の根岸教授が委員を務める環境省の報告書が公表されました</a></td>
					</tr>
					<tr class="gusu">
					<th>4/18</th>
					<td><a href="#">学生会館リニューアル工事のお知らせ</a></td>
					</tr>
					<tr class="kisu">
					<th>4/15</th>
					<td><a href="#">公開講座のお知らせ</a></td>
					</tr>
					<tr class="gusu">
					<th>4/10</th>
					<td><a href="#">本校大学院の中村教授の本が出ました</a></td>
					</tr>
					<tr class="kisu">
					<th>4/4</th>
					<td><a href="#">5月のオープンキャンパス情報</a></td>
					</tr>
					<tr class="gusu">
					<th>4/3</th>
					<td><a href="#">経営学部太田教授の研究成果が読売新聞で紹介されました</a></td>
					</tr>
					<tr class="kisu">
					<th>4/2</th>
					<td><a href="#">平成25年度入学式(学部及び研究科)のご案内</a></td>
					</tr>
					<tr class="gusu">
					<th>3/31</th>
					<td><a href="#">経営学部太田教授が日経ビジネスのオンラインコラムを連載</a></td>
					</tr>
					<tr class="kisu">
					<th>3/25</th>
					<td><a href="#">大学吹奏楽団第10回定期演奏会開催のお知らせ</a></td>
					</tr>
					<tr class="gusu">
					<th>3/21</th>
					<td><a href="#">平成24年度学位記授与式(卒業式)及びインターネット配信について</a></td>
					</tr>
					</table>
				<!-- style scroll--></div>
			<!-- maintable --></div>
			<div class="maintable">
				<img src="img/nyugaku_bar.gif" width="700" height="20" alt="入学・入試情報">
				<div style="height:200px; width:700px; overflow-y:scroll;">
					<table>
					<tr class="kisu">
					<th>2/20</th>
					<td><a href="#">一般入試B日程、試験当日(2月28日)出願受付のご案内</a></td>
					</tr>
					<tr class="gusu">
					<th>2/18</th>
					<td><a href="#">2013年度入試出願状況</a></td>
					</tr>
					<tr class="kisu">
					<th>2/15</th>
					<td><a href="#">一般入試B日程、センター利用試験後期の出願受付を開始</a></td>
					</tr>
					<tr class="gusu">
					<th>2/10</th>
					<td><a href="#">インターネット合否照会はこちら</a></td>
					</tr>
					<tr class="kisu">
					<th>1/22</th>
					<td><a href="#">1月26日(土)・27日(日),2月2日(土)・3日(日)一般入試A日程のスクールバス時刻表はこちら</a></td>
					</tr>
					<tr class="gusu">
					<th>1/5</th>
					<td><a href="#">センター利用試験前期,一般入試A日程の出願受付を開始します</a></td>
					</tr>
					</table>
				<!--style scroll--></div>
			<!-- maintable --></div>
			<div id="submenu">
				<table class="subtable">
				<tr>
				<th><a href="#"><img src="img/main_syogaku.gif" alt="奨学金制度"></a></th>
				<td><a href="#">奨学金制度</a><p>意欲ある前途有望な人材を支援します</p></td>
				<th><a href="#"><img src="img/main_open.gif" alt="オープンキャンパス日程情報"></a></th>
				<td><a href="#">オープンキャンパス日程情報</a><p>5/4(土)5/5(日)本校にて開催</p></td>
				<th><a href="#"><img src="img/main_shinro.gif" alt="進学相談会"></a></th>
				<td><a href="#">進学相談会</a><p>専門スタッフが疑問にお答えします</p></td>
				</tr>
				<tr>
				<th><a href="#"><img src="img/main_mobile.gif" alt="モバイルサイト"></a></th>
				<td><a href="#">モバイルサイト</a><p>専門スタッフが疑問にお答えします</p></td>
				<th><a href="#"><img src="img/main_bus.gif" alt="オープンキャンパス無料送迎バス"></a></th>
				<td><a href="#">オープンキャンパス無料送迎バス</a><p>関東近郊から大学まで送迎いたします</p></td>
				</tr>
				</table>
			<!--/submenu-->	</div>
		<!--/mainmenu--></div>
	<!--content--></div>
	<div id="underarea">
		<div id="footer">
			<div id="footermenu">
				<div id="gaiyou" class="footernav1">
					<h3><img src="img/ft_gaiyou.gif" width="230" height="30" alt="大学概要"></h3>
					<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>
					<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>
					<li><a href="#">学則</a></li>
					</ul>
				<!--/gaiyou--></div>
				<div id="daigaku" class="footernav1">
					<h3><img src="img/ft_daigaku.gif" width="230" height="30" alt="大学・大学院案内"></h3>
					<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>
					<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>
					<li><a href="#">教員紹介</a></li>
					</ul>
				<!--/daigaku--></div>
				<div id="nyushi" class="footernav1">
					<h3><img src="img/ft_nyushi.gif" width="465" height="30" alt="入試・入学案内"></h3>
					<ul id="nyushi-col1">
					<li><a href="#">2013年度入試情報のご案内</a></li>
					<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>
					<li><a href="#">学外試験会場一覧(一般入試A日程)</a></li>
					<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>
					<li><a href="#">メールマガジンのご案内</a></li>
					<li><a href="#">入学定員</a></li>
					</ul>
					<ul id="nyushi-col2">
					<li><a href="#">2012年度入試出願状況</a></li>
					<li><a href="#">オンライン受験票</a></li>
					<li><a href="#">インターネット合否紹介</a></li>
					<li><a href="#">2013年度入試結果</a></li>
					<li><a href="#">学費について</a></li>
					<li><a href="#">奨学金について</a></li>
					<li><a href="#">教育ローンについて</a></li>
					<li><a href="#">入学検定料優遇制度</a></li>
					<li><a href="#">進学Q&A</a></li>
					<li><a href="#">入試・入学相談フォーム</a></li>
					<li><a href="#">大学案内、募集要項(願書書類)請求</a></li>
					</ul>
					<div class="clear"></div>
				<!--/nyushi--></div>
				<div id="seikatsu" class="footernav1">
					<h3><img src="img/ft_seikatsu.gif" width="230" height="30" alt="学校生活"></h3>
					<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>
					<li><a href="#">海外研修について</a></li>
					<li><a href="#">奨学金について</a></li>
					</ul>
				<!--/seikatu--></div>
				<div id="campus" class="footernav1">
					<h3><img src="img/ft_campus.gif" width="230" height="30" alt="キャンパス案内"></h3>
					<ul>
					<li><a href="#">キャンパス概要</a></li>
					<li><a href="#">図書館</a></li>
					<li><a href="#">学生会館(学生寮)</a></li>
					<li><a href="#">交通案内</a></li>
					</ul>
				<!--/campus--></div>
				<div id="syusyoku" class="footernav1">
					<h3><img src="img/ft_syusyoku.gif" width="230" height="30" alt="就職・キャリア支援"></h3>
					<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>
					<li><a href="#">求人申込のご案内</a></li>
					<li><a href="#">インターンシップのご案内</a></li>
					</ul>
				<!--/syusyoku--></div>
				<div id="event" class="footernav1">
					<h3><img src="img/ft_event.gif" width="230" height="30" alt="イベント案内"></h3>
					<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>
					<li><a href="#">保護者懇談会</a></li>
					<li><a href="#">サークルイベント</a></li>
					<li><a href="#">イベントカレンダー</a></li>
					</ul>
				<!--/event--></div>
				<div class="clear"></div>
			<!--/footermenu--></div>
			<div id="footerunder">
				<p class="copy">&copy;Nanasato University All right reserved</p>
				<div id="undernav">
					<ul>
					<li><a href="#">HOME</a></li>
					<li><a href="#">本サイトについて</a></li>
					<li><a href="#">プライバシーポリシー</a></li>
					<li><a href="#">採用情報</a></li>
					<li><a href="#">RSS配信</a></li>
					<li><a href="#">Twitter</a></li>
					<li><a href="#">資料請求</a></li>
					</ul>
				<!-- undernav --></div>
			<!--/footerunder--></div>
		<!--/footer--></div>
	<!-- underarea --></div>
<!--container--></div>
</body>
</html>
@charset "utf-8";
/* CSS Document */


/****全体の設定****/
*{
	margin:0;
	padding:0;
	list-style-type:none;
	}

img{
	border:none;
	vertical-align:top;
	}

#body{
	margin:0;
	}

#container{
	background-color:white;
	background-image:url(img/bg.jpg);
	background-repeat:repeat-x;
	}

.clear{
	clear: both;
	}
	
/**** header ****/
#header{
	width:950px;
	margin: 0 auto;
	background-color:white;
	}

.logo{
	margin: 0px;
	}

#header-left{
	float:left;
	width:200px;
}
#header-right{
	float:right;
	width:750px;
	}

#header-menu{
	float: left;
	}

#gengo{
	width:480px;
	height:30px;
	}

#gengo li{
	float: left;
	list-style: none;
	padding-right: 10px;
	font-size: 12px;
	}

#gengo li a{
	color:gray;
	}

#gnsub{
	width: 480px;
	height: 30px;
	}

#gnsub li{
	float: left;
	list-style: none;
	padding-right:10px;
	font-size:14px;
	color:gray;
	}

#gnsub a{
	color:#353a7b;
	}

#form{
	margin-right:0px;
	}
	
#header-menuleft{
	float:left;
	margin-left:95px;
	}

#siryou{
	float:right;
	}

#jyuken{
	clear:both;
	margin-left:90px;
	width:680px;
	height: 50px;
	}
	
#jyuken li{
	float: left;
	list-style: none;
	padding-left:5px;
	}

/**** gn ****/
#gn{
	background-image:url(img/gn_back.png);
	background-repeat:repeat-x;
	height:70px;
	margin: 0 auto;
	}
	
#gn ul{
	width: 910px;
	margin: 0 auto;
	padding-top: 5px;
	}
#gn li{
	float: left;
	}

/**** catch ****/
#catch{
	margin:0 auto;
	width:950px;
	height:300px;
	background-color:white;
	}

/** slide **/
#slide-wrap{
	margin:0 auto;
	margin-bottom:20px;
	width:800px;/*スライドのサイズ指定*/
	}

/**  SlidesJS Optional**/
#slides {
	display: none
	}

#slides .slidesjs-navigation {
	margin-top:3px;
	}

#slides .slidesjs-previous {
	margin-right: 5px;
	float: left;
	}

#slides .slidesjs-next {
	margin-right: 5px;
	float: left;
	}

.slidesjs-pagination {
	margin: 6px 0 0;
	float: right;
	list-style: none;
	}

.slidesjs-pagination li {
	float: left;
	margin: 0 1px;
	}

.slidesjs-pagination li a {
	display: block;
	width: 13px;
	height: 0;
	padding-top: 13px;
	background-image: url(img/pagination.png);
	background-position: 0 0;
	float: left;
	overflow: hidden;
	}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
	background-position: 0 -13px
	}

.slidesjs-pagination li a:hover {
	background-position: 0 -26px
	}

#slides a:link,
#slides a:visited {
	color: #333
	}

#slides a:hover,
#slides a:active {
	color: #9e2020
	}

.navbar {
	overflow: hidden
	}
/** End SlidesJS Optional**/
/** 前へ/戻るボタンの画像を配置 **/
a.slidesjs-previous{
	display:block;
	background-image:url(img/arrows.png);
	background-repeat:no-repeat;
	background-position:0 0;
	width:15px;
	height:18px;
	text-indent:-9999px;
	}

a.slidesjs-previous:hover{
	background-position:0 -19px;
	}
a.slidesjs-next{
	display:block;
	background-image:url(img/arrows.png);
	background-repeat:no-repeat;
	background-position:-15px 0;
	width:15px;
	height:18px;
	text-indent:-9999px;
	}

a.slidesjs-next:hover{
	background-position:-15px -19px;
	}

/****content****/
#content{
	margin: 0 auto;
	width:950px;
	height: 750px;
	background-color:white;	
	}

/**** sidebar ****/
#sidebar{
	float:left;
	width:250px
	}

/**** sidemenu ****/
.sidemenu1{
	padding-bottom: 20px;
	background-color:white;	
	}

.sidemenu1 li{
	padding-top:10px;
	margin-left:10px;
	}

.sidemenu2 {
	background-color:white;	
	}

.shiru{
	margin-left: 10px;
	padding-top: 10px ;
	}

.shiru th{
	padding-bottom: 5px;
	}

.shiru td{
	width: 155px;
	padding-bottom: : 5px;
	border-bottom: 1px solid #e7e7e7;
	}
	
.shiru p{
	font-size: 13px;
	color:gray;
	}
	
.shiru a{
	color: black;
	}
	
/**** mainmenu ****/
#mainmenu{
	float:right;
	width:700px;
	height:700px;
	background-color:white;	
	}

/**** maintable ****/
.maintable{
	padding-bottom: 30px;
	}

.maintable th{
	padding:10px;
	}

.maintable td{
	padding:10px;
	width:610px;
	}

.maintable a{
	color: #353a7b;
	}

table tr.kisu{
	background-color: #e3f1fb;
	}

table tr.gusu{
	background-color: white;
	}
	
/**** submenu ****/
	
#submenu{
	border: 10px solid #e7e7e7;
	}	

.subtable{
	padding: 10px;
	}
	
.subtable th{
	padding: 10px;
	}

.subtable a{
	color:black;
	}

.subtable p{
	font-size: 13px;
	color:gray;
	}
	
/**** footer ****/
#footer{
	margin: 0 auto;
	padding-top:10px;
	clear:both;
	background-color:#353a7b;
	width:950px;
	}

#footermenu{
	margin-left:5px;
	}

#footermenu li{
	margin-top:5px;
	}

#footermenu li a{
	text-decoration: none;
	color:white;
	margin-left:10px;
	}

.footernav1{
	float:left;
	font-size: 13px;
	width: 230px;
	height: 330px;
	margin:0 6px 6px 0;
	background-image: url(img/ft_back.png);
	}

.footernav li{
	padding-bottom: 5px;
	text-decoration: none; 
	}

#nyushi{
	width: 465px;
	}

#nyushi-col1{
	float:left;
	width:230px;
	}

#nyushi-col2{
	float:right;
	width:230px;
	}


#footerunder{
	height: 30px;
	background-color: #191970;
	}

.copy{
	float:left;
	color:white;
	font-size: 13px;
	text-align: center;
	}

#undernav{
	float:right;
	}

#undernav li{
	float:left;
	}
#undernav li a{
	margin-right:5px;
	color:white;
	font-size:13px;
	text-align: center;
	}
製作期間 2013年4月
制作時間 40時間程度
作業内容 写真加工、サイトデザイン、コーディング
テーマ 架空の大学サイトを想定。
学生や保護者など様々な年齢層のユーザーアクセスを想定し、見易さ・分かり易さを重視したさわやかなでありながら堅い印象を与えられるデザインを目指しました。
使用ソフト Adobe photoshop CS4/Adobe Illustrator CS4/Adobe Flash CS4/Adobe Dreamweaver CS4/crecent eve

ななさと観光協会

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>七里観光協会</title>
<meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
<meta name="keywords" content="七里,観光,見沼区,">
<meta name="description" content="さいたま市見沼区七里の観光案内サイトです">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="common.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div id="container">
<div id="wrapper">
	<div id="header">
		<h1>ロゴ</h1>
		<ul>
		<li id="nav1"><a href="#">ホーム</a></li>
		<li id="nav2"><a href="#">アクセス</a></li>
		<li id="nav3"><a href="#">お問い合わせ</a></li>
		<li id="nav4"><a href="#">リンク</a></li>
		</ul>
	<!-- header --></div>
	<div class="clear"></div>
	<div class="flasharea">
		<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		width="550px" height="440px" bgcolor="yellow">
		<param name="movie" value="top_550x440.swf">
		<object type="application/x-shockwave-flash" data="top_550x440.swf" width="550px" height="440px">
		<!--<![endif]-->
		<!--<div id="catch"><imgsrc="img/catch.jpg" alt="七里観光協会" /></div>
		<!--[if !IE]>-->
		</object>
		<!--<![endif]-->
		</object>
	<!-- flasharea --></div>
	<div id="menu">
		<div class="menunav">
			<ul>
			<li id="nav1"><a href="#">七里ってどんなとこ?</a></li>
			<li id="nav2"><a href="#">トピックス</a></li>
			<li id="nav3"><a href="#">オススメ観光案内</a></li>
			</ul>
		<!-- menunav --></div>
		<div class="clear"></div>
		<div class="menunav">
			<ul>
			<li id="nav4"><a href="#">七里フォトギャラリー</a></li>
			<li id="nav5"><a href="#">ななお君のご紹介</a></li>
			<li id="nav6"><a href="#">七里観光協会公式グッズ</a></li>
			</ul>
		<!--menunav--></div>
		<div class="clear"></div>
		<img src="img/footer.jpg" width="850px" height="150px" alt="ななさと観光協会"><br>
	<!-- menu --></div>
<!--wrapper--></div>
<div id="footer">
	<ul>
	<li><a href="#">ホーム |</a></li>
	<li><a href="#">アクセス |</a></li>
	<li><a href="#">お問い合わせ |</a></li>
	<li><a href="#">リンク</a></li>
	</ul>
	<div class="clear"></div>
	<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>
	<li><a href="#">七里観光協会公式グッズ</a></li>
	</ul>
	<div class="clear"></div>
	<div id="copyright">
		<p>Copyright&copy;七里観光協会 All Rights Reserved.</p>
		<!-- copyright --></div>
	<!-- footer --></div>
<!--container--></div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

/**** ページ全体 ****/
*{
	font-size:14px;
	margin:0;
	padding:0;
	list-style-type:none;
}

body{
	background-color:yellow;
}

img{
	 vertical-align: bottom;
}

#wrapper{
	width:850px;
	margin:0 auto;
	background-color:yellow;
	list-style-type:none;
}

.clear{
	clear: both;
}

/**** header ****/
#header{
	height:60px;
	margin-bottom: 10px;
}

h1{
	background:url(img/bg_head200x60.png);
	background-repeat:no-repeat;
	height:60px;
	width:200px;
	float:left;
	margin:0;
	text-indent:-9999px
}

#header ul{
	width:620px;
	height:60px;
	float: right;
}

#header li{
	float:left;
	margin-left: 5px;
}

#header li a{
	display:block;
	width:150px;
	height:60px;
	text-decoration: none;
	text-indent:-9999px;
}

#header li#nav1 a{
	background:url(img/home.png);
}

#header li#nav2 a{
	background:url(img/access.png);
}

#header li#nav3 a{
	background:url(img/contact.png);
}

#header li#nav4 a{
	background:url(img/link.png);
}

/**** flash ****/
.flasharea{
	width: 550px;
	height: 440px;
	margin:0 0 10px 150px;
}

/**** content ****/
#content{
	width: 850px;
	margin: 0 auto;
}

/**** menu ****/
#menu {
	width:850px;
}

.menunav{
	width: 770px;
	margin:0 auto;
}

#menu li{
	float: left;
	margin:0px 0 5px 5px;
}

#menu li a{
	display:block;
	width:250px;
	height:150px;
	text-decoration: none;
	text-indent:-9999px;
}

#menu li#nav1 a{
	background:url(img/about.jpg);
}

#menu li#nav2 a{
	background:url(img/topics.jpg);
}

#menu li#nav3 a{
	background:url(img/guide.jpg);
}

#menu li#nav4 a{
	background:url(img/photo.jpg);
}

#menu li#nav5 a{
	background:url(img/nanao.jpg);
}

#menu li#nav6 a{
	background:url(img/gods.jpg);
}

/**** content ****/
#content{
	width:800px;
	margin:10px 0;
}

/**** footer ****/
#footer{
	width: 100%;
	background-color: #7fff00;
	padding-bottom: 30px;
}

#footer ul{
	text-align: center;
}

#footer li{
	display: inline;
}

#footer li a{
	line-height: 2;
	text-decoration:none;
	color:#336600;
}

#footer a:hover{
	background-color:white;
	text-decoration:none;
}

#copyright{
	text-align: center;
	font-size:12px;
	color:#336600;
}
製作期間 デザイン2013年1月、フラッシュ制作2013年2月、コーディング2013年3月
制作時間 50時間程度
作業内容 キャラクターデザイン、イラスト作成、フラッシュ制作、サイトデザイン、コーディング
テーマ オリジナルのゆるキャラを主体とした、架空の観光サイトを想定。
お子様やキャラクター好きのユーザーアクセスを想定し、原色メインのポップでかわいらしい雰囲気を目指しました。
使用ソフト Adobe Illustrator CS4/Adobe Flash CS4/Tera Pad

YURIA’s WEB DESIGN ※このサイトです

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YURIA's DESIGN WEB</title>
<meta name="keywords" content="ポートフォリオ,ポートフォリオサイト,WEBデザイン,WEBデザイナー,">
<meta name="description" content="WEBデザイナーを志すユリアのポートフォリオサイトです。">
<link href="top.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="tab.css">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scroll.js" type="text/javascript"></script>
<script src="jquery.backgroundPosition.js" type="text/javascript"></script>
<!--マウスオーバー時のボタン背景画像の配置位置とアニメーションの速さの設定-->
<script type="text/javascript">
 $(function(){

<!--gnnav1-->
$('#gnnav1 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-200px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
<!--/gnnav1-->
<!--gnnav2-->
$('#gnnav2 a')
.css( {backgroundPosition: "0 -40px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-200px -40px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 -40px)"}, {duration:500})
})
<!--/gnnav2-->
<!--gnnav3-->
$('#gnnav3 a')
.css( {backgroundPosition: "0 -80px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-200px -80px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 -80px)"}, {duration:500})
})
<!--/gnnav3-->
<!--gnnav4-->
$('#gnnav4 a')
.css( {backgroundPosition: "0 -120px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-200px -120px)"}, {duration:500})
 })
.mouseout(function(){
 $(this).stop().animate({backgroundPosition:"(0 -120px)"}, {duration:500})
})
<!--/gnnav4-->
<!--gnnav5-->
	$('#gnnav5 a')
.css( {backgroundPosition: "0 -160px"} )
 .mouseover(function(){
  $(this).stop().animate({backgroundPosition:"(-200px -160px)"}, {duration:500})
})
.mouseout(function(){
 $(this).stop().animate({backgroundPosition:"(0 -160px)"}, {duration:500})
 })
<!--/gnnav5-->
         });
</script>

<!--タブのスクリプト-->
<script>  
$.fn.jqueryTab = function(){

	this.each(function(){

		var tab = this;

		var activePanelId = $(".active a", tab).attr("href");

		$(".panel > div:not(" + activePanelId + ")", tab).hide();

		$("> ul a", tab).click(function(){

			$("> ul li.active", tab).removeClass("active");

			$(".panel > div", tab).hide();

			$(this).parent("li").addClass("active");

			$($(this).attr("href")).show();

			return false;

		});

	});

	return this;
};

		$(function() {
			$("#tab1, #tab2,#tab3").jqueryTab();
		});
</script>
<script>
<!--pagetop のスクリプト-->
$(function() {
	 var topBtn = $('#page-top');  
	topBtn.hide();
	 <!-- スクロールが100に達したらボタン表示 -->
	 $(window).scroll(function () {
	if ($(this).scrollTop() > 100) {
	topBtn.fadeIn();
	 } else {
	topBtn.fadeOut();
	}
	});
	<!-- スクロールしてトップ -->
	topBtn.click(function () {
	$('body,html').animate({
	scrollTop: 0
	}, 500);
	 return false;
	});
});
</script>
</head>
<body>
<div id="container">
	<div id="wrapper">
		<div id="gn">
			<ul>
			<li id="gnnav1"><a href="#top">TOP</a></li>
			<li id="gnnav2"><a href="#works">WORKS</a></li>
			<li id="gnnav3"><a href="#profile">PROFILE</a></li>
			<li id="gnnav4"><a href="#contact">CONTACT</a></li>
			<li id="gnnav5"><a href="#link">LINK</a></li>
			</ul>
		<!--/gn--></div>
		<div id="top" class="gotop">
			<h1 class="catch"><img src="img/catch1.jpg" width="800" height="80" alt="YURIA's DESIGN WEB"></h1>
			<p class="topfont">WEBデザイナーを志すユリアのポートフォリオサイトです</p>
		<!-- top --></div>
		<div id="works" class="genre">
			<div class="content">
				<img src="img/works.jpg" width="440" height="40" alt="WORKS">
				<p class="worksbunner"><img src="img/ct_website.jpg" width="150" height="30" alt="WEB SITE"></p>
				<h4>さいたま大学</h4>
				<div class="thumbnail">
					<ul>
					<li id="thumbnav1"><a href="daigaku/index.html" target="_blank">さいたま大学</a></li>
					</ul>
				<!-- thumbnail --></div>
				<div class="source">
					<div class="tabarea">
						<!-- ここからHTMLのサンプルコード -->
						<div id="tab1">
							<ul class="tablabel clearfix">
							<li class="active"><a href="#tab1-1">HTML</a></li>
							<li><a href="#tab1-2">CSS</a></li>
							</ul>
							<div class="panel">
								<div id="tab1-1" class="tabText">
<!-- daigakuhtml -->
								<!-- tab1-1 --></div>
								<div id="tab1-2" class="tabText">
<!-- daigakucss -->
								<!-- tab1-2 --></div>
							<!-- panel --></div>
						<!-- tab1 --></div>
					<!-- ここまでHTMLのサンプルコード -->
					<!-- tabarea --></div>
					<ul class="blank">
					<li>別窓で見る</li>
					<li><a href="daigaku_html.html" target="_blank">HTML</a></li>
					<li><a href="daigaku_css.html" target="_blank">CSS</a></li>
					</ul>
					<div class="clear"></div>
				<!-- source --></div>
				<div class="clear"></div>
					<table class="about">
					<tr>
					<th>製作期間</th>
					<td>2013年4月</td>
					</tr>
					<tr>
					<th>制作時間</th>
					<td>40時間程度</td>
					</tr>
					<tr>
					<th>作業内容</th>
					<td>写真加工、サイトデザイン、コーディング</td>
					</tr>
					<tr>
					<th>テーマ</th>
					<td>架空の大学サイトを想定。<br>
						学生や保護者など様々な年齢層のユーザーアクセスを想定し、見易さ・分かり易さを重視したさわやかなでありながら堅い印象を与えられるデザインを目指しました。</td>
					</tr>
					<tr>
					<th>使用ソフト</th>
					<td>Adobe photoshop CS4/Adobe Illustrator CS4/Adobe Flash CS4/Adobe Dreamweaver CS4/crecent eve</td>
					</tr>
					</table>
			<!-- content --></div>
			<hr>
			<div class="content">
				<h4>ななさと観光協会</h4>
				<div class="thumbnail">
					<ul>
					<li id="thumbnav2"><a href="kankou/index.html" target="_blank">ななさと観光協会</a></li>
					</ul>
				<!-- thumbnail --></div>
				<div class="source">
					<div class="tabarea">
					<!-- ここからHTMLのサンプルコード -->
						<div id="tab2">
							<ul class="tablabel clearfix">
							<li class="active"><a href="#tab2-1">HTML</a></li>
							<li><a href="#tab2-2">CSS</a></li>
							</ul>
							<div class="panel">
								<div id="tab2-1" class="tabText">
<!-- nanasatohtml -->
								<!-- tab2-1 --></div>
								<div id="tab2-2" class="tabText">
<!-- nanasatocss -->
								<!-- tab2-2 --></div>
							<!-- panel --></div>
						<!-- tab2 --></div>
						<!-- ここまでHTMLのサンプルコード -->
					<!-- tabarea --></div>
					<ul class="blank">
					<li>別窓で見る</li>
					<li><a href="kankou_html.html" target="_blank">HTML</a></li>
					<li><a href="kankou_css.html" target="_blank">CSS</a></li>
					</ul>
				<!-- source --></div>
				<div class="clear"></div>
				<div class="about1">
					<table class="about">
					<tr>
					<th>製作期間</th>
					<td>デザイン2013年1月、フラッシュ制作2013年2月、コーディング2013年3月</td>
					</tr>
					<tr>
					<th>制作時間</th>
					<td>50時間程度</td>
					</tr>
					<tr>
					<th>作業内容</th>
					<td>キャラクターデザイン、イラスト作成、フラッシュ制作、サイトデザイン、コーディング</td>
					</tr>
					<tr>
					<th>テーマ</th>
					<td>オリジナルのゆるキャラを主体とした、架空の観光サイトを想定。<br>
					お子様やキャラクター好きのユーザーアクセスを想定し、原色メインのポップでかわいらしい雰囲気を目指しました。</td>
					</tr>
					<tr>
					<th>使用ソフト</th>
					<td>Adobe Illustrator CS4/Adobe Flash CS4/Tera Pad</td>
					</tr>
					</table>
				<!-- about --></div>
			<!-- content --></div>
			<hr>
			<div class="content">
				<h4>YURIA’s WEB DESIGN ※このサイトです</h4>
				<div class="thumbnail">
					<ul>
					<li id="thumbnav3"><a href="#">YURIA’s WEB DESIGN</a></li>
					</ul>
				<!-- thumbnail --></div>
					<div class="source">
						<div class="tabarea">
						<!-- ここからHTMLのサンプルコード -->
							<div id="tab3">
								<ul class="tablabel clearfix">
								<li class="active"><a href="#tab3-1">HTML</a></li>
								<li><a href="#tab3-2">CSS</a></li>
								</ul>
								<div class="panel">
									<div id="tab3-1" class="tabText">
<!-- portfoliohtml -->
									<!-- tab3-1 --></div>
									<div id="tab3-2" class="tabText">
<!-- portfoliocss-->
									<!-- tab3-2 --></div>
								<!-- panel --></div>
							<!-- tab3 --></div>
							<!-- ここまでHTMLのサンプルコード -->
						<!-- tabarea --></div>
						<ul class="blank">
						<li>別窓で見る</li>
						<li><a href="portfolio_html.html" target="_blank">HTML</a></li>
						<li><a href="portfolio_css.html" target="_blank">CSS</a></li>
						</ul>
					<!-- source --></div>
				<div class="clear"></div>
					<table class="about">
					<tr>
					<th>製作期間</th>
					<td>2013年5月</td>
					</tr>
					<tr>
					<th>制作時間</th>
					<td>70時間程度</td>
					</tr>
					<tr>
					<th>作業内容</th>
					<td>デザインデザイン、コーディング</td>
					</tr>
					<tr>
					<th>テーマ</th>
					<td>ポートフォリオサイトのあり方を考え、シンプルで見易い作りを心がけました。<br>
					色味はモノトーンで抑え、作品に注視していただけるようにしつつもjQueryの導入など細かい遊びを与えてみました。</td>
					</tr>
					<tr>
					<th>使用ソフト</th>
					<td>Adobe Illustrator CS4/Adobe Flash CS4/Dreamweaver CS4/crecent eve</td>
					</tr>
					</table>
			<!-- content --></div>
			<hr>
			<div class="content">
				<img src="img/ct_design.jpg" width="150" height="30" alt="DESIGN">
				<h4>INFINI</h4>
				<div class="thumbnail">
					<ul>
					<li id="thumbnav4"><a href="img/infini_1000x1700.jpg" target="_blank">INFINI</a></li>
					</ul>
				<!-- thumbnail --></div>
				<div class="clear"></div>
				<div class="about1">
					<table class="about">
					<tr>
					<th>製作期間</th>
					<td>デザイン2013年4月</td>
					</tr>
					<tr>
					<th>制作時間</th>
					<td>30時間程度</td>
					</tr>
					<tr>
					<th>作業内容</th>
					<td>写真加工、デザイン作成</td>
					</tr>
					<tr>
					<th>テーマ</th>
					<td>架空のエステサロンサイトを想定。<br>
					バナーや地図など、細かいデザインに注力いたしました。</td>
					</tr>
					<tr>
					<th>使用ソフト</th>
					<td>Adobe Illustrator CS4/Adobe photoshop CS4</td>
					</tr>
					</table>
				<!-- about --></div>
			<!-- content --></div>
			<div class="content">
				<h4>ROSE GARDEN</h4>
				<div class="thumbnail">
					<ul>
					<li id="thumbnav5"><a href="img/rosegarden_1100x1000.jpg" target="_blank">ROSE GARDEN</a></li>
					</ul>
				<!-- thumbnail --></div>
				<div class="clear"></div>
				<div class="about1">
					<table class="about">
					<tr>
					<th>製作期間</th>
					<td>デザイン2012年12月</td>
					</tr>
					<tr>
					<th>制作時間</th>
					<td>20時間程度</td>
					</tr>
					<tr>
					<th>作業内容</th>
					<td>写真加工、イラスト制作、デザイン作成</td>
					</tr>
					<tr>
					<th>テーマ</th>
					<td>友人の運営する雑貨のECサイトの新デザインを想定して作成しました。<br>
					女性向けサイトなので、色味は赤系でまとめ、友人の好きな猫やスイーツ等、可愛いらしいモチーフをちりばめてみましした。</td>
					</tr>
					<tr>
					<th>使用ソフト</th>
					<td>Adobe Illustrator CS4/Adobe photoshop CS4</td>
					</tr>
					</table>
				<!-- about --></div>
			<!-- content --></div>
			<hr>
			<div class="content">
				<h4>TeaRoom NANASATO</h4>
				<div class="thumbnail">	
					<ul>
					<li id="thumbnav6"><a href="img/tearoom_nanasato900x1000.jpg" target="_blank">TeaRoom NANASATO</a></li>
					</ul>
				<!-- thumbnail --></div>
				<div class="clear"></div>
				<div class="about1">
					<table class="about">
					<tr>
					<th>製作期間</th>
					<td>デザイン2012年12月</td>
					</tr>
					<tr>
					<th>制作時間</th>
					<td>20時間程度</td>
					</tr>
					<tr>
					<th>作業内容</th>
					<td>写真加工、サイトデザイン</td>
					</tr>
					<tr>
					<th>テーマ</th>
					<td>架空の喫茶店サイトを想定。<br>
					女性層のユーザーアクセスを想定し、居心地の良い喫茶店をテーマに暖色系でまとめ温か味のある雰囲気を目指しました。</td>
					</tr>
					<tr>
					<th>使用ソフト</th>
					<td>Adobe photoshop CS4</td>
					</tr>
					</table>
				<!-- about --></div>
			<!-- content --></div>
		<!--/works--></div>
		<div class="clear"></div>
		<div id="profile" class="genre">
			<div class="content">
				<img src="img/profile.jpg" width="440" height="40" alt="PROFILE">
				<h4>名前</h4>
				<p>オオモリ ユリア</p>
				<h4>使用可能ソフト</h4>
				<ul class="skil">
				<li><img src="img/ps.jpg" width="75" height="75"></li>
				<li><img src="img/ai.jpg" width="75" height="75"></li>
				<li><img src="img/fl.jpg" width="75" height="75"></li>
				<li><img src="img/dw.jpg" width="75" height="75"></li>
				</ul>
				<p>photoshop、Illustrator、Flash、Dreamweaver(タグ打ちはメモ帳でもかまいません)の基本操作が出来ます。</p>
				<h4>経歴</h4>
				<p>WEBデザイナー・WEBコーダーを志し、</p>
				<p>2012年11月から2013年5月までの6ヶ月間<br>
				全くの未経験から<a href="http://tokyo-creator.jp/">東京クリエイター浦和校</a>WEBクリエーター養成科にて、WEBデザイン・コーディングの基礎を学びました。</p>
				<h4>目標</h4>
				<p>プロのWEB制作者になり、将来的にはディレクション業務に就きたいと考えています。</p>
				<p>ただいまjQueryの導入、CMSを勉強中です。</p>
				<h4>趣味</h4>
				<p>紅茶を淹れること(ティーコーディネーター資格保持)</p>
				<p>写真 →<a href="http:[email protected]/">flickr</a></p>
			<!--content--></div>
		<!-- profile --></div>
		<div id="contact"  class="genre">
			<div class="content">
				<img src="img/contact.jpg" width="440" height="40" alt="CONTACT">
				<div id="form">
					<iframe src="https://docs.google.com/forms/d/1YKPr6f5Ji_vdhUG5_BwGh3Asot0OjIBkrecJIs_SVqc/viewform?embedded=true" width="760" height="550" frameborder="0" marginheight="0" marginwidth="0">読み込み中...</iframe>
				<!-- form --></div>
			<!-- content --></div>
		<!--"contact"--></div>
		<div id="link" class="genre">
			<div class="content">
				<img src="img/link.jpg" width="440" height="40" alt="LINK">
				<p><a href="http://tokyo-creator.jp/">東京クリエイター</a>・・・こちらのWEBクリエーター養成科にてWEB制作の基礎を学びました。</p>
				<p><a href="http://www.kashim.com/">kashim.com</a>・・・コーディングの際、こちらのサイトで配布されているエディタ<a href="http://www.kashim.com/eve/">Crecent Eve</a>を愛用しています。</p>
				<p><a href="http://kuraportfolio.bitter.jp">KURA</a>・・・東京クリエイターで一緒に学んだオオクラウチさんのポートフォリオサイトです。</p>
			<!-- content --></div>
		<!-- link --></div>
		<p id="page-top"><a href="#wrap">TOP</a></p>
	<!-- wrapper --></div>
	<div id="foot">
		<p>Copyright &copy; 2013 YURIA's&nbsp;WEB DESIGN All Rights Reserved.</p>
	</div><!-- foot -->
</div><!-- container -->
</body>
</html>
@charset "utf-8";
/* CSS Document */

/****全体の設定****/

*{
	margin:0;
	padding:0;
	list-style-type: none;
	}
.clear{
	clear:both;
	}

#wrapper{
	background-color: #fff;
	width: 100%;
	margin: 0 auto;
	position:relative;
	}
	
#wrapper p{
	line-height: 2;
	}
	
#works, #profile, #contact, #link{
	width: 1000px;
	margin:0 auto;
	}
	
/**** gn ****/
#gn{
	margin:0 auto;
	width: 100%;
	height: 40px;
	overflow:hidden;
	position:fixed;
	top:0px;
	background-color:#000;
	z-index:2;
	}

#gn ul{
	width: 1000px;
	margin:0 auto;
	padding:0;
	}

#gn li{
	list-style-type:none;
	line-height:0;
	margin-bottom:0;
	}

#gn li a{
	float: left;
	display:block;
	line-height:40px;
	background-image:url(img/gn_banner.jpg);
	background-repeat:no-repeat;
	width:200px;
	height:40px;
	text-indent:-9999px;
	}

/**** main ****/
.genre{
	padding-top:10px;
	}

.content{
	width: 1000px;
	margin: 0 auto;
	margin: 20px 0 30px 0;
	}
	
/**** top ****/
#top{
	width: 800px;
	margin: 0 auto;
	}
	
.gotop{
	padding-top: 70px;
	}

.topfont{
	text-align: center;
	}

/**** works ****/
.worksbunner{
	margin: 0;
	}

#works a{
	text-decoration:none;
	}

h4{
	line-height: 2;
	}

/** thumbnail **/
.thumbnail{
	width:475px;
	height:450px;
	float:left;
	margin-top:15px;
	}

.thumbnail li a{
	display:block;
	width: 475px;
	height: 450px;
	background-repeat:no-repeat;
	text-indent:-9999px;
	}

.thumbnail li#thumbnav1 a{
	background-image:url(img/th_saitamadaigaku.jpg);
	background-position:0 0;
	}

.thumbnail li#thumbnav1 a:hover{
	background-position: 0 -450px;
	}

.thumbnail li#thumbnav2 a{
	background-image:url(img/th_nanasato.jpg);
	background-position:0 0;
	}

.thumbnail li#thumbnav2 a:hover{
	background-position: 0 -450px;
	}

.thumbnail li#thumbnav3 a{
	background-image:url(img/th_portfoliosite.jpg);
	background-position:0 0;
	}

.thumbnail li#thumbnav3 a:hover{
	background-position: 0 -450px;
	}
	
.thumbnail li#thumbnav4 a{
	background-image:url(img/th_rosegarden.jpg);
	background-position:0 0;
	}

.thumbnail li#thumbnav4 a:hover{
	background-position: 0 -450px;
	}
	
.thumbnail li#thumbnav5 a{
	background-image:url(img/th_tearoom_nanasato.jpg);
	background-position:0 0;
	}

.thumbnail li#thumbnav5 a:hover{
	background-position: 0 -450px;
	}

/** source**/
.source{
	width:475px;
	height:450px;
	float:right;
	margin-top: 15px;
	}

.blank li{
	display: inline;
	line-height: 2;
	}

.blank a{
	list-style-type: none;
	}

/**about**/
.about{
	line-height: 2;
	width: 1000px;
	padding-top: 30px;
	}
.about th{
	padding: 0;
	width: 300px;
	background-color:#e3dad1;
	border-right:1px dotted #b7b1ab;
	}
.about td{
	width: 700px;
	background-color: #eee6e0;
	border-bottom:1px dotted #b7b1ab;
	}

hr{
	width:530px;
	border:none;
	border-top:dashed 1px #000;
	height:1px;
	color:#FFFFFF;
	margin: 0 auto;
	}

/**** profile ****/
.skil li{
	display: inline;
	}
	
/**** contact ****/
#form{
	width: 760px;
	height: 620px;
}

/**** link ****/
#link p{
	line-height: 3;
	}

/**** page-top****/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 80%;
	}

#page-top a {
	background: #000;
	text-decoration: none;
	color: #fff;
	width: 80px;
	padding: 20px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
	}

#page-top a:hover {
	text-decoration: none;
	background: #999;
	}

/**** foot ****/
#foot{
	clear:both;
	background-color:#666666;
	height:60px;
	}

#foot p{
	text-align:center;
	line-height: 4;
	font-size:15px;
	color:#f5f5f5;
	}
製作期間 2013年5月
制作時間 70時間程度
作業内容 デザインデザイン、コーディング
テーマ ポートフォリオサイトのあり方を考え、シンプルで見易い作りを心がけました。
色味はモノトーンで抑え、作品に注視していただけるようにしつつもjQueryの導入など細かい遊びを与えてみました。
使用ソフト Adobe Illustrator CS4/Adobe Flash CS4/Dreamweaver CS4/crecent eve

DESIGN

INFINI

製作期間 デザイン2013年4月
制作時間 30時間程度
作業内容 写真加工、デザイン作成
テーマ 架空のエステサロンサイトを想定。
バナーや地図など、細かいデザインに注力いたしました。
使用ソフト Adobe Illustrator CS4/Adobe photoshop CS4

ROSE GARDEN

製作期間 デザイン2012年12月
制作時間 20時間程度
作業内容 写真加工、イラスト制作、デザイン作成
テーマ 友人の運営する雑貨のECサイトの新デザインを想定して作成しました。
女性向けサイトなので、色味は赤系でまとめ、友人の好きな猫やスイーツ等、可愛いらしいモチーフをちりばめてみましした。
使用ソフト Adobe Illustrator CS4/Adobe photoshop CS4

TeaRoom NANASATO

製作期間 デザイン2012年12月
制作時間 20時間程度
作業内容 写真加工、サイトデザイン
テーマ 架空の喫茶店サイトを想定。
女性層のユーザーアクセスを想定し、居心地の良い喫茶店をテーマに暖色系でまとめ温か味のある雰囲気を目指しました。
使用ソフト Adobe photoshop CS4
PROFILE

名前

オオモリ ユリア

使用可能ソフト

photoshop、Illustrator、Flash、Dreamweaver(タグ打ちはメモ帳でもかまいません)の基本操作が出来ます。

経歴

WEBデザイナー・WEBコーダーを志し、

2012年11月から2013年5月までの6ヶ月間
全くの未経験から東京クリエイター浦和校WEBクリエーター養成科にて、WEBデザイン・コーディングの基礎を学びました。

目標

まずはプロのWEB制作者になり、営業・企画・統括業務にも興味があるので将来的にはWEBディレクション業務に就きたいと考えています。

ただいまjQueryの導入、CMSを勉強中です。

趣味

紅茶を淹れること(ティーコーディネーター資格保持)

写真 →flickr

CONTACT

TOP