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

このエントリーをはてなブックマークに追加
1Name_Not_Found
ここは初心者からベテランまで、
全ての人を対象に優しく答えるスレです。

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

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

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

2Name_Not_Found:2009/03/13(金) 22:38:23 ID:???
http://new-com.jp/
まだ製作途中ですが、HTMLの文法が汚いと他スレで指摘されました。
indexページのソースだけでも良いので、何か助言いただけないでしょうか。
よろしくお願いいたします。
3Name_Not_Found:2009/03/13(金) 22:43:07 ID:???
tidyとかで自動整形するのってどうなの?
4Name_Not_Found:2009/03/13(金) 22:57:05 ID:???
>>2
特段汚いってレベルじゃないけど
2つ気になった点

 1.htmlの基本エラーが9つありました
 2.NEWの左側の文章ブロックが画像と引っ付きすぎ
  せめて10〜15px程度あけるほうが見やすい

以上
5Name_Not_Found:2009/03/13(金) 23:00:02 ID:???
>>4
ありがとうございます。
早速修正します。
6Name_Not_Found:2009/03/13(金) 23:17:27 ID:???
>>2
・最初にDOCTYPE宣言をきちんとしなさい。
・文字コードを指定しなさい。
・fontタグは非推奨です
・見出しはstrongよりもh1・h2・h3などのほうが適切
・一箇所だけA HREFと大文字になってる。小文字で統一しなさい。
・fotterじゃないよfooterだよ
・その中もダラダラ書きじゃなくて、定義リストにするとかさ。
・悪いことは言わん、忍者は最後にしときなさい。

CSSも含めまだ大量にあるけど、ま、頑張れ。
7Name_Not_Found:2009/03/13(金) 23:30:25 ID:???
>>6
ありがとうございます。
早速修正いたします。
8神様門前払い:2009/03/14(土) 03:26:26 ID:???
>>6
うぉー神様降臨だ!スレ作ったかいがありました。

今後ともよろしくお願いしますです。
早くそんなレベルになりたい。。。
96:2009/03/14(土) 04:16:22 ID:???
>>8
俺が神だったらこんな時間まで仕事してねーっての。もう寝るけど。
で、非常に>>2のサイトに興味が湧いたので、飽きるまで勝手なこと書くわ。

修正後の再修正箇所
・最初のXML宣言→<?xml version="1.0" encoding="Shift_JIS"?>は、無い方がいい
 CSSのレンダリングに問題が出るんでね。勉強するなら無しで書いた方が。
 詳細は「XML宣言 後方互換モード」でググレ。
・文字コードの指定ってのは<head>直下に以下を入れること。
 <meta http-equiv="content-type" content="text/html; charset=shift_jis">

無料制作とか、下層のオレンジのページとかも面白いサイトじゃん。
・折角Jquery使ってるんだから、下層メニューの説明文もフェードインとかで遊んだ方が好み。
・同説明文の当たり判定が下向き矢印ってどうよ?
 普通は文字のあるバーの方にhoverするわな。

・CSSはそれぞれやり方があるけど、ブラウザのデフォを殺してから指定する方が良い。
 最初にこんな感じ(個人差あり)↓
 body, h1, h2, h3, h4, h5, p, dl, dt, dd, ul, li, form {
margin: 0px;
padding: 0px;
    font-size: 100%;
 }

あとはアレだな。無料で作る理由だな。普通に考えて二つくらいだろ
・自分の勉強と就職の際の制作実績のため
・裏で悪いことを画策している

そのフォローはあったほうが依頼しやすい。個人情報保護とか。
何かHP評価スレみたいになったなw
10神様門前払いレベル:2009/03/14(土) 04:27:52 ID:???
念のためこのスレを立てたのがぼくで
そのHPは他人です。念のため


まだ言ってることまったく理解できないレベルです。。。orz
116:2009/03/14(土) 04:45:06 ID:???
んなこたーソースや画像見りゃわかる。
スレ立てたのが君だとは思わんかったがw
12神様門前払いレベル:2009/03/14(土) 04:49:20 ID:???
すぐに追い付きます。
あまり遠くに行かないようお願いします。。。
13Name_Not_Found:2009/03/14(土) 16:07:26 ID:???
超初心者です。他スレで聞いても答えが返ってこなかったのでこちらに失礼します。
<!DOCTYPE>は書かなくても平気なんですか?バージョンとかよく分からないのですが…
14Name_Not_Found:2009/03/14(土) 19:43:39 ID:???
>>13
んーと…無くても一応表示はできる。
が、複雑な内容の場合、無いとブラウザによって変な表示になることもある。
あと、あった方が閲覧者のPCに優しい。

かなり強引だけど……人間に例えるなら、
書類を読み始める前に、その書類が書かれている言語が
英語なのかフランス語なのかドイツ語なのかを最初に書いてあったら
辞書を事前に探してから読み始められるから読みやすいでしょ。そーゆー感じ。

もし企業サイトなどで、SEO対策を考えているのであれば、必ず書くことをオススメする。
もし個人のサイトで、自分の気に入る人だけ来ればいいのであれば、別に無くてもいいんじゃない?
15Name_Not_Found:2009/03/14(土) 21:10:16 ID:???
>>9
ありがとうございます。
修正いたします。


コンテンツを28日までに全て出そうと思っておりますので、
ここはどうか、という所ありましたらメール、スレで指摘いただければと思います。
よろしくお願いします。
http://new-com.jp/
16Name_Not_Found:2009/03/14(土) 22:44:04 ID:???
>>14
分かりやすい例えまでありがとうございます!とても助かりました。
本当は書きたいところですが、間違ったことを書いたらまずいので書かないことにします。
17Name_Not_Found:2009/03/14(土) 23:22:57 ID:???
>>16
それなら、DOCTYPE宣言も含めて、htmlファイル全体の記述チェックをしてくれるサイトでチェックしてみるといい。
http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html
こことか、具体的にどこがどうダメなのかを指摘してくれるからわかりやすいよ。
18神様門前払い:2009/03/15(日) 00:38:53 ID:???
こんなのもありますよ。ぼくはまだ使うレベルにもなってないですけど。。。orz
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
>>17さんの紹介してくれたサイトの方が解りやすいかも
19:2009/03/15(日) 02:22:53 ID:6HaYwzB1
すいません!!
単純な質問なんですが(*^_^*)
[>>14]←これもタグなんでしょうか!?できたら少し詳しく教えてくださいm(_ _)m
20Name_Not_Found:2009/03/15(日) 04:44:09 ID:???
[<a href="../test/read.cgi/hp/1236949723/14" target="_blank">>>14</a>]←これもタグなんでしょうか!?できたら少し詳しく教えてくださいm(_ _)m
21Name_Not_Found:2009/03/15(日) 04:45:20 ID:???
あれ。実体参照文字は変換されるのか・・・
22Name_Not_Found:2009/03/15(日) 06:33:45 ID:???
他のサイトに、テキストを使ってリンクするには

<a href="URL(アドレス)">テキスト</a>というように記入。
リンクするための<a>タグを使って、値にリンクしたいサイトのアドレスを、http://からすべて正しく記入し
リンクを設定させたいテキストをこのタグで囲む。

リンクを設定すると、標準の設定では文字の色が青色になりアンダーラインが引かれる。
それと、target属性をつけて値に _blank を指定すると、新しいウィンドウが開いて、
そこにリンク先の内容を表示する事も出来る。
23Name_Not_Found:2009/03/15(日) 11:04:13 ID:???
このスレじゃ、こういう話はご法度なのかも知れないが、
基礎が分かってない人は、やっぱりサイトとか見たほうが早いと思うんだ。
ってことで2つ紹介。

30分間HTML入門
ttp://www.kanzaki.com/docs/html/lesson1.html

とりあえずサンプルのコピペだけでHTML書いているような人は一読してみるといい。
基礎が分かっているのといないのとでは、サンプルの理解度も全然違ってくる。


HTML 4.01 仕様書邦訳
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/

仕様書なんて小難しいもの見たくないだろうが、
要素の説明はヘタな「タグ辞典」を見るより便利だと思う。
上にある「要素索引」「属性索引」のリストから知りたいものを探せばいい。


あとは、>>17-18のようなところでしっかりチェック。
分からないことは適宜ぐぐるなり質問するなりすれば、だんだん分かるようになってくるかと。
HTML自体は大して覚えること無いから、基礎さえおさえれば簡単だと思うよ。
24Name_Not_Found:2009/03/15(日) 12:11:50 ID:PbFzRU6N
1〜2週間我慢して、本みてやってみたらコレくらいなら理解できるようになるよ。
25Name_Not_Found:2009/03/15(日) 16:26:47 ID:???
サイトのトップに幾つかの画像をランダム表示させることはできたのですが
幾つかのフラッシュファイルをランダムに表示させることができません。
どのように記述すればよいの教えていただけないでしょうか
よろしくお願いします。
26Name_Not_Found:2009/03/15(日) 17:30:44 ID:???
ドリームウィーバーでコーダスライダーみたいなの製作したいのだけど、
どうしたらできるでしょう?

フレームやボタン、画面のサイズ皆オリジナリティにしあげたいです。
http://mkicle.biz/practice/coda-slider/#3(こうゆうの)
27Name_Not_Found:2009/03/15(日) 17:48:58 ID:???
>>26
DW単体の機能じゃできん。
参考サイトもそうだけど、Jqueryのプラグインが一般的だ。
つか、HTML満足にわからないで、あれもしたいこれもしたいってのは本末転倒。
28Name_Not_Found:2009/03/15(日) 18:05:18 ID:???
Jqueryのプラグインというのは何ですか?
29Name_Not_Found:2009/03/15(日) 18:10:11 ID:???
うーん…DWのスレで訊いた方が専門的なことを教えてもらえるんじゃないかな?
少なくとも自分はDWがわからんので、アドバイスができない…。
30Name_Not_Found:2009/03/15(日) 18:11:01 ID:???
>>6からスレに協力してみたが、バカさ加減が過ぎて嫌になってきた。

「ググレカス」の言葉を残して降ります。
31Name_Not_Found:2009/03/15(日) 19:02:44 ID:???
>>30
初心者も勉強する気の無いアホ(>>28)と勉強する糸口を欲しがってる人(>>門前払いら)に別れる
後者には手を差し伸べてやってもいいんじゃまいか
32Name_Not_Found:2009/03/15(日) 19:10:59 ID:PbFzRU6N
HTML、CSSの基礎がわかってても苦労してるのに、
理解せずDW使うなんてむりだろ!
DW自体の理解も必要なのによ!
ビルダーでも使っとけよww
33Name_Not_Found:2009/03/15(日) 21:20:34 ID:0TDcCTye
>>30-31

ごめん。君達にはちょっと難しすぎたね。
34神様門前払い:2009/03/15(日) 22:01:07 ID:0UlhIp54
コラ!ぼくはまだ質問するレベルにもなってないんだぞ
スレ存続してねあードリドリ
35Name_Not_Found:2009/03/15(日) 23:17:38 ID:0TDcCTye
自己解決しました。ちょろいもんだぜ。


36Name_Not_Found:2009/03/15(日) 23:20:39 ID:???
>>33>>35のおかげでこのスレオワタwwwww
37:2009/03/16(月) 02:17:22 ID:2+otmIQC
>>19
への返答!!丁寧にありがとぅございました♪
良く読みあさって勉強します(*^_^*)
38Name_Not_Found:2009/03/16(月) 07:28:49 ID:???
ちょろいスレ終了ですね・・・
39神様門前払い:2009/03/16(月) 21:18:27 ID:p7ePV3vP
HTMLとCSSの勉強で
画像の横にコメントを回り込ます作業なんですが
テキストに書いてある通りにやっても回り込みません

正解の完成ファイルがあってそれをコピーして貼り付けてもダメなんで自分の入力ミスでは
ないみたいです。

これはブラウザの問題なんでしょうか?
IEとFirefoxどちらもダメでした。
40神様門前払い:2009/03/16(月) 21:49:38 ID:p7ePV3vP
も〜〜〜〜〜〜〜〜〜〜な〜ん〜だ〜よ〜〜〜
HTMLの方のスペルが間違ってました。CSSで指示出しても回り込まないはずだ。
解決。
41神様門前払い:2009/03/16(月) 22:00:23 ID:p7ePV3vP
あれやっぱりダメだ。
もう疲れたよ
オレは疲れた。
42神様門前払い:2009/03/17(火) 00:50:44 ID:ZYYJQ94O
スペル間違いもう一個あった。あぁ疲れた。。。orz
43Name_Not_Found:2009/03/17(火) 12:03:18 ID:???
>>42
そういう時はValidator使うんだ。
問題点の切りわけをせずに、だらだら弄っていても泥沼だよ。
44Name_Not_Found:2009/03/17(火) 18:17:52 ID:hpN3UOqg
ホームページ制作王を使いこなすことができるなら、
下らないHTMLタグを覚える必要から解放されるだろう。

COMDEXが認めた世界標準、ホームページ制作王。
21世紀のワールドスタンダードの称号は伊達ではあるまい。
45神様門前払い:2009/03/17(火) 23:14:09 ID:ZYYJQ94O
>>43
もちろん使いました。。。英語ばかりでよくわからなかった。。。orz
翻訳サイト使っても翻訳してくれないのです。

原始的に自分で間違い箇所発見してその後バリデータ見てどんな
表記になってるのか確かめたので次は少しは使えるかなと。。。

46Name_Not_Found:2009/03/18(水) 01:05:55 ID:???
んじゃanother html lint使えよ
CSSはw3cでも日本語だったろ
47神様門前払い:2009/03/18(水) 01:43:02 ID:lZDbHIPX
another html lintはCSS調べられますか?
48Name_Not_Found:2009/03/18(水) 02:59:03 ID:???
>> CSSはw3cでも日本語
49神様門前払い:2009/03/18(水) 03:06:33 ID:lZDbHIPX
って言われても意味わからない

another html lintでCSSをわざと間違ったスペルで入力してチェックしても
アドバイスでなかった。。。


さっき、なか卯でカレーとミニうどんのセット食べてきました。あれで590円は安いもんだ。。。
50Name_Not_Found:2009/03/18(水) 03:08:50 ID:SFP7HUtR
フロートとクリアについて教えてくり
51Name_Not_Found:2009/03/18(水) 09:59:20 ID:???
>>49

Another HTML-lint は HTML のチェックしかしないので,CSS は
W3C CSS validator でどうぞ.

>>50

img.fig { float:left } とかすると,img がフロート(浮動体)の
ブロックボックスになって,コンテナブロックの中で可能なかぎり
左に寄る.フロートの右側の空間にはテキストが流し込まれる.
h2 { clear:left } とすれば, フロートの下辺が必ず h2 のボックスの
上辺より上になる (h2にフロートが割り込むことはない),という感じです.
本などで,図表があるページで図表の横や下に文章が配置されている
のとだいたい同じです.

52神様門前払い:2009/03/19(木) 09:24:47 ID:gaEPbgQ6
>>51
どういたしまして。。。
53Name_Not_Found:2009/03/20(金) 12:59:33 ID:???
http://imepita.jp/20090320/466770

並んだ画像と、その下にそれぞれの説明文をつけたいのですが
こういう配置にするにはどのようにCSSを書けばいいのか
お教えいただけますか?
54Name_Not_Found:2009/03/20(金) 13:12:40 ID:???
>>53
CSSでやりたいなら、《画像1+説明文》と《画像2+説明文》をそれぞれdivで囲って、フロートさせるとできるよ。
詳細はCSSを教えてくれるサイトのfloat属性に関する説明を読むといい。
もしくは、CSSテンプレを配布してるサイトから「2カラム」と書かれたテンプレを探してソース盗み読んで勉強。
55Name_Not_Found:2009/03/20(金) 13:21:45 ID:???
>>54
divで囲ってfloatで並列ですね。
なんとなく分かりました、ソース盗み読んできます!
ありがとうございました!
56Name_Not_Found:2009/03/20(金) 14:54:01 ID:???
いや普通dlでやるだろ
57Name_Not_Found:2009/03/21(土) 19:52:42 ID:Up7uvoSu
lintで通して99点であと1点なんだけど

<textarea name="Commnets" cols="20" rows="3" tabindex="3" accesskey="H"></textarea>
この部分に問題があるらしく、

<textarea> には初期値となるテキストを指定しておきましょう。ってエラーが出るんですけど…
どういう事なのかサパーリわかりませんorz
どなたか教えてください
5857:2009/03/21(土) 20:02:46 ID:???
すいません自己解決しました…なんでこんな事に気づかなかったんだ…
59Name_Not_Found:2009/03/21(土) 23:14:06 ID:???
背景が黒のページで透明なgif画像でスペースを作って
IE8で見ると表示されてしまいます。
IE7ではなりませんでした
なんですかこれ?
60Name_Not_Found:2009/03/22(日) 01:19:12 ID:???
大人しくcssでマージンなり設定しろってことだろ
61Name_Not_Found:2009/03/22(日) 17:11:27 ID:???
へぇー
62Name_Not_Found:2009/03/23(月) 12:18:09 ID:???
XHTML+CSSで書いてます。
サイトなどに良くあるWhat'sをul,liで作ろうとしているのですが
うまくいきません。

■2009.03.23
ホームページを更新しました。

というのを

■2009.03.23
 ホームページを更新しました。

というように改行したいのです。
さらに本文のところを幅一杯に使ってしまって長くなっても
きちんとインデントで改行できるようにしたいです。

■2009.03.23
 ホームページを更新しました。新着情報はこち
 らからご覧下さい。

のようにです。
しかも■は画像で、オンマウスで反応するようにしたいので
background-imageで表示しています。
63Name_Not_Found:2009/03/23(月) 16:25:23 ID:???
liでやる意味あんの? ■を背景画像でやるんだったら
dl,dt,dd使ったほうがよいのでは。
cssによるddの左マージン設定でインデントは好きに決められる。
せっかくXHTML使ってるなら論理的なマークアップを心がけ
cssオフでどう見えるかも考えることをおすすめする。
64Name_Not_Found:2009/03/23(月) 17:54:36 ID:???
普通dlでやるけどulでやりたいなら更新情報のliにクラスつけて左マージン設定
6562:2009/03/23(月) 21:28:19 ID:???
ありがとうございます。もっと精進します。
66Name_Not_Found:2009/03/25(水) 19:58:06 ID:phh+ptZw
Firefoxで、「CSSのbody以外」を読み込んでくれません。
なぜでしょうか。
67Name_Not_Found:2009/03/25(水) 22:27:27 ID:???
俺もULとDLの違いわかんねーや。
68Name_Not_Found:2009/03/26(木) 03:40:56 ID:???
質問です。

.bsub_block{
text-align:center;
}
.menu{
width:250px;
float:left;
}
.main{
width:550px;
}

<div class="bsub_block">

<div class="menu">メニュー</div>
<div class="main">メイン</div>
</div>

上記のように記述し、
         ┌───┬───┐
         │文字列│文字列│
         └───┴───┘
のようにしたいのですが、ブラウザ(IE7)で確認すると、
┌───┐        ┌───┐
│文字列│        │文字列│
└───┘        └───┘
こうなってしまいます。
clearも使っていろいろ試してみたのですが、うまくいきませんでした。
どういう記述をすればよくわからないので、指摘等お願いします。
69Name_Not_Found:2009/03/26(木) 04:14:56 ID:???
http://rstyle.blog1.fc2.com/?style2=cyberspace_behind&index

↑のテンプレートを使っているのですが、
これを3カラム表示にしたい場合html・cssのどこをどう弄ればよいのでしょうか?
分かる方がいましたら回答の程よろしくお願いします
70ちり紙:2009/03/26(木) 12:16:28 ID:???
>>68


.main {
width:550px;
float:left; /** ← この行を加える*/
}
71Name_Not_Found:2009/03/26(木) 14:59:34 ID:aEgAOiKi
携帯電話でHTMLページを作ろうとしていて、
ドコモ(906など)の制限と思われる100KBぎりぎりまで画像を使いたいです。
その際、「ディスク上のサイズ」・「サイズ」のどちらを見ればいいのでしょうか?
1機種で表示で表示できたら、それは他でも多分表示できる容量と思っていいでしょうか?
72Name_Not_Found:2009/03/26(木) 15:44:18 ID:???
float:left?
rightじゃなくて?
73Name_Not_Found:2009/03/26(木) 16:38:00 ID:???
>>70
回答ありがとうございます。
やってみましたが、
┌───┬───┐
│文字列│文字列│
└───┴───┘
のように中央に寄らず、左に寄ってしまいます。
74Name_Not_Found:2009/03/26(木) 17:31:53 ID:???
>>73
.bsub_block{
width:800px;
text-align:center;
}

中央表示の2カラムが作りたいの?
75Name_Not_Found:2009/03/26(木) 17:58:02 ID:???
>>74
そうです。
76Name_Not_Found:2009/03/26(木) 23:10:59 ID:???
.bsub_block{
width:800px;
text-align:center;
margin:0 auto;
}
77Name_Not_Found:2009/03/26(木) 23:46:51 ID:???
>>69
それソース見てみたけど2カラムでしか表示できない構造になってる
3カラムにするにはかなりの腕が必要だよ
少なくともどこに○○をコピペすればとか、○○の部分を△△に入れ替えればとかそういうレベルじゃない
一からHTMLを書き直す必要がある
78Name_Not_Found:2009/03/27(金) 00:16:11 ID:???
>>76
margin:0 auto;
を記述したらうまくいきました。
ありがとうございました。
79Name_Not_Found:2009/03/27(金) 03:07:02 ID:???
>>77
2カラムでしか表示できない構造ってなんだよwそんなのねーよwww
普通の一般的なブログのHTMLじゃねぇか
8071:2009/03/27(金) 03:16:21 ID:0/wFt8b+
ドコモのSO906iで試したところ、
ディスクのサイズは100KBをだいぶ超えても大丈夫でした。
サイズでは100KBオーバーくらいまで増やすと表示しきれなくなりました。
この機種に関してはサイズが100KB超えなければいいようです。
これが他の機種でもそうなのか教えていただきたいです。
同じデータをauで開こうとしてできたので、1機種だけはできています。
1機種で表示できたら、それは他でも多分表示できる容量と思っていいでしょうか?
81Name_Not_Found:2009/03/27(金) 04:18:47 ID:???
>>79
は?お前HTML弄ったことないだろ
あれをどうやりゃ3カラムに出来るんだよ?
知ったかも大概にしとけ、これ以上知ったか続けて恥書くのはお前だぞ
82Name_Not_Found:2009/03/27(金) 04:44:32 ID:???
83Name_Not_Found:2009/03/27(金) 05:29:12 ID:???
>>82
それは[samurai_bamboo_3col]のだろ
自分のブログの編集画面で>>79のにその記事の付け足してみろ
3カラムにならんばかりかレイアウト崩れて見れたもんじゃなくなるのがオチだ
散々知ったかした挙句の最後の悪足掻きがこれか、ほんっと救いようの無い馬鹿だなお前は
84Name_Not_Found:2009/03/27(金) 11:19:39 ID:???
>>83

ココは、...やさしく教えるスレ...だYO!
85Name_Not_Found:2009/03/27(金) 14:23:42 ID:???
>>84
充分優しく教えてるだろ
優しくなけりゃこんな馬鹿対応してやらねぇよ
86Name_Not_Found:2009/03/27(金) 14:53:53 ID:???
第一優しく教えてやる必要があるのは質問した>>69に対して
野次飛ばしてきた>>79に優しくする筋合いは無い
87Name_Not_Found:2009/03/27(金) 15:48:18 ID:???
どうぞ教えてください。
ieで、指定された色は指定されている通り、指定されてない色は黒で表示する術を。
88Name_Not_Found:2009/03/27(金) 16:22:01 ID:???
>>86
野次じゃなくて指摘だボケw
俺に論破されて悔しいかwww
89Name_Not_Found:2009/03/27(金) 16:42:43 ID:???
>>88
論破されてるのはお前だろ
3カラムにしてみろよ、できねぇだろうが
レスすればするほど自分の無知を晒してることにそろそろ気付けよ
お前が>>77を否定した根拠が>>82で、それに対する>>83のレスがある時点でもうお前は終わってんの

本当に>>69のを3カラムに出来るというならやってみろ
出来ないなら自分が知ったかで絡んでたこと認めてさっさと消えろ
90神様門前払い:2009/03/27(金) 17:22:05 ID:nH1o9C8C
ぼくは、論破も指摘も3カラムも全然言えないレベルです。

羨ましい。
91Name_Not_Found:2009/03/27(金) 18:02:02 ID:???
>>87
色を指定したいのは文字?
それとも他の何か(ボックスとか背景とか)の話?
92Name_Not_Found:2009/03/28(土) 00:10:02 ID:???
>>90
この二週間で何ができるようになった?
93神様門前払い:2009/03/28(土) 09:42:25 ID:5ZqSWoFc
>>92
え〜っと、ドリ4の使い方少々と

HTML/CSSでテーブル、リンク、画像の挿入とかです。
いま、Pixiaで素材作ってHPつくるとこです。

解らない事その都度出てくるでしょうけど。。。
9487:2009/03/28(土) 22:38:32 ID:???
>>91
背景の色です。
95Name_Not_Found:2009/03/29(日) 21:35:23 ID:???
リンクを新窓で開いて、その新しく開いた窓からさらに新窓でリンクを開きたいのですが、どうすればいいのでしょうか。
どうしても最初に開いた窓と同じ窓に表示されてしまいます。
説明下手ですいません。
96Name_Not_Found:2009/03/29(日) 21:57:48 ID:???
>>95
target="_blank"
ただ特に理由がなければ別窓で開かせるのはおすすめしないが…
97Name_Not_Found:2009/03/29(日) 22:07:29 ID:???
>>94
body{
background-color:#000000;
}

こういうことかな?
98ちり紙:2009/03/30(月) 12:11:32 ID:???
>>94

* { background : black; }

これかな?
試してないよ...
99Name_Not_Found:2009/03/30(月) 14:53:43 ID:???
HTML/CSSの宣言はどうすればいいのでしょう
初心者なので大抵のタグ使えるようなのが良いと思うのですが
これで大丈夫ですか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

みなさんはどうされてますか?
100Name_Not_Found:2009/03/30(月) 17:20:37 ID:???
>>99
それで問題ないと思います.

自分は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
にするか,手抜きで <!DOCTYPE HTML> にすることが多いです.
XHTML の場合は XHTML 1.1 のを使うか,DOCTYPE宣言なしに
しています.

CSS はバージョンを宣言するような仕組みがないので,特に何も
する必要はないです.
101Name_Not_Found:2009/03/30(月) 17:48:03 ID:???
>>100
HTMLにCSS反映させるのはどうすればされますか?
エディタ使ってやってるのですが背景画像を指定してもされないんです
102Name_Not_Found:2009/03/30(月) 18:02:12 ID:???
>>101
まずは実際のソース(HTML・CSS両方)をここにコピペみてください。
103102:2009/03/30(月) 18:10:51 ID:???
例としてはこんな感じ。ほんと最低限だけど…。
背景の色変えるだけなら、これでできるよ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Expires" content="86400">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<style>body{background-color: #000;}</style>
</head>
<body>
コンテンツ
</body>
</html>
104Name_Not_Found:2009/03/30(月) 18:25:04 ID:???
これがHTMLで

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keyword"lang="ja"content="〜">
<meta name="Description"lang="ja"content="〜">
<title>〜</title>
<link rel="stylesheet" type="text/css" href="css/test.css" media="screen.print" />
</head>
<body>


</body>
</html>
------------------------------------------------------------
これがCSSです
@charset "Shift_JIS";

body {
background-image:url(../image/〜jpg")
}
105Name_Not_Found:2009/03/30(月) 18:26:22 ID:???
素材で背景を指定したいのですがこれで指定されないんですが
どこがいけないのでしょうか?
106Name_Not_Found:2009/03/30(月) 19:35:54 ID:???
>>105
タイポがあるっぽいです.
media="screen.print" → media="screen,print"
background-image:url(../image/〜jpg") → background-image:url("../image/〜jpg")

こんな感じ(↓)でどこで問題が発生しているかの切り分けを行ってみるといいです.
1. HTML と CSS にタイポはないか
(ソースコードを Another HTML-lint, CSS Validator にかけてみる)
2. HTML の指定で CSS が読み込まれているか
(CSS に body { color: red; } などと書いて文字色が変化するか試す)
3. CSS から 画像は読めているか
(画像のパスをフルパスで指定するなどしてみる)

蛇足ですが,<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
を宣言したときは HTMLのルールに従って書く必要があるので,
htmlタグ中にあるの XHTML専用の属性 xmlns="http://www.w3.org/1999/xhtml" を削除したり,
meta要素やlink要素の閉じを HTML式の '>' にしたほうがいいです ( '/>' は XHTML式 ).
107Name_Not_Found:2009/03/30(月) 21:10:06 ID:???
>>106
ありがとうございます。
タイポありますね。

あと宣言ダメみたいです、宣言無しのサイトもありますが無しでも大丈夫ですか?
宣言してルールに縛られるなら、しないで縛られないほうがやりやすいと思うのですが
108Name_Not_Found:2009/03/30(月) 21:14:27 ID:???
109Name_Not_Found:2009/03/30(月) 21:24:47 ID:???
>>108
レスありましたね失礼しました。
商用とするなら宣言はあったほうがよさそうですね

IEとFirefoxで正常に動くならそれでも良いんですけど

ルールも指定の仕方も一つに統一して欲しいです。


ありがとうございました。
110Name_Not_Found:2009/03/30(月) 22:19:43 ID:???
CS4の方でちょっと質問よろしいでしょうか?
例えば以下のような同じ構成のhtml(この場合HogeBlock)が繰り返される部分があったとします。
<div class="HogeArea">

<div class="HogeBlock">
<h4>タイトル</h4>
<p>本文〜</p>
</div>

</div>
これをデザイン画面上で簡単に複製・編集・削除したりする方法がわからないです。
一応ヘルプを見てテンプレートやらライブラリやらそれらしき機能はあったので試してみたのですが
なにぶんよく概念がわかっておらず上手く動作しません。
ほかの所で<p>だけで囲んだ部分はデザイン画面上で改行するだけでwordみたいに複製してくれたんですが。
どなたかお願いします。
111Name_Not_Found:2009/03/31(火) 10:14:28 ID:???
<div id="">      これの” ”の間に入れる文字はどんな意味合いがあるのですか?

画像ならどこどこのファイルの何とかって画像! と指示を出しているんだと解るので
どんな文字入れれば良いか理解できるのですが
112111:2009/03/31(火) 10:17:01 ID:???
自己解決しました。
113ちり紙:2009/03/31(火) 12:26:34 ID:???
>>110

DWのデザインビューの話だよね?

WORDの編集みたいに編集できると思わない方が良いよ!
DWをメインで使っている人は、デザインビューとコードビューの両方を表示させて作業している人が多い。

デザインビューで要素を選択して、ハイライトされたコードを弄るという方法じゃないと
まともに使えないよ

114110:2009/03/31(火) 12:43:35 ID:???
>>113
レスどうもです。
自分もやるとしたらその方法でしょうね。
しかし実際、使う人はド素人なんでコードを弄るのは難しそうで…

上記のライブラリの説明画面にデザインビュー画面上で1項目ごとに認識して
リピートオブジェクト化してる画面が載っていたので、
なんとかそれが実装できないものかと思いました。
115Name_Not_Found:2009/03/31(火) 15:43:23 ID:???
HPにあるボタンでマウス置いた時と置いてない時でボタンの色が変わりますが
何でどう指定すればいいのですか?素材は二つ用意してあるのですが
116Name_Not_Found:2009/03/31(火) 16:44:46 ID:???
>>115
ロールオーバーでご検索ください。
117Name_Not_Found:2009/03/31(火) 17:31:35 ID:???
>>116
ロールオーバー了解です。ありがとう!(やりたい事の名称も解らないから一苦労です)
118Name_Not_Found:2009/03/31(火) 17:44:15 ID:4D/gwe6f
ヤフーの地図APIなんですが、緯度や経度の数値を変えても
表示する位置が毎回同じなのはなぜでしょうか

<div id="mapdiv" style="width:240px;height:280px;border:solid 1px">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=8,0,0,0"
width="100%" height="100%" id="YFMap" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="movie"
value="http://map.yahooapis.jp/MapsService/Flash/V2/?appid=appidhogehoge" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars"
value="routexml=route.poi&crossDomain0=crossdomain.xml&
pos=35.5,139.5&layer=2&mode=map" />
<embed src="http://map.yahooapis.jp/MapsService/Flash/V2/?appid=appidhogehoge"
quality="high" bgcolor="#ffffff" width="100%" height="100%"
name="YFMap" align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="routexml=route.poi&crossDomain0=crossdomain.xml&
pos=35.5,139.5&layer=2&mode=map" />
</object>
</div>
119Name_Not_Found:2009/03/31(火) 18:49:06 ID:???
( ^ω^)
120Name_Not_Found:2009/04/01(水) 01:20:02 ID:???
>>118
これはここに貼るために改行したのでしょうか?

pos= の前に改行や半角スペースがあったら消してください。

それで動作確認済みです。
121Name_Not_Found:2009/04/01(水) 02:18:49 ID:???
透過PNGを背景につかうのが妥当かどうかの質問です。

http://www.premiumagency.com/majua.html
(↑私の作ったページではありません)
上のページのNEWSやPRESSRELEASEのように
透過PNGを背景に使うと半透明の背景が作れるんですが、
これが意図どおりに表示されるのはIE7以降で
例えばIE6ではアルファ値が無視されちゃいますよね

一応、アルファ値が無視されても問題なく見れるように
文字の色と透過PNGの色を調整はできますが、
ブラウザ毎に表示が違ってしまうという点で
こういう透過PNGの背景はあまり使わない
(その代り背景画像を加工して透けているように見せるとかした)
方がいいのでしょうか。

教えて下さいお願いします。

※Javascript使えばIE6でも透過PNGの背景は使えますが
 それは考えない方向であくまでHTMLCSSの範囲でお願いします。
122Name_Not_Found:2009/04/01(水) 02:42:35 ID:???
Flashメニュー(笑)

透過が必要ならどうにかして実装すればいい
例に挙げてるサイトみたいな透過は話にならん
123Name_Not_Found:2009/04/01(水) 03:39:49 ID:???
>>121
依頼主がどうしてもこの表示にして欲しいと言われたらやります。
(その場合はIE6用にjs使います)

デザインから自分で起こす場合は背景pngはまずやりません。
124Name_Not_Found:2009/04/01(水) 20:50:43 ID:???
┌─────┐┌─────┐
│ボタン A ││  ボタンB │
└----------┘└----------┘
          ↑

横並びにしたボタンAとBの間をあけるにはどう指定したらいいのですか?
125Name_Not_Found:2009/04/01(水) 21:50:47 ID:???
input{
margin-right:1em; ←任意の値
}
とか。
126Name_Not_Found:2009/04/01(水) 22:01:57 ID:???
>>122
>>123
ありがとうございます。
とりあえず透過はやめようと思いました。

ちなみにPNGもなるべくやめた方がいいっていうのは
IE3やNN4で対応していないからですか。
127Name_Not_Found:2009/04/01(水) 22:06:22 ID:???
>>125
それはCSSですか?
htmlの方は<div id="">で囲ってるのですが

div#(ID) input{
margin-right:2em;
}

でしょうか?
128Name_Not_Found:2009/04/01(水) 23:24:03 ID:???
>>127
CSSだよ。
<div id="hoge" ...>みたいにしてるなら
#hoge input{
margin-right:2em;
}
でもいいし、マージン指定が一箇所でいいなら目的のボタンに
<input id="hoge" ...>として
#hoge{
margin-right:2em;
}
でもOKだな。CSS無しでも とか挟めば余白作れるけどこれは行儀良くない。
129128:2009/04/01(水) 23:49:51 ID:???
上の空白は&nbsp;(半角で)ねw
130Name_Not_Found:2009/04/02(木) 09:48:00 ID:???
>>128-129
ありがとうございました。
131Name_Not_Found:2009/04/02(木) 13:15:02 ID:???
すごく初歩的な話かもしれないんですけど、
background-color:blue; みたいに background-color と blue の間に:を入れますよね?
これ、IE6ではbackground-color=blue;のように、:を=で代用できるってことに気づいたんです。(IE7は未確認)
それで気になったんですけど、:の代用になるのって=以外にあるんですか?
FireFoxではbackground-color=blue;と書いたものは認識できなかったので、FireFoxやその他のブラウザ(携帯のブラウザ等)でも認識できる:の代用記号が知りたいです。
教えてください。
132ちり紙:2009/04/02(木) 13:46:00 ID:???
: 以外は、バリデーションエラーでは?
133Name_Not_Found:2009/04/02(木) 15:11:51 ID:???
div#bar1 {
float: right;
width: 530px;
height: 480px;
margin-right:320px;
}

