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

JSでの他ファイル読み込み。requireやimportについて

JavaScriptに関して、知識が非常に古い段階で止まっているのでコツコツとアップデートをしております。 今回はrequireやimportなど、他のファイルの読み込みについてです。 PHPなどサー …

no image

JavaScriptモジュール化の歴史など

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。 現場に入る前はAngularJSなどは独学でやっ …

no image

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …

no image

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

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

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …