5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

【DW】HTML/CSS質問・優しく答えるスレ【神降臨】

1 :Name_Not_Found:2009/03/13(金) 22:08:43 ID:gH86B3g+
ここは初心者からベテランまで、
全ての人を対象に優しく答えるスレです。

類似質問大いに結構。
分からない人は何回聞いても結構。
HTML/CSSの事なら何でもOK。

回答してくれる方は優しい人のみ!
○○読めっ・・・何度も聞くな・・etc などと言う人は このスレを見るな!!

質問側も節度あるレスで!



900 :Name_Not_Found:2009/06/21(日) 00:28:06 ID:???
そうだそうだ

901 :Name_Not_Found:2009/06/21(日) 06:44:28 ID:???
質問した以上、どう解決したか書けよ

902 :Name_Not_Found:2009/06/21(日) 07:27:36 ID:???
何日も引っ張ることじゃないだろwww

903 :Name_Not_Found:2009/06/21(日) 11:58:09 ID:TmxSxVQO
色々試行錯誤したりググッタリしてもなかなかうまくいかないのでここで質問させていただきます。
助言いただけたら幸いです。
HTMLソース
<div class="Master">
<div class="OutFrame"></div>
<div class="header"></div>
<li class="Menu"></li>
<div class="body"></div>
</div>
CSSでMasterとOutFrameを同じ幅でセンタリング、色違いの同じボーダー設定をしているのですが
なぜかOutFrameの表示がMasterに比べて右にずれてしまいます。
OutFrameをposition:fixed;でMasterと同じ位置に表示したいのですが
何か良い方法があればご教授をお願いします

904 :Name_Not_Found:2009/06/21(日) 12:00:50 ID:???
>>903
MasterとOutFrameの、marginやpaddingはどうなってる?
ズレの原因はこれらの可能性が高そうだ。

905 :Name_Not_Found:2009/06/21(日) 12:44:28 ID:???
親要素のmasterと子要素のoutframeを同じ幅でセンタリングっておかしくね?
右にずれるのはmasterのボーダーのせいじゃないかな

ちなみに<li>は<ul>の子要素として使わないといけない

906 :Name_Not_Found:2009/06/21(日) 13:16:37 ID:TmxSxVQO
早速のアドバイスありがとうございます。liのところはulでした。申し訳ありません。
Master,OutFrameマージン、パディングはどちらも同じで、左右共にautoに設定してあります。
Masterのボーダー設定を消してみたのですが、やはりMasterの位置と同じになりません。
このようなことがしたい理由なのですが、ボックスの縦幅をウィンドウの縦幅と同じにして
position:fixedにすることでメインコンテンツの内容に関係なくホームページの
幅を表す縦線を表現したかったからです。

907 :Name_Not_Found:2009/06/21(日) 13:25:11 ID:???
どんなブラウザでもそうなる?

908 :Name_Not_Found:2009/06/21(日) 13:28:23 ID:???
>>906
ボーダーが必要なだけなら、bodyに背景画像入れた方が楽だよ
<body style="background: #fff url(./images/border.gif) center 0 repeat-y; text-align: center;">
<div style="width: 800px; margin: 0 auto;">
コンテンツ
</div>
</body>

./images/border.gifは縦1px横800pxで両端の1pxだけ黒
こんな画像を用意すればうまくいくはず



知ってるかもしれないけど基本的なこととして
width,heightと一緒にpaddingやborderを指定するとブラウザ毎の解釈が違うから注意

909 :Name_Not_Found:2009/06/21(日) 13:51:19 ID:TmxSxVQO
今のところIE8,firefox,GoogleChromeで見た目の確認をしているのですが、やはり同じく右にずれてしまいます
なるほど!背景画像を使う方法は想い浮かびもしませんでした・・・。
ただ、OutFrameに画像を設定してもセンタリングがずれてるからうまくいかなさそうですね・・・。
かといってMasterの外、body要素の子要素としてfixed配置にするとなぜかセンタリングされないので・・・


910 :Name_Not_Found:2009/06/21(日) 13:55:58 ID:???
<body style="margin: 0; background: #fff url(./images/border.gif) center 0 repeat-y; text-align: center;">
<div style="width: 800px; margin: 0 auto;">
コンテンツ
</div>
</body>