こんな指定の仕方ありますか?floatで回り込ませたのは良いのですが
右に行き過ぎたのでmarginで指定して調整したんですが
結果、思った位置に持ってくることができたのですが
別にできればOKなんでしょうか?

この指定の仕方でも特に問題ないですか?
134Name_Not_Found:2009/04/02(木) 17:13:49 ID:???
なにも問題なす。
135Name_Not_Found:2009/04/02(木) 18:09:21 ID:???
>>134
ありがとごぜます。m(_ _)m
自分でも良く調べてみます。
136Name_Not_Found:2009/04/02(木) 21:07:14 ID:???
<!−−〜−−>

は何するとき使うのですか?
137Name_Not_Found:2009/04/02(木) 21:11:35 ID:???
自分で作ったHPまだ途中なんですがバリデータで
判定したら-309点だったんだけどまずいですか?

IEもFirfoxも正常に見れるのですが・・・
138Name_Not_Found:2009/04/02(木) 21:13:22 ID:???
>>136
わたしだけの覚書 or チラ裏ってことですよ

<!−−javascript開始−−>
・・・・・・・・・・・・・・・・・・・・・・・・・
<!−−javascriprここまでで終了−−>
139Name_Not_Found:2009/04/02(木) 21:15:09 ID:???
>>137
さすがにその点は気になりますね
エラー表示されるのを1つずつ消していくしかないです
140Name_Not_Found:2009/04/02(木) 21:21:28 ID:???
>>137
点数ってことはhtml-lintだよな
きちんと表示されていても、HTMLの文法的に間違っていれば点数は低くなる。
-309点まできたら致命的な文法ミスがいくつもあると思うから、さすがに気をつけたほうがいい。
141Name_Not_Found:2009/04/02(木) 21:42:06 ID:???
ほとんどが「<」か「>」なんです

例えば</html>の>が赤くなってて指摘されているのとか
</a>の>が赤かったり<br>の<が赤かったり

ほとんどが>か<なんですが
142Name_Not_Found:2009/04/02(木) 21:55:24 ID:???
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

宣言なんですがどれ使えばいいんでしょう?
宣言の概念がいまいち良くわからない
143Name_Not_Found:2009/04/02(木) 22:05:44 ID:???
>>142
この2つの違いはファイルの文字コードで、UTF-8の場合上を、Shift_JISの場合下を書く
Windows環境で書いたらだいたいShift_JISになるので下を書いておけばいいが、ファイルの文字コードに合わせてかえなければならない
…てことじゃなくてこの宣言がどういう意味を持つか知りたいってこと?
144Name_Not_Found:2009/04/02(木) 22:23:46 ID:???
>>137 タグの閉じ忘れとかだろ。
145Name_Not_Found:2009/04/02(木) 22:24:53 ID:???
>>143
いえ、その補足説明も無知な自分にはありがたいです。
WindowsなんでJISのほう書けばいいのですね

両方書いておくのはダメなんですか?
146Name_Not_Found:2009/04/02(木) 22:27:51 ID:???
>>144
閉じ忘れでなかったです、少し直したらプラスの点数になったので取り合えず一安心っす。
147Name_Not_Found:2009/04/02(木) 23:33:29 ID:???
>>145
自分がなんの文字コードで書いているかの宣言なのだから
まずエディタの文字コードを見てみましょう
winのテキストで書いてるのならShift_JISだと思うけどー
エディタで文字コードを変えることが出来るので一概にはいえまへん
148Name_Not_Found:2009/04/02(木) 23:36:45 ID:???
>>146
HTMLのバージョンは何で宣言してますか?
xhtmlで書いてるのなら<br>、<img>などの空要素タグを閉じないと
とんでもない点数叩き出しますよー
149Name_Not_Found:2009/04/03(金) 09:12:20 ID:???
>>147
文字コードの違いなんですねwinなのでJISにしました。
>>148
1.0です。見る解説書によって閉じ方違うので別のやり方してたみたいで
とんでもない点数でした。
150Name_Not_Found:2009/04/03(金) 16:18:35 ID:???
CSSで配置の指定をしたのですがブラウザの大きさ(横の幅とか)変えたり
firefoxで見たときズレが出るのですが、どう記述したらいいでしょうか?

┌─────┐
│        │
└─────┘  
| ̄ ̄|
|   |
|   |
|   |
|   |
 ̄ ̄ ̄
   ↑これを

| ̄ ̄|┌─────┐
|   |│        │
|   |└─────┘
|   |
|   |
|   | 
|   |
 ̄ ̄ ̄
   ↑こうしたいのです
151Name_Not_Found:2009/04/03(金) 17:00:45 ID:???
これでどよ?

#hako {ptiton : relative ; width : 100%}
#migi {margin-left : 200px}
#hidari {potiton : absolute ; top : 0px ; left : 0px ; width : 200px }

<div id="hako">
<div id="migi">
</div>
<div id="hidari">
</div>
</div>

確認してないから。
152Name_Not_Found:2009/04/03(金) 17:53:40 ID:???
>>151
ダメでした。

CSSでで調整は出来るのですがブラウザの横幅変えたりしたら
ズレたんです。

ちなみに何てググったらいいですか?CSS配置で検索してもこれと言ったの出てこないorz
153Name_Not_Found:2009/04/03(金) 18:21:33 ID:???
初めにホームページの横のサイズを指定してそれを基準に調整しないといけないのでしょうか?
154Name_Not_Found:2009/04/03(金) 21:23:41 ID:???
感謝の気持ちが足りないやつには答える気がしない。
155Name_Not_Found:2009/04/03(金) 21:46:26 ID:???
>>154
自分でやります。お手数掛けました。
156Name_Not_Found:2009/04/03(金) 23:21:59 ID:???
Web制作会社にアルバイトで入るために、
架空の企業のサイトを作ろうと思うんですが、
そこに載せる写真は無料素材集とかから持ってこないで
自分で撮るか、プロに撮ってもらった方がいいんでしょうか。

教えて下さい。よろしくお願いします。
157Name_Not_Found:2009/04/03(金) 23:38:25 ID:???
違法性がなければいいんでわ
158Name_Not_Found:2009/04/04(土) 00:02:53 ID:???
>>152
まだいるかな?

その二つのdivを内包するdivの横幅をpxで固定する。
 or
windowのサイズに合わせて可変させたいなら、
ズレる手前の最低限必要な横幅をヘッダーやフッター等で指定してあげればできると思いますよ。
159Name_Not_Found:2009/04/04(土) 00:15:05 ID:???
>>156
一般公開するものでもないのでフリー素材で大丈夫ですよ。
160Name_Not_Found:2009/04/04(土) 16:59:31 ID:???
>>157
>>159
ありがとうございます。

とりあえず作ってみます。
161Name_Not_Found:2009/04/04(土) 17:31:13 ID:Arl/AfHa
質問お願いします。使用ブラウザはIE7です。

<html>
<head>
 <title>title</title>
</head>
<body>
 <form>
  <table>
  <tr>
   <td><input name="TextBox1" type="text" /></td>
  </tr>
  </table>
  <input name="TextBox2" type="text" />
  <br />
  <input name="TextBox3" type="text" />
 </form>
</body>
</html>


↑だと、TextBox1の左側がTextBox2、TextBox3よりちょっと右にズレるんですが、
揃えるにはどうすればいいんでしょうか?
162Name_Not_Found:2009/04/04(土) 18:02:39 ID:???
>>161
TextBox1をテーブルに入れる必要はあるのかな?
もしどうしてもテーブルに入れたい場合は、
CSSでテーブルのマージンとパディングを0にするといいよ。
163Name_Not_Found:2009/04/04(土) 18:24:42 ID:???
>>161

ヒント

* {
   margin: 0;
padding: 0;
}
164161:2009/04/04(土) 18:44:44 ID:Arl/AfHa
>>162-163
ありがとうございます。
↓のように修正しましたが、TextBox1はズレたままでしたorz..
書き方間違ってるのでしょうか?
実際はもう少し複雑なので、TextBox1はTabelに入れたいです。

<html>
<head>
<title>title</title>
</head>
<body>
<form>
<table style="margin: 0; padding: 0;">
<tr>
<td><input name="TextBox1" type="text" /></td>
</tr>
</table>
<input name="TextBox2" type="text" />
<br />
<input name="TextBox3" type="text" />
</form>
</body>
</html>
165Name_Not_Found:2009/04/04(土) 19:03:43 ID:???
tableやめれ。
166Name_Not_Found:2009/04/04(土) 21:19:58 ID:???
>>164
テーブルタグでサイズ指定しないからじゃないの

<table border="6" cellspacing="4" cellpadding="8"></table>

table borde 外枠の太さ
cellspacing セルの間隔
cellpadding セル内の余白
167Name_Not_Found:2009/04/04(土) 23:48:30 ID:???
ポータルサイトのような、CSSを使ってフレームのようにテーブルを配置したものは、左側のナビゲーションバーを消さずにメインページを変えるリンク設定はどのようにしているのでしょうか?
in frame以外でそういったことは出来ますか?
168Name_Not_Found:2009/04/05(日) 12:09:22 ID:???
疑似フレームはフレームではない。まずは作ってみたらわかるよ
169Name_Not_Found:2009/04/05(日) 13:11:56 ID:???
質問なのですが、たとえば、

<html><head>
<style>
ul li { display: inline; }
</style></head>
<body>
<ul><li>TEST</li><li>TEST</li><li>TEST</li><li>TEST</li><li>TEST</li><li>TEST</li><li>TEST</li><li>TEST</li></ul>
</body></html>

と書いてブラウザの表示幅を狭めた時に、IE8/Firefox3ともに途中に改行が入らず左右のスクロールバーが
出てしまうのですが、幅に合わせて表示させることはできませんでしょうか?

何をしているのかというと、他にもスタイルを付けてタブとして表示しています。
中の文字列が日本語だと改行が入ります。

</li>と<li>の間に空白なり改行を入れると表示幅に大体合うようになるのですが、IE8ではjavascriptで
動的に生成してInnerHTMLにセットすると改行しないようで、今回は使えません。また表示上も
無駄にスペースがあいてしまいます。

表示幅0で単語区切りする方法とかないですか?
0ptのスペースも入れてみましたがIE8では動作が変わりませんでした。
0ptの全角スペースだと期待した動きにはなるのですが、やっぱりあんまりだと思うので。
170169:2009/04/05(日) 13:14:03 ID:knVZVq/P
質問するときはアゲといたほうがいいですかね。
よろしくおねがいします。
171Name_Not_Found:2009/04/05(日) 13:43:22 ID:h6MC9SE0
それぞれのliの内容のことだと思うが
日本語だと単語では区切れないはず。
画像と代替テキストでやるか、クラス与えてemで幅指定するとか
172Name_Not_Found:2009/04/05(日) 13:48:30 ID:knVZVq/P
>>171
全角文字って1文字が1単語じゃなかったんでしたっけ。それは、その動きで良いです。
上の例だと、(liじゃなくて)ulの中身全体が1単語として見てるみたいな動作になってるのを何とかしたいんです。
173167:2009/04/05(日) 14:23:17 ID:???
>>168
それはわかります。
では、リンク飛ばした先のページ一つ一つにも同じナビゲーションバーをくっつけないといけないということですね?
やっぱ地道な作業しかないのか…
174Name_Not_Found:2009/04/05(日) 19:35:05 ID:???
>>167
SSIとかphpなどを利用すると共通部分を単一ファイルとして管理することができる。
検索してみ。サイトの規模によってはhtmlの生成自体を動的にしたほうが良いが。

>>172
display:inlineの代わりにfloat:leftを使用すればOKかと。
175169:2009/04/05(日) 22:07:28 ID:???
Firefoxの対応として<li>タグの間に 0pt指定の半角スペースを入れて、
IEの対応として ul に  word-wrap: break-word; を指定することにしました。

何か IEはjavascriptでinnerHTMLにセットした時のレンダリングが微妙に怪しい感じ。
176Name_Not_Found:2009/04/05(日) 23:17:03 ID:???
>>174読んだ?
177169:2009/04/06(月) 00:05:55 ID:???
>>176
コメントも書かなくてすんませんでした。

単純に floatにすると、上手く説明できないのですが、タブ表示のために使用している
他の表示設定と噛み合ってくれず、表示が崩れてしまいます。

floatでも対応できるのかもしれませんが、なるべく現状のコードに大きな修正を加えたくないので、
先に書いた方法の対応のまま済ませることにしました。
178167:2009/04/06(月) 03:08:41 ID:???
>>174
そういうのを探してたんです。
ありがとうございます。
勉強してみます!
179神様門前払い:2009/04/06(月) 14:39:12 ID:V2xUf9VR
ぷはぁ〜やっと謎が解けました。

ぼくが門前払いから見習いへ昇格する日も近いかも
あっ独り言です。気にせずに。
180sage:2009/04/06(月) 21:15:10 ID:???
ttp://pepe.x0.com/pepe/
こちらのフレームテンプレート21番を使用しているのですが、
rightの横幅を変えるには
スタイルシートを書き換えればいいのでしょうか?

スタイルシートは

/* デザイン設定 */
#right{width:239px;border-right:0}
* html #right{width:240px;height:100%;padding:10px 0px 0px 0px;}
#back{

となっています。
ご指導よろしくお願いします。
181Name_Not_Found:2009/04/06(月) 21:30:40 ID:???
>>180
変えたいのはフレームの幅かな?
↑で合ってるなら、「index2.html」の

<frameset cols="*,110,260" frameborder="0" border="0">

このcolsの数値を変えればいいよ。
左から順に左(メイン)、中(メニュー)、右(タイトル)のフレームね。
182sage:2009/04/06(月) 22:13:02 ID:???
>>181
お蔭様で変更できました、
変えたいのはフレームの幅でした。説明不足ですみません。
迅速なご返答ありがとうございました。
183Name_Not_Found:2009/04/06(月) 22:21:32 ID:???
インラインフレームが横スクロールにしかならないのですが、これはバグなのでしょうか?
なにか宣言など必要なのでしょうか?

http://www.tagindex.com/tool/iframe.html
このサイトで作ったとおりソースを入力しても横スクロールにしかなりません
184Name_Not_Found:2009/04/06(月) 22:26:52 ID:???
>>183
とりあえず該当部分のソースを貼ってみてください。
それから、インラインフレームで呼び出してるページのソースも。
もしくは、貼ってくれたURLのフォームに入力した内容でもいいです。とにかく再現しないと何とも言えません。
例えば、<iframe src="hoge.html" scrolling="auto" width="200" height="500">hoge</iframe>っていうソースで、
呼び出されたページの幅が200を越え、高さが500未満であれば、横スクロールだけが出るという状態になるよ。
185Name_Not_Found:2009/04/06(月) 22:43:31 ID:???
<iframe src="ファイルのURL" width="260px" height="330px" scrolling="yes" name="test" marginwidth="10px" marginheight="10px" hspace="10px" vspace="10px">ここに未対応ブラウザ向けの内容</iframe>

作るかどうかテストしている段階なのでメモ帳で試してみただけなんです
ソースは上記に書いた通りで呼び出しページもまだ未定です。

IE6だとバグがあると聞いたことがあるのですが・・
自分はIE7です。

ご教授頂ければ幸いですm(_ _)m
186Name_Not_Found:2009/04/06(月) 23:54:12 ID:???
全くの初心者なのですが。
ページの一部の文章を、曜日や日にちによって表示が変わるようにしたいのです。
引っかかりそうな単語で検索してみたら
Javaが引っ掛かりました。しかしいまいちよくわかりません。
HTMLやCSSでそういったことはできるのでしょうか?
もしできるのであれば方法などを教えて下さるとうれしいです
よろしくお願いいたします
187Name_Not_Found:2009/04/07(火) 00:20:44 ID:???
>>185
早速、IE6・IE7・Firefox3で再現してみた。
scrolling="yes"となってる通り、上記3ブラウザ全てでスクロールバーが強制表示されたよ。
ただ、IE7だけは「ファイルが見つかりません」的な画面のデータ量が少ないので
スクロールバー自体はあるけどスクロールできない状態(動かせるバーが表示されない状態)になった。
(わかりにくい説明ですまん)
でも、>>185の環境では、スクロールバー自体がないんだよね?
188Name_Not_Found:2009/04/07(火) 00:26:30 ID:???
>>186
えっと、曜日や日付を読み取って表示を変えるのは、少なくとも現在のhtmlとcssでは不可能です。
貴方のやりたいことなら、多くのtip集などで配布されてるので、それを使うといいよ。

それから、貴方が言いたいのはきっと「JavaScript」なんだけど、これは「Java」とは別物であることを知っておいて欲しい。
混同すると検索する時とかに訳わからんようになると思う。
そして、他のスレや掲示板などで一笑されるだけで、質問に答えてもらえなくなる。
189Name_Not_Found:2009/04/07(火) 01:27:34 ID:???
XHTML1.0 Transitional DTD

h1-h6要素などブロック要素を内包不可能なものに対して
以下のような設定は文法的に間違っているのでしょうか

<h1><span>あいうえお</span></h1>

h1 span {
display: block;
}


XHTMLの構造的に問題なければOKなのでしょうか?
よろしくお願いします。
190Name_Not_Found:2009/04/07(火) 04:03:21 ID:???
文法は間違ってないね
191Name_Not_Found:2009/04/07(火) 06:29:38 ID:N6k2wrVo
ヘッダーと横ナビとフッターを固定して、中のコンテンツだけスクロールしたいんだけどどうすればいいですか?
192Name_Not_Found:2009/04/07(火) 07:07:52 ID:???
祈る
193Name_Not_Found:2009/04/07(火) 08:09:58 ID:9fGcK4F+
overflowで検索
194Name_Not_Found:2009/04/07(火) 10:34:07 ID:???
全体を右よせにしたいですがどうするればいいですか
div align="right"?
bodyにtext-align:right;?
margin:0 0 0 0 auto;?
195Name_Not_Found:2009/04/07(火) 12:13:33 ID:???
>>187
表示先のサイズによって縦のスクロールバーもでました。良く調べずに質問してしまいお恥ずかしい限りです。

わざわざテストまでして頂いてご丁寧にありがとうございましたm(_ _)m
196Name_Not_Found:2009/04/07(火) 21:17:01 ID:???
pxとemはどう使い分けるものなんですか?
197Name_Not_Found:2009/04/07(火) 21:27:41 ID:???
>>196
pxはピクセルのこと。ピクセルは画面全体と比較した相対的な単位。
emはそのページの基本となる文字サイズを1emとした相対的な単位。

要は、どちらも相対的な単位なんで、閲覧者の環境によって見た目の大きさは変わっちゃうんだけど、
画像やブロックの大きさは基本的にピクセル単位で表すことが多いと思うんで、
画像やブロックとのバランスを考えて文字を配置したい場合はpxで指定する、とか
読み物的な文章の見出しについてはemで指定する、とかの使い分けが可能かな。
198186:2009/04/07(火) 21:43:22 ID:???
>>186です
>>188さん丁寧に教えてくださいましてありがとうございます!
さっそくtip集を色々探してみます!!
ありがとうございました!
199Name_Not_Found:2009/04/07(火) 21:49:18 ID:???
>>197
よくわかりました。ありがとうございます。
200Name_Not_Found:2009/04/07(火) 23:00:36 ID:???
CSSで横長の横線を引くことって出来ますでしょうか?
「-----------------」 こういう点線にでわなく続きの線なんですが
201200:2009/04/07(火) 23:06:45 ID:???
-------------------あいうえお-----------------------
←                       →


矢印の方向に向かってフェードアウトしていく感じ(だんだん薄くなって消えていく様な)
にしたいのですが、その様なコーティング出来ますでしょうか?
202Name_Not_Found:2009/04/07(火) 23:10:14 ID:???
>>200
<hr>(水平線)ではダメなのかな? cssでデザインいじれるよ。
水平線ではなくて、どうしても文字でやりたい場合は
<span style="letter-spacing: 0px;">――――――――――――</span>
でもできないことはない……これはあんまり使って欲しくないw
203Name_Not_Found:2009/04/07(火) 23:16:01 ID:???
>>201
あ、そういうことか…それならcssのフィルターでできるよー。
ただしIEしか対応してなかった気がするけど。

cssはこう。
hr{display: inline;}
hr.left{filter: alpha(style=1, opacity=0, finishopacity=100)}
hr.right{filter: alpha(style=1, opacity=100, finishopacity=0)}

htmlはこう。
<hr class="left">あいうえお<hr class="right">
204200:2009/04/07(火) 23:21:44 ID:???
>>203
おおお!すごい!ありがとうございます。

CSSフィルターでググッテ勉強してみます。ありがとうございました!
205神様門前払い:2009/04/07(火) 23:46:07 ID:S2kC9iJ4
ぼくは見た神降臨(>>203)

