〜*〜 カフェ 白い雲 〜*〜
#34 へのコメント投稿
元メッセージ ( 本文のみ/
引用符付
(Q34) )
【 レスポンシブデザイン 】
パソコン用の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
タイトル(必須*全角30字程度まで)
メッセージ本文(必須*全角40字程度以内で改行して下さい)
このメッセージにコメントがついたらメールで知らせる
ハンドル(必須)
メールアドレス(必須)
メールアドレスを公開しない
自己削除キー(半角8字以内)
ご注意
HTMLタグは、無効です。
半角カナ文字は、全角カナ文字へ変換されます。
行頭での連続しない半角スペースは表示されません。
本文中に半角文字のメールアドレスは書けません。
本文中にURLを書く場合は、
http部分をkhtpに変えて
下さい。
URLにはリンクがつきますが、画像(gif/jpg/jpeg/png/bmp)の場合は、行頭に書くと、その画像が表示されます。
※他のサイトから画像をリンクする場合は、利用規定や著作権などにご注意下さい。
※行頭に書きたいがリンクだけにしたいという場合は、行頭に半角スペースを入れて書いて下さい。