skillup

技術ブログ

JavaScript UI

携帯のUIに関して

投稿日:

いまさらながらスマホのUI表示に苦戦してます。

まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。

私の場合、デザインが本業でないこともあり、ちょっとサボっていましたが、今後の業務アプリだとほぼ必須となってくるだけにこれを機に覚えることに。

ヘッダーの部分

まずスマホ対応で表示させるためにはmetaスクリプトをスマホ用にする。スマホ用のCSS、通常のjQuery、スマホ用のjQueryを読み込む必要がでてきます。

下記をheadタグの中に入れればOKです。

もちろんバージョンはその都度違ってきますので注意。

またjQueryは携帯のものと通常のものの順番が異なると動きません。またjQueryはできればurlを張るのではなく、上記のようにローカルから読み込んだほうが良いです。

これだけでとりあえずUIがかなりスマホ仕様になります。

参考リンク

http://www.html5-memo.com/jquery-mobile/jquerymobile01/

https://appkitbox.com/knowledge/javascript/20131004-66

Formタグの中身

formの内部に関しては下記のようにHTML5のカスタムデータ属性(data-role)を使用します。

またスマホで使用する際にはチェックボックスなどは必ずlabelと対応させましょう。

そうじゃないと押しにくくて仕方ありません。

あとはとにかくリファレンスをみて都度覚えていくことでしょう。

ちなみに参考にしたのは下記書籍です。

jQueryMobile ポケット詳解

またこれはスマホだけに限りませんが、テーブル表示等の場合、

  • 数字は右詰め
  • 日付は中央表示
  • 文字は左詰め

にするのが良いでしょう。

-JavaScript, UI

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …