blog from hifu-koworks

パソコン工房hifu-kowooksのご紹介プログです。

2014年11月

MyCalendarは自分パソコンのトップ画面に設置するWEBサイトです。
 自分のパソコンもカレンダーと日程管理できるようにしたい。しかも関心事はリンクさせれば素早く簡単に見ることができる。こんなサイトはないだろうか。
こんな願いでMyCalendar(ウエブサイト)を制作しました。

(1)MyCalendar2016迎春
2016迎春。WEBカレンダー:日本列島の四季。
これから美しい日本列島の四季を楽しみながら、 日本各地を花散歩してみましょう。
迎春
http://hifu-koworks.com/mycalendar2016.ver01/index.html
2016mynengaⅠ1
2016賀正カレンダー
2016mynengaⅠ2
2016迎春カレンター
2016mynengaⅠ8
2016.新春(1~2月)カレンダー

2016mynengaⅠ3
2016春季(3~4月)カレンダー

2016mynengaⅠ4
2016五月(5~6月)カレンダー

2016mynengaⅠ5
2016初夏(7~8月)カレンダー

2016mynengaⅠ6
2016秋季(9~10月)カレンダー

2016mynengaⅠ7
2016初冬(11~12月)カレンダー

(1)MyCalendar2015年賀

常識を変えた新しいWEB年賀。(新春のお喜び申し上げます)
2015mycalendar
http://hifu-koworks.com/mycalendar2015/index.html


WEB年賀は頂戴してカンタン。カレンダーを見ながら予定表がつくれ、みて楽しい便利なWEBサイトです。携帯でも見れるジャストサイズのカレンダー画面です。

mycalendar2015desigin
bodyサイズは1366X1556pxに制作して、携帯画面にジャストサイズで
見ることが可能です。

(2)MyCalendar作品(私のカレンダーで、たゆまぬ予定を立てましょう)
63img
http://hifu-koworks.com/mycalendar.ver12/index.html
今月のカレンダーとGoogle calendarを搭載。
60img
さらに、いつも知りたいサイトへリンクしていますので、検索がらくらく。

(3)MyCalendar2作品(四季のカレンダー)
64img
四季のサイトをリンク。お気に入りの四季をいつも見ることができます。
http://hifu-koworks.com/mycalendar2.ver01/index.html
mycalendar2新春
mycalendar2春季
mycalendar2初夏
mycalendar2秋季
mycalendar2初冬
さあ、いよいよ2015年。MyCalendarで計画生活を支援します。



 jQeryは動的なWebページを制作するのによく採用する便利なライブラリーです。その一つjQeryEasingPlugiは「ページをめくる印象的な画像ギャラリー」であり、このフォルダーの中身を調べ、改良することでオリジナル作品を作ることができます。このオリジナル作品の作り方を解説します。

オリジナル作品例:Xmasbook

作品00

作品の作成データは下記のようにsampleフォルダーにすべて格納されています。

データ構造


1、①indexデータ : index.html

 htmlWebページを記述する言語です。 「<」と「>」 で挟まれたタグとよばれる文字列で囲うことにより、文書の意味づけをするものです。下記はhtml文章の基本構成です。①indexデータはこのような構成で記述されています。タイトル、写真、ナビケーションリスト、アドレス・コピーライトの記載です。具体的には下記のとおり、データ内の<title></title><body></body>の~に文章を入力することです。


①タイトルの入力

<title>2014xmasbook</title>  に文字入力。英和いずれでも可。

②写真とキャプションリストの作成

<ul>

<li><img src="images/images01.jpg" width="400" height="300" alt="01" title="東京駅"/></li>

~略~

</ul>

"images/■■.jpg" の■■に④imagesフォルダー内の画像データ名を記載します。jpgは画像形式です。例えばphoto1を使う場合は、"images/photo1.jpg"となります。次にtitle="□□□□"にそのキャプションを入れます。データ名は英字のみ、キャプションは英和いずれも可です。リスト項目は頁数だけ必要です。画像サイズはすでに幅400px、高さ300pxで設定しています。

③ナビケーションリストの作成

<ul class="footmenu">

<li class="first"><a href="■■.html">□□□□</a></li>

<li><a href="■■.html">□□□□</a></li>

          ~略~

</ul>

<li class="first">はリスト1番目、次の<li>2番目、その次は3番目と並んだ状態になります。<ahref="■■.html">はホルダー内のデータ(■■.html)にリンクさせます。外部のWEBサイトにリンクさせる場合は<a href="http:■■■■">となります。http:■■■■がURLです。ナビゲーション名は<li><a>□□□□</a></li>の□□に入力します。この作品は、東京各地のクリスマス夜景とリンクさせています。

④アドレス・コピーライトの作成

<address>Copyright &copy; Kumagaya City. All rights reserved.</address>文字入力。英和いずれでも可。


2、①indexデータをブラウザーて確認

 入力しましたらindexデータを上書き保存してください。保存は最初と同じホルダーに収めることか肝要です。そして閉じます。次はブラウザーで開き、入力内容を確認をしてください。上記の①から④まで入力ごとに保存し、そのつどブラウザーで確認することをお勧めします。


3、①indexデータに②cssと③jsの各データをリンクさせる。

 ①indexデータの文書<head></head>cssjsデータ名を記入します。

具体的にはindexデータの<link href="css/■■.css"~、<script src="js/■■.js"~の■■にデータ名を記入します。

<head>

                                    ~中略~

<link href="css/reset.css" rel="stylesheet" type="text/css" />

<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/gallerybook.js" language="JavaScript" type="text/javascript"></script>

<script src="js/jquery.easing.1.3.js" language="JavaScript" type="text/javascript"></script>

<script src="js/jquery-1.6.1.min.js" language="JavaScript" type="text/javascript"></script>

</head>

これて゜cssjsをリンクさせて「ページがめくれる画像」が完成しました。


4、②cssデータ : css.css

 cssindexに記述した文字情報を形にする、デザインの役割りを果たすものです。「どこで」「なにを」「どうするのか」こ3つの方法を次の書式「セレクター { プロパティ: ;} 」で記述したものです。画面全体の背景画像、ブックの配置、ブック内の背景画像、ボタンの配置、ナビケーション、アドレス・コピーライトの大きさ・配置などが記述されています。cssデータのbody{~の画像データ名■■をimages01と記入してください。背景画像が変わります。

body {

         background: url(../images/01.jpg) repeat;

         }

これて゜オリジナル作品の背景画像を変更できました。

 

5、③jsデータ : gallerybook.js、他

 最後に添付のjsデータ:gallerybook.jsをテラパットで開いてください。jsはページをめくる際のアニメーション機能、ページをめくり上げる動作、ページをたたむ動作等、高度な仕掛けを施すものです。すでに完成したものでほとんど第三者が修正することはありませんが、スピード調整などで数値の修正をすることがあります。

 これで、sampleフォルダー内のデータを改良して、オリジナル作品をつくることができました。最後に完成したindexデータをブラウザーで開いてください。「ページをめくる印象的な画像ギャラリーXmasbook」の完成です。このデータはWeb作品のトップページとなるものです。

59img

このWeb作品は下記の作品集でご覧ください。

http://hifu-koworks.com/2014xmasbook.ver11/index.html

≪資料・データ提供元≫

jQueryデザインブックhttp://www.MdN.co.jp/di/book/6213/ よりサンプルデータを入手。

CHAPTER 03 エフェクト06本のようにぺらぺらめくる画像ギャラリー。


↑このページのトップヘ