門前払いレベルのぼくからするとみんな神様に見える
206Name_Not_Found:2009/04/08(水) 00:07:32 ID:???
神にも見放されたか(´;ω;`)右よせブワッ
207Name_Not_Found:2009/04/08(水) 09:09:48 ID:???
>>205
神なんてイイもんじゃないよ。自分もまだまだ勉強中。

>>206
右寄せ? どれのこと?
わかる範囲でよければ答えてみるよ。
208206:2009/04/08(水) 09:51:58 ID:???
おお>>207さん
私は>>194を見ていただきたいのです
209Name_Not_Found:2009/04/08(水) 10:52:26 ID:???
float: right;
210200:2009/04/08(水) 11:59:08 ID:???
>>207
教えていただいたソースを参考に自分なりにやってみたのですが
<hr class="left1" width="300" align="left"><h2>あいうえお</h2><hr class="right1" width="300" align="right">

これだと下記のようになってしまうのですが

-----------
あいうえお
                ----------------

↓こうするにはCSSでどう書いたら宜しいのでしょうか?

------------ あいうえお --------------
211ちり紙:2009/04/08(水) 12:51:42 ID:???
>>210

横レスだが、<h2>あいうえお</h2>と、何故に <h2>で囲む(見本は入ってないよ)
その所為で改行しちゃうんだよ!

<h2>〜</h2>を取り除く
212Name_Not_Found:2009/04/08(水) 13:15:26 ID:???
>>210
hrはそんな事するためにあるんじゃないよ素直に画像使うなりborderで指定してやって
213200:2009/04/08(水) 13:29:30 ID:???
>>211
試してみましたが取り除いても改行されてしまいます。
宜しければHTML/CSSのソース頂けますでしょうか

>>212
hrは横線指定でそれをCSSでフィルターコーティングではダメなのでしょうか?
214Name_Not_Found:2009/04/08(水) 19:58:02 ID:???
HTMLがかなわないHTMLのすごさって何ですか?
215Name_Not_Found:2009/04/08(水) 19:59:31 ID:???
↑ごめんなさい
後者のHTMLはcHTML
つまりcHTMLの利点がききたかったんです
216Name_Not_Found:2009/04/08(水) 22:44:18 ID:???
javascriptを用いて、あるページからあるページに画面遷移するソースを書きたいのですが、
どのように書いたら良いのでしょうか?
例として「画面1」http://www.dotup.org/uploda/www.dotup.org31452.jpg
のページから「画面2」http://www.dotup.org/uploda/www.dotup.org31455.jpg
ページに画面遷移できるようなソースをお願いしたいです。
その際、写真の「新規作成」「更新」「削除」ボタンを押して、
画面2に遷移するようにしたいのですが。
また、画面2の「戻る」ボタンを押して、
画面1に遷移するようなソースも合わせてお願いします。


※javascriptを使わない方法では次のように書いたところ、画面遷移ができました。

<form action="画面2.html">
<input type="submit" value="新規作成">
<input type="submit" value="更新">
<input type="submit" value="削除">
</form>

以上の点をふまえた上で、
よろしくお願いします。HTML初心者のもので、ご教授いただけると助かります。
217Name_Not_Found:2009/04/08(水) 23:02:37 ID:???
>>208
>>194の件ですが、「全体を」だけでは何とも言いようがないです…。
とりあえず、body{text-align:right}を指定しておけば、
中の要素でfloatなどを指定しない限り、ほとんどの要素が右に寄るかなと思います。

>>210
自分で試さずに適当なこと書いてすみません…。実際に試してみたところ、確かにダメでしたね。
<hr>はinlineにできないようです。floatも使えませんでした。
イロイロ検索したけど、>>212の言うとおり、画像などで代替する他に方法が見当たらないかも。ごめんね。
218Name_Not_Found:2009/04/08(水) 23:07:22 ID:???
>>216
ここはhtmlとcssのスレだよw
JavaScriptの質問ならここで聞いてみればいいんでない?
http://pc11.2ch.net/test/read.cgi/hp/1235220962/
219Name_Not_Found:2009/04/08(水) 23:19:52 ID:???
ネットで調べたりして色々試したんですがどうにも行き詰ってしまったのでお知恵をお貸し下さい。

style="FILTER: alpha(opacity=60); -moz-opacity: 0.6;opacity:0.6;

↑で透過を指定しているのですが line-height を入れると透過しなくなってしまうんです。

透過と行間指定を両立させる方法ありますか?
220200:2009/04/08(水) 23:29:03 ID:???
>>217
こちらこそありがとうございました。自分でも色々試しましたがダメでおっしゃるとおりfloatもダメでした。
色んなHPを見て似たような箇所を見つけ範囲指定したところ画像で代替されているような感じでした

また何かありましたらご教授ください。
221206:2009/04/08(水) 23:39:20 ID:???
>>217
返答ありがとうございます
全体はレイアウトのことを言いたかったのです
私の説明が不十分でした
text-align:rightを使ってがんばります
222Name_Not_Found:2009/04/08(水) 23:53:47 ID:???
>>219
そのstyleをどんな要素に入れてるのかわからんけど
<div>に入れて試したところ、line-height入れても普通に透過されたよ?
ちなみにIE6、IE7、Firefox3で確認しました。
実際のhtml/css記述内容と、確認したブラウザ等の環境を教えてくださいな。
223219:2009/04/09(木) 00:15:21 ID:???
説明足らずで申し訳ありません。
テーブルの背景色を透過させてページの背景をみえるようにしてテーブル内の行間をいじりたかったのです。
↓だと透過するんですが
<table bgcolor="#ff6600" border="0" cellspacing="0" cellpadding="25" style="FILTER: alpha(opacity=60); -moz-opacity: 0.6;opacity:0.6;">
↓だと行間は反映されるのですが透過しなくなります。
<table bgcolor="#ff6600" border="0" cellspacing="0" cellpadding="25" style="FILTER: alpha(opacity=60); -moz-opacity: 0.6;opacity:0.6;line-height: 180%;">

windows vista IE8です。
224Name_Not_Found:2009/04/09(木) 00:45:27 ID:???
>>223
うーん…そのタグをそのままコピペして試したけど、やっぱり透過+行間指定できるよ。
自分ではVista+IE8の環境が再現できないので、他に同じ環境で試せる人がいればいいんだけど…。
あんまりお役に立てなくてすみません。

それより気になるのが、背景色や枠線・パディングなどをhtmlで指定してるところ。
まとめてcssで指定した方がユーザーに優しいのでは? 例はこんなかんじ。
table{background-color: #f60; border: none; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; line-height: 180%;}
td{padding: 25px;}
225Name_Not_Found:2009/04/09(木) 01:11:20 ID:???
bgcolorは負の遺産
226219:2009/04/09(木) 18:09:24 ID:???
>>224
Vista+IE7で試してみたのですがやっぱりダメでした。のでVistaが問題なのかもしれないです。
もうちょっと色々と調べて試行錯誤してみます。

ありがとうございました。
227Name_Not_Found:2009/04/10(金) 18:40:39 ID:???
http://www.amigo-chat.net/chat/shochat/shochat.cgi
このチャットでさ。
裏入りは簡単なんだけど
ログのほうの背景とかをjavascriptとかで
フォームからボタンつくって変えられるらしいんだ
他にも、ログの右下に画像を表示させたり
やってる奴が居たけど、どう調べても分からない。

出来るやついたらちょっとやって見せてくれ
228Name_Not_Found:2009/04/11(土) 07:51:25 ID:+S7Q/lHu
<input type="text" name="" value="250字以内で"maxlength="250">

ここから縦横の大きさを変更するにはどうしたらいいですか?
229Name_Not_Found:2009/04/11(土) 11:52:40 ID:???
http://camellia.uijin.com/item/c2_f2/index.html
使ってたんだけど急にfirefoxで見れなくなりました(IEは見れる)
どうやったらfirefoxでも見れますか?
230Name_Not_Found:2009/04/11(土) 13:36:28 ID:???
>>2
タダほど高いものはないって言葉があります
231Name_Not_Found:2009/04/11(土) 22:29:11 ID:???
>228
<input style="width:xxx;height:yyy">
xxx/yyyはお前のすきな値をいれろ
232Name_Not_Found:2009/04/11(土) 23:16:00 ID:???
<UL TYPE="square">
<LI><A HREF="about.html" TARGET="right">タイトル部</A><P ALIGN="left">説明部</P></LI>
</UL>
やっぱりこれだと書き方まちがってんだろうか
233Name_Not_Found:2009/04/11(土) 23:21:15 ID:???
>>232
うん
<p>は入れちゃダメだよ
つーか、それ必要?
234Name_Not_Found:2009/04/11(土) 23:53:47 ID:???
>>233
・タイトル
説明
みたいな形にしたかったんだ
<P>以外だと<BR />くらいしか思いつかない。
235Name_Not_Found:2009/04/12(日) 01:14:14 ID:???
>>234
それなら<ul>じゃなくて<dl>使うといいよ
236Name_Not_Found:2009/04/12(日) 01:26:55 ID:???
ありがとう
どんどんシンプルになっていって楽しいわ
237Name_Not_Found:2009/04/12(日) 01:39:00 ID:???
>>233
ダメってどういう意味?
li はブロック要素持てるでしょ。レイアウトが崩れるの?

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/lists.html#h-10.2

<!ELEMENT LI - O (%flow;)* -- list item -->
<!ENTITY % flow "%block; | %inline;">
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

238Name_Not_Found:2009/04/12(日) 10:46:12 ID:???
<ul><li>でリストになってるものを
divで(<div><ul><li></li></ul></div>)な感じにしたものを2つ用意して、
スタイルシートでfloat leftしたんだけども、
こんな感じになってしまう・・

float left前
http://www.piccdrop.com/images/1239500508.jpg
float left後
http://www.piccdrop.com/images/1239500525.jpg

フォームのボックスの幅が文字と違うからだと思うんだけど
もうちょっとピシっと揃えたい。
テーブル使うしか無理なのかな。
どなたか助言をくださいませ
239Name_Not_Found:2009/04/12(日) 11:03:21 ID:???
>>238
divかliにline-heightを1.5emぐらい指定してやると
240238:2009/04/12(日) 11:03:40 ID:???
自己解決しました
どちらのliにも同じ大きさのheightを指定してやったら
綺麗になりました。
241238:2009/04/12(日) 11:04:58 ID:???
>>239
時間がかぶったようですね
なるほど、今すぐためしてみます
242238:2009/04/12(日) 11:06:54 ID:???
>>239
早速試してみました
テーブルでやったみたいにすごく綺麗に整理されました!
これで行こうとおもいます
ありがとうございました
243Name_Not_Found:2009/04/12(日) 11:55:33 ID:TTt4aSmX
id とClass どのように使いわけますか?
244Name_Not_Found:2009/04/12(日) 12:51:25 ID:???
×id とClass どのように使いわけますか? →ggrks
○idとclassをこういう風に使ってますが、駄目ですか?
245Name_Not_Found:2009/04/12(日) 15:56:02 ID:???
classは複数同じものがあってもいい。idはだめ。
<div>ほげ</div>
<div>うにょ</div>

ってのがあって
ほげ と うにょ に同じスタイルシート(たとえば同じ背景色)を適用したいなら
同じクラス名を与えて
<div class="a">ほげ</div>
<div class="a">うにょ</div>

スタイルシートでこうかけばいい。
.a {background-color:green;}



なので、classは同じスタイルシートを適用したいものをまとめるときにつかう。
246Name_Not_Found:2009/04/12(日) 16:37:09 ID:???
ジャバスクリプトでidって使うよな。
それと区別するためにとりあえず全部classつかっとけ
みたいな感じはだめなんだろうか
247Name_Not_Found:2009/04/12(日) 19:00:56 ID:c0z9gfGw
背景画像を画面の一番下の中央に
表示させたいのですが
cssで

BODY {
background-image: url(××.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center bottom;
}

と入れてみたのですが
Netscape4.7だと
背景画像が左上にいってしまいます。
何か対策ありますか

248Name_Not_Found:2009/04/12(日) 19:16:54 ID:???
PHPでサイト作りをしているのですが、
ページの余白みたいなのどうやってやるのですか?
例:
      | |内容| |
| |内容| |
      | | | |
外側の線がプラウザです。
こういう風にしたいのです。
249Name_Not_Found:2009/04/12(日) 19:17:37 ID:???
      | |内容| |
| |内容| |
250Name_Not_Found:2009/04/12(日) 19:18:36 ID:???
251Name_Not_Found:2009/04/12(日) 19:46:08 ID:???
プラウザでわろた
252Name_Not_Found:2009/04/12(日) 21:26:08 ID:???

| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|   1
| ̄ ̄ ̄ ̄| ̄ ̄ ̄ ̄ ̄|
|      |        |
|      |        |   2
|      |       |  
| ̄ ̄ ̄  |  ̄ ̄ ̄ ̄|  
|      |       |
|      |       |    3
|      |       |
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄      
1番の部分だけ縦の区切り線が入らないようなテーブルって出来ますか?
どなたか記述の仕方ご教授くださいお願いします。
253Name_Not_Found:2009/04/12(日) 21:29:30 ID:???
>>252
colspan
254Name_Not_Found:2009/04/12(日) 21:46:39 ID:???
>>253
ありがとうございます。調べてみます。
255Name_Not_Found:2009/04/13(月) 11:02:12 ID:???
>>243
基本classでアンカー、JavaScript使うときの要素の目印などでidを使うようにしてる

スタイルを適用するときは全部classにしてる
なので1つの要素がidとclassの2つの属性を持つことがしばしば

1回だからidってのはさすがに勘弁してほしい
256Name_Not_Found:2009/04/13(月) 14:06:08 ID:6uiFGte3
質問させて下さい。
背景の画像をランダムで表示させるのにjavascriptで

<SCRIPT language="JavaScript">
<!--
//
bgc = new Array();
bgc[0] = "url(test1.jpg)";
bgc[1] = "url(test2.jpg)";
bgc[2] = "url(test3.jpg)";
n = Math.floor(Math.random()*bgc.length);
document.body.style.backgroundImage = bgc[n]
//-->

と記述しました。
このランダムで表示されるtest1.jpg〜test3.jpgをビジターがウィンドウサイズを変更したときに
そのウインドウサイズに合わせて伸縮させたいのですがCSSで可能でしょうか?
257Name_Not_Found:2009/04/13(月) 14:31:22 ID:???
hspace="20" vspace="10"

この要素ってIEだけ?
258Name_Not_Found:2009/04/13(月) 16:52:49 ID:9mcvpO/4
すみませんがちょっとした事を質問させてください

.contents > p {
height: auto;
}

の、『 > 』はいったい何を意味しているのでしょうか?
間違いではないようですが、調べても出てきません
259Name_Not_Found:2009/04/13(月) 16:56:18 ID:???
260Name_Not_Found:2009/04/13(月) 17:00:35 ID:???

うわっ、ごめんなさいね
自分の持ってる本数冊、『css >』とかでググったりしたんですけど、本当に出てこなくて・・・ありがとうございます
261Name_Not_Found:2009/04/13(月) 17:07:51 ID:???
口調がちょいと悪かったかもしれん
よく考えたら 『>』で検索するのは難しかったかも

そこのサイトとか見ながらがんばれ
262256:2009/04/13(月) 18:12:34 ID:???
上記の質問スレ違いですかね?
javascript系の質問スレの方がいいですかね?
263Name_Not_Found:2009/04/13(月) 19:09:13 ID:0qOscc4T
諸先輩がた、教えてください。
先ほどイラストのところで、質問したのですが、WEBの方がいいかなと思いました。
全然高度なことでないらしいのですが、できないことがあります(号泣)
WEBサイトを作るのに数年も挫折しています、企業向け、編集者向けへの
暗証番号をかけたサイトの作り方がわかりません。
なにかお勧めの本でもよいので、解決の糸口を教えてください。
しかも、今なさけないことに、フリーターなんです。応募した企業の書類がとおって、
募集が多かったらしく、やっぱり郵送でなく、早くみたいから、サイトに作品を明日までに提出ってもう終わってるかな。サーバーも一応借りています。
空きはたくさんあります。ソフトありませんので、手打ちです。ブログでもいいです。
以前やってみて、むつかしくて、面倒くさくて、ずっと放置していたので反省しています。
春からやり直したいです。神様。
264Name_Not_Found:2009/04/13(月) 19:18:10 ID:???
レス番名前にいれるかしないと分からんし長文すぎてry
265Name_Not_Found:2009/04/13(月) 21:56:05 ID:???
質問です、どなたか回答くださったらなによりです

フレームを使わずに、
左に縦長のflashでメニューを配置して、
その横にさらに横長のflashでメニューを取り入れたいのですがどうしたらよいのでしょうか?
□□□□



このように作りたいのです

宜しくお願いいたします
266Name_Not_Found:2009/04/13(月) 23:06:56 ID:???
flashメニュー(笑)
267Name_Not_Found:2009/04/14(火) 01:51:11 ID:???
Flashメニューは誰もが通る道
268Name_Not_Found:2009/04/14(火) 10:24:32 ID:???
flashで作ればいい
269ちり紙:2009/04/14(火) 12:32:56 ID:???
>>263
> 企業向け、編集者向けへの
> 暗証番号をかけたサイトの作り方がわかりません。
> なにかお勧めの本でもよいので、解決の糸口を教えてください。

0から勉強なら、PHPを一通り勉強して、
CakePHPというフレームワークを使うと良いよ。

CakePHPはタダだから安心して使えます。
コイツには、Auth認証、Aclコンポネントなどがあり、
アクセス制御が必要なコンテンツを作るには最適です。
頑張れば、0からブログシステムを作る事もできる。

お薦めの本:
●PHPフレームワーク完全マスター
MVCモデルの概念を学びました。CakePHPの使い方もあります。
ただ、ココの例にある「認証システム」の作り方は参考にしてはいけません。

●オープンソース徹底活用 CakePHPによるWebアプリケーション開発 \2,940
CakePHPについて詳しく学べました。上には掲載のないAuth、Aclを知りたいならこの本。

●CakePHPによる実践Webアプリケーション開発 \3,150
CakePHPを一通り使える人向けです。そこそこレベル高いです。
270Name_Not_Found:2009/04/14(火) 19:15:34 ID:???
IE7でローカル上の画像が表示できたり出来なかったりする不思議な現象が発生するようになって困っています
FirefoxやOpera、Safari、IEtabから呼び出したIEでは正しく表示されますがIE単独で表示したときに
このような表示になりきちんと表示されません。
ttp://www.dotup.org/uploda/www.dotup.org6524.png

フルパス、相対パスどちらも試しましたが表示できません。
<a href>で表示できないイメージにリンクを張って見ましたがクリックしても画像に移動できません。
IEのウインドウに直接D&Dで投げると表示されます。
ローカルに保存されているHTMLファイルのうちいくつかはきちんと表示される物がありましたがファイルをコピーして全く同じ物を作ってIEで開くとなぜか表示されなくなっています(コピー元はなぜか開ける、ファイルのハッシュも同じ)。

キャッシュの削除、設定のリセット、アドインの無効化、IE7の再インストール等やれることはやりましたが直ってません。
レジストリでContentTypeも確認しましたがimage/jpeg、image/png等きちんと設定されてました。

IEの意味不明な挙動のせいでもう疲れました
271Name_Not_Found:2009/04/14(火) 20:06:06 ID:???
メール開いたら件名と本文の欄にあらかじめ項目が記入してあるのがありますが
あれはどうやれば良いのでしょうか
------------------
件名: お問い合わせ
------------------
本文

名前         
住所
質問内容
------------------

件名だけなら解るのですが、本文の欄への入れ方が解りません、参考サイトなど
ありましたらお願いします。
272271:2009/04/14(火) 20:34:08 ID:???
解決しました失礼しました。
273Name_Not_Found:2009/04/14(火) 20:50:23 ID:9dIDUco7
すごい初歩的なんですが、画像などの微妙な位置はパディングとマージン指定でいいですか?
274Name_Not_Found:2009/04/14(火) 21:57:40 ID:0mXs7n2o
ホームページにフレームを使ってる。
左側にメニュー、右側に内容。2CHと同じ。
検索エンジンで訪問してきた人が、
右側の内容のページだけが表示されたときに左側のメニューも表示させたい。
どうすればいい?
275Name_Not_Found:2009/04/14(火) 22:18:55 ID:0mXs7n2o
何年か前にJAVASCRIPTかなんかで、やったんだけど、
検索エンジンにスパムとみなされて削除されてしまったんだよね。
なんか、いい方法ないかな。
276ちり紙:2009/04/15(水) 12:22:10 ID:???
>>274

JavaScriptを使って以下を実装すれば上手く行くと思う

1)子ウィンドが呼出されて開く度にリファラをチェックして、クエリがあるかどうかを確認。
2)クエリ(どんな値でも良い)が存在しないときは、
  メニューフレームからのリンクでは無いと判断して、
  改めてフレーム付きで開き直す命令を打つ
277Name_Not_Found:2009/04/16(木) 23:32:34 ID:???
>274
フレームは今では不便なのであんまりつかわれてない。
フロートを使った2段、3段組みを使ったほうが見るほうに便利だよ
278Name_Not_Found:2009/04/17(金) 02:32:36 ID:rWHgtrSZ
無料レンタルで掲示板を作ろうと思っています。

BBSをいくつかに分けたいのですが、どうすればいいですか?
例えば「料理」というジャンルで「肉料理」「卵料理」と分けて、それぞれにBBSをつけたいのです。
自分でやってみたら「肉料理」に作ったスレッドが「卵料理」にも立ってしまったんですが…
279Name_Not_Found:2009/04/17(金) 07:09:59 ID:???
<hr> の noshade って CSS でどう書く?
280Name_Not_Found:2009/04/17(金) 07:37:25 ID:???
border
281Name_Not_Found:2009/04/17(金) 13:35:46 ID:???
<dl>
<dt>---</dt>
<dd>---</dd>
</dl>
なんですけど、ブロック要素が連発しすぎて、
上位コンテンツとの間隔があきすぎて困ってます。

<dl>は省略しても問題ないみたいですが、
文法的にはどうなんでしょうか?
282Name_Not_Found:2009/04/17(金) 15:28:11 ID:???
CSS書けばOK
283Name_Not_Found:2009/04/17(金) 19:49:22 ID:???
<br />
の/>って何なの?!
<a href="なんたらかんたらurl" /> 的なやつ
前にいろいろと検索してて、hrefのとこに
http://hoge.jp/test
みたいになってたとき、リンク押したときに
/を付加してhttp://hoge.jp/test/で接続するように
ブラウザにわからす、みたいな感じをちらっとみたような
気がするんだけど、<br />は一体何の意味が?・・
すっきりしないのでよろしくお願いします。
284Name_Not_Found:2009/04/17(金) 19:58:03 ID:???
>>280
あああれは境界線扱いになってるのか。
285Name_Not_Found:2009/04/17(金) 20:16:38 ID:???
>>283
「XHTML 移行」でググってみると幸せになれるかも
286Name_Not_Found:2009/04/17(金) 20:58:48 ID:???
>>285
なるほど!ぐぐってみて
かなり流し読みしましたが、XHTMLでは閉じないといけないみたいですね
ありがとうございました!
287Name_Not_Found:2009/04/17(金) 23:41:02 ID:???
>>282
<dl class="--">
<dt class="--">---</dt>
<dd class="--">---</dd>
</dl>
で、マージン触れって事ですね?
サンコスコシスコ。
288Name_Not_Found:2009/04/18(土) 01:58:15 ID:???
背景画像に大きめの画像を中寄せで配置して
ページ内容の方と繋がったように見せたいのですが
ウィンドウの横サイズ?によって背景画像とページ内容の位置が1pxずれてしまう症状ってどうしたら解決しますか?
289Name_Not_Found:2009/04/18(土) 16:29:12 ID:???
ソースとかキャプチャした画像とかが欲しいな
290Name_Not_Found:2009/04/18(土) 20:34:40 ID:???
ソースをアップしてみました
http://www.dotup.org/uploda/www.dotup.org17046.zip.html
こんな感じに繋がったデザインにしたい場合に
画面の横サイズによってセンタリングされる位置が微妙にずれてしまう場合があります。
291Name_Not_Found:2009/04/19(日) 12:34:09 ID:???
お問い合わせフォームにはPHPやCGIが必要不可欠でしょうか?
HTMLとCSSのみで製作できるのか教えていただければと思います。
292Name_Not_Found:2009/04/19(日) 13:00:38 ID:???
無理。電波で受信できるなら或いは。
293Name_Not_Found:2009/04/19(日) 13:29:55 ID:???
有難う御座いました。
294Name_Not_Found:2009/04/19(日) 13:55:47 ID:???
質問します。

<IMG src="http://hoge〜>でチャート画像を自身のwebページに貼り付けたのですが
サーバーにアップすると見れません。
どうしたらみれるようになるのか教えてください。
※ローカルディスク上のhtmlファイルを開くと見れるのですが・・・

チャート画像のURLです。ゼネラルモータース社の株価チャートです。
ttp://charts.quote.com/cis/qc?cont=GM&period=D&size=620x300&bartype=CANDLE&bardensity=LOW&showvaluemarkers=false&showextendednames=true&showdatainheader=false
295Name_Not_Found:2009/04/19(日) 13:58:17 ID:???
リファラチェックしてるんだろ
296Name_Not_Found:2009/04/19(日) 20:55:38 ID:???
297神様門前払い:2009/04/22(水) 22:23:59 ID:t3k20CUc
PCやりすぎで背中痛い
298Name_Not_Found:2009/04/22(水) 22:53:57 ID:???
HP作ってますが、カウンタはあまり回っていないのに
解析には一杯カウントされてるってどういう事でしょうか。
逆もあって、カウンタは回っていないのに
解析は閑古、って場合もあるんです。ブクマとかの関係でしょうか?
299Name_Not_Found:2009/04/23(木) 02:25:17 ID:???
マルチ死ね
300Name_Not_Found:2009/04/23(木) 02:52:04 ID:???
>>297
お、久々だな
301神様門前払い:2009/04/23(木) 22:02:55 ID:u+3tN8GX
>>300
誰だか知らないけどお久しぶりです。ぼくは元気です。
302Name_Not_Found:2009/04/23(木) 23:34:45 ID:???
やっと#と.の2種類ある理由がわかった。
303神様門前払い:2009/04/24(金) 00:21:19 ID:QIiapX/K
神様!CSSとHTMLの練習問題出してください
簡単なのからお願いします。

門前払いから見習い位にはなりたい。。。
304Name_Not_Found:2009/04/24(金) 00:43:41 ID:???
問題1
図1のような、ヘッダー、サイドバー、コンテンツ、フッターからなるページを作成しなさい。
ただし、[条件]を満たすこと。

[ヘッダー]
|サ| コン |
|イ.| テン |
| ド| ツ  .|
|  |    |
[フッター] 図1

[条件]
tableタグを使用しないこと。
タグのstyle属性を使用しないこと。(ex: <div style="***">)
ヘッダー、サイドバー、コンテンツ、フッターの背景色は異なるものにすること。
それぞれの要素左右上下に5px以上の余白を取ること。


305Name_Not_Found:2009/04/24(金) 00:53:41 ID:bAg1iDmV
CSSでドロップダウンメニューを作りたいのですが
・画像にマウスオーバーでドロップダウン
・flashの上でも重ならない
・できればうごきがなめらか
にするにはどうしたらいいでしょうか。

ttp://www.designwalker.com/2009/02/jquery-dropdown.html
のsuperfishみたいなのを画像でやりたいのです。
でてくるのはテキストで平気です。

あと、javascriptとcssで作るメニューの違いを教えてください。
306Name_Not_Found:2009/04/24(金) 00:56:48 ID:???
>>304
携帯からです
問題ありがとです。。。こんな早く出ると思わなかったのでもう布団に入っちゃいました。。。
明日問題説いてみます。。。
307Name_Not_Found:2009/04/24(金) 14:30:21 ID:???
質問です

新生銀行のサイトの取引ページ(ttp://www.shinseibank.com/directlogin_j.html)に
「円預金」「仕組預金」「外貨預金」「投資信託」という四つのタブがあり
そこにマウスオーバーするだけ(クリック不要)で
その下のスペースにそれぞれのページが読み込まれているようなのですが
これはどういったテクニックが使われているのですか?
308神様門前払い:2009/04/24(金) 14:35:31 ID:QIiapX/K
>>304

<body>

<div id="pageWrapper">
<div id="header">ヘッダー部分</div>
<div id="said">サイド部分</div>
<div id="mainContents">コンテンツ部分</div>
<p class="clear_curicuri"></p>

<div id="footer">Copyright (C) 〜.com All rights reserved.</div>

</div>
</body>
309神様門前払い:2009/04/24(金) 14:40:34 ID:QIiapX/K
>>304

* {margin: 0; padding: 0;}

body {background-color: #ffffff; text-align: center;font-family: fantasy,Arial,Verdana,"MS Pゴシック",sans-serif;}

div#pageWrapper {width: 900px; margin-right: auto; margin-left: auto; text-align: left; padding: 5px;}

/* old \*/
* html div#pagewrapper {
width: 900px;
}
/* end */


div#header {background-color: #9acbfa; width: 900px; height: 85px; margin-bottom: 5px;}

div#mainContents {width: 700px; height: 500px; background-color: #ccffcc; margin-bottom: 5px;}

div#said {background-color: #ffbaac; width: 195px; height: 500px; float: left; margin-bottom: 5px; margin-right: 5px;}

div#footer {clear: both; background-color: #caacff; width: 900px; height: 60px; font-size: 12px; text-align: center;}

p.clear_curicuri {clear: both;}


神様こんな感じでしょうか?
310Name_Not_Found:2009/04/24(金) 16:07:39 ID:???
左にメニュー右にメインコンテンツな
サイトを作りたいのですが、思うように
いかず四苦八苦してます。


<div class="menu">
メニュー
</div>

<div class="main">
メインコンテンツ
</div>


div.menu {float: left;}

だとメニューが終わるとメインコンテンツが
下に回りこんでしまい、

div.menu {float: left;}
div.main {float: left;}

にすると下に回りこむことはなくなるのですが、
ブラウザの右全体まで使ってくれず、
コンテンツがある部分までの右詰めにしかなりません。
アドバイスお願いします。
311Name_Not_Found:2009/04/24(金) 18:27:58 ID:???
divに幅を指定していないのが原因だと思う。

div.menu {margin: 0%; padding: 0%; width:20%; float: left;}
div.main {margin: 0%; padding: 0%; width:80%; float: left;}

%がいやなら上の問題みたいに、親div増やしてpxで幅指定。
312神様門前払い:2009/04/24(金) 22:28:26 ID:QIiapX/K
>>304
間違いあったら指摘ください。正解でしたら次の問題お願いします。
313Name_Not_Found:2009/04/24(金) 23:41:57 ID:???
定義リストの一項目(dtとddのセット)をまとめたいのですが、


<dl>
<div class="row">
<dt>ほげほげ</dt>
<dd>ふがふが</dd>
</div>
</dl>

こんな風に書くのはOKでしょうか?
dtとddを横並びにして背景やボーダーを設定したいのですが・・・

また、別の書き方があれば教えてください。
よろしくお願いします。
314Name_Not_Found:2009/04/25(土) 00:54:39 ID:???
>>313
dlに背景とボーダー
315Name_Not_Found:2009/04/25(土) 09:30:19 ID:???
text-align: center;
でセンタリングした文字列ですが、

・コンテンツが一画面に表示しきれて
ブラウザのサイドバーが表示されない場合と、

・コンテンツが一画面に表示しきれず
ブラウザのサイドバーが表示される場合とで

IE6だとどちらでも同じ位置で
FF3だとサイドバーのあるなしで
センターの位置が変わってしまいます。

FF3でも常に同じ位置でセンタリングする
にはどのようにすればよいでしょうか?
316Name_Not_Found:2009/04/25(土) 12:31:59 ID:???
{margin-left: auto;
margin-right: auto;
text-align: center;}
317神様門前払い:2009/04/25(土) 22:10:22 ID:wr1XxaVm
問題ナスなので次回から門前払いから神様見習いにさせていただきます。
318Name_Not_Found:2009/04/25(土) 22:20:25 ID:???
>>312
WinXP+IE6とIE7で見たら思いっきりカラム落ちしてるよw
Fx3だとカラム落ちはしてないけど、ヘッダー・フッターに比べてメイン部分の幅が狭い見た目になってる
動作確認はしたんだよね?
319Name_Not_Found:2009/04/25(土) 23:53:57 ID:???
すみません、質問させてください。
今HPを作っていてFirefox上では思ったとおりに表示されるのですが、IEとGooglechomeでは崩れてしまいます。

Firefox(ここではうまく表示されています)
http://www.dotup.org/uploda/www.dotup.org36844.png

Google chome
(4本目のピンクの線が2本目とかぶさってしまいます)
http://www.dotup.org/uploda/www.dotup.org36853.png

IE7
(先ほどのGoogle chomeの症状+3本目のラインが2本目と合わさり、コメントも同じ位置に表示されてしまいます)
http://www.dotup.org/uploda/www.dotup.org36871.png

ソースはここで書くと長いのでアップしました。
http://www.dotup.org/uploda/www.dotup.org0005.txt

何度も確認したのですが、自分にはわからなかったのでよかったら教えてください。
320神様門前払い:2009/04/25(土) 23:58:43 ID:wr1XxaVm
>>318
IE7は大丈夫でした。けどFrとオペラで言われてる状態だったので直します。。。
321Name_Not_Found:2009/04/26(日) 00:06:02 ID:???
>>319
これさ、テーブルレイアウトじゃないとダメなん?
あとソース見たけど、変なところにスペース入ってるのは何だろう?
これって、HP作成ソフト使ったのかな?
322318:2009/04/26(日) 00:08:07 ID:???
>>320
ちなみに自分は出題者ではないので悪しからず><
323319:2009/04/26(日) 00:30:02 ID:???
>>321
手打ちなもんであちこちにスペース入ってしまってますすいません。
テーブルタグ出なくてもかのうでしたら教えてもらえないでしょうか?

あとなぜレイアウトが崩れてしまうのでしょうか?
324神様門前払い:2009/04/26(日) 01:16:30 ID:rG6I8Oh7
直したお!IE,Frオペラ確認済みOKだお!

<body>
<div id="pageWrapper">
<div id="header"><h3>ヘッダー部分</h3></div>
<div id="mainContents_con"><h3>コンテンツ部分</h3></div>
<div id="said"><h3>サイド部分</h3></div>
<div id="footer"><p>Copyright (c) 2009 rensyuu. All rights reserved.</p></div>
</div>
</body>
</html>
325神様門前払い:2009/04/26(日) 01:19:29 ID:rG6I8Oh7
* {margin: 0; padding: 0;}

body {background-color: #a9d2ff; text-align: center;}

div#pageWrapper {width: 780px; margin-right: auto; margin-left: auto; text-align: left; padding: 5px; background-color: #ffffff;}

/* old \*/
* html div#pagewrapper {
width: 800px;
}
/* end */

div#header {width: 780px; height: 220px; margin-bottom: 5px; background-color: #9acbfa;}

div#mainContents_con {float: right; width: 530px;height: 460px; margin-bottom: 5px; background-color: #cffd63;}

div#said {float: left; width: 240px; height: 460px;margin-bottom: 5px; padding-right: 5px; background-color: #ffbaac;}

div#footer {clear: both; width: 780px; height: 155px; background-color: #caacff;}
326Name_Not_Found:2009/04/26(日) 02:07:33 ID:???
>>324
ひと月前から進歩したな
327Name_Not_Found:2009/04/26(日) 03:05:58 ID:???
>>324
サイドってそんな綴りだったっけ
side じゃね?
328Name_Not_Found:2009/04/26(日) 03:43:34 ID:itmT6CJW
プルダウンメニュー (ボタン) が横に二つ並ぶように
するにはどうしたら良いでしょうか。よろしくお願いします。
こんな感じ↓にしたいのですが、リンクがうまく繋がらなくて困ってます><
http://sukima.vip2ch.com/up/sukima038243.jpg
329Name_Not_Found:2009/04/26(日) 03:55:05 ID:itmT6CJW
画像間違えました>< 正しくはこちらです↓
http://sukima.vip2ch.com/up/sukima038254.jpg
メニューが二つでボタンが一つです。
よろしくおねがいします。
330Name_Not_Found:2009/04/26(日) 12:23:58 ID:itmT6CJW
もっと詳しく言うと、ここのサイト様に書かれているような記述を
横に二つ並べた感じにしたいです
http://lll.s21.xrea.com/m/link/36.html
331Name_Not_Found:2009/04/26(日) 12:33:44 ID:???
普通にselect並べるだけで出来ますが
332Name_Not_Found:2009/04/26(日) 13:01:27 ID:???
何を悩んでいるのかすら理解できんw
333Name_Not_Found:2009/04/26(日) 13:26:51 ID:???
そもそもselect2つ並べることに意味なんてあるのか?
たとえばselectAで選んだ内容次第で、selectBの内容が変わるとかなら必要かもしれんが…
334Name_Not_Found:2009/04/26(日) 13:52:28 ID:itmT6CJW
並べると下に改行してしまうので困ってます
改行しないで横に並べる方法を教えてください><
335Name_Not_Found:2009/04/26(日) 13:57:48 ID:???
<FORM NAME="bl">
<SELECT NAME="bl2">
<OPTION SELECTED>- - - 下から選択してください - - -
<OPTION VALUE="1.html">1.テストページ1
<OPTION VALUE="2.html">2.テストページ2
<OPTION VALUE="3.html">3.テストページ3
</SELECT>
</FORM>

<FORM NAME="bl3">
<SELECT NAME="bl4">
<OPTION SELECTED>- - - 下から選択してください - - -
<OPTION VALUE="4.html">1.テストページ4
<OPTION VALUE="5.html">2.テストページ5
<OPTION VALUE="6.html">3.テストページ6
</SELECT>
<INPUT type="button" ONCLICK="if(document.bl.bl2.bl3.bl4.value){location.href=document.bl.bl2.bl3.bl4.value;}" VALUE="移動">
</FORM>

これだと・・・・ああ、改行してしまうか・・・・
<FORM>がけっこうやっかいだな。
336Name_Not_Found:2009/04/26(日) 14:03:54 ID:???
>>319
レイアウトが似てる前略プロフのソースを見て参考にするといいよ
337Name_Not_Found:2009/04/26(日) 14:07:13 ID:???
>>335
最初のFORMはボタンも何もないけど何か意味あるの?

>>329
質問の意味がよくわからんがTABLEで囲むだけじゃダメなの?
338Name_Not_Found:2009/04/26(日) 14:10:27 ID:BOWjC6AO
リスト<li>タグについての質問です

ttp://www.dmm.co.jp/mono/
このページの左のメニューのように
リストをコピペできない小さな点「・」にするにはどうしたら良いでしょうか?
ソース見てもよくわかりませんでした…orz
よろしくお願いします。
339Name_Not_Found:2009/04/26(日) 14:38:51 ID:itmT6CJW
>>337
TABLEで囲んでみましたが改行してしまいましたorz↓
http://sukima.vip2ch.com/up/sukima038546.jpg

このようにしたいのですが・・
http://sukima.vip2ch.com/up/sukima038254.jpg
340Name_Not_Found:2009/04/26(日) 14:43:30 ID:BOWjC6AO
>>339

<table>
<tr>
<FORM NAME="bl3">
<td>
<SELECT NAME="bl4">
<OPTION SELECTED>- - - 下から選択してください - - -
<OPTION VALUE="4.html">1.テストページ4
<OPTION VALUE="5.html">2.テストページ5
<OPTION VALUE="6.html">3.テストページ6
</SELECT>
</td>
<td>
<SELECT NAME="bl4">
<OPTION SELECTED>- - - 下から選択してください - - -
<OPTION VALUE="4.html">1.テストページ4
<OPTION VALUE="5.html">2.テストページ5
<OPTION VALUE="6.html">3.テストページ6
</SELECT>
<INPUT type="button" ONCLICK="if(document.bl.bl2.bl3.bl4.value){location.href=document.bl.bl2.bl3.bl4.value;}" VALUE="移動">
</td>
</FORM>
</tr>
</table>
341Name_Not_Found:2009/04/26(日) 14:48:13 ID:itmT6CJW
>>340
あの・・やってみたのですが、形はあってるのですが・・
リンクされなかったですorz
342Name_Not_Found:2009/04/26(日) 14:50:23 ID:???
2つ並べる目的がわからん。
>>333の言ってる内容じゃないとするとデザインだけの問題?

>>335
そもそもformを分けるなら送信ボタンも必要だし並べる意味なし
343342:2009/04/26(日) 14:52:03 ID:???
要するに目的をはっきりさせてくれ

質問はそれからだw
344Name_Not_Found:2009/04/26(日) 14:55:04 ID:itmT6CJW
>>342
デザインの問題もありますが、リンクの内容が多量で、
何よりもリンクを2分類に分けたい問題がありまして・・

誰か助けてください
345Name_Not_Found:2009/04/26(日) 14:58:53 ID:itmT6CJW
>>343
プルダウンメニューを2個、縦にプルダウンメニューを2個ではなく
横にプルダウンメニューを2個、その横にボタンを設置。
どちらか一つのメニューを選択したのち、ボタンを押すと
リンク先に飛ぶようにしたいです
346Name_Not_Found:2009/04/26(日) 15:00:38 ID:???
ひさしぶりの難題だな・・・
347Name_Not_Found:2009/04/26(日) 15:02:45 ID:???
>>345
それさー、もし訪問者が両方のプルダウンを選択した上で、ボタンをクリックしたらどういう動作するか考慮してる?
selectの横並び以前にスクリプトエラー起こしまくると思うんだけど
348Name_Not_Found:2009/04/26(日) 15:06:49 ID:itmT6CJW
え?無理なんですか?
・・・・では、ボタン2つ設置ではできませんか?
こんな感じで↓
http://sukima.vip2ch.com/up/sukima038243.jpg
349Name_Not_Found:2009/04/26(日) 15:16:53 ID:???
>>324-325
HTML
・1回しか使わないからidってのはどうかと思う
 スタイルを充てるための目印なら原則classにするべき

・なんでh3要素だらけなのか詳しく
 文字の大きさや太さの調節が動機ならそれは激しい間違い

・突っ込み入ってるが「サイド」は「side」
 「said」はsayの過去形やら過去分詞じゃないか

・DOCTYPE宣言は何を使ったか→描画モードは?
 CSS読んで何となくだが、IEだと後方互換モードになっとらんか
 標準モードになってるなら余計な記述がちらほら

 ただ、手元のIE6だと後方互換で多少ズレが生じる
 IE7と書いてあるので、IE6除外ならそれはそれでおk

CSS
・* {margin: 0; padding: 0;}
後々面倒だから全称じゃなくてブロックレベル羅列でいいんでない
使う要素全部再設定(あるいは0のままに)するなら全称でもいいけど

・幅780pxの根拠は何か
・固定幅じゃなくて可変幅のレイアウトもやってみたら

その他
・対象ブラウザを明確にしてから取りかかるといいのでは
・どこかテスト用のレン鯖用意して、そこにうpしたら またはうpろだ
350Name_Not_Found:2009/04/26(日) 15:34:40 ID:???
>>349
>>324-325
>HTML
>・1回しか使わないからidってのはどうかと思う
> スタイルを充てるための目印なら原則classにするべき

取り敢えずIDの使い方としては合っていると思うのは俺だけ?
IDがふってあるものは、ページ内に一つしかない、そんでもってサイト内で共通使用的な感じだから正解だと思うよ。


>・幅780pxの根拠は何か
>・固定幅じゃなくて可変幅のレイアウトもやってみたら

いいじゃん別にw

無理矢理 悪い所を見つけるなって
見てると、こっちが恥ずかしくなる
351Name_Not_Found:2009/04/26(日) 15:36:03 ID:itmT6CJW
自己解決しました!!!!!!
助けをくれた方々ありがとうございました!!!!

<table>
<tr>
<FORM NAME="bl">
<td>
<SELECT NAME="bl2">
<OPTION SELECTED>- - - 下から選択してください - - -
<OPTION VALUE="1.html">1.テストページ1
<OPTION VALUE="2.html">2.テストページ2
<OPTION VALUE="3.html">3.テストページ3
</SELECT>
<INPUT type="button" ONCLICK="if(document.bl.bl2.value){location.href=document.bl.bl2.value;}" VALUE="移動">
</td>

<td>
<SELECT NAME="bl3">
<OPTION SELECTED>- - - 下から選択してください - - -
<OPTION VALUE="4.html">1.テストページ4
<OPTION VALUE="5.html">2.テストページ5
<OPTION VALUE="6.html">3.テストページ6
</SELECT>
<INPUT type="button" ONCLICK="if(document.bl.bl3.value){location.href=document.bl.bl3.value;}" VALUE="移動">
</td>
</FORM>
</tr>
</table>

これでできました!!
352Name_Not_Found:2009/04/26(日) 15:49:02 ID:???
おめ!
353Name_Not_Found:2009/04/26(日) 15:49:13 ID:???
tr直下のformはhtml的にダメじゃね?
354Name_Not_Found:2009/04/26(日) 15:50:04 ID:???
移動ボタンなんて面倒なだけじゃない?
355Name_Not_Found:2009/04/26(日) 16:03:48 ID:BOWjC6AO
>>338もよろしくお願いします。

リスト<li>タグについての質問です

ttp://www.dmm.co.jp/mono/
このページの左のメニューのように
リストをコピペできない小さな点「・」にするにはどうしたら良いでしょうか?
ソース見てもよくわかりませんでした…orz
よろしくお願いします。
356Name_Not_Found:2009/04/26(日) 16:23:46 ID:???
普通にli{list-style-type: disc;}じゃダメなの?
もしくはそれっぽい画像を作って背景に指定するか。
357Name_Not_Found:2009/04/26(日) 17:00:18 ID:v71l/ImU
初心者丸出しですみませんが、CSSを学び始めるにあたってひとつ質問です。
ドコモのサイトが、ほぼCSSだと聞きました。
でもこれって、テーブルでほぼ再現できますよね?
CSSを使う事で何か違いやいい事があるんでしょうか…?
358Name_Not_Found:2009/04/26(日) 17:28:18 ID:BOWjC6AO
>>356
>普通にli{list-style-type: disc;}じゃダメなの?
あのページと同じような小さな「・」になりませんでした。

>もしくはそれっぽい画像を作って背景に指定するか。
それはちょっと意味がないので・・・
359Name_Not_Found:2009/04/26(日) 17:37:11 ID:???
>>357
テーブルは表を作るものなので、レイアウトに使うものじゃない
なので、構造はhtml(もしくはxhtml)で、デザインはcssで
…というのが、W3Cという機関の考え方なので、みんなそれに副ってる
360Name_Not_Found:2009/04/26(日) 17:38:58 ID:???
>>358
小さくしたいのか
じゃあli{list-style-image:url(hoge.gif);}とかで好きな形のマーカーを画像で作っちゃえばいい
361Name_Not_Found:2009/04/26(日) 17:46:40 ID:BOWjC6AO
>>360
ありがとう。でも
できれば画像じゃなくCSSのみで実現したいです。
DMMもCSSのみで画像は使ってないです。
362361:2009/04/26(日) 17:52:44 ID:???
解決しますたw
363Name_Not_Found:2009/04/26(日) 19:34:17 ID:???
DMM画像使ってるだろ。
ほらよ http://p.dmm.co.jp/p/common/marker.gif
364Name_Not_Found:2009/04/26(日) 19:51:24 ID:???
誘導できました。
HTMLのリンクから他のローカルのアプリを立ち上げる方法ってありませんか。
メモ帳でテキストを開きたいんですけど。
365Name_Not_Found:2009/04/26(日) 20:39:00 ID:???
それなんてセキュリティホール?
366Name_Not_Found:2009/04/26(日) 21:05:24 ID:???
やっぱそうなりますよね・・・
諦めました。
367Name_Not_Found:2009/04/26(日) 21:39:00 ID:???
サイトのリンククリックで、txtファイル読み込ませることが可能になればウィルスばら撒き放題だな
368神様門前払い:2009/04/26(日) 22:11:28 ID:rG6I8Oh7
>>349
>・1回しか〜     これはぼくが勉強した本でそうなっている為です。方法は何通りかあるの知ってます。。。
>・なんでh3〜    特に意味ないです。ボックスのタイトルとして書いたためそうしてみただけで深い意味はないですお
>・突っ込み〜    間違っちゃったえへへっ
>・DOCTYPE宣言〜回答するのに宣言は別にいらないかなと。。。余計な記述てどれですか?
>後々面倒だから〜後々面倒になるものなんですか?ぼくはまだ其処までのスキルはありません
>・幅780px〜    可変幅も勉強してみます。。。
>・対象ブラウザ〜 対象はIE、Fr、オペラがいいのかな。。。

>>350
いろんな意見があるのは助かります。やり方も一つだけでないので意見もいろいろかなと

>>349-350
それでぼくは門前払いから見習い位にはなってもよろしいでしょうか?
369Name_Not_Found:2009/04/26(日) 22:18:30 ID:???
>>368
向き不向きってあるし、方向転換するなら早いほうがいいと思うよ。
370Name_Not_Found:2009/04/26(日) 23:05:35 ID:???
>>363
ありがとうございました〜
371Name_Not_Found:2009/04/26(日) 23:12:20 ID:???
>>368
後は経験だから、ドンドンつくっていくといいよ。
それと、君がした作業は「コーディング」って作業ね

本来コーディングってのは、デザインありきの作業だから、一度デザインからのコーディングも体験すると、いい経験になると思うよ。
372神様門前払い:2009/04/26(日) 23:25:42 ID:rG6I8Oh7
>>369
ドリバの住人ですか?結構楽しいです。
>>371
どんどん作ってみます。。。




まだまだ若輩者ですが次回から神様見習いにさせていきます。
373Name_Not_Found:2009/04/26(日) 23:37:51 ID:???
>>359
なるほど・・回答ありがとうございます。

ブラウザによる解釈の違いとか色々大変そうで、アホな自分にちゃんと使いこなせるのか不安だ・・。
374349:2009/04/27(月) 10:16:23 ID:???
>>350
>いいじゃん別にw
誰も「悪い」とか「駄目だ」なんて言ってないんだけど
悪いと思ったものは「どうかと思う」とか「間違いだ」ってちゃんと書くよ

「なんで780よ」→「(調べてみると)ディスプレイサイズの分布が云々」
となってくれればこれ幸いと思って提起した話

でさらに、「じゃあ可変幅のレイアウトもやってみるか」となれば、
できることの幅が広がるじゃない さくせん「いろいろやろうぜ」だよ

>>368
>それでぼくは門前払いから見習い位にはなってもよろしいでしょうか?
俺が決めることじゃない 好きになさい
375Name_Not_Found:2009/04/27(月) 12:03:19 ID:???
横から失礼・・・780云々、それこそ好きになさい
376Name_Not_Found:2009/04/27(月) 22:53:36 ID:???
>>372
模擬するなら風俗サイトは勉強になるよ
すごく多種多様の技術が使われている2,3真似たら
殆どのこと出来るようになってるよ
377Name_Not_Found:2009/04/29(水) 00:25:02 ID:???
タイトルにつられやって来ました。
初心者どころかまだホームページ入門者なのですが、良ければ答えていただきたいです。
言ってることが多少幼稚かもしれませんが、気にしないでください。

普通、ホームページを作ると文字はウィンドウの端から表示されますよね。
ですが、他の方のホームページを見ていると、いくらか範囲が狭めてあるんです。
全角のスペースを使っているわけでもなさそうですし…。
スペースを使わずに、ウィンドウの端から隙間を開けて文字を表示させるには、どうすればよいのでしょうか。

ちなみに中央寄せなどではないです。
378Name_Not_Found:2009/04/29(水) 00:28:04 ID:???
「CSS margin padding」で検索
379Name_Not_Found:2009/04/29(水) 00:34:21 ID:???
>>377
行間指定したいの?
380Name_Not_Found:2009/04/29(水) 08:29:52 ID:???
>>377
本買え
381>>377:2009/04/29(水) 12:16:50 ID:???
>>378
ありがとうございます。検索してみました。
多分この検索結果でいいと思います。


>>379
行間指定ではないです。
例えば、

テスト

普通に打つと、ブラウザではこのように表示されますよね。
ではなく、

   テスト

と、このように、スペースを使わずに行の最初を移動させたいのです。
分かりにくくてすみません。


>>380
買いたいのは山々なのですが、お金がないので…。


皆さんありがとうございます。
>>378さんに言ったとおり、検索してみたらそれらしいのは出てきたのですが…。
その出てきたタグを、どこに埋め込めばいいのかが分かりません。
せっかく教えてもらったのにすみませんが、もう少し教えてくれませんか。
382Name_Not_Found:2009/04/29(水) 14:13:54 ID:???
>>377
「ホームページ作成 初心者 レイアウト」でggrks
383Name_Not_Found:2009/04/29(水) 18:11:25 ID:4f61SR+c
お願いします

A {widrh:100px; float:left;}
B {margin-left:300px;}
C {clear:left;}

でCの左に300px空いちゃうんですが、
↑だけだったらCのボックスの左端はAと同じになりますよね?
384383:2009/04/29(水) 18:14:05 ID:???
ごめんなさいwidrh→widthです
385Name_Not_Found:2009/04/29(水) 18:18:17 ID:???
ならないケースはいくらでもあるよ。
html位ださんとね、どんだけエスパー求め店高
386383:2009/04/29(水) 18:31:45 ID:???
>>385
失礼しました、さすがに分かりませんよね

で解決した。全然関係ないとこだった…
387Name_Not_Found:2009/04/29(水) 19:26:10 ID:???
>>381
ttp://hp.vector.co.jp/authors/VA022006/css/index.html
これを熟読したらいいと思う

例えば最初の行だけ左に空白を開けたかったら
p:first-letter{margin-left:2em}
こんな感じで
388Name_Not_Found:2009/04/30(木) 05:15:58 ID:???
何かクリックすると元の画面は残ったままで別のウィンドウ開くのを作成
したいのですが何で検索すれば宜しいのでしょうか?
高さも幅も元のブラウザの半分ほどの別ウィンドウを開きたいのです。
389388です:2009/04/30(木) 05:25:47 ID:???
<p><a href="aiueo.html" target="_blank">新しいウィンドウで表示します</a></p>

これだと普通サイズのブラウザが開いてしまいます
クリックすると小さいウィンドウが左上とかに出てくるのあるじゃないですか、そういうのを
作成したいのですが、これはJavaScriptになるのでしょうか?
何で検索すればよろしいですか?
390Name_Not_Found:2009/04/30(木) 06:57:02 ID:???
>>389
http://www5e.biglobe.ne.jp/~komichan/javascpt/htmlJS_windowsize.html


"javascript window サイズ 固定"で検索
検索キーワードは思いついた語句で一度するべし
391Name_Not_Found:2009/04/30(木) 13:29:11 ID:???
>>390
ありがとうございました。
392>>377:2009/05/01(金) 19:41:20 ID:???
>>382
>>387
ありがとうございます。
とりあえず、読んでみるところから始めようと思います。
わざわざすみませんでした。
393Name_Not_Found:2009/05/02(土) 00:55:02 ID:???
みなさん何のソフトで素材作ってますか?
394Name_Not_Found:2009/05/02(土) 16:28:54 ID:???
yuotubeの動画をホームページに張りたいんですが、特定の動画ではなく、音楽のキーワードの動画を表示させたり、人気の動画を表示させたりしたいんですがどうすればいいんでしょうか?
395Name_Not_Found:2009/05/02(土) 17:12:51 ID:???
ttp://tokuna.blog40.fc2.com/
ttp://moeguide.blog33.fc2.com/

上記の様なブログのデザインに憧れるんですが
元となるテンプレートみたいなのはあるんですか?
ちなみにFC2ブログを使っています。
396Name_Not_Found:2009/05/02(土) 17:58:50 ID:???
宣伝乙
397Name_Not_Found:2009/05/02(土) 23:31:27 ID:???
自分のブログのページで、プラグイン部分のリンクのとこの、リンク先の方々のタイトルの色を変えたいなと思ってるのですが
ここのlink_nameだと思うんですが、どうやって変えればいいのでしょうか?

<ul>
<!--link-->
<li &align>
<a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a>
</li>
<!--/link-->
<li><a href="<%server_url>control.php">管理画面</a></li>
</ul>
398Name_Not_Found:2009/05/02(土) 23:53:14 ID:???
なんかできたみたいです・・スレ汚しすみません。
399Name_Not_Found:2009/05/03(日) 04:02:59 ID:???
質問すると自己解決すること良くありますよね
400Name_Not_Found:2009/05/03(日) 20:14:05 ID:???
cssで、上下に配置された2つのボックスの位置を入れ替える方法ってありますか?
htmlの記述は変更せず、cssは絶対配置を使わずにやりたいんですけど、
わかる方いましたら教えてください。
401Name_Not_Found:2009/05/03(日) 20:23:13 ID:???
htmlいじれよ
402Name_Not_Found:2009/05/03(日) 21:34:36 ID:???
パスだけそのままで高さ、幅、色の指定取り替えるじゃダメなの?
403400:2009/05/03(日) 22:54:41 ID:???
>>401
htmlはとりあえず変更しない方向です。

>>402
すみません、パスってなんのことですか?
404Name_Not_Found:2009/05/03(日) 23:37:09 ID:???
<div id=""></div>や<div class=""></div>とか<p class=""></p>のこと

htmlコピーして貼りかえればいいと思うけど
405400:2009/05/04(月) 00:01:05 ID:kWTOycbY
html書き換えるのがやっぱり一番簡単ですよね、、ありがとうございます。
406Name_Not_Found:2009/05/04(月) 01:41:43 ID:???
CSS初心者スレから来ました、
質問させてください

<div id="base">
<div id="head">
<div class="headpad">
<h1>あああ</h1>
ああああ
</div>
</div>
</div>

#base{
width:800px;margin:0 auto;text-align:left;
}
#head{
width:100%;height:150px;}
}
.headpad{
padding: 10px 0px 0px 10px
}

こんな感じで組んでるんですが、h1のタイトルが
IEだと#headのボックスからはみ出してしまうんです。
それにheadpadのボックスが適用されていない気がします。

これを乗り越えればなんとか形になりそうなんですが・・
すいませんがご助言お願いします。
407Name_Not_Found:2009/05/04(月) 04:53:19 ID:???
IEでもFirefoxでも殆ど同じように表示されるけど
どこがおかしいのか画像でも貼れば分るかも
408Name_Not_Found:2009/05/04(月) 10:33:27 ID:???
>>407

IE
ttp://www.dotup.org/uploda/www.dotup.org3131.jpg.html
Fx
ttp://www.dotup.org/uploda/www.dotup.org3132.jpg.html

こんな感じでFxのようにボックス内に収まってほしいんですが・・
欲を言えばpaddingも適用させたいです。

>>406ではなく他が問題なのでしょうか?
409Name_Not_Found:2009/05/04(月) 11:07:25 ID:???
問題解決できないのに問題を推測して部分的に提示してるのが解せないな。
410Name_Not_Found:2009/05/04(月) 13:33:35 ID:???
>>409
すいません、てっきり該当の部分だけが悪いものと思っていました。

CSS
ttp://www.dotup.org/uploda/www.dotup.org3600.txt.html

↑がCSSの全てです。HTMLは多いので、
もし必要な部分があればUPする部分を教えて頂きたいのですが・・
411Name_Not_Found:2009/05/04(月) 14:51:34 ID:???
>>410
エラーを再現できる必要最小限のソースを提示した方がレスはつきやすい。
・質問者が推測で切り取る → 他の箇所が原因だった場合に探すだけ無駄
・長いソースをそのままUP → 長すぎて読む気になれない
412Name_Not_Found:2009/05/04(月) 16:05:51 ID:???
>>408
画像しか見てないけどh1にline-height:1em適用させたら?
413Name_Not_Found:2009/05/04(月) 16:56:06 ID:???
その箇所間違ってなくても
別の箇所間違ってて影響及ぼすことあるよ 
まずソースを貼りなさい
414Name_Not_Found:2009/05/04(月) 18:32:03 ID:???
>>411
了解しました、確認したところ
>>406のHTMLだけで事象が再現できるようです

>>412
ご助言ありがとうございます。
やってみました、するとFxでもh1がボックスからはみ出してしまいました。
h1の下にコメントを入れたいのでline-heightも使いたかったのですが・・

>>413
申し訳有りません、ではできるだけ簡略に張らせていただきます。
・・と思ったら、本文が長すぎるエラーなので、
ttp://www.dotup.org/uploda/www.dotup.org4226.txt.html
にUPしました。

↓はブロックのイメージです。
■■■
□◆○
□◇●
▲▲▲

すいません、よろしくお願いします。
415414:2009/05/04(月) 18:35:13 ID:???
すいません、ブロックイメージの訂正です。

■■■■■
□△△△△
□△◆○△
□△◇●△
□△△△△
▲▲▲▲▲
416Name_Not_Found:2009/05/04(月) 19:46:43 ID:???
>>414
うーん。>>406だけで>>408の現象が再現出来る気がいまいちしないかも。試してないけど。

> それにheadpadのボックスが適用されていない気がします。

の部分は、Firefoxでそうなるのは仕様に忠実だから。直前の#headへの指定で閉じ括弧 } が一つ余分のようだ。試してないけど。
417Name_Not_Found:2009/05/04(月) 19:55:37 ID:Am/iiCih
俺、>>406をやったけど普通にはみでなかったよ。
全要素に仮のボーダー表示させてやってみたら。
418Name_Not_Found:2009/05/04(月) 21:20:04 ID:???
IE7とクロム上で問題発生を確認、line-heightを消したら直った。
最初のソースではline-heightないから起こらないんじゃないかな。

手元の本によると、line-height で指定される em、ex、% は親要素のフォントサイズを基準に設定されるらしい。
今回の場合、h1にかかるline-heightの140%は親のdivのフォントサイズが参照されている。
そんな訳で lineHeight > fontSize という状況になり、
h1の行の高さが負の値となってボックスからはみ出たものと思われる。

解決方法:
 自身のフォントサイズを基準にするならばline-height:1.4と数字のみにすればよい。

IE&クロム「行ボックスの高さが要素の高さ。負のマージンみたいなもんだろ」
Fx「行ボックスの高さと要素の高さは違う。はみ出ないはみ出ない」
分かりにくい挙動だけどFxのほうが特殊なような。詳しい人訂正よろしく。
419Name_Not_Found:2009/05/04(月) 21:23:19 ID:???
6行目の大なりは小なりに脳内変換してください ><;;
420Name_Not_Found:2009/05/04(月) 21:31:15 ID:???
なんだよ、質問者の嘘報告かよ
421Name_Not_Found:2009/05/04(月) 21:45:18 ID:???
>>418の言うようにline-heightが原因だとすると、親要素のフォントサイズを基準うんぬんというより、算出値の継承が問題の本質かと。
あとexやemの説明が少し変な気も。

ついでに>>412でも一定の解決するはずでは?とか思ったり。
422414:2009/05/04(月) 21:49:10 ID:???
>>416-417
わかりにくくてすいません、
独学でやったのでところどころ間違ってるかもしれません。
ちなみに#headの閉じ括弧はコピペミスでした、申し訳ない。

>>418
できた!できました!ありがとうございます!
ちょっと説明頂いてることは微妙に理解できてるか自身がないんですが、
これからまた調べてみようと思います。

おかげさまで就活用サイトが作れそうです、
皆様本当にありがとうございました!
423Name_Not_Found:2009/05/05(火) 01:02:07 ID:???
>>421
実に継承の問題ですね。
生半可な知識で書き込んだ結果がこのありさまだよ!
424Name_Not_Found:2009/05/05(火) 01:26:49 ID:???
>>418
>line-height で指定される em、ex、% は親要素のフォントサイズを基準に設定されるらしい
違う、例えば
font-size:2em;
が適用されている要素に
line-height:1em;
を適用させたらfont-size:2em;が1emのサイズとして上書きされる
425Name_Not_Found:2009/05/05(火) 03:01:29 ID:???
ややこしい事は知らんが、とりあえず
line-heghtには単位は付けず
font-sizeはパーセントでやってる

別に不自由した事ないお
426Name_Not_Found:2009/05/05(火) 08:00:03 ID:6fSGbsfz
>>424
上書きされないよ、試してないけど。
427Name_Not_Found:2009/05/05(火) 13:41:07 ID:???
line-heightまとめ

単位にemex%を使用した場合
 line-heightを指定した要素のfont-sizeを元に計算した固定値となる。
 結果: 継承先でfont-sizeが変わっても、line-heightは変化しない

単位無しかキーワードを使用した場合
 継承先のfont-sizeに対しての相対値になる。
 結果: 継承先のsize-fontに合わせて自動で再計算される

こんな感じだろうか。
今月の付録:適当なサンプル
ttp://www.dotup.org/uploda/www.dotup.org0738.txt.html
428Name_Not_Found:2009/05/05(火) 13:45:54 ID:T+M1o/ZM
1回見たらクッキーに記録されて別ページ(2回目以降は見れませんなど)が表示される
ようにするスクリプトの書き方を知っている方いませんか?
429Name_Not_Found:2009/05/05(火) 13:48:34 ID:???
>>428
ここはHTML/CSSのスレなんで、そういうのはプログラム関連の板やスレで聞いたほうがいいんでないかな?
430Name_Not_Found:2009/05/05(火) 14:18:25 ID:ZeOSd1Dk
HTML&CSSで書き始めて早半年・・・

それは各ブラウザとの戦いの日々でございました。

そして、ようやく完成!したかに思えたのですが、
ページを印刷するとメッチャくずれています・・・ガーン・・・
もちろん印刷プレビューでも崩れています。

なんでだぁぁああーー!! やり直せってかぁぁああ!!!

誰かこのクソ子羊に愛の説教をおねがいします。
431Name_Not_Found:2009/05/05(火) 14:21:33 ID:???
>>427
line-heightは単位なしと%は同じだぜ
相対単位emは親要素に対しての単位だぜ
432Name_Not_Found:2009/05/05(火) 15:05:05 ID:zLI8EBjK
>>430
つ media="all"
433Name_Not_Found:2009/05/05(火) 15:38:21 ID:???
>>431
> line-heightは単位なしと%は同じだぜ

それは間違いです。単位なし(実数値)であればその指定値が継承されます。
一方、パーセント値であれば計算値が継承されます。

> 相対単位emは親要素に対しての単位だぜ

それも間違いです。単位emは、適用される要素のフォントサイズが基準です。
ただしfont-size特性の値として現れる単位emの長さのみ例外で、それは親要素のフォントサイズが基準になります。
434Name_Not_Found:2009/05/05(火) 17:49:53 ID:???
>>431 はスレを遡ってROMってきたほうがいいな。
435Name_Not_Found:2009/05/05(火) 17:58:36 ID:???
>>433に横からいちお補足しとくと、単位ありでも単位なしでも、継承されるのはどちらも算出値だよ。単位なしの場合の算出値が指定値になってるってだけ。
436433:2009/05/05(火) 20:00:55 ID:???
>>435
なるほど、下記の文書に書いてあるとおりですね。

http://d.hatena.ne.jp/amachang/20080410/1207818761
http://hp.vector.co.jp/authors/VA022006/css/cascade.html#css21-assigning-values

CSS2.1ではそのように変わったことを、恥ずかしながら今知りました。
437Name_Not_Found:2009/05/06(水) 07:17:28 ID:vux9nA4u
>>435
算出値、指定値が同じ?
算出値は〜px、指定値は1など実数。
どうやったら一緒になるんだ?
438Name_Not_Found:2009/05/06(水) 12:04:18 ID:???
教えて下さい。
例えば、

<div class="form1" id="FORM1">
<div class="display" id="DISPLAY"/>
で、"/"を付けているタグと、付けていないタグがありますが、"/"は、付けておいた方が良いという扱いなのでしょうか?

それとも、意味があるのでしょうか?
439Name_Not_Found:2009/05/06(水) 12:39:27 ID:+QPGfPAi
>>437
> 'line-height'
> Value: normal | <number> | <length> | <percentage> | inherit
>
> ...
>
> <number>
> The used value of the property is this number multiplied by the element's font size.
> Negative values are illegal. The computed value is the same as the specified value.
http://www.w3.org/TR/CSS21/visudet.html#line-height より)

最後の一文「The computed value is the same as the specified value.」に注目してください。

CSS2.1では、継承されるのは必ず算出値のようです。
で、各特性ごとに、算出値がどうなるかが仕様書で説明されています。
440Name_Not_Found:2009/05/06(水) 15:39:46 ID:ORvNKpQH
みんなー!きいてくれよー!
俺さー! タグ打ちやCSS向いてねー!
だって、すぐ崩れるんだもんよーー!

段組だけでCSSで定義して、あと中身はビルダーでつくるよーに、
戻したら、作業がはかどうるようになったさー!

困ってる奴らよー!
諦めるのも、手かもしれねーぜー!


頑張ったつもりの負け犬三太郎より
441Name_Not_Found:2009/05/06(水) 16:39:12 ID:???
算出値、指定値が同じの時の具体例を教えてください。
442Name_Not_Found:2009/05/06(水) 17:35:52 ID:???
>>438
<tag></tag>と<tag />は等価
443Name_Not_Found:2009/05/06(水) 19:44:12 ID:???
>>441
line-height: 1;
444Name_Not_Found:2009/05/06(水) 20:15:18 ID:???
1という算出値からブラウザがサイズを読み取れますか?
445Name_Not_Found:2009/05/06(水) 20:27:09 ID:???
仕様書よめばおk
446Name_Not_Found:2009/05/06(水) 23:52:12 ID:E8Z68NT/
ttp://kyanmedia.com/about

上記ページのヘッダーの雲の背景についての質問です。

この背景の設定の

background: #FFFFFF url(/images/bg_html.png) repeat-x scroll 50% 0

上記の 50% ←という指定はどのような意味があるのでしょうか?
初歩っぽい質問でごめんなさい。
447Name_Not_Found:2009/05/06(水) 23:58:59 ID:???
>>446
位置を示してる
正直その背景なら、省略してもいいと思う
448Name_Not_Found:2009/05/07(木) 00:13:09 ID:???
質問させていただきます。

ヘッダーをページの最上部に、フッダーを最下部に固定したいのですが
うまくいきません。

参照していたサイトのサンプルは
ttp://desperadoes.biz/style/dan/1-a.html
こんな感じです。

+CSS+
#my_body { margin: 0 auto; width : 700px ; }
#my_navigation { float : left ; width : 150px ; }
#my_contents { float : left ; width : 550px ; }

これをそのままcssに書いたのですが、自分が作ったデータでは
ヘッダーの上部とフッダーの下部に微妙な隙間ができてしまいます。
http://mippi.jp/chiraxxx/
このような感じに・・・。

この隙間を埋めるにはどうしたらいいか教えて頂きたいです。
449Name_Not_Found:2009/05/07(木) 00:19:55 ID:???
>>448
外部CSSも見た?
まぁ見てなくても、とりあえずbodyや各divにmargin:0;を設定すると隙間が消えるよ
450Name_Not_Found:2009/05/07(木) 00:35:18 ID:???
その外部cssファイルがstyleタグでくくられて全体が無効になっていた。削ったら目的の形になったよ。

外部ファイルにはタグは必要ない。今度はメニューがはみ出たけどまあそれは別の話。
451Name_Not_Found:2009/05/07(木) 00:45:43 ID:???
>>449
できました!!
有難うございます!
もう少し勉強します。。
452Name_Not_Found:2009/05/07(木) 00:50:02 ID:???
>>447
有難うございます。
Firebugで50%の指定を消してみたら、表示が崩れたので必要なようです。
453Name_Not_Found:2009/05/07(木) 08:43:24 ID:???
質問です。VISTA IE7の印刷プレビューが強制終了されてしまう状態に頭を抱えています。
CSSやHTMLの影響でなったりするのでしょうか?
お願いします。
454Name_Not_Found:2009/05/07(木) 15:50:13 ID:???
忍者ブログのhttp://blog.ninja.co.jp/Preview/MASTER/3092/
このテンプレートを右側2列で3カラム化したいのですが。
455Name_Not_Found:2009/05/07(木) 19:04:46 ID:???
しろよ
456Name_Not_Found:2009/05/07(木) 21:27:47 ID:???
したらいい。
457Name_Not_Found:2009/05/07(木) 21:32:01 ID:???
装飾用のアイコン画像をCSSスプライトで埋め込みたいんですが、

<div id="icon"></div>でやれば出来ますが、validにならず、
<div id="icon" />ではdivのwidthやheightが適応されずうまくいきません。


valid にしつつ成功させるには
以下の要素をCSSで下にずらせばいいと思うのですが
他にいい方法はあるでしょうか。
458Name_Not_Found:2009/05/07(木) 22:22:25 ID:???
全体の構造がはっきりしないので何とも言い難いけど、
div#icon span {display:none;}
<div id="icon"><span>内容</span></div>
で目的のブツになると予想。試してないけど。

divは、というか開始と終了タグを使う要素は内容が必須なので、<hoge></hoge>だと合格しない。
同様に<hoge />は置換要素などの内容が空の要素でしか使えない。どっちでも良いのってあったっけ?
459Name_Not_Found:2009/05/07(木) 23:53:20 ID:bdEbGB94
セルに個別枠を付けるために「border: solid 5px」等で書いたんだけど、
Firefoxやマックでは問題ないが、winのIEだと枠内の下部に隙間が出来てしまう。
正確には、白縁画像のように表示してるのに下部に背景色の隙間ができてしまう。。

宣言を変えるとマックでは隙間が出来たり消えたりしてるんだけど、winだとなぜか治らない。。
4.01でもダメです。

どこか改善するところありますでしょうか?
460Name_Not_Found:2009/05/07(木) 23:55:27 ID:???
>>457
そもそもなぜID使ってんだよ。
classだと思
461神様見習い:2009/05/08(金) 05:51:35 ID:aDLR0Ajn
みなさんおはようございます。。。
HTML/CSSのスキルアップさせるにはどんなHPを
真似して創ったらいいですか?

みなさんはどんなの真似されましたか?
462Name_Not_Found:2009/05/08(金) 06:49:51 ID:???
463Name_Not_Found:2009/05/08(金) 10:15:21 ID:???
>>461
自分がカッコいいと思ったサイト
464Name_Not_Found:2009/05/08(金) 11:40:14 ID:???
>>461
自分は簡単な企業サイトを模写しまくって、パーツのグラデーションとかシャドウの
かけ方、レイアウト等の基本を重点的に学んだよ。
凝ったサイトは真似るのがしんどいので見るだけ。
465Name_Not_Found:2009/05/08(金) 14:51:45 ID:???
すいません
文字にリンクを貼ってそれにhoverでマウスをのせると
背景色が変わるようにしています
この際にリンク文字をdisplay:block;でブロック要素にして
います
ブロック要素内の文字を縦方向に中央にしたいのですが不可能でしょうか?
IEだとなぜかブロック内で中央にすでになっているのですがFirefoxだと
ブロック内で上に配置されています
FFでも中央に配置したいのですが
466Name_Not_Found:2009/05/08(金) 16:36:44 ID:???
Fxで間違ってるなら根本的に間違ってる
467459:2009/05/08(金) 17:09:19 ID:t6NUjBoS
<table border="0" cellpadding="0" cellspacing="15">
でセルの間隔を決めて
<td style="border: solid 2px white" align="center" valign="bottom">
各セルごとに白枠を付けました。
画像に白フチがあるような感じです。

WinのIEだけセル内の下に余白、すき間ができてしまいます。。

どこを直せばよいでしょうか?
468Name_Not_Found:2009/05/08(金) 17:09:20 ID:???
>>465
line-heightを高さと同じだけ設定
469Name_Not_Found:2009/05/08(金) 18:29:43 ID:???
>>465
468の方法か、aの上下paddingで調節。

>>467
<td><img /></td>という形でimgの下とボーダーまでの間に空白がある、と読んだ。
tdでなくimgにボーダーつけるか、tdにbackground-color:whiteを指定する。
インライン要素に上下の密着は期待しないほうがいい。
470Name_Not_Found:2009/05/08(金) 19:04:50 ID:???
>>466
その略し方は初めて見た。
株の話かとおもた
471Name_Not_Found:2009/05/08(金) 19:15:52 ID:???
初めてというか公式で奨励してるし・・・
472Name_Not_Found:2009/05/08(金) 21:09:14 ID:???
FirefoxはFxだろjk
473Name_Not_Found:2009/05/08(金) 22:16:25 ID:???
>>468
たまたま同じこと悩んでた。
465じゃないけど、ありがとうございます。
474Name_Not_Found:2009/05/08(金) 22:34:21 ID:???
>>458
その方法だとスタイルシート切った時に
ちょっとカッコ悪くなると思うので
やめときます。でもありがとうございました。

>>460
色々と事情がw
475神様見習い:2009/05/09(土) 03:23:53 ID:5mMvekC6
>>462
お気に入りに入れときます。。。
>>463
んん悩む。。。おすすめありますか?
>>464
このサイト模写してみなさいってなんかください。。。


>>462-464
どなたか風俗サイト模写するといいよとおっしゃってましたが、どうなんでしょ

あとですね模写する段階で素材必要になると思うんですが、みなさんは
それは模写するサイトの素材コピって使ってますか?
素材コピるというのは自分で全部創ったことにならないし、自分が創る時に欲しい素材
創らないといけない時もあると思うのですが
みなさんどうしてますか?
476Name_Not_Found:2009/05/09(土) 03:55:58 ID:mdv5fJO2
失礼します

テーブルの中身をjavascriptで動的に変えた場合に、
↓のような崩れ方にならないようにする方法を探しているのですが、
ttp://isff7.hp.infoseek.co.jp/orz.jpg
何か方法ってありますでしょうか…

イメージ的には、横に伸ばしたくないセルに<td nowrap width='1%'>って
やるような感じの事をしたいです。
477467:2009/05/09(土) 09:19:25 ID:JMOuLscJ
>>469
意外と盲点だと思いさっそく下記設定をしました。

<td style="background-color: white"; "border: solid 2px white" align="center" valign="bottom">

無事Win IEにてごまかせ??ました!!

が、今度は隙間がなかったFirefoxでは下枠が消えてしまいました。。
画像が枠下まではみ出たのではなく、枠の下がないコの時状態です。。
478Name_Not_Found:2009/05/09(土) 09:24:49 ID:???
>>477
スタイルの書き方が・・・
479467:2009/05/09(土) 09:28:28 ID:JMOuLscJ
自己レスです。

<td bgcolor="white" style="border: solid 2px white" align="center" valign="bottom">

この書き方だとIE、Firefoxともにオッケーでしたが書き方あってますでしょうか?
これってCSSとhtmlタグの混合って感じなんでしょうか?
480467:2009/05/09(土) 10:25:20 ID:JMOuLscJ
板汚し。。済みませんでした。
セルサイズ指定なし、中の画像にピクセル指定していたのを、
セルサイズ指定して画像に縦横100%指定したら余白消えました。
481Name_Not_Found:2009/05/09(土) 10:45:05 ID:JMOuLscJ
a:link { color: white }
a:visited { color: white }
a:hover { color: Red }
a:active { color: white }

スタイルで上記設定にしたページがあります。

一カ所だけ上記スタイルを無視して、リンクの張られた文字を指定色で
表示させることはできないでしょうか?

<font color="olive"><a href="XXX.jpg">ダウンロードはこちら。</a></font>

このように書きましたが、<font color="olive">は無視されました。
482Name_Not_Found:2009/05/09(土) 10:49:13 ID:uHWowr1g
cellpaddiogとか見落としてないか?
つうかテーブル必要なん? それわ表なん?
483Name_Not_Found:2009/05/09(土) 10:53:31 ID:???
>481
<a href="XXX.jpg" style="color:〜">ダウンロードはこちら。</a>
484Name_Not_Found:2009/05/09(土) 10:54:19 ID:???
>>481 できる。あなたはまずCSSの基礎を学んだ方がいい。
485Name_Not_Found:2009/05/09(土) 14:41:07 ID:wbW4999y
メモ帳とかでhp作ってる人は何百ページも一から打ってるんですか?
更新するたびあげなおすんですか?
486Name_Not_Found:2009/05/09(土) 14:59:08 ID:???
487Name_Not_Found:2009/05/09(土) 15:59:45 ID:???
>>485
何百もあったら、メモ帳なんてつかわねぇよw
488Name_Not_Found:2009/05/09(土) 17:33:34 ID:???
>>476
上tdに height か max-height を指定する。css的にはそれ位しか思い付かない。
javascriptだとoffHeightとかで要素の高さが取得出来るようなのでがんばれ。

>>481
a.hoge {color:olive;}
<a class="hoge" href=""></a>
色を変えたくなったときに全てのfontタグを探して変更する手間の無駄を省きたいなら、
cssのセレクタとclassについてググってみるといい。
489476:2009/05/09(土) 18:19:41 ID:???
>>488
ありがとうございます!
490Name_Not_Found:2009/05/10(日) 07:35:17 ID:jn/DsPKJ
フォルダの中身をリスト&リンク化するには?
491Name_Not_Found:2009/05/10(日) 11:57:35 ID:???
Options Indexes
492Name_Not_Found:2009/05/10(日) 15:36:01 ID:???
>>490
サーバサイドで何らかの言語が使えるなら出来る
493Name_Not_Found:2009/05/10(日) 19:56:17 ID:???
質問させて頂きます。

標準モードでサイトを作ってるのですが、ブラウザによったらレイアウトが
崩れてしまいます。
IE7ではちゃんと表示されるのですが、IE8やFirefoxだと崩れてしまいます。

IE7
http://www.dotup.org/uploda/www.dotup.org17232.jpg.html
http://www.dotup.org/uploda/www.dotup.org17239.jpg.html
Firefox
http://www.dotup.org/uploda/www.dotup.org17242.jpg.html
http://www.dotup.org/uploda/www.dotup.org17243.jpg.html
IE8
http://www.dotup.org/uploda/www.dotup.org17245.jpg.html

ヘッダーの色がIE8とFirefoxだと表示されないのが特に気になります。
CSSは
#banner{
width:100%;
border-bottom:1px solid #000;
background-color:#ff0000;
}
こうなのですが、何かおかしいでしょうか?

他にも直さなきゃいけない箇所が多々ありますが、長くなりそうなので。。
494Name_Not_Found:2009/05/10(日) 20:01:53 ID:???
まずFirefoxを基準にしてサイトを作れ
そしてIEは個別に対応する

基本
495Name_Not_Found:2009/05/10(日) 20:08:43 ID:???
>>494
あ、そうなんですね!
やってみます。
ありがとうございます!
496Name_Not_Found:2009/05/11(月) 01:54:25 ID:fc10rdHK
おしえてください。
なるべくHTMLの文法的にきれいな形で、ブロック要素をインラインに並べる方法はないでしょうか。

画面の幅いっぱいにある一定の幅のブロックを並べたいです。

┌────┐
|□□□□|
|□□□□|
|□□… |

こうです。<img>だったら、<img>を並べればいいだけなんですが。
497Name_Not_Found:2009/05/11(月) 02:03:26 ID:???
>>496
display:inline-block;
498496:2009/05/11(月) 02:26:48 ID:???
おお!…と思ったんですが未対応ブラウザが多い様子?
ちょっと調べてみます。ありがとうございます!
499Name_Not_Found:2009/05/11(月) 21:02:09 ID:???
各ブロックの高さが固定なら float: left; でもいいかと
高さバラバラでfloat使うと変に引っかかるから>>497の方法
500Name_Not_Found:2009/05/12(火) 14:05:26 ID:???
普通に並べれば勝手に改行されるだろ
501Name_Not_Found:2009/05/12(火) 18:59:09 ID:???
普通にって何さ
502神様見習い:2009/05/13(水) 03:41:49 ID:bFZq65nE
ぼくは、いまドリバCS4の勉強してます。
503Name_Not_Found:2009/05/13(水) 07:26:18 ID:???
>>501
□のclassにfloat: left;をつければいいだけだろ。
ってことじゃない?

そもそもインライン要素の中にブロック要素を入れるって時点でhtml的におかしいような。
504Name_Not_Found:2009/05/13(水) 07:48:08 ID:???
htmlのリンクからExplorerやFinderのフォルダを開く方法ってありますか?
普通にフォルダにリンクを張るとブラウザ内にフォルダのパス(?)が表示されるだけですよね?
505Name_Not_Found:2009/05/13(水) 08:27:11 ID:???
>>501
>>503
CSS使わなくても並べた画像は適当なところで改行されるってことかと

>>504
ローカルのフォルダとかはパスを a タグでリンク張れば
IEで開ける。他のブラウザはたぶん無理かと



マルチになるのでここでは聞きにくいのですが
別スレッドで Terapad の文字化けについて質問させていただいています。
もしわかる方がいたら向こうのスレで
教えていただけないでしょうか。
http://pc11.2ch.net/test/read.cgi/hp/1020166365/354
506Name_Not_Found:2009/05/13(水) 09:15:39 ID:???
テラパッドってエディタですよね
文字化けってエンコードの類のことでなくて?
507Name_Not_Found:2009/05/13(水) 09:46:01 ID:???
>>496が並べようとしてるのはブロックレベル要素だろ
「インラインに並べる」は「インライン要素であるかのように並べる」ってことじゃね
508Name_Not_Found:2009/05/13(水) 11:40:22 ID:???
>>505

>ローカルのフォルダとかはパスを a タグでリンク張れば
>IEで開ける。他のブラウザはたぶん無理かと

ありがとうございます。
ただ、IE等のブラウザではなくフォルダを直に開く方法があればと思いまして。
509Name_Not_Found:2009/05/13(水) 11:51:16 ID:???
>>507
結局普通に横並びにしたいってことですね。
>>496の参考にはならないと思うけど、一応inline-blockとfloatの違いをうpしてみます。

firefox、opera、safariだと下の画像のようになるけど、IE7、IE6はinline-blockが適用されず、縦一直線に並ぶだけになる。
inline-blockで並べた場合。http://uproda.2ch-library.com/127803N9b/lib127803.jpg
floatで並べた場合。http://uproda.2ch-library.com/127804y0n/lib127804.jpg

ソース
html
<div id="container">
<div>1</div><div style="height: 150px;">2</div><div>3</div><div style="height: 300px">4</div>
<div>5</div><div>6</div><div style="height: 200px">7</div><div>8</div>
<div style="height: 150px;">9</div><div>10</div><div style="height: 120px;">11</div>
<div>12</div><div style="height: 180px;">13</div><div>14</div><div>15</div><div>16</div>
<div>17</div><div>18</div><div>19</div>
</div>

css
#container{ width: 950px; border: 1px solid #000; overflow: hidden;}
#container div{ width: 100px; height: 100px; margin: 10px; border: 1px solid #ff0000; float: left; もしくは display: inline;}
510Name_Not_Found:2009/05/13(水) 12:06:58 ID:???
>>506
エンコードといってもブラウザのレンダリングじゃなくて
ファイルを開いた時エディタがどの言語でやってくれるかの話でして
向こうのスレで教えていただいた方法で解決できました。

>>508
いや、開くのはフォルダですよ。
IEとかでそのページを開いて、フォルダのパスがリンクされている
a タグ ( <a href="c:\○○○\">フォルダ</a> とか)をクリックすると
そのパスのフォルダが開くんです(Windows の場合エクスプローラーで)

こちらの解答の方のお話されているような感じです
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q109516620

ただ Explorer など Mac のソフトで同じようなことができるかはわかりません。すいません
511Name_Not_Found:2009/05/13(水) 14:00:22 ID:OgcZBde+
a herfのURLの?以降にスラッシュが入った文字を入れて、
サーバ側でデータ列として取得したいのですが、
どのように渡すべきでしょうか?
512Name_Not_Found:2009/05/14(木) 04:13:52 ID:???
$GET[""];
513Name_Not_Found:2009/05/14(木) 06:18:46 ID:RR4JF3l/
質問です。
CSSで横幅の最小サイズと最大サイズを指定したい。
min-widthとmax-widthを使わずに実現するにはどうしたら良いでしょうか?
514Name_Not_Found:2009/05/14(木) 07:56:54 ID:???
width:-moz-min-content;
でおk
515Name_Not_Found:2009/05/14(木) 14:07:48 ID:???
513とは別の人です。

>>514
それってFxだけの機能じゃないんですか?
516Name_Not_Found:2009/05/14(木) 17:02:18 ID:???
そうですFirefoxだけの機能です
min-width以外にはこれぐらいしかないから仕方ない
517513:2009/05/14(木) 18:20:56 ID:RR4JF3l/
>>514-516
レスありがとうございます。
日刊スポーツのサイトはmin-width max-widthが効かないIE6でも最小最大サイズが設定されています。
ttp://www.nikkansports.com/
これってどうやってるのかな?
518Name_Not_Found:2009/05/14(木) 18:25:15 ID:???
>>517
minmax.jsが便利
519Name_Not_Found:2009/05/14(木) 18:26:16 ID:???
>>516
レスありがとうございます。勉強になりました。
520Name_Not_Found:2009/05/14(木) 20:13:39 ID:e5VT5uY0
>>511
javascriptで/を適当な文字の組み合わせに変換。
サーバ側で元に戻す。
521Name_Not_Found:2009/05/14(木) 22:59:36 ID:???
w
522Name_Not_Found:2009/05/15(金) 15:37:32 ID:D3LNiD3P
firefox3.0では線が1pxで表示されるのですが
IE7だと線が太くなってしまいます
どなたかIE7でも線が1pxで表示できるようにご教示お願い致します
tr,td,table{border:1px solid #000000}

<table>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
</table>
523Name_Not_Found:2009/05/16(土) 10:04:25 ID:???
>>522
テーブルバックグラウンドグレー
ティーディーマージンイチ
524Name_Not_Found:2009/05/16(土) 17:33:39 ID:???
>>522
表とセルの枠線を一体化してみる
幅はテキトウに設定してみただけ

<table class="test">
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
</table>

table.test{
WIDTH: 468px;
border-collapse:collapse;
border:1px solid black;
}
table.test th{
border-left:1px solid white;
color:white;
background-color:blue;
border:1px solid black;
}
table.test td{
border-left:1px solid white;
color:black;
background-color:white;
border:1px solid black;
}
525Name_Not_Found:2009/05/16(土) 18:51:04 ID:???
共通する物はまとめような
526Name_Not_Found:2009/05/16(土) 23:34:52 ID:???
いいだしっぺがやろうな
527Name_Not_Found:2009/05/16(土) 23:50:28 ID:???
まとめ過ぎると汎用性がなくなるよ
528Name_Not_Found:2009/05/17(日) 01:07:48 ID:???
table {
border-collapse: separate;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}
th, td {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}


border-collapse: collapse;
は、ボーダーの太さが1pxじゃないときテーブルの両脇のボーダーが
設定したピクセルの半分の値になるからいやだ
529Name_Not_Found:2009/05/17(日) 14:00:12 ID:???
俺的には
table{}
td{}
th{}
って分けないと気持ち悪い。プロパティは被っても絶対分けたい
530Name_Not_Found:2009/05/17(日) 14:40:06 ID:aLM3ccYV
HTMLで「ボタン」を押下したとき
テキストボックスの内容を変更したいのですが・・・書き方が分りません
教えて下さい

仕様
1.テキストボックスの内容が「abc」のとき、ボタン押下で「xyz」に変更
2.テキストボックスの内容が「xyz」のとき、ボタン押下で「abc」に変更
531Name_Not_Found:2009/05/17(日) 15:05:55 ID:???
>>530
HTMLだけでは不可能
Javascriptが必要
532Name_Not_Found:2009/05/17(日) 15:46:08 ID:aLM3ccYV
>>531
ありがとうございました
JavaScriptのスレで質問します
533Name_Not_Found:2009/05/17(日) 19:00:29 ID:Z8+S+Lcd
括りが'のとき、'が含まれるファイルへのリンクってどうすればいいのでしょう?
<a href='in'dex.html'>
だと当然inで切れてしまうのですが、なんかありませんかね?

そんなファイル名にするなってのは重々承知
534Name_Not_Found:2009/05/17(日) 19:41:27 ID:???
|)っ' or '
ファイル名のシングルクオートをこれに置き換えて我慢するが良い。
&キーワード; の形はないみたい。

ファイル名よりも、何故括るのにシングルクオートなのかの方が気になる。
535Name_Not_Found:2009/05/17(日) 19:42:50 ID:???
考えてみると2chもhtmlよね・・orz
訂正版:&#39; or &#x27;
536Name_Not_Found:2009/05/17(日) 19:52:41 ID:Z8+S+Lcd
>>534-535
実体参照ばっか検索してて見つけられなかったよ。thx
537Name_Not_Found:2009/05/17(日) 22:33:54 ID:???
SEO対策に高価のあるタグってありますか
538Name_Not_Found:2009/05/17(日) 22:38:31 ID:???
そんなタグあるわけ無いだろwばかじゃねーのw
539Name_Not_Found:2009/05/17(日) 23:17:59 ID:???
metaでキーワードいれるとかじゃないの?
540Name_Not_Found:2009/05/17(日) 23:21:33 ID:???
metaにキーワードとか間違ったSEOが普通に行われてるのが今のWeb
541Name_Not_Found:2009/05/18(月) 00:30:09 ID:???
>>539
意味が無い, そういう容易にごまかしが効くものを検索エンジンはほとんど信用しない
542Name_Not_Found:2009/05/18(月) 08:59:50 ID:???
そもそもSEOなんて、山ほどハウツー本やセミナーがあって
結構な金を取ってSEO対策を代行する業者までいるわけで
みんな金を払ったり、必死で対策方法学んだりしてるのに
掲示板で簡単に教えてもらえるわけ無いだろ
543522:2009/05/18(月) 11:53:44 ID:???
すいません、あの・・・
自己解決しました
閉じタグの</tr>を<tr>と書いてたのが原因でした
544Name_Not_Found:2009/05/18(月) 12:27:41 ID:IokzMypf
HP作成初心者です。
ビルダーを使って、概ねページの作成はできたのですが、
CGI掲示板の設置(埋め込み)に困ってます。

HPのレイアウトは、
1.画面上部に画像
2.左にメニュー
3.右にメインコンテンツ
のイメージで、CSSでレイアウトを決めており、
ここのメインコンテンツ部分にCGI掲示板を表示させたいと考えています。

このCGI掲示板は、CGI各種ファイル、数ページのHTMLファイル、CSS
から成り立っており、HTML、CSSをいじってデザインは自由に変えられるとのことです。

CSSでレイアウトが決まっているコンテンツの中に、さらにCSSでレイアウトが
決まっているものを入れたいときは、どのような変更をすべきでしょうか?

元のCSSと掲示板用のCSSの中身を合体させて、HTMLのメインコンテンツ部分に
掲示板のHTMLを入れるようなイメージで問題ないでしょうか?
545Name_Not_Found:2009/05/18(月) 12:33:13 ID:???
>>544
てっとり早いのはインラインフレームじゃないかな?
フレームを使いたくないなら、掲示板のデザインをHTMLサイトのデザインに似せるしかないと思う
「埋め込む」のは、ビルダー使ってる初心者にはおすすめしない
546Name_Not_Found:2009/05/18(月) 12:34:45 ID:???
インラインフレームwwwwwwwwwwwwwwwwwwwwwwwwwwwww
547544:2009/05/18(月) 13:34:16 ID:???
>>545
レスどうもです。
インラインフレームという手もありましたね。
ただこれは最終手段としたいので、やはり掲示板を元のデザインに合わせる
方法になりますかね・・・

ふと思ったんですが、今回のように元のレイアウト(CSS)があって、
その中の一部のコンテンツ(>>544のメインコンテンツ)は更に別のCSSを
参照させるようなことはできるんでしょうか?
548Name_Not_Found:2009/05/18(月) 13:57:34 ID:???
>>547
1つのHTMLファイルに、複数のCSSファイルを呼び出すことはできる
詳細についてはググったら出てくると思うよ
549Name_Not_Found:2009/05/18(月) 14:03:25 ID:???
>>548
どもです!
ちょっと調べてみまっす(`・ω・´)
550Name_Not_Found:2009/05/18(月) 14:18:14 ID:???
HP制作初心者です。

リストタグでリンクを作ってるのですが
IE7で頻繁にリンクが何箇所か表示されません。
マウスを乗せると通常通り現れてきます。
ちなみにfirefoxやsafariではいまのところ問題ないです。
htmlタグの書き方がダメなんでしょうか?
551Name_Not_Found:2009/05/18(月) 14:25:49 ID:???
とりあえずリストタグでリンクを表示する箇所のソースを載せたまえ
552Name_Not_Found:2009/05/18(月) 14:38:55 ID:???
.button{width: 760px;
height: 30px;
background: url(../images/b_bggreen.gif) repeat-x;}
#menu li{list-style-type: none;
float: left;
line-height: 100%;
position: relative;
left: 20px;}
#menu a{text-decoration: none;
font-weight: bold;
line-height: 100%;
display: block;
height: 14px;
padding: 8px 15px 8px 15px;
color: #ffffff;}
#menu a:hover{color: #000000;}
.visit{text-decoration: none;
font-weight: bold;
overflow: hidden;
display: block;
height: 14px;
padding: 8px 15px 8px 15px;
color: #ffffff;
background: url(../images/b_bgyellow.gif) repeat-x;}
553Name_Not_Found:2009/05/18(月) 14:40:13 ID:???
一貫性と保守性もないきたねえコードだな
554Name_Not_Found:2009/05/18(月) 14:41:18 ID:???
ごめんなさい間違えて書き込みしてしまいましたorz

