Web Design Leaves

Firefox の最新バージョン（22.0）になってから、この PC では画像が大きく表示されぼやけて見えるようになった。 また、コードなどを記述する pre 要素にマウスオーバーすると幅が自動的に広がるようにする機能を jQuery で以下のように記述して実現していたが、マウスアウトする際に、今までは元の幅に自動的に戻っていたのに、戻らなくなった。（「jQ…

続きを読む

jQuery を使って簡単に Lightbox のようなモーダルウィンドウを表示する方法のメモ。 基本的な構造 サムネイル画像にモーダルウィンドウで表示する拡大画像のソースへのリンクを設定する。 ページの適当な個所に半透明のモーダルウィンドウと拡大画像を表示する領域を設定し、CSS で非表示にしておく。 半透明のモーダルウィンドウの領域：id=”…

続きを読む

日本語と英語の2ヶ国語のサイトを作成し、それぞれの言語のページが全く同じ構成の場合、言語のリンクをクリックするとそのページに対応する言語のページに移動するリンクを作成する例。 言語のリンクは、p 要素と a 要素で作成。 JavaScript が OFF の場合は、それぞれのトップページへ a 要素でリンク ディレクトリの構造は「en」フォルダの中に英語のペ…

続きを読む

JavaScript で DOM 要素の取得など、ブラウザがホームページの読み込み完了時に何らかの処理を行いたい場合、body の閉じタグの直前に記述するか window.onload=function()～ を使用する。 最近は、jQuery ばかりを使っていて（というか、「jQuery(function($){」の意味など忘れていて） JavaScrip…

続きを読む

Googlemap を利用する際のメモ。 2018年7月16日から「Google Maps Platform」という新しいサービスになり、API の使い方等が変更になりました。新しい API の使い方等については「Google Maps API の使い方」をご覧ください（2018年7月30日） ジオコーディングを使って地図を表示 HTML に記述してある住所…

続きを読む

ウェブ上にメールアドレスを掲載すると、スパム（迷惑）メー「ルが届くようになることがあります。 迷惑メール（スパム）に使われるメールアドレスは、ロボット（自動巡回プログラム）によって自動収集されていて、ソースを分析し、メールアドレスのような文字列（@ や mialto が含まれたもの）を集めているようです。 以下はメールアドレス収集プログラムに収集されるのを防…

続きを読む

CSS による基本的な記述 メニューの幅や背景、テキストの位置などの指定は様々な方法が考えられるが、ここでは単純に幅はメニューの文字数に合わせ、右側にパディング（20px）を設け、背景は背景色で指定する。 HTML は ul 要素を入れ子にしてマークアップする。 CSS や jQuery で指定しやすいように id 「header-nav」を指定した div…

続きを読む

親メニューをクリックすると、それに属するサブメニューをスライドアニメーションで表示するメニュー。 ul 要素を入れ子にして、ツリー構造を記述 例：親メニュー「News」をクリックすると、そのサブメニュー「Events」、「Activities」がスライドアニメーションで表示される。 「+」「-」「■」の3つの画像を用意。 親メニュー（div.parentme…

続きを読む

プラグインを使わずに、jQuery を使って簡単なスライドショーを行う方法のメモ。 シンプルなスライドショー そのページにアクセスすると自動的にスライドショーを行う単純なもの。 サンプル１ 基本的な構造 最初に表示する写真とそのタイトルを HTML に記述。 スライドショーで表示する写真のファイル名と情報をカンマ区切りで、非表示に指定した div 要素内に …

続きを読む

jQuery の position(), animate() メソッドを使用する際のメモ。 画像などを最初は非表示にしてその後表示するような場合、css の display プロパティを「none」にしておいて fadeIn() や show() などを使うことで可能だが、animate() メソッドの場合、css の display プロパティを「none…

続きを読む