少なくともこれに手を加えなければ「コンテンツ」の部分はセンタリングされて、ボーダーもうまく表示されるから、
この中にheader,menu,bodyを入れればうまくいく
この時borderもpositionも使わなくていい

どうしても右にずれるのをどうにかしたいのなら
ソースを上げてくれないと何も言えないな

911 :Name_Not_Found:2009/06/21(日) 14:19:36 ID:TmxSxVQO
長い間お付き合いさせてしまって本当に申し訳ありません。
HTMLブロック系要素の親子関係を直してみたらIE8とFireFoxでは意図したとおりに表示されるようになりました
<div class="Master">
<div class="OutFrame">
ヘッダー、メニューバー、コンテンツ等
</div>
</div>
GoogleChromやSleipnirで表示確認を行うとヘッダーとメニューバーが何故か右寄せになってしまいます・・・。
それに、なぜ以前のバージョンだとだめなのかが根本的に分からないので後味悪いです。
ソースは、どうやって載せれば良いのか分からないので調べてみます

912 :Name_Not_Found:2009/06/21(日) 14:31:57 ID:???
>>911
ソースは、今書き込んでるhtmlの内容をもう少し詳しくしたものと、
cssの内容丸ごとを載せればいいんだよ

913 :Name_Not_Found:2009/06/21(日) 15:01:46 ID:TmxSxVQO
わざわざ本当にありがとうございます。今のところのソースをそのまま載せます
<BODY>
<div CLASS="master">
<div CLASS="OutFrame">
<div CLASS="header"></div>
<ul CLASS="menubar"></ul>
<div CLASS="body"></div>
<div CLASS="footer"></div>
</div>
</div>
</BODY>
div.master{
width:40pc;
margin-left:auto;
margin-right:auto;
height:100%;
}
div.OutFrame{
width:inherit;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-color:#FFFF66;
border-top-width:0px;
border-bottom-width:0px;
border-left-width:2px;
border-right-width:2px;
height:100%;
min-height:100%;
position:fixed;
}

914 :Name_Not_Found:2009/06/21(日) 15:05:55 ID:TmxSxVQO
前回のだけでは書き込めなかったので、修正前のHTMLソースがこちらです
<BODY>
<div CLASS="master">
<div CLASS="OutFrame"></div>
<div CLASS="header"></div>
<ul CLASS="menubar"></ul>
<div CLASS="body"></div>
<div CLASS="footer"></div>
</div>
</BODY>
OutFrameがMasterの子要素の兄弟でしたが、親にしてみました。
Masterにボーダーを設定して、position:fixed;にすると
ボックスが左寄せになってしまうのでOutFrameを用意したのですが・・・

915 :Name_Not_Found:2009/06/21(日) 15:30:49 ID:???
width:40pc;

こういう表記できたっけ

916 :Name_Not_Found:2009/06/21(日) 15:31:30 ID:???
表記ってか単位

917 :Name_Not_Found:2009/06/21(日) 15:47:25 ID:TmxSxVQO
メニューバーに使ってるフォントサイズが12ptで、確か1pc=12ptだったような気がするので
メニューバーの文字数で入力しているのですが、だめでしょうか?

918 :Name_Not_Found:2009/06/21(日) 16:09:36 ID:???
文字サイズで決めるならem使いなよ
要素の1文字の幅 = 1em

919 :Name_Not_Found:2009/06/21(日) 16:21:45 ID:TmxSxVQO
それでやってみます。アドバイスありがとうございます

920 :Name_Not_Found:2009/06/21(日) 16:49:58 ID:cZ8tOMNf
・常に横幅固定ならpxの方がいいし文字サイズならem。文字サイズでの可変はあんまり推奨しない
・marginは纏めてmargin: auto;で可
・ブロック要素(div)であればwidth:inherit;は不要
・borderは
border-left: 2px #ff6 solid;
border-right: 2px #ff6 solid;
だけでいい
・masterの中にoutframeを入れるのなら、outframeのmarginは不可
・position: fixed;は親要素にもpositionを指定しなければいけない(staric除く)
・height:100%;は結構難しい動作するから非推奨

cssを↓にしたらどうかな
実際ちゃんと動くかは分からないけど
div.master{
width: 800px; //適当に
height: 100%;
margin: 0 auto; //縦100%なら縦のautoは不要
}
div.OutFrame{
height: 100%;
border-left: 2px #ff6 solid;
border-right: 2px #ff6 solid;
}