↑がcssで
返事ありがとうございます!
htmlが↓です
<div class="button">
<ul id="menu">
<li class="visit">リンク</li>
<li><a href="link1.htm">リンク</a></li>
<li><a href="link2.htm">リンク</a></li>
<li><a href="link3.html">リンク</a></li>
</ul>
</div>

わからないことどんどんやったせいでダメな感じになってるきがします

おくれましたがお返事ありがとうございます!!!
555Name_Not_Found:2009/05/18(月) 14:43:40 ID:???
なるほど!やっぱりその辺が問題なのですね
とりあえずきれいにしてみます!

ありがとうございます!
556Name_Not_Found:2009/05/18(月) 15:20:16 ID:???
マジレスすると無駄にclassやら使い過ぎなんだよね
557Name_Not_Found:2009/05/18(月) 16:20:29 ID:???
>>554
ソースはなるべく綺麗に書け糞が!!

<div class="link-menu">
<ul>
<li>リンク</li>
<li><a href="link1.htm">リンク</a></li>
</ul>
</div>

CSS------
.link-menu { ... }
 .link-menu ul { ... }
 .link-menu li { ... }
 .link-menu li a{ ... }
558Name_Not_Found:2009/05/18(月) 16:20:57 ID:???
できました!

#menu li{
  list-style-type: none;
  float: left;

にしてほかのとこをおんなじに揃えたら平気になりました!
classは無駄に使ってしまうので気をつけます

お騒がせしました
559Name_Not_Found:2009/05/18(月) 16:29:54 ID:???
うわあああそういうこと
やっとわかりました!
<li>リンク</li>でクラスいらないんですね!
直します!ありです!!
560Name_Not_Found:2009/05/19(火) 11:10:23 ID:???
マジレスするとfloatはどこまで続くんだ
561Name_Not_Found:2009/05/19(火) 11:41:31 ID:???
>>560
clearfixつけりゃぁいいんじゃね?
562Name_Not_Found:2009/05/19(火) 12:17:22 ID:???
clear bothだろ
563Name_Not_Found:2009/05/19(火) 13:13:35 ID:???
>>562
clearfixをしらないとかw
564神様見習い:2009/05/19(火) 17:05:08 ID:lSfuuKBU
ぼくは元気です!
565Name_Not_Found:2009/05/19(火) 17:54:41 ID:???
元気が一番ですね!
566Name_Not_Found:2009/05/19(火) 19:42:25 ID:???
そんな君たちをfloatしちゃうぞ☆
567Name_Not_Found:2009/05/19(火) 20:18:24 ID:???
>>566
both
568Name_Not_Found:2009/05/20(水) 00:16:52 ID:???
表について質問です

ttp://www.dotup.org/uploda/www.dotup.org44865.jpg
こういう風に表を作りたいのですが

<html>
<table border="1">
<tr><th align="center">X</th><th align="center">Y</th></tr>
<tr><td align="left">A</td><td align="right">1</td></tr>
<tr><td align="left">B</td><td align="right">2</td></tr>
<tr><td align="left">C</td><td align="right">3</td></tr>
</table>
</html>


こうすると空白ができず長細い表になってしまいます。
どうすれば上の写真のような空白がある表ができますか?ご教授よろしくお願いします。
569Name_Not_Found:2009/05/20(水) 00:21:42 ID:???
>>568
widthを指定する
570Name_Not_Found:2009/05/20(水) 00:30:31 ID:???
>>569
できました〜
ありがとうございます!
571Name_Not_Found:2009/05/20(水) 11:03:54 ID:???
初歩的な質問ですみません
text-indentは行の何を指定するのに使うのですか?
572Name_Not_Found:2009/05/20(水) 11:09:31 ID:???
ググりました?
573Name_Not_Found:2009/05/20(水) 11:48:28 ID:vNI1VSTY
グリグリ
574神様見習い:2009/05/20(水) 11:50:40 ID:nm2sQsyH
http://www.youtube.com/watch?v=IPr9yBiLAAs

コレ見たらPhotoshop欲しくなりました。。。
Photoshopすげー。。。
すれち失礼しました。。。
575Name_Not_Found:2009/05/21(木) 15:53:20 ID:MrIupW8h
あげ
576Name_Not_Found:2009/05/21(木) 16:16:08 ID:???
質問です

<!-- HTML -->
<div id="a">ああ</div>
<div id="b"><div class="bb">いいい</div></div>

<!-- CSS -->
#b {background-image: url(../img/imgback.jpg)}
#b div.bb { margin: 35px 0 0 0}

例えば上記のようなHTMLとCSSを組んだ時、
<div id="b">の上部に35pxのマージンが開いてしまいます。
<div id="b">にマージンを入れないで(そのままの表示位置で)、
入れ子にしている<div class="bb">だけ上部に35pxのマージンを
入れるにはどうすればいいでしょうか?
577Name_Not_Found:2009/05/21(木) 16:18:03 ID:???
padding-top:35px
578576:2009/05/21(木) 16:23:12 ID:???
上記のHTMLとCSSを組んだ場合、
IE7のみ<div class="bb">の上部に35pxのマージンが入ります。
Firefox、GoogleChrome、Safari4では、<div id="b">の上部に35pxのマージンが入ります。

Firefox、GoogleChrome、Safari4で、IE7の表示と同じように、
<div id="b">の表示位置はそのままで、
<div class="bb">の上部だけ35pxのマージンを入れるにはどうすればいいでしょうか?
579Name_Not_Found:2009/05/21(木) 16:25:56 ID:???
marinとpaddingを0にリセットしてから>>577
580578:2009/05/21(木) 16:27:25 ID:???
>>577
サンクス!
581578:2009/05/21(木) 16:28:35 ID:???
>>579
ありがとう!おかげで解決できました!
職場からアクセスでした
582Name_Not_Found:2009/05/21(木) 19:12:22 ID:???
Emacsでスタイルシートを作る練習をしていたのですが
゛font-family:〜゛を入力したら
一番下に゛〜coding゛(中途半端ですいません)と表示されて動作しませんでした。
これは文字コードが間違っているのでしょうか?
因みに直前で背景色はスタイルシートで変更出来ました。
583Name_Not_Found:2009/05/21(木) 23:04:12 ID:mtkm6KEh
http://www.dotup.org/uploda/www.dotup.org50217.jpg
のような、クリックしたら閉じたり開いたりするタグって何ですか?




584Name_Not_Found:2009/05/21(木) 23:06:01 ID:???
ソース嫁
585Name_Not_Found:2009/05/21(木) 23:38:02 ID:???
>>582
特定ソフトの操作について、このスレできいても誰も答えないと思う
他の板やスレをあたったほうがいい

>>583
「ツリー階層メニュー」で探すといい
586Name_Not_Found:2009/05/23(土) 02:53:23 ID:???
当方文章書きです
自分は等幅フォントが好きなんですが
MS ゴシックは英数字が非常にダサいんです

そこで質問なんですが、
CSSで毎回英数字だけフォントを変える事は可能ですか?
divとかで指定して毎回英数字を囲むしかないんでしょうか…
587Name_Not_Found:2009/05/23(土) 03:05:35 ID:s/86WYry
age
588Name_Not_Found:2009/05/23(土) 12:30:55 ID:???
他人が見る物に勝手にフォント指定しないでください
589586:2009/05/23(土) 15:59:00 ID:s/86WYry
>>588
サイズならともかくフォントは構わないと思うのですが…
590Name_Not_Found:2009/05/23(土) 17:06:49 ID:???
JavaScriptの正規表現で置換するしか方法がないな
591Name_Not_Found:2009/05/23(土) 17:23:42 ID:???
ここでいいのかわからないんですが
すみません質問させて下さい

メモ帳にタグ直打ちでHTMLファイルを作成して
サイトを運営しているのですが、Windows Updateした結果
これまでのように右クリックでソースを表示しても
中身をいじれなくなりました

IEは8,0で表示しています
ソースの書きかえはどうしたらいいのでしょうか?
どうか教えて下さい
592Name_Not_Found:2009/05/23(土) 17:26:21 ID:???
メモ帳でHTMLファイルを開けば良い
593Name_Not_Found:2009/05/23(土) 17:34:27 ID:???
>592
ありがとうございました
助かりました
594Name_Not_Found:2009/05/23(土) 18:08:24 ID:???
float:left;で横に並べた子boxを入れた親boxでclear:left;して
この親boxにborder-bottomして
この親boxをページ内で繰り返すと
縦に並ぶ親boxの間に罫線を引くことができました
ところが
一番下の親boxのborder-bottomだけ
縦に並ぶすべての親boxを無視して
一番上に行ってしまいます

そこで苦し紛れに色々いじって
親boxにoverflow:hidden;を入れてみたら
一番下の親boxのborder-bottomがちゃんと表示されました

この時のoverflow:hidden;はどういう意味ですか?
またこういった親boxでclear:left;するやり方は間違っていますか?
595Name_Not_Found:2009/05/23(土) 18:13:09 ID:???
ソースはってくれ。
596Name_Not_Found:2009/05/23(土) 18:22:35 ID:???
>>594
文章で説明されると読むのが面倒
ソースをそのまま貼ってくれるか
597Name_Not_Found:2009/05/23(土) 18:25:12 ID:???

div.親 { clear:left; border-bottom:1px }
div.子1 { float:left }
div.子2 { float:left }

---------------------------
<div class="親">
<div class="子1"></div>
<div class="子2"></div>
</div>
---------------------------
↑これを何個か繰り返す
と一番下のborder-bottomだけ
すべての最上部に表示される

そこで
div.親{ clear:left; border-bottom:1px; overflow:hidden }
にしたら
一番下のborder-bottomも
他のと同じように表示された
598Name_Not_Found:2009/05/23(土) 18:40:03 ID:???
ちなみに
>>597だと最後の親に入ってるfloatが直らないままなので

<div 親><子1><子2></div>
<div 親><子1><子2></div>
・・・
<div 親><子1><子2></div>

<div 次のブロック></div>

- - - - -

div.次のブロック{clear :left;}

これは最初からやってて
その上で一番下の線が.>597のような症状になりました
599Name_Not_Found:2009/05/23(土) 18:41:42 ID:???
> 一番下のborder-bottomだけすべての最上部に表示される
意味不
すべての最上部ってどこのことよ?
600Name_Not_Found:2009/05/23(土) 18:49:34 ID:???
<div 前のブロック>
                 ←一番下のborder-bottomだけこの部分に来る
<div 親><子1><子2></div>
<div 親><子1><子2></div>
・・・
<div 親><子1><子2></div>
<div 親><子1><子2></div>

<div 次のブロック>

一番下以外のborder-bottomは各ブロックの下部分にちゃんと表示されました
601Name_Not_Found:2009/05/23(土) 19:09:36 ID:???
ごめんなさい自己解決しました

× div.親 { clear:left; border-bottom:1px }
○ div.親 { float:left; border-bottom:1px }

こうするみたいですね
スレ汚しごめんなさい
602Name_Not_Found:2009/05/24(日) 16:01:13 ID:tZUdWfMl
質問です

<body>
<div id="wrapper">
 <子1>
 <子2(tableを含む)>
 <子3>
</div>
</body>
上のようなソースで、cssが下記のようになっています
body
{ text-align: center;}
#wrapper
{ position: relative; top: 50%;
 margin-left: auto; margin-right: auto; width: 200px;
 text-align: left;}

IEだと思った通りに表示されるのですが、
firefoxではposition: relative; top: 50%;がきいていないらしく、
bodyのmargin-top:0px;のような感じで表示されてしまいます
何か指定が間違っているのでしょうか?
603Name_Not_Found:2009/05/24(日) 17:39:08 ID:???
bodyにheightを指定してみたかい?
604602:2009/05/24(日) 17:56:47 ID:???
>603
ご指摘の通りにしたところ、とりあえず隙間をあけることはできました。
ありがとうございます。

追加で質問になってしまうのですが、
コンテンツの高さを可変にしたい場合はどうすれば良いのでしょうか?
bodyのheightを100%にしたらIEでは縦方向のスクロールバーが出てしまい、firefoxでは上部に隙間があきません。
605Name_Not_Found:2009/05/24(日) 18:21:58 ID:???
携帯で画像をランダム表示したいのですが
どのようなスクリプトが使えるのでしょうか?
606Name_Not_Found:2009/05/24(日) 18:29:37 ID:???
>>604
autoやheightについて調べるといいんじゃないかな。
やりたいことを再整理して発想を変えるのが良さそうかな。

>>605
スレちがいのようだ。
607Name_Not_Found:2009/05/24(日) 18:31:44 ID:???
>>606
どの板が適してます?
608Name_Not_Found:2009/05/24(日) 18:34:43 ID:???
609Name_Not_Found:2009/05/24(日) 18:37:06 ID:???
>>608
マジメにどこですか?
610Name_Not_Found:2009/05/24(日) 18:48:26 ID:???
>>609
クライアントサイドスクリプトなら、この辺り
http://pc11.2ch.net/test/read.cgi/hp/1242782347/
サーバサイドスクリプトでやるなら、その言語のスレを探すべし
611Name_Not_Found:2009/05/24(日) 18:50:44 ID:???
>>610
thx!!!!!!
612602=604:2009/05/24(日) 21:30:31 ID:???
>606
遅くなってすみません
少しいろいろ調べてきます
ありがとうございました
613Name_Not_Found:2009/05/24(日) 23:27:39 ID:EQGbF6xt
ホームページを初めてつくります!
どうする?
614Name_Not_Found:2009/05/24(日) 23:43:23 ID:???
まずは深呼吸ですね
できれば複式呼吸がいいですよ
615Name_Not_Found:2009/05/24(日) 23:47:44 ID:???
>>613
どうするって何を?
616613:2009/05/25(月) 01:18:09 ID:D4Aa9WDz
何卒よろしくお願い申し上げます。
617Name_Not_Found:2009/05/25(月) 11:24:18 ID:???
検索してもわからないんで誰か助けてください

