2013-08-21

Light box ギャラリー作成練習

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>wonder land～ハンドメイドアクセサリー～</title>
<link rel="stylesheet" href="css/screen.css" media="screen,print">
<link rel="stylesheet" href="css/lightbox-0.5.css">
<link rel="stylesheet" href="css/common.css">
</head>

<body>
<div id="container">
<div id="header">
<h1>作品集</h1>
<p>オーダー品などを含め、今までの作品の紹介ページです。画像をクリックすると大きく表示されます。</p>
</div><!--header-->

<div id="content">
<h2>Gallery</h2>

<div id="gallery">
<ul>
<li>
<a href="img/IMG_0200.jpg" rel="lightbox" title="黒ウサギのパールネックレス">
<img src="img/IMG_0200_2.jpg" width="150" height="200" alt="黒ウサギのパールネックレス">
</a></li>

<li>
<a href="img/IMG_0248.jpg" rel="lightbox" title="コットンパールのエッフェル塔ブレスレット">
<img src="img/IMG_0248_2.jpg" width="150" height="200" alt="コットンパールのエッフェル塔ブレスレット">
</a></li>

<li>
<a href="img/IMG_0336.jpg" rel="lightbox" title="アリスのウサギイヤリング">
<img src="img/IMG_0336_2.jpg" width="150" height="200" alt="アリスのウサギイヤリング">
</a></li>

<li>
<a href="img/IMG_2484.jpg" rel="lightbox" title="レースの姫猫ブローチ">
<img src="img/IMG_2484_2.jpg" width="150" height="200" alt="レースの姫猫ブローチ">
</a></li>

<li>
<a href="img/IMG_2112.jpg" rel="lightbox" title="時計ウサギのブローチ">
<img src="img/IMG_2112_2.jpg" width="150" height="200" alt="時計ウサギのブローチ">
</a></li>

<li>
<a href="img/IMG_4541.jpg" rel="lightbox" title="ビックな天使ネックレス">
<img src="img/IMG_4541_2.jpg" width="150" height="200" alt="ビックな天使ネックレス">
</a></li>

<li>
<a href="img/IMG_1561.jpg" rel="lightbox" title="ラブリーウサギの麦わら帽子">
<img src="img/IMG_1561_2.jpg" width="150" height="200" alt="ラブリーウサギの麦わら帽子">
</a></li>

<li>
<a href="img/IMG_9746.jpg" rel="lightbox" title="キラキラ夜空ネックレス">
<img src="img/IMG_9746_2.jpg" width="150" height="200" alt="キラキラ夜空ネックレス">
</a></li>

<li>
<a href="img/IMG_1593.jpg" rel="lightbox" title="淡水パールとカルセドニーのブレス">
<img src="img/IMG_1593_2.jpg" width="150" height="200" alt="淡水パールとカルセドニーのブレス">
</a></li>

<li>
<a href="img/IMG_9057.jpg" rel="lightbox" title="レースと時計ウサギのブローチ">
<img src="img/IMG_9057_2.jpg" width="150" height="200" alt="レースと時計ウサギのブローチ">
</a></li>
</ul>
</div><!--gallery-->
</div><!--content-->
</div><!--container-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
    $( '#gallery a' ).lightBox();
});
</script>

</body>
</html>



@charset "utf-8";
/* CSS Document */

body {
  background: #FFF;
}
a {
  text-decoration: none;
}


#container{
	width:960px;
	height:auto;
}
#header{
	width:960px;
	height:auto;
}
#content{
	width:960px;
	height:auto;
}

#gallery{
  background-color:#FFC;
  padding: 10px;
  width: 960px;
  
}
#gallery ul{
	list-style: none;
	}
#gallery ul li{
  display: inline;
}
#gallery ul img{
  border: 5px solid #FFF;
  border-width: 5px 5px 20px;
}
#gallery ul a:hover img{
  border: 5px solid #FFC;
  border-width: 5px 5px 20px;
  color: #FFC;
}
#gallery ul a:hover{
	color:#FFF;
}

2013-08-20

組み込みオブジェクト

JavaScriptがあらかじめ用意しているオブジェクト

Object すべてのオブジェクトの元となるオブジェクト

Date 日時操作機能をもつオブジェクト

Math 計算機能をもつオブジェクト

Array 配列操作機能をもつオブジェクト

String 文字列操作機能をもつオブジェクト

var オブジェクト名 = new Date( 年, 月, 日 );

Dateオブジェクト

日付時刻をデーターとして管理する

日時をミリ秒形式のデータとしてもつオブジェクト

getFullYear 年を4桁の数値で戻す

getMonth 月を戻す。戻り値は「0」が1月、「1」が2月・・・

