スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

レスポンシブが主流になった昨今ですが、
レスポンシブはコンテンツ幅に関わらずあらゆるデバイスでダイナミックな表現を実現するメリットがあります。
今回、そんな中でのテクニックを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チェックを通らない場合がありますので、場面に応じて使いわけたほうがよいかもしれませんね。

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

eclipseに代わるWeb統合開発環境として以前から「Brackets」を検討していのですが、思い切って乗り換える事にしました。
Brackets – A modern, open source code editor that understands web design.

eclipseは私がJavaプログラマだった頃から愛用していて、それに慣れていたということもあり、Web業界に入ってからも利用し続けていました。
しかし、jQuery、WordPress、HTML5、CSS3やSassなど新技術への対応がいまいちです。プラグインを入れたり、細かく設定すればよいのですが、それが面倒なこともあります。がんばった割には完全に機能させることができずに四苦八苦というこの頃でした。
そして何より動作が重い。やたらメモリを消費するので、最近のモバイルPCでの開発には向いていません。

そこで、以前から話題になっていた「Brackets」に注目していました。

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などのタブレット用のサイト対応もコストを抑えることができます。

Windows上のXAMPPのローカル開発環境で、eclipseを使ったPHPプロジェクトのリモートデバッグ環境を構築します。

前提条件として、各々のバージョンは以下の通りで、既にインストール済みとします。

  • Windows 7 Professional 64bit
  • PHP 5.5.11
  • XAMPP 1.8.3
  • xDebug 2.2.3
  • eclipse 4.3

PHPとxDebugはXAMPPに含まれているものをそのまま活用するので、個別に用意する必要はありません。

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

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

tableコーディングの問題点

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

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

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

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

PHPをベースにしたWebシステム上では扱えるファイルサイズに制限があります。
ファイルサイズの制限をなくして、無制限にファイルをアップロードを許可するとメモリエラーなどに障害が発生するためです。
だからといって制限をきつくすると都合が悪い場合があります。

例えば、phpMyAdminでデータをインポート、エクスポートする場合、SQLの書かれたテキストファイルをアップロードすることがあるのですが、ファイル容量の制限エラーのためデータを移せない問題があります。

また、WordPressで高解像度のフォトギャラリーなどを構築する場合、画像ファイルの容量制限のため、ファイルをアップロードできない場合があります。

これらの解決策として、PHPの設定を変更して制限を緩和します。

Monthly Archives