No.3ベストアンサー
- 回答日時:
> 管理のしやすさとか、拡張のしやすさとか、それほど違わなければ、慣れている「テーブルレイアウト+CSSデザイン」を使おうと思っています。
それはどうでしょうね…「管理のしやすさとか、拡張のしやすさ」という点においては「かなり」違いがあると思いますよ。
ANo.2様の分類を上から(1)(2)(3)とさせ頂いた場合、(1)はメンテナンスの効率が非常に悪いのはおわかり頂けると思いますので論外とします(装飾的要素が変わる度にたくさんの画像から作り直さねばならない)。
(2)(3)は画像関連の修正については大差ないかと思いますが、劇的な違いは、レイアウト(テンプレート)変更の際に起こります。
例えば現状が以下の様な2コラムのレイアウトだったとします。
-----------
ヘッダ
-----------
ナビ | メイン |
ナビ | メイン |
ナビ | メイン |
-----------
フッタ
-----------
これを、リニューアルしてナビを右にメインを左に、という表示のレイアウトに変更したいとします。
もしHTML側を所謂テーブルレイアウトでマークアップしていると、セルの組み方を変えねばならず、HTMLファイルの大幅な修正が発生せざるを得ません。
しかし、これをCSSでのコラム組にしておけば、構成変更の際もHTML側をほとんど修正する事無く、CSSファイル一つを調整する事で一瞬にして各コンテンツのレイアウトを差し替える事も可能となります。
すごくわかりやすい例がありますので、挙げておきます(CSS HappyLifeさんのサイト)↓
【参考】http://css-happylife.com/log/css-template/000161 …
ここに、上記の様な構成の2カラムサンプルが提供されていますが、各サンプルのサムネイル画面をクリックして実際のコンテンツのソースをご覧になってみて下さい。一目瞭然ですが、例えばSample 01と02はメニューが左右逆の表示になっているにも関わらず実はこの2つのサンプルのHTMLのマークアップは全く同一です。どちらも、テンプレートの大枠は下記の様になっています。
<div id="header">
ヘッダー
</div>
<div id="main">
<div class="inner">
メイン
</div>
</div>
<div id="sub">
サブ
</div>
<div id="footer">
フッター
</div>
この構成を全く変える事なく、CSSの#main、#subといったセレクタのプロパティの内容を調整するだけで、レイアウトの変更を反映させる事ができます。これはわかりやすい一例ですが、やはり(3)は完全に論理構造とデザイン要素を分離させる事ができる為、(のちのちのそういったレイアウト変更の可能性等も踏まえた上で、適切な作成の仕方をしておけば)メンテナンスはかなり容易になります。
No.4
- 回答日時:
●メンテナンス性は格段にcssが上です。
http://generator.designiddatabase.net/data/frame …
ここの下の方、うす紫色のテキストhtmlの中身を、cssをいじるだけで、上40種類のデザインを実現されてます。
●さらに、みんなに読んでもらいたいならcssが上です。
真偽は知りませんが、一応YahooやGoogleに正当な評価を得られることになっています。tableはあまりロボットには正しく伝わらないようです。「seo」を考えるならcssにしておいた方が安心。
●テーブルが悪いのではなく、デザイン目的に使うのは根本的に正しくない
テーブルは表です。デザイン台紙ではありません。
●視覚にハンディのある人もcssの方がアクセスしやすい
○cssは古いブラウザは解釈しない。
→過去の亡霊のようなバージョンのブラウザにも思ったように表示されるテーブルレイアウトを使う。
→IE5.5利用者を切り捨てていいなら、NN4使用者を切り捨てて良いならcss。だめならテーブル
○デザインによっては、テーブルの方が楽なこともある。
但し、●はcssの基本概念を理解した上でのマークアップを施した場合であり、見出しにもdiv、本文にもdivなど、ただ単にテーブルレイアウトの手法をcssに置き換えただけのdiv病の方のcssレイアウトには、有効ではありません。div病するくらいなら、まだ、テーブルレイアウトのほうが「マシ」、ハイブリッドのほうが「マシ」だと思います。
私見ですが、過去を見つづけるならテーブルで、将来を見るならcssを勉強されることをお奨めします。
なるほど、納得です。
独学でCSSを勉強して一応は使っているのですが、
本当の意味で使いこなせていないようです。
これからもっと勉強します。
ありがとうございました。
No.2
- 回答日時:
あくまで私見ですが。
・テーブルレイアウト+画像デザイン
・テーブルレイアウト+CSSデザイン
・CSSレイアウト+CSSデザイン
に分けられると思います。
ImageReadyやFireworksのスライスを利用してHTMLファイルを作ると
テーブルレイアウト+画像デザインで作られ、枠線もすべて画像で作られます。
Dreamweaverやホームページビルダーなどのオーサリングソフトはテーブルレイアウト+CSSデザインでの作成が得意なので、
スタイルシートのborderプロパティを使ったり、background-imageプロパティを使うことになると思います。
CSSレイアウト+CSSデザインはいわゆるWeb標準や「テーブルを使わないデザイン」です。
そのテンプレートで「tableレイアウト」と書いてあるのは「テーブルレイアウト+画像デザイン」、
「ハイブリッド」というのは「テーブルレイアウト+CSSデザイン」のことだと思いますので、
いわゆるHTML手書きならCSSデザイン、
オーサリングソフトを使うならハイブリッド、
Fireworksなどを使って、スライスをまたがった画像を一括変更するのはtableレイアウト(元データとなるpngファイルやpsdファイルが含まれていれば)
のテンプレートが便利だと思います。
ありがとうございます。
>Fireworksなどを使って、スライスをまたがった画像を一括変更するのは
この部分以外は理解できました。
要はソフトの違いによるところが大きいということでしょうか。
管理のしやすさとか、拡張のしやすさとか、それほど違わなければ、慣れている「テーブルレイアウト+CSSデザイン」を使おうと思っています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- HTML・CSS Affinger6でトップページに記事をタイル状に並べたい 1 2023/05/20 14:55
- HTML・CSS webデザイン、HTML、CSSに詳しい方、これのHTML、CSSのコードを詳しく教えてほしいですm 1 2023/03/22 14:52
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- Ameba(アメーバブログ) アメブロ テンプレート 1 2022/06/27 00:54
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- HTML・CSS PrettierのHTMLの記述変更 linkタグ 1 2022/06/23 04:06
- HTML・CSS HTML で使ってない CSSのクラスやID を消去してくれるツールはありませんか? 2 2022/08/25 18:07
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
インラインフレームのページ内...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
HTML5 iframe の代わり
-
横並びdivで一部の初期高さがず...
-
<!-- #BeginLibraryItemとは
-
div要素が重なってします
-
HEADタグとheaderタグ
-
divとpの使いわけ
-
標題<h1>に、網掛けはできますか?
-
htmlの見出しタグ(<h1>)の次...
-
画面を縮小するとカラムが落ち...
-
フッターがウインドウの一番下...
-
CSSで、contentsがfooterに重な...
-
特定範囲内のCSSの継承を断ち切...
-
セクションをdivで囲むと見出し...
-
背景画像に全体または部分的に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報