右にずれる原因はwidth:inherit;のせいのような気がしないでもない

921 :Name_Not_Found:2009/06/21(日) 17:29:28 ID:TmxSxVQO
アドバイスありがとうございます。早速一括指定で書いてみました。まだ始めたばかりで慣れないですが
少しずつ慣れて行きたいと思います。width:inherit;は前は親要素と同じ幅の数値を設定していました。
今回親子関係を変えてみてなんとか意図した表示にはなりましたが、改善前のバージョンも
改善後のバージョンも見た目上は同じ設定だから同じに見えるはずと言うのが違っていて
CSSに対する理解がまだまだだと言う事を痛感しました。

922 :Name_Not_Found:2009/06/21(日) 18:07:54 ID:???
>>920の最後の一行はwidthとborderを一緒に指定するとバグるっていう意味な

923 :Name_Not_Found:2009/06/21(日) 19:49:33 ID:???
フォントサイズは%で書くのがいいね
ブラウザで任意に変えられるからね

924 :Name_Not_Found:2009/06/21(日) 19:57:44 ID:???
ie以外ではpx指定でもブラウザ側で変えられるし
ie使ってるような人はそもそも文字サイズ変えたりしないから
実はあんまり気にしなくたっていいんだよな
%でもデザイン崩れないんならそっちのがいいだろうけど

925 :Name_Not_Found:2009/06/21(日) 20:06:51 ID:???
いつの時代のieなんだ?

926 :Name_Not_Found:2009/06/21(日) 20:35:31 ID:???
ie6はまだまだ現役なんだぜ

927 :Name_Not_Found:2009/06/21(日) 20:41:25 ID:???
IE5.5にまで対応させてる私が通りますよ

928 :Name_Not_Found:2009/06/21(日) 21:34:01 ID:i9Bn2SXu
シンプル イズ ベスト
単純に書けば全てのブラウザで通用する

初心者は単純な書き方しかできない
複雑な書式で書けるようになったら二流に昇格
複雑なことを単純化できるのが一流
どこまで単純化できるかが一流と二流の違いな

929 :Name_Not_Found:2009/06/21(日) 21:38:43 ID:???
言わんとすることは分かるが、IE5.5や6の対応状況考えると、机上の空論というか。
しょっぱいデザイン(?)で済む人はすむかもだけど。

930 :Name_Not_Found:2009/06/21(日) 21:54:13 ID:???
IE5.5や6でもそこまでハックなんか多用しなくても
メンテしやすいシンプルな作り方でいいデザインはいくらでもできる

931 :Name_Not_Found:2009/06/21(日) 22:01:01 ID:qgxJYrw/
というかなぜ今時IE5.5?

932 :Name_Not_Found:2009/06/21(日) 22:02:51 ID:???
アクセシビリティだろ

933 :Name_Not_Found:2009/06/21(日) 22:03:03 ID:???
本当に必要なことだけすればいいのに
無駄なことする仕事できない人が多いんです。

934 :Name_Not_Found:2009/06/21(日) 22:04:48 ID:???
無駄なこと = ie対応

935 :Name_Not_Found:2009/06/21(日) 22:06:46 ID:???
もうRSSだけでいいよなw

936 :Name_Not_Found:2009/06/21(日) 22:12:23 ID:???
そのRSSを検索するのはGoogleなんですね

937 :Name_Not_Found:2009/06/21(日) 23:35:54 ID:YWXrEAAo
submitボタンについて質問です。
デフォルトでは、丸っこいタイプのものと角ばったタイプの二種類があるようですが、
これはfontに影響されるのでしょうか。
今のところ、丸いタイプのボタンになっているので、できれば角ばったボタンにしたいのですが…。
見当違いのようでしたら申し訳ありません。
どなたかご教授願います。

938 :神様見習い:2009/06/21(日) 23:45:42 ID:dJFDxZjr
みなさんお久しぶりです。ぼくは元気です。。。
規制で次スレ立てられないので、タイトル/テンプレ作ったのでどなたかお願いします。。。

DWはドリームウィーバーのつもりで書いたのですが、解りにくかったようなので書き方変えました。。。
みなさん、これからもスキル向上にがんばってください。。。
-----------------------------------------------------------------------------

