HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

スマートフォン専用のサイトを構築した際に、PCでスマートフォンサイトを閲覧してほしくない、逆に、スマートフォンでPCサイトを閲覧をしてほしくないといった要件は少なくありません。

Webページにアクセスしてきた端末情報を判定し、リダイレクトさせてしまえばいいのですが、その手法でも「.htaccess」を使ったり、javascriptやPHPを使ったりといくつか方法があります。

今回はjavascriptを使った方法を紹介します。

レスポンシブが主流になった昨今ですが、
レスポンシブはコンテンツ幅に関わらずあらゆるデバイスでダイナミックな表現を実現するメリットがあります。
今回、そんな中でのテクニックを1つ。

例えば、横幅が800pxのコンテンツエリアをもつサイトがあると仮定します。
そこに1000pxの画像を設置すると、ブラウザの横スクロールが表示されてしまい、コンテンツの中央がずれてしまいます。

※当サイトはコンテンツエリア指定のないレスポンシブサイトなので、十分に再現できていません。すみません。。

画像を背景として設置するのも1つの解決策ですが、
コンテンツとして画像を設置したい場合に、以下の方法があります。

レスポンシブ対応のサイトにGoogle Mapsを設置する方法です。

Google Mapsの埋め込みコードをそのまま設置すると、レスポンシブサイトの画面サイズを変更した際に、地図表示エリアが画面をはみ出したり、他のコンテンツに重なったりと、表示崩れが発生します。

そこで、以下のようにレスポンシブ対応することで崩れを回避することができます。

<div id="map_canvas">
<iframe...(埋め込みコード略).../iframe>
</div>
#map_canvas{
	position: relative;
	padding: 0 0 56%;
	height: 0;
	overflow: hidden;
}
#map_canvas iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

レスポンシブなので、サイズを横幅100%に対しての縦幅を「padding-bottom: 56%;」の割合で指定しています。
ここでは16:9のサイズを想定して9/16≒0.56で計算しています。

以下は、実際に貼り付けた例です。

ちなみにJavaScript APIで設置する場合、iframeにあたるタグには「position: absolute;」などのスタイルが効いているため、以下のようにするだけでレスポンシブ対応が可能です。

(APIを呼び出すJavaScriptコード略)
	var map = new google.maps.Map(document.getElementById("map_canvas"),
#map_canvas{
	position: relative;
	padding: 0 0 56%;
	height: 0;
	overflow: hidden;
}

※「#map_canvas」直下のタグに「position: absolute;」などのスタイルが効いている

半角英数で、途中にスペースのない長い文字をHTMLに書くと、ブラウザはそれを「1つの単語」と認識して改行してくれません。
具体的にはこういう感じ↓

abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345

ちなみに日本語など全角文字であれば、どのタイミングでも改行してくれます。2バイト文字は複雑で、種類も多く、「単語」とは判定しづらいんでしょうね。

さて、この問題、これまでだと、PHPで無理やり処理して、1文字毎に空文字やスペースをサンドイッチ状に挟みこむことでごまかして改行したり、クライアントに対して「そんな長い単語ないでしょ」で説得したり、妥協ともいえる方法で片付けてきました。
しかし、調べてみるとあっさりとした解決法が見つかりました。CSSのword-wrapプロパティです。

例えば以下のように指定してあげます。

.sample{
	word-wrap: break-word;
}

そうすると、先ほどの文字列がこのようになるんですね↓

abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345abcde12345

簡単ですね。IE6、最新のFirefox、Google Chromeでも問題ないようです。
しかし、このプロパティはCSS3のプロパティを先行採用したものらしく、validationチェックを通らない場合がありますので、場面に応じて使いわけたほうがよいかもしれませんね。

いや、でもやっぱりそんな長い単語はないでしょう。

IEやChromeなど一部ブラウザで、スタイルでフォントサイズをピクセルなどで指定すると、ブラウザの文字サイズ変更機能が効かなくなるという問題があります。解決策としては、フォントサイズをパーセントで指定すればよいのですが、構築の際に毎回「○○pxは何%だっけ?」と調べることが多いので、ここで一覧としてまとめてみます。

こちらでは以下の環境で検証した結果を一覧としています。

  • OSはWindows7 64bit Professional
  • IE8以上、Firefox最新版、Google Chrome最新版(IE6、IE7は切り捨て)
  • フォント指定は「メイリオ」

最近よく耳にするようになったBootstrapをインストールしてみました。
Bootstrap

BootstrapはHTML、CSS、Javascriptをベースとしたフレームワークで、活用することでコーディング作業を軽減することができます。

これまで、クロスブラウザのために、reset cssやjQueryなどのベースライブラリが開発されてきましたが、こられのしくみをまとめて、パッケージ化したものと考えればイメージしやすいかもしれません。(jQueryについてはBootstrap導入に必須です)
Bootstrapを活用して開発を進めれば、レスポンシブ対応も可能で、iPhoneやAndroidのモバイル端末、iPadなどのタブレット用のサイト対応もコストを抑えることができます。

高さが動的な要素について、そのエリアの上下(高さ)中央にテキストや画像を置きたい場合があります。

tableを使えば簡単に実装できますが、いくつか問題点があります。
そこで、「line-height」と「translateY」を利用した方法を紹介します。
しかしどれも万全とはいかないので、他に方法があればご教授いただけると大変助かります。

tableコーディングの問題点

容易な方法としては以下のようtableタグを使う方法がありますが、「テーブルコーディング」という言葉があるようにソースがあまりきれいではありません。

ホームページ制作においてダミー画像などを作成する場合がありますが、「placehold.it」を利用すると便利です。
Placehold.it – Quick and simple image placeholders

バナーなどがまだ確定していない状態でホームページをテストアップする場合に、PhotoshopやFireworksなどグラフィックソフトでダミー画像を作成することがあります。
ダミー画像が多い、サイズが様々、変更が多い時などは、その作業がめんどくさいです。

そんな時に「placehold.it」を利用すれば、コードを書くだけでダミー画像が生成できるので便利です。

jQueryでブラウザのスクロールに追従するサイドメニューを構築します。
以前にもこのネタに何度か触れましたが、だいぶ古い情報になってしまいました。

jQueryプラグイン「jQuery Scroll Follow」でスクロール追従メニューを作る

そこで、今回は私が最近活用している、jQueryベース、プラグインなしの手法を書き留めておきます。

スタイルを用意する

例えばスクロールに追従させたい要素のidがsidemenuの場合、以下のようなスタイルを用意します。

「ページトップへ」のボタンを押した時に、縦スクロールしてページのトップまで戻るjQueryのライブラリを、以前に紹介しましたが、今回はよりシンプルにjQueryのみで実装する方法です。

jQueryでページ内リンクをスムーズスクロール

前回は「ScrollTo」というライブラリを使用した方法でしたが、もうだいぶ古い情報なので、他に方法はないかと調べていたところ、何のことはない、ライブラリは不必要なのです。

あの頃は私もjQuery 1年生だったので、何でもかんでもライブラリを引っ張ってきていました。今は最低限の知識は得たつもりですが、その程度で十分に実装可能です。

方法はとても簡単です。「ページTOPへ」のクリックイベントに対して、以下のJSを組み込むだけです。

Monthly Archives

Search