javascript・jQuery

上のキャプチャのような、トグルで質問への回答の表示・非表示を切り替えるサンプルプログラムを紹介します。 HTMLで質問と回答の内容を記述する まずは、HTMLでQ&Aを作っていきましょう。 HTML トグルに対応させる（jQuery） 先ほど作ったQ&Aにトグルを対応させましょう。トグルの基本については以下の記事を参...

ダイナミックなデザインのホームページを作る場合、 が効果的です。 ここでは、「」と「」を組み合わせることで実現できる、画像をフルスクリーン表示するプログラムの実装方法について見ていきましょう。 フルスクリーン表示のための基礎技術 ブラウザサイズを自動で取得する方法 ブラウザのサイズを自動で取得する場合、javasc...

写真を拡大表示したり、ボタンクリックでテキストを表示する際に、ポップアップを実装すると便利です。 ここでは、javascriptとcssでポップアップを実現するための基本的なプログラムについて紹介していきます。 ポップアッププログラムのサンプル ID名「popup」で囲われたブロックが、ポップアップで表示される領域...

上のキャプチャのように、画像をエフェクト付きのポップアップで表示したい時、「」という既存のjQueryプラグインを活用するのが最適です。 少ない手間で、高品質なポップアップを実現することができます。 ここでは、プラグインのダウンロードから実際のポップアップ表示までの全手順を紹介していきます。 LightBox2と...

WEB開発を行なう上で、 できるだけソースコードの量を減らすような工夫をすると、 に仕上げることができます。 ここでは、jQueryソースコードをできるだけシンプルにするための工夫について紹介していきます。 jQueryをシンプルにするメリット サイトの表示速度が向上する サイトを表示する際には、 ページを構成する...

ボタンクリックで質問に対する回答を表示・非表示切り替えできるような、 ハイクオリティなQ&Aを実現するためには、jQuery、html、cssが必要です。 ここでは、上キャプチャのような形のQ&Aを作る手順をサンプルを見ながら紹介していきます。 HTMLで質問と回答の内容を記述する まずは、HTMLでQ&Aを作ってい...

上のキャプチャのように、 ことがあります。 こういった場合は、 jQueryプログラムを記述することによって、表示処理の振り分けが実現できます。 コピーページを使わずに同一ページ内で表示を切り替えた方が良い理由 通常、ボリュームがあるコンテンツページの一部の内容の表示を切り替えたい時は、 コピーページを作って擬似...

jQueryでは、 URLの語尾の「?page=1#block1」といった、 を実現することができます。 これにより、同一ページ内での表示ブロックの切り替えや、特定のスクリプトプログラムを実行させるといったことができるようになり、より幅広いデザイン・機能をもったWEBサイトを作ることができるようになります。 jQu...

「」というjQueryプラグインを使えば、画像やテキストブロックといった要素を横方向にゆっくりとループスライドするスライドショーを作ることができます。 ※2017年5月段階のバージョンでは、横幅可変サイズ指定時に無限スクロールが発生しない（１度のみループスライドして停止する）という不具合を確認しています。 横幅を固定...

画像やテキストといったコンテンツをスライドではなく無限スクロールで表示したい時は、jQueryプラグインの「」が便利です。 ここでは、「infiniteslide」をダウンロードするところから、実際にサイトに適用するまでの一連の流れを紹介していきます。 「infiniteslide」について 「infinitesl...