IE7でテキストボックスにフォーカスを当てた時に、入力位置を表すカーソル(マウスカーソルではなく、|で表示される方)を、キーの上書きモードと挿入モード(INSキーで切り替わる奴)によって変更したいのですが、CSSやjavascriptで可能なのでしょうか?

上書きモードの時は点滅する縦長の長方形、挿入モードの時は|にしたいのです
618Name_Not_Found:2009/05/25(月) 15:14:56 ID:XhRDma/u
>>613

まずはメモ帳を開いて下のHTMLをコピペ、
そして start.html として保存、
開いてみてどうして日本語が文字化けするか悩め

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
あいうえお
ABCDE

</body>
</html>
619Name_Not_Found:2009/05/26(火) 21:56:01 ID:OeO5XD+i
>>613
* {
display: none;
}
620Name_Not_Found:2009/05/28(木) 11:23:26 ID:nrjjoVui
CSSを一切使わずに、tableのtdのbackground="img"を繰り返さない方法って存在しませんかね?
621Name_Not_Found:2009/05/28(木) 14:01:27 ID:???
>>620
tdのサイズより大きい画像を使う
622神様見習い:2009/05/28(木) 22:47:00 ID:JeaJDj0z
みなさん元気ですか?ぼくは元気です。。。
最近スキル向上サボリ気味ですが。。。
623Name_Not_Found:2009/05/29(金) 07:37:35 ID:eAZD/j6l
>>620
まんまググれば出てくるでそ
624Name_Not_Found:2009/05/29(金) 11:27:55 ID:???
質問します

【HTML】

<div id="s">
<h2>タイトル</h2>
<h3>サブタイトル<h3>
<ul>
<li>MENU1</li>
<li>MENU2</li>
</ul>
</div>


【CSS】

#s h2 { font-size: 11pt}
#s h3 { font-size: 11pt}

上記の例では<h2>と<h3>のフォントサイズは等しく11ptです。
さらに<li>も11ptにする予定なのですが、
このスタイルシートをもっとシンプルにまとめる方法はあるでしょうか?

#s h2 h3 li { font-size: 11pt}

こんな感じにしてもダメでした。。_| ̄|○
625624:2009/05/29(金) 11:35:07 ID:???
今ググってます。。
626Name_Not_Found:2009/05/29(金) 11:42:57 ID:???
#s h2,#s h3
627624:2009/05/29(金) 11:58:54 ID:???
>>626
ありがとう。
おかげで解決できました。感謝します。
一応プロのWEBデザイナーですが、
こんな初歩がわかってなくてお恥ずかしい限りです。

ついでにお聞きしておきたいのですが。。

【HTML】
<div id="s">
<h2>タイトル</h2>
<h3>サブタイトル<h3>
<ul>
<li>MENU1</li>
<li>MENU2</li>
</ul>
<p>文章文章文章。。</p>
</div>

【CSS】
#s h2,#s h3,#s li,#s p {
 font-size:1pt; float: left; margin: 0px; padding: 0px; color: #ffffff;
}

上記のようなソースを組んだ場合、
SEO的にスパム扱いになるでしょうか?
628Name_Not_Found:2009/05/29(金) 19:05:29 ID:???
>>627
まぁ、なるでしょうな
629Name_Not_Found:2009/05/29(金) 23:23:05 ID:gcwxawkv
position:fixedについてなんですが
webで調べるとIE6は未対応という記述をよく見かけるんですが
IE7やIE8でも対応できていないような気がするんですが違いますか?
630Name_Not_Found:2009/05/29(金) 23:31:30 ID:???
>>629
たった今IE7で試したけれど、ちゃんと対応してたよ
ちゃんとDOCTYPE宣言してる?
631Name_Not_Found:2009/05/29(金) 23:46:23 ID:???
ヒント:
top、left
親要素のposition
632629:2009/05/29(金) 23:56:57 ID:???
>>630
あ、続けて質問しようとしてたんですが
IE6でもfixedを適用する方法を調べたところ
どれもDOCTYPE宣言が前提になっていたんですが
DOCTYPE宣言なしでIEに適用する方法はないんでしょうか。
633Name_Not_Found:2009/05/30(土) 00:35:22 ID:YqMGfWEE
ezHTMLというHTMLエディタを使っていてすごく使いやすいものでした。
ezHTMLでは <b ←このように打ち始めると勝手に <background></background> や
<border></border>などのような物を推測して選択画面のようなものに表示してくれる
機能があります。
非常に便利なのですが、手打ちの練習をしたいときに邪魔になってしまいます。
この機能を一時的に無効化することは出来ないのでしょうか?
メモ帳を使えば良いのですが、ezHTMLには他にも魅力的な機能があるのでどうしても・・・
634Name_Not_Found:2009/05/30(土) 00:48:53 ID:???
ヘルプを読んでみたらどうだろう?
635Name_Not_Found:2009/05/30(土) 01:26:31 ID:???
オンラインマニュアルは見たのですがヘルプは見てませんでした
解決しましたありがとうございます
ヘルプってこんなに役に立つんだw
636Name_Not_Found:2009/05/30(土) 13:10:16 ID:oGv7m5+R
トップページの一部に文章を書き、その部分が数日経てばor文章が数本溜まれば、
過去ログとしてその部分が「○日の更新」として別のページに自動的に溜まって行くという
簡単なブログのようなシステムを作りたいのですが、可能でしょうか
ブログサイトのソースを見ても分からず、何とググればいいのか分からず困っています
まさに手も足も出ない状態で・・・よろしくお願いします
637Name_Not_Found:2009/05/30(土) 13:11:35 ID:???
ブログソフトウエアでも使えや
638Name_Not_Found:2009/05/30(土) 13:34:04 ID:???
HTMLじゃ_
639Name_Not_Found:2009/05/30(土) 16:01:56 ID:oGv7m5+R
>>637
そうするとページ全体がブログになってしまいます
htmlの一部分だけ、それもデザインは無地のままで組み込めないでしょうか

>>638
何だったらできますか
誘導お願いします
640Name_Not_Found:2009/05/30(土) 17:42:33 ID:???
>>639
習得が楽なのはPHP
何か一つでも言語を使えるなら使えるだろう
641Name_Not_Found:2009/05/30(土) 23:05:03 ID:???
>>639
ブログソフトウエアを使ってもカスタマイズを徹底してやればブログ臭は消せる
システムだけブログのを利用して外観は普通のサイトに見せれば良い
642Name_Not_Found:2009/05/30(土) 23:53:35 ID:FsDNLANq
<dl>
<dt>A</dt>
<dd>
Text Text Text
</dd>
</dl>

というのがあったときに、dd は通常は dt の次の行から始まりますが
これを dd の右隣から始めることはできませんか。
やりたいのは簡単なテーブルみたいなことです。

<tr>
<td>A</td>
<td>
Text Text Text
</td>
</tr>
643Name_Not_Found:2009/05/31(日) 00:01:58 ID:???
CSS
644Name_Not_Found:2009/05/31(日) 00:16:16 ID:???
>>642
枠非表示のtableで
<table>
<tr>
<th>A</th><td>Text Text Text</td>
</tr>
</table>
645Name_Not_Found:2009/05/31(日) 00:18:41 ID:???
あるいは、compact属性を使って
<dl compact="compact">
<dt>A</dt>
<dd>Text Text Text</dd>
</dl>
646Name_Not_Found:2009/05/31(日) 00:39:45 ID:HsXGnEtF
<A>タグにstyle=で直接指定する際に、
a:link { color: …; }
a:visited { color: …; }
の擬似クラス?はどのように記述したらいいのでしょうか?
647Name_Not_Found:2009/05/31(日) 00:53:36 ID:???
>>642>>645
compactは非推奨属性だからねぇ…
<dl>を使うことを諦めて>>644のように<table>で代用するのが手っ取り早いかと

>>646
style=…で、擬似クラスに関する指定をするのは無理だと思う
面倒でもidなりclassなりを指定して、<head>内か外部ファイルに書くのが吉
648Name_Not_Found:2009/05/31(日) 00:56:33 ID:???
>>646
タグにstyle属性として値を入れるとタグ名{〜;}と同等になるから無理
649646:2009/05/31(日) 01:10:20 ID:???
>>647,648
有難うございます。
別途定義するようにします。
650Name_Not_Found:2009/05/31(日) 01:37:42 ID:qv2h0xFz
複数のページの同じ部分を、JavaScriptやほかのプログラムを使って一度に変更することは可能ですか?

私の個人サイトのコンテンツの全てのページに更新履歴を載せているのですが、
20ページ以上にわたり、毎回全てに更新内容を書き加えるのが大変です。

更新履歴の部分に何かソースを埋めておき、外部のファイルを更新するだけで
全てのページの更新履歴が更新されるようなことができれば・・・と妄想していたのですが、
私の知識ではまったくわからないのでどうかご教授ください。
651Name_Not_Found:2009/05/31(日) 01:47:35 ID:???
スレタイぐらい嫁よカス
inline frameでもつかっとけ
652Name_Not_Found:2009/05/31(日) 01:52:15 ID:???
>>651
まぁまぁ、「優しく」スレだからw

>>650
とりあえず、スレタイにあるhtmlとcssだけでやろうと思うなら、>>651の言うとおりインラインフレームで可能です。
フレームを使いたくないのであれば……
20ページ程度であれば、置換ツールを使うというのも手かなーと思います。
そうでなければ、phpなら全てのページに同じ内容を挿入することが可能です。
653Name_Not_Found:2009/05/31(日) 02:03:06 ID:qv2h0xFz
>>651-652
インラインフレームでやってみます。
ありがとうございます!
654642:2009/05/31(日) 07:30:42 ID:???
どうもありがとうございます。

>>645
>あるいは、compact属性を使って
そうです、ちょうどcompact属性と同じ効果をCSSでやるにはどうしたらいいかが
わからなくて質問しました。

>>647
>compactは非推奨属性だからねぇ…
><dl>を使うことを諦めて>>644のように<table>で代用するのが手っ取り早いかと
そうなんですか。なんとかCSSでできないでしょうか。
今は
dd {
margin-top: -1.5em;
margin-left: 100px;
}
とやってみてるんですけど、もっといい方法がないでしょうか。
655Name_Not_Found:2009/05/31(日) 10:18:05 ID:???
>>654
dt {
float: left;
width: 5em;
}
dd {
margin-left: 5em;
}

dt-ddをテーブルぽく見せるのは限度があるから、こだわると結局テーブル使うことになるかもね。

上の方法、OperaとNetscapeだと拡大縮小すると枠線が消えたりカラム落ちしたりすることがあります。
その場合、paddingのtopかbottomをちょっと広げればたぶん直ります。
656Name_Not_Found:2009/05/31(日) 12:40:04 ID:???
inline-blockつかえばいいだろ
657Name_Not_Found:2009/05/31(日) 15:04:36 ID:???
inline-blockでやるのは無理があるだろ
658Name_Not_Found:2009/05/31(日) 18:21:12 ID:QmNOnyEW
http://10.2.tool.ms/

ここのテンプレを有料のレンタル鯖で使いたいんですけど、適したCSS等の記述がわかりません。
659Name_Not_Found:2009/05/31(日) 21:35:00 ID:???
>>654
CSSに拘る必要は無いと思うよ
基本的にソースを気にしてサイト見るのはサイトの製作者だけなので
660Name_Not_Found:2009/05/31(日) 23:01:00 ID:???
hnにinline-blockでfloatしたらいかんの?
素人意見な上それでどう動くのか分からんけど
661!omikuji:2009/06/01(月) 00:29:13 ID:???
!omikuji
662Name_Not_Found:2009/06/01(月) 14:03:25 ID:???
教えてください!
ゼロからhtml cssを勉強するのに
お勧めの本はありますか??

たくさんありすぎてどれが良いのかわからないです×
663Name_Not_Found:2009/06/01(月) 14:18:03 ID:???
Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則
Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則
みるみるマスター HTML&スタイルシート 作れる!わたしのWebサイト

異論は認める
664Name_Not_Found:2009/06/01(月) 14:41:31 ID:???
本買う前にぐぐってみたほうがいいよ。
とりあえず参考になりそうなサイト書いとく

基礎
ttp://www.shoshinsha.com/hp/
ttp://www.tohoho-web.com/www.htm

テンプレはここらへんをまねるといいかも
ttp://www.free-css-templates.com/
ttp://templates.arcsin.se/
ttp://www.templateworld.com/
665Name_Not_Found:2009/06/01(月) 23:26:21 ID:???
>>662
本を買う必要はないと思うよ。htmlやcssを扱った本は高価なものが多く、高い
お金を出して買ったのに、本の中身が期待はずれだったらショックが大きい
からね。
Googleブック検索を利用して勉強するのが賢い方法だと思う。google bookなら、
htmlやcssについて書かれたかなりの数の本を無料で閲覧できるからね。
666Name_Not_Found:2009/06/01(月) 23:48:17 ID:???
スタイルシートに関する質問です。
ぜひアドバイスをいただきたいのですが…。

divの横幅から文字列がはみ出したとき、その末端に..を付けることは可能でしょうか?

--------
div {
width: 5em;
overflow: hidden;
}

<div>
あいうえおかきくけこ
</div>
--------
これ出力は、
「あいうえお」
こうなりますが、
「あいうえお..」
このように表示させたいということです。

どうぞ、よろしくお願いします。
667Name_Not_Found:2009/06/02(火) 00:01:54 ID:???
>>665
ブック検索みて内容が良かったら買うけどね
紙の本は見やすいという事実は変わらない
668Name_Not_Found:2009/06/02(火) 00:41:37 ID:???
>663.664.665.667

ありがとーございます!
とりあえずサイトを見て
わからなかったらブック検索みて
良かったら買ってみます!!


669Name_Not_Found:2009/06/02(火) 00:48:57 ID:???
サイト見ながらでいいと思うがね
670Name_Not_Found:2009/06/02(火) 02:04:28 ID:???
サイトで検索すればだいたいの事は解決できる、けれど
サイトだと中々1〜10まで順序良く教えてくれるサイト無いよ
あと知りたいこと探すにも専門用語的なキーワードも知らないだろうし
掲示板で質問スレたくさんたってるでしょ、サイトでピンポイントに知りたいことスグ探せるなら
こんなにスレたってないよ

本いらずでサイトでOKはある程度知識ある人には良いけど、初めからの人は覚えるまでに遠回りになると思う


671Name_Not_Found:2009/06/02(火) 14:31:33 ID:???
俺は本なんて買わずに全部具具って調べたけど、まあ手っ取り早いのは指南書にそってやることだろうな。
672Name_Not_Found:2009/06/02(火) 22:40:45 ID:xRiB/4Jk
>>666
overflow:hidden; で隠して
after か別の<p>で後ろに .. を加えるのはどうでしょう
673Name_Not_Found:2009/06/02(火) 22:43:00 ID:???
>>672
それだと「文字列がはみだすとき」だけにはならないのでは?
>>666の内容は、CSSだけでは難しそうだ
674Name_Not_Found:2009/06/03(水) 00:48:33 ID:???
ttp://www.tagindex.com/stylesheet/text_font/text_overflow.html

モダンブラウザすべてが対応してるわけじゃないが
675Name_Not_Found:2009/06/03(水) 03:42:02 ID:???
有名かもしれないんですが見当たらないので質問します。

dlタグを使った場合の表示位置が
Firefox3、IE7、8、Safari3などでは正常に表示されるのですが
IE6ではこれらと比べると開始位置が僅かに(1〜2px)間隔が広く
何度も繰り返し使っているため全体ではかなりズレてしまいます。

FF3等と同じ表示にしたいのですが解決方法を教えてください

一応>>9のようなCSSリセットは行っています
676675:2009/06/03(水) 04:02:01 ID:???
IE7ではIE6と同様の表示でした
失礼しました
677Name_Not_Found:2009/06/03(水) 08:51:05 ID:NSEPda//
CSSで質問なんですが
例えば#naviの中のliだけ定義する場合

#navi li{
プロパティ
}

という書き方は一般的に使われていますか?
678Name_Not_Found:2009/06/03(水) 08:58:33 ID:???
>>677
何を持って一般的かは解りませんが使われてます
679Name_Not_Found:2009/06/03(水) 09:23:48 ID:NSEPda//
>>678
サンクス

スマン、自分があんまりソースで見たことなくて使っていいのか疑問だったから使ってるとこがあるのかと言う意味で一般的という言い方をさせてもらいました
680Name_Not_Found:2009/06/03(水) 10:01:52 ID:???
>>675
ハックか条件コメント使って調整すればいいんでない?
681666:2009/06/03(水) 12:27:24 ID:???
たくさんのアドバイスありがとうございました!
overflow: ellipsis は知りませんでした!
682Name_Not_Found:2009/06/03(水) 18:23:36 ID:???
>>680
ありがとうございます
ハックで個別対応しました

もうひとつ別の質問なのですが
SafariやFirefoxの最新バージョンでは
Mac版とWindows版でCSSの解釈が決定的に違う
などというケースがありますか?
683Name_Not_Found:2009/06/03(水) 19:39:02 ID:???
>>682
Firefoxは同じコードを違うOSで動かせるようにしてあるからそんなことはあり得ない
684Name_Not_Found:2009/06/03(水) 22:20:20 ID:???
すいません、教えてください。
同じような項目のページがたくさんあるホームページを作っています。
その各々のページに参考文献の番号として番号を記述しています。
○○という本を参考にしたものには1
××という本を参考にしたものには2
みたいな感じです。
参考文献を追加することがあるので番号が変わることがあるのですが
現在は全てのページをしこしこと書き換えています。
cssみたいに別のファイルで参考文献一覧表を持っていて
それを変えれば全部変わるみたいにしたいのですが・・。
どういう手段がありますでしょうか?
(説明が分かりづらくてすみません・・)
685Name_Not_Found:2009/06/03(水) 22:49:20 ID:???
番号を変えない
686Name_Not_Found:2009/06/03(水) 22:58:45 ID:???
>>684
番号はページごとに割り当てて変えない方が何度も見る人にとっては見やすいと思うが
687Name_Not_Found:2009/06/04(木) 09:54:13 ID:???
複数のhtmlファイルの共通した部分(例・更新の日付)を
外部cssなどで一括置換することは可能ですか?

いくつものhtmlの日付を一つ一つ直すのはとても骨が折れるので…
ソフトではなく、cssかjavascriptでの置換が簡単にできる方法があれば
お教え願えないでしょうか?
688Name_Not_Found:2009/06/04(木) 10:01:06 ID:???
>>687
外部cssなら:beforeや:afterを使うってのはどう?
ただし、IE6や7では使えないけどwww
JavaScriptは「更新の日付を自動的に表示する」ってのは
できるらしいけど詳しくないのでわかりませんw
該当スレできいてください。
689Name_Not_Found:2009/06/04(木) 10:30:26 ID:???
>>688
ありがとうございます!javascriptスレで聞いてみます。
690684:2009/06/04(木) 19:31:45 ID:???
内容としては687さんとおなじようなことなのですが・・。
見やすい見にくいは別として技術的にはできないってことでしょうか?
691Name_Not_Found:2009/06/04(木) 19:39:54 ID:???
>>690
そもそも>>684でやりたいことがよくわからんのでスルーしてたんだけど
「外部ファイルを読み込んで表示する」という考え方ならphpかjavascriptかな
692Name_Not_Found:2009/06/04(木) 19:46:25 ID:???
>>690
ベスト解出てそうだが。

手でしこしこやった版、を提示してもらった方がよいかな。
もとめてるものが、今ひとつわからん。
693684:2009/06/04(木) 21:35:33 ID:???
すみません、ありがとうございます。
ジオシティーズではphpが使えないんですね。
結局Devasというファイル内テキスト一括変換ツールを使って変えることが
できました。
お騒がせしました・・。
694Name_Not_Found:2009/06/04(木) 21:46:47 ID:???
>>693
>ジオシティーズではphpが使えないんですね。
有料版なら使える
695Name_Not_Found:2009/06/05(金) 00:05:33 ID:???
入力フォームのプッシュボタンで
マウスオーバーした時に、文字色を変える事はできますか?
ぐぐったのですが背景色の変更しか見つかりませんでした
696Name_Not_Found:2009/06/05(金) 01:09:02 ID:???
質問します

【HTMLソース】
<table class="bana">
<tr><td>
<a href="index.html" class="bana001">

</a>
</div>
</td>
<td>
<a href="index.html" class="bana002">

</a>
</td>
<td>
<a href="index.html" class="bana003">

</a>
</td></tr>
</table>

つづく
697696:2009/06/05(金) 01:09:46 ID:???
>>696の続き

【CSS】
table.bana { margin: 50px 0 0 80px;}
a.bana001 {
 display: block; width: 135px; height: 123px;
 background-image: url(../banaback/bana001a.jpg); background-repeat: no-repeat;
}
a.bana001:hover {
 display: block;
 background-image: url(../banaback/bana001b.jpg); background-repeat: no-repeat;
}
a.bana002 {
 display: block; width: 135px; height: 123px;
 background-image: url(../banaback/bana002a.jpg); background-repeat: no-repeat;
}
a.bana002:hover {
 display: block;
 background-image: url(../banaback/bana002b.jpg); background-repeat: no-repeat;
}
a.bana003 {
 display: block; width: 135px; height: 123px;
 background-image: url(../banaback/bana003a.jpg); background-repeat: no-repeat;
}
a.bana003:hover {
 display: block;
 background-image: url(../banaback/bana003b.jpg); background-repeat: no-repeat;
}

つづく
698696:2009/06/05(金) 01:11:43 ID:???
>>697の続き

上記のHTMLソース(>>696)とCSS(>>697)でブロック要素になった
<a>のwidth: 135px; height: 123px;の領域全体がリンクになり
オンマウスで背景画像が差し替えられることになります。

ここからが本題になるのですが、
ブロック要素に変換したwidth: 135px; height: 123px;のリンク領域の中に、
<img>を表示させたい場合はどうすればいいでしょうか?

よろしくお願いします。
699696:2009/06/05(金) 01:19:19 ID:???
以下のHTMLとCSSで自己解決しました。

【HTMLソース】
<table class="bana">
<tr><td>
<a href="index.html" class="bana001">
<img class="bana" src="./bana/bana001.jpg" width="88" height="31" title="" alt="" />
</a>
</div>
</td>

【CSS】
img.bana {
 margin: 5px 0 0 5px; float: left;
}
700696:2009/06/05(金) 01:22:25 ID:???
訂正:

【HTMLソース】
<table class="bana">
<tr><td>
<a href="index.html" class="bana001">
<img class="bana" src="./bana/bana001.jpg" width="88" height="31" title="" alt="" />
</a>
</td>

【CSS】
img.bana {
 margin: 5px 0 0 5px; float: left;
}
701Name_Not_Found:2009/06/05(金) 17:10:41 ID:iSBQ/Ctc
表示されている画像をクリックすると
別ウィンドウで画像サイズに合わせたウィンドウ表示

<a href="javascript:w=window.open('画像.jpg','','scrollbars=no,resizable=yes,Width=640,Height=480');w.focus();">

これで、開いたウィンドウサイズをその画像の縦横100%に合わせることはできないですか?
テンプレートの書類を作っているので、それぞれの画像サイズがばらばらで、その画像サイズにウィンドウをリサイズして欲しい。

Width=画像の横,Height=画像の縦
702Name_Not_Found:2009/06/05(金) 20:04:38 ID:???
汚いMSゴシックが嫌いで、ブラウザのフォントを変えているのですが、
サイトのスタイルシートでMSゴシックが指定されていると、そっちが優先されてしまいます。(yahooトップなど)
そこで質問なのですが、
「スタイルのスコープでMSゴシックを抽出して、任意のフォントに変える。」
というユーザースタイルシートを作りたいのですが、可能でしょうか
明朝フォントは別のフォントで表示したいので、bodyやdiv全体に設定することはできません。
703Name_Not_Found:2009/06/05(金) 21:45:49 ID:???
教えて下さい
以下のhtmlにcssファイルを適用してるんですが
testの文字がmediumなのですがcss1の*が
優先されてしまっているという事でしょうか

【html】
<div class="link">
<a href="http://test/index.html">test</a>
</div>

【css1】
*{
font-style:normal;
font-weight:normal;
font-size:medium;
text-decoration:none;
text-align:center;
border:none;
margin:0;
padding:0;
}
div{
margin-top:20px;
}

【css2】
div.link{
font-size:x-small;
}
704Name_Not_Found:2009/06/05(金) 21:48:15 ID:???
>>703
それは【css2】のほうを
div.link a{font-size:x-small;}
ってしないとダメだね
705Name_Not_Found:2009/06/05(金) 22:41:50 ID:???
うおおおおおお!!!>>704さん!!!
ありがとうございます!!ありがとうございます!!!

ただ実はリンクをはっていないテキストがあったのですが
今度はそっちがmediumになってしまいました
両方x-smallにするには以下の通りにする他ないですよね

【html】
<div class="link">
test<br>
<a href="http://test/index.html">test</a>
</div>

【css2】
div.link a{
font-size:x-small;
}
div.link{
font-size:x-small;
}
706Name_Not_Found:2009/06/05(金) 22:44:34 ID:???
>>705
そういうことだね
707Name_Not_Found:2009/06/06(土) 01:58:31 ID:???
>>705
div.link,div.link a{
font-size:x-small;
}
708Name_Not_Found:2009/06/06(土) 04:28:27 ID:???
>>706
>>707
ありがとうございます!!
半年程悩んでいたので助かりました
709Name_Not_Found:2009/06/06(土) 15:31:40 ID:???
3日目くらいで質問しろよ
710Name_Not_Found:2009/06/06(土) 17:04:49 ID:???
* {
margin: 0px;
padding: 0px
}

* {
margin: 0px;
padding: 0px;
}
はどっちがいいんでしょうか?
癖で上の方にしてしまうことが多いのですが他のサイトでは
あんまり見かけないような気がします


もう一つ
背景に画像をつけるときに、
body {
background: url(./bg.jpg)
}

body {
background-image: url(./bg.jpg)
}
ではどちらの方が良く使われるのでしょうか
711Name_Not_Found:2009/06/06(土) 17:22:24 ID:???
>>710
どっちでも大丈夫。
解説はここらへんどうぞ
ttp://css.uka-p.com/reference/ref1/background.html

上の * はどっちも同じの書いてない?
712Name_Not_Found:2009/06/06(土) 17:23:43 ID:???
>>711
セミコロンの有無が違うっぽい
713Name_Not_Found:2009/06/06(土) 17:26:47 ID:???
>>710
margin・paddingの方なんだけど、全く同じに見えるのは自分だけか?
ちなみに数値がゼロの場合は単位なくていいと思う。
背景画像の方は、background: url(./bg.jpg);の方は、背景色・背景画像の配置などを省略した形だから
厳密に書くとbackground: #fff url(./bg.jpg) repeat-y right top fixed;みたいなことになる。
背景画像だけ指定して、配置などの指定をしないならbackground-imageを使うのが普通じゃないかな?
714Name_Not_Found:2009/06/06(土) 17:27:32 ID:???
あ、セミコロンが無いのか。
セミコロンはもちろんあるほうがいいと思う。
715Name_Not_Found:2009/06/06(土) 18:13:29 ID:???
ないとだめなんじゃないの?
知らんけど
716Name_Not_Found:2009/06/06(土) 18:16:52 ID:???
セミコロンとか当たり前すぎて気がつかなかった

Cベースの言語とかCSSの行端にセミコロン付ける癖を付けないと色々困るからな
717Name_Not_Found:2009/06/06(土) 18:30:47 ID:???
IE6 IE8 Fx で調べてみたら
} 前の属性なら末端のセミコロン抜いても大丈夫だった

ただ手作業でCSS弄るなら後々のことを考えれば
やらないほうがいいかも知れない。

ツールに最適化させるならこの方法でサイズダウンができるかも
718710:2009/06/06(土) 18:36:34 ID:???
>>711-716
大変参考になりました。ありがとうございます
セミコロンについては数十バイトでも減らそうと思ってはじめた事でしたが、
改行やタブのことを考えるとあまり変わらないことに気づきました
CSSとプログラミング言語ではフォーマットが違うという
認識を持っていますので特に問題はなさそうですが、
統一性を持たせるためにも、今後はセミコロンを付けるようにしようと思います

backgroundに関しましては少なくとも開始位置の指定を必ず行うようにしていますので
background: url(./bg.jpg);の形を使うようにします
719Name_Not_Found:2009/06/06(土) 18:47:32 ID:???
セミコロンは何となく最後だけ抜いてたな
これからは付ける癖を付ける事にしよう

>>718
スレチになるけど画像使ってるなら、
サイズ削減にJPEG Cleanerやcarmineを使うといいかもね
720Name_Not_Found:2009/06/06(土) 23:43:16 ID:???
CSSを書く順番
(margin の後に padding とか
 width の後に height とか)
って決めて書いてますか?

もし決めてる方がいたら
教えてください(理由とかあればそれも)
721Name_Not_Found:2009/06/06(土) 23:49:57 ID:???
1.abc順
2.w3c定義順
3.コーディング意図を伝わるよーに

のいずれかかな。自分は1と3のハイブリッド。
722Name_Not_Found:2009/06/07(日) 00:37:33 ID:???
こなあああああああああああああああああゆきいいいいいいいいいいいいいい
723Name_Not_Found:2009/06/07(日) 01:40:47 ID:???
>>720
1.float、position等
2.width、height等
3.margin、padding、border等
4.font、text、color等
5.background
こんな感じかな。
自分でルールを決めておけば、見やすいしミスも減らせる。
724Name_Not_Found:2009/06/07(日) 03:28:26 ID:???
>>720
基本は、どこの、なにを、どうするじゃなかったかな

けど723の言うとおり自分ルールでいいんじゃない
725Name_Not_Found:2009/06/07(日) 11:33:32 ID:l8tB3+O6
HTMLでページの両端の15%づつをオレンジ、中心部の70%を白にする方法はありませんか?
726Name_Not_Found:2009/06/07(日) 12:36:42 ID:???
背景オレンジの中に背景白のボックスを中央配置
727Name_Not_Found:2009/06/07(日) 13:09:21 ID:???
余計な世話かもしれんけど補足
試してないけどたぶん上手くいく
ただ、両端オレンジは余程センスがない限り糞だから止めた方が良い

body {
width: 100%;
background: #f90;
text-align: center;
}
div {
width: 70%;
margin: 0 auto;
background: #fff;
text-align: left;
}

<body>
<div>box</div>
</body>
728Name_Not_Found:2009/06/07(日) 13:13:03 ID:???
試してないけどたぶ上手くいかないよ、ソレ。
ieだとソレッぽくなるかもね。
729Name_Not_Found:2009/06/07(日) 13:26:41 ID:???
body {
width: 100%;
height: 100%;
background: #f90;
margin: 0px;
text-align: center;
}
div {
width: 70%;
height: 100%;
margin: 0 auto;
background: #fff;
text-align: left;
}
じゃあこうか
730Name_Not_Found:2009/06/07(日) 14:24:35 ID:???
>>721
>>723
>>724
ありがとうございます。参考にさせていただきます。
731Name_Not_Found:2009/06/07(日) 15:23:17 ID:???
質問します

ローカル環境(パソコン上の)のWEBページを
lightwindowsで正常に表示させる方法はありますか?

IE7では、表示すらしなく
Firefoxでは辛うじて表示されますが
CSSが崩れて表示され、元の画面までCSSが崩れます。
732Name_Not_Found:2009/06/07(日) 16:08:01 ID:???
あああああああああああああああああああ
IE6だけレイアウト崩れるううううううううううううううううううううううううううううう
733Name_Not_Found:2009/06/07(日) 16:11:16 ID:???
>>732
CSSハック
734Name_Not_Found:2009/06/07(日) 16:55:46 ID:???
<ul>入れたら解決した
735Name_Not_Found:2009/06/07(日) 17:01:11 ID:???
八苦は所詮まやかしですよ
IEのどのバージョンでもFirefoxでもOperaでも
崩れないhtmlを書けばよいだけ、と思います
736Name_Not_Found:2009/06/07(日) 18:09:20 ID:???
死苦八苦
737Name_Not_Found:2009/06/07(日) 18:29:57 ID:???
俺の場合IE6とIE8はOKでIE7だけ崩れることが多い
738Name_Not_Found:2009/06/07(日) 19:12:44 ID:???
CSSハックなんて使わなくて済むようなデザインにすればいい
そもそもクロスブラウザ対策が流行したころ作られたwebサイトはメンテしようにも
作った人にしか理解できないようモノばかりで迷惑この上ない
739Name_Not_Found:2009/06/07(日) 20:01:21 ID:???
* html と html>body だけで十分すぎるし
そんなに分かりづらくなることも無いと思うけどな
必要になるのなんてせいぜい余白を1,2px調整するくらいだろ
740Name_Not_Found:2009/06/07(日) 23:21:29 ID:8hd196cb
フォトギャラリーのテンプレートに使用するため、
画像.jpgを貼りそれをクリックすると別ウィンドウにてオリジナルサイズで表示。
を書きました。

