スマートフォン制作ブログ

inputやtextareaのplaceholder属性に入力した文字列の色を変えたり、その他CSSでスタイルを付加する方法。

placeholderのスタイルは、基本的にinput自体のCSSを無視します。
以下のような疑似クラスでCSSによるスタイリングが可能です。

::-webkit-input-placeholder { color: #F00; }
:-moz-placeholder { color: #F00; }

特定の要素のplaceholderだけ変える場合：

input.search::-webkit-input-placeholder { color: #F00; }
input.search:-moz-placeholder { color: #F00; }

textarea::-webkit-input-placeholder { color: #F00; }
textarea:-moz-placeholder { color: #F00; }

font-size、font-weight、text-shadow、line-heightなど、テキスト装飾系は大抵効くようです。
実機検証は追々・・・。

フォームにあらかじめ薄い色で入力されており、フォーカスもしくは入力開始すると消えるテキストのことを、プレースホルダ―といいます。

以前は（PCサイトでは今も）、これを実現するために、JSでinputのvalueやcolorを操作する必要がありました。
HTML5に対応したスマートフォンブラウザでは、これを非常に簡単なコードで実現することができます。

<input type="text" placeholder="キーワードを入力" />

placeholderという属性に、あらかじめ表示させておきたい文字列を入力するだけです。

placeholderに入力した文字列は、inputのcolorに関わらず、グレーで表示されます。
input要素にフォーカスした時点、もしくは入力を開始した時点で消えます。
inputに何も入力しないままフォーカスを外すと、再びplaceholder属性の値が表示されます。

レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。
第３回は、同一のソースで、PCではテーブル状に、スマートフォンではリスト状に表示するテクニックです。

例えば、同一のソースで、スマートフォンでは上図のように、PCでは下図のように表示させたい場合。

PCのデザインだけ見ると、ついついtableを使いたくなりますが、tableを使ってしまうとスマートフォンで縦組みにすることができません。
そのため、dl要素などを使って、疑似的にテーブルを作ることになります。

１．display：table-cell

最も安直な方法ですが、IEで使えないので却下です。

２．positionを使う

<dl>
<dt>サイト形式</dt>
<dd>ブログ</dd>
</dl>
<dl>
<dt>サイト名</dt>
<dd>スマートフォンサイト制作ブログ</dd>
</dl>
<dl>
<dt>サイトURL</dt>
<dd>http://www.html-five.jp</dd>
</dl>
<dl>
<dt>著者</dt>
<dd>株式会社ミスターフュージョン関西支社<br />スマートフォンサイト制作チーム</dd>
</dl>

.list03 {position:relative; padding-left:100px;}
.list03 dt {position:absolute; top:0; left:0; width:100px;}
.list03 dd {min-height:30px;}

dtをposition：absoluteで固定し、ddの位置をdlの左paddingで調整する方法です。
罫線などは主にdlにかけます。
ddの高さがdtを下回ると崩れるので、必要に応じてddにmin-heightをかけます（IE注意）。

３．ネガティブマージン（負のmargin）を使う

<dl>
<dt>サイト形式</dt>
<dd>ブログ</dd>
<dt>サイト名</dt>
<dd>スマートフォンサイト制作ブログ</dd>
<dt>サイトURL</dt>
<dd>http://www.html-five.jp</dd>
<dt>著者</dt>
<dd>株式会社ミスターフュージョン関西支社<br />スマートフォンサイト制作チーム</dd>
</dl>

#list02 {}
#list02 dt {width:100px; height:30px;}
#list02 dd {min-height:30px; margin-top:-30px; padding-left:100px; }

ddをdtの高さの分だけマイナスのmarginで上に動かして重ね、横位置は左paddingで調整します。
罫線などは主にddにかけます。
dtの高さを固定する必要があり、またddの高さがこれを下回らないようにmin-heightをかけます（やはりIE注意）。
マークアップがシンプルになる反面、dtとddの高さが全て同じでない限り、セルの間の縦罫線を引くことができないという問題があります。

４．floatを使う

これは説明不要でしょうか。最も無難な方法です。
ひとつひとつclearfixをかけなければいけないので、コードはあまり美しくないですね。

余談

本当に余談です。

dl ＝ 定義リストというHTMLの本旨に則れば、
dl要素の中には、定義語（difinition term）と説明（definition description）の組が複数並ぶことが想定されているはずです。

つまり、

<dl>
<dt>AAA</dt>
<dd>あああああああああ</dd>
</dl>
<dl>
<dt>BBB</dt>
<dd>いいいいいいいいい</dd>
</dl>
<dl>
<dt>CCC</dt>
<dd>うううううううううううう</dd>
</dl>

というような、dtとddの組をひとつずつdlで区切るような使い方は、仮にinvalidでないとしても、「HTML的に美しくない」ように私は感じます。

私だけでしょうか。

きっと私だけですね。

私だけでいいです。

だから、個人的には３の手法を好みます。
どうしても２や４を使う場合は、dl / dt / dd 以外のマークアップを使います。

前回に続き、レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。

第２回は、画面幅の小さいスマートフォンに合わせて画像を最適化する方法です。

PCサイトでコンテンツ幅いっぱいの画像を使用しているような場合、スマートフォンでは画面からはみ出してしまいます。
そのような場合の対処方法をいくつかご紹介します。

１．画面幅に合わせて画像を縮小する。

img.liq {width:100%;}

クラス liq をつけた画像は、アスペクト比を維持したまま、親要素の内幅いっぱいまで広がります。
もちろん、画像にwidth要素やheight要素をつけてはいけません。

ただし、幅480px未満（端末によってはもう少し大きくても）の画像は、ランドスケープ時に逆に引き伸ばされて、画像が荒れてしまいます。

そのような場合には、例えば幅400pxの画像であれば、以下のようなスタイルを当てることで、最適化できます。

liq400 {width:100%; max-width:400px;}

親要素の内幅が400px以下なら、親要素の内幅いっぱいまで広がり、親要素の内幅が400pxを超える場合は、幅400pxになります。

問題点
特に文字を含むような画像では、画像をが縮小されて判読できなくなる。
画像のサイズによっては、必要以上にサイズの大きな画像を読み込ませることになり、特に3G回線などでは表示速度に悪影響。

２．背景画像として表示し、CSSで画像を表示し分ける。

HTML
＜span id="multi_img001"＞サンプル画像＜/span＞

PC用のCSS
#multi_img001 {display:block; width:650px; height:300px; text-indent:-9999px; background:url(img/pc/img001);}

スマートフォン用のCSS
#multi_img001 {display:block; width:300px; height:400px; text-indent:-9999px; background:url(img/sp/img001);}

SEO上好ましくないなどの理由で隠しテキストを使いたくなければ、spanの中を空にして、text-indentの指定を外しても構いません。
p要素などの中に入ることを考慮してspanにしていますが、div等でも構いません。

問題点は、汎用性のない id ないし class を大量に定義しなければいけない点でしょうか。

３．JSで画像のパスを書き換える。

＜img src="/img/sp/image001.png" class="splitImg" /＞

if ((navigator.userAgent.indexOf('iPhone') == -1) || navigator.userAgent.indexOf('iPod') == -1) || navigator.userAgent.indexOf('Android') == -1) {
$(".splitImg").each(function(){
pcimg = $(this).attr("src").replace("img/sp/","img/pc/");
$(this).attr("src",pcimg);
});
}

img/pc/ にPC用の画像を、 img/sp/ にスマートフォン用の画像を同じファイル名で格納しておきます。
HTMLにはスマートフォン用の画像のパスを記述しておき、UAがスマートフォンでない場合はPC用のパスに書き換えます。
もちろん、逆の処理でも良いのですが、スマートフォン閲覧時の負荷軽減には、こちらの方が良いですね。

画像の遅延ローディングと組み合わせても良いかもしれません。

４．htaccessで画像を振り分ける

だったらhtmlごと振り分ければいいじゃないかという突っ込みはさておき。

PC/スマートフォンの2段階なら良いですが、画面サイズ等での振り分けができないのが難ですね。
また、ロード後、画面サイズの変化に応じて表示を切り替えるような特殊なレスポンシブには対応できません。

以上、4パターンご紹介しましたが、１と２を必要に応じて使い分けるのが、最も無難かと思います。

レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。
第１回は、意外と落とし穴になりがちな、CSSの振分方法です。

「レスポンシブデザイン」という言葉が随分と定着しました。
ユーザー環境に応じて自動的に最適化されるデザイン、というような意味ですが、大きな焦点となるのは、ワンソースでPCとスマートフォンの両方に対応する、という点でしょう。

以前の記事で、メディアクエリを用いたCSSの振分方法をご紹介しました。

<link media="only screen and (max-device-width:639px)" href="スマートフォン用のCSS" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:640px)" href="PC用のCSS" type="text/css" rel="stylesheet"/>
<!--[if IE ]><link href="PC用のCSS" type="text/css" rel="stylesheet"/><![endif]-->

しかし、この方法では、一部Android端末で不具合が生じる場合があります。

初回アクセスの時だけ、なぜかPC用のCSSが読み込まれてしまう、というものです。
リロードしたり、他のページに遷移すると直ります。
原因は現在究明中ですが、いずれにせよ、メディアクエリを用いた方法は不確実性が残ります。

また、上記の例では、device-widthの閾値を、タブレットの短辺下限の640としていますが、今後、長辺640px（解像度ではなく、device metrix）を超える端末が出て来ないとも限りません。

そこで、以下のように、JavaScriptによってUAを判別し、スタイルシートを当て分ける方法が良いでしょう。

<script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) {
document.write('<link href="./common/sp/common.css" type="text/css" rel="stylesheet"/>');
}else{
document.write('<link href="./common/pc/common.css" type="text/css" rel="stylesheet"/>');
}
})();
</script>

iPad を除外したいのであれば、if 文を以下のようにします。

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0) || navigator.userAgent.indexOf('Android') > 0)

JSもPCとスマートフォンで処理を変える場合は、CSSとJSの分岐条件が相違しないよう注意しましょう。