htmlタグに、CSSを追加してより見栄えの良いページの作成を解説してきましたが、これにJavascriptを組み合わせると、より高機能のページになります。CSSは奥が深く、まだまだCSSで出来ることがありますが、これ以上は簡易な説明で使えるものではありません。そこで、ここからは、もう一つのJavascriptの基本に進みます。Javascriptは強力なので、嫌われることもあり、「Javascriptを有効にする」許可をもともるブラウザもあります。ページにも、「Javascriptを有効にして見て下さい」と表示するページもあります。エクセルのマクロプログラムと同じです。Javascriptを使わないでCSSだけで機能を実現するよう、CSSは進化していますが、Javascriptを追加する方が、シンプルにhtmlを作れます。
●javascriptと組み合わせた、lightbox
blogや通販サイトなどでも使われているのがlightboxというCSSとJavascriptを組み合わせたもので、公開されているので無料で使えます。lightbox.cssと、jquery.jsなどの拡張子jsのジャバスクリプトというファイルを使っています。
<link
href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css"
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"
type="text/javascript"></script>
<a
href="gazou1.jpg" data-lightbox="group"><img
src="gazou1.jpg" width="300"></a>
これも、そのまま動くので、確認してください。こちらは、クリックして拡大画像を別ウインドウで表示するものです。htmlは、最後の一行だけです。
ここまで来ると、素人は、使い方だけ覚えて、CSSやJavascriptは丸ごとリンク先から使います。これらが、UTF-8の文字コードなので、S-jisのページで使うときに注意が必要です。もう、ページをS-jis作るのをやめたほうが良いのです。
http://www.winboys.net/digicame/csstest/lessonlb.html
サンプルは、上のリンクで確認してください。画像をクリックすると、別ウインドウが開きます。
サンプルは、上のリンクで確認してください。画像をクリックすると、別ウインドウが開きます。