【Dreamweaver】HTML/CSS質問・優しく答えるスレ2【神降臨】



ここは初心者からベテランまで、
全ての人を対象に優しく答えるスレです。

類似質問大いに結構。
分からない人は何回聞いても結構。
HTML/CSSの事・Dreamweaverの事なら何でもOK。

回答してくれる方は優しい人のみ!
○○読めっ・・・何度も聞くな・・etc などと言う人は このスレを見るな!!

質問側も節度あるレスで!


939 :Name_Not_Found:2009/06/22(月) 01:24:24 ID:???
>>937
ボタン自体は特に設定しない限りブラウザやOSに依存する。
XPやオペラなんかだと角丸のボタンになるけど、クラシック表示だと四角くなったり。
四角くしたいのなら例えば、

input {
border: 1px solid #808080;
background: #f2f2f2;
}

それか画像を使うくらいかな。

940 :神様見習いの代理人:2009/06/22(月) 01:29:09 ID:xw5Ednzo
>>938
http://pc11.2ch.net/test/read.cgi/hp/1245601603/l50

タイトルが長すぎたから少し短くしました

941 :Name_Not_Found:2009/06/22(月) 01:35:41 ID:???
次スレ立てんの早くねww

942 :Name_Not_Found:2009/06/22(月) 02:07:47 ID:???
>>939
有難う御座います。
当方Opera使いなので気がつきませんでしたが、
他のブラウザだときちんと表示されていました。
初歩的なことで、お恥ずかしい限りです。

943 :神様見習い:2009/06/22(月) 02:10:39 ID:84ecL0Vn
>>940
ありがとうございます。。。

2とってこよ。。。

944 :Name_Not_Found:2009/06/24(水) 03:42:10 ID:???

【1087】家の中にストーカーがいます
Q: 38歳の弟のことです。もう7〜8年、定職に付かず家にいます。
以前から、姉である私に対して、幼稚な嫌がらせをしたりしていましたが、最近はそれがエスカレートしております。
平日の弟は、私が起きる時間より1時間〜30分早く、大音量で目覚ましをセットして起きます。
私が起きて階下へ降りると、後から降りてきます。
私が二階へ上がると、直ぐに二階に上がって来て、私の部屋の前で気味の悪い声を上げて笑い、自分の部屋のドアを勢いよく閉めます。
朝の支度で、何度も二階と一階を行き来する時も、その度に同じくついてきます。
これだけの異常行動をするのは、統合失調症などの精神病なのではないかと思いますが、いかがでしょうか?

<先生の回答>
事実がこのメールの通りだとすれば、あなたのおっしゃるように、弟さんは統合失調症の可能性があると思います。
しかし、どうもこのメールの内容は解せないところがあります。
弟さんが統合失調症で、あなたに対して何らかの妄想を持っていると仮定しますと、
ここに書かれているように、あなたの行動を監視し、いちいちそれに合わせて
嫌がらせをするという手の込んだ形は、ちょっと考えにくい行動です。
そして、「○○が自分の行動を監視し、いちいちそれに合わせて嫌がらせをする」というのは、
統合失調症の方の典型的な被害妄想の訴えでもあります。
まさかとは思いますが、この「弟」とは、あなたの想像上の存在にすぎないのではないでしょうか。
もしそうだとすれば、あなた自身が統合失調症であることにほぼ間違いないと思います。
あるいは、「弟」は実在して、しかしここに書かれているような異常な行動は全く取っておらず、
すべてはあなたの妄想という可能性も読み取れます。
この場合も、あなた自身が統合失調症であることにほぼ間違いないということになります。

945 :Name_Not_Found:2009/06/28(日) 01:44:52 ID:???
タイトルロゴを常に画面上部に表示させたくて
h1 { position:fixed; height; 100px; }
というCSSを書いたまではよかったのですが、
http://localhost/index.html#anchor
のように「#anchor」つきでアクセスすると、文章の上部がタイトルロゴの下に隠れてしまいます。
そりゃそうだと言われそうですが、なにか解決策はありますでしょうか。
つまりposition:fixedで画面上部に画像かなにかが表示されていても、
「#anchor」つきのアクセスでテキストの上部が隠れないようにする方法があれば教えてください。



946 :Name_Not_Found:2009/06/29(月) 00:04:29 ID:k23VXs+3


