カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

jQueryプラグイン Excolo-Slider

Excolo-Sliderはシンプルなスライドショーを実装してくれるプラグインです。
シンプルではありますが、オプションも多様に用意されていて、スマホのタッチ操作にも対応しているので
非常に使い勝手が良いです。

JavaScriptライブラリをダウンロード
jQuery
Excolo-Slider

headタグ内でダウンロードしたライブラリを読み込みます。

<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./excolo-slider/js/jquery.excoloSlider.js"></script>
<link rel="stylesheet" href="./excolo-slider/css/jquery.excoloSlider.css">

HTMLを用意します。

<div id="eslider" class="slider">
    <a href="#"><img src="./images/example1.gif" width="260" height="100" alt=""></a>
    <a href="#"><img src="./images/example2.gif" width="260" height="100" alt=""></a>
    <a href="#"><img src="./images/example3.gif" width="260" height="100" alt=""></a>
    <img src="./images/example4.gif" width="260" height="100" alt="">
</div>

続きを読む…»

, ,
1,770 views

jQueryプラグイン Masonry

「Masonry」とはJavaScriptグリッドレイアウトライブラリです。
高さの違う要素を、パネルを敷き詰めるようにレイアウトしてくれるというものです。

ウィンドウのサイズが変われば、アニメーションしながら並び替えという動作も行ってくるので、
レスポンシブWEBデザインとしても利用できます。

JavaScriptライブラリをダウンロード
jQuery
jQuery masonry

headタグ内でダウンロードしたライブラリを読み込みます。

<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./masonry.pkgd.min.js"></script>

続きを読む…»

, ,
1,897 views

レスポンシブwebデザインのCSS

  • CSS
  • 2013-08-05 - 更新:2013-08-08

簡単なレスポンシブwebデザインを実装してみましょう。
以下のようなHTMLがあったとします。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div class="content">
    sample
</div>

</body>
</html>

まず、どんな画面サイズでも共通となるスタイルを記述します。

@charset "utf-8";

*
{
    margin: 0;
    pading: 0;
}

各画面サイズに適用するスタイルをMediaQueryを使って指定していきます。
続きを読む…»

, ,
1,667 views

簡単にロールオーバーを実現する方法 [JavaScript]

汎用性のあるロールオーバーを作成します。

例として閉じるボタンを作成します。
画像は、「close.gif」と「close_mo.gif」を用意します。

img要素にname属性を指定しておきます。
これを利用して画像の置き換えを行います。

名前付けの注意点として、予約語は避けます。
例えばここでいう閉じるボタンにname="close"とすると正常に動作しません。

<a href="javascript: window.close();"><img name="close_button" src="close.gif" alt="閉じる" onmouseover="swap_image(this.name, this.src);" onmouseout="swap_image(this.name, this.src);"></a>

次に画像を入れ替えるJavaScript

function swap_image(name, src)
{
	var extension, toSrc, newImage;

	if(src.indexOf("_mo") != -1)
	{
		toSrc = src.replace("_mo.", ".");
	}
	else
	{
		extension = src.substr(src.length - 3);

		toSrc = src.replace("." + extension, "_mo." + extension);
	}

	newImage = new Image();
	newImage.src = toSrc;

	eval("document."+name+".src = '"+newImage.src+"';");
}

これだけでも一応完成ですが、ボタン画像を新しくした場合等 続きを読む…»

,
4,202 views

画像の余分な余白を削除 [CSS]

  • CSS
  • 2013-05-16 - 更新:2013-05-28

imgタグを使用して表示した画像の下には余分な余白ができてしまいます。
これは画像の下端がテキストのベースラインに合わせられることが原因です。

アルファベット小文字のgやy等で、ベースラインよりも下にはみ出す部分のことをディセンダー（descender）といいます。
このディセンダーは文字だけではなくimg要素にも適用されるので、画像の下に余白ができてしまいます。

ディセンダーはimg要素にvertical-align: text-bottom;
もしくはvertical-align: middle;を指定することで削除できます。

img
{
    vertical-align: text-bottom;
    vertical-align: middle;
}

ちなみに、img要素にmiddleを指定すると、画像の中心を小文字の「x」の中心に揃えることになる。

,
5,676 views