getDay 曜日を戻す。戻り値は「0」が日曜日、「1」が月曜日・・・

getDate 日を戻す

getHours 時間をす。時間は24時間形式で、戻りの範囲は「0～23」

getMinutes 分を戻す

getSeconds 秒を戻す

2013-08-16

JQアコーディオンメニュー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンメニュー</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body, di, dt, dd {
  margin: 0;
  padding: 0;
}
#conatiner {
  width: 500px;
  margin: 50px auto;
}
.accordion {
  padding: 5px 0;
  background: #61A342;
}
.accordion dt{
  padding: 1em;
  border: 1px solid #BBB;
  background: #FFF;
  font-weight: bold;
  cursor: pointer;
}
.accordion dd{
  padding: 1em 1em 1em 2em;
  border: 1px solid #BBB;
  background-color: #F1F1F1;
}
</style>
</head>
<body>
<div id="conatiner">
<dl class="accordion">
<dt>HTML</dt>
<dd>HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。</dd>
<dt>jQuery</dt>
<dd>jQuery（ジェイクエリー）は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。</dd>
<dt>PHP</dt>
<dd>PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。</dd>
</dl>
</div>
</body>

2013-08-11

ボタン作成とHTML、CSS練習（8/9）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/banner.css">
</head>
<body>
<div id="nav">
<ul>
<li id="contact"><a href="#">お問い合わせ</a></li>
<li id="food"><a href="#">カフェフード</a></li>
<li id="drink"><a href="#">カフェドリンク</a></li>
<li id="info"><a href="#">インフォメーション</a></li>
<li id="home"><a href="#">ホーム</a></li>
</ul>
</div>
</body>
</html>



@charset "utf-8";
/* CSS Document */
html,body,div,ul,li{
  margin:0;
  padding:0;
  line-height:1.0;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
/* nav */

}
#nav {
  width: 801px;
  height: 50px;
 margin: 50px 0 0 50px;

}
#nav li{
  float:left;
display: inline;

}
#nav li a{
 width: 160px;
 height: 50px;
 display: block;
 white-space: nowrap;
 background: url(../img/banner0810.jpg)no-repeat;
 overflow: hidden;
 text-indent: 100%;
}
#nav li#contact a {
 backgroud-position:left top;
}
#nav li#contact a:hover,#nav li#contact a:active{
backgroud-position:left -60px;
}
#nav li#food a{
 backgroud-position:-160px 0;
}
#nav li#contact a:hover,#nav li#food a:active{
backgroud-position:-160px -60px;
}
#nav li#drink a{
 backgroud-position:-320px 0;
}
#nav li#contact a:hover,#nav li#drink a:active{
backgroud-position:-320px -60px;
}
#nav li#info a{
 backgroud-position:-480px 0;
}
#nav li#contact a:hover,#nav li#info a:active{
backgroud-position:-480px -60px;
}
#nav li#info a{
 backgroud-position:-640px 0;
}
#nav li#contact a:hover,#nav li#info a:active{
backgroud-position:-640px -60px;
}

2013-08-08

