Quantcast
Channel: Adobe Community: メッセージ リスト - Dreamweaverコミュニティフォーラム (Japan)
Viewing all articles
Browse latest Browse all 3260

Re: テーブルを入れるとbodyが壊れてしまいます

$
0
0

Dreamweaverをご利用いただきありがとうございます。

まず、CSSの役割について基本的なところから考えましょう。

これだけ領域やプロパティと値が重複していれば取り消し線が入るのも無理はないと思います。

 

せっかくHTML5を宣言するサイトなのですから、Dwのラーニングページを参考になさって全体のデザインをもう一度見直してみてはいかがでしょう?

(もちろん、クライアントからの要望で絶対にこのレイアウトでと指定があった場合は別ですが)

HTML5とCSSをすばやくコーディング | Adobe Dreamweaver CCチュートリアル

 

まずbodyがあり、そこに入れ子になるcontainerを定義し、header、nav、aside、main、footerなどのパーツを配置していきます。

それぞれのCSSプロパティと値が重複しないように全体を俯瞰して配置を考えます。

上記ページのようにワイヤーフレームで全体図を作り、目の前に貼って確認しながら作業するとプロパティの無駄な重複を避けられます。

例えば、navを一つ一つdivタグで定義するのではなく、nav領域の中にtableで各ボタンを配置する、よほど大きな幅の画像を挿入しなければならないのでない限りmainに配置するt ableは1100に固定するのではなく可変にする、などの工夫をされた方が良いのではないでしょうか?

領域内でそれぞれのエレメントがケンカするようなプロパティを定義すると取り消し線が入ってしまいます。

 

完全なレスポンシブにする必要はありませんが、1400pxの幅でサイトを閲覧できる環境のユーザは一部です。

両端がoverflow: hiddenで隠れても構わないのであれば問題ないですが、ほとんどのユーザは横スクロールバーを見せられてウンザリすることになります。

これではユーザビリティやアクセシビリティを考慮したサイトにはなりません。

 

基本的なレスポンシブデザインの概念は以下の動画を参考にしてください。

可変グリッドレイアウト | Learn Dreamweaver CC | Adobe TV


Viewing all articles
Browse latest Browse all 3260

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>