擬似クラスを使ってレスポンシブなカラムレイアウトを作成する

シンプルなレスポンシブのカラムレイアウトを作成するTipsがあったのでメモしておく。
ブレークポイントで4カラムが3カラムになったり、3カラムが2カラムへというレイアウトを作ることができる。

こちらのサイトの記事を意訳しました。

Responsive Column Layouts 

よくやりがちなのが、並べたカラムの端っこの要素に.firstとか.lastとかクラスをつけること。
でもこれってその要素が常に端っこにあるのが前提だから、レスポンシブデザインには向いてない。

じゃあこれをどうにかうまいことしていく、ってことでまずは完成したデモを見てください。

DEMO

ちゃんとレスポンシブしてる。これをどうやって作るか説明していく。

擬似クラスnth-of-typeを使う。

nth-of-type(An+B)という書き方なら.firstとか.lastといった余計なクラスが必要がなくて便利。

例えば、
.col:nth-of-type(4n+1) と書くと最初の.col要素と、そこから数えて4つ目ごとの.col要素がターゲットになる。(1番目、5番目、9番目…)

.col:nth-of-type(3n+1) なら最初の要素とそこから3つ目ごと、

.col:nth-of-type(2n+1) なら最初の要素とそこから2つ目ごとの要素がターゲットになる。

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
}

メディアクエリを使ってレスポンシブ化する。

レスポンシブデザインにするために、widthやmarginはpxではなく%指定で。

/* col */
.col {
	background: #eee;
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;
}

/* grid4 col */
.grid4 .col {
	width: 22.6%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
}

4カラムを3カラムに変更させる。

ここでは画面幅が740px以下になったら4カラムから3カラムに変化するように設定する。

  1. .grid4 .colで設定しているwidthを31.2%(1/3のwidth)に変更する。
  2. left marginをリセットする。
  3. 3カラムに変化したのでnth-of-type(3n+1)を使ってleft marginを3カラム用にセットしなおす。

@media screen and (max-width: 740px) {
	.grid4 .col {
		width: 31.2%;
	}
	.grid4 .col:nth-of-type(4n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}
}

次は3カラムを2カラムに変化するようにする。

ここでは画面幅が600pxを下回ったら変更するように設定。
手順は先ほどの同じ。

@media screen and (max-width: 600px) {
	/* change grid4 to 2-column */
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* change grid3 to 2-column */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
}

画面幅400px以下になったら全部のカラムを幅100%にしてmarginやfloatも解除するように書く。

@media screen and (max-width: 400px) {
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

これでレスポンシブなカラムレイアウトの出来上がり。

やっぱりIEが問題に。。 orz

ただ、メディアクエリとnth-of-typeの擬似クラスはIE8以下ではサポートされてない。
メディアクエリをサポートするためにselectivizr.jsってやつが、IEでnth-of-typeをサポートするためにrespond.jsってやつがあるけど、一緒に使うとどうもうまく動かないみたい。

スマホやタブレットでIE8使うってこともまずないだろうし、これは切捨てでもOKじゃないかな。

以上、わりとお手軽にレスポンシブデザインが楽しめるので、始めの一歩として試してみるにはいい内容だと思いご紹介しました。

元記事>> Responsive Column Layouts

テキストをシャッフルしながら表示するjQueryプラグインを試してみた。

気になっていたjQueryプラグインを試してみました。
試したのは下記のプラグインで、テキストがランダムにシャッフルしながら表示されていきます。

Shuffle Letters Effect: a jQuery Plugin

ダウンロードしたファイルを元にデモサイトも作ってみました。
IEでは動かないので独自のメッセージを込めました。

デモサイト

以下、カスタマイズのメモになります。
まずはjquery.shuffleLetters.jsの最初のほうを見ていきます。

(function($){

	$.fn.shuffleLetters = function(prop){

		var options = $.extend({
			"step"		: 8,			// How many times should the letters be changed
			"fps"		: 10,			// Frames Per Second
			"text"		: "", 			// Use this text instead of the contents
			"callback"	: function(){}	// Run once the animation is complete
		},prop)

この後にもまだ同じ関数の記述がずーっと続きますが、まずはここでテキストシャッフルのスピードや回数を調整しています。

そして同ファイルの最後にあるrandomChar()でシャッフルに使うテキストを設定しています。

	function randomChar(type){
		var pool = "";

		if (type == "lowerLetter"){
			pool = "abcdefghijklmnopqrstuvwxyz0123456789";
		}
		else if (type == "upperLetter"){
			pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
		}
		else if (type == "symbol"){
			pool = ",.?/\\(^)![]{}*&^%$#'\"";
		}

		var arr = pool.split('');
		return arr[Math.floor(Math.random()*arr.length)];
	}

script.jsではまず変数の宣言をします。この変数hHTML内のid要素に対応しています。

$(function(){

	// container is the DOM element;
	// userText is the textbox

	var container = $("#container")
		userText = $('#userText');

あとはサイトを開いて4秒経つとsetTimeout()内の処理が実行されます。

	setTimeout(function(){

		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": "Test it for yourself!"
		});

		userText.val("type anything and hit return..").fadeIn();

	},4000);

例えば4秒ごとにエフェクトさせて新たな文字列に変化させたい場合は、setTimeout()を新たに追加して引数の4000を8000とか12000とか増やしていけばOKです。
本当は繰り返し文を使ってスマートに出来るのでしょうが、僕はそこらへんまだよくわかってないので今回は下記のようなソースを書いてみました。

	// Leave a 4 second pause

	setTimeout(function(){

		// Shuffle the container with custom text
		container.shuffleLetters({
			"text": "It is done, successfully!"
		});

		userText.val("type anything and hit return..").fadeIn().shuffleLetters({
			"text": "日本語入力の表示を確認"
		});

	},4000);

	setTimeout(function(){

		userText.shuffleLetters({
			"text": "It is done, successfully!"
		});

		userTextb.val("type anything and hit return..").fadeIn().shuffleLetters({
			"text": "3行目のテキストです。"
		});
	},8000);
	setTimeout(function(){

		userTextb.shuffleLetters({
			"text": "It is done, successfully!"
		});

	},12000);
	setTimeout(function(){

		container.shuffleLetters({
			"text": "The event is set to start by 4 seconds."
		});

		userText.shuffleLetters({
			"text": "You can adjust anylong you want."
		});

		userTextb.shuffleLetters({
			"text": "Test it for yourself!"
		});

	},16000);

めちゃくちゃ冗長な感じでわかりずらいですね。。。 精進します!
それでもこうやって動くものが作れるとなんだか嬉しいものです。

parallax.jsをいじってパララックスのデモ作ってみた。

ちょっと前に視差効果のあるパララックスサイトまとめなどがよくホットエントリーに上がってきて、「自分もこんなの作ってみたいなー」と思っていたのでトライしてみました。

チュートリアルは下記サイトを参考にしています。
話題になったNikebetterworldに良く似たサイトを作って解説をしてくれています。

Nikebetterworld Parallax Effect Demo

そして出来あがったのはこちらのデモサイトです。
以下、メモがわりの解説です。

まず、チュートリアルのサイトからサンプルファイルをダウンロードしてHTMLをみると次のようなjsファイルが読み込まれているのがわかります。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="scripts/nbw-parallax.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script><script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="scripts/jquery.inview.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){     $('#nav').localScroll(); })
// ]]></script>

parallax.jsはスクロールバーの位置に応じて各divごとの背景画像を制御していて、inview.jsはユーザーウインドウが表示している範囲を判定しているみたいです。

localscrollとscrollToってファイルは右のほうに表示されるナビゲーションをうまく動かすのに必要っぽいです。

細かいことは僕もよくわかっていないのですが、主に触るのはparallax.jsになります。
内容を見て行きましょう。

	var $window = $(window);
	var $firstBG = $('#intro');
	var $secondBG = $('#second');
	var $thirdBG = $('#third');
	var $fourthBG = $('#fourth');
	var trainers = $("#second .bg");

20行目辺りに上のような変数が宣言されています。
これはHTMLの各divと対応しています。動かしたい要素を増やすときはHTMLのdivと一緒にこちらで宣言する変数も増やします。

そして色んな関数をごにょごにょして各要素のスクロールスピードを調整してパララックス効果を生み出します。

	/*arguments:
		x = horizontal position of background (背景の横位置を決める)
		windowHeight = height of the viewport (ユーザーのデバイスの高さ)
		pos = position of the scrollbar (スクロールバーのポジション)
		adjuster = adjust the position of the background (背景の位置を決定)
		inertia = how fast the background moves in relation to scrolling (背景を動かすスピード)
	*/

キモとなっているのは50行目あたりのコメントにあるadjusterやinertiaなのですが、これらが下記記載の関数の引数になっており、うまく設定するとパララックス効果が得られます。

		//if the second section is in view...
		if($secondBG.hasClass("inview")){
			//call the newPos function and change the background position
			$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6)});
		}