947 :Name_Not_Found:2009/06/29(月) 08:54:53 ID:???


948 :Name_Not_Found:2009/06/29(月) 13:17:52 ID:PMc9xuI2
>>945
次スレです。
【Dreamweaver】HTML/CSS質問・優しく答えるスレ2
http://pc11.2ch.net/test/read.cgi/hp/1245601603/l50


949 :Name_Not_Found:2009/06/29(月) 14:35:45 ID:???
>>945
新参乙です(悪いとは言ってない)
さんざんガイシュツ。
ま、ここの人は優しいから俺以外のシッタカが教えてくれます。

950 :Name_Not_Found:2009/06/29(月) 18:31:11 ID:???
店プレより

類似質問大いに結構。
分からない人は何回聞いても結構。


951 :Name_Not_Found:2009/06/29(月) 19:45:15 ID:???
新スレで聞き直したら?
こっちは埋めてしまえ

952 :ちり紙:2009/06/30(火) 12:12:15 ID:???
>>944のコピペこわい

953 :Name_Not_Found:2009/06/30(火) 20:35:59 ID:???
>>945
z-index


そもそも次スレ立てんの早すぎだろ

954 :Name_Not_Found:2009/07/01(水) 12:29:21 ID:JooizKUC
こっち埋めてから次仕えよ

955 :Name_Not_Found:2009/07/01(水) 17:38:12 ID:???
1枚の画像(hoge.gif)を用意して、
マウスのフォーカスが画像を通過した時だけ
画像の色を反転させるにはどうすればよいでしょうか?

ググッたところCSSで

filter: invert();

というCSSを使うであろう事は想像出来るのですが
肝心の画像の上をマウスが通過した場合にのみ色を逆転させる方法が分りません。


956 :Name_Not_Found:2009/07/01(水) 18:08:45 ID:???
通過というかマウスがあたってる時のみ行うならhover擬似クラス
ただし
aタグ以外のhover擬似クラスはIE6以前は対応してない
fiterプロパティはIE以外のブラウザは正式対応してない

957 :Name_Not_Found:2009/07/01(水) 18:11:09 ID:???
>>955
hover使えばよろし。
しかしながらfilterはブラウザ独自のはずだからあんまりオススメしない。
どちらかというと、通常の画像と色相反転した画像をひっつけて1枚の画像にして
hoverとpositionを使って位置をずらすようにする方法を、最近よく見かける。

958 :Name_Not_Found:2009/07/01(水) 20:20:18 ID:HcMmVmvA
少し前、皆さんにお世話になった者です。あの時はありがとうございました。
またしても質問で申し訳ないのですが、IE8だとクリックできるリンクがFirefox,
GoogleChromeでクリック出来ません。hover擬似クラスも動作してないみたいです。
色々ググってはみたのですが、IE6のPNG画像とか、今回のケースとは関係なさそう
な情報ばかりで困っています。皆さん何か心当たりは無いでしょうか?

959 :Name_Not_Found:2009/07/01(水) 20:28:43 ID:???
コードを書け

960 :Name_Not_Found:2009/07/01(水) 21:11:38 ID:HcMmVmvA
申し訳ありません。忘れていました。
<div class="Master">
<div class="OutFrame"></div>
<div class="Header">
ヘッダー内のリンクは機能している
</div>
<ul id="Menubar">
 メニューバー内のリンクも機能している
</ul>
<div class="Main">
 メインコンテンツ内のリンクが機能していない
 hoverしてもカーソルが変化しない。
 hover時の設定が機能しない。
 押せない
</div>
<div class="Footer">
</div>
</div>
こんな感じです

961 :Name_Not_Found:2009/07/01(水) 21:12:29 ID:???
>>960
htmlだけじゃなくてcssも書きなよ

962 :Name_Not_Found:2009/07/01(水) 21:38:24 ID:HcMmVmvA
a{
color: #FF6633;
}
a:link{
color: #FF6633;
}
a:visited{
color: #FF6633;
}
a:hover{
color:red;
}
a:active{
color: #FF6633;
}
アンカーに指定しているスタイルはこんな感じです。

963 :Name_Not_Found:2009/07/01(水) 21:45:37 ID:???
>962
CSSを適用させなければリンクは効くの?
あと問題の箇所はdivタグ直下?
他のタグの入れ子になってるなら、特定タグ内の時だけ問題が起こる?

