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

スマホサイト制作において役に立ちそうなツールを見つけたのでご紹介します。

クロスブラウザテスト、携帯シミュレータ | Adobe Edge Inspect

Webサイト制作のコストとして、クロスブラウジングというものがあります。
作成したWebサイトがいかなるOS、ブラウザ上でも同等のコンテンツを提供できているか保障しなければなりません。(厳密に全く同じように見えているのかという事ではなく、同等のコンテンツ内容を提供できているかというのがポイント。)

最近ではスマートフォンの普及が加速し、これらの端末でもきちんとWebが表示するように制作時には設計する必要があります。スマホの種類も日々急速に増え続けているので、その確認作業コストは増加傾向にあります。

iPhoneやAndroidのブラウザでサイトにアクセスした際に、ファーストビューでヘッダ部分にページURLなどの情報を持ったアドレスバーが表示されたままになります。

address_bar
上の写真のようにヘッダにアドレスが表示された状態になっていますね。
この状態からフリックして画面を下にスクロールすると、アドレスバーは消えます。

スマートフォンは画面サイズが小さく、その限られたスペースにアドレスバーが居座るのを嫌うユーザもいます。特にデザイナは、ファーストビューでそのサイトデザインとは関係のないアドレスバーがヘッダに表示されるのはあまり気分が良くないようです。

10px程度の斜線の画像を用意し、それを背景に繰り返し表示してボーダー装飾しているサイトをよく見かけます。
今回、それを画像を用いずにCSS3だけで実現してみます。

まず、線形グラデーションを使ってラインを引きます。

 

25%、50%、75%のポイントで黒、白の両方を指定することで、グラデーションの境界を切り替えます。
クロスブラウザ対策で「-webkit-gradient」と「-moz-linear-gradient」を指定すると、CSSは以下のようになります。

最近話題の「レスポンシブWeb」。
近年、スマートフォンの普及が加速して、Webの世界でもスマフォ最適化の必要性が叫ばれています。
そんな中、PCサイトとは別でスマホサイトを立ち上げる話はよくありますが、それよりも一歩先を見据えた考え方がレスポンシブWebです。
レスポンシブWebでは、PCやフマフォといった各端末において、HTMLソース1つで最適なインターフェースを提供するという考えがベースとなっています。(正確にはあらゆる画面サイズに対応する考え)

具体的には、まず画面サイズを取得して、画面の横幅に応じてスタイルを切り替える事で、さまざまなな端末に対してWebサイトを最適表示します。
説明するよりも実際に画を見てみると分かりやすいでしょう。以下のサイトでレスポンシブWebのサイトがまとめられています。
Media Queries

日本国内のサイトでは、まだあまり見かけませんが、海外のサイトではその例が着実に増えているようです。

HTML5+CSS3でデザインの表現の幅が広がりました。簡単なグラデーションや角丸ならCSSのみで表現できます。
しかし、検索を表す虫眼鏡やメールを表す封筒のアイコンなど、これらのイラストをCSSのみで表現するのはさすがに難しいです。
将来的に画像レスでデザインされたサイトなんて夢のまた夢なのかなと、そんなことを考えていたら、以下のようなサイトを発見しました。

Fontello – easy iconic fonts composer

こちらのサイトに掲載されているアイコンのイラストを、画像としてではなく、文字(ウェブフォント)として扱うことができます。

iPhoneに対してlabel要素を設定していも、選択エリアが広がりません。今回はその対応策について考えてみました。

例えば、フォームのラジオボタンやチェックボックスなどは、デバイスや画面サイズによっては操作しづらい事があります。そのような場合は、label要素で囲む事で、その囲まれたエリアをイベント領域として確保します。

例えば、以下のようなコードを用意してみました。

<input type="checkbox" />labelなしです<br />
<label><input type="checkbox" />labelありです</label>

そうすると、以下のような表示になります。
labelなしです

labelありだと、要素囲んだ「labelありです」の文字列の部分で、チェックのオン/オフができるので、操作性が上がりますね。
このように、フォームを組む際にユーザビリティとしてlabelを導入するのは、ここ最近は常識になっていますね。

しかし、iPhoneだと、このlabel要素が効きません。

jQueryでオブジェクトのアニメーションなどを実装する場合に「jquery.easie.js」を使って動きを滑らかに表現することができます。
jquery.easie.js

以前に、jQueryのイージングプラグインを紹介しましたが、「jquery.easie.js」の方がより直観的で、容易にカスタマイズが可能です。
「jQuery Easing Plugin」でjQueryのアニメーションにイージング効果をつける

今回は技術的なお話ではなく、Webの将来について考えてみたことを書き留めてみたいと思います。

Web制作では日々のお仕事でデザイン、コーディングというフローを淡々とこなしているわけですが、これが10年、20年と続けられるものなのかという話しがよく出ます。
「Webの業界は進展がめまぐるしいので、これが永遠と続くとは考えづらい。」
「どんなに時代が発展したとしてもベースとしてこの作業フローは残る。」
など、いろいろと意見は飛び交いますが、たいてい漠然とした話題で終始します。

そこで今回、近い将来、デザインとコーディングという業務に最も影響を及ぼすであろうCSS3について、具体的に考えてみました。

iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。
リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。

しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。
長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。
例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。

iPhoneサイトを構築する際のviewport設定について、以前に記事を書きました。
スマートフォンの画面サイズとフォントサイズ
今回、この設定で構築したサイトで1つ問題が発生しました。

iPhoneのブラウザでサイトを閲覧したときに、横にスクロールしてしまうという問題です。

言葉だけではうまく説明できないので、以下に図を示します。
viewport

※図はダミーです。Yahooさんのサイトで実際にはこうなりません。

Monthly Archives

Search