Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[HTML][CSS]スマホ対応

HTML CSS

head部の記述

meta name = viewportの記述

<meta name = "viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  • content="width=device-width"→デバイスの横幅で描画するように指定
  • initial-scale→横向き (Landscape mode) にしたとき、iphoneの自動拡大機能を停止
  • user-scalable…ピンチで拡大するかの有無
meta name = format-detectionの記述

<meta name="format-detection" content="telephone=no, email=no"> * 数字列、文字列が電話番号、メールアドレスとして自動認識されないようにする

スマホ用faviconの設定

<link rel="apple-touch-icon" href="apple-touch-icon.png"> * 114*114pxのapple-touch-iconを用意、リンク設定する

javascriptの記述
// 検索バーを隠す
window.addEventListener('load',
    function(){
        setTimeout(function(){
            scrollTo(0,1);
        },100);
    },
false);
  • 上記jsをリンクすると、スマホのアドレスバーを擬似的に隠し視認性を向上できる。

bodyの記述

  • html5に準拠する
  • ヘッダー部→セクション①→セクション②→フッター
  • html5ではh1を複数使用しても良い

stylesheetのリセット記述

body {
 -webkit-text-size-adjust: none;
}

CSSでグラデーション

代表的な記述方法
  background: webkit-linear-gradient(top, #b6e2fd, #87c2fb);/* 古いapple webkit系ブラウザ対応 */
  background: linear-gradient(to bottom, #b6e2fd, #87c2fb);/* W3C推奨のモダンブラウザー記述 */
  • 方向、透明度（rgba）等指定可能
  • グラデーション等をＣＳＳ化できるPhotoshopエクステンション css3ps.com