【DW】HTML/CSS質問・優しく答えるスレ【神降臨】
1 :
Name_Not_Found :
2009/03/13(金) 22:08:43 ID:gH86B3g+ ここは初心者からベテランまで、 全ての人を対象に優しく答えるスレです。 類似質問大いに結構。 分からない人は何回聞いても結構。 HTML/CSSの事なら何でもOK。 回答してくれる方は優しい人のみ! ○○読めっ・・・何度も聞くな・・etc などと言う人は このスレを見るな!! 質問側も節度あるレスで!
http://new-com.jp/ まだ製作途中ですが、HTMLの文法が汚いと他スレで指摘されました。
indexページのソースだけでも良いので、何か助言いただけないでしょうか。
よろしくお願いいたします。
tidyとかで自動整形するのってどうなの?
>>2 特段汚いってレベルじゃないけど
2つ気になった点
1.htmlの基本エラーが9つありました
2.NEWの左側の文章ブロックが画像と引っ付きすぎ
せめて10〜15px程度あけるほうが見やすい
以上
>>2 ・最初にDOCTYPE宣言をきちんとしなさい。
・文字コードを指定しなさい。
・fontタグは非推奨です
・見出しはstrongよりもh1・h2・h3などのほうが適切
・一箇所だけA HREFと大文字になってる。小文字で統一しなさい。
・fotterじゃないよfooterだよ
・その中もダラダラ書きじゃなくて、定義リストにするとかさ。
・悪いことは言わん、忍者は最後にしときなさい。
CSSも含めまだ大量にあるけど、ま、頑張れ。
>>6 ありがとうございます。
早速修正いたします。
8 :
神様門前払い :2009/03/14(土) 03:26:26 ID:???
>>6 うぉー神様降臨だ!スレ作ったかいがありました。
今後ともよろしくお願いしますです。
早くそんなレベルになりたい。。。
9 :
6 :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
念のためこのスレを立てたのがぼくで そのHPは他人です。念のため まだ言ってることまったく理解できないレベルです。。。orz
11 :
6 :2009/03/14(土) 04:45:06 ID:???
んなこたーソースや画像見りゃわかる。 スレ立てたのが君だとは思わんかったがw
すぐに追い付きます。 あまり遠くに行かないようお願いします。。。
超初心者です。他スレで聞いても答えが返ってこなかったのでこちらに失礼します。 <!DOCTYPE>は書かなくても平気なんですか?バージョンとかよく分からないのですが…
>>13 んーと…無くても一応表示はできる。
が、複雑な内容の場合、無いとブラウザによって変な表示になることもある。
あと、あった方が閲覧者のPCに優しい。
かなり強引だけど……人間に例えるなら、
書類を読み始める前に、その書類が書かれている言語が
英語なのかフランス語なのかドイツ語なのかを最初に書いてあったら
辞書を事前に探してから読み始められるから読みやすいでしょ。そーゆー感じ。
もし企業サイトなどで、SEO対策を考えているのであれば、必ず書くことをオススメする。
もし個人のサイトで、自分の気に入る人だけ来ればいいのであれば、別に無くてもいいんじゃない?
>>9 ありがとうございます。
修正いたします。
コンテンツを28日までに全て出そうと思っておりますので、
ここはどうか、という所ありましたらメール、スレで指摘いただければと思います。
よろしくお願いします。
http://new-com.jp/
>>14 分かりやすい例えまでありがとうございます!とても助かりました。
本当は書きたいところですが、間違ったことを書いたらまずいので書かないことにします。
18 :
神様門前払い :2009/03/15(日) 00:38:53 ID:???
19 :
D :2009/03/15(日) 02:22:53 ID:6HaYwzB1
すいません!!
単純な質問なんですが(*^_^*)
[
>>14 ]←これもタグなんでしょうか!?できたら少し詳しく教えてくださいm(_ _)m
[<a href="../test/read.cgi/hp/1236949723/14" target="_blank">
>>14 </a>]←これもタグなんでしょうか!?できたら少し詳しく教えてくださいm(_ _)m
あれ。実体参照文字は変換されるのか・・・
他のサイトに、テキストを使ってリンクするには
<a href="URL(アドレス)">テキスト</a>というように記入。
リンクするための<a>タグを使って、値にリンクしたいサイトのアドレスを、
http://からすべて正しく記入し 、
リンクを設定させたいテキストをこのタグで囲む。
リンクを設定すると、標準の設定では文字の色が青色になりアンダーラインが引かれる。
それと、target属性をつけて値に _blank を指定すると、新しいウィンドウが開いて、
そこにリンク先の内容を表示する事も出来る。
24 :
Name_Not_Found :2009/03/15(日) 12:11:50 ID:PbFzRU6N
1〜2週間我慢して、本みてやってみたらコレくらいなら理解できるようになるよ。
サイトのトップに幾つかの画像をランダム表示させることはできたのですが 幾つかのフラッシュファイルをランダムに表示させることができません。 どのように記述すればよいの教えていただけないでしょうか よろしくお願いします。
>>26 DW単体の機能じゃできん。
参考サイトもそうだけど、Jqueryのプラグインが一般的だ。
つか、HTML満足にわからないで、あれもしたいこれもしたいってのは本末転倒。
Jqueryのプラグインというのは何ですか?
うーん…DWのスレで訊いた方が専門的なことを教えてもらえるんじゃないかな? 少なくとも自分はDWがわからんので、アドバイスができない…。
>>6 からスレに協力してみたが、バカさ加減が過ぎて嫌になってきた。
「ググレカス」の言葉を残して降ります。
>>30 初心者も勉強する気の無いアホ(
>>28 )と勉強する糸口を欲しがってる人(>>門前払いら)に別れる
後者には手を差し伸べてやってもいいんじゃまいか
32 :
Name_Not_Found :2009/03/15(日) 19:10:59 ID:PbFzRU6N
HTML、CSSの基礎がわかってても苦労してるのに、 理解せずDW使うなんてむりだろ! DW自体の理解も必要なのによ! ビルダーでも使っとけよww
33 :
Name_Not_Found :2009/03/15(日) 21:20:34 ID:0TDcCTye
34 :
神様門前払い :2009/03/15(日) 22:01:07 ID:0UlhIp54
コラ!ぼくはまだ質問するレベルにもなってないんだぞ スレ存続してねあードリドリ
35 :
Name_Not_Found :2009/03/15(日) 23:17:38 ID:0TDcCTye
自己解決しました。ちょろいもんだぜ。
37 :
D :2009/03/16(月) 02:17:22 ID:2+otmIQC
>>19 への返答!!丁寧にありがとぅございました♪
良く読みあさって勉強します(*^_^*)
ちょろいスレ終了ですね・・・
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
>>42 そういう時はValidator使うんだ。
問題点の切りわけをせずに、だらだら弄っていても泥沼だよ。
44 :
Name_Not_Found :2009/03/17(火) 18:17:52 ID:hpN3UOqg
ホームページ制作王を使いこなすことができるなら、 下らないHTMLタグを覚える必要から解放されるだろう。 COMDEXが認めた世界標準、ホームページ制作王。 21世紀のワールドスタンダードの称号は伊達ではあるまい。
45 :
神様門前払い :2009/03/17(火) 23:14:09 ID:ZYYJQ94O
>>43 もちろん使いました。。。英語ばかりでよくわからなかった。。。orz
翻訳サイト使っても翻訳してくれないのです。
原始的に自分で間違い箇所発見してその後バリデータ見てどんな
表記になってるのか確かめたので次は少しは使えるかなと。。。
んじゃanother html lint使えよ CSSはw3cでも日本語だったろ
47 :
神様門前払い :2009/03/18(水) 01:43:02 ID:lZDbHIPX
another html lintはCSS調べられますか?
>> CSSはw3cでも日本語
49 :
神様門前払い :2009/03/18(水) 03:06:33 ID:lZDbHIPX
って言われても意味わからない another html lintでCSSをわざと間違ったスペルで入力してチェックしても アドバイスでなかった。。。 さっき、なか卯でカレーとミニうどんのセット食べてきました。あれで590円は安いもんだ。。。
50 :
Name_Not_Found :2009/03/18(水) 03:08:50 ID:SFP7HUtR
フロートとクリアについて教えてくり
>>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
>>53 CSSでやりたいなら、《画像1+説明文》と《画像2+説明文》をそれぞれdivで囲って、フロートさせるとできるよ。
詳細はCSSを教えてくれるサイトのfloat属性に関する説明を読むといい。
もしくは、CSSテンプレを配布してるサイトから「2カラム」と書かれたテンプレを探してソース盗み読んで勉強。
>>54 divで囲ってfloatで並列ですね。
なんとなく分かりました、ソース盗み読んできます!
ありがとうございました!
いや普通dlでやるだろ
57 :
Name_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 どなたか教えてください
58 :
57 :2009/03/21(土) 20:02:46 ID:???
すいません自己解決しました…なんでこんな事に気づかなかったんだ…
背景が黒のページで透明なgif画像でスペースを作って IE8で見ると表示されてしまいます。 IE7ではなりませんでした なんですかこれ?
大人しくcssでマージンなり設定しろってことだろ
へぇー
XHTML+CSSで書いてます。 サイトなどに良くあるWhat'sをul,liで作ろうとしているのですが うまくいきません。 ■2009.03.23 ホームページを更新しました。 というのを ■2009.03.23 ホームページを更新しました。 というように改行したいのです。 さらに本文のところを幅一杯に使ってしまって長くなっても きちんとインデントで改行できるようにしたいです。 ■2009.03.23 ホームページを更新しました。新着情報はこち らからご覧下さい。 のようにです。 しかも■は画像で、オンマウスで反応するようにしたいので background-imageで表示しています。
liでやる意味あんの? ■を背景画像でやるんだったら dl,dt,dd使ったほうがよいのでは。 cssによるddの左マージン設定でインデントは好きに決められる。 せっかくXHTML使ってるなら論理的なマークアップを心がけ cssオフでどう見えるかも考えることをおすすめする。
普通dlでやるけどulでやりたいなら更新情報のliにクラスつけて左マージン設定
65 :
62 :2009/03/23(月) 21:28:19 ID:???
ありがとうございます。もっと精進します。
66 :
Name_Not_Found :2009/03/25(水) 19:58:06 ID:phh+ptZw
Firefoxで、「CSSのbody以外」を読み込んでくれません。 なぜでしょうか。
俺もULとDLの違いわかんねーや。
質問です。 .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も使っていろいろ試してみたのですが、うまくいきませんでした。 どういう記述をすればよくわからないので、指摘等お願いします。
70 :
ちり紙 :2009/03/26(木) 12:16:28 ID:???
>>68 .main {
width:550px;
float:left; /** ← この行を加える*/
}
71 :
Name_Not_Found :2009/03/26(木) 14:59:34 ID:aEgAOiKi
携帯電話でHTMLページを作ろうとしていて、 ドコモ(906など)の制限と思われる100KBぎりぎりまで画像を使いたいです。 その際、「ディスク上のサイズ」・「サイズ」のどちらを見ればいいのでしょうか? 1機種で表示で表示できたら、それは他でも多分表示できる容量と思っていいでしょうか?
float:left? rightじゃなくて?
>>70 回答ありがとうございます。
やってみましたが、
┌───┬───┐
│文字列│文字列│
└───┴───┘
のように中央に寄らず、左に寄ってしまいます。
>>73 .bsub_block{
width:800px;
text-align:center;
}
中央表示の2カラムが作りたいの?
.bsub_block{ width:800px; text-align:center; margin:0 auto; }
>>69 それソース見てみたけど2カラムでしか表示できない構造になってる
3カラムにするにはかなりの腕が必要だよ
少なくともどこに○○をコピペすればとか、○○の部分を△△に入れ替えればとかそういうレベルじゃない
一からHTMLを書き直す必要がある
>>76 margin:0 auto;
を記述したらうまくいきました。
ありがとうございました。
>>77 2カラムでしか表示できない構造ってなんだよwそんなのねーよwww
普通の一般的なブログのHTMLじゃねぇか
80 :
71 :2009/03/27(金) 03:16:21 ID:0/wFt8b+
ドコモのSO906iで試したところ、 ディスクのサイズは100KBをだいぶ超えても大丈夫でした。 サイズでは100KBオーバーくらいまで増やすと表示しきれなくなりました。 この機種に関してはサイズが100KB超えなければいいようです。 これが他の機種でもそうなのか教えていただきたいです。 同じデータをauで開こうとしてできたので、1機種だけはできています。 1機種で表示できたら、それは他でも多分表示できる容量と思っていいでしょうか?
>>79 は?お前HTML弄ったことないだろ
あれをどうやりゃ3カラムに出来るんだよ?
知ったかも大概にしとけ、これ以上知ったか続けて恥書くのはお前だぞ
>>82 それは[samurai_bamboo_3col]のだろ
自分のブログの編集画面で
>>79 のにその記事の付け足してみろ
3カラムにならんばかりかレイアウト崩れて見れたもんじゃなくなるのがオチだ
散々知ったかした挙句の最後の悪足掻きがこれか、ほんっと救いようの無い馬鹿だなお前は
>>83 ココは、...やさしく教えるスレ...だYO!
>>84 充分優しく教えてるだろ
優しくなけりゃこんな馬鹿対応してやらねぇよ
第一優しく教えてやる必要があるのは質問した
>>69 に対して
野次飛ばしてきた
>>79 に優しくする筋合いは無い
どうぞ教えてください。 ieで、指定された色は指定されている通り、指定されてない色は黒で表示する術を。
>>86 野次じゃなくて指摘だボケw
俺に論破されて悔しいかwww
>>88 論破されてるのはお前だろ
3カラムにしてみろよ、できねぇだろうが
レスすればするほど自分の無知を晒してることにそろそろ気付けよ
お前が
>>77 を否定した根拠が
>>82 で、それに対する
>>83 のレスがある時点でもうお前は終わってんの
本当に
>>69 のを3カラムに出来るというならやってみろ
出来ないなら自分が知ったかで絡んでたこと認めてさっさと消えろ
90 :
神様門前払い :2009/03/27(金) 17:22:05 ID:nH1o9C8C
ぼくは、論破も指摘も3カラムも全然言えないレベルです。 羨ましい。
>>87 色を指定したいのは文字?
それとも他の何か(ボックスとか背景とか)の話?
93 :
神様門前払い :2009/03/28(土) 09:42:25 ID:5ZqSWoFc
>>92 え〜っと、ドリ4の使い方少々と
HTML/CSSでテーブル、リンク、画像の挿入とかです。
いま、Pixiaで素材作ってHPつくるとこです。
解らない事その都度出てくるでしょうけど。。。
94 :
87 :2009/03/28(土) 22:38:32 ID:???
リンクを新窓で開いて、その新しく開いた窓からさらに新窓でリンクを開きたいのですが、どうすればいいのでしょうか。 どうしても最初に開いた窓と同じ窓に表示されてしまいます。 説明下手ですいません。
>>95 target="_blank"
ただ特に理由がなければ別窓で開かせるのはおすすめしないが…
>>94 body{
background-color:#000000;
}
こういうことかな?
98 :
ちり紙 :2009/03/30(月) 12:11:32 ID:???
>>94 * { background : black; }
これかな?
試してないよ...
HTML/CSSの宣言はどうすればいいのでしょう
初心者なので大抵のタグ使えるようなのが良いと思うのですが
これで大丈夫ですか?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd ">
みなさんはどうされてますか?
>>99 それで問題ないと思います.
自分は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
にするか,手抜きで <!DOCTYPE HTML> にすることが多いです.
XHTML の場合は XHTML 1.1 のを使うか,DOCTYPE宣言なしに
しています.
CSS はバージョンを宣言するような仕組みがないので,特に何も
する必要はないです.
>>100 HTMLにCSS反映させるのはどうすればされますか?
エディタ使ってやってるのですが背景画像を指定してもされないんです
>>101 まずは実際のソース(HTML・CSS両方)をここにコピペみてください。
103 :
102 :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>
これが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")
}
素材で背景を指定したいのですがこれで指定されないんですが どこがいけないのでしょうか?
>>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式 ).
>>106 ありがとうございます。
タイポありますね。
あと宣言ダメみたいです、宣言無しのサイトもありますが無しでも大丈夫ですか?
宣言してルールに縛られるなら、しないで縛られないほうがやりやすいと思うのですが
>>108 レスありましたね失礼しました。
商用とするなら宣言はあったほうがよさそうですね
IEとFirefoxで正常に動くならそれでも良いんですけど
ルールも指定の仕方も一つに統一して欲しいです。
ありがとうございました。
CS4の方でちょっと質問よろしいでしょうか? 例えば以下のような同じ構成のhtml(この場合HogeBlock)が繰り返される部分があったとします。 <div class="HogeArea"> <div class="HogeBlock"> <h4>タイトル</h4> <p>本文〜</p> </div> </div> これをデザイン画面上で簡単に複製・編集・削除したりする方法がわからないです。 一応ヘルプを見てテンプレートやらライブラリやらそれらしき機能はあったので試してみたのですが なにぶんよく概念がわかっておらず上手く動作しません。 ほかの所で<p>だけで囲んだ部分はデザイン画面上で改行するだけでwordみたいに複製してくれたんですが。 どなたかお願いします。
<div id=""> これの” ”の間に入れる文字はどんな意味合いがあるのですか? 画像ならどこどこのファイルの何とかって画像! と指示を出しているんだと解るので どんな文字入れれば良いか理解できるのですが
112 :
111 :2009/03/31(火) 10:17:01 ID:???
自己解決しました。
113 :
ちり紙 :2009/03/31(火) 12:26:34 ID:???
>>110 DWのデザインビューの話だよね?
WORDの編集みたいに編集できると思わない方が良いよ!
DWをメインで使っている人は、デザインビューとコードビューの両方を表示させて作業している人が多い。
デザインビューで要素を選択して、ハイライトされたコードを弄るという方法じゃないと
まともに使えないよ
114 :
110 :2009/03/31(火) 12:43:35 ID:???
>>113 レスどうもです。
自分もやるとしたらその方法でしょうね。
しかし実際、使う人はド素人なんでコードを弄るのは難しそうで…
上記のライブラリの説明画面にデザインビュー画面上で1項目ごとに認識して
リピートオブジェクト化してる画面が載っていたので、
なんとかそれが実装できないものかと思いました。
HPにあるボタンでマウス置いた時と置いてない時でボタンの色が変わりますが 何でどう指定すればいいのですか?素材は二つ用意してあるのですが
>>116 ロールオーバー了解です。ありがとう!(やりたい事の名称も解らないから一苦労です)
118 :
Name_Not_Found :2009/03/31(火) 17:44:15 ID:4D/gwe6f
( ^ω^)
>>118 これはここに貼るために改行したのでしょうか?
pos= の前に改行や半角スペースがあったら消してください。
それで動作確認済みです。
透過PNGを背景につかうのが妥当かどうかの質問です。
http://www.premiumagency.com/majua.html (↑私の作ったページではありません)
上のページのNEWSやPRESSRELEASEのように
透過PNGを背景に使うと半透明の背景が作れるんですが、
これが意図どおりに表示されるのはIE7以降で
例えばIE6ではアルファ値が無視されちゃいますよね
一応、アルファ値が無視されても問題なく見れるように
文字の色と透過PNGの色を調整はできますが、
ブラウザ毎に表示が違ってしまうという点で
こういう透過PNGの背景はあまり使わない
(その代り背景画像を加工して透けているように見せるとかした)
方がいいのでしょうか。
教えて下さいお願いします。
※Javascript使えばIE6でも透過PNGの背景は使えますが
それは考えない方向であくまでHTMLCSSの範囲でお願いします。
Flashメニュー(笑) 透過が必要ならどうにかして実装すればいい 例に挙げてるサイトみたいな透過は話にならん
>>121 依頼主がどうしてもこの表示にして欲しいと言われたらやります。
(その場合はIE6用にjs使います)
デザインから自分で起こす場合は背景pngはまずやりません。
┌─────┐┌─────┐ │ボタン A ││ ボタンB │ └----------┘└----------┘ ↑ 横並びにしたボタンAとBの間をあけるにはどう指定したらいいのですか?
input{ margin-right:1em; ←任意の値 } とか。
>>122 >>123 ありがとうございます。
とりあえず透過はやめようと思いました。
ちなみにPNGもなるべくやめた方がいいっていうのは
IE3やNN4で対応していないからですか。
>>125 それはCSSですか?
htmlの方は<div id="">で囲ってるのですが
div#(ID) input{
margin-right:2em;
}
でしょうか?
>>127 CSSだよ。
<div id="hoge" ...>みたいにしてるなら
#hoge input{
margin-right:2em;
}
でもいいし、マージン指定が一箇所でいいなら目的のボタンに
<input id="hoge" ...>として
#hoge{
margin-right:2em;
}
でもOKだな。CSS無しでも とか挟めば余白作れるけどこれは行儀良くない。
129 :
128 :2009/04/01(水) 23:49:51 ID:???
上の空白は&nbsp;(半角で)ねw
すごく初歩的な話かもしれないんですけど、 background-color:blue; みたいに background-color と blue の間に:を入れますよね? これ、IE6ではbackground-color=blue;のように、:を=で代用できるってことに気づいたんです。(IE7は未確認) それで気になったんですけど、:の代用になるのって=以外にあるんですか? FireFoxではbackground-color=blue;と書いたものは認識できなかったので、FireFoxやその他のブラウザ(携帯のブラウザ等)でも認識できる:の代用記号が知りたいです。 教えてください。
132 :
ちり紙 :2009/04/02(木) 13:46:00 ID:???
: 以外は、バリデーションエラーでは?
div#bar1 { float: right; width: 530px; height: 480px; margin-right:320px; } こんな指定の仕方ありますか?floatで回り込ませたのは良いのですが 右に行き過ぎたのでmarginで指定して調整したんですが 結果、思った位置に持ってくることができたのですが 別にできればOKなんでしょうか? この指定の仕方でも特に問題ないですか?
なにも問題なす。
>>134 ありがとごぜます。m(_ _)m
自分でも良く調べてみます。
<!−−〜−−> は何するとき使うのですか?
自分で作ったHPまだ途中なんですがバリデータで 判定したら-309点だったんだけどまずいですか? IEもFirfoxも正常に見れるのですが・・・
>>136 わたしだけの覚書 or チラ裏ってことですよ
<!−−javascript開始−−>
・・・・・・・・・・・・・・・・・・・・・・・・・
<!−−javascriprここまでで終了−−>
>>137 さすがにその点は気になりますね
エラー表示されるのを1つずつ消していくしかないです
>>137 点数ってことはhtml-lintだよな
きちんと表示されていても、HTMLの文法的に間違っていれば点数は低くなる。
-309点まできたら致命的な文法ミスがいくつもあると思うから、さすがに気をつけたほうがいい。
ほとんどが「<」か「>」なんです 例えば</html>の>が赤くなってて指摘されているのとか </a>の>が赤かったり<br>の<が赤かったり ほとんどが>か<なんですが
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> 宣言なんですがどれ使えばいいんでしょう? 宣言の概念がいまいち良くわからない
>>142 この2つの違いはファイルの文字コードで、UTF-8の場合上を、Shift_JISの場合下を書く
Windows環境で書いたらだいたいShift_JISになるので下を書いておけばいいが、ファイルの文字コードに合わせてかえなければならない
…てことじゃなくてこの宣言がどういう意味を持つか知りたいってこと?
>>143 いえ、その補足説明も無知な自分にはありがたいです。
WindowsなんでJISのほう書けばいいのですね
両方書いておくのはダメなんですか?
>>144 閉じ忘れでなかったです、少し直したらプラスの点数になったので取り合えず一安心っす。
>>145 自分がなんの文字コードで書いているかの宣言なのだから
まずエディタの文字コードを見てみましょう
winのテキストで書いてるのならShift_JISだと思うけどー
エディタで文字コードを変えることが出来るので一概にはいえまへん
>>146 HTMLのバージョンは何で宣言してますか?
xhtmlで書いてるのなら<br>、<img>などの空要素タグを閉じないと
とんでもない点数叩き出しますよー
>>147 文字コードの違いなんですねwinなのでJISにしました。
>>148 1.0です。見る解説書によって閉じ方違うので別のやり方してたみたいで
とんでもない点数でした。
CSSで配置の指定をしたのですがブラウザの大きさ(横の幅とか)変えたり firefoxで見たときズレが出るのですが、どう記述したらいいでしょうか? ┌─────┐ │ │ └─────┘ | ̄ ̄| | | | | | | | |  ̄ ̄ ̄ ↑これを | ̄ ̄|┌─────┐ | |│ │ | |└─────┘ | | | | | | | |  ̄ ̄ ̄ ↑こうしたいのです
これでどよ? #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> 確認してないから。
>>151 ダメでした。
CSSでで調整は出来るのですがブラウザの横幅変えたりしたら
ズレたんです。
ちなみに何てググったらいいですか?CSS配置で検索してもこれと言ったの出てこないorz
初めにホームページの横のサイズを指定してそれを基準に調整しないといけないのでしょうか?
感謝の気持ちが足りないやつには答える気がしない。
Web制作会社にアルバイトで入るために、 架空の企業のサイトを作ろうと思うんですが、 そこに載せる写真は無料素材集とかから持ってこないで 自分で撮るか、プロに撮ってもらった方がいいんでしょうか。 教えて下さい。よろしくお願いします。
違法性がなければいいんでわ
>>152 まだいるかな?
その二つのdivを内包するdivの横幅をpxで固定する。
or
windowのサイズに合わせて可変させたいなら、
ズレる手前の最低限必要な横幅をヘッダーやフッター等で指定してあげればできると思いますよ。
>>156 一般公開するものでもないのでフリー素材で大丈夫ですよ。
161 :
Name_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よりちょっと右にズレるんですが、 揃えるにはどうすればいいんでしょうか?
>>161 TextBox1をテーブルに入れる必要はあるのかな?
もしどうしてもテーブルに入れたい場合は、
CSSでテーブルのマージンとパディングを0にするといいよ。
>>161 ヒント
* {
margin: 0;
padding: 0;
}
164 :
161 :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>
tableやめれ。
>>164 テーブルタグでサイズ指定しないからじゃないの
<table border="6" cellspacing="4" cellpadding="8"></table>
table borde 外枠の太さ
cellspacing セルの間隔
cellpadding セル内の余白
ポータルサイトのような、CSSを使ってフレームのようにテーブルを配置したものは、左側のナビゲーションバーを消さずにメインページを変えるリンク設定はどのようにしているのでしょうか? in frame以外でそういったことは出来ますか?
疑似フレームはフレームではない。まずは作ってみたらわかるよ
質問なのですが、たとえば、 <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の全角スペースだと期待した動きにはなるのですが、やっぱりあんまりだと思うので。
170 :
169 :2009/04/05(日) 13:14:03 ID:knVZVq/P
質問するときはアゲといたほうがいいですかね。 よろしくおねがいします。
171 :
Name_Not_Found :2009/04/05(日) 13:43:22 ID:h6MC9SE0
それぞれのliの内容のことだと思うが 日本語だと単語では区切れないはず。 画像と代替テキストでやるか、クラス与えてemで幅指定するとか
172 :
Name_Not_Found :2009/04/05(日) 13:48:30 ID:knVZVq/P
>>171 全角文字って1文字が1単語じゃなかったんでしたっけ。それは、その動きで良いです。
上の例だと、(liじゃなくて)ulの中身全体が1単語として見てるみたいな動作になってるのを何とかしたいんです。
173 :
167 :2009/04/05(日) 14:23:17 ID:???
>>168 それはわかります。
では、リンク飛ばした先のページ一つ一つにも同じナビゲーションバーをくっつけないといけないということですね?
やっぱ地道な作業しかないのか…
>>167 SSIとかphpなどを利用すると共通部分を単一ファイルとして管理することができる。
検索してみ。サイトの規模によってはhtmlの生成自体を動的にしたほうが良いが。
>>172 display:inlineの代わりにfloat:leftを使用すればOKかと。
175 :
169 :2009/04/05(日) 22:07:28 ID:???
Firefoxの対応として<li>タグの間に 0pt指定の半角スペースを入れて、 IEの対応として ul に word-wrap: break-word; を指定することにしました。 何か IEはjavascriptでinnerHTMLにセットした時のレンダリングが微妙に怪しい感じ。
177 :
169 :2009/04/06(月) 00:05:55 ID:???
>>176 コメントも書かなくてすんませんでした。
単純に floatにすると、上手く説明できないのですが、タブ表示のために使用している
他の表示設定と噛み合ってくれず、表示が崩れてしまいます。
floatでも対応できるのかもしれませんが、なるべく現状のコードに大きな修正を加えたくないので、
先に書いた方法の対応のまま済ませることにしました。
178 :
167 :2009/04/06(月) 03:08:41 ID:???
>>174 そういうのを探してたんです。
ありがとうございます。
勉強してみます!
179 :
神様門前払い :2009/04/06(月) 14:39:12 ID:V2xUf9VR
ぷはぁ〜やっと謎が解けました。 ぼくが門前払いから見習いへ昇格する日も近いかも あっ独り言です。気にせずに。
180 :
sage :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{
となっています。
ご指導よろしくお願いします。
>>180 変えたいのはフレームの幅かな?
↑で合ってるなら、「index2.html」の
<frameset cols="*,110,260" frameborder="0" border="0">
このcolsの数値を変えればいいよ。
左から順に左(メイン)、中(メニュー)、右(タイトル)のフレームね。
182 :
sage :2009/04/06(月) 22:13:02 ID:???
>>181 様
お蔭様で変更できました、
変えたいのはフレームの幅でした。説明不足ですみません。
迅速なご返答ありがとうございました。
>>183 とりあえず該当部分のソースを貼ってみてください。
それから、インラインフレームで呼び出してるページのソースも。
もしくは、貼ってくれたURLのフォームに入力した内容でもいいです。とにかく再現しないと何とも言えません。
例えば、<iframe src="hoge.html" scrolling="auto" width="200" height="500">hoge</iframe>っていうソースで、
呼び出されたページの幅が200を越え、高さが500未満であれば、横スクロールだけが出るという状態になるよ。
<iframe src="ファイルのURL" width="260px" height="330px" scrolling="yes" name="test" marginwidth="10px" marginheight="10px" hspace="10px" vspace="10px">ここに未対応ブラウザ向けの内容</iframe> 作るかどうかテストしている段階なのでメモ帳で試してみただけなんです ソースは上記に書いた通りで呼び出しページもまだ未定です。 IE6だとバグがあると聞いたことがあるのですが・・ 自分はIE7です。 ご教授頂ければ幸いですm(_ _)m
全くの初心者なのですが。 ページの一部の文章を、曜日や日にちによって表示が変わるようにしたいのです。 引っかかりそうな単語で検索してみたら Javaが引っ掛かりました。しかしいまいちよくわかりません。 HTMLやCSSでそういったことはできるのでしょうか? もしできるのであれば方法などを教えて下さるとうれしいです よろしくお願いいたします
>>185 早速、IE6・IE7・Firefox3で再現してみた。
scrolling="yes"となってる通り、上記3ブラウザ全てでスクロールバーが強制表示されたよ。
ただ、IE7だけは「ファイルが見つかりません」的な画面のデータ量が少ないので
スクロールバー自体はあるけどスクロールできない状態(動かせるバーが表示されない状態)になった。
(わかりにくい説明ですまん)
でも、
>>185 の環境では、スクロールバー自体がないんだよね?
>>186 えっと、曜日や日付を読み取って表示を変えるのは、少なくとも現在のhtmlとcssでは不可能です。
貴方のやりたいことなら、多くのtip集などで配布されてるので、それを使うといいよ。
それから、貴方が言いたいのはきっと「JavaScript」なんだけど、これは「Java」とは別物であることを知っておいて欲しい。
混同すると検索する時とかに訳わからんようになると思う。
そして、他のスレや掲示板などで一笑されるだけで、質問に答えてもらえなくなる。
XHTML1.0 Transitional DTD h1-h6要素などブロック要素を内包不可能なものに対して 以下のような設定は文法的に間違っているのでしょうか <h1><span>あいうえお</span></h1> h1 span { display: block; } XHTMLの構造的に問題なければOKなのでしょうか? よろしくお願いします。
文法は間違ってないね
191 :
Name_Not_Found :2009/04/07(火) 06:29:38 ID:N6k2wrVo
ヘッダーと横ナビとフッターを固定して、中のコンテンツだけスクロールしたいんだけどどうすればいいですか?
祈る
193 :
Name_Not_Found :2009/04/07(火) 08:09:58 ID:9fGcK4F+
overflowで検索
全体を右よせにしたいですがどうするればいいですか div align="right"? bodyにtext-align:right;? margin:0 0 0 0 auto;?
>>187 表示先のサイズによって縦のスクロールバーもでました。良く調べずに質問してしまいお恥ずかしい限りです。
わざわざテストまでして頂いてご丁寧にありがとうございましたm(_ _)m
pxとemはどう使い分けるものなんですか?
>>196 pxはピクセルのこと。ピクセルは画面全体と比較した相対的な単位。
emはそのページの基本となる文字サイズを1emとした相対的な単位。
要は、どちらも相対的な単位なんで、閲覧者の環境によって見た目の大きさは変わっちゃうんだけど、
画像やブロックの大きさは基本的にピクセル単位で表すことが多いと思うんで、
画像やブロックとのバランスを考えて文字を配置したい場合はpxで指定する、とか
読み物的な文章の見出しについてはemで指定する、とかの使い分けが可能かな。
198 :
186 :2009/04/07(火) 21:43:22 ID:???
>>186 です
>>188 さん丁寧に教えてくださいましてありがとうございます!
さっそくtip集を色々探してみます!!
ありがとうございました!
>>197 よくわかりました。ありがとうございます。
CSSで横長の横線を引くことって出来ますでしょうか? 「-----------------」 こういう点線にでわなく続きの線なんですが
201 :
200 :2009/04/07(火) 23:06:45 ID:???
-------------------あいうえお----------------------- ← → 矢印の方向に向かってフェードアウトしていく感じ(だんだん薄くなって消えていく様な) にしたいのですが、その様なコーティング出来ますでしょうか?
>>200 <hr>(水平線)ではダメなのかな? cssでデザインいじれるよ。
水平線ではなくて、どうしても文字でやりたい場合は
<span style="letter-spacing: 0px;">――――――――――――</span>
でもできないことはない……これはあんまり使って欲しくないw
>>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">
204 :
200 :2009/04/07(火) 23:21:44 ID:???
>>203 おおお!すごい!ありがとうございます。
CSSフィルターでググッテ勉強してみます。ありがとうございました!
205 :
神様門前払い :2009/04/07(火) 23:46:07 ID:S2kC9iJ4
ぼくは見た神降臨(
>>203 )
門前払いレベルのぼくからするとみんな神様に見える
神にも見放されたか(´;ω;`)右よせブワッ
>>205 神なんてイイもんじゃないよ。自分もまだまだ勉強中。
>>206 右寄せ? どれのこと?
わかる範囲でよければ答えてみるよ。
208 :
206 :2009/04/08(水) 09:51:58 ID:???
float: right;
210 :
200 :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>を取り除く
>>210 hrはそんな事するためにあるんじゃないよ素直に画像使うなりborderで指定してやって
213 :
200 :2009/04/08(水) 13:29:30 ID:???
>>211 試してみましたが取り除いても改行されてしまいます。
宜しければHTML/CSSのソース頂けますでしょうか
>>212 hrは横線指定でそれをCSSでフィルターコーティングではダメなのでしょうか?
HTMLがかなわないHTMLのすごさって何ですか?
↑ごめんなさい 後者のHTMLはcHTML つまりcHTMLの利点がききたかったんです
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初心者のもので、ご教授いただけると助かります。
>>208 >>194 の件ですが、「全体を」だけでは何とも言いようがないです…。
とりあえず、body{text-align:right}を指定しておけば、
中の要素でfloatなどを指定しない限り、ほとんどの要素が右に寄るかなと思います。
>>210 自分で試さずに適当なこと書いてすみません…。実際に試してみたところ、確かにダメでしたね。
<hr>はinlineにできないようです。floatも使えませんでした。
イロイロ検索したけど、
>>212 の言うとおり、画像などで代替する他に方法が見当たらないかも。ごめんね。
ネットで調べたりして色々試したんですがどうにも行き詰ってしまったのでお知恵をお貸し下さい。 style="FILTER: alpha(opacity=60); -moz-opacity: 0.6;opacity:0.6; ↑で透過を指定しているのですが line-height を入れると透過しなくなってしまうんです。 透過と行間指定を両立させる方法ありますか?
220 :
200 :2009/04/08(水) 23:29:03 ID:???
>>217 こちらこそありがとうございました。自分でも色々試しましたがダメでおっしゃるとおりfloatもダメでした。
色んなHPを見て似たような箇所を見つけ範囲指定したところ画像で代替されているような感じでした
また何かありましたらご教授ください。
221 :
206 :2009/04/08(水) 23:39:20 ID:???
>>217 返答ありがとうございます
全体はレイアウトのことを言いたかったのです
私の説明が不十分でした
text-align:rightを使ってがんばります
>>219 そのstyleをどんな要素に入れてるのかわからんけど
<div>に入れて試したところ、line-height入れても普通に透過されたよ?
ちなみにIE6、IE7、Firefox3で確認しました。
実際のhtml/css記述内容と、確認したブラウザ等の環境を教えてくださいな。
223 :
219 :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です。
>>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;}
bgcolorは負の遺産
226 :
219 :2009/04/09(木) 18:09:24 ID:???
>>224 Vista+IE7で試してみたのですがやっぱりダメでした。のでVistaが問題なのかもしれないです。
もうちょっと色々と調べて試行錯誤してみます。
ありがとうございました。
228 :
Name_Not_Found :2009/04/11(土) 07:51:25 ID:+S7Q/lHu
<input type="text" name="" value="250字以内で"maxlength="250"> ここから縦横の大きさを変更するにはどうしたらいいですか?
>228 <input style="width:xxx;height:yyy"> xxx/yyyはお前のすきな値をいれろ
<UL TYPE="square"> <LI><A HREF="about.html" TARGET="right">タイトル部</A><P ALIGN="left">説明部</P></LI> </UL> やっぱりこれだと書き方まちがってんだろうか
>>232 うん
<p>は入れちゃダメだよ
つーか、それ必要?
>>233 ・タイトル
説明
みたいな形にしたかったんだ
<P>以外だと<BR />くらいしか思いつかない。
>>234 それなら<ul>じゃなくて<dl>使うといいよ
ありがとう どんどんシンプルになっていって楽しいわ
>>238 divかliにline-heightを1.5emぐらい指定してやると
240 :
238 :2009/04/12(日) 11:03:40 ID:???
自己解決しました どちらのliにも同じ大きさのheightを指定してやったら 綺麗になりました。
241 :
238 :2009/04/12(日) 11:04:58 ID:???
>>239 時間がかぶったようですね
なるほど、今すぐためしてみます
242 :
238 :2009/04/12(日) 11:06:54 ID:???
>>239 早速試してみました
テーブルでやったみたいにすごく綺麗に整理されました!
これで行こうとおもいます
ありがとうございました
243 :
Name_Not_Found :2009/04/12(日) 11:55:33 ID:TTt4aSmX
id とClass どのように使いわけますか?
×id とClass どのように使いわけますか? →ggrks ○idとclassをこういう風に使ってますが、駄目ですか?
classは複数同じものがあってもいい。idはだめ。 <div>ほげ</div> <div>うにょ</div> ってのがあって ほげ と うにょ に同じスタイルシート(たとえば同じ背景色)を適用したいなら 同じクラス名を与えて <div class="a">ほげ</div> <div class="a">うにょ</div> スタイルシートでこうかけばいい。 .a {background-color:green;} なので、classは同じスタイルシートを適用したいものをまとめるときにつかう。
ジャバスクリプトでidって使うよな。 それと区別するためにとりあえず全部classつかっとけ みたいな感じはだめなんだろうか
247 :
Name_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だと 背景画像が左上にいってしまいます。 何か対策ありますか
PHPでサイト作りをしているのですが、 ページの余白みたいなのどうやってやるのですか? 例: | |内容| | | |内容| | | | | | 外側の線がプラウザです。 こういう風にしたいのです。
| |内容| | | |内容| |
プラウザでわろた
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| 1 | ̄ ̄ ̄ ̄| ̄ ̄ ̄ ̄ ̄| | | | | | | 2 | | | | ̄ ̄ ̄ |  ̄ ̄ ̄ ̄| | | | | | | 3 | | |  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ 1番の部分だけ縦の区切り線が入らないようなテーブルって出来ますか? どなたか記述の仕方ご教授くださいお願いします。
>>243 基本classでアンカー、JavaScript使うときの要素の目印などでidを使うようにしてる
スタイルを適用するときは全部classにしてる
なので1つの要素がidとclassの2つの属性を持つことがしばしば
1回だからidってのはさすがに勘弁してほしい
256 :
Name_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で可能でしょうか?
hspace="20" vspace="10" この要素ってIEだけ?
258 :
Name_Not_Found :2009/04/13(月) 16:52:49 ID:9mcvpO/4
すみませんがちょっとした事を質問させてください .contents > p { height: auto; } の、『 > 』はいったい何を意味しているのでしょうか? 間違いではないようですが、調べても出てきません
↑ うわっ、ごめんなさいね 自分の持ってる本数冊、『css >』とかでググったりしたんですけど、本当に出てこなくて・・・ありがとうございます
口調がちょいと悪かったかもしれん よく考えたら 『>』で検索するのは難しかったかも そこのサイトとか見ながらがんばれ
262 :
256 :2009/04/13(月) 18:12:34 ID:???
上記の質問スレ違いですかね? javascript系の質問スレの方がいいですかね?
263 :
Name_Not_Found :2009/04/13(月) 19:09:13 ID:0qOscc4T
諸先輩がた、教えてください。 先ほどイラストのところで、質問したのですが、WEBの方がいいかなと思いました。 全然高度なことでないらしいのですが、できないことがあります(号泣) WEBサイトを作るのに数年も挫折しています、企業向け、編集者向けへの 暗証番号をかけたサイトの作り方がわかりません。 なにかお勧めの本でもよいので、解決の糸口を教えてください。 しかも、今なさけないことに、フリーターなんです。応募した企業の書類がとおって、 募集が多かったらしく、やっぱり郵送でなく、早くみたいから、サイトに作品を明日までに提出ってもう終わってるかな。サーバーも一応借りています。 空きはたくさんあります。ソフトありませんので、手打ちです。ブログでもいいです。 以前やってみて、むつかしくて、面倒くさくて、ずっと放置していたので反省しています。 春からやり直したいです。神様。
レス番名前にいれるかしないと分からんし長文すぎてry
質問です、どなたか回答くださったらなによりです フレームを使わずに、 左に縦長のflashでメニューを配置して、 その横にさらに横長のflashでメニューを取り入れたいのですがどうしたらよいのでしょうか? □□□□ □ □ □ このように作りたいのです 宜しくお願いいたします
flashメニュー(笑)
Flashメニューは誰もが通る道
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を一通り使える人向けです。そこそこレベル高いです。
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の意味不明な挙動のせいでもう疲れました
メール開いたら件名と本文の欄にあらかじめ項目が記入してあるのがありますが あれはどうやれば良いのでしょうか ------------------ 件名: お問い合わせ ------------------ 本文 名前 住所 質問内容 ------------------ 件名だけなら解るのですが、本文の欄への入れ方が解りません、参考サイトなど ありましたらお願いします。
272 :
271 :2009/04/14(火) 20:34:08 ID:???
解決しました失礼しました。
273 :
Name_Not_Found :2009/04/14(火) 20:50:23 ID:9dIDUco7
すごい初歩的なんですが、画像などの微妙な位置はパディングとマージン指定でいいですか?
274 :
Name_Not_Found :2009/04/14(火) 21:57:40 ID:0mXs7n2o
ホームページにフレームを使ってる。 左側にメニュー、右側に内容。2CHと同じ。 検索エンジンで訪問してきた人が、 右側の内容のページだけが表示されたときに左側のメニューも表示させたい。 どうすればいい?
275 :
Name_Not_Found :2009/04/14(火) 22:18:55 ID:0mXs7n2o
何年か前にJAVASCRIPTかなんかで、やったんだけど、 検索エンジンにスパムとみなされて削除されてしまったんだよね。 なんか、いい方法ないかな。
276 :
ちり紙 :2009/04/15(水) 12:22:10 ID:???
>>274 JavaScriptを使って以下を実装すれば上手く行くと思う
1)子ウィンドが呼出されて開く度にリファラをチェックして、クエリがあるかどうかを確認。
2)クエリ(どんな値でも良い)が存在しないときは、
メニューフレームからのリンクでは無いと判断して、
改めてフレーム付きで開き直す命令を打つ
>274 フレームは今では不便なのであんまりつかわれてない。 フロートを使った2段、3段組みを使ったほうが見るほうに便利だよ
278 :
Name_Not_Found :2009/04/17(金) 02:32:36 ID:rWHgtrSZ
無料レンタルで掲示板を作ろうと思っています。 BBSをいくつかに分けたいのですが、どうすればいいですか? 例えば「料理」というジャンルで「肉料理」「卵料理」と分けて、それぞれにBBSをつけたいのです。 自分でやってみたら「肉料理」に作ったスレッドが「卵料理」にも立ってしまったんですが…
<hr> の noshade って CSS でどう書く?
border
<dl> <dt>---</dt> <dd>---</dd> </dl> なんですけど、ブロック要素が連発しすぎて、 上位コンテンツとの間隔があきすぎて困ってます。 <dl>は省略しても問題ないみたいですが、 文法的にはどうなんでしょうか?
CSS書けばOK
>>283 「XHTML 移行」でググってみると幸せになれるかも
>>285 なるほど!ぐぐってみて
かなり流し読みしましたが、XHTMLでは閉じないといけないみたいですね
ありがとうございました!
>>282 <dl class="--">
<dt class="--">---</dt>
<dd class="--">---</dd>
</dl>
で、マージン触れって事ですね?
サンコスコシスコ。
背景画像に大きめの画像を中寄せで配置して ページ内容の方と繋がったように見せたいのですが ウィンドウの横サイズ?によって背景画像とページ内容の位置が1pxずれてしまう症状ってどうしたら解決しますか?
ソースとかキャプチャした画像とかが欲しいな
お問い合わせフォームにはPHPやCGIが必要不可欠でしょうか? HTMLとCSSのみで製作できるのか教えていただければと思います。
無理。電波で受信できるなら或いは。
有難う御座いました。
リファラチェックしてるんだろ
297 :
神様門前払い :2009/04/22(水) 22:23:59 ID:t3k20CUc
PCやりすぎで背中痛い
HP作ってますが、カウンタはあまり回っていないのに 解析には一杯カウントされてるってどういう事でしょうか。 逆もあって、カウンタは回っていないのに 解析は閑古、って場合もあるんです。ブクマとかの関係でしょうか?
マルチ死ね
301 :
神様門前払い :2009/04/23(木) 22:02:55 ID:u+3tN8GX
>>300 誰だか知らないけどお久しぶりです。ぼくは元気です。
やっと#と.の2種類ある理由がわかった。
303 :
神様門前払い :2009/04/24(金) 00:21:19 ID:QIiapX/K
神様!CSSとHTMLの練習問題出してください 簡単なのからお願いします。 門前払いから見習い位にはなりたい。。。
問題1 図1のような、ヘッダー、サイドバー、コンテンツ、フッターからなるページを作成しなさい。 ただし、[条件]を満たすこと。 [ヘッダー] |サ| コン | |イ.| テン | | ド| ツ .| | | | [フッター] 図1 [条件] tableタグを使用しないこと。 タグのstyle属性を使用しないこと。(ex: <div style="***">) ヘッダー、サイドバー、コンテンツ、フッターの背景色は異なるものにすること。 それぞれの要素左右上下に5px以上の余白を取ること。
305 :
Name_Not_Found :2009/04/24(金) 00:53:41 ID:bAg1iDmV
>>304 携帯からです
問題ありがとです。。。こんな早く出ると思わなかったのでもう布団に入っちゃいました。。。
明日問題説いてみます。。。
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;}
神様こんな感じでしょうか?
左にメニュー右にメインコンテンツな サイトを作りたいのですが、思うように いかず四苦八苦してます。 <div class="menu"> メニュー </div> <div class="main"> メインコンテンツ </div> div.menu {float: left;} だとメニューが終わるとメインコンテンツが 下に回りこんでしまい、 div.menu {float: left;} div.main {float: left;} にすると下に回りこむことはなくなるのですが、 ブラウザの右全体まで使ってくれず、 コンテンツがある部分までの右詰めにしかなりません。 アドバイスお願いします。
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 間違いあったら指摘ください。正解でしたら次の問題お願いします。
定義リストの一項目(dtとddのセット)をまとめたいのですが、 <dl> <div class="row"> <dt>ほげほげ</dt> <dd>ふがふが</dd> </div> </dl> こんな風に書くのはOKでしょうか? dtとddを横並びにして背景やボーダーを設定したいのですが・・・ また、別の書き方があれば教えてください。 よろしくお願いします。
text-align: center; でセンタリングした文字列ですが、 ・コンテンツが一画面に表示しきれて ブラウザのサイドバーが表示されない場合と、 ・コンテンツが一画面に表示しきれず ブラウザのサイドバーが表示される場合とで IE6だとどちらでも同じ位置で FF3だとサイドバーのあるなしで センターの位置が変わってしまいます。 FF3でも常に同じ位置でセンタリングする にはどのようにすればよいでしょうか?
{margin-left: auto; margin-right: auto; text-align: center;}
317 :
神様門前払い :2009/04/25(土) 22:10:22 ID:wr1XxaVm
問題ナスなので次回から門前払いから神様見習いにさせていただきます。
>>312 WinXP+IE6とIE7で見たら思いっきりカラム落ちしてるよw
Fx3だとカラム落ちはしてないけど、ヘッダー・フッターに比べてメイン部分の幅が狭い見た目になってる
動作確認はしたんだよね?
320 :
神様門前払い :2009/04/25(土) 23:58:43 ID:wr1XxaVm
>>318 IE7は大丈夫でした。けどFrとオペラで言われてる状態だったので直します。。。
>>319 これさ、テーブルレイアウトじゃないとダメなん?
あとソース見たけど、変なところにスペース入ってるのは何だろう?
これって、HP作成ソフト使ったのかな?
322 :
318 :2009/04/26(日) 00:08:07 ID:???
>>320 ちなみに自分は出題者ではないので悪しからず><
323 :
319 :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;}
>>324 サイドってそんな綴りだったっけ
side じゃね?
328 :
Name_Not_Found :2009/04/26(日) 03:43:34 ID:itmT6CJW
329 :
Name_Not_Found :2009/04/26(日) 03:55:05 ID:itmT6CJW
330 :
Name_Not_Found :2009/04/26(日) 12:23:58 ID:itmT6CJW
普通にselect並べるだけで出来ますが
何を悩んでいるのかすら理解できんw
そもそもselect2つ並べることに意味なんてあるのか? たとえばselectAで選んだ内容次第で、selectBの内容が変わるとかなら必要かもしれんが…
334 :
Name_Not_Found :2009/04/26(日) 13:52:28 ID:itmT6CJW
並べると下に改行してしまうので困ってます 改行しないで横に並べる方法を教えてください><
<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>がけっこうやっかいだな。
>>319 レイアウトが似てる前略プロフのソースを見て参考にするといいよ
>>335 最初のFORMはボタンも何もないけど何か意味あるの?
>>329 質問の意味がよくわからんがTABLEで囲むだけじゃダメなの?
338 :
Name_Not_Found :2009/04/26(日) 14:10:27 ID:BOWjC6AO
リスト<li>タグについての質問です
ttp://www.dmm.co.jp/mono/ このページの左のメニューのように
リストをコピペできない小さな点「・」にするにはどうしたら良いでしょうか?
ソース見てもよくわかりませんでした…orz
よろしくお願いします。
339 :
Name_Not_Found :2009/04/26(日) 14:38:51 ID:itmT6CJW
340 :
Name_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>
341 :
Name_Not_Found :2009/04/26(日) 14:48:13 ID:itmT6CJW
>>340 あの・・やってみたのですが、形はあってるのですが・・
リンクされなかったですorz
2つ並べる目的がわからん。
>>333 の言ってる内容じゃないとするとデザインだけの問題?
>>335 そもそもformを分けるなら送信ボタンも必要だし並べる意味なし
343 :
342 :2009/04/26(日) 14:52:03 ID:???
要するに目的をはっきりさせてくれ 質問はそれからだw
344 :
Name_Not_Found :2009/04/26(日) 14:55:04 ID:itmT6CJW
>>342 デザインの問題もありますが、リンクの内容が多量で、
何よりもリンクを2分類に分けたい問題がありまして・・
誰か助けてください
345 :
Name_Not_Found :2009/04/26(日) 14:58:53 ID:itmT6CJW
>>343 プルダウンメニューを2個、縦にプルダウンメニューを2個ではなく
横にプルダウンメニューを2個、その横にボタンを設置。
どちらか一つのメニューを選択したのち、ボタンを押すと
リンク先に飛ぶようにしたいです
ひさしぶりの難題だな・・・
>>345 それさー、もし訪問者が両方のプルダウンを選択した上で、ボタンをクリックしたらどういう動作するか考慮してる?
selectの横並び以前にスクリプトエラー起こしまくると思うんだけど
348 :
Name_Not_Found :2009/04/26(日) 15:06:49 ID:itmT6CJW
>>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ろだ
>>349 >
>>324-325 >HTML
>・1回しか使わないからidってのはどうかと思う
> スタイルを充てるための目印なら原則classにするべき
取り敢えずIDの使い方としては合っていると思うのは俺だけ?
IDがふってあるものは、ページ内に一つしかない、そんでもってサイト内で共通使用的な感じだから正解だと思うよ。
>・幅780pxの根拠は何か
>・固定幅じゃなくて可変幅のレイアウトもやってみたら
いいじゃん別にw
無理矢理 悪い所を見つけるなって
見てると、こっちが恥ずかしくなる
351 :
Name_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> これでできました!!
おめ!
tr直下のformはhtml的にダメじゃね?
移動ボタンなんて面倒なだけじゃない?
355 :
Name_Not_Found :2009/04/26(日) 16:03:48 ID:BOWjC6AO
>>338 もよろしくお願いします。
リスト<li>タグについての質問です
ttp://www.dmm.co.jp/mono/ このページの左のメニューのように
リストをコピペできない小さな点「・」にするにはどうしたら良いでしょうか?
ソース見てもよくわかりませんでした…orz
よろしくお願いします。
普通にli{list-style-type: disc;}じゃダメなの? もしくはそれっぽい画像を作って背景に指定するか。
357 :
Name_Not_Found :2009/04/26(日) 17:00:18 ID:v71l/ImU
初心者丸出しですみませんが、CSSを学び始めるにあたってひとつ質問です。 ドコモのサイトが、ほぼCSSだと聞きました。 でもこれって、テーブルでほぼ再現できますよね? CSSを使う事で何か違いやいい事があるんでしょうか…?
358 :
Name_Not_Found :2009/04/26(日) 17:28:18 ID:BOWjC6AO
>>356 >普通にli{list-style-type: disc;}じゃダメなの?
あのページと同じような小さな「・」になりませんでした。
>もしくはそれっぽい画像を作って背景に指定するか。
それはちょっと意味がないので・・・
>>357 テーブルは表を作るものなので、レイアウトに使うものじゃない
なので、構造はhtml(もしくはxhtml)で、デザインはcssで
…というのが、W3Cという機関の考え方なので、みんなそれに副ってる
>>358 小さくしたいのか
じゃあli{list-style-image:url(hoge.gif);}とかで好きな形のマーカーを画像で作っちゃえばいい
361 :
Name_Not_Found :2009/04/26(日) 17:46:40 ID:BOWjC6AO
>>360 ありがとう。でも
できれば画像じゃなくCSSのみで実現したいです。
DMMもCSSのみで画像は使ってないです。
362 :
361 :2009/04/26(日) 17:52:44 ID:???
解決しますたw
誘導できました。 HTMLのリンクから他のローカルのアプリを立ち上げる方法ってありませんか。 メモ帳でテキストを開きたいんですけど。
それなんてセキュリティホール?
やっぱそうなりますよね・・・ 諦めました。
サイトのリンククリックで、txtファイル読み込ませることが可能になればウィルスばら撒き放題だな
368 :
神様門前払い :2009/04/26(日) 22:11:28 ID:rG6I8Oh7
>>349 >・1回しか〜 これはぼくが勉強した本でそうなっている為です。方法は何通りかあるの知ってます。。。
>・なんでh3〜 特に意味ないです。ボックスのタイトルとして書いたためそうしてみただけで深い意味はないですお
>・突っ込み〜 間違っちゃったえへへっ
>・DOCTYPE宣言〜回答するのに宣言は別にいらないかなと。。。余計な記述てどれですか?
>後々面倒だから〜後々面倒になるものなんですか?ぼくはまだ其処までのスキルはありません
>・幅780px〜 可変幅も勉強してみます。。。
>・対象ブラウザ〜 対象はIE、Fr、オペラがいいのかな。。。
>>350 いろんな意見があるのは助かります。やり方も一つだけでないので意見もいろいろかなと
>>349-350 それでぼくは門前払いから見習い位にはなってもよろしいでしょうか?
>>368 向き不向きってあるし、方向転換するなら早いほうがいいと思うよ。
>>368 後は経験だから、ドンドンつくっていくといいよ。
それと、君がした作業は「コーディング」って作業ね
本来コーディングってのは、デザインありきの作業だから、一度デザインからのコーディングも体験すると、いい経験になると思うよ。
372 :
神様門前払い :2009/04/26(日) 23:25:42 ID:rG6I8Oh7
>>369 ドリバの住人ですか?結構楽しいです。
>>371 どんどん作ってみます。。。
まだまだ若輩者ですが次回から神様見習いにさせていきます。
>>359 なるほど・・回答ありがとうございます。
ブラウザによる解釈の違いとか色々大変そうで、アホな自分にちゃんと使いこなせるのか不安だ・・。
374 :
349 :2009/04/27(月) 10:16:23 ID:???
>>350 >いいじゃん別にw
誰も「悪い」とか「駄目だ」なんて言ってないんだけど
悪いと思ったものは「どうかと思う」とか「間違いだ」ってちゃんと書くよ
「なんで780よ」→「(調べてみると)ディスプレイサイズの分布が云々」
となってくれればこれ幸いと思って提起した話
でさらに、「じゃあ可変幅のレイアウトもやってみるか」となれば、
できることの幅が広がるじゃない さくせん「いろいろやろうぜ」だよ
>>368 >それでぼくは門前払いから見習い位にはなってもよろしいでしょうか?
俺が決めることじゃない 好きになさい
横から失礼・・・780云々、それこそ好きになさい
>>372 模擬するなら風俗サイトは勉強になるよ
すごく多種多様の技術が使われている2,3真似たら
殆どのこと出来るようになってるよ
タイトルにつられやって来ました。 初心者どころかまだホームページ入門者なのですが、良ければ答えていただきたいです。 言ってることが多少幼稚かもしれませんが、気にしないでください。 普通、ホームページを作ると文字はウィンドウの端から表示されますよね。 ですが、他の方のホームページを見ていると、いくらか範囲が狭めてあるんです。 全角のスペースを使っているわけでもなさそうですし…。 スペースを使わずに、ウィンドウの端から隙間を開けて文字を表示させるには、どうすればよいのでしょうか。 ちなみに中央寄せなどではないです。
「CSS margin padding」で検索
381 :
>>377 :2009/04/29(水) 12:16:50 ID:???
>>378 ありがとうございます。検索してみました。
多分この検索結果でいいと思います。
>>379 行間指定ではないです。
例えば、
テスト
普通に打つと、ブラウザではこのように表示されますよね。
ではなく、
テスト
と、このように、スペースを使わずに行の最初を移動させたいのです。
分かりにくくてすみません。
>>380 買いたいのは山々なのですが、お金がないので…。
皆さんありがとうございます。
>>378 さんに言ったとおり、検索してみたらそれらしいのは出てきたのですが…。
その出てきたタグを、どこに埋め込めばいいのかが分かりません。
せっかく教えてもらったのにすみませんが、もう少し教えてくれませんか。
>>377 「ホームページ作成 初心者 レイアウト」でggrks
383 :
Name_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と同じになりますよね?
384 :
383 :2009/04/29(水) 18:14:05 ID:???
ごめんなさいwidrh→widthです
ならないケースはいくらでもあるよ。 html位ださんとね、どんだけエスパー求め店高
386 :
383 :2009/04/29(水) 18:31:45 ID:???
>>385 失礼しました、さすがに分かりませんよね
で解決した。全然関係ないとこだった…
何かクリックすると元の画面は残ったままで別のウィンドウ開くのを作成 したいのですが何で検索すれば宜しいのでしょうか? 高さも幅も元のブラウザの半分ほどの別ウィンドウを開きたいのです。
389 :
388です :2009/04/30(木) 05:25:47 ID:???
<p><a href="aiueo.html" target="_blank">新しいウィンドウで表示します</a></p> これだと普通サイズのブラウザが開いてしまいます クリックすると小さいウィンドウが左上とかに出てくるのあるじゃないですか、そういうのを 作成したいのですが、これはJavaScriptになるのでしょうか? 何で検索すればよろしいですか?
392 :
>>377 :2009/05/01(金) 19:41:20 ID:???
>>382 >>387 ありがとうございます。
とりあえず、読んでみるところから始めようと思います。
わざわざすみませんでした。
みなさん何のソフトで素材作ってますか?
yuotubeの動画をホームページに張りたいんですが、特定の動画ではなく、音楽のキーワードの動画を表示させたり、人気の動画を表示させたりしたいんですがどうすればいいんでしょうか?
宣伝乙
自分のブログのページで、プラグイン部分のリンクのとこの、リンク先の方々のタイトルの色を変えたいなと思ってるのですが ここの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>
なんかできたみたいです・・スレ汚しすみません。
質問すると自己解決すること良くありますよね
cssで、上下に配置された2つのボックスの位置を入れ替える方法ってありますか? htmlの記述は変更せず、cssは絶対配置を使わずにやりたいんですけど、 わかる方いましたら教えてください。
htmlいじれよ
パスだけそのままで高さ、幅、色の指定取り替えるじゃダメなの?
403 :
400 :2009/05/03(日) 22:54:41 ID:???
>>401 htmlはとりあえず変更しない方向です。
>>402 すみません、パスってなんのことですか?
<div id=""></div>や<div class=""></div>とか<p class=""></p>のこと htmlコピーして貼りかえればいいと思うけど
405 :
400 :2009/05/04(月) 00:01:05 ID:kWTOycbY
html書き換えるのがやっぱり一番簡単ですよね、、ありがとうございます。
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のボックスが適用されていない気がします。 これを乗り越えればなんとか形になりそうなんですが・・ すいませんがご助言お願いします。
IEでもFirefoxでも殆ど同じように表示されるけど どこがおかしいのか画像でも貼れば分るかも
問題解決できないのに問題を推測して部分的に提示してるのが解せないな。
>>410 エラーを再現できる必要最小限のソースを提示した方がレスはつきやすい。
・質問者が推測で切り取る → 他の箇所が原因だった場合に探すだけ無駄
・長いソースをそのままUP → 長すぎて読む気になれない
>>408 画像しか見てないけどh1にline-height:1em適用させたら?
その箇所間違ってなくても 別の箇所間違ってて影響及ぼすことあるよ まずソースを貼りなさい
415 :
414 :2009/05/04(月) 18:35:13 ID:???
すいません、ブロックイメージの訂正です。 ■■■■■ □△△△△ □△◆○△ □△◇●△ □△△△△ ▲▲▲▲▲
>>414 うーん。
>>406 だけで
>>408 の現象が再現出来る気がいまいちしないかも。試してないけど。
> それにheadpadのボックスが適用されていない気がします。
の部分は、Firefoxでそうなるのは仕様に忠実だから。直前の#headへの指定で閉じ括弧 } が一つ余分のようだ。試してないけど。
417 :
Name_Not_Found :2009/05/04(月) 19:55:37 ID:Am/iiCih
俺、
>>406 をやったけど普通にはみでなかったよ。
全要素に仮のボーダー表示させてやってみたら。
IE7とクロム上で問題発生を確認、line-heightを消したら直った。 最初のソースではline-heightないから起こらないんじゃないかな。 手元の本によると、line-height で指定される em、ex、% は親要素のフォントサイズを基準に設定されるらしい。 今回の場合、h1にかかるline-heightの140%は親のdivのフォントサイズが参照されている。 そんな訳で lineHeight > fontSize という状況になり、 h1の行の高さが負の値となってボックスからはみ出たものと思われる。 解決方法: 自身のフォントサイズを基準にするならばline-height:1.4と数字のみにすればよい。 IE&クロム「行ボックスの高さが要素の高さ。負のマージンみたいなもんだろ」 Fx「行ボックスの高さと要素の高さは違う。はみ出ないはみ出ない」 分かりにくい挙動だけどFxのほうが特殊なような。詳しい人訂正よろしく。
6行目の大なりは小なりに脳内変換してください ><;;
なんだよ、質問者の嘘報告かよ
>>418 の言うようにline-heightが原因だとすると、親要素のフォントサイズを基準うんぬんというより、算出値の継承が問題の本質かと。
あとexやemの説明が少し変な気も。
ついでに
>>412 でも一定の解決するはずでは?とか思ったり。
422 :
414 :2009/05/04(月) 21:49:10 ID:???
>>416-417 わかりにくくてすいません、
独学でやったのでところどころ間違ってるかもしれません。
ちなみに#headの閉じ括弧はコピペミスでした、申し訳ない。
>>418 できた!できました!ありがとうございます!
ちょっと説明頂いてることは微妙に理解できてるか自身がないんですが、
これからまた調べてみようと思います。
おかげさまで就活用サイトが作れそうです、
皆様本当にありがとうございました!
>>421 実に継承の問題ですね。
生半可な知識で書き込んだ結果がこのありさまだよ!
>>418 >line-height で指定される em、ex、% は親要素のフォントサイズを基準に設定されるらしい
違う、例えば
font-size:2em;
が適用されている要素に
line-height:1em;
を適用させたらfont-size:2em;が1emのサイズとして上書きされる
ややこしい事は知らんが、とりあえず line-heghtには単位は付けず font-sizeはパーセントでやってる 別に不自由した事ないお
426 :
Name_Not_Found :2009/05/05(火) 08:00:03 ID:6fSGbsfz
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
428 :
Name_Not_Found :2009/05/05(火) 13:45:54 ID:T+M1o/ZM
1回見たらクッキーに記録されて別ページ(2回目以降は見れませんなど)が表示される ようにするスクリプトの書き方を知っている方いませんか?
>>428 ここはHTML/CSSのスレなんで、そういうのはプログラム関連の板やスレで聞いたほうがいいんでないかな?
430 :
Name_Not_Found :2009/05/05(火) 14:18:25 ID:ZeOSd1Dk
HTML&CSSで書き始めて早半年・・・ それは各ブラウザとの戦いの日々でございました。 そして、ようやく完成!したかに思えたのですが、 ページを印刷するとメッチャくずれています・・・ガーン・・・ もちろん印刷プレビューでも崩れています。 なんでだぁぁああーー!! やり直せってかぁぁああ!!! 誰かこのクソ子羊に愛の説教をおねがいします。
>>427 line-heightは単位なしと%は同じだぜ
相対単位emは親要素に対しての単位だぜ
432 :
Name_Not_Found :2009/05/05(火) 15:05:05 ID:zLI8EBjK
>>431 > line-heightは単位なしと%は同じだぜ
それは間違いです。単位なし(実数値)であればその指定値が継承されます。
一方、パーセント値であれば計算値が継承されます。
> 相対単位emは親要素に対しての単位だぜ
それも間違いです。単位emは、適用される要素のフォントサイズが基準です。
ただしfont-size特性の値として現れる単位emの長さのみ例外で、それは親要素のフォントサイズが基準になります。
>>431 はスレを遡ってROMってきたほうがいいな。
>>433 に横からいちお補足しとくと、単位ありでも単位なしでも、継承されるのはどちらも算出値だよ。単位なしの場合の算出値が指定値になってるってだけ。
436 :
433 :2009/05/05(火) 20:00:55 ID:???
437 :
Name_Not_Found :2009/05/06(水) 07:17:28 ID:vux9nA4u
>>435 算出値、指定値が同じ?
算出値は〜px、指定値は1など実数。
どうやったら一緒になるんだ?
教えて下さい。 例えば、 <div class="form1" id="FORM1"> <div class="display" id="DISPLAY"/> で、"/"を付けているタグと、付けていないタグがありますが、"/"は、付けておいた方が良いという扱いなのでしょうか? それとも、意味があるのでしょうか?
439 :
Name_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では、継承されるのは必ず算出値のようです。
で、各特性ごとに、算出値がどうなるかが仕様書で説明されています。
440 :
Name_Not_Found :2009/05/06(水) 15:39:46 ID:ORvNKpQH
みんなー!きいてくれよー! 俺さー! タグ打ちやCSS向いてねー! だって、すぐ崩れるんだもんよーー! 段組だけでCSSで定義して、あと中身はビルダーでつくるよーに、 戻したら、作業がはかどうるようになったさー! 困ってる奴らよー! 諦めるのも、手かもしれねーぜー! 頑張ったつもりの負け犬三太郎より
算出値、指定値が同じの時の具体例を教えてください。
>>438 <tag></tag>と<tag />は等価
1という算出値からブラウザがサイズを読み取れますか?
仕様書よめばおk
446 :
Name_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% ←という指定はどのような意味があるのでしょうか?
初歩っぽい質問でごめんなさい。
>>446 位置を示してる
正直その背景なら、省略してもいいと思う
質問させていただきます。
ヘッダーをページの最上部に、フッダーを最下部に固定したいのですが
うまくいきません。
参照していたサイトのサンプルは
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/ このような感じに・・・。
この隙間を埋めるにはどうしたらいいか教えて頂きたいです。
>>448 外部CSSも見た?
まぁ見てなくても、とりあえずbodyや各divにmargin:0;を設定すると隙間が消えるよ
その外部cssファイルがstyleタグでくくられて全体が無効になっていた。削ったら目的の形になったよ。 外部ファイルにはタグは必要ない。今度はメニューがはみ出たけどまあそれは別の話。
>>449 できました!!
有難うございます!
もう少し勉強します。。
>>447 有難うございます。
Firebugで50%の指定を消してみたら、表示が崩れたので必要なようです。
質問です。VISTA IE7の印刷プレビューが強制終了されてしまう状態に頭を抱えています。 CSSやHTMLの影響でなったりするのでしょうか? お願いします。
しろよ
したらいい。
装飾用のアイコン画像をCSSスプライトで埋め込みたいんですが、 <div id="icon"></div>でやれば出来ますが、validにならず、 <div id="icon" />ではdivのwidthやheightが適応されずうまくいきません。 valid にしつつ成功させるには 以下の要素をCSSで下にずらせばいいと思うのですが 他にいい方法はあるでしょうか。
全体の構造がはっきりしないので何とも言い難いけど、 div#icon span {display:none;} <div id="icon"><span>内容</span></div> で目的のブツになると予想。試してないけど。 divは、というか開始と終了タグを使う要素は内容が必須なので、<hoge></hoge>だと合格しない。 同様に<hoge />は置換要素などの内容が空の要素でしか使えない。どっちでも良いのってあったっけ?
459 :
Name_Not_Found :2009/05/07(木) 23:53:20 ID:bdEbGB94
セルに個別枠を付けるために「border: solid 5px」等で書いたんだけど、 Firefoxやマックでは問題ないが、winのIEだと枠内の下部に隙間が出来てしまう。 正確には、白縁画像のように表示してるのに下部に背景色の隙間ができてしまう。。 宣言を変えるとマックでは隙間が出来たり消えたりしてるんだけど、winだとなぜか治らない。。 4.01でもダメです。 どこか改善するところありますでしょうか?
>>457 そもそもなぜID使ってんだよ。
classだと思
461 :
神様見習い :2009/05/08(金) 05:51:35 ID:aDLR0Ajn
みなさんおはようございます。。。 HTML/CSSのスキルアップさせるにはどんなHPを 真似して創ったらいいですか? みなさんはどんなの真似されましたか?
>>461 自分は簡単な企業サイトを模写しまくって、パーツのグラデーションとかシャドウの
かけ方、レイアウト等の基本を重点的に学んだよ。
凝ったサイトは真似るのがしんどいので見るだけ。
すいません 文字にリンクを貼ってそれにhoverでマウスをのせると 背景色が変わるようにしています この際にリンク文字をdisplay:block;でブロック要素にして います ブロック要素内の文字を縦方向に中央にしたいのですが不可能でしょうか? IEだとなぜかブロック内で中央にすでになっているのですがFirefoxだと ブロック内で上に配置されています FFでも中央に配置したいのですが
Fxで間違ってるなら根本的に間違ってる
467 :
459 :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だけセル内の下に余白、すき間ができてしまいます。。 どこを直せばよいでしょうか?
>>465 line-heightを高さと同じだけ設定
>>465 468の方法か、aの上下paddingで調節。
>>467 <td><img /></td>という形でimgの下とボーダーまでの間に空白がある、と読んだ。
tdでなくimgにボーダーつけるか、tdにbackground-color:whiteを指定する。
インライン要素に上下の密着は期待しないほうがいい。
>>466 その略し方は初めて見た。
株の話かとおもた
初めてというか公式で奨励してるし・・・
FirefoxはFxだろjk
>>468 たまたま同じこと悩んでた。
465じゃないけど、ありがとうございます。
>>458 その方法だとスタイルシート切った時に
ちょっとカッコ悪くなると思うので
やめときます。でもありがとうございました。
>>460 色々と事情がw
475 :
神様見習い :2009/05/09(土) 03:23:53 ID:5mMvekC6
>>462 お気に入りに入れときます。。。
>>463 んん悩む。。。おすすめありますか?
>>464 このサイト模写してみなさいってなんかください。。。
>>462-464 どなたか風俗サイト模写するといいよとおっしゃってましたが、どうなんでしょ
あとですね模写する段階で素材必要になると思うんですが、みなさんは
それは模写するサイトの素材コピって使ってますか?
素材コピるというのは自分で全部創ったことにならないし、自分が創る時に欲しい素材
創らないといけない時もあると思うのですが
みなさんどうしてますか?
476 :
Name_Not_Found :2009/05/09(土) 03:55:58 ID:mdv5fJO2
477 :
467 :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では下枠が消えてしまいました。。
画像が枠下まではみ出たのではなく、枠の下がないコの時状態です。。
479 :
467 :2009/05/09(土) 09:28:28 ID:JMOuLscJ
自己レスです。 <td bgcolor="white" style="border: solid 2px white" align="center" valign="bottom"> この書き方だとIE、Firefoxともにオッケーでしたが書き方あってますでしょうか? これってCSSとhtmlタグの混合って感じなんでしょうか?
480 :
467 :2009/05/09(土) 10:25:20 ID:JMOuLscJ
板汚し。。済みませんでした。 セルサイズ指定なし、中の画像にピクセル指定していたのを、 セルサイズ指定して画像に縦横100%指定したら余白消えました。
481 :
Name_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">は無視されました。
482 :
Name_Not_Found :2009/05/09(土) 10:49:13 ID:uHWowr1g
cellpaddiogとか見落としてないか? つうかテーブル必要なん? それわ表なん?
>481 <a href="XXX.jpg" style="color:〜">ダウンロードはこちら。</a>
>>481 できる。あなたはまずCSSの基礎を学んだ方がいい。
485 :
Name_Not_Found :2009/05/09(土) 14:41:07 ID:wbW4999y
メモ帳とかでhp作ってる人は何百ページも一から打ってるんですか? 更新するたびあげなおすんですか?
>>485 何百もあったら、メモ帳なんてつかわねぇよw
>>476 上tdに height か max-height を指定する。css的にはそれ位しか思い付かない。
javascriptだとoffHeightとかで要素の高さが取得出来るようなのでがんばれ。
>>481 a.hoge {color:olive;}
<a class="hoge" href=""></a>
色を変えたくなったときに全てのfontタグを探して変更する手間の無駄を省きたいなら、
cssのセレクタとclassについてググってみるといい。
489 :
476 :2009/05/09(土) 18:19:41 ID:???
490 :
Name_Not_Found :2009/05/10(日) 07:35:17 ID:jn/DsPKJ
フォルダの中身をリスト&リンク化するには?
Options Indexes
>>490 サーバサイドで何らかの言語が使えるなら出来る
まずFirefoxを基準にしてサイトを作れ そしてIEは個別に対応する 基本
>>494 あ、そうなんですね!
やってみます。
ありがとうございます!
496 :
Name_Not_Found :2009/05/11(月) 01:54:25 ID:fc10rdHK
おしえてください。 なるべくHTMLの文法的にきれいな形で、ブロック要素をインラインに並べる方法はないでしょうか。 画面の幅いっぱいにある一定の幅のブロックを並べたいです。 ┌────┐ |□□□□| |□□□□| |□□… | こうです。<img>だったら、<img>を並べればいいだけなんですが。
>>496 display:inline-block;
498 :
496 :2009/05/11(月) 02:26:48 ID:???
おお!…と思ったんですが未対応ブラウザが多い様子? ちょっと調べてみます。ありがとうございます!
各ブロックの高さが固定なら float: left; でもいいかと
高さバラバラでfloat使うと変に引っかかるから
>>497 の方法
普通に並べれば勝手に改行されるだろ
普通にって何さ
502 :
神様見習い :2009/05/13(水) 03:41:49 ID:bFZq65nE
ぼくは、いまドリバCS4の勉強してます。
>>501 □のclassにfloat: left;をつければいいだけだろ。
ってことじゃない?
そもそもインライン要素の中にブロック要素を入れるって時点でhtml的におかしいような。
htmlのリンクからExplorerやFinderのフォルダを開く方法ってありますか? 普通にフォルダにリンクを張るとブラウザ内にフォルダのパス(?)が表示されるだけですよね?
テラパッドってエディタですよね 文字化けってエンコードの類のことでなくて?
>>496 が並べようとしてるのはブロックレベル要素だろ
「インラインに並べる」は「インライン要素であるかのように並べる」ってことじゃね
>>505 >ローカルのフォルダとかはパスを a タグでリンク張れば
>IEで開ける。他のブラウザはたぶん無理かと
ありがとうございます。
ただ、IE等のブラウザではなくフォルダを直に開く方法があればと思いまして。
>>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;}
511 :
Name_Not_Found :2009/05/13(水) 14:00:22 ID:OgcZBde+
a herfのURLの?以降にスラッシュが入った文字を入れて、 サーバ側でデータ列として取得したいのですが、 どのように渡すべきでしょうか?
$GET[""];
513 :
Name_Not_Found :2009/05/14(木) 06:18:46 ID:RR4JF3l/
質問です。 CSSで横幅の最小サイズと最大サイズを指定したい。 min-widthとmax-widthを使わずに実現するにはどうしたら良いでしょうか?
width:-moz-min-content; でおk
513とは別の人です。
>>514 それってFxだけの機能じゃないんですか?
そうですFirefoxだけの機能です min-width以外にはこれぐらいしかないから仕方ない
517 :
513 :2009/05/14(木) 18:20:56 ID:RR4JF3l/
>>516 レスありがとうございます。勉強になりました。
520 :
Name_Not_Found :2009/05/14(木) 20:13:39 ID:e5VT5uY0
>>511 javascriptで/を適当な文字の組み合わせに変換。
サーバ側で元に戻す。
w
522 :
Name_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>
>>522 テーブルバックグラウンドグレー
ティーディーマージンイチ
>>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;
}
共通する物はまとめような
いいだしっぺがやろうな
まとめ過ぎると汎用性がなくなるよ
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じゃないときテーブルの両脇のボーダーが 設定したピクセルの半分の値になるからいやだ
俺的には table{} td{} th{} って分けないと気持ち悪い。プロパティは被っても絶対分けたい
530 :
Name_Not_Found :2009/05/17(日) 14:40:06 ID:aLM3ccYV
HTMLで「ボタン」を押下したとき テキストボックスの内容を変更したいのですが・・・書き方が分りません 教えて下さい 仕様 1.テキストボックスの内容が「abc」のとき、ボタン押下で「xyz」に変更 2.テキストボックスの内容が「xyz」のとき、ボタン押下で「abc」に変更
>>530 HTMLだけでは不可能
Javascriptが必要
532 :
Name_Not_Found :2009/05/17(日) 15:46:08 ID:aLM3ccYV
>>531 ありがとうございました
JavaScriptのスレで質問します
533 :
Name_Not_Found :2009/05/17(日) 19:00:29 ID:Z8+S+Lcd
括りが'のとき、'が含まれるファイルへのリンクってどうすればいいのでしょう? <a href='in'dex.html'> だと当然inで切れてしまうのですが、なんかありませんかね? そんなファイル名にするなってのは重々承知
|)っ' or ' ファイル名のシングルクオートをこれに置き換えて我慢するが良い。 &キーワード; の形はないみたい。 ファイル名よりも、何故括るのにシングルクオートなのかの方が気になる。
考えてみると2chもhtmlよね・・orz 訂正版:&#39; or &#x27;
536 :
Name_Not_Found :2009/05/17(日) 19:52:41 ID:Z8+S+Lcd
SEO対策に高価のあるタグってありますか
そんなタグあるわけ無いだろwばかじゃねーのw
metaでキーワードいれるとかじゃないの?
metaにキーワードとか間違ったSEOが普通に行われてるのが今のWeb
>>539 意味が無い, そういう容易にごまかしが効くものを検索エンジンはほとんど信用しない
そもそもSEOなんて、山ほどハウツー本やセミナーがあって 結構な金を取ってSEO対策を代行する業者までいるわけで みんな金を払ったり、必死で対策方法学んだりしてるのに 掲示板で簡単に教えてもらえるわけ無いだろ
543 :
522 :2009/05/18(月) 11:53:44 ID:???
すいません、あの・・・ 自己解決しました 閉じタグの</tr>を<tr>と書いてたのが原因でした
544 :
Name_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を入れるようなイメージで問題ないでしょうか?
>>544 てっとり早いのはインラインフレームじゃないかな?
フレームを使いたくないなら、掲示板のデザインをHTMLサイトのデザインに似せるしかないと思う
「埋め込む」のは、ビルダー使ってる初心者にはおすすめしない
インラインフレームwwwwwwwwwwwwwwwwwwwwwwwwwwwww
547 :
544 :2009/05/18(月) 13:34:16 ID:???
>>545 レスどうもです。
インラインフレームという手もありましたね。
ただこれは最終手段としたいので、やはり掲示板を元のデザインに合わせる
方法になりますかね・・・
ふと思ったんですが、今回のように元のレイアウト(CSS)があって、
その中の一部のコンテンツ(
>>544 のメインコンテンツ)は更に別のCSSを
参照させるようなことはできるんでしょうか?
>>547 1つのHTMLファイルに、複数のCSSファイルを呼び出すことはできる
詳細についてはググったら出てくると思うよ
>>548 どもです!
ちょっと調べてみまっす(`・ω・´)
HP制作初心者です。 リストタグでリンクを作ってるのですが IE7で頻繁にリンクが何箇所か表示されません。 マウスを乗せると通常通り現れてきます。 ちなみにfirefoxやsafariではいまのところ問題ないです。 htmlタグの書き方がダメなんでしょうか?
とりあえずリストタグでリンクを表示する箇所のソースを載せたまえ
.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;}
一貫性と保守性もないきたねえコードだな
ごめんなさい間違えて書き込みしてしまいました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> わからないことどんどんやったせいでダメな感じになってるきがします おくれましたがお返事ありがとうございます!!!
なるほど!やっぱりその辺が問題なのですね とりあえずきれいにしてみます! ありがとうございます!
マジレスすると無駄にclassやら使い過ぎなんだよね
>>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{ ... }
できました! #menu li{ list-style-type: none; float: left; } にしてほかのとこをおんなじに揃えたら平気になりました! classは無駄に使ってしまうので気をつけます お騒がせしました
うわあああそういうこと やっとわかりました! <li>リンク</li>でクラスいらないんですね! 直します!ありです!!
マジレスするとfloatはどこまで続くんだ
>>560 clearfixつけりゃぁいいんじゃね?
clear bothだろ
564 :
神様見習い :2009/05/19(火) 17:05:08 ID:lSfuuKBU
ぼくは元気です!
元気が一番ですね!
そんな君たちをfloatしちゃうぞ☆
表について質問です
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>
こうすると空白ができず長細い表になってしまいます。
どうすれば上の写真のような空白がある表ができますか?ご教授よろしくお願いします。
初歩的な質問ですみません text-indentは行の何を指定するのに使うのですか?
ググりました?
573 :
Name_Not_Found :2009/05/20(水) 11:48:28 ID:vNI1VSTY
グリグリ
574 :
神様見習い :2009/05/20(水) 11:50:40 ID:nm2sQsyH
575 :
Name_Not_Found :2009/05/21(木) 15:53:20 ID:MrIupW8h
あげ
質問です <!-- 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のマージンを 入れるにはどうすればいいでしょうか?
padding-top:35px
578 :
576 :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のマージンを入れるにはどうすればいいでしょうか?
marinとpaddingを0にリセットしてから
>>577
580 :
578 :2009/05/21(木) 16:27:25 ID:???
581 :
578 :2009/05/21(木) 16:28:35 ID:???
>>579 ありがとう!おかげで解決できました!
職場からアクセスでした
Emacsでスタイルシートを作る練習をしていたのですが ゛font-family:〜゛を入力したら 一番下に゛〜coding゛(中途半端ですいません)と表示されて動作しませんでした。 これは文字コードが間違っているのでしょうか? 因みに直前で背景色はスタイルシートで変更出来ました。
583 :
Name_Not_Found :2009/05/21(木) 23:04:12 ID:mtkm6KEh
ソース嫁
>>582 特定ソフトの操作について、このスレできいても誰も答えないと思う
他の板やスレをあたったほうがいい
>>583 「ツリー階層メニュー」で探すといい
当方文章書きです 自分は等幅フォントが好きなんですが MS ゴシックは英数字が非常にダサいんです そこで質問なんですが、 CSSで毎回英数字だけフォントを変える事は可能ですか? divとかで指定して毎回英数字を囲むしかないんでしょうか…
587 :
Name_Not_Found :2009/05/23(土) 03:05:35 ID:s/86WYry
age
他人が見る物に勝手にフォント指定しないでください
589 :
586 :2009/05/23(土) 15:59:00 ID:s/86WYry
>>588 サイズならともかくフォントは構わないと思うのですが…
JavaScriptの正規表現で置換するしか方法がないな
ここでいいのかわからないんですが すみません質問させて下さい メモ帳にタグ直打ちでHTMLファイルを作成して サイトを運営しているのですが、Windows Updateした結果 これまでのように右クリックでソースを表示しても 中身をいじれなくなりました IEは8,0で表示しています ソースの書きかえはどうしたらいいのでしょうか? どうか教えて下さい
メモ帳でHTMLファイルを開けば良い
>592 ありがとうございました 助かりました
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;するやり方は間違っていますか?
ソースはってくれ。
>>594 文章で説明されると読むのが面倒
ソースをそのまま貼ってくれるか
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も 他のと同じように表示された
ちなみに
>>597 だと最後の親に入ってるfloatが直らないままなので
<div 親><子1><子2></div>
<div 親><子1><子2></div>
・・・
<div 親><子1><子2></div>
<div 次のブロック></div>
- - - - -
div.次のブロック{clear :left;}
これは最初からやってて
その上で一番下の線が.>597のような症状になりました
> 一番下のborder-bottomだけすべての最上部に表示される 意味不 すべての最上部ってどこのことよ?
<div 前のブロック> ←一番下のborder-bottomだけこの部分に来る <div 親><子1><子2></div> <div 親><子1><子2></div> ・・・ <div 親><子1><子2></div> <div 親><子1><子2></div> <div 次のブロック> 一番下以外のborder-bottomは各ブロックの下部分にちゃんと表示されました
ごめんなさい自己解決しました × div.親 { clear:left; border-bottom:1px } ○ div.親 { float:left; border-bottom:1px } こうするみたいですね スレ汚しごめんなさい
602 :
Name_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;のような感じで表示されてしまいます 何か指定が間違っているのでしょうか?
bodyにheightを指定してみたかい?
604 :
602 :2009/05/24(日) 17:56:47 ID:???
>603 ご指摘の通りにしたところ、とりあえず隙間をあけることはできました。 ありがとうございます。 追加で質問になってしまうのですが、 コンテンツの高さを可変にしたい場合はどうすれば良いのでしょうか? bodyのheightを100%にしたらIEでは縦方向のスクロールバーが出てしまい、firefoxでは上部に隙間があきません。
携帯で画像をランダム表示したいのですが どのようなスクリプトが使えるのでしょうか?
>>604 autoやheightについて調べるといいんじゃないかな。
やりたいことを再整理して発想を変えるのが良さそうかな。
>>605 スレちがいのようだ。
>606 遅くなってすみません 少しいろいろ調べてきます ありがとうございました
613 :
Name_Not_Found :2009/05/24(日) 23:27:39 ID:EQGbF6xt
ホームページを初めてつくります! どうする?
まずは深呼吸ですね できれば複式呼吸がいいですよ
616 :
613 :2009/05/25(月) 01:18:09 ID:D4Aa9WDz
何卒よろしくお願い申し上げます。
検索してもわからないんで誰か助けてください IE7でテキストボックスにフォーカスを当てた時に、入力位置を表すカーソル(マウスカーソルではなく、|で表示される方)を、キーの上書きモードと挿入モード(INSキーで切り替わる奴)によって変更したいのですが、CSSやjavascriptで可能なのでしょうか? 上書きモードの時は点滅する縦長の長方形、挿入モードの時は|にしたいのです
618 :
Name_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>
619 :
Name_Not_Found :2009/05/26(火) 21:56:01 ID:OeO5XD+i
>>613 * {
display: none;
}
620 :
Name_Not_Found :2009/05/28(木) 11:23:26 ID:nrjjoVui
CSSを一切使わずに、tableのtdのbackground="img"を繰り返さない方法って存在しませんかね?
622 :
神様見習い :2009/05/28(木) 22:47:00 ID:JeaJDj0z
みなさん元気ですか?ぼくは元気です。。。 最近スキル向上サボリ気味ですが。。。
623 :
Name_Not_Found :2009/05/29(金) 07:37:35 ID:eAZD/j6l
質問します 【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} ↑ こんな感じにしてもダメでした。。_| ̄|○
625 :
624 :2009/05/29(金) 11:35:07 ID:???
今ググってます。。
#s h2,#s h3
627 :
624 :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的にスパム扱いになるでしょうか?
629 :
Name_Not_Found :2009/05/29(金) 23:23:05 ID:gcwxawkv
position:fixedについてなんですが webで調べるとIE6は未対応という記述をよく見かけるんですが IE7やIE8でも対応できていないような気がするんですが違いますか?
>>629 たった今IE7で試したけれど、ちゃんと対応してたよ
ちゃんとDOCTYPE宣言してる?
ヒント: top、left 親要素のposition
632 :
629 :2009/05/29(金) 23:56:57 ID:???
>>630 あ、続けて質問しようとしてたんですが
IE6でもfixedを適用する方法を調べたところ
どれもDOCTYPE宣言が前提になっていたんですが
DOCTYPE宣言なしでIEに適用する方法はないんでしょうか。
633 :
Name_Not_Found :2009/05/30(土) 00:35:22 ID:YqMGfWEE
ezHTMLというHTMLエディタを使っていてすごく使いやすいものでした。 ezHTMLでは <b ←このように打ち始めると勝手に <background></background> や <border></border>などのような物を推測して選択画面のようなものに表示してくれる 機能があります。 非常に便利なのですが、手打ちの練習をしたいときに邪魔になってしまいます。 この機能を一時的に無効化することは出来ないのでしょうか? メモ帳を使えば良いのですが、ezHTMLには他にも魅力的な機能があるのでどうしても・・・
ヘルプを読んでみたらどうだろう?
オンラインマニュアルは見たのですがヘルプは見てませんでした 解決しましたありがとうございます ヘルプってこんなに役に立つんだw
636 :
Name_Not_Found :2009/05/30(土) 13:10:16 ID:oGv7m5+R
トップページの一部に文章を書き、その部分が数日経てばor文章が数本溜まれば、 過去ログとしてその部分が「○日の更新」として別のページに自動的に溜まって行くという 簡単なブログのようなシステムを作りたいのですが、可能でしょうか ブログサイトのソースを見ても分からず、何とググればいいのか分からず困っています まさに手も足も出ない状態で・・・よろしくお願いします
ブログソフトウエアでも使えや
HTMLじゃ_
639 :
Name_Not_Found :2009/05/30(土) 16:01:56 ID:oGv7m5+R
>>637 そうするとページ全体がブログになってしまいます
htmlの一部分だけ、それもデザインは無地のままで組み込めないでしょうか
>>638 何だったらできますか
誘導お願いします
>>639 習得が楽なのはPHP
何か一つでも言語を使えるなら使えるだろう
>>639 ブログソフトウエアを使ってもカスタマイズを徹底してやればブログ臭は消せる
システムだけブログのを利用して外観は普通のサイトに見せれば良い
642 :
Name_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>
CSS
>>642 枠非表示のtableで
<table>
<tr>
<th>A</th><td>Text Text Text</td>
</tr>
</table>
あるいは、compact属性を使って <dl compact="compact"> <dt>A</dt> <dd>Text Text Text</dd> </dl>
646 :
Name_Not_Found :2009/05/31(日) 00:39:45 ID:HsXGnEtF
<A>タグにstyle=で直接指定する際に、 a:link { color: …; } a:visited { color: …; } の擬似クラス?はどのように記述したらいいのでしょうか?
>>642 >>645 compactは非推奨属性だからねぇ…
<dl>を使うことを諦めて
>>644 のように<table>で代用するのが手っ取り早いかと
>>646 style=…で、擬似クラスに関する指定をするのは無理だと思う
面倒でもidなりclassなりを指定して、<head>内か外部ファイルに書くのが吉
>>646 タグにstyle属性として値を入れるとタグ名{〜;}と同等になるから無理
649 :
646 :2009/05/31(日) 01:10:20 ID:???
>>647 ,648
有難うございます。
別途定義するようにします。
650 :
Name_Not_Found :2009/05/31(日) 01:37:42 ID:qv2h0xFz
複数のページの同じ部分を、JavaScriptやほかのプログラムを使って一度に変更することは可能ですか? 私の個人サイトのコンテンツの全てのページに更新履歴を載せているのですが、 20ページ以上にわたり、毎回全てに更新内容を書き加えるのが大変です。 更新履歴の部分に何かソースを埋めておき、外部のファイルを更新するだけで 全てのページの更新履歴が更新されるようなことができれば・・・と妄想していたのですが、 私の知識ではまったくわからないのでどうかご教授ください。
スレタイぐらい嫁よカス inline frameでもつかっとけ
>>651 まぁまぁ、「優しく」スレだからw
>>650 とりあえず、スレタイにあるhtmlとcssだけでやろうと思うなら、
>>651 の言うとおりインラインフレームで可能です。
フレームを使いたくないのであれば……
20ページ程度であれば、置換ツールを使うというのも手かなーと思います。
そうでなければ、phpなら全てのページに同じ内容を挿入することが可能です。
653 :
Name_Not_Found :2009/05/31(日) 02:03:06 ID:qv2h0xFz
654 :
642 :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;
}
とやってみてるんですけど、もっといい方法がないでしょうか。
>>654 dt {
float: left;
width: 5em;
}
dd {
margin-left: 5em;
}
dt-ddをテーブルぽく見せるのは限度があるから、こだわると結局テーブル使うことになるかもね。
上の方法、OperaとNetscapeだと拡大縮小すると枠線が消えたりカラム落ちしたりすることがあります。
その場合、paddingのtopかbottomをちょっと広げればたぶん直ります。
inline-blockつかえばいいだろ
inline-blockでやるのは無理があるだろ
658 :
Name_Not_Found :2009/05/31(日) 18:21:12 ID:QmNOnyEW
>>654 CSSに拘る必要は無いと思うよ
基本的にソースを気にしてサイト見るのはサイトの製作者だけなので
hnにinline-blockでfloatしたらいかんの? 素人意見な上それでどう動くのか分からんけど
!omikuji
教えてください! ゼロからhtml cssを勉強するのに お勧めの本はありますか?? たくさんありすぎてどれが良いのかわからないです×
Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則 Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則 みるみるマスター HTML&スタイルシート 作れる!わたしのWebサイト 異論は認める
>>662 本を買う必要はないと思うよ。htmlやcssを扱った本は高価なものが多く、高い
お金を出して買ったのに、本の中身が期待はずれだったらショックが大きい
からね。
Googleブック検索を利用して勉強するのが賢い方法だと思う。google bookなら、
htmlやcssについて書かれたかなりの数の本を無料で閲覧できるからね。
スタイルシートに関する質問です。 ぜひアドバイスをいただきたいのですが…。 divの横幅から文字列がはみ出したとき、その末端に..を付けることは可能でしょうか? -------- div { width: 5em; overflow: hidden; } <div> あいうえおかきくけこ </div> -------- これ出力は、 「あいうえお」 こうなりますが、 「あいうえお..」 このように表示させたいということです。 どうぞ、よろしくお願いします。
>>665 ブック検索みて内容が良かったら買うけどね
紙の本は見やすいという事実は変わらない
>663.664.665.667 ありがとーございます! とりあえずサイトを見て わからなかったらブック検索みて 良かったら買ってみます!!
サイト見ながらでいいと思うがね
サイトで検索すればだいたいの事は解決できる、けれど サイトだと中々1〜10まで順序良く教えてくれるサイト無いよ あと知りたいこと探すにも専門用語的なキーワードも知らないだろうし 掲示板で質問スレたくさんたってるでしょ、サイトでピンポイントに知りたいことスグ探せるなら こんなにスレたってないよ 本いらずでサイトでOKはある程度知識ある人には良いけど、初めからの人は覚えるまでに遠回りになると思う
俺は本なんて買わずに全部具具って調べたけど、まあ手っ取り早いのは指南書にそってやることだろうな。
672 :
Name_Not_Found :2009/06/02(火) 22:40:45 ID:xRiB/4Jk
>>666 overflow:hidden; で隠して
after か別の<p>で後ろに .. を加えるのはどうでしょう
>>672 それだと「文字列がはみだすとき」だけにはならないのでは?
>>666 の内容は、CSSだけでは難しそうだ
有名かもしれないんですが見当たらないので質問します。
dlタグを使った場合の表示位置が
Firefox3、IE7、8、Safari3などでは正常に表示されるのですが
IE6ではこれらと比べると開始位置が僅かに(1〜2px)間隔が広く
何度も繰り返し使っているため全体ではかなりズレてしまいます。
FF3等と同じ表示にしたいのですが解決方法を教えてください
一応
>>9 のようなCSSリセットは行っています
676 :
675 :2009/06/03(水) 04:02:01 ID:???
IE7ではIE6と同様の表示でした 失礼しました
677 :
Name_Not_Found :2009/06/03(水) 08:51:05 ID:NSEPda//
CSSで質問なんですが 例えば#naviの中のliだけ定義する場合 #navi li{ プロパティ } という書き方は一般的に使われていますか?
>>677 何を持って一般的かは解りませんが使われてます
679 :
Name_Not_Found :2009/06/03(水) 09:23:48 ID:NSEPda//
>>678 サンクス
スマン、自分があんまりソースで見たことなくて使っていいのか疑問だったから使ってるとこがあるのかと言う意味で一般的という言い方をさせてもらいました
>>675 ハックか条件コメント使って調整すればいいんでない?
681 :
666 :2009/06/03(水) 12:27:24 ID:???
たくさんのアドバイスありがとうございました! overflow: ellipsis は知りませんでした!
>>680 ありがとうございます
ハックで個別対応しました
もうひとつ別の質問なのですが
SafariやFirefoxの最新バージョンでは
Mac版とWindows版でCSSの解釈が決定的に違う
などというケースがありますか?
>>682 Firefoxは同じコードを違うOSで動かせるようにしてあるからそんなことはあり得ない
すいません、教えてください。 同じような項目のページがたくさんあるホームページを作っています。 その各々のページに参考文献の番号として番号を記述しています。 ○○という本を参考にしたものには1 ××という本を参考にしたものには2 みたいな感じです。 参考文献を追加することがあるので番号が変わることがあるのですが 現在は全てのページをしこしこと書き換えています。 cssみたいに別のファイルで参考文献一覧表を持っていて それを変えれば全部変わるみたいにしたいのですが・・。 どういう手段がありますでしょうか? (説明が分かりづらくてすみません・・)
番号を変えない
>>684 番号はページごとに割り当てて変えない方が何度も見る人にとっては見やすいと思うが
複数のhtmlファイルの共通した部分(例・更新の日付)を 外部cssなどで一括置換することは可能ですか? いくつものhtmlの日付を一つ一つ直すのはとても骨が折れるので… ソフトではなく、cssかjavascriptでの置換が簡単にできる方法があれば お教え願えないでしょうか?
>>687 外部cssなら:beforeや:afterを使うってのはどう?
ただし、IE6や7では使えないけどwww
JavaScriptは「更新の日付を自動的に表示する」ってのは
できるらしいけど詳しくないのでわかりませんw
該当スレできいてください。
>>688 ありがとうございます!javascriptスレで聞いてみます。
690 :
684 :2009/06/04(木) 19:31:45 ID:???
内容としては687さんとおなじようなことなのですが・・。 見やすい見にくいは別として技術的にはできないってことでしょうか?
>>690 そもそも
>>684 でやりたいことがよくわからんのでスルーしてたんだけど
「外部ファイルを読み込んで表示する」という考え方ならphpかjavascriptかな
>>690 ベスト解出てそうだが。
手でしこしこやった版、を提示してもらった方がよいかな。
もとめてるものが、今ひとつわからん。
693 :
684 :2009/06/04(木) 21:35:33 ID:???
すみません、ありがとうございます。 ジオシティーズではphpが使えないんですね。 結局Devasというファイル内テキスト一括変換ツールを使って変えることが できました。 お騒がせしました・・。
>>693 >ジオシティーズではphpが使えないんですね。
有料版なら使える
入力フォームのプッシュボタンで マウスオーバーした時に、文字色を変える事はできますか? ぐぐったのですが背景色の変更しか見つかりませんでした
質問します 【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> つづく
697 :
696 :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;
}
つづく
698 :
696 :2009/06/05(金) 01:11:43 ID:???
>>697 の続き
上記のHTMLソース(
>>696 )とCSS(
>>697 )でブロック要素になった
<a>のwidth: 135px; height: 123px;の領域全体がリンクになり
オンマウスで背景画像が差し替えられることになります。
ここからが本題になるのですが、
ブロック要素に変換したwidth: 135px; height: 123px;のリンク領域の中に、
<img>を表示させたい場合はどうすればいいでしょうか?
よろしくお願いします。
699 :
696 :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; }
700 :
696 :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; }
701 :
Name_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=画像の縦
汚いMSゴシックが嫌いで、ブラウザのフォントを変えているのですが、 サイトのスタイルシートでMSゴシックが指定されていると、そっちが優先されてしまいます。(yahooトップなど) そこで質問なのですが、 「スタイルのスコープでMSゴシックを抽出して、任意のフォントに変える。」 というユーザースタイルシートを作りたいのですが、可能でしょうか 明朝フォントは別のフォントで表示したいので、bodyやdiv全体に設定することはできません。
教えて下さい
以下の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;
}
>>703 それは【css2】のほうを
div.link a{font-size:x-small;}
ってしないとダメだね
うおおおおおお!!!
>>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;
}
>>705 div.link,div.link a{
font-size:x-small;
}
3日目くらいで質問しろよ
* { margin: 0px; padding: 0px } と * { margin: 0px; padding: 0px; } はどっちがいいんでしょうか? 癖で上の方にしてしまうことが多いのですが他のサイトでは あんまり見かけないような気がします もう一つ 背景に画像をつけるときに、 body { background: url(./bg.jpg) } と body { background-image: url(./bg.jpg) } ではどちらの方が良く使われるのでしょうか
>>710 margin・paddingの方なんだけど、全く同じに見えるのは自分だけか?
ちなみに数値がゼロの場合は単位なくていいと思う。
背景画像の方は、background: url(./bg.jpg);の方は、背景色・背景画像の配置などを省略した形だから
厳密に書くとbackground: #fff url(./bg.jpg) repeat-y right top fixed;みたいなことになる。
背景画像だけ指定して、配置などの指定をしないならbackground-imageを使うのが普通じゃないかな?
あ、セミコロンが無いのか。 セミコロンはもちろんあるほうがいいと思う。
ないとだめなんじゃないの? 知らんけど
セミコロンとか当たり前すぎて気がつかなかった Cベースの言語とかCSSの行端にセミコロン付ける癖を付けないと色々困るからな
IE6 IE8 Fx で調べてみたら } 前の属性なら末端のセミコロン抜いても大丈夫だった ただ手作業でCSS弄るなら後々のことを考えれば やらないほうがいいかも知れない。 ツールに最適化させるならこの方法でサイズダウンができるかも
718 :
710 :2009/06/06(土) 18:36:34 ID:???
>>711-716 大変参考になりました。ありがとうございます
セミコロンについては数十バイトでも減らそうと思ってはじめた事でしたが、
改行やタブのことを考えるとあまり変わらないことに気づきました
CSSとプログラミング言語ではフォーマットが違うという
認識を持っていますので特に問題はなさそうですが、
統一性を持たせるためにも、今後はセミコロンを付けるようにしようと思います
backgroundに関しましては少なくとも開始位置の指定を必ず行うようにしていますので
background: url(./bg.jpg);の形を使うようにします
セミコロンは何となく最後だけ抜いてたな
これからは付ける癖を付ける事にしよう
>>718 スレチになるけど画像使ってるなら、
サイズ削減にJPEG Cleanerやcarmineを使うといいかもね
CSSを書く順番 (margin の後に padding とか width の後に height とか) って決めて書いてますか? もし決めてる方がいたら 教えてください(理由とかあればそれも)
1.abc順 2.w3c定義順 3.コーディング意図を伝わるよーに のいずれかかな。自分は1と3のハイブリッド。
こなあああああああああああああああああゆきいいいいいいいいいいいいいい
>>720 1.float、position等
2.width、height等
3.margin、padding、border等
4.font、text、color等
5.background
こんな感じかな。
自分でルールを決めておけば、見やすいしミスも減らせる。
>>720 基本は、どこの、なにを、どうするじゃなかったかな
けど723の言うとおり自分ルールでいいんじゃない
725 :
Name_Not_Found :2009/06/07(日) 11:33:32 ID:l8tB3+O6
HTMLでページの両端の15%づつをオレンジ、中心部の70%を白にする方法はありませんか?
背景オレンジの中に背景白のボックスを中央配置
余計な世話かもしれんけど補足 試してないけどたぶん上手くいく ただ、両端オレンジは余程センスがない限り糞だから止めた方が良い body { width: 100%; background: #f90; text-align: center; } div { width: 70%; margin: 0 auto; background: #fff; text-align: left; } <body> <div>box</div> </body>
試してないけどたぶ上手くいかないよ、ソレ。 ieだとソレッぽくなるかもね。
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; } じゃあこうか
質問します ローカル環境(パソコン上の)のWEBページを lightwindowsで正常に表示させる方法はありますか? IE7では、表示すらしなく Firefoxでは辛うじて表示されますが CSSが崩れて表示され、元の画面までCSSが崩れます。
あああああああああああああああああああ IE6だけレイアウト崩れるううううううううううううううううううううううううううううう
<ul>入れたら解決した
八苦は所詮まやかしですよ IEのどのバージョンでもFirefoxでもOperaでも 崩れないhtmlを書けばよいだけ、と思います
死苦八苦
俺の場合IE6とIE8はOKでIE7だけ崩れることが多い
CSSハックなんて使わなくて済むようなデザインにすればいい そもそもクロスブラウザ対策が流行したころ作られたwebサイトはメンテしようにも 作った人にしか理解できないようモノばかりで迷惑この上ない
* html と html>body だけで十分すぎるし そんなに分かりづらくなることも無いと思うけどな 必要になるのなんてせいぜい余白を1,2px調整するくらいだろ
740 :
Name_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です。
まずは試してからだな。
外部ファイルでクリック処理を施すのが一番 よってヘッダ
<table border="3"> <tr> <td>あいう</td> </tr> </table> 上をCSSで全く同じように表現する場合はどうすればいいでしょうかm(_ _)m
>>743 テーブルのあの変な線を再現するのは面倒だぞ。
とりあえず同じような感じになるよう書くと、
・HTML
<div class="table">あいう</div>
・CSS
.table {
border: solid 3px #808080;
}
ありがとうございますm(_ _)m一度上の記述をやったのですが 元の状態のテーブルの立体感のほうがよく感じてしまい;; 知人の会社のサイトを作ってるのですが細かな設定とか難しいですねorz
>>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;
}
cssのa:link等で単純なテキストリンクを作っています。 IE8でa:hoverの設定色より、訪問済みのa:visitedが優先されて困っています。 具体的には訪問済みになってしまうと、ロールオーバー(a:hoover色))が機能しません。 a:visitedをa:hoverと同一色にしてしまうと、常にa:visited色でa:link色にならず。orz 何か回避方法はあるのでしょうか?
>>747 記述する順番を間違えてない?
a:visitedはa:hoverより前に記述しないと、意図した通りに表示されないよ。
749 :
Name_Not_Found :2009/06/09(火) 16:19:16 ID:AyPntWLg
今週の金曜日に初級の検定試験を受けるのですが なかなか 感覚が掴みにくく 覚えられないのですが何かよい方法はありませんか? 後、この試験は難しいですか?
自分で作ったHPですがブラウザが更新されるたびにチェックしておかしい所あれば手直しですか? ネットサーフィンしていると色んなHPありますが作りっぱなしでOKなんでしょうか? ブラウザ更新されるとやっぱりおかしくなる事ありますよね?
で、実は何を知りたいのですか?
752 :
747 :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;
}
>>752 a
a:link
a:visited
a:hover
(a:focus)
a:active
リンクのデザインを指定する場合は、上記の順に記述しないと正しく表示され
ないよ。a:visitedを最後に記述しているのが、思い通りに表示されない原因だ
と思うんだが。
cssで、ページの一番上に動的に(ページ移動しても消えたりしない)画像を表示したいのですが、どうすればいいのでしょうか? operaのユーザーcssなので個人的に見れればおkなので、ローカルファイルとかを使っていても構いません、よろしくお願いします
動的に、の言葉遣い変じゃね? つ fixed
756 :
Name_Not_Found :2009/06/09(火) 21:49:08 ID:CjMLxOym
>>755 ありがとうござます
すみません書き忘れました、固定の上に最前面に表示したいのです
スタックレベル忘れてたな。
759 :
Name_Not_Found :2009/06/09(火) 21:58:38 ID:CjMLxOym
>>757 おぉ、なんか出来そうな気がします。ありがとうございます
>>751 質問内容わかりづらくてすいません
HP作ってもIE7.8ではOKでも6だとダメとかあるじゃないですか
だから、ブラウザがどんどん新しく更新されていきますが、それに応じて
今まではOKだったけど新しく更新されたことで不具合が出たりとかあるのかなと思ったんです
>>760 逆はそれほど気にしなくても大丈夫だと思うよ
>>761 そうなんですか?独学で勉強したので不安でして・・・
ありがとうございました。
763 :
747 :2009/06/10(水) 14:33:36 ID:???
>>753 ありがとうございました!
思い通りの動作になりました。
764 :
Name_Not_Found :2009/06/10(水) 16:17:40 ID:qyjQhHPB
質問です。 十数ページ同じレイアウトになっているページがあります。 2カラムレイアウトのページで、 左部分を固定幅表示のメニュー部 右部分を可変幅表示のメイン部分としています。 メニュー部の内容は全ページ同じ内容であるため、 ページが増える際や更新があった際は毎回コピペしています。 メニュー部にわりと頻繁に更新が入る為 その都度他ページにコピペするのが面倒です。 フレームを使用すればメニュー部のページだけ編集すれば良くなるので楽なのですが フレームを使わずに保守性の上がる組み方がありましたら教えて戴きたいです。 長文で少々解りづらくなってしまったかもしれませんがよろしくお願いします。
766 :
764 :2009/06/10(水) 17:17:25 ID:???
>765 既出だったんですね…すみません。 無料HPサービスのようなところでスペースを借りている為、phpは無理だと思います。 Javascriptだとその機能をオフにしているユーザは見れなくなってしまいますよね? とりあえず置換ツールで対応したいと思います。 ありがとうございました。
>>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>
試してないから上手くいくか分からないけど、こんな感じのしか思いつかね
>>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%;にしてしまうと、横スクロールが出る><
769 :
764 :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; } 一応今のところ、自分の思った通りに表示できています。
770 :
Name_Not_Found :2009/06/10(水) 20:55:28 ID:aNxJFk/w
カーソルがdivやspanに重なったときに、背景色を変えることはできるでしょうか? ただし、制約があり、<a>タグは使用でききません。
テーブル使わない事にこだわる意味を見出せない 使ったほうが簡単に書けるなら使うで良いと思ってる
簡単に書けることと簡単にメンテナンスできることはイコールではない
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の最適化はあまり必要とされてないのでしょうか。 それとも技術的に難しいのでしょうか。
>>773 ツールに頼らずに自分でやればいいじゃない
つーか、人間がやるのが一番最適化できると思うよ
更に言うと、ツールに整理させると、後で編集するときに不便
775 :
Name_Not_Found :2009/06/11(木) 14:52:55 ID:I4J1bxXY
htmlで指定せず、cssの方で画像を指定して表示することは出来ないんですかね?
最初からこう書けばいいんでないの?
#t1{margin:30px;}
#t2{margin:20px;}
#t3{margin:10px;}
#t1,#t2,#t3{
border:1px solid black;
color:red;
}
あちこちで共通に使われているなら、
>>773 のように書けばいいし。
1バイトでも削りたいなら、空白タブ改行もけずるのことなるのかなあ?
でもその程度の置換ならテキストエディタでできるし。
半端な最適化されて、メンテナンス性が下がるのはごめんだし,
自分には最適化したい意味も状況も今一わからんの。
779 :
Name_Not_Found :2009/06/11(木) 15:46:27 ID:I4J1bxXY
>>777 ググったけど背景画像とかしか出てきませんでした
>>778 是非方法を教えてくだすいです<>
backgroundで指定しちゃまずいの?
781 :
Name_Not_Found :2009/06/11(木) 17:31:57 ID:I4J1bxXY
782 :
Name_Not_Found :2009/06/11(木) 19:32:47 ID:G9fUWTHM
>>774 >>776 ありがとうございます。
実はCSSを最適化させるツールというのを
卒業研究にしようと思っていて、既出の物か
どうか知りたかったので質問させていただきました。
おっしゃるとおり最適化するとサイズはかなり下がりますが
編集しづらくなるなど色々な問題が出るのでその辺も解消していくつもりです。
既出かどうか知るのに2chで質問とか、 研究手法としてマズくないかい? 属人性が高すぎて殆ど参考にならないと思うんだが。
>>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>
これじゃダメなの?
786 :
Name_Not_Found :2009/06/12(金) 19:12:26 ID:55hETowM
>>785 ダメっていうか無理なんです
言ったけどhtmlを使わないで出来ませんかnえ
>>786 htmlを全くいじらずに、cssだけの変更で画像を表示させたいってこと?
具体的に、どんなhtmlに、どんな画像を、どのくらいの位置に表示させたいのか書いてください。
その際、可能な限りソースも晒してくれ。
CSSをマークアップ言語と勘違いしてる馬鹿がいる
789 :
Name_Not_Found :2009/06/12(金) 20:06:53 ID:55hETowM
基本がまったくできてないやつが多すぎるな HTMLやCSSとは何のか一度しっかり自分で調べることをお勧めする 書籍にしろネットにしろ初心者でもわかる〜とかもサルでもわかる〜とか詳しく解説してくれてる媒体はいくらでもある めんどくさいし根気が要るけどいそがばまわれですよ
ま、せっかくの回答も本人の理解する姿勢次第という例だったということで。 次いこ次。
テーブルのデメリットについて
>>772 の言っていることと、中身を全部読み込んでからでないと表示できないことのほかに何かある?
ページ全体のレイアウト設計に使われてると表示が遅いから
俺自身は表作る以外には使わないようにしてるんだが
>表示が遅いから いつの時代の人ですか これが理由でテーブルが叩かれているわけではありませんですぞ
でも遅いよね?
>>792 俺も表作る以外ではあえて使う必要性が無くなってるな
テーブルレイアウトだと馬鹿っぽく見えるのが動機としては大きいかなあ。特にメリットないのに馬鹿っぽい。これだけで動機は充分だろ? ま、説得するときは10個くらい理由添えるけどね。
今がその説得するときなんだから、10個言えよ
私はスキルがないのでテーブルで作る方がかなりらくです。 CSSは初めたばかりで、やっと表に画像を入れて作れるようになりました。 疑問は、小さな表ではなく、ページ自体センター800ピクセルの幅で決めたとき、その800ピクセルは表のようにテーブル(CSS)で囲まないのですか? スタイルシートで作ってみたのですが、ソースをコピーしてDWにそのままペーストすると テーブルの中にテーブルが表示されているダサプーになっています。 で、何が言いたいかというと、みんな凄いなぁ〜
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; } 見たいな感じで書くとテーブルより軽い。
質問です。 <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に対応してないらしいような事が 書かれておりましたが、対策がありましたら教えて頂けないでしょうか?
明後日になれば元にもどってるかも
>>800 background-position がどうとかじゃなく
IE8だとbodyの高さが0だからとかじゃなくて?
height:300px; とかいれればうまく表示されると思うよ。
>>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>
これでどうかな。
技術じゃなくてセンスの問題だと思うんですが質問させてください。 body の横幅を指定するかbody直下に<div>置いて 横幅指定するか悩んでるんですが、 やっぱりbodyはページ表示の大元だから横幅は いじらないほうがいいんでしょうか。
んなこたない。ガンガンいじるべし!
>>804 俺はbodyにwidthを指定したことはないな。
必ず直下にdivがある。
bodyは背景に色か画像を必ず入れてるし。
806だけど、 bodyに width:800px と指定して、なおかつ background-color:#000; を加えると、頭の中では800pxの中が黒になるのかと思ったら、 ウィンドウ内全部が黒になるんだね。初めて知った・・・。
XHTMLだとbodyの下にブロック要素が必ず1つだけ要るからbodyにそんな物指定しないな
知識足らんとだいたいdiv厨になるよな
であなたみたいな人は得てしてソース厨となり デザインgdgdのゴミサイト製造しちゃうワケですね
ソースだと?目玉焼きは醤油に決まってる ソース厨滅びろ
目玉焼きには塩コショウだろjk・・・
おいおい、ターンオーバーでプレーンな味を楽しむ俺の立場はどーなるんだ ソース厨も塩胡厨も滅びてくれ
気に入ったクラス名やID名が思い浮かばない これもダメあれもダメそんなこんなで30分 くだらねーことでなやんでんじゃねー おまえもう会社辞めろ つかえねーんだよ このタグは本来こういうとこに使うもんじゃない? はぁ? くだらねーことでなやんでんじゃねー おまえもう会社辞めろ つかえねーんだよ ようはメンテナンスしやすけりゃ何でもいいんだよバカが 最低でも一日20枚くらいは上げてもらわないと困るんだよカス と最近入ってきた使えない部下に対して愚痴ってみる
えっなにこれ弱小企業?
知性をいちんと身につけないと劣等感の対処が大変だよね
>>803 亀だけどたしかIE6はa以外のhoverに対応してなかったような
んだね
../docment/index.htmlのような相対パスか
http:// 〜のような絶対パスで記述しましょう
822 :
Name_Not_Found :2009/06/15(月) 20:34:27 ID:NqFeZgd3
<META name="Robots" content="noindex,nofollow"> <META name="GOOGLEBOT" content="NOSNIPPET"> の検索避けタグってブログでも有効なんですか?
そりゃあブログだろうがなんだろうが基本は同じだからね
htmlのことでききたいのすが、現在はセレクトボックスのとある値をクリックして 別のセレクトボックスにクリックされた値に関するアイテムを表示させています。 このときに最初のセレクトボックスのフォーカスをクリックしたアイテムにしたいのですがどうすればできるのでしょうか?
php or cgi
>>821 ありがとうございます。
? で始めるといけなかったんですね。
/hoge/?id=3 などでは無事通りました。
<div width=* height=*>で縦横のサイズを指定したdivの中央に画像を表示したいのですが、 画像配置位置が横方向のセンタリングはできるものの縦方法のセンタリングができません 何か良い知恵はないでしょうか
>827 divの縦横サイズが指定されてるなら 画像に対してmargin-topを指定すればいいんじゃないのか
>>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 以下だったらセンタリングさせるよ。
830 :
Name_Not_Found :2009/06/16(火) 22:06:26 ID:sv8If7dA
position:relativeとabsoluteなんですが IE6だとちゃんと表示されるのですがFirefoxだとTOPはきくのですがLEFT がききません IEだとrelativeに指定したところからleftに50pxのところにいくのですが FFだと0pxの位置のままです バグでしょうか?
そんなバグはないからどこか間違ってるんだろ 必要な部分のソースあげろ
832 :
Name_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>
833 :
Name_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; }
>>822-823 特におかしなところは無いような気がする
そのままコピーして火狐で見たらちゃんと見れたし。バージョンが違うからかもしれないけど
clear忘れてるとかは関係ないのかな
ちょっと削っては確認して、ってのを繰り返して原因探した方がいいかもな
836 :
Name_Not_Found :2009/06/16(火) 23:00:25 ID:sv8If7dA
>>835 ありがとうございます
IEはclass="mark1に対して-85pxの位置になるのですが
FFは0pxの絶対位置のまま動きません…TOPは-10pxの位置になるのですが
>>836 <div class="mark1">
<img 省略 >
<br style="clear:left">
</div>
にしたらどうなる?
もしくはdisplayじゃなくてvisibilityにして試してみるとか
firefoxのバージョンは?
そもそも <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; を追加してみたら?
>>838 floatとposition(staric以外)は一緒に指定しちゃいけない
840 :
Name_Not_Found :2009/06/16(火) 23:52:31 ID:sv8If7dA
841 :
Name_Not_Found :2009/06/16(火) 23:57:59 ID:sv8If7dA
>>838 すいません
#thumにposition: relative;を入れるとIEもFFと同じ状態で
positionがきかなくなります…
>>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; }
にすると解決したりしないか?
修正 #nlef1 { left: -85px; } #nlef2 { left: -15px; } #nlef3 { left: 55px; } #nlef4 { left: 125px; }
844 :
Name_Not_Found :2009/06/17(水) 00:18:54 ID:2lN7Q78s
>>842-843 ありがとうございます
いま自分でも試行錯誤中なんですが
class="nlef"につけていたfloat:leftを削除すると
FFでもrelativeがきくようになりました
ただこの削除したfloatをどこにつけるか迷うところです
やりたいことはよーくわかった。 ↓こうゆう感じにしてみたら? 前提:ページ内に、以下の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> ・ ・ ・
>>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の解除だから必要
意味がうまく伝わってなかったかな
847 :
Name_Not_Found :2009/06/17(水) 00:45:55 ID:2lN7Q78s
ありがとうございます
>>845 で試してみます
846だとやっぱりサムネイル画像が横に並ばずに縦になってしまいました
サムネイルが縦に並ぶのは<div class="mark1">が縦に並んでるからじゃね?
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・・・)を入れてください。
P.S. 数値やcssは適当に変えてね。
600pxの幅のdivの中に下記CSSのようにきっかり300pxずつ左右に子divをfloatさせようとすると勝手に改行?というか上下にずれてしまいます。 #left{ float:left; width:300px;} #right{ float:right; width:300px;} 280pxとかにすると左右におさまるのですが、これはいったいなぜ起きるのでしょうか。 回避方法はないのでしょうか。
>>851 600pxのdivの方でboder出してたりしてない?
853 :
851 :2009/06/17(水) 12:44:22 ID:???
>>852 borderは明示的に何も指定してない状態です
600でpaddingを指定してるとか 300でmarginを指定してるとか
855 :
Name_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
856 :
Name_Not_Found :2009/06/17(水) 14:17:09 ID:WDePDCqU
857 :
Name_Not_Found :2009/06/17(水) 14:19:13 ID:WvtXFuXO
>>856 htmlにphpを埋め込むなら.htaccessに書けばいいけど、
羽があるのに歩いて交差点渡るようなことしてる気がする
>>856 あとたぶん鯖の内部文字コードと出力文字コードの関係が変
>>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>
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; }
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; }
>>860 〜862
IEでz-indexがダメだった。
気にしないでください。スンマセン。
864 :
Name_Not_Found :2009/06/17(水) 16:25:04 ID:WDePDCqU
>>858 遠回り?という事でしょうか。
>>859 内部文字コードと出力文字コードですか、ググってみたのですが、
プログラミング等やった事がないので難しいですね…
詳しく教えて頂けるとありがたいです。
トップページのレイアウトが直って、正常にアップロードできるようになれば満足です。
868 :
Name_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">に直して
トップページに付け加えましたが、元々スタイルシートが入っていないはずの掲示板のほうに適用されて、
アップローダーのレイアウトは変わりませんでした。
うーん、どこが間違ってるんでしょうか…
何か分かれば宜しくお願いします。
>867 見れない
870 :
Name_Not_Found :2009/06/17(水) 17:55:09 ID:WvtXFuXO
>>863 ありがとうございます
昨日から吐きそうなほど考えた結果
IEでのみ上手くいくときとFFでのみ上手くいくときがあるので
あまりよい解決策じゃないですが
「* html 」と「html>body」でCSS適用を分けました
いつか時がたてばクロスブラウザ問題が解決すること神社にお祈り
してきました
871 :
Name_Not_Found :2009/06/17(水) 18:02:14 ID:WDePDCqU
>>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>
873 :
867 :2009/06/17(水) 18:19:23 ID:???
>>869 申し訳ないです。見れたり見れなかったりするみたいで・・・。
>>872 詳しい解説ありがとうございます。
おかげ様で正しく表示させる事ができました。
>>871 トップページのソースに
>index.php/
ってやってるとこがあるけど、これ最後の/とってみたら?
875 :
Name_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[ カウンターの中身はこれです。
度々申し訳ないのですが、宜しくお願いします。
>>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>にすればいくかも
ただやっぱ文字コードがめっちゃめちゃな気配がある
>>876 ありがとうございます。カウンターを表示することができました。
文字コードについては後々調べたいと思います。
とにかく丸二日やって(3時間しか寝てない)ようやくアップローダーが設置できて満足です。
協力して下さった方、ありがとうございました。
Tgifで作成したPDFファイルをページにリンクしたのですが真っ白のままで映りません。 記述は <a herf="graph01.pdf">PDFを開く</a>
>>878 追加です
<form>でちゃんと挟んであります。
一応関連付けなど試しましたがうまくいきません。
ファイルも壊れていません。
どこに不備があるのかお願いします。
>>878 何度もすいません。
herf×
href〇
ですね
質問です。 IEのバグらしいのですが、予期せぬ空白と言うか改行というか、意図せぬ空きがでて困っています。 調べてみると、ソース内のタブスペースや改行を詰めていくと、回避できるとの書き込みを見つけ、それで対応するしかないのかなと思いますが、他にスマートなやり方ってご存知ありませんか? ちなみに、divで表組した直後、 <br claer="all" /> と、書いた所に3行分くらい改行される現象です。
どんなタグをどういう風に使ったのが分からないと答えようがない ただ、レイアウト組むときにfloatとpositionを併用しとけばバグは回避できる 空白ができる原因になってるボックスを探してpositionに変えてみれば? まあ最悪ハック使えばどうとでもなるけど
881です。 ありがとうございます。早速試して見ます。
884 :
Name_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を指定してやればいいのでしょうか? それとも考え方が根本的に間違っているのでしょうか? ご指摘お願いします。 以上、長文失礼しました。
Googleサジェストみたいな入力欄に文字入れると 予測候補を下にリストアップしてくれる機能があって、 Aにそれが発生するとAの下にあるBに領域が被さるんだけど それがAだと認識されてBを下に押し出しちゃうってことかな。 もしposition 使ってないなら オートコンプリート(サジェスト) 表示に position:relative; 入れればうまくいくと思う。 z-index 使いたい場合は オートコンプリート表示にだけ !important すればいいんじゃない?
すまんA,B両方にしてるのなw しかし position:absolute で他の要素に干渉されるのは なんかおかしいのでもしまだ解決しなかったら A,B部分のソースコードとCSS貼ってくれませんか?
>>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にオートコンプリートが合ったような気がするから参考にしてみたらどうかな
888 :
Name_Not_Found :2009/06/19(金) 13:57:05 ID:pWzLsk9A
超初心者なんですがWeb作成で困ってます。 まずページを左右半分に2分割して、左側を上下に2分割し、さらに分割した左上に文字を表示させて、その文字をクリックすると右半分にクリックしたホームページを表示させなきゃいけないんですが <a href>と<frame src>をどう組み合わせればできるかわかりません。 それとも全く違うタグを打たなきゃいけないんですか?どういうタグを打てばいいかわかりません。助けてください。 わかりずらくてすいません。
>>888 よくわからんけど、でざいんとしてはこんなかんじ?
┌─┬─────┐
│A..│ .│
├─┤. D │
│B..┤. │
├─┤─────┤
│C..│. │
│. .│. E │
│. .│. │
└─┴─────┘
890 :
Name_Not_Found :2009/06/19(金) 14:39:18 ID:pWzLsk9A
はい!そんな感じです!でそのAをクリックするとDやEにホームページが表示されるようにしたいんです。
AをクリックでDE両方に表示させるのか? もうちょっと整理して詳しく書かないと教えられないぞ
893 :
Name_Not_Found :2009/06/19(金) 17:25:56 ID:pWzLsk9A
すいません解決しました。わざわざすいませんでした。ありがとうございました。
えっ
なにそれひどい
1日でできるようなことなら先に試しとけよ
人を利用することしか頭にない奴の典型例だな
ひさびさに好意を踏みにじるひどいの来たなw
まあ出来たのならそれでいいじゃないか
そうだそうだ
質問した以上、どう解決したか書けよ
何日も引っ張ることじゃないだろwww
903 :
Name_Not_Found :2009/06/21(日) 11:58:09 ID:TmxSxVQO
色々試行錯誤したりググッタリしてもなかなかうまくいかないのでここで質問させていただきます。 助言いただけたら幸いです。 HTMLソース <div class="Master"> <div class="OutFrame"></div> <div class="header"></div> <li class="Menu"></li> <div class="body"></div> </div> CSSでMasterとOutFrameを同じ幅でセンタリング、色違いの同じボーダー設定をしているのですが なぜかOutFrameの表示がMasterに比べて右にずれてしまいます。 OutFrameをposition:fixed;でMasterと同じ位置に表示したいのですが 何か良い方法があればご教授をお願いします
>>903 MasterとOutFrameの、marginやpaddingはどうなってる?
ズレの原因はこれらの可能性が高そうだ。
親要素のmasterと子要素のoutframeを同じ幅でセンタリングっておかしくね? 右にずれるのはmasterのボーダーのせいじゃないかな ちなみに<li>は<ul>の子要素として使わないといけない
906 :
Name_Not_Found :2009/06/21(日) 13:16:37 ID:TmxSxVQO
早速のアドバイスありがとうございます。liのところはulでした。申し訳ありません。 Master,OutFrameマージン、パディングはどちらも同じで、左右共にautoに設定してあります。 Masterのボーダー設定を消してみたのですが、やはりMasterの位置と同じになりません。 このようなことがしたい理由なのですが、ボックスの縦幅をウィンドウの縦幅と同じにして position:fixedにすることでメインコンテンツの内容に関係なくホームページの 幅を表す縦線を表現したかったからです。
どんなブラウザでもそうなる?
>>906 ボーダーが必要なだけなら、bodyに背景画像入れた方が楽だよ
<body style="background: #fff url(./images/border.gif) center 0 repeat-y; text-align: center;">
<div style="width: 800px; margin: 0 auto;">
コンテンツ
</div>
</body>
./images/border.gifは縦1px横800pxで両端の1pxだけ黒
こんな画像を用意すればうまくいくはず
知ってるかもしれないけど基本的なこととして
width,heightと一緒にpaddingやborderを指定するとブラウザ毎の解釈が違うから注意
909 :
Name_Not_Found :2009/06/21(日) 13:51:19 ID:TmxSxVQO
今のところIE8,firefox,GoogleChromeで見た目の確認をしているのですが、やはり同じく右にずれてしまいます なるほど!背景画像を使う方法は想い浮かびもしませんでした・・・。 ただ、OutFrameに画像を設定してもセンタリングがずれてるからうまくいかなさそうですね・・・。 かといってMasterの外、body要素の子要素としてfixed配置にするとなぜかセンタリングされないので・・・
<body style="margin: 0; background: #fff url(./images/border.gif) center 0 repeat-y; text-align: center;"> <div style="width: 800px; margin: 0 auto;"> コンテンツ </div> </body> 少なくともこれに手を加えなければ「コンテンツ」の部分はセンタリングされて、ボーダーもうまく表示されるから、 この中にheader,menu,bodyを入れればうまくいく この時borderもpositionも使わなくていい どうしても右にずれるのをどうにかしたいのなら ソースを上げてくれないと何も言えないな
911 :
Name_Not_Found :2009/06/21(日) 14:19:36 ID:TmxSxVQO
長い間お付き合いさせてしまって本当に申し訳ありません。 HTMLブロック系要素の親子関係を直してみたらIE8とFireFoxでは意図したとおりに表示されるようになりました <div class="Master"> <div class="OutFrame"> ヘッダー、メニューバー、コンテンツ等 </div> </div> GoogleChromやSleipnirで表示確認を行うとヘッダーとメニューバーが何故か右寄せになってしまいます・・・。 それに、なぜ以前のバージョンだとだめなのかが根本的に分からないので後味悪いです。 ソースは、どうやって載せれば良いのか分からないので調べてみます
>>911 ソースは、今書き込んでるhtmlの内容をもう少し詳しくしたものと、
cssの内容丸ごとを載せればいいんだよ
913 :
Name_Not_Found :2009/06/21(日) 15:01:46 ID:TmxSxVQO
わざわざ本当にありがとうございます。今のところのソースをそのまま載せます <BODY> <div CLASS="master"> <div CLASS="OutFrame"> <div CLASS="header"></div> <ul CLASS="menubar"></ul> <div CLASS="body"></div> <div CLASS="footer"></div> </div> </div> </BODY> div.master{ width:40pc; margin-left:auto; margin-right:auto; height:100%; } div.OutFrame{ width:inherit; margin-left:auto; margin-right:auto; border-style:solid; border-color:#FFFF66; border-top-width:0px; border-bottom-width:0px; border-left-width:2px; border-right-width:2px; height:100%; min-height:100%; position:fixed; }
914 :
Name_Not_Found :2009/06/21(日) 15:05:55 ID:TmxSxVQO
前回のだけでは書き込めなかったので、修正前のHTMLソースがこちらです <BODY> <div CLASS="master"> <div CLASS="OutFrame"></div> <div CLASS="header"></div> <ul CLASS="menubar"></ul> <div CLASS="body"></div> <div CLASS="footer"></div> </div> </BODY> OutFrameがMasterの子要素の兄弟でしたが、親にしてみました。 Masterにボーダーを設定して、position:fixed;にすると ボックスが左寄せになってしまうのでOutFrameを用意したのですが・・・
width:40pc; こういう表記できたっけ
表記ってか単位
917 :
Name_Not_Found :2009/06/21(日) 15:47:25 ID:TmxSxVQO
メニューバーに使ってるフォントサイズが12ptで、確か1pc=12ptだったような気がするので メニューバーの文字数で入力しているのですが、だめでしょうか?
文字サイズで決めるならem使いなよ 要素の1文字の幅 = 1em
919 :
Name_Not_Found :2009/06/21(日) 16:21:45 ID:TmxSxVQO
それでやってみます。アドバイスありがとうございます
920 :
Name_Not_Found :2009/06/21(日) 16:49:58 ID:cZ8tOMNf
・常に横幅固定ならpxの方がいいし文字サイズならem。文字サイズでの可変はあんまり推奨しない ・marginは纏めてmargin: auto;で可 ・ブロック要素(div)であればwidth:inherit;は不要 ・borderは border-left: 2px #ff6 solid; border-right: 2px #ff6 solid; だけでいい ・masterの中にoutframeを入れるのなら、outframeのmarginは不可 ・position: fixed;は親要素にもpositionを指定しなければいけない(staric除く) ・height:100%;は結構難しい動作するから非推奨 cssを↓にしたらどうかな 実際ちゃんと動くかは分からないけど div.master{ width: 800px; //適当に height: 100%; margin: 0 auto; //縦100%なら縦のautoは不要 } div.OutFrame{ height: 100%; border-left: 2px #ff6 solid; border-right: 2px #ff6 solid; } 右にずれる原因はwidth:inherit;のせいのような気がしないでもない
921 :
Name_Not_Found :2009/06/21(日) 17:29:28 ID:TmxSxVQO
アドバイスありがとうございます。早速一括指定で書いてみました。まだ始めたばかりで慣れないですが 少しずつ慣れて行きたいと思います。width:inherit;は前は親要素と同じ幅の数値を設定していました。 今回親子関係を変えてみてなんとか意図した表示にはなりましたが、改善前のバージョンも 改善後のバージョンも見た目上は同じ設定だから同じに見えるはずと言うのが違っていて CSSに対する理解がまだまだだと言う事を痛感しました。
>>920 の最後の一行はwidthとborderを一緒に指定するとバグるっていう意味な
フォントサイズは%で書くのがいいね ブラウザで任意に変えられるからね
ie以外ではpx指定でもブラウザ側で変えられるし ie使ってるような人はそもそも文字サイズ変えたりしないから 実はあんまり気にしなくたっていいんだよな %でもデザイン崩れないんならそっちのがいいだろうけど
いつの時代のieなんだ?
ie6はまだまだ現役なんだぜ
IE5.5にまで対応させてる私が通りますよ
928 :
Name_Not_Found :2009/06/21(日) 21:34:01 ID:i9Bn2SXu
シンプル イズ ベスト 単純に書けば全てのブラウザで通用する 初心者は単純な書き方しかできない 複雑な書式で書けるようになったら二流に昇格 複雑なことを単純化できるのが一流 どこまで単純化できるかが一流と二流の違いな
言わんとすることは分かるが、IE5.5や6の対応状況考えると、机上の空論というか。 しょっぱいデザイン(?)で済む人はすむかもだけど。
IE5.5や6でもそこまでハックなんか多用しなくても メンテしやすいシンプルな作り方でいいデザインはいくらでもできる
931 :
Name_Not_Found :2009/06/21(日) 22:01:01 ID:qgxJYrw/
というかなぜ今時IE5.5?
アクセシビリティだろ
本当に必要なことだけすればいいのに 無駄なことする仕事できない人が多いんです。
無駄なこと = ie対応
もうRSSだけでいいよなw
そのRSSを検索するのはGoogleなんですね
937 :
Name_Not_Found :2009/06/21(日) 23:35:54 ID:YWXrEAAo
submitボタンについて質問です。 デフォルトでは、丸っこいタイプのものと角ばったタイプの二種類があるようですが、 これはfontに影響されるのでしょうか。 今のところ、丸いタイプのボタンになっているので、できれば角ばったボタンにしたいのですが…。 見当違いのようでしたら申し訳ありません。 どなたかご教授願います。
938 :
神様見習い :2009/06/21(日) 23:45:42 ID:dJFDxZjr
みなさんお久しぶりです。ぼくは元気です。。。 規制で次スレ立てられないので、タイトル/テンプレ作ったのでどなたかお願いします。。。 DWはドリームウィーバーのつもりで書いたのですが、解りにくかったようなので書き方変えました。。。 みなさん、これからもスキル向上にがんばってください。。。 ----------------------------------------------------------------------------- 【Dreamweaver】HTML/CSS質問・優しく答えるスレ2【神降臨】 ここは初心者からベテランまで、 全ての人を対象に優しく答えるスレです。 類似質問大いに結構。 分からない人は何回聞いても結構。 HTML/CSSの事・Dreamweaverの事なら何でもOK。 回答してくれる方は優しい人のみ! ○○読めっ・・・何度も聞くな・・etc などと言う人は このスレを見るな!! 質問側も節度あるレスで!
>>937 ボタン自体は特に設定しない限りブラウザやOSに依存する。
XPやオペラなんかだと角丸のボタンになるけど、クラシック表示だと四角くなったり。
四角くしたいのなら例えば、
input {
border: 1px solid #808080;
background: #f2f2f2;
}
それか画像を使うくらいかな。
940 :
神様見習いの代理人 :2009/06/22(月) 01:29:09 ID:xw5Ednzo
次スレ立てんの早くねww
>>939 有難う御座います。
当方Opera使いなので気がつきませんでしたが、
他のブラウザだときちんと表示されていました。
初歩的なことで、お恥ずかしい限りです。
943 :
神様見習い :2009/06/22(月) 02:10:39 ID:84ecL0Vn
>>940 ありがとうございます。。。
2とってこよ。。。
【1087】家の中にストーカーがいます Q: 38歳の弟のことです。もう7〜8年、定職に付かず家にいます。 以前から、姉である私に対して、幼稚な嫌がらせをしたりしていましたが、最近はそれがエスカレートしております。 平日の弟は、私が起きる時間より1時間〜30分早く、大音量で目覚ましをセットして起きます。 私が起きて階下へ降りると、後から降りてきます。 私が二階へ上がると、直ぐに二階に上がって来て、私の部屋の前で気味の悪い声を上げて笑い、自分の部屋のドアを勢いよく閉めます。 朝の支度で、何度も二階と一階を行き来する時も、その度に同じくついてきます。 これだけの異常行動をするのは、統合失調症などの精神病なのではないかと思いますが、いかがでしょうか? <先生の回答> 事実がこのメールの通りだとすれば、あなたのおっしゃるように、弟さんは統合失調症の可能性があると思います。 しかし、どうもこのメールの内容は解せないところがあります。 弟さんが統合失調症で、あなたに対して何らかの妄想を持っていると仮定しますと、 ここに書かれているように、あなたの行動を監視し、いちいちそれに合わせて 嫌がらせをするという手の込んだ形は、ちょっと考えにくい行動です。 そして、「○○が自分の行動を監視し、いちいちそれに合わせて嫌がらせをする」というのは、 統合失調症の方の典型的な被害妄想の訴えでもあります。 まさかとは思いますが、この「弟」とは、あなたの想像上の存在にすぎないのではないでしょうか。 もしそうだとすれば、あなた自身が統合失調症であることにほぼ間違いないと思います。 あるいは、「弟」は実在して、しかしここに書かれているような異常な行動は全く取っておらず、 すべてはあなたの妄想という可能性も読み取れます。 この場合も、あなた自身が統合失調症であることにほぼ間違いないということになります。
タイトルロゴを常に画面上部に表示させたくて
h1 { position:fixed; height; 100px; }
というCSSを書いたまではよかったのですが、
http://localhost/index.html#anchor のように「#anchor」つきでアクセスすると、文章の上部がタイトルロゴの下に隠れてしまいます。
そりゃそうだと言われそうですが、なにか解決策はありますでしょうか。
つまりposition:fixedで画面上部に画像かなにかが表示されていても、
「#anchor」つきのアクセスでテキストの上部が隠れないようにする方法があれば教えてください。
946 :
Name_Not_Found :2009/06/29(月) 00:04:29 ID:k23VXs+3
あ
ほ
948 :
Name_Not_Found :2009/06/29(月) 13:17:52 ID:PMc9xuI2
>>945 新参乙です(悪いとは言ってない)
さんざんガイシュツ。
ま、ここの人は優しいから俺以外のシッタカが教えてくれます。
店プレより 類似質問大いに結構。 分からない人は何回聞いても結構。
新スレで聞き直したら? こっちは埋めてしまえ
952 :
ちり紙 :2009/06/30(火) 12:12:15 ID:???
>>945 z-index
そもそも次スレ立てんの早すぎだろ
954 :
Name_Not_Found :2009/07/01(水) 12:29:21 ID:JooizKUC
こっち埋めてから次仕えよ
1枚の画像(hoge.gif)を用意して、 マウスのフォーカスが画像を通過した時だけ 画像の色を反転させるにはどうすればよいでしょうか? ググッたところCSSで filter: invert(); というCSSを使うであろう事は想像出来るのですが 肝心の画像の上をマウスが通過した場合にのみ色を逆転させる方法が分りません。
通過というかマウスがあたってる時のみ行うならhover擬似クラス ただし aタグ以外のhover擬似クラスはIE6以前は対応してない fiterプロパティはIE以外のブラウザは正式対応してない
>>955 hover使えばよろし。
しかしながらfilterはブラウザ独自のはずだからあんまりオススメしない。
どちらかというと、通常の画像と色相反転した画像をひっつけて1枚の画像にして
hoverとpositionを使って位置をずらすようにする方法を、最近よく見かける。
958 :
Name_Not_Found :2009/07/01(水) 20:20:18 ID:HcMmVmvA
少し前、皆さんにお世話になった者です。あの時はありがとうございました。 またしても質問で申し訳ないのですが、IE8だとクリックできるリンクがFirefox, GoogleChromeでクリック出来ません。hover擬似クラスも動作してないみたいです。 色々ググってはみたのですが、IE6のPNG画像とか、今回のケースとは関係なさそう な情報ばかりで困っています。皆さん何か心当たりは無いでしょうか?
コードを書け
960 :
Name_Not_Found :2009/07/01(水) 21:11:38 ID:HcMmVmvA
申し訳ありません。忘れていました。 <div class="Master"> <div class="OutFrame"></div> <div class="Header"> ヘッダー内のリンクは機能している </div> <ul id="Menubar"> メニューバー内のリンクも機能している </ul> <div class="Main"> メインコンテンツ内のリンクが機能していない hoverしてもカーソルが変化しない。 hover時の設定が機能しない。 押せない </div> <div class="Footer"> </div> </div> こんな感じです
>>960 htmlだけじゃなくてcssも書きなよ
962 :
Name_Not_Found :2009/07/01(水) 21:38:24 ID:HcMmVmvA
a{ color: #FF6633; } a:link{ color: #FF6633; } a:visited{ color: #FF6633; } a:hover{ color:red; } a:active{ color: #FF6633; } アンカーに指定しているスタイルはこんな感じです。
>962 CSSを適用させなければリンクは効くの? あと問題の箇所はdivタグ直下? 他のタグの入れ子になってるなら、特定タグ内の時だけ問題が起こる?
964 :
Name_Not_Found :2009/07/01(水) 22:12:26 ID:HcMmVmvA
アンカー関連の部分をコメントアウトしてみましたがやはり機能しません。 メニューバー用に設定したアンカースタイルもコメントアウトしてみたら押せなくなりました。 問題のリンクは、ほとんど<div class="Main">の直接の子要素ではありません。別のdivやul,p要素等の子要素です
div class="main"の直下に問題のaタグもってきてみ それでもリンク効かないならmainに指定してるcssがおかしいんじゃね
966 :
Name_Not_Found :2009/07/01(水) 22:57:52 ID:HcMmVmvA
直接の子供にしてみましたがだめです。mainに指定されてるCSSは div.main{ width:inherit; margin:0 auto 0 auto; padding:59pt 0px 41pt 0px; clear:both; } てな感じです
リンクがおかしいのなら ・単純にアンカータグや周囲のタグを間違えてる(単純な記述ミス) ・該当要素の上に被さってる要素がある(positionとかz-indexとかで) どっちかだろうと思う a:link,visited,hover,activeで指定したスタイルが適用されているようなら後者な
968 :
Name_Not_Found :2009/07/02(木) 00:10:10 ID:/AkBgeKF
質問です。 htmlで文章を書くとき 例えば りんご 100円 オレンジ 150円 パイナップル 300円 みたいに果物名と値段を書いて値段の部分で頭をそろえたいので その間にスペースを入れたいのですが 空白の部分に を入れて例えば りんご 100円 オレンジ 150円 パイナップル 300円ってやり方で問題ないですか? 50個くらい商品があるのでかなり をいれなきゃいけなく なるので、このやり方でいいのかな?と迷ってます。 他にもっといい方法がありますでしょうか?
969 :
Name_Not_Found :2009/07/02(木) 00:10:32 ID:Q/Q/2P4u
フッター直下に入れてみたらリンクが機能しました。ということはmainがいけないんでしょうか。 div.main{ width:inherit; margin:0 auto 0 auto; padding:59pt 0px 41pt 0px; clear:both; } div.footer{ width:inherit; margin:0 auto 0 auto; position:fixed; bottom:0; background-color:#FFFFFF; border-width:2px 0 0 0; border-color:#000033; border-style:solid; } といった感じにスタイルを指定しています
970 :
Name_Not_Found :2009/07/02(木) 00:12:40 ID:/AkBgeKF
>>968 すいません968訂正です.
& n b s p;を何個も使って普通頭ぞろえを調整するもんなんでしょうか?
>>970 するべきじゃない
だってフォントによって幅変わるからずれちゃうじゃん
でも別に読めるっちゃ読めるから気にしないならおk!
気にするならtable使うか
CSSで、
display:inline;width:***px;みたいに書けばおk
972 :
955 :2009/07/02(木) 00:33:11 ID:???
CSSだけでやるよりやっぱりJavaScriptでやる事にしました。
>>968 おれはテーブル・レイアウト否定派だけど
それは、完全に、<table>を使うケースだと思うよ
974 :
Name_Not_Found :2009/07/02(木) 01:02:20 ID:/AkBgeKF
>>971 そうなんですか、今全角のスペース入れて調整したんですが
フォントが変わったらずれてきますかね。
一応フォントはMSゴシックで統一してるんですが。
りんご 100円 バニラ 200円 コーラ 250円
オレンジ 150円 チョコレート 200円 カルピス 250円
パイナップル 300円 ハワイアンブルー 200円 ジンジャエール 250円
みたいにしたいんですが、商品名によってかなり幅が違ってきます。
でも値段は頭そろえたいんですが。
テーブルは使いたくないんですが、cssの記述も商品1個1個に適用されるんでしょうか?
>>974 もちろん。簡単に書くとこんな感じ。
<head>区間か既存のスタイルシートの中に以下をいれて、
<style type="text/css">
.item{width:100px;}
.price{width:50px;}
</style>
表示する部分
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">ばにら</span>
<span class="price">200円</span>
<span class="item">じんじゃえーる</span>
<span class="price">230円</span><br>
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">りんご</span>
<span class="price">100円</span><br>
<span class="item">ばにら</span>
<span class="price">200円</span>
<span class="item">じんじゃえーる</span>
<span class="price">230円</span>
<span class="item">りんご</span>
<span class="price">100円</span>
976 :
Name_Not_Found :2009/07/02(木) 01:49:35 ID:/AkBgeKF
>>975 なるほど!わかりました、早速やってみます。
ありがとうございました!
マークアップは定義リストだろjk
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>
余白や幅は適宜調整
あああああいいいいい いいいいいいいいい いいいいいいいいい 上のような文章があって、二行目以下を任意のスペースあきにしたまま(ここでは1字分としてます)、 ブラウザを小さくしても、二行目以下を任意のスペースあきにしたい。 あああああい いいいいい いいいいい いいいいい いいいいい いい とか、 あああああいいいいいいいいいいいいいい いいいいいいいいい になるようにしたい、 テーブルの使用OKとした場合、どのように記述すればよいかわかりません。
変なレイアウトだな… 1行目は見出しにする、とか決まってるなら 1行目はh1タグとかで括り、2行目以降(本文)をpタグでくくりゃ良いんだろうけど 何らかの意味を持ってる訳じゃなく、単純に 今日の天気は雨で した。学校は休み ました。 みたいな感じにしたいの?
こういう事では無かろうか。 p { text-indent: -1em; }
982 :
975 :2009/07/02(木) 14:13:49 ID:???
>>977-978 そっか勉強になった
ありがとう!
けどspanでもwidth効くんだぜ
ちょっと教えて。 別ページの同じ場所に画像を貼付けるのに 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のみ背景画像が表示される
>>983 セレクタの書き方がおかしい
#bg.p01
じゃなくて
#bg .p01
スペースが必要。
985 :
983 :2009/07/02(木) 15:09:21 ID:???
>>984 ありがとうございます。
早速やってみましたが、#bg .p01と書くとFirefoxでも画像が非表示になってしまいました。
何か根本的に間違っているのでしょうか?
ちなみに、
#bg .p02と書いてIE
#bg .p01と書いてFirefox、IEとも
画像が非表示の場合でも<p>のテキストは表示されています。
>982 spanタグで括るとマークアップの仕方として意味合いが違ってくるんじゃないかね >983 CSS側で#bg取っ払ってクラス名だけ書くとどうなる?
987 :
983 :2009/07/02(木) 17:12:40 ID:???
>>986 クラスだけで書くとなんてびっくり画像が表示されました。
今まで何を悩んでいたんだろうって感じ?
しかし、クラス名だけだと他のところに同じクラス名が出てくると
画像が表示されてしまう(今回は使ってないので大丈夫なのですが)
ように思うのですが、#bgの中の.p01という風にするにはどうすれば?
>>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>を使えばうまくいくはず
まぁクラス名を被らないようにするのが簡単だろ
>>988 詳しい解説サンクスです。
> <div id="bg" class="p01"></div>
> のようにidとclassを一緒に指定するのならおそらく不可能
不可能というのは理解しました。
ということは、そもそも<div id="bg" class="p01"></div>という書き方そのもがNGなんでしょうか?
それともCSSをちゃんと理解して使えば(idやclass指定)こういう書き方は問題ない?
>>989 >そもそも<div id="bg" class="p01"></div>という書き方そのもがNGなんでしょうか?
問題ない。
992 :
988 :2009/07/02(木) 19:10:41 ID:???
>>989 <div id="bg" class="p01"></div>自体には問題はないよ
全く使われないってこともないから
>>983 のケースなら、クラス名だけを記述するのがベストだと俺は思う
クラス名が被るのを心配してるみたいだけど、自分一人でサイトを管理するのなら特に問題はないだろうし
最終的には好み次第かな
まだ勘違いしている悪寒
994 :
Name_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
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
では次スレで。。。!
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。