Program

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

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

WEB制作の際によく実装する、使い勝手の良いキャプションエフェクトを紹介します。 これらのエフェクトはすべてCSSで実現可能です。 キャプションエフェクトサンプル マスクをかけるエフェクト キャプションをここに表示キャプションをここに表示キャプションをここに表示 HTML CSS マスクをかけた後にテキストを左か...

PHPで動的に取得した値をCSSに反映させたい時、そんな時は、PHPファイルにCSSを記述することで、CSSにPHP変数の値を埋め込んで動的に組み込ませることができます。 【STEP1】CSSをPHPファイルに記述する まずは適当にPHPファイルを作りましょう。 PHPで変数を定義し、echoでスタイルシートを出力し...

ページ内リンクを使う時に一瞬でリンク先に飛んでしまうと、サイトのデザインコンセプトに合わない場合があります。 そんな時は、スクロール移動させると良いでしょう。 これができると、ふんわり優しいサイトデザインなら、ゆっくり優しくスクロール移動したり、ポップなデザインなら少しアップテンポにスクロール移動させたりと、デザイ...

スクリプトプログラムが動かない時、デバッグをしていると以下のようなエラーメッセージを吐いている場合があります。 エラーメッセージ このエラーの意味と解決法を見ていきましょう。 エラーの意味 このエラーは、単純に「」ということを表しています。 javascriptやjQuery関数では、(),{}といった括弧を多...

フォーム入力などで文字数制限がある場合、入力している時に現在の文字数がリアルタイムで表示されると非常に親切です。 ここでは、についてみていきましょう。 文字カウンタースクリプト関数 対象の文字数をリアルタイムにカウントする関数は、以下のような記述となります。 引数に対象となる要素名を引き渡すことによって、その対象...

サイトの動線の要であるグローバルナビ。 グローバルナビを最初からページ上部に固定する場合には、単純にスタイルシートで「」を指定するだけで実現できます。 しかし、ヘッダーが大きい場合やスライドショー下にナビゲーションが来るデザインの時は、最初から固定しておくのではなく、スクロールの途中でページ上部に固定・解除を切り替...

よく、WEB初心者の方で という相談を受けます。 ここでは、スタイルが存在しているのにデザインが適用されない場合の対処法について見ていきましょう。 デザインが反映されない原因 追記するファイルが間違っている まず考えられるのが、追記する場所の間違いです。 WEBサイトでは、<header><...

WEBサイトのデザインを調整している時、 とお困りのことはありませんか？ スタイルシートが適用されない場合は、 スタイルの優先順位が低くないかを確認し、 適用される順位での記述方式に変更することでデザインが反映されるようになります。 ここでは、色々なパターンのCSS優先順位について見ていきましょう。 書く場所...