parallax.jsのなかで各セクションごとに上記のような処理が行われていると思いますが、ここでは一番パララックス効果の分かりやすい、2番目のセクションの処理を例に出しています。

newPosという関数の引数の、inertia(ここでは0.3とか0.6と書かれている数値)を変更すると背景の動くスピードが変化します。

1が通常のスクロールスピードと同じで、このサイトではセクション背景を0.3、スニーカーの画像部分に0.6を設定することでスクロールスピードを変えて視差効果を生み出しています。

今回作ったデモサイトでは2番目のセクションにdivをもうひとつ増やしてみました。
HTMLのdivを増やした場合はそれに対応した変数宣言や処理をparallax.jsに追加すればパララックス効果が得られます。要素ごとの重なりを表現する場合はcssのz-indexで調整します。

あと、上記ソースの1250とか1900という数値は背景画像のスタート位置を決定するものらしいのですが、うまく設定しないと画像が見切れたりします。

色々試してちょうどいいポジションを見つけてみてください。

【CSS】div内の画像を縦横中央に配置する。

仕事で使ったのでメモ。
こちらの記事を参考にさせて頂きました。

やりたかったのは以下の2点。

  • ひとつのdiv内に1枚画像を配置して同じようなボックスを並べたい。
  • 画像のサイズは様々だけど、div内の縦横中央に配置したい。

単純な問題なんですけど、ググってみてもなかなかちょうどいい解決法が見つからない。
そんな時に、もう本当に求めていたそのまんまの答えを教えてくれたのがこちらの記事でした。 本当に助かりました。

以下、引用。

一応仕様としては
1.HTMLを汚さない、余計なタグは書かない
2.ハックを使わない
3.IE6、IE7、IE8、その他モダンブラウザ対応
4.imgはどんなサイズでも囲うdivの上下中央に配置する
こんなとこですかね

で早速答えは

【HTML】

&amp;lt;div&amp;gt;&amp;lt;img src=”images/src.jpg”  alt=”img” width=”100″ height=”50″ /&amp;gt;&amp;lt;/div&amp;gt;

【CSS】

div {
    width:300px;
    height:200px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    layout-grid-line:200px;
}

div img {
    vertical-align:middle;
}

こんだけ

ポイントはIE独自仕様のlayout-grid-lineで高さを与えることとdiv内のimgにvertical-alignを与えることの2つ
js使ったりハック使ったりする必要もなくソースも汚れないので
色々と使える小技です

layout-grid-lineの代わりにline-heightを使ってもできるみたい。