レスポンシブWebデザインを実装するためのTips

「レスポンシブ」って単語を知らない人でも、ウィンドウをウィンウィンさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね~」とか言っちゃうアレです。
どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら1サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない?

スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄
何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ????????
とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。

“レスポンシブWebデザインを実装するためのTips” の続きを読む

スクロール催促ボタンとページトップへ戻るボタンの出し分け

See the Pen GoToTop by Tenderfeel (@Tenderfeel) on CodePen.

某サイトで使っているボタンを要点だけ切り出してみた。

以下が指定された挙動だった:

  • 初期状態は下へスクロールするボタン
  • ファーストビューが消えるくらいスクロールしたらトップへ戻るボタンにする
  • フッターにトップへ戻るボタンを被せない

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

“[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい” の続きを読む

[HTML5] アプリケーションキャッシュの使い方

アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、
表示の高速化やオフラインでの動作を可能にするものです。
ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。
特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。

“[HTML5] アプリケーションキャッシュの使い方” の続きを読む

[js] iframeからのアクセスかブラウザでの直アクセスか判別する

同タイトルの質問より。
もうちょっと具体的にソースを書いてみる。

index.html(フレームを呼び出すページ)

iframeのsrc属性で、ファイル名に続けて適当にパラメーターをつける。

<iframe src="inner.html?frame=true"></iframe>

inner.html(フレームの中ページ)

JavaScript

<script type="text/javascript">
(function(){
	 if(location.search.indexOf("frame=true")!==-1){
		document.write("フレームからの呼び出しです");
	}else{
		document.write("直接アクセスしています");
	}
})();
</script>

JavaScriptの場合、パラメーターはlocationで拾えるのでindexOfとかmatchとかで調べる。
イベントハンドらはwindow.onloadとかでもいい。

コンテンツを非表示にしたいならstyleを弄るのが楽かな~。

<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
	<meta charset="UTF-8">
	<title>inner.html(フレームの中ページ)</title>
	<script type="text/javascript">
	(function(){
		 if(location.search.indexOf("frame=true")!==-1){
			document.body.style.display="block";
		}
	})();
	</script>
	<style type="text/css">
		body{display:none}
	</style>
</head>
<body>
<h1>iframeからのアクセスかブラウザでの直アクセスか判別するテスト</h1>
<div style="background:#eee;height:400px">インラインフレームから見てね!</div>
</body>
</html>

PHP

<?php
if(isset($_GET&#91;"frame"&#93;)&&$_GET&#91;"frame"&#93;==ture){
	print "フレームからの呼び出しです";
}else{
	print "直接アクセスしています";
}
?>

PHPの場合はグローバル変数$_GETにパラメータがあるかどうか調べる。

PHPでコンテンツを見えなくするならページの先頭でdieしてしまうのが早いかな。

<?php
if(isset($_GET&#91;"frame"&#93;)&&$_GET&#91;"frame"&#93;!=ture){
	die("トップページからアクセスしてください");
}
?>
<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
	<meta charset="UTF-8">
	<title>inner.html(フレームの中ページ)</title>
</head>
<body>
<h1>iframeからのアクセスかブラウザでの直アクセスか判別するテスト</h1>
<div style="background:#eee;height:400px">インラインフレームから見てね!</div>
</body>
</html>

location.href=”index.html”とかheader(“location:index.html”)とかで強制的に飛ばしてもいい。

[css] contentプロパティで挿入できるコンテンツ

clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、
:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

挿入出来るモノ

大きく分けると3つです。

  • テキスト
  • プロパティの値
  • 画像

“ contentプロパティで挿入できるコンテンツ” の続きを読む

[PHP] ページング機能の仕組みとか作り方とか

ページング機能というのは、「複数に分かれたページの前後ページへ移動するためのナビゲーションリンク」のことで
このブログにも下の方に次のページへ移動させるためのページ番号リンクがありますよね。それです。
名称はページングだったりページネーションだったりしてますが、海外だとpaginationの方が一般的なようです。

先頭の何ページ目かまではページ番号、それ以上は三点リーダーとかでぼかしたりするGoogleライクなものや、
前後への矢印だけしか表示させなかったりするものなど、スタイルは色々ありますが
これが自作しようとすると結構面倒臭い。そしてプログラミング初心者だとまず仕組みが良く分からない。
結構よく使うのに作り方や仕組みの解説をあんまり見ない気がするので書いてみます。

10周年記念にVue.js版を書きました!
[Vue] ページネーション機能の作り方とコンポーネント作成入門

2019/09/12 Vue版に合わせて全面的に書き換え&動作サンプル追加しました
“[PHP] ページング機能の仕組みとか作り方とか” の続きを読む

[mootools]slideBox ver1.0をマウスホイールに対応させる

スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。
デフォルトだと矢印のクリックでスクロールするんだけど、
基本的なスクロール量は表示エリアの高さ(class-wrapper)と同じだから、マウスホイールで微調整したくなる場合もある。

使い方はファイル落とせば分かると思うので省略。

オプションは次の通り

options: {
	className:'slide',			// スライドするエリアのクラス名
	prevArrow:'-previous',		//前にスライドする矢印の接尾語
	nextArrow:'-next',		// 後にスライドする矢印の接尾語
	removeArrows:true,		//先頭と最後にスクロールしたとき矢印消すかどうか
	fadeArrows:false,			// 矢印にフェードエフェクトつけるかどうか
	startOpacity:0.5,			//フェードエフェクトがスタートした時の矢印の透明度
	endOpacity:1,			//フェードエフェクトが終わった時の矢印の透明度
	mouseoverBox:true,		//スライダー内にあるULとLI要素にクラスを追加するかどうか
	startClass:'normal',		// マウスアウト時に追加するクラス名
	endClass:'over',			//マウスエンター時に追加するクラス名
	speed:5,				//スクロールスピード(10:fast 1:slow)
	transition:Fx.Transitions.Quart.easeOut //スクロールのトランジション効果
},

カスタマイズ部分のソースのみ掲載してます。
“[mootools]slideBox ver1.0をマウスホイールに対応させる” の続きを読む

[jQuery]サムネイルクリックで画像変更(+effect)

前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。

動作にはjQuery1.2.6が必要です。

“[jQuery]サムネイルクリックで画像変更(+effect)” の続きを読む

[WP]AutoExternalLinkプラグイン修正

inoccoさんが作成されたリンクに新しいウィンドウを開くアイコンを自動で追加するプラグイン
AutoExternalLinkをVicuna用に修正してみた話。

プラグイン添付のjsファイルはLogJETさんが作成されたそうなんですが、

  1. 表示エリアが見つからなかったときにエラーが出るのを直しておきたい。
  2. クラス名を2つ3つ並べて指定するとアイコンが出ないので、それもなんとかしたい。
  3. 今使ってるVicunaではヘッダにリンクを貼るとアイコンが出るので、hn要素以外のaタグに追加したい。
  4. iG:Syntax Hiliterのソースにはアイコン出ないようにしたい。

そのまま使えなかったので変えてみますた。
修正箇所は次の通りです。

“[WP]AutoExternalLinkプラグイン修正” の続きを読む

[JS]Table内セルを自動的にストライプにする

1行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、
いちいちclass追加してると面倒なのでjavacript使った方が早いよね。
っていうことでそういう感じのことをするスクリプトのサンプル。

左:1行間隔でセルの背景色変える
右:3行間隔で線を引く

“[JS]Table内セルを自動的にストライプにする” の続きを読む

[js]ロールオーバー+見てるページのメニュー画像変更

メニュー画像をロールオーバーさせつつカレントページはon状態にするスクリプト。

見てるページのメニュースタイルを変更する
ロールオーバースクリプト(画像名のOn/Offで判別)を足したソースです。
プリロードはついてません。


“ロールオーバー+見てるページのメニュー画像変更” の続きを読む

[js]メールアドレスを自動収集されないように表示する

放置してたメールボックスを受信してみたら1000通もスパムが溜まってた。さすがに驚いた。

スパマーはWebサイトに記載されてるメアドをgoogleのクローラのようなbotで拾っていくとか。
直接メアド書くのは最早時代遅れとなりつつあり、お手軽な方法としてはエンティティ化が流行ってる様子。
でも唐突にエンコード文字があると逆に怪しいと思うんだけどどうでしょう。
個人的にはあのクソ長い文字の羅列はあまり好きじゃない。ソフトが勝手にデコードしたりするし。

そこでmailtoリンクつきのメールアドレスをスタイリッシュにjavascriptで表示するサンプルを。
前にmootoolsで書いたけど、今回は普通のjavascriptで。

“メールアドレスを自動収集されないように表示する” の続きを読む

[JS]設定した期間だけNEWを表示する

新着記事にNEWをつけたりする感じのもののサンプル。
PHPで書いたやつをJavascriptで書いてみる。

function Mark(){
	var date ="2008/04/01";//ログの年月日
	var interval ="4" //表示期限
	a = new Date();
	b = Date.parse(date)+ (parseInt(interval) * 24 * 3600 * 1000);
	c = a.getTime();
	if(b>=c) document.write("New");
	else document.write("Old");
}

“[JS]設定した期間だけNEWを表示する” の続きを読む