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

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

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

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