skillup

技術ブログ

JavaScript UI

携帯のUIに関して

投稿日:2015年9月7日 更新日:

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

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

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

ヘッダーの部分

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

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

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

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

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

参考リンク

jQuery Mobileってなに?

Formタグの中身

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

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

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

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

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

jQueryMobile ポケット詳解

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

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

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

-JavaScript, UI

執筆者:


comment

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

関連記事

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 【JavaS …

no image

vueの環境構築

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

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

no image

CSSで背景画像の出力 ~透過編~

前回CSSで大きな背景画像のなかにhtmlを置く方法をメモしたんですが、背景画像を透過させたいときなどのメモを書いておきます。 一般的に画像の透過といえばCSSでopacity:0.6とかやれば簡単な …

no image

非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。 非同期通信に関しては長い間、$.ajaxを使っておりました。 フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパタ …

アーカイブ