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

関連記事

  1. SNS関連

    Instagramユーザーにおすすめ!大流行の変装アプリ3選!

    いまや全世界で4億人を超えるユーザーが利用しているSNS、Instag…

  2. Web関連

    ブログにコーポレートサイトにどうぞ!WordPressテンプレートの紹介

    こんにちは!ブログを始めてみたものの3日で書くネタに詰まったデザイナー…

  3. Web関連

    ア ナ タ ハ ソ コ ニ イ マ ス カ? ネット上にさまよう死者のアカウント

    亡くなった後もTwitterで上でツイートし続けるといった、怪奇現象…

  4. Web関連

    究極のパーソナルサービス「コンシェルジュ」

    今、コンシェルジュが存在するのはホテル業界だけではありません。世の…

  5. Web関連

    売れるECサイトをつくるためには天気を見よう!

    ECサイトの売り上げを上げるための方法について触れていきたいと思います…

  6. Web関連

    作成する資料をちょっと良くできる!デザインの2ポイント

    最近は自粛&amp;自粛で運動不足に拍車がかかっている、デザイナーの松…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    なぜ無料なのか理解出来ない! 3DCGソフトblender
  2. AI関連

    【人工知能(AI)×災害対策】AIが津波予測を高精度化する!
  3. サービス・新技術

    コロナの逆風に対抗する、飲食業界の新しい歩み方
  4. SEO関連

    ブログを書く時に注目すべきSEO対策まとめ~前編~
  5. Web関連

    動画配信サービスhuluってどんなもの?
PAGE TOP