964 :Name_Not_Found:2009/07/01(水) 22:12:26 ID:HcMmVmvA
アンカー関連の部分をコメントアウトしてみましたがやはり機能しません。
メニューバー用に設定したアンカースタイルもコメントアウトしてみたら押せなくなりました。
問題のリンクは、ほとんど<div class="Main">の直接の子要素ではありません。別のdivやul,p要素等の子要素です

965 :Name_Not_Found:2009/07/01(水) 22:45:19 ID:???
div class="main"の直下に問題のaタグもってきてみ
それでもリンク効かないならmainに指定してるcssがおかしいんじゃね

966 :Name_Not_Found:2009/07/01(水) 22:57:52 ID:HcMmVmvA
直接の子供にしてみましたがだめです。mainに指定されてるCSSは
div.main{
width:inherit;
margin:0 auto 0 auto;
padding:59pt 0px 41pt 0px;
clear:both;
}
てな感じです

967 :Name_Not_Found:2009/07/01(水) 23:21:33 ID:???
リンクがおかしいのなら
・単純にアンカータグや周囲のタグを間違えてる(単純な記述ミス)
・該当要素の上に被さってる要素がある(positionとかz-indexとかで)
どっちかだろうと思う
a:link,visited,hover,activeで指定したスタイルが適用されているようなら後者な

968 :Name_Not_Found:2009/07/02(木) 00:10:10 ID:/AkBgeKF
質問です。
htmlで文章を書くとき
例えば
りんご    100円
オレンジ   150円
パイナップル 300円
みたいに果物名と値段を書いて値段の部分で頭をそろえたいので
その間にスペースを入れたいのですが
空白の部分に を入れて例えば
りんご   100円
オレンジ  150円
パイナップル 300円ってやり方で問題ないですか?
50個くらい商品があるのでかなり をいれなきゃいけなく
なるので、このやり方でいいのかな?と迷ってます。
他にもっといい方法がありますでしょうか?

969 :Name_Not_Found:2009/07/02(木) 00:10:32 ID:Q/Q/2P4u
フッター直下に入れてみたらリンクが機能しました。ということはmainがいけないんでしょうか。
div.main{
width:inherit;
margin:0 auto 0 auto;
padding:59pt 0px 41pt 0px;
clear:both;
}
div.footer{
width:inherit;
margin:0 auto 0 auto;
position:fixed;
bottom:0;
background-color:#FFFFFF;
border-width:2px 0 0 0;
border-color:#000033;
border-style:solid;
}
といった感じにスタイルを指定しています

970 :Name_Not_Found:2009/07/02(木) 00:12:40 ID:/AkBgeKF
>>968
すいません968訂正です.
& n b s p;を何個も使って普通頭ぞろえを調整するもんなんでしょうか?

971 :Name_Not_Found:2009/07/02(木) 00:22:07 ID:???
>>970
するべきじゃない
だってフォントによって幅変わるからずれちゃうじゃん
でも別に読めるっちゃ読めるから気にしないならおk!

気にするならtable使うか

CSSで、
display:inline;width:***px;みたいに書けばおk

972 :955:2009/07/02(木) 00:33:11 ID:???
CSSだけでやるよりやっぱりJavaScriptでやる事にしました。

973 :Name_Not_Found:2009/07/02(木) 00:57:59 ID:???
>>968
おれはテーブル・レイアウト否定派だけど
それは、完全に、<table>を使うケースだと思うよ

974 :Name_Not_Found:2009/07/02(木) 01:02:20 ID:/AkBgeKF
>>971
そうなんですか、今全角のスペース入れて調整したんですが
フォントが変わったらずれてきますかね。
一応フォントはMSゴシックで統一してるんですが。

りんご    100円 バニラ      200円 コーラ     250円
オレンジ   150円 チョコレート   200円 カルピス    250円 
パイナップル 300円 ハワイアンブルー 200円 ジンジャエール 250円

みたいにしたいんですが、商品名によってかなり幅が違ってきます。
でも値段は頭そろえたいんですが。

テーブルは使いたくないんですが、cssの記述も商品1個1個に適用されるんでしょうか?



975 :Name_Not_Found:2009/07/02(木) 01:42:50 ID:???
>>974
もちろん。簡単に書くとこんな感じ。

