Program

デザイン性が高いWEBサイトを作る際、 という方法があります。 この方法の場合、ページ全体がスクロールされるよりもコンテンツの動きが大きく見えるようになるため、テキストや写真への注目を集めることができます。 通常、要素の背景に画像を設置する時は、CSSの「」プロパティを使って指定します。 ここでは、具体的な設定の...

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

通常、マウスホバー時にオブジェクトの枠を太くすると、オブジェクトそのもののサイズが大きくなってしまいます。 例えば、元々300pxの正方形オブジェクトがあったとして、ホバー時に5pxの太枠で囲おうとすると、310pxの正方形になってしまいます。 ここでは、について見ていきましょう。 オブジェクトのサイズは保ったま...

ブログ記事一覧を表示する時、 カテゴリーごとにデザインを指定して表示をしたい時があります。 ここでは、について見ていきましょう。 カテゴリー・タクソノミーごとにデザインを適用する方法 単純に、カテゴリーやカスタムタクソノミーごとにデザインを変化させるためには、カテゴリー・タクソノミーごとに違ったHTMLタグを付与し...