cake shopサイト作成(画像切り出し作業と商品紹介ページの作成）

FWで画像の切り出し作業後、商品紹介ページのHTML、cssの作成
（1）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ウォンツケーキ店 | テンプレート</title>
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="contents">
<div id="header">
  <h1><a href="index.html">ウォンツケーキ店 | TOPページ</a></h1>
  <ul id="menu">
    <li><a href="index.html" class="menu_index">ホーム</a></li>
    <li><a href="products.html" class="menu_productsOn">商品のご紹介</a></li>
    <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
    <li><a href="order.html" class="menu_order">商品のご購入</a></li>
  </ul>
</div>
<!--   header end  -->
<div id="container">
  <div id="sidebar"> <a href="item2.html" class="banner" title="	バースデーケーキのご注文はこちら"><img src="images/banner01.jpg" width="195" height="175" alt="バースデーケーキのご注文はこちら"></a> <a href="yumi.html" class="banner" title="ユミの奮闘日記"><img src="images/banner02.jpg" width="195" height="88" alt="ユミの奮闘日記"></a> </div>
  <!--   sidebar end  -->
  <div id="main">
    <h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介"></h2>
    <h3 class="product_name">チーズスフレ</h3>
    <img src="images/item_photo01.jpg" width="475" height="285" alt="チーズスフレ商品写真">
    <p class="product_detail">当店人気メニュー！</p>
    <p class="product_detail">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わいの中にアクセントを与えてくれます</p>
    <p class="product_detail">甘さ控えめとなっておりますので、カロリーが気になる方も安心です。お茶のお供に是非どうぞ。</p>
    <p>価格：480円（税込）</p>
    <div  class="buy"> <a href="order.html"> <img src="images/buy_btn.gif" width="120" height="20" alt="この商品を購入する"> </a> </div>
    <!--   main end  --> 
  </div>
  <!--   container end  -->
  <div id="footer">
    <address>
    Copyright&nbsp;(C)2013&nbsp;Wants&nbsp;Cake&nbsp;Corporation.All&nbsp;Rights&nbsp;Reserved.
    </address>
  </div>
  <!--   footer end  --> 
</div>
<!--   contents end  -->
</body>
</html>
（2）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ウォンツケーキ店 | テンプレート</title>
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="contents">
<div id="header">
  <h1><a href="index.html">ウォンツケーキ店 | TOPページ</a></h1>
  <ul id="menu">
    <li><a href="index.html" class="menu_index">ホーム</a></li>
    <li><a href="products.html" class="menu_productsOn">商品のご紹介</a></li>
    <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
    <li><a href="order.html" class="menu_order">商品のご購入</a></li>
  </ul>
</div>
<!--   header end  -->
<div id="container">
  <div id="sidebar"> <a href="item2.html" class="banner" title="	バースデーケーキのご注文はこちら"><img src="images/banner01.jpg" width="195" height="175" alt="バースデーケーキのご注文はこちら"></a> <a href="yumi.html" class="banner" title="ユミの奮闘日記"><img src="images/banner02.jpg" width="195" height="88" alt="ユミの奮闘日記"></a> </div>
  <!--   sidebar end  -->
  <div id="main">
    <h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介"></h2>
    <h3 class="product_name">苺のバースデーケーキ</h3>
    <img src="images/item_photo02.jpg" width="475" height="285" alt="苺のバースデーケーキ商品写真">
    <p class="product_detail">当店人気メニュー！</p>
    <p class="product_detail">大切な方のお誕生日に、程よい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
    <p class="product_detail">大切な方のお誕生日に、程よい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
    <p>価格：2,480円（税込）</p>
    <div class="buy"> <a href="order.html"> <img src="images/buy_btn.gif" width="120" height="20" alt="この商品を購入する"> </a> </div>
    <!--   main end  --> 
  </div>
  <!--   container end  -->
  <div id="footer">
    <address>
    Copyright&nbsp;(C)2013&nbsp;Wants&nbsp;Cake&nbsp;Corporation.All&nbsp;Rights&nbsp;Reserved.
    </address>
  </div>
  <!--   footer end  --> 
</div>
<!--   contents end  -->
</body>
</html>
（3）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ウォンツケーキ店 | テンプレート</title>
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contents">
<div id="header">
  <h1><a href="index.html">ウォンツケーキ店 | TOPページ</a></h1>
  <ul id="menu">
    <li><a href="index.html" class="menu_index">ホーム</a></li>
    <li><a href="products.html" class="menu_productsOn">商品のご紹介</a></li>
    <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
    <li><a href="order.html" class="menu_order">商品のご購入</a></li>
  </ul>
</div>
<!--   header end  -->
<div id="container">
  <div id="sidebar"> <a href="item2.html" class="banner" title="	バースデーケーキのご注文はこちら"><img src="images/banner01.jpg" width="195" height="175" alt="バースデーケーキのご注文はこちら"></a> <a href="yumi.html" class="banner" title="ユミの奮闘日記"><img src="images/banner02.jpg" width="195" height="88" alt="ユミの奮闘日記"></a> </div>
  <!--   sidebar end  -->
  <div id="main">
    <h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介"></h2>
    <h3 class="product_name">焼菓子の詰め合わせ</h3>
    <img src="images/item_photo03.jpg" width="475" height="285" alt="焼菓子の詰め合わせ商品写真">
    <p class="product_detail">当店人気メニュー！</p>
    <p class="product_detail">当店自慢の焼菓子の詰め合わせです。無添加の素材で一つ一つ丹念におつくりしています。</p>
    <p class="product_detail">当店自慢の焼菓子の詰め合わせです。無添加の素材で一つ一つ丹念におつくりしています。</p>
    <p>価格：1,680円（税込）</p>
    <div class="buy"><a href="order.html"> <img src="images/buy_btn.gif" width="120" height="20" alt="この商品を購入する"> </a> </div>
    <!--   main end  --> 
  </div>
  <!--   container end  -->
  <div id="footer">
    <address>
    Copyright&nbsp;(C)2013&nbsp;Wants&nbsp;Cake&nbsp;Corporation.All&nbsp;Rights&nbsp;Reserved.
    </address>
  </div>
  <!--   footer end  --> 
</div>
<!--   contents end  -->
</body>
</html>

次回はショップページからの作成

2013-08-07

cake shopサイト作成

～練習の為の架空サイトの作成～

まず、FLASHにて画像の切り出し作業の後

レイアウトをもとにHTMLの作成
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウォンツケーキ店 | テンプレート</title>

<link href="css/base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contents">
<div id="header">

 <h1><a href="index.html">ウォンツケーキ店 | Topページ</a></h1>
  <ul id="menu">
  <li><a href="index.html" class="menu_index">ホーム</a></li>
  <li><a href="products.html" class="menu_products">商品のご紹介</a></li>
  <li><a href="shop.html" class="menu_shop">店舗案内</a></li>
  <li><a href="order.html" class="menu_order">商品のご購入</a></li>
  </ul>
<div><!--header end-->

<div id="container">

<div id="main">
</div><!--main end-->
<div id="sidebar">
 <a href="item2.html" class="banner" title="バースデーケーキのご注文はこちら"><img src="images/banner01.jpg" width="195" height="175" alt="バースデーケーキのご注文はこちら"></a>
 <a href="yumi.html" class="banner" title="ユミの奮闘日記"><img src="images/banner02.jpg" width="195" height="88" alt="ユミの奮闘日記"></a>
</div><!--sidebar end-->
</div><!--container end-->
</div><!--contents end-->
<div id="footer">
<address>Copyright&nbsb;(c)2013&nbsp;Wants&nbsp;cake&nbsp;coporation.All&nbsp;Right&nbsp;Reserved.</address>
</div><!--footer end-->
</body>
</html>

その後、CSS作成

@charset "utf-8";
/* css reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}  
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

/*    ////////    ☆Wants Cake テンプレート☆///// 　*/

body {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.7;
   color: #333;
   font-size:14px;
   background: #b82456;
   }
   div#contents {
     width: 680px;
     margin:0 auto;
     padding: 0 10px;
     background: #fff;
   }
   div#header {
     margin:0 auto;
     padding:0;
   }
   div#container{
     padding-top:10px;
     overflow:hidden;
   }
   div#sidebar{
     float:left;
     width:195px;
     margin-right:10px;
   }
   div#main{
     float:left;
     margin-bottom:10px;
   }
   div#footer{
     clear:both;
     width: 680px;
     text-align:center;
     height:62px;
     line-height:62px;
     background:url(../images/footer_back.png) repeat-x;
   }
  
   /*--header--*/
   h1 a {
     display:block;
     width:252px;
     height:37px;
     margin-bottom:10px;
     text-indent: -333em;
     background:url(../images/logo.gif) no-repeat;
   }
   
   ul#menu{
     height:36px;
     background:url(../images/menubar.png) repeat-x;
     /*overflow:hidden;*/
   }
   ul#menu li {
     float:left;
   }
   
   
     ul#menu li a{
       display:block;
       width: 136px;
       text-indent: -333em;
     }
 ul#menu li a.menu_index{
         background:url(../images/menu_index.gif) no-repeat;
       }
 ul#menu li a.menu_products{
         background:url(../images/menu_products.gif) no-repeat;
       }
 ul#menu li a.menu_shop{
         background:url(../images/menu_shop.gif) no-repeat;
       }
 ul#menu li a.menu_mail{
         background:url(../images/menu_mail.gif) no-repeat;
       }
 
 ul#menu li a:hover{
         background-position: 0px -36px;
       }
 #menu li a.menu_indexOn{
         background: url(../images/menu_index.gif) 0px -36px;
       }
 #menu li a.menu_productsOn{
         background: url(../images/menu_products.gif) 0px -36px;
       }
 #menu li a.menu_shopOn{
         background: url(../images/menu_shop.gif) 0px -36px;
       }
 #menu li a.menu_mailOn{
         background: url(../images/menu_mail.gif) 0px -36px;
       }

       h2{
       margin:bottom: 15px
       }

 ||<

2013-08-05

jQuery

<b>JQ　表示、非表示の切り替え</b>

hide()メソッド
●要素を隠す
例）
<script>
$(function(){
$( '#list' ).hide( );
});
</script>
時間の設定
●「slow」か「fast」のいずれかで指定する
●ミリ秒で指定する（slow：600ミリ秒、fast：200ミリ秒）
show（）メソッド
●要素を表示する
●要素のもつ本来のdisplayプロパティに戻す
fadeOutメソッド
●フェードアウトで非表示にする。
例）
<script>
$(function(){
  $( '#photo' ).fadeOut( 3000 );
});
</script>
fadeTo()メソッド
●不透明度でアニメーションする
●数値の場合は、シングルクォートは不要

gomiichan's diary

WEB初心者の勉強奮闘記です☆