<head>区間か既存のスタイルシートの中に以下をいれて、
<style type="text/css">
.item{width:100px;}
.price{width:50px;}
</style>

表示する部分
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">ばにら</span>
<span class="price">200円</span>
<span class="item">じんじゃえーる</span>
<span class="price">230円</span><br>
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">りんご</span>
<span class="price">100円</span><br>
<span class="item">ばにら</span>
<span class="price">200円</span>
<span class="item">じんじゃえーる</span>
<span class="price">230円</span>
<span class="item">りんご</span>
<span class="price">100円</span>


976 :Name_Not_Found:2009/07/02(木) 01:49:35 ID:/AkBgeKF
>>975
なるほど!わかりました、早速やってみます。
ありがとうございました!

977 :Name_Not_Found:2009/07/02(木) 06:42:05 ID:???
マークアップは定義リストだろjk

978 :Name_Not_Found:2009/07/02(木) 10:52:47 ID:???
span要素やdisplay:inlineした要素にはwidthは効かんと思うのだが
マークアップは>>977に激しく同意

縦に並べるだけなら単にfloatでdtをleft、ddをrightに振るのもいいかと
>>974のように横にも並べるなら、テキトーだけど、

dl, dt, dd { margin: 0; padding: 0; }

dl { width: 33em; }
dt { float: left; width: 8em; text-align: left; }
dd { float: left; width: 3em; text-align: right; }

<dl>
<dt>りんご</dt><dd>100円</dd>
<dt>バニラ</dt><dd>200円</dd>
<dt>ジンジャーエール</dt><dd>950円</dd>
<dt>パイナップル</dt><dd>300円</dd>
<dt>スマイル</dt><dd>0円</dd>
</dl>

余白や幅は適宜調整

979 :Name_Not_Found:2009/07/02(木) 11:21:46 ID:???
あああああいいいいい
 いいいいいいいいい
 いいいいいいいいい

上のような文章があって、二行目以下を任意のスペースあきにしたまま(ここでは1字分としてます)、
ブラウザを小さくしても、二行目以下を任意のスペースあきにしたい。

あああああい
 いいいいい
 いいいいい
 いいいいい
 いいいいい
 いい

とか、

あああああいいいいいいいいいいいいいい
 いいいいいいいいい

になるようにしたい、
テーブルの使用OKとした場合、どのように記述すればよいかわかりません。

980 :Name_Not_Found:2009/07/02(木) 11:34:07 ID:???
変なレイアウトだな…
1行目は見出しにする、とか決まってるなら
1行目はh1タグとかで括り、2行目以降(本文)をpタグでくくりゃ良いんだろうけど

何らかの意味を持ってる訳じゃなく、単純に

今日の天気は雨で
 した。学校は休み
 ました。

みたいな感じにしたいの?

981 :Name_Not_Found:2009/07/02(木) 13:10:05 ID:???
こういう事では無かろうか。
p { text-indent: -1em; }

982 :975:2009/07/02(木) 14:13:49 ID:???
>>977-978
そっか勉強になった
ありがとう!

けどspanでもwidth効くんだぜ

983 :Name_Not_Found:2009/07/02(木) 14:17:30 ID:???
ちょっと教えて。
別ページの同じ場所に画像を貼付けるのに
HTMLが下記で
<div id="bg(共通)" class="p01(そのページ名)">
<p>あああああ</p>
<div>
↑この場合 p01.html 他にp02.html、p03.html…

CSSを下記のように書いた場合
#bg{width:800px; height:200px;}
#bg.p01{background: url(image/p01-no-bg.gif) no-repeat;}
#bg.p02{background: url(image/p02-no-bg.gif) no-repeat;}
#bg.p03{background: url(image/p03-no-bg.gif) no-repeat;}

IE6で、p02.html以下のページで背景画像が表示されないんだけど
何か原因わかりますか?(Firefoxなどは問題無し)

CSSの書く順番を入れ替えると一番上に書いたページのみ表示されます。
#bg.p02{}
#bg.p01{}
#bg.p03{}
↑こう書くと、p02.htmlのみ背景画像が表示される



984 :Name_Not_Found:2009/07/02(木) 14:33:33 ID:???
>>983
セレクタの書き方がおかしい

#bg.p01
じゃなくて
#bg .p01
スペースが必要。

