ホームページを作ろう(応用編)

戻る

ホームページを作ろう

プログラミングを楽しむ

基本編ではWindows環境にフォルダー、html、cssを作成し、メモ帳を使って編集し写真を表示する方法を説明しました。

実践編では、一歩進んで自分で撮った写真を見栄え良く表示する方法を説明しました。

さらに進んでJavaScriptとjQueryを使って写真などを動的に表示することを実例で説明します。

興味のある人はダウンロードしてみて下さい。

3.0 予備知識

JavaScriptについて: htmlだけの表示は、どちらかというと静的な表示といえますが、目が慣れるに従いそれだけではインパクトが足りないと思う人が多くなりました。; 現在一般的に見られているホームページで広く使われている言語にJavaScriptがあります。; JavaScriptはhtml、cssと組み合わせて、表示される対象(オブジェクトという)を、変化にとんだ手法で表現します。; 参考サイト:
　・JavaScriptとは何なのか！初心者向けに徹底解説
　・とほほのJavaScriptリファレンス

jQueryについて: 上述のJavaScriptをそのまま使おうとすると、何やら難しい専門用語が出てきます。実際JavaScriptはプログラム言語としては難しい。; ということでJavaScriptのコードの部分は既成のものを使って、変数を記述するだけで簡単に使えるようにまとめたものがjQueryです。; jQueryは拡張子.jsなのでJavaScriptコードで書かれたファイルです。; jQueryはこちらからダウンロードします。; またはダウンロードせずに html内に Googleが提供しているサイト<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> などと記述して使うことも出来ます。; 色々なjQueryの拡張機能(プラグイン)が提供されているので、ダウンロードして使います。; 参考サイト:
　・【初心者向け】jQueryとは？jQueryの基本的な使い方まとめ
　・jQueryプラグイン

以下、JavaScriptとjQueryの実例を紹介します。

3.1 マウスポインターでメイン画像を変える。cssを切り替える。

写真の枚数が多くなると、ホームページがどんどん長くなっていくので、小さい画像(サムネール thumbnail)を並べて、見たいものだけを大きく表示する。

また、cssを変えて表示のスタイルが大きく変わる実例として、2種類のcssをボタンで切り替えます。

作例画像(click)

ここで説明する作例が作例画像をclickすると別windowで表示されます。
css、html、写真をフォルダーごとダウンロードして下さい。
「mouse over photo」ダウンロード(zip)

<head>

<script type="text/javascript">
txt=new Array(); img=new Array();
img[1]='img/PB270597.jpg';
img[2]='img/PB300692.jpg';
.......................
// number of img
var ic = 12 ;
// clean txt
for(i=1; i <= ic; i++) {txt[i] = ' '};
txt[1]='東京駅夜景';
txt[2]='平林寺(埼玉県新座市)';
.......................
// image define
movimg=new Array();
for(i=1; i<=ic ; i++) {movimg[i] = new Image();movimg[i].src = img[i] ;}
// image change
function changImg1(imgNoA,imgNoB) {document.images[imgNoA].src=movimg
[imgNoB].src;}
// css change
function changeCSS(sURL) {var obj = document.getElementsByTagName
("link");for (var k=0, cnt=0; k<obj.length; k++) {if (obj[k].type == "text/css") obj[k].href = sURL[cnt++];}}
//-->
</script>
</head>

<body>
.......................
<script type="text/javascript">
for (i = 1; i<=ic; i++)
{document.write("<a href='javascript:void(0);' onMouseOver='changImg1(0,"+i+");document.forms[0].e0.value=txt["+i+"]'+><img src="+img[i]+"></a>");}
</script>
........................
<form>
<input type="button" value="frame A" onClick="changeCSS(['css/csssa.css'])">
<input type="button" value="frame B" onClick="changeCSS(['css/csssb.css'])">
</form>
........................
</body>

index.htmlの説明(部分)。ダウンロードしたフォルダーのindex.htmlをメモ帳などで開いて参照。
JavaScriptは<head>と</head>または<body>と</body>の中に記述できる。
JavaScriptはhtml文書の中では<script type="text/javascript">と</script>の間に記述する。
ここではArray(配列)を使っている。何やら昔数学で習った。
参考) JavaScriptリファレンス（オブジェクト別）
cssを変更するボタンはformとinput type="button"タグを使う。

