- カタチグラフィックスのBlog – Katachigfxの日記と制作メモ

「html・CSS」というかたログ

07.02

レスポンシブウェブデザインとやらをやってみると、色々気をつけなければならない事が出てきたので、少し紹介。

今回、デルタ浜松支部さんのサイトをレスポンシブウェブデザインで構築した。

●デスクトップ表示

デスクトップ表示

●タブレット表示

タブレット表示

●スマートフォン表示

スマートフォン表示

ウェブサイト:総合探偵社デルタ浜松支部

●ポイント1 UAで切り替えるのではなく、画面サイズで切り替える

JSやPHPでUAを調べCSSを切り替えたり表示するhtmlを切り替えてたりするのではなく、CSSのメディアタイプを使って表示を切り替えると、よりスマートなサイトになる。

@media screen and (max-width: 768px) { タブレット専用のスタイル }
@media screen and (max-width:640px) { スマートフォン専用のスタイル }

スクリーンサイズが768px以下の場合タブレット表示。640px以下の場合スマートフォン表示にする。

デザインする際に、そこまで考えて作る必要があるが、まあ最悪なんとかなる。
まず、タブレット、スマートフォンを意識しつつ、デスクトップ表示をCSSでデザインすることから始まる。
次に、プレビューブラウザを768px以下に縮めて、上記のメディアタイプをデスクトップ用CSSの下に書き加えていく。

●ポイント2 幅は%表示に書き換えていくと美しく出来上がる。

タブレットやスマートフォンは機種によって解像度(幅)は様々である。
常に%で作ることで、機種によって見え方が違うことはなく、美しく出来上がる。

また、タブレット、スマートフォン向けにmeta要素に name=”viewport” を追加し、文書の表示領域を設定する必要があるので忘れずに。

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

●ポイント3 IE対応のコツ

なんといっても厄介なIE。
今ではおなじみの方法で、これらを回避しよう。

<!--[if lt IE 7]>      <html lang="ja" class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="ja" class="lt-ie9> <![endif]-->
<!--[if IE 8]>         <html lang="ja" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ja"> <!--<![endif]-->

今回使ったのは、ナビ周りのアイコン達。通常サイズでは、解像度の高いタブレットやスマートフォンでは、ぼけてしまうので、2倍のサイズのアイコンを用意した。すると、IE8以下ではCSSのbackground-sizeが無視され、2倍のサイズで表示されてしまう。そこで、IE8以下用に通常サイズのアイコンを用意してCSSで切り替える。

.lt-ie9 #home a {background-image: url(IE用の通常サイズアイコン画像);}
#home a {background-image: url(2倍サイズのアイコン画像); background-size:50% auto;}

といった感じ。

お試しあれ。

07.13

デバイスの横幅480pxで振り分ける方法がスマートかと。
デバイス画面サイズ480px以下はsmart.cssを読み込み、デバイス画面サイズ481px以上はstyle.cssを読み込む。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="css/smart.css">
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="css/style.css">

さらに、以前紹介した「スマートフォンviewport の指定」を組み合わせると綺麗に表示される。

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

–制作メモ

05.26

iPhoneでPCサイトを見る場合、文字を見やすくするために、自動的に文字が少し拡大します。
でも逆に、レイアウトが崩れてしまい、見にくくなってしまうことも。
そこで、CSS3を使って制御しちゃいます。

#news {-webkit-text-size-adjust:none;}

–制作メモ

05.25

iPhone・Android 向けのサイト制作をする際に meta タグに viewport を指定して、デバイスの表示領域に合わせたページデザインを行うことができる。

<meta name="viewport" content="パラメータ=値, パラメータ=値, パラメータ=値">

●パラメータと値

width
ビューポート(可視領域)の幅(ピクセル値)。
デフォルト値は 980
200 から 10000 までの範囲を指定できる。
height
ビューポートの高さ(ピクセル値)。
デフォルト値は width の値とデバイスのアスペクト比から算出される。
233 から 10000 までの範囲を指定できる。
initial-scale
ページが可視領域内にフィットするように計算された値がデフォルト値となる。
minimum-scale から maximum-scale によって定義された範囲の値が指定できる。
最初にページが表示されるビューポートの値のみが指定可能。
user-scalableno を指定していなければズーム操作が可能となる。
ズームの範囲は minimum-scalemaximum-scale の範囲内に制限される。
minimum-scale
ビューポートの最小 scale 値。
デフォルト値は 0.25
0 から 10.0 までの範囲を指定できる。
maximum-scale
ビューポートの最大 scale 値。
デフォルト値は 1.6
0 から 10.0 までの範囲を指定できる。
user-scalable
ユーザーがズーム操作できるかどうかを yesno で指定する。
デフォルト値は yes
no を指定するとテキスト入力フィールド内でのスクロールも制限される。
device-width
デバイスの幅(ピクセル値)。
device-height
デバイスの高さ(ピクセル値)。

–制作メモ

12.03

FeedBurner の Socialize 機能を使って、
ブログを更新したことをTwitterに表示することができる。

Socialize(Twitter 投稿)機能の設定は、FeedBurner の管理画面「Publicize(集客支援) > Socialize」ページから行える。

Twitter account
Twitter のアカウントを選択。「Add a Twitter Account」ボタンを押して、Twitter の OAuth 認証画面を開き、「Allow(許可する)」ボタンを押す。

Post content
Twitter に流すブログ投稿のフォーマットについて。
「Title only(タイトルのみ)」「Title and Body(タイトルと本文)」「Body only(本文のみ)」から選択可。「Include link(投稿へのリンクを含める)」「Leave room for retweets(リツイート用の余白を残す)」オプションも指定できる。

Hash tags
Twitter に流す際のハッシュタグを、ブログ投稿のカテゴリ(Blogger ならラベル)から読み取ってつける。「Don’t add any hash tags(ハッシュタグをつけない)」「Create hash tags from item categories(投稿のカテゴリーからハッシュタグを作成)」から選択。「Create …」にしている場合は「Use inline hash tags(ハッシュタグを文中で使う)」というオプションも使用可。

Additional text
Tweet に追加する文字列。「beginning of the post(最初に)」「end of the post(最後に)」が選択可。

Item limit
一回の更新で Twitter に投稿するブログ投稿の量。1 ~ 8 が選択可。

Item order
投稿の並べ替えの基準。「publish date(フィード記載の published 値もしくは pubDate 値で)」「their order in the feed(フィード記載順どおり)」から選択。

Keyword filter
キーワードでヒットするものだけ Twitter へ流す。キーワード設定の際は、検索対象を「a category(カテゴリ)」「the title(タイトル)」「the body(本文)」「the whole item(投稿全体)」から選択。

下部にあるSample Item Previewを見ながら設定すると楽ちん。

.

※参考資料:クリボウの Blogger Tips 様(こちらを参考にした方が賢い)