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

関連記事

  1. Web関連

    Web制作会社が教えるデータドリブンマーケティングを成功に導く方法

    データドリブンマーケティングを活用したマーケティング「データドリブ…

  2. Web関連

    著作権侵害の罰金は最大1億円!!

    とにかく話題になっている著作権問題ですが、法人の場合、違反しますとなん…

  3. Web関連

    忙しいシステムエンジニアのためのプラモデル講座

    わたしの趣味はプラモデルなのですが、本格的にプラモデル作るとなるととて…

  4. Web関連

    メディアミックスとMA(マーケティングオートメーション)の 可能性を考えよう

    皆様は、メディアミックスというワードはご存知でしょうか?ビジネス形…

  5. Web関連

    Web制作の落とし穴!最適な内容の並べ方

    皆さんは順番を気にしたことはありますか?きっと人生に一回ぐらいはあ…

  6. Web関連

    LPってどれもどこか似ていませんか?

    何回かコラムを書かせていただいていると、普段見ないようなサイトも見るの…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    AIチャットボットって一体どこがAIなの?
  2. Web関連

    これだけは覚えておいてほしい、地味に使えるExcelの時短ワザ3選。
  3. AIさくらさん

    【人工知能(AI)×社内システム】人工知能(AI)で大きく進む社内業務効率化
  4. Web関連

    末恐ろしい。小学生が開発したスマホアプリ
  5. Web関連

    ホームページ制作会社が紹介する3つのブランディングポイント
PAGE TOP