HTML/CSSをやさしく教えてくれるスレ


▼ページ最下部
001 2009/03/18(水) 01:18:46 ID:MvOMoiBc
質問です。
スタイルシートが使えない環境で、

テキストのインデントとその下にくる余白のおおきさを
ある程度指定したい場合、テーブルで空のセルを作って
数値を指定するのは文法的に有りなのでしょうか??
例:
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50"></td>
<td>テキストA</td>
</tr>
<tr height="2">
<td colspan="2" height="2"></td>
</tr>
<tr>
<td></td>
<td>テキストB</td>
</tr>
</table>

返信する

※省略されてます すべて表示...
004 2009/03/18(水) 02:23:17 ID:bhgVf2wk
なんでCSS厨は互換性の高いテーブルよりCSSを使いたがるんかね?
ハックとかまでしてデータとデザインの分離とかHTMLでアホでしょ。
リストを横に並べるのが主流とかもうバカかと。
土台がhtmlなんだからデータのみのファイルをサーバー側でhtmlに加工したほうが分離できるのに。
そんなに分離したかったらXMLとXSL使えよ。

と、テーブルを全部CSSに変換するのに非常に苦労した人が申しております。

返信する

005 2009/03/18(水) 08:32:15 ID:pP8jykAM
いっそ画像にしてしまう、という方法はダメ?

返信する

006 2009/03/18(水) 12:37:34 ID:NbFMY.rU
>文法的に有りなのでしょうか

標準化という意味では完全になしです

>なんでCSS厨は互換性の高いテーブルよりCSSを使いたがるんかね?

セマンテックとユーザビリティが理由でしょ
他の用途で使う時に分離されてた方がデータを取り出しやすいし
作る側のことだけ考えたらテーブルが楽なんだろうけど

返信する

007 2009/03/18(水) 23:40:06 ID:u92Hq4yY
>余白のおおきさをある程度指定したい場合〜
→厳格に指定するならセル幅調整するしかないでしょう。

>文法的に有りなのでしょうか??
>>6に同意。

CSSが使えない環境って具体的にどんな環境だ?古いとか?

返信する

008 2009/03/18(水) 23:50:06 ID:MvOMoiBc
>>3
ありがとうございます。
でも
全角スペースですと、改行したときリンクが分離してしまうのですがどうしたら良いでしょうか?
かといってリンクとして一文にすると全角スペース空白の部分にも下線がくるのでおかしいし。

例↓こんな場合
  リンクテキストA〜〜〜〜〜
  リンクテキストA続き
  
あと、下側のスペースなんですが、例えば次の要素との間に2pxだけ空けたい場合とかだと
<br>だとフォントサイズいじっても空きすぎてしまいますがこれいかに?

>>5ありがとうございます。
でもspacerとかスライスで作成とかは最後の手段にしたいんです。
(めんどいのと重くなるのと正しい書き方を知りたいのという理由で)

>>6
ちなみにやはり標準化という意味ではspacerとかにするのがスマートなやり方なのでしょうか?

返信する

009 2009/03/19(木) 00:04:24 ID:QnjyacDo
>>7
ありがとうございます。
セル幅でOKと聞いて安心しました。(OKというのは誤解があるかもしれませんが)
CSS使えない環境は、HTMLで送るメールマガジンです。
あと、テンプレートみたいなショッピングサイトのページとかです。

返信する

010 2009/03/24(火) 12:53:43 ID:KR79ql9.
メルマガならHTMLの中にCSSを埋め込んでしまえばいいんじゃないの?
<style>...</style>
とか
<p style="...">...</p>
とか。

返信する

011 2009/03/24(火) 23:42:18 ID:hgXlVT1Q
>>10
ありがとございます。
そのやり方、あまり使ったことなく、
正しくないイメージもなんとなくあって
避けてました。

ちょっと勉強してみます。

返信する

012 2009/04/01(水) 02:59:25 ID:.gaQIoYo
すいません、質問です。

画像の周りに余白を5px空けてボーダー線をひきたいのですが、
firefoxだとOKでIE7だと余白が空きません。
この記述は誤りでしょうか?

ヘッダ記述-------------------------------------
<style type="text/css" media="screen"><!--
img { padding: 5px; border: solid 2px gray; }
--></style>

HTML部分---------------------------------------
<img src="画像.jpg" alt="" width="200" height="200" border="0">

誰か解答おながいします

返信する

013 2009/04/01(水) 03:39:43 ID:UeZUjblE
削除(by投稿者)

返信する

014 2009/04/01(水) 07:33:09 ID:LGyq8v9Q
>>12
IEはDOCTYPE宣言を書かないとCSSが正しく解釈されないよ。
それから<img>のborderは要らない。

返信する

015 2009/04/01(水) 22:23:07 ID:.gaQIoYo
>>14
すいません、それやってもIE7 ダメみたすよ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>タイトル</title>
<style type="text/css" media="screen"><!--
img { padding: 5px; border: solid 2px gray; }
--></style>
</head>

<body>
<img src="画像.jpg" alt="" width="489" height="337">
</body>

</html>

ちゃんと答えてくださーい><

返信する