<a href="javascript:w=window.open('画像.jpg','',',scrollbars=no,Width=1024,Height=768');w.focus();"">画像.jpg</a>

head部分には書かずにbodyに直接書いたのですが、開いたサブウィンドウをクリックで閉じるようにするにはheadに書かないとだめでしょうか?
元の画像は横画像は640*480、縦画像は480*480です。
741Name_Not_Found:2009/06/07(日) 23:30:10 ID:???
まずは試してからだな。
742Name_Not_Found:2009/06/09(火) 00:31:28 ID:???
外部ファイルでクリック処理を施すのが一番
よってヘッダ
743Name_Not_Found:2009/06/09(火) 01:24:41 ID:???
<table border="3">
<tr>
<td>あいう</td>
</tr>
</table>
上をCSSで全く同じように表現する場合はどうすればいいでしょうかm(_ _)m
744Name_Not_Found:2009/06/09(火) 01:44:36 ID:???
>>743
テーブルのあの変な線を再現するのは面倒だぞ。
とりあえず同じような感じになるよう書くと、


・HTML
<div class="table">あいう</div>

・CSS
.table {
border: solid 3px #808080;
}
745Name_Not_Found:2009/06/09(火) 02:04:46 ID:???
ありがとうございますm(_ _)m一度上の記述をやったのですが
元の状態のテーブルの立体感のほうがよく感じてしまい;;
知人の会社のサイトを作ってるのですが細かな設定とか難しいですねorz
746Name_Not_Found:2009/06/09(火) 09:32:03 ID:???
>>745
これでどう?
<div class="out"><div class="in">あいう</div></div>

.out{
margin: 30px;
border-top: 3px #999 solid;
border-left: 3px #999 solid;
border-bottom: 3px #666 solid;
border-right: 3px #666 solid;
}

.in{
margin: 2px;
padding: 1px;
border-top: 1px #444 solid;
border-left: 1px #444 solid;
border-bottom: 1px #ccc solid;
border-right: 1px #ccc solid;
}
747Name_Not_Found:2009/06/09(火) 11:40:37 ID:???
cssのa:link等で単純なテキストリンクを作っています。
IE8でa:hoverの設定色より、訪問済みのa:visitedが優先されて困っています。
具体的には訪問済みになってしまうと、ロールオーバー(a:hoover色))が機能しません。
a:visitedをa:hoverと同一色にしてしまうと、常にa:visited色でa:link色にならず。orz
何か回避方法はあるのでしょうか?
748Name_Not_Found:2009/06/09(火) 13:37:31 ID:???
>>747
記述する順番を間違えてない?
a:visitedはa:hoverより前に記述しないと、意図した通りに表示されないよ。
749Name_Not_Found:2009/06/09(火) 16:19:16 ID:AyPntWLg
今週の金曜日に初級の検定試験を受けるのですが

なかなか
感覚が掴みにくく
覚えられないのですが何かよい方法はありませんか?


後、この試験は難しいですか?
750Name_Not_Found:2009/06/09(火) 18:13:35 ID:???
自分で作ったHPですがブラウザが更新されるたびにチェックしておかしい所あれば手直しですか?

ネットサーフィンしていると色んなHPありますが作りっぱなしでOKなんでしょうか?
ブラウザ更新されるとやっぱりおかしくなる事ありますよね?
751Name_Not_Found:2009/06/09(火) 19:52:14 ID:???
で、実は何を知りたいのですか?
752747:2009/06/09(火) 20:26:43 ID:???
>>748
確認してみましたが、やはり上手く行きませんでした。
ちなみにFirefox3で試したところ、希望通りに動作しました。
現在は書きの様な並び順です。
ロールオーバー時のみ、テキストを白くするのが希望の動作です。

a:link {
text-decoration: none;
color: #000000;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
753Name_Not_Found:2009/06/09(火) 20:52:43 ID:???
>>752
a
a:link
a:visited
a:hover
(a:focus)
a:active
リンクのデザインを指定する場合は、上記の順に記述しないと正しく表示され
ないよ。a:visitedを最後に記述しているのが、思い通りに表示されない原因だ
と思うんだが。
754Name_Not_Found:2009/06/09(火) 21:20:51 ID:???
cssで、ページの一番上に動的に(ページ移動しても消えたりしない)画像を表示したいのですが、どうすればいいのでしょうか?
operaのユーザーcssなので個人的に見れればおkなので、ローカルファイルとかを使っていても構いません、よろしくお願いします
755Name_Not_Found:2009/06/09(火) 21:39:25 ID:???
動的に、の言葉遣い変じゃね?
つ fixed
756Name_Not_Found:2009/06/09(火) 21:49:08 ID:CjMLxOym
>>755
ありがとうござます

すみません書き忘れました、固定の上に最前面に表示したいのです
757Name_Not_Found:2009/06/09(火) 21:53:07 ID:???
>>756
fixed
z-index
758Name_Not_Found:2009/06/09(火) 21:55:02 ID:???
スタックレベル忘れてたな。
759Name_Not_Found:2009/06/09(火) 21:58:38 ID:CjMLxOym
>>757
おぉ、なんか出来そうな気がします。ありがとうございます
760Name_Not_Found:2009/06/09(火) 22:29:39 ID:???
>>751
質問内容わかりづらくてすいません
HP作ってもIE7.8ではOKでも6だとダメとかあるじゃないですか
だから、ブラウザがどんどん新しく更新されていきますが、それに応じて
今まではOKだったけど新しく更新されたことで不具合が出たりとかあるのかなと思ったんです
761Name_Not_Found:2009/06/10(水) 02:47:13 ID:???
>>760
逆はそれほど気にしなくても大丈夫だと思うよ
762Name_Not_Found:2009/06/10(水) 03:14:03 ID:???
>>761
そうなんですか?独学で勉強したので不安でして・・・
ありがとうございました。
763747:2009/06/10(水) 14:33:36 ID:???
>>753
ありがとうございました!
思い通りの動作になりました。
764Name_Not_Found:2009/06/10(水) 16:17:40 ID:qyjQhHPB
質問です。

十数ページ同じレイアウトになっているページがあります。
2カラムレイアウトのページで、
左部分を固定幅表示のメニュー部
右部分を可変幅表示のメイン部分としています。
メニュー部の内容は全ページ同じ内容であるため、
ページが増える際や更新があった際は毎回コピペしています。

メニュー部にわりと頻繁に更新が入る為
その都度他ページにコピペするのが面倒です。
フレームを使用すればメニュー部のページだけ編集すれば良くなるので楽なのですが
フレームを使わずに保守性の上がる組み方がありましたら教えて戴きたいです。

長文で少々解りづらくなってしまったかもしれませんがよろしくお願いします。
765Name_Not_Found:2009/06/10(水) 16:28:57 ID:???
>>764
>>174>>652で答えが出てるけど、
phpを使うか、置換ツールを使う。
766764:2009/06/10(水) 17:17:25 ID:???
>765
既出だったんですね…すみません。
無料HPサービスのようなところでスペースを借りている為、phpは無理だと思います。
Javascriptだとその機能をオフにしているユーザは見れなくなってしまいますよね?
とりあえず置換ツールで対応したいと思います。
ありがとうございました。
767Name_Not_Found:2009/06/10(水) 19:29:59 ID:???
>>764見て気になったけど2カラム、テーブル使わないで左固定右可変にする時ってどうしてる?
<div style="positon:absolute; left:0; width:200px;">固定</div>
<div style="positon:absolute; left:0; width:100%;">
<div style="padding-left:200px;">可変</div>
</div>
試してないから上手くいくか分からないけど、こんな感じのしか思いつかね
768Name_Not_Found:2009/06/10(水) 20:24:22 ID:???
>>767
それ試したけど思いっきりカラム落ちしたw

自己流だとこんな感じ。
<div style="width:100%;">
<div style="width: 00px; position:absolute; top:0; left:0;">幅固定カラム</div>
<div style="position:absolute; top:0; left:200px;">幅可変カラム</div>
</div>
可変カラムは中身が少ないと幅が狭くなるという問題点があるw
ちなみに可変の方をwidth:100%;にしてしまうと、横スクロールが出る><
769764:2009/06/10(水) 20:35:29 ID:???
>767
自分はネガティブマージンを使用しています。

例えば左メニュー部(幅100px)のdiv id="sub"、メイン部(幅可変)のdiv id="main"
両方を含有するdiv id="contents"と定義するとして
CSSで以下のようにしています

contents{
width:100%;
float:right;
margin-left:-100px;
}

main{
margin-left:100px;
}

sub{
width:100px;
float:right;
}

一応今のところ、自分の思った通りに表示できています。
770Name_Not_Found:2009/06/10(水) 20:55:28 ID:aNxJFk/w
カーソルがdivやspanに重なったときに、背景色を変えることはできるでしょうか?
ただし、制約があり、<a>タグは使用でききません。
771Name_Not_Found:2009/06/10(水) 22:42:51 ID:???
テーブル使わない事にこだわる意味を見出せない
使ったほうが簡単に書けるなら使うで良いと思ってる
772Name_Not_Found:2009/06/10(水) 22:58:09 ID:???
簡単に書けることと簡単にメンテナンスできることはイコールではない
773Name_Not_Found:2009/06/11(木) 00:41:23 ID:???
CSS tidy などCSSサイズを小さくするツールはいくつかありますが
#t1{
  margin:30px;
  border:1px solid black;
  color:red;
}
#t2{
  margin:20px;
  border:1px solid black;
  color:red;
}
#t3{
  margin:10px;
  border:1px solid black;
  color:red;
}



#t1{margin:30px;}
#t2{margin:20px;}
#t3{margin:10px;}

.common{
  border:1px solid black;
  color:red;
}
のように共有部分をクラスにして小さく(最適化)するツールは
探しても見つかりませんでした。
(ツールがあるのならただの勘違いですが)
CSSの最適化はあまり必要とされてないのでしょうか。
それとも技術的に難しいのでしょうか。
774Name_Not_Found:2009/06/11(木) 00:44:12 ID:???
>>773
ツールに頼らずに自分でやればいいじゃない
つーか、人間がやるのが一番最適化できると思うよ
更に言うと、ツールに整理させると、後で編集するときに不便
775Name_Not_Found:2009/06/11(木) 14:52:55 ID:I4J1bxXY
htmlで指定せず、cssの方で画像を指定して表示することは出来ないんですかね?
776Name_Not_Found:2009/06/11(木) 14:54:19 ID:???
最初からこう書けばいいんでないの?

#t1{margin:30px;}
#t2{margin:20px;}
#t3{margin:10px;}

#t1,#t2,#t3{
  border:1px solid black;
  color:red;
}

あちこちで共通に使われているなら、>>773のように書けばいいし。

1バイトでも削りたいなら、空白タブ改行もけずるのことなるのかなあ?
でもその程度の置換ならテキストエディタでできるし。
半端な最適化されて、メンテナンス性が下がるのはごめんだし,
自分には最適化したい意味も状況も今一わからんの。
777Name_Not_Found:2009/06/11(木) 15:09:28 ID:???
>>775
ググったかい?
778Name_Not_Found:2009/06/11(木) 15:38:37 ID:???
>>775
出来るよ
779Name_Not_Found:2009/06/11(木) 15:46:27 ID:I4J1bxXY
>>777
ググったけど背景画像とかしか出てきませんでした

>>778
是非方法を教えてくだすいです<>
780Name_Not_Found:2009/06/11(木) 16:21:05 ID:???
backgroundで指定しちゃまずいの?
781Name_Not_Found:2009/06/11(木) 17:31:57 ID:I4J1bxXY
>>780
出来るだけ使わないようにしたいです
782Name_Not_Found:2009/06/11(木) 19:32:47 ID:G9fUWTHM
たぶん>>781は無知による勘違いだと思う
783Name_Not_Found:2009/06/11(木) 22:37:29 ID:???
>>774
>>776
ありがとうございます。

実はCSSを最適化させるツールというのを
卒業研究にしようと思っていて、既出の物か
どうか知りたかったので質問させていただきました。

おっしゃるとおり最適化するとサイズはかなり下がりますが
編集しづらくなるなど色々な問題が出るのでその辺も解消していくつもりです。
784Name_Not_Found:2009/06/11(木) 22:46:56 ID:???
既出かどうか知るのに2chで質問とか、
研究手法としてマズくないかい?
属人性が高すぎて殆ど参考にならないと思うんだが。
785Name_Not_Found:2009/06/11(木) 23:59:12 ID:???
>>775

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<title>テスト</title>
<style type="text/css">
<!--
p {
background:url(images/(xxx).jpg) no-repeat left top;
height:(xxx)px;
text-indent:-999px;
}
-->
</style>
</head>
<body>
<p>photo</p>
</body>
</html>

これじゃダメなの?
786Name_Not_Found:2009/06/12(金) 19:12:26 ID:55hETowM
>>785
ダメっていうか無理なんです
言ったけどhtmlを使わないで出来ませんかnえ
787Name_Not_Found:2009/06/12(金) 19:16:58 ID:???
>>786
htmlを全くいじらずに、cssだけの変更で画像を表示させたいってこと?
具体的に、どんなhtmlに、どんな画像を、どのくらいの位置に表示させたいのか書いてください。
その際、可能な限りソースも晒してくれ。
788Name_Not_Found:2009/06/12(金) 20:03:47 ID:???
CSSをマークアップ言語と勘違いしてる馬鹿がいる
789Name_Not_Found:2009/06/12(金) 20:06:53 ID:55hETowM
>>787
htmlは特定じゃないです。画像は↓のものをページの一番上、左寄せに固定して最前面に
http://www.dotup.org/uploda/www.dotup.org121682.png

そういえば前にもこんなこと書いた気が

>>788
じゃあ無理なんですね、本当にありがとうございました
790Name_Not_Found:2009/06/12(金) 21:55:05 ID:???
基本がまったくできてないやつが多すぎるな
HTMLやCSSとは何のか一度しっかり自分で調べることをお勧めする
書籍にしろネットにしろ初心者でもわかる〜とかもサルでもわかる〜とか詳しく解説してくれてる媒体はいくらでもある
めんどくさいし根気が要るけどいそがばまわれですよ
791Name_Not_Found:2009/06/12(金) 22:07:14 ID:???
ま、せっかくの回答も本人の理解する姿勢次第という例だったということで。
次いこ次。
792Name_Not_Found:2009/06/12(金) 23:35:59 ID:???
テーブルのデメリットについて
>>772の言っていることと、中身を全部読み込んでからでないと表示できないことのほかに何かある?
ページ全体のレイアウト設計に使われてると表示が遅いから
俺自身は表作る以外には使わないようにしてるんだが
793Name_Not_Found:2009/06/12(金) 23:48:31 ID:???
>表示が遅いから
いつの時代の人ですか
これが理由でテーブルが叩かれているわけではありませんですぞ
794Name_Not_Found:2009/06/12(金) 23:54:37 ID:???
でも遅いよね?
795Name_Not_Found:2009/06/13(土) 00:17:14 ID:???
>>792
俺も表作る以外ではあえて使う必要性が無くなってるな
796Name_Not_Found:2009/06/13(土) 00:21:37 ID:???
テーブルレイアウトだと馬鹿っぽく見えるのが動機としては大きいかなあ。特にメリットないのに馬鹿っぽい。これだけで動機は充分だろ?
ま、説得するときは10個くらい理由添えるけどね。
797Name_Not_Found:2009/06/13(土) 01:52:14 ID:???
今がその説得するときなんだから、10個言えよ
798Name_Not_Found:2009/06/13(土) 11:28:58 ID:???
私はスキルがないのでテーブルで作る方がかなりらくです。
CSSは初めたばかりで、やっと表に画像を入れて作れるようになりました。

疑問は、小さな表ではなく、ページ自体センター800ピクセルの幅で決めたとき、その800ピクセルは表のようにテーブル(CSS)で囲まないのですか?

スタイルシートで作ってみたのですが、ソースをコピーしてDWにそのままペーストすると
テーブルの中にテーブルが表示されているダサプーになっています。

で、何が言いたいかというと、みんな凄いなぁ〜
799Name_Not_Found:2009/06/13(土) 11:38:57 ID:???
CSSでデザインするときはたとえば、


<div id="main">
<div id="left">左側</div>
<div id="right">右側</div>
</div>

div#main {
width: 800px;
}
div#left {
float: left;
width: 200px;
}
div#right {
float: right;
}

見たいな感じで書くとテーブルより軽い。
800Name_Not_Found:2009/06/13(土) 16:46:05 ID:???
質問です。

<style type="text/css">
body{background-color:#ffffff;
background-image:url("画像.jpg");
background-position:right bottom;
background-repeat:no-repeat;}
</style>

と入れた時、IE7だと問題無かったのにIE8では画像が
明後日の方角へ移動してしまいます。
調べたらIE8がbackground-positionに対応してないらしいような事が
書かれておりましたが、対策がありましたら教えて頂けないでしょうか?

801Name_Not_Found:2009/06/13(土) 18:46:58 ID:???
明後日になれば元にもどってるかも
802Name_Not_Found:2009/06/13(土) 21:10:29 ID:???
>>800
background-position がどうとかじゃなく
IE8だとbodyの高さが0だからとかじゃなくて?

height:300px; とかいれればうまく表示されると思うよ。
803Name_Not_Found:2009/06/13(土) 22:14:43 ID:???
>>770
もう見てないかもしれないけど、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>aを使わずに背景色を変える方法</title>
<style type="text/css">
<!--
div {
padding:12px;
background-color:#ccc;
}
div:hover {
background-color:#c00;
cursor:pointer;
}
-->
</style>
</head>
<body>
<div onclick="#">カーソルをのせてね。</div>
</body>
</html>

これでどうかな。
804Name_Not_Found:2009/06/13(土) 23:44:23 ID:???
技術じゃなくてセンスの問題だと思うんですが質問させてください。

body の横幅を指定するかbody直下に<div>置いて
横幅指定するか悩んでるんですが、
やっぱりbodyはページ表示の大元だから横幅は
いじらないほうがいいんでしょうか。
805Name_Not_Found:2009/06/13(土) 23:49:15 ID:???
んなこたない。ガンガンいじるべし!
806Name_Not_Found:2009/06/14(日) 00:17:55 ID:???
>>804
俺はbodyにwidthを指定したことはないな。
必ず直下にdivがある。
bodyは背景に色か画像を必ず入れてるし。
807Name_Not_Found:2009/06/14(日) 00:32:03 ID:???
806だけど、
bodyに width:800px と指定して、なおかつ
background-color:#000;
を加えると、頭の中では800pxの中が黒になるのかと思ったら、
ウィンドウ内全部が黒になるんだね。初めて知った・・・。
808Name_Not_Found:2009/06/14(日) 00:52:01 ID:???
XHTMLだとbodyの下にブロック要素が必ず1つだけ要るからbodyにそんな物指定しないな
809Name_Not_Found:2009/06/14(日) 01:52:57 ID:???
>>808はdtdを読み直して来い
810Name_Not_Found:2009/06/14(日) 01:55:09 ID:???
知識足らんとだいたいdiv厨になるよな
811Name_Not_Found:2009/06/14(日) 02:02:37 ID:???
であなたみたいな人は得てしてソース厨となり
デザインgdgdのゴミサイト製造しちゃうワケですね
812Name_Not_Found:2009/06/14(日) 02:59:55 ID:???
ソースだと?目玉焼きは醤油に決まってる
ソース厨滅びろ
813Name_Not_Found:2009/06/14(日) 03:16:34 ID:???
目玉焼きには塩コショウだろjk・・・
814Name_Not_Found:2009/06/14(日) 03:42:25 ID:???
おいおい、ターンオーバーでプレーンな味を楽しむ俺の立場はどーなるんだ
ソース厨も塩胡厨も滅びてくれ
815Name_Not_Found:2009/06/14(日) 06:31:40 ID:???
気に入ったクラス名やID名が思い浮かばない
これもダメあれもダメそんなこんなで30分
くだらねーことでなやんでんじゃねー
おまえもう会社辞めろ
つかえねーんだよ
このタグは本来こういうとこに使うもんじゃない?
はぁ?
くだらねーことでなやんでんじゃねー
おまえもう会社辞めろ
つかえねーんだよ
ようはメンテナンスしやすけりゃ何でもいいんだよバカが
最低でも一日20枚くらいは上げてもらわないと困るんだよカス

と最近入ってきた使えない部下に対して愚痴ってみる
816Name_Not_Found:2009/06/14(日) 09:03:02 ID:???
えっなにこれ弱小企業?
817Name_Not_Found:2009/06/14(日) 10:00:52 ID:???
知性をいちんと身につけないと劣等感の対処が大変だよね
818Name_Not_Found:2009/06/14(日) 14:07:22 ID:???
>>803
亀だけどたしかIE6はa以外のhoverに対応してなかったような
819Name_Not_Found:2009/06/14(日) 14:13:45 ID:???
んだね
820Name_Not_Found:2009/06/15(月) 00:03:27 ID:???
URIの正規表現?について質問です

ブログを自作していてエントリー間にリンクを張っているのですが
<a href="?id=4">みたいにして省略形で実装しています。
すると Lint gateway では好ましく無いといわれたのですが
http://htmllint.itc.keio.ac.jp/htmllint/explain.html#illegal-format-url
これは http://〜と省略しないで書かないといけないということでしょうか
821Name_Not_Found:2009/06/15(月) 00:18:57 ID:???
../docment/index.htmlのような相対パスかhttp://〜のような絶対パスで記述しましょう
822Name_Not_Found:2009/06/15(月) 20:34:27 ID:NqFeZgd3
<META name="Robots" content="noindex,nofollow">
<META name="GOOGLEBOT" content="NOSNIPPET">

の検索避けタグってブログでも有効なんですか?
823Name_Not_Found:2009/06/15(月) 22:32:14 ID:???
そりゃあブログだろうがなんだろうが基本は同じだからね
824Name_Not_Found:2009/06/15(月) 23:08:03 ID:???
htmlのことでききたいのすが、現在はセレクトボックスのとある値をクリックして
別のセレクトボックスにクリックされた値に関するアイテムを表示させています。
このときに最初のセレクトボックスのフォーカスをクリックしたアイテムにしたいのですがどうすればできるのでしょうか?
825Name_Not_Found:2009/06/15(月) 23:20:18 ID:???
php or cgi
826Name_Not_Found:2009/06/15(月) 23:47:41 ID:???
>>821
ありがとうございます。

? で始めるといけなかったんですね。
/hoge/?id=3 などでは無事通りました。
827Name_Not_Found:2009/06/16(火) 17:37:39 ID:???
<div width=* height=*>で縦横のサイズを指定したdivの中央に画像を表示したいのですが、
画像配置位置が横方向のセンタリングはできるものの縦方法のセンタリングができません

何か良い知恵はないでしょうか
828Name_Not_Found:2009/06/16(火) 17:53:16 ID:???
>827
divの縦横サイズが指定されてるなら
画像に対してmargin-topを指定すればいいんじゃないのか
829Name_Not_Found:2009/06/16(火) 21:09:59 ID:???
>>827

div {
width:(xxx) px;
height:(yyy) px;
background-image:url( (image) .jpg);
background-repeat:no-repeat;
background-position:center center;
}

表示する画像 (image) .jpg の高さが (yyy) px 以下だったらセンタリングさせるよ。
830Name_Not_Found:2009/06/16(火) 22:06:26 ID:sv8If7dA
position:relativeとabsoluteなんですが
IE6だとちゃんと表示されるのですがFirefoxだとTOPはきくのですがLEFT
がききません
IEだとrelativeに指定したところからleftに50pxのところにいくのですが
FFだと0pxの位置のままです
バグでしょうか?
831Name_Not_Found:2009/06/16(火) 22:18:02 ID:???
そんなバグはないからどこか間違ってるんだろ
必要な部分のソースあげろ
832Name_Not_Found:2009/06/16(火) 22:23:52 ID:sv8If7dA
>>831
HTML部分です

<div id="thum">
<div class="mark1">
<img src="file/imgs1.jpg" class="nlef"
onmouseover="document.getElementById('nlef1').style.display = 'block'" />
<img src="file/imgs1.jpg" id="nlef1"
onclick="document.img1.src='file/img1.jpg'"
onmouseout="document.getElementById('nlef1').style.display = 'none'" />
</div>
<div class="mark1">
<img src="file/imgs2.jpg" class="nlef"
onmouseover="document.getElementById('nlef2').style.display = 'block'" />
<img src="file/imgs2.jpg" id="nlef2"
onclick="document.img1.src='file/img2.jpg'"
onmouseout="document.getElementById('nlef2').style.display = 'none'" />
</div>
</div>
833Name_Not_Found:2009/06/16(火) 22:24:55 ID:sv8If7dA
CSS部分です

#thum{
width: 280px;
float: left;
}

.mark1{
position: relative;
}

.nlef{
width: 70px;
height: 70px;
float: left;
}

#nlef1, #nlef2, #nlef3, #nlef4{
position: absolute;
top: -10px;
left: -85px;
z-index: 1;
display: none;
}
834Name_Not_Found:2009/06/16(火) 22:26:29 ID:???
>>829
できました
ありがとうございました
835Name_Not_Found:2009/06/16(火) 22:43:33 ID:???
>>822-823
特におかしなところは無いような気がする
そのままコピーして火狐で見たらちゃんと見れたし。バージョンが違うからかもしれないけど
clear忘れてるとかは関係ないのかな
ちょっと削っては確認して、ってのを繰り返して原因探した方がいいかもな
836Name_Not_Found:2009/06/16(火) 23:00:25 ID:sv8If7dA
>>835
ありがとうございます
IEはclass="mark1に対して-85pxの位置になるのですが
FFは0pxの絶対位置のまま動きません…TOPは-10pxの位置になるのですが
837Name_Not_Found:2009/06/16(火) 23:31:32 ID:???
>>836
<div class="mark1">
<img 省略 >
<br style="clear:left">
</div>
にしたらどうなる?

もしくはdisplayじゃなくてvisibilityにして試してみるとか

firefoxのバージョンは?
838Name_Not_Found:2009/06/16(火) 23:46:00 ID:???
そもそも <div class="mark1">(2個)はいらないよね。

<div id="thum">
<img src="file/imgs1.jpg" class="nlef" onmouseover="document.getElementById('nlef1').style.display = 'block'" />
<img src="file/imgs1.jpg" id="nlef1" onclick="document.img1.src='file/img1.jpg'" onmouseout="document.getElementById('nlef1').style.display = 'none'" />
<img src="file/imgs2.jpg" class="nlef" onmouseover="document.getElementById('nlef2').style.display = 'block'" />
<img src="file/imgs2.jpg" id="nlef2" onclick="document.img1.src='file/img2.jpg'" onmouseout="document.getElementById('nlef2').style.display = 'none'" />
</div>

として、

#thum に
position: relative; を追加してみたら?
839Name_Not_Found:2009/06/16(火) 23:51:15 ID:???
>>838
floatとposition(staric以外)は一緒に指定しちゃいけない
840Name_Not_Found:2009/06/16(火) 23:52:31 ID:sv8If7dA
>>837
http://labs.adobe.com/technologies/spry/demos/gallery/index.html
上記のようなことをしてみたくてサムネイルにロールオーバーしたら
少し大きい画像のid="nlef1"が出てくるようにしたのですが
FFだとどのサムネイルをマウスオーバーしても絶対左端にでてくるんです
FFは3.0.3です
上記は省略したのですが行が変わるimg4があって
そこでclear: both; で解除はしてるんです…
visibilityもだめでした



841Name_Not_Found:2009/06/16(火) 23:57:59 ID:sv8If7dA
>>838
すいません
#thumにposition: relative;を入れるとIEもFFと同じ状態で
positionがきかなくなります…
842Name_Not_Found:2009/06/17(水) 00:07:30 ID:???
>>841
提示したソースを見る限りどう考えてもおかしいところはないから
他の部分もあげてくれないとどうしようもない


もしかして
#nlef1, #nlef2, #nlef3, #nlef4{
position: absolute;
top: -10px;
z-index: 1;
display: none;
}
#nlef1 { left: -85px; }
#nlef2 { left: -155px; }
#nlef3 { left: -225px; }
#nlef4 { left: -295px; }
にすると解決したりしないか?
843Name_Not_Found:2009/06/17(水) 00:08:19 ID:???
修正
#nlef1 { left: -85px; }
#nlef2 { left: -15px; }
#nlef3 { left: 55px; }
#nlef4 { left: 125px; }
844Name_Not_Found:2009/06/17(水) 00:18:54 ID:2lN7Q78s
>>842-843
ありがとうございます
いま自分でも試行錯誤中なんですが
class="nlef"につけていたfloat:leftを削除すると
FFでもrelativeがきくようになりました
ただこの削除したfloatをどこにつけるか迷うところです
845Name_Not_Found:2009/06/17(水) 00:20:42 ID:???
やりたいことはよーくわかった。
↓こうゆう感じにしてみたら?


前提:ページ内に、以下のJavaScriptを追加。

function changeImg(num) {
document.getElementById("mainPhoto").src="file/img"+ num +".jpg";
way = num;
}


↓大きい画像をどっかに配置( id="mainPhoto" とする) ←写真の1枚目とか

<img src="file/img01.jpg" alt="photo" width="640" height="480" id="mainPhoto" />


↓サムネールでその画像を操作する

<a href="javascript:changeImg(01);"><img src="file/imgs1.jpg" alt="サムネール1" width="70" height="70" /></a>
<a href="javascript:changeImg(02);"><img src="file/imgs2.jpg" alt="サムネール2" width="70" height="70" /></a>
<a href="javascript:changeImg(03);"><img src="file/imgs3.jpg" alt="サムネール3" width="70" height="70" /></a>
 ・
 ・
 ・
846Name_Not_Found:2009/06/17(水) 00:29:26 ID:???
>>844
.mark1{
position: relative;
text-align: left
}
.nlef{
}

cssはこれで、htmlの方を、
imgタグでwidth,height指定、
オンマウスでdisplay: inline;にすればどうだろう




もしくは、さっきも書いたけど
<div class="mark1">
<img 省略 >
<br style="clear:left">
</div>
このbrのclearはimgのfloatの解除だから必要
意味がうまく伝わってなかったかな
847Name_Not_Found:2009/06/17(水) 00:45:55 ID:2lN7Q78s
ありがとうございます
>>845で試してみます
846だとやっぱりサムネイル画像が横に並ばずに縦になってしまいました
848Name_Not_Found:2009/06/17(水) 00:48:11 ID:???
サムネイルが縦に並ぶのは<div class="mark1">が縦に並んでるからじゃね?
849Name_Not_Found:2009/06/17(水) 00:51:23 ID:???
845だけど、ちょい変更。Javascript は以下で。

function changeImg(num) {
document.getElementById("mainPhoto").src="file/img"+num+".jpg";
}

htmlを、
<div id="PhotoBox">
<img src="file/img1.jpg" alt="photo" width="640" height="480" id="mainPhoto" />
<div id="thum">
<img src="file/imgs1.jpg" onmouseover="javascript:changeImg(1);" alt="サムネール1" width="70" height="70" /></a>
<img src="file/imgs2.jpg" onmouseover="javascript:changeImg(2);" alt="サムネール2" width="70" height="70" /></a>
<img src="file/imgs3.jpg" onmouseover="javascript:changeImg(3);" alt="サムネール3" width="70" height="70" /></a>
</div>
</div>  な感じにして、CSSを以下に。

#PhotoBox {
position: relative;
}
#thum {
position: absolute;
left:700px;
top:0;
}

file というフォルダに、サムネール(imgs1.jpg、imgs2.jpg・・・)と
拡大画像(img1.jpg、img2.jpg・・・)を入れてください。
850Name_Not_Found:2009/06/17(水) 00:55:20 ID:???
P.S. 数値やcssは適当に変えてね。
851Name_Not_Found:2009/06/17(水) 12:32:50 ID:???
600pxの幅のdivの中に下記CSSのようにきっかり300pxずつ左右に子divをfloatさせようとすると勝手に改行?というか上下にずれてしまいます。
#left{ float:left; width:300px;}
#right{ float:right; width:300px;}

280pxとかにすると左右におさまるのですが、これはいったいなぜ起きるのでしょうか。
回避方法はないのでしょうか。
852Name_Not_Found:2009/06/17(水) 12:35:57 ID:???
>>851
600pxのdivの方でboder出してたりしてない?
853851:2009/06/17(水) 12:44:22 ID:???
>>852
borderは明示的に何も指定してない状態です
854Name_Not_Found:2009/06/17(水) 13:07:26 ID:???
600でpaddingを指定してるとか
300でmarginを指定してるとか
855Name_Not_Found:2009/06/17(水) 14:13:31 ID:WvtXFuXO
>>849-850
ありがとうございました
FFでちゃんと表示されるようになったのですが
今度はIEでz-indexの問題が生じてしまい上手く表示できなくなりました
どうやらFFかIEのどちらかは捨てないとだめみたいです
IEだとposition:relativeにz-indexがきかない
FFだとfloatさせるとposition:relativeがきかない
もうお手上げですw
856Name_Not_Found:2009/06/17(水) 14:17:09 ID:WDePDCqU
自鯖でアップローダーを設置しようとしています。
かなり初心者です。昨日apacheをインストールしてググりながらずっとやってます。

http://niconama.ddo.jp/
トップページです。1行掲示板とアップローダーを読み込ませたいのですが、
index.htmにPHPを埋め込む?方法が分かりません。
インラインフレームを使ってみたのですが、アップローダーのURLがおかしくなったり、
CSS?を読み込んでないせいかレイアウトがおかしいです。

http://niconama.ddo.jp/uploda/
アップローダーだけ読み込むとこんな感じです。
http://niconama.ddo.jp/mboard/
こちらが掲示板です。
http://niconama.ddo.jp/counter2.php
このカウンターも埋め込みたいのですが、うまくいきません。