ここからjQueryの実例を紹介します。

3.2 アルバムページをめくる

普通に写真を並べるだけでは物足りなく、もっと見ていて楽しいものにしたい。

作例画像(click)

ここで説明する作例が作例画像をclickすると別windowで表示されます。
こちらのonebook3dサイトから借用しました。
css、html、写真をフォルダーごとダウンロードして下さい「yaku_album」ダウンロード(zip)
　(* Chromeの場合は、ダウンロードした自分のpc(ローカル)では画像を開けないことがあるので、ローカルでのブラウザテストはIEやEdgeを使ってください。ホームページ　サーバーでは問題ありません。)

index.htmlの説明
フォルダーonebook3d/jsにjQueryを入れてある。
imgArray に画像名とテキスト(値)を [ , , , ]で記述する。
jQueryのコードは $ で始まる。
//はコメント

3.3 フェードスライド

写真をスライド

jQueryの使い方の例としてもう一つ紹介します。こちらはjQueryのライブラリーをダウンロードしないで、google提供のサイトをリンクするものです。

作例画像(click)

ここで説明する作例が作例画像をclickすると別windowで表示されます。
css、html、写真をフォルダーごとダウンロードして下さい「jslide」ダウンロード(zip)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>東京夜景 slide</title>
<link rel="stylesheet" type="text/css" href="jslide.css" />


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(function(){
var $setElm = $('.multiple'),
fadeSpeed = 4500,
switchDelay = 8000;
$setElm.each(function(){
var targetObj = $(this);
var findUl = targetObj.find('ul');
var findLi = targetObj.find('li');
var findLiFirst = targetObj.find('li:first');
findLi.css({display:'block',opacity:'0',zIndex:'99'});
findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);
setInterval(function(){
findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},
fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
},switchDelay);
});
});
</script>
</head>
<body>
<div id="div_root">
<h1>東京夜景 </h1>
<div id="container">
<div class="multiple">
<ul>
<li><img src="img/P2150816.jpg" width="640" height="480" alt=""></img><span>湯島天神(文京区)</span></li>
<li><img src="img/P3240337.jpg" width="640" height="480" alt=""></img><span>千鳥ヶ淵(千代田区)</span></li>
<li><img src="img/P6032052.png" width="640" height="480" alt=""></img><span>墨田公園(浅草)</span></li>
<li><img src="img/PB240228.jpg" width="640" height="480" alt=""></img><span>神宮外苑銀杏並木</span></li>
<li><img src="img/PC150042.jpg" width="640" height="480" alt=""></img><span>西新宿駅前</span></li>
<li><img src="img/PB270610.jpg" width="640" height="480" alt=""></img><span>日比谷通り(千代田区)</span></li>
<li><img src="img/PA260691.jpg" width="640" height="480" alt=""></img><span>東京都庁展望台</span></li>
<li><img src="img/PB270597.jpg" width="640" height="480" alt=""></img><span>東京駅前</span></li>
<li><img src="img/PC150033.jpg" width="640" height="480" alt=""></img><span>西新宿</span></li>
<li><img src="img/PC180922.jpg" width="640" height="400" alt=""></img><span>レインボーブリッジ(晴海埠頭より)</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>

index.htmlの説明
ここでgoogleサイトをリンク(ajaxはプログラミング手法)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
fadeSpeed,switchDelayで、表示時間やフェードの時間を指定する。

様々なjQueryプラグインが提供されています。jQueryプラグインで検索してみて下さい。

ダウンロードやコピーしてまずは自分のpcで稼働する環境を作り、好みのスタイルに作り上げていきます。その過程で必要な知識を断片的に会得して徐々に知識を深めていくことが必要と思います。

Pythonを使ったhtml作成

html/cssの記述の効率化のためにプログラム言語 Pythonの簡単な作例を掲載します。
　　　　・Python作例
　　　　・Python作例②

続く.....ホームページを作ろうレスポンシブデザイン

戻る

Total	Today	Yesterday