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

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

検索ページの遷移に関して

検索ページの遷移に関してメモ。 基礎だが実際全部完全に網羅できているかというと不安な部分が多い。 Contents1 基本仕様: 以下のようなページ構成を想定2 想定しないといけない遷移状態3 よくあ …

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …