Html-five - html-five.jp - スマートフォンサイト制作ブログ
General Information:
Latest News:
「恋学」 大人のための恋活情報サイト（ベンチマーク） 31 Jul 2013 | 05:20 am
恋学 – 大人の女性の恋活、婚活を応援するためのサイト 「恋学」＝「恋を学ぶ」というコンセプトで、最近公開されたサイトです。 「恋学」はおろか、「恋活」という言葉も聞きなれない方も多いと思います。 通常SEMといえば、既に市場に存在する検索キーワードを探し、 SEOやリスティングで上位に上げるのが王道です。 しかし、このサイトを運営する株式会社リンクバルさんは、 「街コン」「街バル」な...
placeholderの色を変える、CSSでスタイルを付加する。 14 Oct 2012 | 11:22 pm
inputやtextareaのplaceholder属性に入力した文字列の色を変えたり、その他CSSでスタイルを付加する方法。 placeholderのスタイルは、基本的にinput自体のCSSを無視します。 以下のような疑似クラスでCSSによるスタイリングが可能です。 ::-webkit-input-placeholder { color: #F00; } :-moz-placehold...
フォームにあらかじめ入力されており、フォーカスすると消えるテキスト 13 Oct 2012 | 11:10 pm
フォームにあらかじめ薄い色で入力されており、フォーカスもしくは入力開始すると消えるテキストのことを、プレースホルダ―といいます。 以前は（PCサイトでは今も）、これを実現するために、JSでinputのvalueやcolorを操作する必要がありました。 HTML5に対応したスマートフォンブラウザでは、これを非常に簡単なコードで実現することができます。 <input type="text" pl...
レスポンシブデザイン・コーデイングTIPS（３）tableを使わない表組み 30 Sep 2012 | 10:20 pm
レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。 第３回は、同一のソースで、PCではテーブル状に、スマートフォンではリスト状に表示するテクニックです。 例えば、同一のソースで、スマートフォンでは上図のように、PCでは下図のように表示させたい場合。 PCのデザインだけ見ると、ついついtableを使いたくなりますが、tableを使ってしまうとスマートフォンで縦組み...
レスポンシブデザイン・コーデイングTIPS（２）画像の最適化 28 Sep 2012 | 05:20 pm
前回に続き、レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。 第２回は、画面幅の小さいスマートフォンに合わせて画像を最適化する方法です。 PCサイトでコンテンツ幅いっぱいの画像を使用しているような場合、スマートフォンでは画面からはみ出してしまいます。 そのような場合の対処方法をいくつかご紹介します。 １．画面幅に合わせて画像を縮小する。 img.liq {...
レスポンシブデザイン・コーデイングTIPS（１）UAによるCSSの切り替え 26 Sep 2012 | 07:30 pm
レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。 第１回は、意外と落とし穴になりがちな、CSSの振分方法です。 「レスポンシブデザイン」という言葉が随分と定着しました。 ユーザー環境に応じて自動的に最適化されるデザイン、というような意味ですが、大きな焦点となるのは、ワンソースでPCとスマートフォンの両方に対応する、という点でしょう。 以前、こちらの記事で、メ...
【iOS6対応版】AndroidとiOSの両方に対応したGoogle Mapアプリの起動方法 25 Sep 2012 | 06:59 pm
iOS6より、地図アプリ起動の仕様が変更になり、ワンソースで全てのスマートフォンの地図アプリを起動する方法がなくなりました。 JS（jQuery）を用いた対処方法をご紹介します。 以前、iPhone/AndroidでGoogle Mapアプリを起動する方法で、Android・iPhone両方に対応したGoogle Mapアプリの起動方法として、 href="http://maps.googl...
スマートフォンサイト制作とiPhone5・iOS6 24 Sep 2012 | 06:35 pm
9/21に発売されたiPhone5と、それに伴いアップデートされたiOS6関して、スマートフォンサイト制作上対応が必要と思われる点をピックアップしました。 iPhone 5 について スマートフォンサイトの制作上影響があるとすれば、ディスプレイサイズくらいでしょうか。 解像度が 640px × 1136px 。 Device Pixel Ratio が 2.0 なので、Device Wid...
CSS3のブラウザ対応とプレフィクスの必要性 25 Jul 2012 | 02:13 am
現行のスマートフォンブラウザはCSS3にどの程度対応してるのか。 CSS3のプレフィクスは、どこまで必要なのか。 Fire Fox For Mobileの挙動を含め、改めて検証してみました。 検証結果 OS iOS5.1 Android2.3 Android2.3 Android2.1 ブラウザ SAFARI ブラウザ FireFox ブラウザ liner- garad...
Androidで全くスクロールできないバグ 24 Jul 2012 | 06:21 am
Androidで、画面が初期表示位置から全くスクロールできなくなるバグに遭遇しました。 Youtubeの埋め込みに使用しているiframeが原因でした。 バグの再現条件 １．HTML内のどこかにiframeが用いられている。 ２．ひとつ以上のiframeが非表示になっている。 ３．Android端末 ２について詳述すると、 iframeそのものが、cssで非表示になっている。 ...
