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

関連記事

  1. Web関連

    最新のトレンド?!アダプティブWebデザインについてあれこれ

    こんにちは!すっかり寒くなりましたね。デザイナーの角田です。さ…

  2. Web関連

    動眼(どうがん)でアーティスト気分に浸りたい!

    こんにちは!ティファナコラム編集部 担当の秋田です。今回のテーマは「…

  3. SNS関連

    便利なSNSの陰には危険がいっぱい!?

    こんにちは!SNS初心者のデザイナーY.Kです。みなさんはSN…

  4. Web関連

    【ホームページ制作】Google認定パートナーになってみよう!

    皆さん暑い中仕事に励んでいることと思います。この記事を見つけた人は…

  5. Web関連

    リッチスニペットでSEO対策!重要な2つのポイント

    みなさんリッチスニペットってご存知ですか?実はGoogleの検索結果一…

  6. Web関連

    スマホ広告を出す前に押さえておきたい3つのポイント

    こんにちは、コンサルの横山です。「歩きスマホ」での事故が年々増えてる…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    【人工知能・AI×顧客育成】初めてのアンノウンマーケティング
  2. Web関連

    LPってどれもどこか似ていませんか?
  3. Web関連

    LINE ~拡大するコミュニケーション~
  4. AI関連

    【人工知能(AI)×Webマーケティング】unknownマーケティングにおけるリ…
  5. Web関連

    アプリを使ってタイムスリップ!昔の上田を見てみよう
PAGE TOP