016 2009/04/02(木) 04:28:40 ID:2rrG8NpA
>>15
DOCTYPE宣言の最後の部分を省略するとダメらしい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">...
にしてみ。
それと
<meta http-equiv="Content-Style-Type" content="text/css">
を書いておいた方が良いんじゃないかな。よく分からんけど。

返信する

017 2009/04/02(木) 07:16:57 ID:2CdRyQOU
>>15
インライン要素をそのままbodyに書いてる時点でだめだと思う
IE標準モードで書くならなおさら
そもそもpaddingはボックス要素とインライン要素との間の余白に使うものじゃないの?

返信する

018 2009/04/02(木) 23:50:25 ID:42HwoSkE
>>16
うおっ!!  
IE7で効いた!!!
まさかDOCTYPE宣言の最後の部分を省略が原因なんて全く考えませんでした。
凄く勉強になりました。ありがとうござます!

>>17
自分もそんな気がしてました。でも画像のサイズが手軽に変えられるような
作りで一番シンプルな書き方にしたくてこうなってしまいました。
同じ効果を得るための正しい書き方とかあれば教えてほしいです。
(一応、>>16さんの言うとうりにやったら何故かこの作りのままでできちゃいましたが。)

返信する

019 2009/04/03(金) 05:46:30 ID:6MgaFYgw
>>18
古い解釈をする「互換モード」と正しい解釈をする「標準モード」があって
DOCTYPE宣言の有り無しや書き方によって切り替わるんだよ。
これから勉強しようと思ってるなら「互換モード」は無視でいい。

>>17さんが言ってるのはHTML4.01のTransitionalとStrictの違いだね。
できれば規格にきっちり準拠したStrictで書いた方が良い。
その場合は<body>直下に<img>は書けないので<p><img></p>とする。
<img>のようなインライン要素でもpaddingは指定できるよ。

返信する

020 2009/06/19(金) 07:54:30 ID:or6kqpIY
IEは世界の癌のくせにシェアだけは多いから困る
CSSの仕様通りに実装しろよ

返信する

021 2009/06/19(金) 11:59:21 ID:z0F0s.as
同意。

返信する

022 2009/06/21(日) 06:37:05 ID:9mOrO3wk
PINKのとら でググれ

返信する

023 2009/07/11(土) 06:39:51 ID:swTkPM7s
俺馬鹿だからクロスブラウザを考慮しても
テーブルつかうよりCSSの方が楽だわ

返信する

024 2009/07/26(日) 07:29:26 ID:ek7KLuOc
今更フレームとか透過GIFを使ったテーブルレイアウトなんて覚える必要ないですかね?
あとa要素のtarget属性の使用は極力控えたほうが良いですか?

返信する

025 2009/07/27(月) 18:05:49 ID:6FX.V.Dg
>>24
断言する
必要ない

返信する

026 2009/09/16(水) 16:45:11 ID:3abl5j.c
聞きたいのですが
メタの<meta http-equiv="Content-Language" content="ja" />の指定は必要ですか?
bAやミツエーは記述してるみたいですが・・。
後、パンくずリストやコピーライトのマークアップにどういったタグを用いていますか?
参考までに教えてください。

返信する

027 2009/09/18(金) 03:00:51 ID:MvOMoiBc
>>26
どのレベルでの話かはわからないが適当に答えてみる↓

言語の指定は推奨。
<html lang="ja">が入ってれば別にいいよ。
metaに入れたところでSEOに差が出るほどの影響はなし。

パンくずリスト:jsとかで出力させるなら別に意味付けいらないんじゃない?
HTMLで書くならh1にしちゃってもいんじゃない?( TOP > ここ → <h1>ここ</h1> )

コピーライト:<adress>とかでやるとこ多いけど<p>でもなんでもいいよ。
そんぐらい、あんま何も影響ないよ。

SEO考えるならもっとでかい事やらなきゃいかん。そんなチマチマしたことでは
さして影響なし。


以上、半素人が頑張って答えました。

返信する

028 2009/09/18(金) 16:17:56 ID:pdzp96jA
パンくずリストにh1はさすがに
構造的におかしい気が・・。

返信する

029 2009/09/19(土) 01:44:43 ID:QnjyacDo
>>28
ビジュアル化が進んでFLASHはもちろん、サイトロゴやページの見出しを画像にしたり
するデザインが多くなってきているんだから、
物理・倫理マークアップとは別にgoogle検索用マークアップをしても
いいと思うのさ。(画像altのh1はgoogleは無視だからね。)
構造化よりも狙い撃ちキーワードの方が効果高いよ。
そりゃ、普通に倫理マークアップできるならするさ。
ちなみに某有名企業のサイトはパンくずh1でやってるよ。
効果は知らんがね。

返信する

030 2009/09/19(土) 02:55:01 ID:x4O3Om0E
えと、倫理(rin-ri)マークアップじゃなくて論理(ron-ri)マークアップじゃないでしょうか・・・

返信する


▲ページ最上部

ログサイズ:18 KB 有効レス数:50 削除レス数:0





情報技術・IT掲示板に戻る 全部 前100 次100 最新50

スレッドタイトル:HTML/CSSをやさしく教えてくれるスレ

レス投稿

未ログイン (ログイン

↑画像ファイル(jpg,gif,png)