[ 書き込む(W) ] [ 全部既読(M-) ]
[ 検索(RT) ]
[ コマンド一覧(H) ] [ 操作マニュアル ] [ HOME ]

[ タイトル一覧 未読 ( テロップ )
| 最新 | 最初 ]
[ メッセージ(総数: 80)
最新 | 最初 ]
[ 過去ログ ]

#34/80 白い雲
★タイトル (********)  17/ 6/17  19:53  ( 35)

レスポンシブデザイン     Kyomi
★内容
パソコン用のhtmlファイルをスタイルシートで分岐することでタブレット
やスマートフォンで使用できるようにするデザイン。Googleがモバイルフレン
ドリーとして推奨していて、検索でも上位に上げる。

最初は、画面幅が違えば構成も変わるし、本当にそんなことできるのかと思い
つつ、サイト内を作り直し始めたのだが、CSS3にいろいろと便利なものがあり、
なかなかおもしろい。タイトルバナーのような大きな画像は、はみ出さないよ
う伸縮設定できるし、文字や画像も改行位置を変えることができる。パソコン
用のものは表示させないこともできるし、横並びのテーブルは縦並びにできる。

既存サイトの場合、問題は、画面幅より、リンク(タップ)ターゲットで、タブ
レットやスマートフォンは、リンクを(たいてい)指で押すので、リンク用画像
なら48px以上必要で、押し間違いを防ぐため、リンクとリンクの間は32px以上
あける必要がある。また、画像なら自然に桁折りさせてもいいが、その場合は、
行間を十分に空ける必要がある。文字リンクは、変なところで改行されないよ
う、あらかじめ適当に桁折した方が見栄えはよい。

古いサイトで、このkbbsjもそうだったが、fontタグのような、非推奨となっ
た要素を使っているところは、それらをスタイルシート化する必要がある(い
つまでブラウザが対応するかわからない)ので、同時にレスポンシブ化すると
いいのではないかと思う。スタイルシートも、とりあえず、なじみのないもの
は置いといて、装飾部と考えれば、さほど難しくはない。

パソコンの解像度が上がったので、ページが画面の半分や2/3ほどになってし
まっているところもあり、放置されていたりすると、もったいないなーと思う。
古いサイトほど、広告は少ないし、中身は濃い。古いサイトには古いサイトに
しか伝えられないこともある。

関連ページ
◇HTML4.01の非推奨要素や属性をスタイルシートへ移行する
http://www.kyomi.sakura.ne.jp/html/h2c.htm
◇スタイルシートとHTMLのベース構成
http://www.kyomi.sakura.ne.jp/html/htmlbase.htm

Kyomi


[ 削除する(D34) ] [ コメントを書く(C34) ]
番号またはコマンド=