CSSとtableタグについて - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

CSSとtableタグについて

法人・ビジネス ホームページ・Web制作 2010/03/03 14:00

Webページのメニューボタンを横3×縦2で配置させたいと考えています。

TABLEタグは使わない方がいいという話をよく聞くので、CSSで配置させようと考えているのですが、左右に分けるのであればfloatタグを使用しますが、今回のように「3分割」をTABLEタグを使わずに作成することは可能なのでしょうか

宜しくお願い致します

よっきーさん ( 京都府 / 男性 / 29歳 )

回答:3件

井上 みやび子

井上 みやび子
Webエンジニア

- good

表組み風にするには幅を指定して float:left にします

2010/03/03 14:17 詳細リンク
(5.0)

はじめまして。すぐ使える株式会社の井上と申します。

横3×縦2 などの表示は、横幅を決めた div を float:left で連記することで実現できます。

*CSSで表組みするコードの例
<div style="width: 900px"> ←外枠

<div style="width: 300px; float:left">....</div> ←セル1つに該当
<div style="width: 300px; float:left">....</div>
:(6個分)

</div> ←外枠の終わり

**留意点
上記のように単純にサイズ指定するとセルに該当する<div>の中身やブラウザ、DTDによってはセル2つで折り返しされてしまう場合もありますので、CSS指定は参考書などを見ながら工夫して下さい。


ご参考:表組み風の画像一覧を作る方法
PR---5,250円のCMS「すぐ使えるCGI」

評価・お礼

よっきーさん

うまくできました
ありがとうございました

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。
吉村 昭二

吉村 昭二
ITコンサルタント

- good

Floatを使用して作ればいいと思います。

2010/03/03 14:48 詳細リンク
(5.0)

はじめまして、シンクライズの吉村です

CSSで3分割で表示させるのであれば
Floatで左のみを使用して
横幅を指定して一段目の並びを作っていく事が良いかと思われます。

参考例
.botan{ float:left; width:200px;}
.clear{ clear:both;}

clearは2段目を入れる際に、回り込みをクリアにし
それから同じ用に作るようにします。

TABLEタグについては、利用用途によって使い分けた方がよろしいかと思います
主にTABLEタグは表等に使用する事が多く、レイアウトでい使用する際はTABLEタグを使わない方がいいです。

ご参考になれば幸いです

ホームページ制作|株式会社シンクライズ
http://syncrise.co.jp

評価・お礼

よっきーさん

ありがとうございました。

表として使う場合にはTABLEタグを使っても良いのですね。
「画像で作らないといけないのかな〜」と思っていました

早川 徹

早川 徹
システムエンジニア

- good

CSSなら外部ファイルに

2010/03/03 20:45 詳細リンク
(5.0)

こんにちは、アイズ・プロダクションの早川です。

ご質問のようなことはもちろん、floatプロパティを使えば実現できます。
その時、メニューということでしたら、リストタグを使うのが一般的でしょう。

「縦2」で横幅を均等にということでしたら一つの案として書き方の例をあげておきます。

*書き方例

htmlに

<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
<ul>
<li>メニュー4</li>
<li>メニュー5</li>
<li>メニュー6</li>
</ul>

と記述し、スタイルシートで

ul {
width:300px; /*3つのメニュー全体の任意幅
list-style-type:none;
}
li {
width:33%;
''float:left;''
text-align:center;
}

と書くのが簡単です。

ひとつ、老婆心で申し添えると、「TABLEタグは使わない方がいいという話をよく聞く」というのはいろいろな意味があると思いますが、「SEOの観点から使わない方がよい」ということを意識するのであれば、CSSは外部ファイルにすることをお勧めします。

ご参考になりますように

評価・お礼

よっきーさん

>「SEOの観点から使わない方がよい」ということを意識するのであれば、CSSは外部ファイルにすることをお勧めします。

まさにその観点での意識でした
動画の質問をさせて頂いた時に続いてとても丁寧にご回答いただきありがとうございました

追伸
動画の貼付け、その後順調に作成でき「これが上手くいったらゆくゆくは月額コンテンツもできるかも!?」と広報部長がウキウキしております(笑)

(現在のポイント:1pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

Amebaブログのデザイン変更について tcnさん  2013-10-04 08:51 回答1件
夫が独立した(web会社)妻です。 もっち吉さん  2013-06-23 03:37 回答5件
CSSでの文字指定について tcnさん  2013-04-10 09:24 回答2件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)