985 :983:2009/07/02(木) 15:09:21 ID:???
>>984
ありがとうございます。
早速やってみましたが、#bg .p01と書くとFirefoxでも画像が非表示になってしまいました。

何か根本的に間違っているのでしょうか?

ちなみに、
#bg .p02と書いてIE
#bg .p01と書いてFirefox、IEとも
画像が非表示の場合でも<p>のテキストは表示されています。

986 :Name_Not_Found:2009/07/02(木) 15:59:55 ID:???
>982
spanタグで括るとマークアップの仕方として意味合いが違ってくるんじゃないかね

>983
CSS側で#bg取っ払ってクラス名だけ書くとどうなる?

987 :983:2009/07/02(木) 17:12:40 ID:???
>>986
クラスだけで書くとなんてびっくり画像が表示されました。
今まで何を悩んでいたんだろうって感じ?

しかし、クラス名だけだと他のところに同じクラス名が出てくると
画像が表示されてしまう(今回は使ってないので大丈夫なのですが)
ように思うのですが、#bgの中の.p01という風にするにはどうすれば?


988 :Name_Not_Found:2009/07/02(木) 18:09:17 ID:???
>>987
セレクタの書き方くらい最初から調べとけよカス


<div id="bg" class="p01"></div>
のようにidとclassを一緒に指定するのならおそらく不可能
<div id="bg">
<div class="p01"></div>
</div>
これなら div#bg div.p01 {background:;} で可能

idだけを使うとすれば
div#p01,
div#p02,
div#p03 {
共通部分のスタイル
}
div#p01 {background:;}
div#p02 {background:;}
これで<div id="p01"></div>を使えばうまくいくはず

まぁクラス名を被らないようにするのが簡単だろ

989 :Name_Not_Found:2009/07/02(木) 18:35:29 ID:???
>>988
詳しい解説サンクスです。

> <div id="bg" class="p01"></div>
> のようにidとclassを一緒に指定するのならおそらく不可能

不可能というのは理解しました。
ということは、そもそも<div id="bg" class="p01"></div>という書き方そのもがNGなんでしょうか?
それともCSSをちゃんと理解して使えば(idやclass指定)こういう書き方は問題ない?

990 :Name_Not_Found:2009/07/02(木) 19:02:46 ID:???
これ見つけたけど同じ感じ?

http://q.hatena.ne.jp/1213529705

991 :Name_Not_Found:2009/07/02(木) 19:05:27 ID:???
>>989
>そもそも<div id="bg" class="p01"></div>という書き方そのもがNGなんでしょうか?
問題ない。

992 :988:2009/07/02(木) 19:10:41 ID:???
>>989
<div id="bg" class="p01"></div>自体には問題はないよ
全く使われないってこともないから>>983のケースなら、クラス名だけを記述するのがベストだと俺は思う
クラス名が被るのを心配してるみたいだけど、自分一人でサイトを管理するのなら特に問題はないだろうし
最終的には好み次第かな

993 :Name_Not_Found:2009/07/02(木) 22:18:20 ID:???
まだ勘違いしている悪寒

994 :Name_Not_Found:2009/07/03(金) 02:59:06 ID:EmJc7+sr
下のほうにいくと・・・・
ドコモ専用


http://beetv.jp/ft/horror02/1/1/?uid=NULLGWDOCOMO&rl=http%3A%2F%2Fbeetv.jp%2Fpg%2F10000121%2F


995 :神様見習い:2009/07/03(金) 07:26:51 ID:qBBScwLZ
梅マッシュ

996 :神様見習い:2009/07/03(金) 07:27:54 ID:qBBScwLZ
みなさん次スレでもスキル向上ばんばってください

997 :神様見習い:2009/07/03(金) 07:28:44 ID:qBBScwLZ
次スレです。。。
【Dreamweaver】HTML/CSS質問・優しく答えるスレ2
http://pc11.2ch.net/test/read.cgi/hp/1245601603/l50


998 :神様見習い:2009/07/03(金) 07:30:00 ID:qBBScwLZ
次スレでも神様降臨お待ちしております。。。

999 :神様見習い:2009/07/03(金) 07:31:16 ID:???
ぼくはまだ神様見習いのへっぽこです。。。

1000 :神様見習い:2009/07/03(金) 07:38:30 ID:oUDiSKpc
では次スレで。。。!

299 KB
★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)