画像の下にできる隙間をなくす方法。

画像をdivやh1タグなどのブロック要素に入れると画像の下に数ピクセルほどの隙間ができてしまいます。気にするほどのことでもない範囲ではありますが、デザイン上1pxのずれもだしたくない場合はこの不要な余白を取り除く必要があります。ここではそれを解決する3つの方法を紹介します。

Continue reading

positionのabsolute指定で親要素の高さが潰れてしまったときの対処法。

positionを多用してレイアウトしていると親BOXの高さが潰れてしまうことがよくありますね。デザイン上問題なければそのまま放ったらかしにしてもよいのですが、CSSなどで親要素を装飾したい場合はしっかり高さを復活させてあげましょう。

Continue reading

CSSで簡単!画像を画面の真ん中に配置する方法

画像を画面の中心に配置する方法です。

Webページをレイアウトする上で一つ重要になってくるのが、様々な大きさ(解像度)のスクリーンでも崩れることなく表示させるようにすることですよね。ということは、パソコン、タブレット、スマートフォンの端末からアクセスを想定して作ることになります。さらに、パソコンのスクリーンだけでも小さいものから大きいものまであるので一概に「このサイズで作れば大丈夫」というのがありません。

現在、主流なページのサイズである1024px × 768pxも実は一番解像度の低いパソコンのスクリーンを想定したサイズです。では、そのような様々なスクリーンサイズがあるなかで、常に画像が背景の中心に表示させるようにするにはどうしたらいいのでしょうか。

実はCSSやJavascriptを駆使するたくさんの方法があり、中級者以上のかたにとっては「そんなの簡単!」という方がほとんどだと思いますが、コーディングを初めたばかりの初心者にとってはつまづくポイントだったりします。そんな方のために今回はcssを使った2つの簡単な方法を紹介します。

Continue reading

jQuery 簡単にGoogle Mapsを設置できるプラグイン

ホームページにGoogle Mapsを表示させるのはそんなに難しくないですが、マーカーを表示させたり、マーカーのアイコンを変更したりなどのちょっとしたカスタマイズは少し面倒ですよね。その面倒を軽減してくれるjQueryのプラグインを見つけたので紹介します。Google Mapsを表示させるプラグインはgmap.jsも人気ですが、こちらも使いやすそうです。

「jquery.googlemap.js」で簡単にGoogle Mapsを表示させる方法

使い方は非常に簡単です。まず、こちらからファイルがダウンロードしましょう。

head内にjqueryとプラグインファイル、GoogleMap APIを読み込むコードを記入します。

[code language=”html”]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.fr/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3.4", {
other_params: "sensor=false&language=ja"
});
</script>
<script type="text/javascript" src="jquery.googlemap.js"></script>
[/code]

次にbody内のGoogleMapを表示させたいところにブロック要素を作ります。(*cssで width と height を指定する必要があります。)

[code language=”html”]
<div id="map" style="width: 300px; height: 300px;"></div>
[/code]

あとは そのブロック要素を指定してJavascript を少し記入するだけです。

[code language=”javascript”]
$(function() {
$("#map").googleMap();
})
[/code]

googlemap demo

ただし、なぜかデフォルトでフランスのパリが中心に表示されますので、オプションで場所を指定してあげます。記入方法は次の通りです。

[code language=”javascript”]
$(function() {
$("#map").googleMap({
zoom: 13, // ここの数字で倍率を調整できます!
coords: [35.690346,139.700603], // ここの数値で中心地を指定できます。
});
})
[/code]

googlemap02

東京都新宿駅を中心にしてみました。この座標を求める数値は、こちらのページで簡単に調べられます。

住所にマークをつけたい場合は、addMarker()を使います。例えば新宿駅にマークをつけたい場合。

[code language=”javascript”]
$(function() {
$("#map").googleMap();
$("#map").addMarker({
coords: [35.690346,139.700603], // ここにマークを置きたい場所の経度、緯度を指定します。
});
})
[/code]

googlemap03

これで簡単にマーカーつきのgooglemapを表示させる事が出来ました。

次にマーカーをオリジナルの画像に変えてみます。先ほどのコードに一行追加するだけです。

[code language=”javascript”]
$(function() {
$("#map").googleMap();
$("#map").addMarker({
coords: [35.690346,139.700603], // ここにマークを置きたい場所の経度、緯度を指定します。
icon: ‘koko.png’, // 画像へのパスを記入します!,
});
})
[/code]

googlemap04

こんな風に文字を入れる事も出来ます。簡単ですね。

ひとつ残念な点で、マーカーを指定した場合、倍率の指定が出来ないようです。