Web関連

分かる分かるー。スマートフォンサイトコーディングあるある

0

以前スマートフォンサイト制作について書きましたが、今回はコーディングするにあたって、役立つ小技を私の備忘録として紹介します。
(そう私コーダーだったんです)

そもそもスマートフォンサイトとは

スマートフォンでもPCサイトを見る事はできますが、なんせ画面が小さくて画像も文字も見づらくなってしまいます。
操作性もマウスを使用するわけではなく、直接画面をタップやスワイプしたりしますので、PCサイトのままだとテキストリンクが隣接していると間違えて別のリンクに繋がってしまったりします。

そこで、スマートフォンの操作性にあったデザイン、UIにしたのがスマートフォンサイトです。

何はともあれこれを記述

まずはヘッダーにこれを記述しましょう。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

これを<head>内に入れるとデバイスの幅にサイト幅を勝手に合わせてくれます。
一応説明すると、

name=”viewport” で「表示領域の設定をします!」
width=device-width で「横幅はデバイスの幅に合わせます!」
initial-scale=1.0 で「表示したデフォルトは拡大も縮小もしません!」

と言う意味。

既存サイトをレスポンシブ対応していた際、これを入れていなくて、
「え!何で表示が変わらないの?」
ってなることがあり焦りました。
(あまりに初歩的なミス、恥ずかし過ぎる)

また、スマートフォンだと電話番号を勝手にリンク設定(タップすると電話が掛かる)してしまうので、
これも記述しておくと良いかも。

<meta name=”format-detection” content=”telephone=no”>

これで勝手にリンクしなくなります。

スタイルシートの便利な設定

スタイルシートでも色々便利な事ができますよ。

まずはリンクエリアを広げる為に、

a {display: block;}

指で操作するので、リンク領域は大きく設定したいものです。
なので、高さを設定できるようにします。
また、横幅もリンク領域がテキスト分量に依存せず、100%になります。

横幅を%で指定したい時の為に、

{box-sizing:border-box;}

スマートフォンは縦向き、横向きで表示幅が変りますね。
カラムの幅をピクセル指定してしまうと、縦から横にした際、要らぬ隙間が出来てしまったりします。
なので、カラム幅を%で指定したいのですが、(例えば二つの箱を並べたい場合width:50%;と設定します)paddingやborderがあるとなかなかうまく行きません。
しかし、これを設定すると諸々含めてくれるのです。便利!

また、上記の設定に付随して、横並びにする際使用すると良いのが、

親要素に{display:table;}
子要素に{display:table-cell;}

tableと同じ振る舞いとなるので、文字の中央寄せ(vertical-align:middle;)なんかも使えるようになります。
floatだと親要素にclearfixを入れないと高さが出なかったり色々取り回しが面倒ですよね。

あとは、英文の改行位置をきれいにしたい為に、

{word-break: break-all;}

英文の場合、デフォルトの設定では単語毎に改行されるので、横幅の小さい画面だと文の改行が凸凹であまりきれいじゃなくなる事があります。
これを設定すると、英文でも単語に関係なく枠の領域で改行されるので、見た目がすっきりです。

まとめ

なぜか毎回忘れてしまい、出だしで挫かれます。まあそれは私だけですが。。。
css3を使うと装飾も色々あり、楽しいですね。
擬似クラスなんかも使うと表現の幅が更に広がります。
よく右端にあるリンクを意味する矢印も擬似クラスを使って表現しますね。
まだまだ小技がたくさんあるスマートフォンサイトのコーディング、
やらないと忘れてしまうのでご注意を!(しつこいですが私だけ)

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

スマートフォンサイト制作

ホームページ制作

0

ホームページ制作時の契約書、確認ポイントをあれこれ教えます!前のページ

Webサイトのリニューアル前が分かる。Internet Archive(インターネットアーカイブ)次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. AIに求められているものは、実は意外な物だった
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    値段安く、使いやすく。格安SIMサービスの魅力

    みなさんは今お持ちのスマートフォンに満足しているでしょうか。スマートフ…

  2. Web関連

    モバイルはPCの延長戦ではなかった

    Web業界の第一線で活躍するティファナがWeb関連情報をお届けしていま…

  3. Web関連

    Webデザイナーなら知っておくべき!誰でも実践できる写真構図のポイント

    最近寒くなってきましたね。そんななか、11月末に箱根までバイク…

  4. Web関連

    気づけないWEBサイトの欠点をAIが分析・提案!

    WEBサイトの分析はAIにお任せ!Webサイトを運用していくには、…

  5. Web関連

    エクセル管理はもうやめよう!プロジェクト管理ツール「Backlog(バックログ)」の導入メリット

    Webサイトを運用している皆さんは、タスクや課題をどのように管理してい…

おすすめ記事

最近の記事

  1. 持つべきなのか?運転免許証+マイナンバーカード
  2. RPAから始める業務効の自動化 働き方改革への選択肢の一つに…
  3. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  4. 約1年間のウィズコロナ生活で大きく変わったもの
  5. スマートストアにより、小売業は激変する

アーカイブ

「いいね」を押された記事

  1. Web関連

    WEBサイトは両利き用?
  2. Web関連

    空腹注意! 飲食業界に関わって学んだこと!
  3. Web関連

    ゲーミフィケーションとは?
  4. Web関連

    毎日見たくなるオウンドメディアサイトとは?
  5. Web関連

    マイクロターゲティングで「個」客を獲得
PAGE TOP