詳しい方おりましたらご教授お願いします。
857Name_Not_Found:2009/06/17(水) 14:19:13 ID:WvtXFuXO
855ですがこのHPが分かりやすい例です
http://labs.adobe.com/technologies/spry/demos/gallery/index.html
これをIEで見るとサムネイルにふれると大きくなるのですが
大きくなったサムネイルは下かもしくは右の画像の下に対してはもぐりこみます
FFで見ると大きくなったサムネイルは一番上に必ず表示され
右や下の画像にもぐりこみません
もう泣きそうです
858Name_Not_Found:2009/06/17(水) 14:46:31 ID:???
>>856
htmlにphpを埋め込むなら.htaccessに書けばいいけど、
羽があるのに歩いて交差点渡るようなことしてる気がする
859Name_Not_Found:2009/06/17(水) 14:49:49 ID:???
>>856
あとたぶん鯖の内部文字コードと出力文字コードの関係が変
860Name_Not_Found:2009/06/17(水) 15:45:57 ID:???
>>857

html 部分

<div id="Box">
<ul>
<li id="button01"><a href="#">写真1</a></li>
<li id="button02"><a href="#">写真2</a></li>
<li id="button03"><a href="#">写真3</a></li>
<li id="button04"><a href="#">写真4</a></li>
<li id="button05"><a href="#">写真5</a></li>
<li id="button06"><a href="#">写真6</a></li>
</ul>
</div>
861Name_Not_Found:2009/06/17(水) 15:46:57 ID:???
css

body {
text-align:left;
}
div#Box {
position:absolute;
left:200px;
top:100px;
}
div#Box ul {
list-style-type:none;
padding:0;
margin:0;
}
div#Box ul li {
display:block;
background-color:#ccc;
position:absolute;
}
div#Box ul li#button01 {
left:0;
top:0;
}
div#Box ul li#button02 {
left:80px;
top:0;
}
div#Box ul li#button03 {
left:160px;
top:0;
}
862Name_Not_Found:2009/06/17(水) 15:48:27 ID:???
css 続き

div#Box ul li#button04 {
left:0;
top:80px;
}
div#Box ul li#button05 {
left:80px;
top:80px;
}
div#Box ul li#button06 {
left:160px;
top:80px;
}
div#Box ul li a {
display:block;
width:70px;
height:70px;
}
div#Box ul li a:hover {
width:110px;
height:110px;
background-color:#c00;
position:absolute;
left:-20px;
top:-20px;
z-index:2;
}
863Name_Not_Found:2009/06/17(水) 15:52:39 ID:???
>>860〜862
IEでz-indexがダメだった。
気にしないでください。スンマセン。
864Name_Not_Found:2009/06/17(水) 16:25:04 ID:WDePDCqU
>>858
遠回り?という事でしょうか。
>>859
内部文字コードと出力文字コードですか、ググってみたのですが、
プログラミング等やった事がないので難しいですね…
詳しく教えて頂けるとありがたいです。

トップページのレイアウトが直って、正常にアップロードできるようになれば満足です。
865Name_Not_Found:2009/06/17(水) 17:03:56 ID:???
>>864

トップページのファイル名拡張子を.htmlから.phpに単純に変えてURL直指定でアクセスしてみ
たぶんそのまんま動く


で、その後
http://www.shtml.jp/htaccess/directoryindex.html
読んでその.phpがトップページになるようにする
866Name_Not_Found:2009/06/17(水) 17:09:28 ID:???
あとスタイルシートが適用されないのはトップページに
<link href="http://niconama.ddo.jp/uploda/style.css" rel="stylesheet" type="text/css">
がないからな
このまんま入れても動くが相対パスに直してヘッダの中にいれとけ
867Name_Not_Found:2009/06/17(水) 17:40:46 ID:???
現在、就職用の作品を作っているのですが、

http://fautest.weblike.jp/true.html
本来この様に表示させたいのですが、

<ul>の中に更に<ul>を入れると、IEでのみ
http://fautest.weblike.jp/false.html
の様に(潰れて?)しまいます。

CSSにて ul,li に高さを入れてみたり試行錯誤したのですが、うまくいきませんでした。
分かる方、よろしくお願いします。




868Name_Not_Found:2009/06/17(水) 17:42:25 ID:WDePDCqU
>>865
>>866
ありがとうございます。
トップのindex.htmの拡張子をindex.phpに変えました。
hppdf.confの設定は
DirectoryIndex index.htm index.html index.php mboard.php
index.phpの順番が3番目ですが、ドキュメントルートの一番上にindex.phpしか置いてないので、
index.phpが表示されるようになってます。

トップページに表示されるPHPはインラインフレームで表示されるようになってるのですが、
その設定で大丈夫なんでしょうか。
アップローダーですが、本体に直接アクセスすると、画像のURLが、
http://niconama.ddo.jp/uploda/src/nico○.jpg等正常に表示されるのですが、
トップページに埋め込まれたものからアクセスすると、
http://niconama.ddo.jp/uploda/index.php/./src/nico○.jpg
というアドレスになって表示されません。

スタイルシートは
<link href="./uploda/style.css" rel="stylesheet" type="text/css">に直して
トップページに付け加えましたが、元々スタイルシートが入っていないはずの掲示板のほうに適用されて、
アップローダーのレイアウトは変わりませんでした。
うーん、どこが間違ってるんでしょうか…

何か分かれば宜しくお願いします。
869Name_Not_Found:2009/06/17(水) 17:50:54 ID:???
>867
見れない
870Name_Not_Found:2009/06/17(水) 17:55:09 ID:WvtXFuXO
>>863
ありがとうございます
昨日から吐きそうなほど考えた結果
IEでのみ上手くいくときとFFでのみ上手くいくときがあるので
あまりよい解決策じゃないですが
「* html 」と「html>body」でCSS適用を分けました
いつか時がたてばクロスブラウザ問題が解決すること神社にお祈り
してきました
871Name_Not_Found:2009/06/17(水) 18:02:14 ID:WDePDCqU
868です。
http://niconama.ddo.jp/

index.php(トップページではなくアップローダー)のスタイルシートを
<link href="http://niconama.ddo.jp/uploda/style.css" rel="stylesheet" type="text/css">
に変更したら、トップページのレイアウトが直りました。相対パスだと何故か反映されません。

あとはアップローダーのURLが直ればいいのですが・・
872Name_Not_Found:2009/06/17(水) 18:08:49 ID:???
>>867
まず、<ul></ul>の中に、直接<ul></ul>を入れてはいけないので、
リストを入れ子にする場合は<li></li>の中に<ul></ul>を入れること。

というわけで、こういう状態にしてみた。
んで、common.cssの#bt_01に指定されてるheightを消したら、希望通りの表示になるよ。
<li id="bt_01">大学総合案内
<ul style="margin-top: 20px;">
<li id="bt_02" class="bt"><a href="index.html#dummy">扶桑芸術大学について</a></li>
<li id="bt_03" class="bt"><a href="index.html#dummy">大学院・学部案内</a></li>
<li id="bt_04" class="bt"><a href="index.html#dummy">研究活動・社会貢献</a></li>
<li id="bt_05" class="bt"><a href="index.html#dummy">他大学との交流</a></li>
</ul>
</li>
873867:2009/06/17(水) 18:19:23 ID:???
>>869
申し訳ないです。見れたり見れなかったりするみたいで・・・。

>>872
詳しい解説ありがとうございます。
おかげ様で正しく表示させる事ができました。
874Name_Not_Found:2009/06/17(水) 18:34:20 ID:???
>>871
トップページのソースに
>index.php/
ってやってるとこがあるけど、これ最後の/とってみたら?
875Name_Not_Found:2009/06/17(水) 18:47:50 ID:WDePDCqU
>>874
おおおおおおおおおおおおおおお!!
直りました、ありがとうございます!!

スラッシュ1つでこうも設定が変わるとは・・
本当にありがとうございます。
最後に1つだけ質問したいのですが、

アクセスカウンターのテスト「<script type="text/javascript" src="counter2.php"></script>」
現在<script type="text/javascript" src="ipcount.php"></script>人くらいが見ています。(3分以内のアクセス人数)

ipcount.php(3分以内のアクセス人数)は表示されるのですが、counter2.php(多重アクセス防止のカウンタ)
が表示されません。
http://niconama.ddo.jp/uploda/src/nico52.txt[
カウンターの中身はこれです。

度々申し訳ないのですが、宜しくお願いします。
876Name_Not_Found:2009/06/17(水) 19:03:29 ID:???
>>875
カウンターそのものは機能してるから表示できないだけか
時間ないから直感で判断したけど、

そのカウンタの中身の最下部の

<html>
から
</html>
まで全部削除

かわりにトップページのどこか(まあ<body>の前としておく)に
<?php include_once "counter2.php";?>を挿入して、

<div align="center">アクセスカウンターのテスト「<script type="text/javascript" src="counter2.php"></script>」</div>を
<div align="center">アクセスカウンターのテスト「<?php echo $count; ?>」</div>にすればいくかも

ただやっぱ文字コードがめっちゃめちゃな気配がある
877Name_Not_Found:2009/06/17(水) 19:35:06 ID:???
>>876
ありがとうございます。カウンターを表示することができました。
文字コードについては後々調べたいと思います。
とにかく丸二日やって(3時間しか寝てない)ようやくアップローダーが設置できて満足です。
協力して下さった方、ありがとうございました。
878Name_Not_Found:2009/06/17(水) 19:46:15 ID:???
Tgifで作成したPDFファイルをページにリンクしたのですが真っ白のままで映りません。
記述は
<a herf="graph01.pdf">PDFを開く</a>
879Name_Not_Found:2009/06/17(水) 19:50:42 ID:???
>>878
追加です
<form>でちゃんと挟んであります。
一応関連付けなど試しましたがうまくいきません。
ファイルも壊れていません。
どこに不備があるのかお願いします。
880Name_Not_Found:2009/06/17(水) 20:03:10 ID:???
>>878
何度もすいません。
herf×
href〇
ですね
881Name_Not_Found:2009/06/17(水) 21:46:33 ID:???
質問です。
IEのバグらしいのですが、予期せぬ空白と言うか改行というか、意図せぬ空きがでて困っています。
調べてみると、ソース内のタブスペースや改行を詰めていくと、回避できるとの書き込みを見つけ、それで対応するしかないのかなと思いますが、他にスマートなやり方ってご存知ありませんか?
ちなみに、divで表組した直後、
<br claer="all" />
と、書いた所に3行分くらい改行される現象です。
882Name_Not_Found:2009/06/17(水) 21:54:10 ID:???
どんなタグをどういう風に使ったのが分からないと答えようがない

ただ、レイアウト組むときにfloatとpositionを併用しとけばバグは回避できる
空白ができる原因になってるボックスを探してpositionに変えてみれば?
まあ最悪ハック使えばどうとでもなるけど
883Name_Not_Found:2009/06/17(水) 22:02:19 ID:???
881です。
ありがとうございます。早速試して見ます。
884Name_Not_Found:2009/06/18(木) 00:08:58 ID:iXukSUCN
javascriptスレに書くかこちらに書くか迷ったのですがこちらに書かせて頂きます。

テキスト入力フィールドのAとBが上下に並んでおり
テキスト入力フィールドAに今回オートコンプリート機能をjavascriptで実装しました。
動作確認をしたところ、マウスクリックで入力候補の選択をした場合は問題ないのですが
入力候補表示中にキーボードの↓キーで選択した場合、テキスト入力フィールドAとBが
動くという問題が発生しました。

恐らくオートコンプリートで表示された入力候補が無理やりAとBの間に表示されたため
発生した問題と思います。
z-indexの指定で表示を重ねることによりなんとかなると思いましたがうまくいきません。

テキスト入力フィールドはA、Bともにposition:absolute指定z-indexは11、12みたいにしてます。
Aの下に表示される入力候補にどうz-indexを指定してやればいいのでしょうか?
それとも考え方が根本的に間違っているのでしょうか?
ご指摘お願いします。

以上、長文失礼しました。
885Name_Not_Found:2009/06/18(木) 10:48:04 ID:???
Googleサジェストみたいな入力欄に文字入れると
予測候補を下にリストアップしてくれる機能があって、
Aにそれが発生するとAの下にあるBに領域が被さるんだけど
それがAだと認識されてBを下に押し出しちゃうってことかな。

もしposition 使ってないなら オートコンプリート(サジェスト)
表示に position:relative; 入れればうまくいくと思う。
z-index 使いたい場合は オートコンプリート表示にだけ
!important すればいいんじゃない?
886Name_Not_Found:2009/06/18(木) 10:50:09 ID:???
すまんA,B両方にしてるのなw

しかし position:absolute で他の要素に干渉されるのは
なんかおかしいのでもしまだ解決しなかったら
A,B部分のソースコードとCSS貼ってくれませんか?
887Name_Not_Found:2009/06/18(木) 17:14:20 ID:???
>>884
ちゃんとした文法に従ってればそんなバグは起こらないはずだから
・z-indexはpositionでrelative,absolute,fixedのいずれかを一緒に指定してやらないといけない
・absoluteで固定配置する場合には親要素がposition: staric;以外である必要がある
これのどっちかに反してないか確認してみてほしい

<form style="position: relative;">
<input style="display: block; position: absolute; z-index: 1;">
<input style="display: block; position: absolute; z-index: 2;">
<div style="position: absolute; z-index: 3;">オートコンプリート</div>
</form>

positionとz-indexの指定はこれで間違いないはず
どうしても上手くいかないようだったら
AjaxTagsにオートコンプリートが合ったような気がするから参考にしてみたらどうかな
888Name_Not_Found:2009/06/19(金) 13:57:05 ID:pWzLsk9A
超初心者なんですがWeb作成で困ってます。

まずページを左右半分に2分割して、左側を上下に2分割し、さらに分割した左上に文字を表示させて、その文字をクリックすると右半分にクリックしたホームページを表示させなきゃいけないんですが
<a href>と<frame src>をどう組み合わせればできるかわかりません。
それとも全く違うタグを打たなきゃいけないんですか?どういうタグを打てばいいかわかりません。助けてください。
わかりずらくてすいません。
889Name_Not_Found:2009/06/19(金) 14:25:13 ID:???
>>888
よくわからんけど、でざいんとしてはこんなかんじ?

┌─┬─────┐
│A..│       .│
├─┤.   D   │
│B..┤.       │
├─┤─────┤
│C..│.       │
│. .│.   E   │
│. .│.       │
└─┴─────┘
890Name_Not_Found:2009/06/19(金) 14:39:18 ID:pWzLsk9A
はい!そんな感じです!でそのAをクリックするとDやEにホームページが表示されるようにしたいんです。
891Name_Not_Found:2009/06/19(金) 15:50:40 ID:???
>>890
BやCはどうしたいの?
892Name_Not_Found:2009/06/19(金) 17:13:35 ID:???
AをクリックでDE両方に表示させるのか?
もうちょっと整理して詳しく書かないと教えられないぞ
893Name_Not_Found:2009/06/19(金) 17:25:56 ID:pWzLsk9A
すいません解決しました。わざわざすいませんでした。ありがとうございました。
894Name_Not_Found:2009/06/19(金) 17:26:18 ID:???
えっ
895Name_Not_Found:2009/06/19(金) 17:37:08 ID:???
なにそれひどい
896Name_Not_Found:2009/06/19(金) 19:08:16 ID:???
1日でできるようなことなら先に試しとけよ
897Name_Not_Found:2009/06/19(金) 20:47:31 ID:???
人を利用することしか頭にない奴の典型例だな
898Name_Not_Found:2009/06/19(金) 23:31:13 ID:???
ひさびさに好意を踏みにじるひどいの来たなw
899Name_Not_Found:2009/06/20(土) 08:35:30 ID:???
まあ出来たのならそれでいいじゃないか
900Name_Not_Found:2009/06/21(日) 00:28:06 ID:???
そうだそうだ
901Name_Not_Found:2009/06/21(日) 06:44:28 ID:???
質問した以上、どう解決したか書けよ
902Name_Not_Found:2009/06/21(日) 07:27:36 ID:???
何日も引っ張ることじゃないだろwww
903Name_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と同じ位置に表示したいのですが
何か良い方法があればご教授をお願いします
904Name_Not_Found:2009/06/21(日) 12:00:50 ID:???
>>903
MasterとOutFrameの、marginやpaddingはどうなってる?
ズレの原因はこれらの可能性が高そうだ。
905Name_Not_Found:2009/06/21(日) 12:44:28 ID:???
親要素のmasterと子要素のoutframeを同じ幅でセンタリングっておかしくね?
右にずれるのはmasterのボーダーのせいじゃないかな

ちなみに<li>は<ul>の子要素として使わないといけない
906Name_Not_Found:2009/06/21(日) 13:16:37 ID:TmxSxVQO
早速のアドバイスありがとうございます。liのところはulでした。申し訳ありません。
Master,OutFrameマージン、パディングはどちらも同じで、左右共にautoに設定してあります。
Masterのボーダー設定を消してみたのですが、やはりMasterの位置と同じになりません。
このようなことがしたい理由なのですが、ボックスの縦幅をウィンドウの縦幅と同じにして
position:fixedにすることでメインコンテンツの内容に関係なくホームページの
幅を表す縦線を表現したかったからです。
907Name_Not_Found:2009/06/21(日) 13:25:11 ID:???
どんなブラウザでもそうなる?
908Name_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を指定するとブラウザ毎の解釈が違うから注意
909Name_Not_Found:2009/06/21(日) 13:51:19 ID:TmxSxVQO
今のところIE8,firefox,GoogleChromeで見た目の確認をしているのですが、やはり同じく右にずれてしまいます
なるほど!背景画像を使う方法は想い浮かびもしませんでした・・・。
ただ、OutFrameに画像を設定してもセンタリングがずれてるからうまくいかなさそうですね・・・。
かといってMasterの外、body要素の子要素としてfixed配置にするとなぜかセンタリングされないので・・・
910Name_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も使わなくていい

どうしても右にずれるのをどうにかしたいのなら
ソースを上げてくれないと何も言えないな
911Name_Not_Found:2009/06/21(日) 14:19:36 ID:TmxSxVQO
長い間お付き合いさせてしまって本当に申し訳ありません。
HTMLブロック系要素の親子関係を直してみたらIE8とFireFoxでは意図したとおりに表示されるようになりました
<div class="Master">
<div class="OutFrame">
ヘッダー、メニューバー、コンテンツ等
</div>
</div>
GoogleChromやSleipnirで表示確認を行うとヘッダーとメニューバーが何故か右寄せになってしまいます・・・。
それに、なぜ以前のバージョンだとだめなのかが根本的に分からないので後味悪いです。
ソースは、どうやって載せれば良いのか分からないので調べてみます
912Name_Not_Found:2009/06/21(日) 14:31:57 ID:???
>>911
ソースは、今書き込んでるhtmlの内容をもう少し詳しくしたものと、
cssの内容丸ごとを載せればいいんだよ
913Name_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;
}
914Name_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を用意したのですが・・・
915Name_Not_Found:2009/06/21(日) 15:30:49 ID:???
width:40pc;

こういう表記できたっけ
916Name_Not_Found:2009/06/21(日) 15:31:30 ID:???
表記ってか単位
917Name_Not_Found:2009/06/21(日) 15:47:25 ID:TmxSxVQO
メニューバーに使ってるフォントサイズが12ptで、確か1pc=12ptだったような気がするので
メニューバーの文字数で入力しているのですが、だめでしょうか?
918Name_Not_Found:2009/06/21(日) 16:09:36 ID:???
文字サイズで決めるならem使いなよ
要素の1文字の幅 = 1em
919Name_Not_Found:2009/06/21(日) 16:21:45 ID:TmxSxVQO
それでやってみます。アドバイスありがとうございます
920Name_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;のせいのような気がしないでもない
921Name_Not_Found:2009/06/21(日) 17:29:28 ID:TmxSxVQO
アドバイスありがとうございます。早速一括指定で書いてみました。まだ始めたばかりで慣れないですが
少しずつ慣れて行きたいと思います。width:inherit;は前は親要素と同じ幅の数値を設定していました。
今回親子関係を変えてみてなんとか意図した表示にはなりましたが、改善前のバージョンも
改善後のバージョンも見た目上は同じ設定だから同じに見えるはずと言うのが違っていて
CSSに対する理解がまだまだだと言う事を痛感しました。
922Name_Not_Found:2009/06/21(日) 18:07:54 ID:???
>>920の最後の一行はwidthとborderを一緒に指定するとバグるっていう意味な
923Name_Not_Found:2009/06/21(日) 19:49:33 ID:???
フォントサイズは%で書くのがいいね
ブラウザで任意に変えられるからね
924Name_Not_Found:2009/06/21(日) 19:57:44 ID:???
ie以外ではpx指定でもブラウザ側で変えられるし
ie使ってるような人はそもそも文字サイズ変えたりしないから
実はあんまり気にしなくたっていいんだよな
%でもデザイン崩れないんならそっちのがいいだろうけど
925Name_Not_Found:2009/06/21(日) 20:06:51 ID:???
いつの時代のieなんだ?
926Name_Not_Found:2009/06/21(日) 20:35:31 ID:???
ie6はまだまだ現役なんだぜ
927Name_Not_Found:2009/06/21(日) 20:41:25 ID:???
IE5.5にまで対応させてる私が通りますよ
928Name_Not_Found:2009/06/21(日) 21:34:01 ID:i9Bn2SXu
シンプル イズ ベスト
単純に書けば全てのブラウザで通用する

初心者は単純な書き方しかできない
複雑な書式で書けるようになったら二流に昇格
複雑なことを単純化できるのが一流
どこまで単純化できるかが一流と二流の違いな
929Name_Not_Found:2009/06/21(日) 21:38:43 ID:???
言わんとすることは分かるが、IE5.5や6の対応状況考えると、机上の空論というか。
しょっぱいデザイン(?)で済む人はすむかもだけど。
930Name_Not_Found:2009/06/21(日) 21:54:13 ID:???
IE5.5や6でもそこまでハックなんか多用しなくても
メンテしやすいシンプルな作り方でいいデザインはいくらでもできる
931Name_Not_Found:2009/06/21(日) 22:01:01 ID:qgxJYrw/
というかなぜ今時IE5.5?
932Name_Not_Found:2009/06/21(日) 22:02:51 ID:???
アクセシビリティだろ
933Name_Not_Found:2009/06/21(日) 22:03:03 ID:???
本当に必要なことだけすればいいのに
無駄なことする仕事できない人が多いんです。
934Name_Not_Found:2009/06/21(日) 22:04:48 ID:???
無駄なこと = ie対応
935Name_Not_Found:2009/06/21(日) 22:06:46 ID:???
もうRSSだけでいいよなw
936Name_Not_Found:2009/06/21(日) 22:12:23 ID:???
そのRSSを検索するのはGoogleなんですね
937Name_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 などと言う人は このスレを見るな!!

質問側も節度あるレスで!
939Name_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

タイトルが長すぎたから少し短くしました
941Name_Not_Found:2009/06/22(月) 01:35:41 ID:???
次スレ立てんの早くねww
942Name_Not_Found:2009/06/22(月) 02:07:47 ID:???
>>939
有難う御座います。
当方Opera使いなので気がつきませんでしたが、
他のブラウザだときちんと表示されていました。
初歩的なことで、お恥ずかしい限りです。
943神様見習い:2009/06/22(月) 02:10:39 ID:84ecL0Vn
>>940
ありがとうございます。。。

2とってこよ。。。
944Name_Not_Found:2009/06/24(水) 03:42:10 ID:???

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

<先生の回答>
事実がこのメールの通りだとすれば、あなたのおっしゃるように、弟さんは統合失調症の可能性があると思います。
しかし、どうもこのメールの内容は解せないところがあります。
弟さんが統合失調症で、あなたに対して何らかの妄想を持っていると仮定しますと、
ここに書かれているように、あなたの行動を監視し、いちいちそれに合わせて
嫌がらせをするという手の込んだ形は、ちょっと考えにくい行動です。
そして、「○○が自分の行動を監視し、いちいちそれに合わせて嫌がらせをする」というのは、
統合失調症の方の典型的な被害妄想の訴えでもあります。
まさかとは思いますが、この「弟」とは、あなたの想像上の存在にすぎないのではないでしょうか。
もしそうだとすれば、あなた自身が統合失調症であることにほぼ間違いないと思います。
あるいは、「弟」は実在して、しかしここに書かれているような異常な行動は全く取っておらず、
すべてはあなたの妄想という可能性も読み取れます。
この場合も、あなた自身が統合失調症であることにほぼ間違いないということになります。
945Name_Not_Found:2009/06/28(日) 01:44:52 ID:???
タイトルロゴを常に画面上部に表示させたくて
h1 { position:fixed; height; 100px; }
というCSSを書いたまではよかったのですが、
http://localhost/index.html#anchor
のように「#anchor」つきでアクセスすると、文章の上部がタイトルロゴの下に隠れてしまいます。
そりゃそうだと言われそうですが、なにか解決策はありますでしょうか。
つまりposition:fixedで画面上部に画像かなにかが表示されていても、
「#anchor」つきのアクセスでテキストの上部が隠れないようにする方法があれば教えてください。

946Name_Not_Found:2009/06/29(月) 00:04:29 ID:k23VXs+3
947Name_Not_Found:2009/06/29(月) 08:54:53 ID:???
948Name_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
949Name_Not_Found:2009/06/29(月) 14:35:45 ID:???
>>945
新参乙です(悪いとは言ってない)
さんざんガイシュツ。
ま、ここの人は優しいから俺以外のシッタカが教えてくれます。
950Name_Not_Found:2009/06/29(月) 18:31:11 ID:???
店プレより

類似質問大いに結構。
分からない人は何回聞いても結構。
951Name_Not_Found:2009/06/29(月) 19:45:15 ID:???
新スレで聞き直したら?
こっちは埋めてしまえ
952ちり紙:2009/06/30(火) 12:12:15 ID:???
>>944のコピペこわい
953Name_Not_Found:2009/06/30(火) 20:35:59 ID:???
>>945
z-index


そもそも次スレ立てんの早すぎだろ
954Name_Not_Found:2009/07/01(水) 12:29:21 ID:JooizKUC
こっち埋めてから次仕えよ
955Name_Not_Found:2009/07/01(水) 17:38:12 ID:???
1枚の画像(hoge.gif)を用意して、
マウスのフォーカスが画像を通過した時だけ
画像の色を反転させるにはどうすればよいでしょうか?

ググッたところCSSで

filter: invert();

というCSSを使うであろう事は想像出来るのですが
肝心の画像の上をマウスが通過した場合にのみ色を逆転させる方法が分りません。
956Name_Not_Found:2009/07/01(水) 18:08:45 ID:???
通過というかマウスがあたってる時のみ行うならhover擬似クラス
ただし
aタグ以外のhover擬似クラスはIE6以前は対応してない
fiterプロパティはIE以外のブラウザは正式対応してない
957Name_Not_Found:2009/07/01(水) 18:11:09 ID:???
>>955
hover使えばよろし。
しかしながらfilterはブラウザ独自のはずだからあんまりオススメしない。
どちらかというと、通常の画像と色相反転した画像をひっつけて1枚の画像にして
hoverとpositionを使って位置をずらすようにする方法を、最近よく見かける。
958Name_Not_Found:2009/07/01(水) 20:20:18 ID:HcMmVmvA
少し前、皆さんにお世話になった者です。あの時はありがとうございました。
またしても質問で申し訳ないのですが、IE8だとクリックできるリンクがFirefox,
GoogleChromeでクリック出来ません。hover擬似クラスも動作してないみたいです。
色々ググってはみたのですが、IE6のPNG画像とか、今回のケースとは関係なさそう
な情報ばかりで困っています。皆さん何か心当たりは無いでしょうか?
959Name_Not_Found:2009/07/01(水) 20:28:43 ID:???
コードを書け
960Name_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>
こんな感じです
961Name_Not_Found:2009/07/01(水) 21:12:29 ID:???
>>960
htmlだけじゃなくてcssも書きなよ
962Name_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;
}
アンカーに指定しているスタイルはこんな感じです。
963Name_Not_Found:2009/07/01(水) 21:45:37 ID:???
>962
CSSを適用させなければリンクは効くの?
あと問題の箇所はdivタグ直下?
他のタグの入れ子になってるなら、特定タグ内の時だけ問題が起こる?
964Name_Not_Found:2009/07/01(水) 22:12:26 ID:HcMmVmvA
アンカー関連の部分をコメントアウトしてみましたがやはり機能しません。
メニューバー用に設定したアンカースタイルもコメントアウトしてみたら押せなくなりました。
問題のリンクは、ほとんど<div class="Main">の直接の子要素ではありません。別のdivやul,p要素等の子要素です
965Name_Not_Found:2009/07/01(水) 22:45:19 ID:???
div class="main"の直下に問題のaタグもってきてみ
それでもリンク効かないならmainに指定してるcssがおかしいんじゃね
966Name_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;
}
てな感じです
967Name_Not_Found:2009/07/01(水) 23:21:33 ID:???
リンクがおかしいのなら
・単純にアンカータグや周囲のタグを間違えてる(単純な記述ミス)
・該当要素の上に被さってる要素がある(positionとかz-indexとかで)
どっちかだろうと思う
a:link,visited,hover,activeで指定したスタイルが適用されているようなら後者な
968Name_Not_Found:2009/07/02(木) 00:10:10 ID:/AkBgeKF
質問です。
htmlで文章を書くとき
例えば
りんご    100円
オレンジ   150円
パイナップル 300円
みたいに果物名と値段を書いて値段の部分で頭をそろえたいので
その間にスペースを入れたいのですが
空白の部分に を入れて例えば
りんご   100円
オレンジ  150円
パイナップル 300円ってやり方で問題ないですか?
50個くらい商品があるのでかなり をいれなきゃいけなく
なるので、このやり方でいいのかな?と迷ってます。
他にもっといい方法がありますでしょうか?
969Name_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;
}
といった感じにスタイルを指定しています
970Name_Not_Found:2009/07/02(木) 00:12:40 ID:/AkBgeKF
>>968
すいません968訂正です.
& n b s p;を何個も使って普通頭ぞろえを調整するもんなんでしょうか?
971Name_Not_Found:2009/07/02(木) 00:22:07 ID:???
>>970
するべきじゃない
だってフォントによって幅変わるからずれちゃうじゃん
でも別に読めるっちゃ読めるから気にしないならおk!

気にするならtable使うか

CSSで、
display:inline;width:***px;みたいに書けばおk
972955:2009/07/02(木) 00:33:11 ID:???
CSSだけでやるよりやっぱりJavaScriptでやる事にしました。
973Name_Not_Found:2009/07/02(木) 00:57:59 ID:???
>>968
おれはテーブル・レイアウト否定派だけど
それは、完全に、<table>を使うケースだと思うよ
974Name_Not_Found:2009/07/02(木) 01:02:20 ID:/AkBgeKF
>>971
そうなんですか、今全角のスペース入れて調整したんですが
フォントが変わったらずれてきますかね。
一応フォントはMSゴシックで統一してるんですが。

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

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

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

975Name_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>
976Name_Not_Found:2009/07/02(木) 01:49:35 ID:/AkBgeKF
>>975
なるほど!わかりました、早速やってみます。
ありがとうございました!
977Name_Not_Found:2009/07/02(木) 06:42:05 ID:???
マークアップは定義リストだろjk
978Name_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>

余白や幅は適宜調整
979Name_Not_Found:2009/07/02(木) 11:21:46 ID:???
あああああいいいいい
 いいいいいいいいい
 いいいいいいいいい

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

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

とか、

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

になるようにしたい、
テーブルの使用OKとした場合、どのように記述すればよいかわかりません。
980Name_Not_Found:2009/07/02(木) 11:34:07 ID:???
変なレイアウトだな…
1行目は見出しにする、とか決まってるなら
1行目はh1タグとかで括り、2行目以降(本文)をpタグでくくりゃ良いんだろうけど

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

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

みたいな感じにしたいの?
981Name_Not_Found:2009/07/02(木) 13:10:05 ID:???
こういう事では無かろうか。
p { text-indent: -1em; }
982975:2009/07/02(木) 14:13:49 ID:???
>>977-978
そっか勉強になった
ありがとう!

けどspanでもwidth効くんだぜ
983Name_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のみ背景画像が表示される

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

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

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

ちなみに、
#bg .p02と書いてIE
#bg .p01と書いてFirefox、IEとも
画像が非表示の場合でも<p>のテキストは表示されています。
986Name_Not_Found:2009/07/02(木) 15:59:55 ID:???
>982
spanタグで括るとマークアップの仕方として意味合いが違ってくるんじゃないかね

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

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

まぁクラス名を被らないようにするのが簡単だろ
989Name_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指定)こういう書き方は問題ない?
990Name_Not_Found:2009/07/02(木) 19:02:46 ID:???
これ見つけたけど同じ感じ?

http://q.hatena.ne.jp/1213529705
991Name_Not_Found:2009/07/02(木) 19:05:27 ID:???
>>989
>そもそも<div id="bg" class="p01"></div>という書き方そのもがNGなんでしょうか?
問題ない。
992988:2009/07/02(木) 19:10:41 ID:???
>>989
<div id="bg" class="p01"></div>自体には問題はないよ
全く使われないってこともないから>>983のケースなら、クラス名だけを記述するのがベストだと俺は思う
クラス名が被るのを心配してるみたいだけど、自分一人でサイトを管理するのなら特に問題はないだろうし
最終的には好み次第かな
993Name_Not_Found:2009/07/02(木) 22:18:20 ID:???
まだ勘違いしている悪寒
994Name_Not_Found:2009/07/03(金) 02:59:06 ID:EmJc7+sr
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
では次スレで。。。!
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。