【Dreamweaver】HTML/CSS質問・優しく答えるスレ2
1 :
神様見習いの代理人 :
2009/06/22(月) 01:26:43 ID:xw5Ednzo ここは初心者からベテランまで、 全ての人を対象に優しく答えるスレです。 類似質問大いに結構。 分からない人は何回聞いても結構。 HTML/CSSの事・Dreamweaverの事なら何でもOK。 回答してくれる方は優しい人のみ! ○○読めっ・・・何度も聞くな・・etc などと言う人は このスレを見るな!! 質問側も節度あるレスで!
2 :
神様見習い :2009/06/22(月) 02:11:35 ID:???
3 :
うなぎ :2009/06/22(月) 20:42:51 ID:gotatCac
>>1 乙です。
手書きが出来ない初心者なのですが、Dreamweaverでやるのと普通のメモ帳の様なテキストエディタならどっちがいいですか?
やっぱり手書きは出来た方がいいのでしょうか?
>>3 もう何度も同じような質問が出ているけど、結論は
自分がやり易い方法がいちばんいい
手書きは、出来ないよりは出来た方がいいけど
出来ないでもサイトを構築できるのだったら、それでいいんじゃない
5 :
Name_Not_Found :2009/06/22(月) 21:02:59 ID:shhvXdQD
4を使っているのですが、作成したファイルを3で見たらデザインがぐちゃぐちゃになってしまいました。原因が全くわかりません。アドバイスお願いします。ちなみにファイルは手打で作成しましたす。
font:'メイリオ', 'MS Pゴシック', Osaka, 'ヒラギノ角ゴ Pro W3'; フォント指定したんだけど、DWのプレビューではメイリオが表示されるのに ブラウザだと表示されません。 なして?
Meiryoにしたら?dw使わないからどうなるか知らんけど そもそもユーザーが皆同じフォント入れてるわけじゃないからあんまり気にしなくてもいい dwのプレビューがどんなものか分からんけど、もしかしたらお前がメイリオ入れてないだけだったり
>>6 各ブラウザに対応させるのには "meiryo","メイリオ" 両方書くべし
9 :
Name_Not_Found :2009/06/23(火) 16:14:18 ID:sMyY/ndW
HTMLファイル及びブラウザによる表示結果を書けとあるんですが、どこを見ればいいんですか?
10 :
Name_Not_Found :2009/06/23(火) 16:18:13 ID:sMyY/ndW
身の回りの電気機器でネットワーク接続されたら便利になると思われるものを一つ挙げ、列挙した電気機器の設定を行うためのインターフェース部分をHTMLで技術せよ。 クーラーで作ろうと思うんですが、どうやってやればいいんですか?どんなボタンを何が良くてわざわざ選んだのかも書くらしいです。誰か助けてください
宿題は自分でやりなよ
これがゆとりか
13 :
Name_Not_Found :2009/06/24(水) 15:32:30 ID:92bJVYa6
window.open( "xxx.jpg" 画像クリックでサイズ指定したサブウィンドウでオリジナル画像を表示させてるんだけど この開いたサブウィンドウの画像をクリックすると閉じる。ってのはできないですか? リンク先がjpgだとダメ。htmlで作らないと。ってことかな?
うん
サブウィンドウはマジでうざいからやめてほしい
>>15 に同意
クリックで閉じるならonclick="window.open("about:blank","_self").close(); return: false"
とりあえずhtmlとjavascriptの区別くらいはできとけ
角丸作るとき 画像div画像の間に隙間が出来て困ります divとimgタグのスペースを消したら解決できるのですけど ソースが汚くなりまる 解決できますか?
IE6だけのトラブルです
19 :
Name_Not_Found :2009/06/24(水) 22:30:05 ID:9NI7EvKL
サイトの<iframe>内でFC2ブログ表示をすると ニコニコ動画外部プレイヤーがテキスト表示になります 直リンクでブログ確認すると再生表示されます FC2ユーザーサポートに確認▼以下回答 iframeからの表示などにつきましては正常動作されないこともございます。 また、正常に設置する方法などのカスタマイズにつきましてはサポートすることができません。 どうすれば<iframe>内で正常表示されるのか分かりますか? FC2 iframe ニコニコ テキスト表示 でぐぐったら自分の質問が一番上にwwww 誰もこんな現象になってないのか…
iframeのiframeは上手く表示されないってことかしらん
21 :
19 :2009/06/25(木) 01:32:16 ID:???
<iframe>内のscriptが上手く表示されないのです 下記の様な状態です 追記でサイト内に設置しているjavascriptの干渉の可能性も考え 一旦サイト内のjavascriptを削除してみるもテキスト表示は変わらず *サイトの<iframe>内でFC2ブログを表示した場合* FC2ブログ用ニコニコ動画外部プレイヤータグ 【テキスト表示】 <script type="text/javascript" src="URL"></script> ニコ動<a>タグ 【表示可能】 <a target="_blank" href="URL">タイトル</a> ニコ動<iframe>タグ 【表示可能】 <iframe width="312" height="176" src="URL" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"> <a href="URL">タイトル</a></iframe>
22 :
Name_Not_Found :2009/06/25(木) 01:47:28 ID:Kj+i2guH
書き込んだ内容を後から編集できる掲示板を作ろうとしています 書き込んだ内容はtxtファイルに保存していて 編集するときにフォームに以前書いたtxtを出したいのですがどうすればよいでしょうか? <textarea>ここにコメントを書き込んでください</textarea> ↑の”ここにコメントを書き込んでください”の部分をtxtファイルにしたいのですが・・・
>>21 一番下ので表示できてるんなら、それでいいんじゃねーの?
>>22 スレチ。使用してる言語のスレで聞け
24 :
13 :2009/06/25(木) 10:29:29 ID:???
>>16 <a href="JavaScript:wopen()"><img src="XXX.jpg" alt="XXX.jpg" border="0" width="600" height="600" /></a>
現在、このようにしてフォトギャラリーのサムネールから見たい画像だけサブウィンドウ表示させてます。
教えていただいた
>onclick="window.open("about:blank","_self").close(); return: false"
これのどの部分にリンク先のXXX.jpgを入れればよいのでしょうか?
それとも各画像ごとにhtml作ってそれをリンク貼れということですか?
>24 少しwindow.openとかでぐぐって来たらどうだね
26 :
13 :2009/06/25(木) 11:39:51 ID:???
すみません・・ やはりサブウィンドウのリンクを.jpgにしておいて 開いたjpg(サブウィンドウ)をクリックで閉じるというのはやはり無理でしょうか? ).close(); return: false" だと開いてくれず、 ).close()にしてみたら開いたとたん勝手に閉じてしまいました。 ここのどこかにクリックで閉じるが適用できると言うことでしょうか?
>onclick="window.open("about:blank","_self").close(); return: false" これは使えなかったの
>>26 できるわけねーだろ。.jpgが何なのか調べて来い
あと自分に対する返信は全部理解できるまで何度でも読んどけ。
>>14 とか
サブウィンドウはhtmlで(画像の個数分ページを作る)
<html><head></head><body>
<img src="XXX.jpg" onClick="window.parent.close()">
</body></html>
これで閉じることはできる。開くのはwindow.open()でググれ
29 :
13 :2009/06/25(木) 12:17:23 ID:???
>>27 すみません・・
現在headに
<script language="JavaScript">
<!--
function wopen() {
window.open( ".../org/xxx.jpg", "xxx", "width=500,height=500" );w.close()
}//-->
</script>
bodyに
<a href="JavaScript:wopen()"><img src="xxx.jpg" alt="xxx.jpg" border="0" width="100" height="100" /></a>
と書いてます。
onclick="window.open("about:blank","_self").close(); return: false"
これをbodyのリンクに書くのでしょうが、どういう風に書いたらいいかわかりません・・
>>29 お前自分で一切調べてないだろ
まずjavascriptの構文勉強してからonclick,window.open(),close()でググレカス
そんなめんどくさいことやんないでさっさとLightBox導入してカスタイマイズでもしてた方がいいんじゃない
32 :
13 :2009/06/25(木) 12:47:29 ID:???
>>30 調べてます。
教えていただいた文をどこに入れる・または入れ替えるのか
調べてるんですが。。
これってリンク先をhtmlにして書き込むってことですか?
33 :
13 :2009/06/25(木) 13:09:46 ID:???
以前から調べてるんですがやはりサブウィンドウにjpgしてだと その後のクリック閉じるという命令を親ウィンドウに書いても無理と言うことでしょうか。 何処を見ても画像を開くのはあるが、閉じるとなるとサブウィンドウ用のhtmlを用意とあります。
34 :
Name_Not_Found :2009/06/25(木) 14:26:54 ID:TwkEo7eB
ライブビューについて質問です。 DreamweaverでHTML込みのPHPのファイルを操作することがあるのですが、 ライブビューにすると、PHPでの処理も閲覧できるのでしょうか? echoで表示する箇所が出力されたり。
>33 >何処を見ても画像を開くのはあるが、閉じるとなるとサブウィンドウ用のhtmlを用意とあります。 そういうことです
36 :
13 :2009/06/25(木) 15:59:33 ID:???
>>35 あらら・・
では16に書かれてた↓はなんだったの・・
onclick="window.open("about:blank","_self").close(); return: false"
これからサイトを作っていきたいんですが HTML4.01とかXHTML1.0や1.1やStrict、Transitional、Framesetなどたくさんあって迷います デザインやソースの綺麗さはこだわりませんがなるべく多くの人が見れるサイトにしたいです 将来的にはPHPなども使っていきたいですがどのバージョン使っていけばいいですか?
Strictがいいよ、覚えるタグが少なくて済む なるべく多くの人が見れるサイトにしたいなら、余計なことは一切しないほうがいい
39 :
19 :2009/06/25(木) 18:04:08 ID:???
>>23 プレイヤー表示がしたいので苦戦しているのですがネ
原因を<iframe>ばかりに着目していましたが
考えてみればjavascriptの方が原因か…?
其方の方面で再度探り直します
ノシ
>>37 最初は4.01のFramesetでいい。
徐々にあげていって最終目標はXHTML 1.1で
とある事情で海外からのHPへの接続を遮断したいのですが、 HTMLにその手の拒否命令等は組み込めますでしょうか?
42 :
Name_Not_Found :2009/06/26(金) 00:35:04 ID:NPOF8v6l
<html> <head> <title>○○○○○○</title> <link rel="stylesheet" type="text/css" href="basic.css" /> </head> <body> <h1>○○○○○○○○○○○○○○<strong>○○</strong></h1> <h2>○○○○○○○○○○○○○○</h2> <hr /> <p>○○○○○○○○○○○○○○<br/></p> <ul> <li>○○○</li> <li>○○○</li> </ul> <hr /> <img src="img/○○.jpg" alt="○○○○" /> <p>○○○○○○○○○○</p> <hr /> <img src="img/○○.jpg" alt="○○○○" /> <p>○○○○○○○○○○○○○○○○○○○○○○</p> <hr /> </body> </html> これ作ったのですが、cssとjpgが反応しません。 jpgは×印がついて見れません。 なんでですか・
>>42 DTDの宣言ないのに閉じタグ使い???
画像とCSSのディレクトリはあっているのか?
jpgはちゃんとRGBのjpg?
44 :
Name_Not_Found :2009/06/26(金) 00:56:51 ID:P/Jnr4bu
42の者です JPGはRGBでした。 ディレクトリがちょっとわからないので明日調べてみます。ありがとうございます。
>>40 おいっ、おまいは答えてはいけないレベルたぞ ! !
46 :
Name_Not_Found :2009/06/26(金) 00:57:56 ID:P/Jnr4bu
あ、でもJPGのサイズがA4だったんですが、これも関係ありますか??
>>46 A4サイズは関係ないが、表示はピクセルとdpiの方がが問題。
ブラウザが読み込むのに時間かかる大きい画像は、すぐには表示できず
最初×でることがあるが、
そもそもそんな画像を表示用に使ってたら誰も見てくれないで
戻るボタンだな。
一応いっとくが、実際の拡張子は大文字JPGで、
HTMLは小文字だと、
ローカルでは表示されてもネットではデッドリンクになるぞ
48 :
Name_Not_Found :2009/06/26(金) 01:26:31 ID:P/Jnr4bu
>>47 ありがとうございました!わかりやすいです。
とりあえず画像の解像度など調べてみます。
拡張子も小文字で確認します。
ありがとうございました
^^
>>41 HTMLでは無理。
.htaccessを使うのが普通。鯖によっては使えないケースもあるけどな。
>47 >一応いっとくが、実際の拡張子は大文字JPGで、 >HTMLは小文字だと、 >ローカルでは表示されてもネットではデッドリンクになるぞ えっ?
>>50 うpしたファイル名がhoge.JPGなのに、HTML内で<img src="hoge.jpg" />って書くと
ちゃんと表示されないってことだろ。
>51 すまん そういうことか HTMLでは本来大文字で表記されるべきみたいな意味に捉えてしまった
53 :
うなぎ :2009/06/26(金) 10:02:14 ID:iEdiFiXz
>>42 ファイル指定する時に .とか/はちゃんと入ってますか?
なぜCSSも反応しないんでしょうね。
ディレクトリが間違ってんだろjk
ソースフォーマットで質問あります。 タブ1、スペースでやりたいのですけど h1~とかのタグだとタブ4ぐらいスペースあきます。 よろしくお願いいたします。
56 :
Name_Not_Found :2009/06/26(金) 15:37:54 ID:P/Jnr4bu
>>53 入っていると思うのですが…。また挑戦してみます。
>55 dreamweaverのソースコードフォーマット機能のことか? だったら メニュー > 編集 > 環境設定 > コードフォーマット に設定する項目がある
>>55 質問するときは具体的に例をあげるといいよ
タブ1やタブ4とかいまいち言っていることが良く分からないから
ソースのフォーマットは自分だけが見るのなら何も気にしなくてもいいし
他人に見せるのならインデントがあれば十分。タブでもスペースでも可
59 :
55 :2009/06/26(金) 18:16:17 ID:???
<div> <ul class="t12s140"> <li></li> </ul> </div>
60 :
55 :2009/06/26(金) 18:17:24 ID:???
まちがえました ul,liは半角スペースです
(;´д`)…ダメダコリャ
何を言ってるのかよくわからん・・・
paddingとかmarginの話かな
暗号解読班の出番だな
65 :
55 :2009/06/27(土) 00:02:15 ID:???
<ul> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> </ul> <ul>がタブ4回 <li>がタブ4回+半角スペースっていみです よろしくお願いいたします。
Please japanese. OK?
悪いけどもうちょっと理解してから質問してください
68 :
55 :2009/06/27(土) 00:44:22 ID:???
益子 貴寛のガイドラインに沿っただけなのに 説明って難しい ぼけ
日本語が理解できなくて逆ギレとは之如何に
>>68 それじゃガイドラインも理解できていないw
益子 貴寛もいい迷惑だね
画像掲示板のような物を作りたいのですが、わからないところが出てきたので質問させてください 画像を入れてコメントを書いて投稿ボタンを押したら 完了画面に飛ぶようにしたいのですがどうすればよいのでしょうか? formのactionを複数入れる方法があれば楽なのですが・・・
>>72 htmlの部分なのでここで聞かせてもらったのですが・・・
何処のスレに行けばいいのでしょうか?
テキストの均等割付について質問なんですが 3カラムのブログを全体的に均等割付、禁則処理をしたくて 例えば以下のような指定をしています .entry { text-align: justify; text-justify: inter-ideograph; line-break: strict; } IE、Firefoxは全く問題なく均等割付、禁則処理してくれるんですが SafariとOperaだけが上手く行きません 具体的には、サイドバーなどの短い文章は均等割付になるんですが メインコンテンツの長文テキストが全く効きません これはこういう仕様なんでしょうか ブラウザのバージョンは全て最新です
SafariとOperaではtext-align: justify;は和文には効かなかったような気がする そもそも文末以外を両端揃えにするだけだから等幅フォント使った方が楽だと思うんだけどな
質問させてください 現在<head>部に <style type="text/css" media="screen"> a img { border-style: none; } .center { text-align: center; } .centering { position: absolute; left: 50%; top: 50%; margin-top: -200px; margin-left: -200px; } </style> <script type="text/javascript" src="swfobject.js"> </script> <script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = {}; attributes.id = "idtop"; swfobject.embedSWF("top.swf", "flashContent", "1200", "600", "10.0.0", "expressInstall.swf", flashvars, params, attributes); </script>
↑続き
<body>部に
<div class="center">
<div id="flashContent">
<div class="centering">
<a href="
http://www.adobe.com/go/getflashplayer ">
<img src="image/flash_link1.png" alt="Get Adobe Flash player" width="400" height="400" />
</a>
</div>
</div>
</div>
こんな感じでswfobjectというものとcssで位置を指定してflashを埋め込んでます
↑すみません、まだ続きます <div class="center">がflashの位置指定で <div class="centering">が閲覧する側にflashがインストールされてない場合に表示される画像とリンクなんですが、 これだとflashがインストールされてない場合の画像は数字で指定してるので上下左右中央に表示されるんですが、 flashそのものは{text-align: center;}で指定しているせいか左右しか中央に来ず、上付けの真ん中に来てしまいます。 自分はflashも上下左右真ん中に表示したいのですが、 <div class="center">の内容を { position: absolute; left: 50%; top: 50%; margin-top: -300px; margin-left: -600px; } と言ったような絶対位置指定にして ・閲覧するユーザーにflashがインストールされている場合は <div class="center">を適用 ・されていない場合は <div class="centering">を適用 と言ったように見る側の環境によって条件を変えて指定することは出来るんでしょうか? javascriptのif構文とかになってしまいますか? 板違いだったらすいません
>>77-79 フラッシュと代替画像を同じサイズにしておいて、
div {
position: relative;
width: 200px;
height: 200px;
}
p {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
}
p.flash {
z-index: 20;
}
p.img {
z-index: 10;
}
<div>
<p class="img">代替画像</p>
<p class="flash">フラッシュ</p>
</div>
これでdivがページの真中に来るようにしてやれば上手くいくんじゃねーの?
少なくともフラッシュの画像が重なるようにはできるけど、まぁあんまり推奨しない
javascriptのが確実だし併用するのが一番かも
81 :
Name_Not_Found :2009/06/27(土) 18:20:56 ID:QaJ00wVD
td style="border: solid 5px white" valign="middle" align="center" 枠を指定し、縦横サイズ指定した画像を入れたのですが、 win IEだと下に1pxほど余白が出来てしまいます。 これを回避する方法はないでしょうか?
テーブルレイアウト(笑)
<img>と</td>の間にスペースとか改行入ってないか? それを無くすかまたはアホくさいけど<td><img><br></td>これで回避できたような気がしないこともない もしくはセルのサイズ指定して背景画像として入れればいい 関係ないけど style="border: solid 5px #fff; text-align: center; vertical-align: middle;" こっちのがいいかもな テーブルは表組むだけならいいけどレイアウトには使わない方がいい
>>76 なるほど
とりあえず仕様として理解しておきます
とりあえず、そう聞いておきましょぅかね
86 :
Name_Not_Found :2009/06/28(日) 13:17:23 ID:bmqJ44ma
ホームページ作成を始めて2ヶ月の初心者です。質問させて下さい。 50ページ程のHPで左側に全ページ共通のリストがあります。 そのリストを1項目でも増やしたら50ページ全てに手を加えています。 多少、階層を持っており、リンクの間違いなどが多発します。 うまく言えませんが、1つの修正・更新でも該当ページが多岐に渡る場合、 皆様はどのように対処されていますか? テンプレート機能は知っていますが、他のHPを見ても<editabele・・・> なんてありませんし、宜しければヒントとなるHPでも教えて頂けないでしょうか。 使用ソフトはdreamweaver cs3です。
検索置換
88 :
Name_Not_Found :2009/06/28(日) 14:11:47 ID:O3ePBFBA
超初心者ですが質問です 現在HTMLで左右に二分割したフレームのページを作ってます そこに小説を載せようと思っていて、 左側にページ数、右側にページ(小説)を表示させたいんですが、 左側のおページ数をクリックして次ページに飛ぶだけでなく、 右側のページそのものをクリックしても次ページに飛べるようにするには どうしたらいいんでしょうか・・・ どなたかお願いします
>>86 テンプレートorライブラリ機能を使って作業しても、
最終的にdw専用のタグ(というかコメント)を消したデータを
サーバーにUPしている事は多い。
CS4を使いの方にお尋ねです。 自分の会社はXMなのですが、お客さんのところに行って編集しようとしたら cs4が入っていました。 プロパティのところにあった文字色設定が消えているのですが、CSSではなく htmlの編集で行きたいのですが、文字色パレットを表示させる方法は cs4からは無くなったのでしょうか?
>>91 下のURLのやつは選択したスタイルシートをサーバーサイドで優先スタイルシートに設定したHTMLを出力するね
94 :
Name_Not_Found :2009/06/28(日) 21:02:44 ID:bmqJ44ma
>>90 コメントを消されてるとは思いもしませんでした。
私はテンプレートを試してみましたが、うまく機能させる事ができず、
他サイトのソースを見てもコメントを発見できなかったので、
勝手に使えないと判断していました。参考書を見て再度挑戦しましたら
機能させる事ができました。さらに使いこなせるよう頑張ります。
ありがとうございました。
IE6を使っているんですが同じフォントを指定しているのに FONTタグを使ったときとスタイルシートを使ったときで字体が違います。 スタイルシートを使うと字が太くなり行間が広くなってしまうんですが どうすれば直せるんでしょうか?
letter-spaceing
97 :
Name_Not_Found :2009/06/28(日) 21:42:14 ID:u8XUwyRj
imgタグ内からのリンク先もrelでnofollowしないとジュースこぼれますか? それとも aタグ内からのリンク先だけ? 教えて下さい。
99 :
Name_Not_Found :2009/06/28(日) 22:15:14 ID:VwQyk16H
101 :
91 :2009/06/28(日) 23:17:07 ID:???
すいません。自己解決しそうです。 ブロック要素(?)に、 display: inline; を指定しているスタイルシート適用の状態から、 スタイルシート無効化すると固まってしまうようです。 displayのデフォルト値に戻らず、描画できなくなってしまうんでしょうか。 これってIEのバグだと思うのですが、どこかに載ってるのかな…。
>>80 >フラッシュと代替画像を同じサイズにしておいて
その手がありました!!
すみません、簡単なことなのに思いつけませんでした(汗
おかげでスムーズに行きました!!
ほんとありがとうございました!!!
開いたウインドウサイズが貼られてる画像より小さい場合のみ縦横比を保って縮小したんだけど こういうのってできますか? どこに書けば良いんだろう。
>>103 JavaScript関係できけばいいよ
105 :
Name_Not_Found :2009/06/29(月) 17:27:11 ID:FAt6qSgL
はじめまして。質問です。 今大学の講義でhtmlを扱っていて、サイト内のみの検索機能を付けたいです。 どのような感じかというと、都道府県の特産物検索システムというものを作っています。 入力フォームとリンク機能なんですが、入力フォームに入力後、リンク先を見つけ出し、 表示するようにしたいのですが、可能でしょうか?ちなみにcgi形式を使ってます。 例:"東京都"と入力→検索→東京都について表示
>>105 あなたが教員なら、板違い。WebProg板でどうぞ。
あなたが生徒・学生なら、そういうことを掲示板で質問しちゃ駄目。
教員に質問するとか、自分でGoogleとかで情報を探すとかしましょう。
上下にフレームでページを別けてます 上のページにはサイト名やメニューを置いてるだけなのですが F12のプレビューで見ると何故かスクロールしてしまいます。 スクロールしない方法を教えてください。
108 :
Name_Not_Found :2009/07/02(木) 20:55:36 ID:2YOBzgEr
普通の3カラムのブログのデザインをちょっと変えたいのですが、 どうすればいいのでしょうか。 言葉じゃ言いにくいので図で説明すると ---------------------------- ------ l l l l ---------------------------- l l ------ -------------------- l l l l l l l l l l l l l l l l l l l l l l l l l l ------ -------------------- ------ こんな感じにしたいんですが、HTMLをどんな感じに変えればいいのでしょうか。
>107 scrolling="no" >108 図がよく解んない 「このページみたいにしたい」ってURLがあるなら それ見せてくれた方が早い
ヘッダー ナビゲーションバー 右カラム 左カラム コンテンツ 右カラム フッター こうか?
111 :
107 :2009/07/02(木) 21:37:55 ID:???
>>109 scrolling="no"を何処に入れたらいいんですか?
上のフレームのbodyタグかindexじゃないの
107はframeタグについてぐぐってこい 不勉強すぎ
■■■■■■◇◇ ■■■■■■◇◇ ○○□□□□◇◇ ○○□□□□◇◇ ○○□□□□◇◇ ○○□□□□◇◇ こんな形を望んでいるに相違あるまい。 元の形が分からないので、どう手を入れるかは他に任せた。
そろそろフレーム使うのやめようぜ
ユーザーに画像をアップしてもらい、それを表示するというものを作っています 小さな画像は引き伸ばして大きな画像は縮小して表示スペースぴったりにさせたいのですが 画像のサイズの調べ方がわかりません どうかご教示ください
width="100%"
>>117 それだとそのままのサイズで表示されてしまうと思うのですが・・・
前やったから記憶が曖昧だけど、divかテーブルの横幅が指定されてる中だったら、その横幅の100%で表示されてたと思う でも等倍じゃないから意味ないな
>>118 <a href="画像のURL"><img src="画像のURL" /></a>
こうすればおk
てか何がしたいの? PerlかPHPの質問?
divボックスの大きさが横と縦両方100pxだった場合 たとえば縦150、横70の画像を表示する時に自然とボックスの中におさまるようにしたいってことじゃないの
HTML/CSSで書くなら width:150px;max-height:200px こんな感じで
アップロードっていってるからサーバサイドを使うと思うんだが もしそうなら <img> を出力するときに width と height を 一緒に指定して出力してやればいいんじゃね? HTML・CSSの範疇をちょっと超えてるけど
125 :
Name_Not_Found :2009/07/04(土) 11:41:36 ID:bgbjl5EI
初質問です、宜しくお願いします。
現在商用でPC・携帯サイトを作成しているのですが、ディレクトリの操作がうまくいきません。
アドレスを
http://...jp/ (PC)
http://...jp/m/ (携帯)
と定めたいのですがディレクトリが転送されず(物理的には転送済みなんですがwebで反映されない)困っています。
どうかご指南宜しくお願いします。
当方DW CS3、FileZillaを使用しています。
反映されないのは単にそういうサイト作ってFTPしただけだからではないの? 携帯からのアクセスを携帯サイトに勝手に飛ばしたいなら 携帯サイト振分機能のあるサーバを使うか、 PHPを仕込んだりしないと無理
パーミッションとか
>>125 public_htmlがあるならその下に置きましょう
129 :
Name_Not_Found :2009/07/04(土) 15:03:57 ID:GLX4jaRM
130 :
Name_Not_Found :2009/07/04(土) 15:17:00 ID:bgbjl5EI
>>126 やはりですか。
PHP勉強しなければいけませんな。ありがとうございます。
>>128 public_htmlの下にはmフォルダ(携帯サイトデータ)を
そのまま入れちゃっていいんでしょうか。
mフォルダから取り出してpublic_htmlの真下にhtmlを置くべき?
フォルダの階層がそのままアドレスになるという認識が既に足かせになっているのかも。
間違ってたらスミマセン。
ドキュメントル−トがどこかもわかっていないんじゃ・・・
133 :
Name_Not_Found :2009/07/04(土) 16:05:51 ID:ZHTEGRpU
yahoo!みたいに 12345678910次へ> のようにしたいのですが ホームページビルダーでできるんでしょうか?
1ページづつ組みなよ^^
>>125 です
単に階層が違ってたっぽい。
デフォルトであるindexフォルダにindex.htmlが入ってると思ってたら
一つ上の階層に別のindex.htmlが入っててそっちを読み込んでたらしい。
初歩ミスorz
ご指南ありがとうございました!
136 :
Name_Not_Found :2009/07/06(月) 06:35:10 ID:ovL8iTj8
外部CSSを利用し、箇条書きのリストを作ろうと考えています。 それぞれの文章が長いため、画面横いっぱいに広がってしまう問題があるのですが widthのように幅を指定することは可能ですか? 可能であれば、外部CSSの方で制御したいのですが…。 初歩的な質問で申し訳ないです。
>136 >widthのように幅を指定することは可能ですか? こんなの大した労力じゃないんだから自分で試せよ…
138 :
136 :2009/07/06(月) 10:51:31 ID:ovL8iTj8
すみません、試したつもりだったのですが記述に誤りがあったために widthを指定しても反映されていなかったようです。 ありがとうございました。
139 :
ちり紙 :2009/07/06(月) 12:21:30 ID:???
>>133 > ホームページビルダーでできるんでしょうか?
ホームページビルダ単体の機能ではできません。
この機能を実現したければ、perlやphp等のcgiプログラミングの知識が必要です。
さらに、Yahooのようなという要求ならば、データベースの知識も必要になるでしょう
140 :
Name_Not_Found :2009/07/08(水) 11:06:13 ID:eZqxVpLr
TOPやGallery等のメニューにマウスポインタを置くと文字の色が変わったり画像が変わったり (今選択されていますと)枠がでたりするにはどうしたらいいのでしょうか? 教えてください。
141 :
ちり紙 :2009/07/08(水) 12:27:23 ID:???
>>140 JavaScriptを使うと比較的簡単に実現できます。
具体的には、
Googleで " javascript マウスオーバ " というキーワードで検索します。
次に検索結果から、自分にあった方法が記されたページを探し、
そのページの指示に従って処理します。
>>140 文字の色・背景の色が変わったり、枠が出たりするのはCSSでもできますよ。
画像を変えるのは基本的には
>>141 の方法だけど、CSSでもできる方法はある。
143 :
140 :2009/07/08(水) 14:18:39 ID:tJIpX3xi
CSS Spriteとか:hoverをつかいませう
145 :
140 :2009/07/08(水) 14:33:23 ID:tJIpX3xi
>>144 ありがとう。
「CSS Sprite」や「:hover」でググってみて調べたよ
ちょっと難しそうだけどがんばってみます。
とりあえず、そのページに書いてあるのと同じのを作ってみれば分かるよ
はい。これは何処に記述したらいいですか?
CSS Spriteってなんで文字ごとに画像を用意してるのかな どうせ背景なんだから、ボックス内に文字を表示すればいいのに
>>148 HTMLとCSSのファイルを作ってだな・・・ってそこから説明しなきゃならんの?
う・・・ CSSのファイル??と思ってしまったオレは一から出直しだなorz
154 :
Name_Not_Found :2009/07/10(金) 12:21:22 ID:8Pf8Kj5M
<body> <p>hogehoge1</p> <p>hogehoge2</p> <p>hogehoge3</p> <p>hogehoge4</p> </body> ↑で3番目のhogehoge3にだけ外部スタイルシートを使ってスタイルを適用させたいのですが (例えば{color: red;}) どうすればいいのでしょうか?
classかidかspan
>>154 CSS使うんならセレクタくらい勉強しとけ。基礎だから
157 :
154 :2009/07/10(金) 13:28:20 ID:???
>>155 外部スタイルシートでのみいじれるんです。HTMLにはさわれないので・・・
二番目のhogehoge2にスタイルを適用させるなら p + p {color:red;}でいけるんですが
p p + pとかp[3]とかで指定というのができないみたいで・・・
>>156 すいません・・・
CSSに p .hoge3 {略} て書いて <p class="hoge3">
>>158 >>157 から察するにhtmlファイルの方は内容を変えられないんじゃないの?
文盲っていうのはこういうのを言うのか……
160 :
154 :2009/07/10(金) 15:28:55 ID:???
>>158 レスありがとうございます。
すいません、書き方がおかしかったですかね
HTMLのほうはさわれない、改変不可なので、スタイルシートのみで
Javascriptのようにpタグの何番目の要素、というように選べればと思ったのですが・・・
>>154 body > p:first-child + p + p { color: red; }
ただしIE6以下には未対応
対応状況がまちまちなセレクタ使うやつは死ね どうせ未対応用にidなりclass振ってcss適用させるんだったら最初っからそうやっちまったほうがいい メンテもいちいち2箇所直さないといけないとかめんどいだろ
対応してないのは古いIEだけな件について
>>162 質問くらい読めよカスが
次善だろうが何もしないよりかはマシだろ
>>164 <ul>タグにCSSでlist-style-imageで画像指定すればいい
もしくは<li>にbackground-imageとpadding併用でも可能
>>165 画像として●を使用しないといけないということですね。ありがとうございます。
<ul>での・の大きさの変更は出来ないということなのでしょうか?
>>167 わかりました。ありがとうございました。
169 :
154 :2009/07/11(土) 08:58:57 ID:???
>>161 レスありがとうございます。
+って繋げることができるんですね。助かりました、dくす
170 :
Name_Not_Found :2009/07/12(日) 23:18:09 ID:qZmbJj58
初歩的な質問ですいません #menu_bar li a { background-image: url("img/test.jpg"); } の#menu_bar li aとはどういうものですか? #menu_bar li aという要素の所に適用されるのですか?
>>170 menu_barというIDの中で組まれている
リスト内のaタグに適用される
id="menu_bar"を指定した要素の子要素であるliタグの更に子要素であるaタグに適用される
>>170 スペースは「〜の中の」に変換すると分かりやすいよ。
この場合は、「menu_bar」というIDがつけられた要素の中の、<li>の中の、<a>という意味。
たとえば、こういうソースのファイルを試しに作ってみたら一目瞭然だよ。
【css】
#menu_bar li a {color:red;}
【html】
<ul id="menu_bar">
<li>あいうえお</li>
<li><a href="hoge.html">かきくけこ</a></li>
</ul>
<ul>
<li>あいうえお</li>
<li><a href="hoge.html">かきくけこ</a></li>
</ul>
174 :
170 :2009/07/12(日) 23:37:01 ID:qZmbJj58
>>171-173 なるほど、ありがとうございます。
>スペースは「〜の中の」に変換すると分かりやすいよ。
これはわかりやすいですね!
親切にどうもm(_ _)m
175 :
170 :2009/07/12(日) 23:45:39 ID:qZmbJj58
もう1つすいません。 ロールオーバーの画像メニューバーを作成したいけど いまひとつ出来ません。 CSSでは /* メニュー画像 */ #menu_bar li a { background-image: url("img/test.jpg"); } /* ロールオーバー(画像切り替え) */ #menu_bar li a:hover { background-position:left bottom; } htmlでは <meta http-equiv="content-Style-Type" content="text/css" /> <link rel="stylesheet" href="test.css" type="text/css" /> </head> <body> <img src="img/title.jpg" width="215" height="58" /><br /> <img src="img/a.jpg" width="50" height="30" /> <ul id="menu_bar"> <li><a href="hoge.html">かきくけこ</a></li> </ul> </body> 間違ってますかね・・・?
176 :
Name_Not_Found :2009/07/12(日) 23:47:53 ID:7YsSseBB
ここでいいのでしょうか?
もしスレ違いなら誘導お願いします。
私はlang-8.comというSNSでブログを書いていますが
ttp://lang-8.com/ そこではyoutubeの動画はアドレスを張るだけ
フレームがでてくるのですが
ニコニコ動画を貼り付けようと動画のタグを
コピペしてもタグ自体が有効にならず文字として認識されてしまいます。
一応ページのソースを見て
youtubeのフレーム部分と思われる場所をコピペしてみたのですが
それも文字として認識されてしまいました。
どうすればニコニコ動画のフレームが挿入できるのでしょうか?
>>176 文字として認識されてるとかじゃなくて、<>が<>に変換されてるんじゃないの?
タグ使用禁止とかの理由で
>>176 画像指定してないのに出るわけが…と思うんだが気のせいなのだろうか
>177 ありがとうございます。 確認したら、そうなってました。 これってじゃあ にこにこ動画は貼り付けられないってことですか!?
181 :
170 :2009/07/13(月) 00:14:03 ID:???
>>178 画像指定という事は<a href="hoge.html">を書き換えたらいいんですよね?
記述間違いてましたら訂正の教えてください
183 :
170 :2009/07/13(月) 00:22:29 ID:???
ブログじゃないですorz
そもそもニコ動は視る方がIDもってないと時間制限とかもあるから HPに貼るには向かなくないか?
185 :
170 :2009/07/13(月) 00:32:18 ID:???
>176=>180です。 そうなんですか?知らなかったですOTL 流れる日本語とかを 外国の人にも見て欲しいんですけどね・・・。 >182 直にソースを書き込めるところ・・・? いま、探してみましたがなさそうですOTL
>>185 君以外はだれも混同していないと思うが?
189 :
185 :2009/07/13(月) 01:09:48 ID:???
どういう形にしたいかがハッキリしないので汎用性のあるやり方の紹介しかできない。 こんなページにしたいとか、こういうメニューにしたいとかを説明するかサイトなりのサンプルを示して欲しい。
191 :
185 :2009/07/13(月) 01:30:20 ID:???
>>191 丸みを帯びたボタンはCSSではなく
ボタンの作り方とかフォトショや花火を使って作る方
>>191 #menu_bar li a:hover{
width:○○px;
background-position:○○px ○○px;
}
メニュー一つの幅指定してどこを画像のどの部分を表示させるかってことをやる
説明下手ですまんがこれで行けるんじゃない?多分
<a href=".jpg" target=blank >ダウンロードはこちら。</a> このようにJPGリンクを別名保存させたいんだけど、 これをjavascriptかなんかで強制的に保存モードになって保存先が聞かれるようにはできないかな? PC素人さん達に写真ギャラリー見せて欲しい画像をクリックで保存できるようにできたら。。と。
>195 鯖の設定に寄るんでphpとかいじれるならならできるっぽいけど htmlだけじゃ無理ぽ
>>196 有り難うございます。
javascriptで画像保存のプロテクト等あるから
クリックでそんな技もあるかも!と思ってしまった。。
zipで保存してリンク貼っておけば良いんじゃね
>>198 素直にそうせい!だな。。
タグをちょろっと書くとペロッとなるかと。
サンクス。
いくら優しく答える旨とは言え、質問する側にも態度ってもんがあるよな
>>200 理解に苦しむだんが。。
なぜ195-199が態度云々って話になるんだ?
そんなに神聖なものなのか?
これどう?
むりじゃね?
そか。。ありがと。
普通だろう?
それともどちらかが神かなんかなのか?
202 :
Name_Not_Found :2009/07/13(月) 19:13:15 ID:KwQYoq2A
>>197 ちなみにPHPならこんな感じな
mb_http_output("pass");
header("Content-type: image/jpeg");
header("Content-Disposition: attachment; filename="名前.jpeg");
readfile(画像URL);
headerとreadfileだけでよくね?
204 :
191 :2009/07/13(月) 20:33:08 ID:???
アクセク規制でパソコンから書き込めなくなったorz 初歩的な事で申し訳ないのですがCSS内とhtml内にどう記述するのか教えてください<(_ _)>
>204 CSSとhtmlの基礎勉強した方が早いんじゃない? これから毎度毎度このスレで聞くのも面倒だと思うんだが
206 :
191 :2009/07/13(月) 20:53:58 ID:???
>>205 俺が質問してる事はそんなに簡単な事なんですか?
>>206 /* メニュー */
#menu_bar li a {
color:#ffffff;
background-color:#000000;
}
/* メニュー ロールオーバー */
#menu_bar li a:hover {
color:#aaaaaa;
}
htmlでは
<link rel="stylesheet" href="./test.css" type="text/css" />
</head>
<body>
<img src="./img/title.jpg" width="215" height="58" alt"191's Web site" /><br />
<img src="./img/a.jpg" width="50" height="30" alt"aについて勉強するページ" />
<ul id="menu_bar">
<li><a href="./hoge.html">かきくけこ</a></li>
</ul>
</body>
208 :
206 :2009/07/14(火) 00:21:12 ID:???
>>207 どうも。
このまま入れても無理だったので
コレを参考にしたらいいんですね。
209 :
207 :2009/07/14(火) 00:31:05 ID:???
>>208 すまんね。altのあとに“=”忘れた上に、body直下にインライン要素書いてたわ。俺の環境だと動いたけど
これでいい?
<p><img src="./img/title.jpg" width="215" height="58" alt="191's Web site" /></p>
<p><img src="./img/a.jpg" width="50" height="30" alt="aについて勉強するページ" /></p>
207のサンプルを理解してからこっちを試すと良い。 スプライトはさて置いて、話を単純にするために背景画像を二つ用意するパターン。 #menu_bar li a { display:block; float:left; text-indent:-9999px; width:100px; height:100px ; backgorund-image:url('./img/hogehoge1.gif'); } #menu_bar li a:hover { backgorund-image:url('./img/hogehoge2.gif'); } aの背景とサイズを指定する。a自体はインライン要素なのでサイズが指定できない。 なのでブロック要素に変更し、ブロック要素を横に並べるためにフロートも指定。 背景画像に重なってしまうaのテキストを、インデントでもって画面の彼方に追いやる。 あとはhoverで背景画像の入れ替えを行って完成。 言葉にするとこんなもんかな。確認してないので間違っている部分があるかも知れないが。 あと、aを並べるなら個々のaにidをつけないと背景指定で破綻する。
text-indentってテキストが複数行あると1行目しかインデントされない現象はバグなの?
インデントが何の為にあるか考えろ
バグじゃなくて仕様というべきだな
brは強制改行であって、段落じゃないぞ
216 :
207 :2009/07/14(火) 09:50:43 ID:???
>>209 動きました。どうもありがとう。
>>210 はい、理解してから挑戦したいと思います。
>>215 こちらで答えてくれなさそうだったので
向こうに書きました。
夏だなぁ
悪びれもしないとは
DREAM WEAVER CS4使ってます。ヒストリパネルを開いても半透明で何も選択できないのは何でですか?
「div#A」で全体をまとめた後に 「div#B」で一部分をまとめると 「div#B」が全体の枠からはみだしてしまいます 「div#B」を納める方法はありませんか?
ヘッダー、メインコンテンツ、フッターとフレームで分けています メニューでクリックしたリンク先をメインコンテンツに飛ばしているのですが 何故かメインコンテンツだけでなく全画面に適応さててしまいます。 何故でしょうか?教えてください。 記述は間違って無いと思います <li id="top"><a title="Top" target="_top" class="current">Top</a></li> <li id="about"><a href="1" title="About" target="_top">About</a></li> <li id="gallery"><a href="1" title="Gallery" target="_top">Gallery</a></li> <li id="blog"><a href="1" title="Blog" target="_top">Blog</a></li> <li id="link"><a href="1" title="Link" target="_top">Link</a></li> <li id="mail"><a title="Mail" href="mailto:">mail</a></li>
HPにクイックタイムで再生できるように自分がもっているMOVの動画を
<EMBED src="./img/ファイル名.MOV" loop="1" volume="50">と書いて
UPしてみたところ、HPを立ち上げたと同時に動画が再生されてしまいます。
さらに、プレイヤーの下に表示されるはずの再生ボタンや停止ボタンが
表示されません。なにが原因かわかりませんアドバイスお願いします。
参考
http://www.scnet.tv/~narinarito/contents03.html
>>222 target="_top"の意味、わかってる?
「フレーム分割を解除してウィンドウ全体に表示」するって意味だよ。
メインコンテンツを表示するフレームだけにリンクしたいなら、
まずフレーム名をつけて、(例:<frame name=""main">)
リンク先のターゲットをフレーム名にする(例:<a href="hoge.html" target="main">)
>>223 QuickTimeはあまり詳しくないんだけど、
「自動的に再生するかどうか」を選ぶ属性と、
「コントロールを表示するかどうか」を選ぶ属性があったはず…。
あと、.movを埋め込むときは、widthとheight属性は必須だったと思うよ。
もっと言うと、埋め込みタグとしては<embed>よりも<object>が推奨されているはず。
どちらも自分はあんまり使わない要素なので、詳しく教えられなくてごめん。
早速のお答えありがとです
>>225 クイックタイムでMOVの動画をUPしてあるHPでソースをコピしてやってみたのですがだめでした;;
やってみたのですが、同じ結果になりました。
<EMBED SRC="./img/ファイル名.MOV" HEIGHT=250 WIDTH=320" CONTROLLER="TRUE" LOOP ="FALSE" KIOSKMODE="FALSE">
この間にAUTOPLAY="FALSE"と入力すると自働で再生はしないのですが、コントローラーが表示されてないので
再生できません。やってるテーブルが違うのですかね??
227 :
222 :2009/07/15(水) 17:15:29 ID:???
>>227 それは凡ミスじゃなくて無知だったと書くべきですね
229 :
220 :2009/07/15(水) 17:25:37 ID:???
>>221 返信どうも
floatはつけてました
>>220 ではちょっとわかりにくかったと思うので
わかりやすく書いてみます
>>220 は忘れて下さい
全体枠の中にA枠とB枠があります
(全体枠とは背景を作る為につけたものです)
A枠にdivでfloat:leftを使いました
B枠は特に何もしてません
ところがA枠が全体枠から少しだけはみだしてます
A枠は左にB枠は右に配置したいんですが
どうしたら上手く行くでしょうか?
>>229 ソースかけよカスが
あと“枠”じゃ分かりづらい
B枠にもfloat: left;、もしくはfloat: right;を加えて
ちゃんとclear: both;してやればいい(float: left;だけならclear: left;でもいい)
<div style="background: url();"> #全体枠
<div style="float: left;"></div> #A枠
<div style="float: left;"></div> #B枠
<br style="clear: left;" /> #clear用のブロック要素でも可
</div>
ちなみにbrはあんまり推奨しない。適当なブロック要素があればそれでclearする
当然だけどfloatしてやるボックス(枠)にはwidthを指定してやること
背景ならbodyで指定しておくのが楽。センター寄せの背景画像も当然可能。
もしも全体枠がwidth: 100%;だとしたら小さいウィンドウ(ブラウザを縮小した場合)で表示した時に
横にスクロールすると背景が消えるから注意。まぁ気にするほどでもないけど
232 :
220 :2009/07/15(水) 18:48:57 ID:???
>>231 >>231 のはスタイルシートの中に入れるってことですよね?
以下のようにやってみたんですが出来ませんでした
もうちょっと詳しくお願いします
body {color:#444444;
background-color:#66aa66}
div#zentai {border:solid 2px #bbffaa;
padding:20px;
background-color:#ffffff}
div#hidari {float:left;
width:100px;
clear:both}
div#migi {float:right;
width:100px;
clear:both}
233 :
Name_Not_Found :2009/07/15(水) 18:54:17 ID:kQLTdTIl
>>232 あのな、いくら優しく答えるスレだからと言っても
もうちょっとマシなソース書けるようになってから来い。
ポップアップメニューを作ってるのですが そのメニューの内一つだけ、別窓で表示させたい場合どうすればよろしいでしょうか。
>>234 何を使ってポップアップメニューを作ってるのかによるんじゃないの?
JavaScriptなのか、FLASHなのかで方法が全然違うでしょ?
とりあえずソース貼ろうよ。
>>232 俺の書き方が分かりづらかったのかもしれないけど、
わざわざサンプルつけたんだからその通りにしろよ
つーかfloat,clearの動作くらい調べとけ
そもそも全体枠の背景画像はどこ行ったんだよ
一応うまくいくだろうソースな↓
div#zentai {
padding: 20px;
border: 2px #bfa solid;
background-color: #fff
}
div.blocks {
float: left;
width:100px
}
br.clear {
clear: left
}
<div id="zentai">
<div class="blocks">left</div>
<div class="blocks">right</div>
<br class="clear" />
</div>
>>234 普通にtarget="_blank"でいいんじゃねーの?
ポップアップについての質問ならスレち
237 :
220 :2009/07/15(水) 21:30:52 ID:???
>>236 スタイルシート部分は言われたとおり
以下のようにしたんですが失敗してしまいました
何が駄目なんだろう?
body {color:#444444;
background-color:#66aa66}
div#zentai {border:solid 2px #bbffaa;
padding:20px;
background-color:#ffffff}
div.hidari {float:left;
width:100px}
br.clear {clear:left}
div.migi {float:right;
width:100px}
br.clear {clear:right}
238 :
220 :2009/07/15(水) 21:32:29 ID:???
「blocks」ってゆうのは「hidari」と「migi」に 当たる部分ですよね?いきなり登場しても分かりにくい のでそのまま書いてくれるとありがたいんですが <div id〜はスタイルシートの後の<body〜の 各部分に当てはめて書けってことだと解釈したんですが 合ってますか? <br class〜は最後の</div>の前に書けばいいんですか?
239 :
234 :2009/07/15(水) 22:11:37 ID:???
済みません。JavaScriptです。DreamweaverMXのビヘイビアを使ってます。 index3.htmlだけ別窓にしたいです。ソースです。 <head> <script language="JavaScript"> <!-- function mmLoadMenus() { if (window.mm_menu_0715195124_0) return; window.mm_menu_0715195124_0 = new Menu("root",47,10,"MS Pゴシック, Osaka",10,"#FFFFFF","#FFFFFF","#CCCCCC","#FFCC00","left","middle",0,0,1000,-5,7,true,true,true,0,true,true); mm_menu_0715195124_0.addMenuItem("test","location='index1.html'"); mm_menu_0715195124_0.addMenuItem("test","location='index2.html'"); mm_menu_0715195124_0.addMenuItem("test","location='index3.html'"); mm_menu_0715195124_0.hideOnMouseOut=true; mm_menu_0715195124_0.bgColor='#555555'; mm_menu_0715195124_0.menuBorder=1; mm_menu_0715195124_0.menuLiteBgColor='#FFFFFF'; mm_menu_0715195124_0.menuBorderBgColor='#000000'; mm_menu_0715195124_0.writeMenus(); } // mmLoadMenus() //--> </script> <script language="JavaScript" src="mm_menu.js"></script> </head> <body> <script language="JavaScript1.2">mmLoadMenus();</script> <a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0715195124_0,934,570,null,'image1')" onMouseOut="MM_startTimeout();"><img src="1_1.jpg" name="image1" border="0" id="image1"></a> </body>
見にくい
>>238 お前わがままだなw
同じセレクタにclear2回指定しちゃダメだろ
cssの基本的な書き方くらい勉強してから来いよ
br.clear {
clear: both
}
にまとめること
これで解決しなかったらhtml部分も書き込め
関係ないけどセレクタとプロパティを同じ行に書かれるとごちゃごちゃして見づらい
>>242 WebCreatorsを3カ月も買えば何種類も出てるよ
>>242 まず自分が試してみたことを書き込んでみろよ
希望している動作はCSS無しで書くと、↓こんな感じの動作を希望しています。 <table border="1" cellspacing="0" cellpadding="20"><tr><td>あ</td> <td><table border="1" cellspacing="0" cellpadding="0"><tr><td>あ</td></tr></table></td> </tr></table> <table border="1" cellspacing="0" cellpadding="0"><tr><td>あ</td> <td><table border="1" cellspacing="0" cellpadding="20"><tr><td>い</td></tr></table></td> </tr></table> それで↓のようにしたのですが ■CSS .hoge { border: 1px solid black; border-spacing:0; border-collapse:collapse; } .hoge td { border: 1px solid black; padding:20px; } .hage { border: 1px solid black; border-spacing:0; border-collapse:collapse; } .hage td { border: 1px solid black; padding:0px; } ■HTML <table class="hoge"><tr><td>あ</td> <td><table class="hage"><tr><td>あ</td></tr></table></td> </tr></table> <table class="hage"><tr><td>あ</td> <td><table class="hoge"><tr><td>あ</td></tr></table></td> </tr></table> テーブルの中のテーブルのpaddingが上位のpaddingが優先されてしまうみたいなんですけど どうすれば良いのでしょうか?
>>247 試してないからわからんけど
.hage .hoge td{padding:20px;}
>>247 div, .hike{
float:left;
}
.hage{
display:inline-block;
}
.hage, .hoge, .hogo, .huge, .heke{
border:2px solid #C0C0C0;
}
.hoge, .heke, .hogo{
width:58px;
height:56px;
}
.hogo{
border-left:0px;
}
.huge{
clear:left;
}
.heke{
margin:0px;
}
.heke p, .hage{
margin:18px
}
<div class="hoge"><p>あ</p></div><div class="hogo"><p class="hage">あ</p></div>
<div class="huge"><p class="hike">あ</p><div class="heke"><p>あ</p></div></div></div>
>>249 display:inline-block;はIE8未満とか火狐3未満とかは対応してないぞ
ロールオーバーのメニューバー作成できました! ありがとうございます。 また問題がorz クリックし選択しているメニューがホワイトに戻りグレーになりません。 マウスポインタがメニューの上に載るとホワイト→グレーに変化するけど マウスポインタが離れるとホワイトに戻ります。 選択中はグレーになって欲しいけどどうしたらいいですか? 教えてください。
続きです。 CSSは下記のように書いてます #Menu, #Menu li{ margin:0; padding:0; } #Menu { width:650px; height:30px; list-style:none; } #Menu li, #Menu li a{ width:100px; height:30px; overflow:hidden; } #Menu li{ float:left; } #Menu li a{ display:block; text-indent:-9999px; background-image:url('./img/menu.jpg'); background-repeat:no-repeat; }
#top a:link, #top a:visited, #top a:active { background-position:0 -30px; } #top a:hover { background-position:0 0; } #about a:link, #about a:visited, #about a:active { background-position:-100px -30px; } #about a:hover { background-position:-100px 0; } #gallery a:link, #gallery a:visited, #gallery a:active { background-position:-200px -30px; } #gallery a:hover { background-position:-200px 0; }
以上です。書いてるのはあってると思うんですが 訂正よろしくお願いします。 a:visitedに何か宣言しないといけないんですかね?
255 :
Name_Not_Found :2009/07/16(木) 17:02:00 ID:JWRVi2tt
こんにちは。初めて質問させてもらうのですが、 現在3カラムのホームページを作ろうと思っています。 雰囲気、livedoorさんのようなホムペを作ろうと 思っているのですが、回り込みというのはどう 行っていったらいいのでしょうか。 現在cssでヘッダー、メイン、サイドメニュー、ライト、フッターという ボックスを作っていて、 メインの左にサイドメニューをくっつけたいのですが、 それはどういう手順でやったらいいのでしょうか?
>>255 メインを親ボックスとしてサイドメニューにfloat:leftを指定するのじゃダメなのか
258 :
Name_Not_Found :2009/07/16(木) 17:30:44 ID:JWRVi2tt
それはcssに記述すればいいんですよね? どういった具合に記述したらいいのでしょう? メインとサイドどちらにでしょう?
>>255 まず自分がやってみたのを書き込めって
そしたら改善できるようアドバイスしてやれるから
260 :
Name_Not_Found :2009/07/16(木) 17:36:26 ID:JWRVi2tt
#header{ background:yellow; width: 700px; height: 100px; } #main{ background:purple; width: 500px; height: 500px; } #sidebar{ background:blue; width: 200px; height: 500px; } #right{ background:#0F9; width:200px; height:500px; } #footer{ background:red; width: 700px; height: 50px; CSSはこんな具合です。色をつけてるのはボックスが わかりやすいようにするためです。
#sidebar{ background:blue; width: 200px; height: 500px; float: left; }
262 :
Name_Not_Found :2009/07/16(木) 17:41:32 ID:JWRVi2tt
261さんのようにやらせていただきましたらsidebarは 移動せずになぜかrightがなくなってしまいました。 なぜでしょうか><?
HTMLのソースは?
#main{ background:purple; width: 500px; height: 500px; } #sidebar{ background:blue; width: 200px; height: 500px; float: left; } #right{ background:#0F9; width:200px; height:500px; float: right; }
265 :
Name_Not_Found :2009/07/16(木) 17:48:20 ID:JWRVi2tt
<div id="header"> <p class="header-font">2009年07月16日(木) 何の日?:駅弁記念日 有名人の誕生日:福田康夫</p> <div class="header-align">カテゴリ一覧 ツールバー ホームに設定</div> </div> <div id="main"><p>aje</p></div> <div id="sidebar"></p></div> <div id="right"></div> <div id="footer"> <div class="footer"><center>会社概要 プレスリリース 採用情報 ポータルサイトについて 利用規約 プライバシーポリシー 広告掲載 ヘルプ</center></div> <center>Copyright c 1996-2009 livedoor Co.,Ltd. All rights reserved.</center> </div> こんな感じで書いております><
266 :
Name_Not_Found :2009/07/16(木) 18:02:25 ID:JWRVi2tt
264さんのやり方でやらせていただきました。 そしたらヘッダーは変わらずに メインのボックスの位置も変わらずに sidebarとrightの間になぜか footerが入ってきちゃいました
267 :
247 :2009/07/16(木) 18:05:59 ID:???
回答ありがとうございます。
>>248 そうするとhogeとhageとは別にhogeの中のhageとhageの中の
hogeの組み合わせを作るという事でしょうか?
そうするとスタイルが増えてくると組み合わせが、すごい数に
なってしまいそうです…。
それと、試してみましたが、結果は変わりませんでした。
.hoge td { padding:20px; }
.hage td { padding: 1px; }
.hage hoge td { padding: 20px; }
.hoge hage td { padding: 1px; }
>>249-250 そうですね。それだとIE8以下で対応できないみたいなので
IE8以下で対応できる方法は無いのでしょうか?
268 :
254 :2009/07/16(木) 18:06:46 ID:???
>>256 a:activeとa:hoverの位置を入れ替えたけど無理でしたよ
>>266 div#footer {
clear: both
}
>>268 何がやりたいのかが今いち分かりづらい
hoverとactiveに同じプロパティを指定してみれば?
270 :
269 :2009/07/16(木) 18:14:52 ID:???
>>266 >div#footer {
>clear: both
>}
これだけじゃ無理かも
そもそもmain,sidebar,rightのwidthの合計が900pxになってるのはそれでいいの?
それぞれにfloat: left;を加えてfooterでclearしてやればうまくいくと思うけど、
横幅が900pxになるからheader,footerとずれるような気がする
<div style="width: 900px;">
<div>header</div>
<div style="width: 500px; float: left;">main</div>
<div style="width: 200px; float: left;">sidebar</div>
<div style="width: 200px; float: left;">right</div>
<div style="clear: left;">footer</div>
</div>
htmlとcssで分けるの面倒だったから分かりづらいかもだけど
これでうまくいくんじゃないかと思う
ちなみに、3カラムのレイアウトが作りたいんなら最初に
「3カラム 作り方」とかでググれば欲しい情報が見つかると思うぞ
271 :
Name_Not_Found :2009/07/16(木) 18:18:27 ID:JWRVi2tt
おぉ><ちょこっと変化が起きました。 皆様に教えてもらったことを少し考えて #header{ background:yellow; width: 700px; height: 100px; } #main{ background:purple; width: 500px; height: 500px; float:right; float:left; } #sidebar{ background:blue; width: 200px; height: 500px; float: left; float: left; } #right{ background:#0F9; width:200px; height:500px; float: right; float: right; }
272 :
Name_Not_Found :2009/07/16(木) 18:19:29 ID:JWRVi2tt
#footer{ background:red; width: 700px; height: 50px; clear: both } この用に記述してみたんですよ。 そしたら ヘッダーとフッターはいい位置にあるのですが サイド・メイン・ライトの順にしたいのですが、 メイン・サイド・ライトの順になってしまい サイドとライトの間には無駄な隙間ができてしまいました これはどのように直したらいいのでしょうか?
>>272 floatを重複指定してるのはネタか?
順番はhtml側でサイド・メイン・ライトの順番に書けばいい
隙間ができるのはおそらく、
サイド・メイン・ライトの親要素の横幅が900pxになってないから
これについては
>>270 を参考に
274 :
Name_Not_Found :2009/07/16(木) 18:33:16 ID:JWRVi2tt
重複指定というのは #right{ background:#0F9; width:200px; height:500px; float: right; float: right; } のことでしょうか><?;; htmlのほうをいじってみますね・x・ 親要素というのほあヘッダーとフッターのことでしょうか?
>>274 float: right;を2回も書いてどうすんだよ
他の二つも同じ。floatは1回でいい
<div>
<h1>h1</h1>
<p><span>span</span></p>
</div>
h1,p要素の親はdiv
span要素の親はp
詳しくはググれ
276 :
Name_Not_Found :2009/07/16(木) 19:04:09 ID:JWRVi2tt
2個書いてたのは消しても反映されませんでした^^ でもmainのところは片方消したら位置がずれるのでおいておいてもよろしいのですか?
>>276 2個書いても無駄だから1個にしろってことな
mainの方はfloat: left;だけでいい
ちょっとぐらいCSSの書き方勉強しとけ
278 :
Name_Not_Found :2009/07/16(木) 19:22:40 ID:JWRVi2tt
わかりました><;言われた通りやると 上手くいけました^^ありがとうございます。 隙間を閉じるには プロパティ→ボックス→クリア→ボス とかいうのを使うのですしょうか?
>>278 メイン・サイドバー・ライトの親要素のwidthを900pxにしてみれば?
これで3回目だぞ
280 :
Name_Not_Found :2009/07/16(木) 19:34:43 ID:JWRVi2tt
ん〜。。。新しくIDを指定して それをメイン・サイド・ライトを囲んで width900pxにするということでしょうか?
282 :
Name_Not_Found :2009/07/16(木) 19:48:46 ID:JWRVi2tt
#header{ background:yellow; width: 900px; height: 100px; } #wrapper{width:900px; #main{ background:purple; width: 500px; height: 500px; float:left; } #sidebar{ background:blue; width: 200px; height: 500px; float: left;
283 :
Name_Not_Found :2009/07/16(木) 19:50:09 ID:JWRVi2tt
} #right{ background:#0F9; width:200px; height:500px; float: right; } #footer{ background:red; width: 900px; height: 50px; clear: both } } .footer { font-size:small; } phpはとりあえずこのように記述してみました
284 :
Name_Not_Found :2009/07/16(木) 19:51:50 ID:JWRVi2tt
間違えましたcssです>< htmlのほうはこのように書いたのですが 上手く反映されませんでした どこかまちがっていますでしょうか? <div id="header"> <p class="header-font">2009年07月16日(木) 何の日?:駅弁記念日 有名人の誕生日:福田康夫</p> <div class="header-align">カテゴリ一覧 ツールバー ホームに設定</div> </div> <div id=wrapper"> <div id="sidebar"></p></div> <div id="main"><p>aje</p></div> <div id="right"></div> </div>
>#wrapper{width:900px; 閉じてない > <div id=wrapper"> "が抜けてる > <div id="sidebar"></p></div> <p>がない コピペミスかもしれんけど雑すぎ ・wrapperの中にfooterを入れてやらないとclearが効かない うまくいかないなら、どこがどんな風になってるか書かないと伝わらないぞ
286 :
Name_Not_Found :2009/07/16(木) 20:04:21 ID:JWRVi2tt
#wrapper{width:900px; これはfooterの下で閉じたつもりだったのですがこれでは 閉じたことになっていないのでしょうか・w・? wrapperの中にfooterを入れるというのはどういうことでしょう? .footer { font-size:small; } これを入れてあげるということでしょうか? うまくいかないのはrightがやっぱりメインとくっついてくれないのです
>>250 IE8未満はわかるが、Firefox3未満ってなんだよ
セキュリティアップデート終了してるだろ
>>286 せめてhtmlとcssの区別くらいはつけてくれよ
#wrapper{width:900px;
↓
#wrapper{width:900px;}
単なるコピペミスなら気にしなくてもいい
>wrapperの中にfooterを入れるというのはどういうことでしょう?
<div id="wrapper">
略
<div id="footer">footer</div>
</div>
もしかすると↓だけでも解決するかもしれない
#right{
background:#0F9;
width:200px;
height:500px;
float: left; ←rightからleftに変えた
}
>>287 何故かは知らんけど俺のサイトのアクセス解析では、まだバージョン2は現役らしい
289 :
Name_Not_Found :2009/07/16(木) 20:28:14 ID:JWRVi2tt
上手くできました>< 本当にありがとうございました;w; ちなみにfloatをleftに変える作業で上手くいきました><
290 :
Name_Not_Found :2009/07/16(木) 20:42:51 ID:JWRVi2tt
BOXモデルというのはカラムのことなんですかね? あとDreamWeaverでhtmlファイルを 編集したらだめと聞いたのですがそうなのですか?
>>290 トイレでオシッコをしたらだめと聞いたのですがそうなのですか?
さすが英字全角様! 我々の想像の斜め上を行ってらっしゃる!
294 :
247 :2009/07/17(金) 00:39:20 ID:???
すみません。結局の所、テーブルの中のテーブルで 上位にpadding指定がある場合に下位のpadding指定は (IE8以下では)無理という事なのでしょうか?
>>295 そのやり方なら、全体をdivでくくってdivに幅指定してみたら?
297 :
295 :2009/07/17(金) 00:54:49 ID:???
>>296 <div width ="" height=""></div>で指定したらOKですね?
>>297 違う
width ="" height="" ではない。それはテーブルや画像のHTMLでのサイズ指定だろう。
style="height:yyy; width:xxx;"
またはdivにIDかstyleふって外付けかページ内のCSSに書くの。
はぁ
299 :
295 :2009/07/17(金) 01:09:50 ID:???
>>298 ごめん。
何か自分でも可笑しいと思ってたけど・・・
<div style="height:yyy; width:xxx;"></div>でやっても無理だったから
他の試しても無理じゃないかな・・
無理なのは君の指定が不確実なため
単位つけてないだけだろどうせ
302 :
Name_Not_Found :2009/07/17(金) 02:53:45 ID:OnP07dyC
fleXcrollの質問てここでしてもおk? firefoxを基本にして動作確認、作成しているので是非使ってみたいのですが インクルード自体初心者で、挿入の仕方より まず画像の作成方法からご教授願いたいです。 zipに添付してある素材のpng とてもコンパクトになっているけど、オリジナルの素材もあんな風に作っていいんでしょうか。 挿入の仕方もチンプンカンプンなので今調べているんですが・・・ 念のためお聞きしたく質問をしました。 Flexcrollを使用してる方、どうか知識を分けて下さいまし。
>>294 「IE8以下では」って何だよ
普通に「IEでは」って言えよ
「未満」と「以下」を間違えたんじゃないのかな?
煽られてばっかりの
>>247 カワイソス(w
誰も質問の解を答えられないのか…
漏れも試してみたけど、有効な解を求められなかったyo
306 :
Name_Not_Found :2009/07/17(金) 13:58:30 ID:MFbukY/g
IE5.5以上限定のwebアプリを開発しています。 inputタグをクリックしてもフォーカスを当てたく無い場合、IE7までは該当のコントロールに tabindex="-1"を記載すれば可能でしたが、IE8からはクリックするとフォーカスが当たってしまいます。 元々IE7までの仕様がおかしかったといえばそれまでなんですが、コントロールをクリックしても フォーカスが当たらなくなる方法が他にありますか? onfocusイベントで他へフォーカスを当てるという方法は避けたいです。
>>247 のやつ
tdの中にdivって使っていいんだっけ?ダメならその他の要素で代用可
table#table1,
table#table2 {
border-collapse: collapse;
}
table#table1 td,
table#table1 div,
table#table2 td,
table#table2 div {
padding: 20px;
border: 2px solid #000;
}
table#table1 div,
table#table2 td,
table#table2 td.hoge {
padding: 0px;
}
<table id="table1"><tr>
<td>あ</td>
<td><div>あ</div></td>
</tr></table>
<table id="table2" cellspacing="0" cellpadding="0"><tr>
<td>あ</td>
<td class="hoge"><div>い</div></td>
</tr></table>
309 :
307 :2009/07/17(金) 14:09:42 ID:???
>>307 > <table id="table2" cellspacing="0" cellpadding="0"><tr>
cellspacing="0" cellpadding="0"は要らなかった。ミス
>>306 inputタグの上にpositionで同じ大きさのブロック被せてやればいいんじゃねーの?
>>310 タレントの画像の上に透明なgifを貼って、右クリックしてもDL出来ないようにしてた
サイトがありましたが、これもやりたい事は同じですね。
ありがとうございます。
どうも簡単にはいきそうにないですね〜
312 :
247 :2009/07/17(金) 14:27:33 ID:???
回答ありがとうございます。
>>308 >>247 で書いてありますが「テーブルの中のテーブルのpaddingが上位の
paddingが優先されてしまう」問題を回避する方法です。
>>307 四角の枠をpadding:0pxで実現するのであれば、これで良いと思いますが
やりたい事は「テーブルの中のテーブル」なので、これだとテーブルの
中のdiv要素という事になると思います。
ちょっと説明が判り辛かったでしょうか?要は、hogeがpadding:20pxで
hageがpadding:0pxのCSSは、どう書けば良いのでしょうか?という事なのですが…
■CSS
(ここを、どう書けば良いかわからない)
■HTML
<table class="hoge"><tr><td>あ</td><td><table class="hage">
<tr><td>あ</td></tr></table></td></tr></table>
<table class="hage"><tr><td>あ</td><td><table class="hoge">
<tr><td>あ</td></tr></table></td></tr></table>
313 :
307 :2009/07/17(金) 14:48:28 ID:???
>>312 2行目見ろよカス
divをtableに置き換えてcssちょっと書き換えるだけだろ
314 :
247 :2009/07/17(金) 15:09:24 ID:???
回答ありがとうございます。
>>313 divをtableに置き換えてcssを書き換えましたが、結果は一緒
(上位のpaddingが優先されてしまう)でした。
■CSS
table#table1,
table#table2 { border-collapse: collapse; }
table#table1 td,
table#table1 table,
table#table2 td,
table#table2 table { padding: 20px; border: 1px solid #000000; }
table#table1 table,
table#table2 td,
table#table2 td.hoge { padding: 0px; }
■HTML
<table id="table1"><tr><td>あ</td>
<td><table><tr><td>い</td></tr></table></td>
</tr></table>
<table id="table2"><tr><td>あ</td>
<td class="hoge"><table><tr><td>あ</td></tr></table></td>
</tr></table>
威勢よく煽っておいて、間違いカコワルイwww
316 :
307 :2009/07/17(金) 15:24:27 ID:???
>>314 少しくらい頭使えよ
table#table1,
table#table1 table,
table#table2,
table#table2 table{
border-collapse: collapse;
}
table#table1 td,
table#table1 table td,
table#table2 td,
table#table2 table td {
padding: 20px;
border: 2px solid #000;
}
table#table1 table td,
table#table2 td,
table#table2 td.hoge {
padding: 0px;
}
スレタイ100万回読め。ここは「優しく答えるスレ」だ。 優しく答えられない精神状態なら書き込むなよwww
318 :
307 :2009/07/17(金) 15:33:10 ID:???
>>314 すまん。勘違いしてた。
>>316 は忘れて、
table {
border-collapse: collapse;
}
table td {
padding: 20px;
border: 2px solid #000;
}
table td.in1 td,
table td.in2 td {
border: 0;
}
table td.in1 table,
table td.in2 table {
border: 2px solid #000;
}
table td.in1 td,
table td.in2 {
padding: 0;
}
続く
319 :
307 :2009/07/17(金) 15:34:14 ID:???
続き
<table><tr>
<td>あ</td>
<td class="in1"><table><tr><td>あ</td></tr></table></td>
</tr></table>
<table><tr>
<td class="in2">あ</td>
<td class="in2"><table><tr><td>い</td></tr></table></td>
</tr></table>
>>317 優しく教えると丁寧に教えるは別だろ?
320 :
295 :2009/07/17(金) 15:41:38 ID:???
>>300-301 すいません、単位の付け忘れでした。
この角丸テーブルを中央にもって行きたくて
書き込みの後に
<div style="height:200px; width:200px; background-position:center"></div>と記述したのですが反応無いです。
今度は有ってると思ったのに、御指摘お願いします。
</div>じゃなくてテーブルをちゃんと囲ってるんですか?
322 :
295 :2009/07/17(金) 16:20:20 ID:???
>>321 サイズ変更は適用されてるので囲ってると思います。
323 :
307 :2009/07/17(金) 16:28:34 ID:???
>>322 divの親要素にtext-align: center;
divにmargin: 0 auto;、text-align: left;を追加
text-align: left;は場合によってはいらないかも
<div style="text-align: center;">
<div style="height:200px; width:200px; margin: 0 auto; text-align: left">table</div>
</div>
こんな感じ
324 :
295 :2009/07/17(金) 17:01:01 ID:???
325 :
Name_Not_Found :2009/07/18(土) 07:30:27 ID:FIVHoP6u
326 :
Name_Not_Found :2009/07/18(土) 07:54:13 ID:FIVHoP6u
補足 IE8でのテストです。 コメントの代わりに <P></P>を入れても崩れるので、 p {margin:0px; padding:0px;} としてみましたが、変化ありませんでした。 コメント箇所を<div></div>で括るとレイアウトは崩れませんでした。。 <div> <!--コメント--> </div>
328 :
Name_Not_Found :2009/07/18(土) 08:14:45 ID:FIVHoP6u
あら??何故でしょう・・・。 ビルダーのプレイビュー、IE8共に崩れてしまってます。 PCの調子が悪いのでしょうか・・・。 知人のPCで見てみます。
329 :
Name_Not_Found :2009/07/18(土) 08:20:20 ID:FIVHoP6u
>>326 そもそも、本文を入れたい部分の設定がない。
全部、空divでレイアウトおいているだけだから。
レイアウトしたい真ん中部分用のdivが必要。
<div> ← これ追加。必要に応じて、幅とか文字スタイルとか必要だと思うが。
<!-- comment --><!-- comment --><!-- comment --><!-- comment -->
<div id = "leftmenu" style="border: 2px solid #666;padding: 0;">xxx
</div>
<div id = "right">
<div>tete</div>
</div>
</div> ←これ追加
331 :
Name_Not_Found :2009/07/18(土) 09:11:44 ID:FIVHoP6u
おお!! 直りました。 コメントも本文となってしまうのですね^^; 勉強になりました。 皆様、ありがとうございましたm(__)m
スレ違いだったらごめんなさい。
FC2に問い合わせても連絡が来ないので書き込みさせ貰いました。
ヘッダーとコンテツとフッターと2つのフレームで3つにページを別けてサイトを作っています。
ヘッダーとコンテンツの広告を取り除きたく
http://www.fc2web.com/Q&A17.html ↑に記述してあるとおり下記の事をしました。
メニューがあるhtmlの名前をmenu.htmlにし
真ん中のhtmlをmenu2.htmlに名前を変更し
1番下のhtmlをframe.htmlに名前を変更し
それでindex.htmlに
<META http-equiv=refresh content=0;URL=
http://ユーザー名.web.fc2.com/frame.html >を記述してアップロードしたら
1番下のframe.htmlだけが表示されました。
1番下だけに広告を表示させるにはどうしたらよろしいですか?
frame.htmlは3つのフレームのどれかじゃなくて、フレームを表示するhtml名でしょ 一番上をmenu.html、次をmenu2.html、一番下をfooter.htmlにでもして、それを表示してるindex.htmlをframe.htmlにすればいいんじゃないの
overflow:auto;で疑似フレームつかってるんですが IEのみ! スクロールバーが表示はされるのですが、固定されてしまっていてスクロールが出来ません。 なんなのIEマジで消えて欲しい! 解決方法ググっても全然無いし、休日出勤数時間無駄にしてます…
>>334 そんなバグあったっけな。記述ミスじゃねーの?
てか質問する気あんならソース見せろよ
愚痴ならチラシの裏にでも書いてろ
ここはグチるスレではありませんよ
>>333 その方法でやってみたらサイトが表示されなくなりました。
”HTML言語”って”Hyper Text Markup Language 言語”になって馬から落ちて落馬みたいだよな
むしろ 金閣寺テンポー みたいな感じじゃないだろうか
すいません。質問です。
IE7で親要素のCSSに text-align:left; を使うと
子要素の最初のボックス要素のCSSの margin が
反映されなくなるという仕様に気づいたのですが
(IE8, IE6 では普通に反映されます。
ついでに 最初の要素のCSSに float:left; を追加すると
margin が反映されるようになります。
現象を再現したテストページを用意したのでご参照ください
http://www.geocities.jp/caphawk12001/up/ie7test.html これで生じたズレを治すにはCSSハックや最初の子要素の前に
身代わりのボックス要素を追加する以外に何かいい方法はあるでしょうか。
教えてください。よろしくお願いします。
仕様w
>>341 そんな面倒な問題無かったように思うんだけどなぁ
そもそもtext-align: left;ってデフォじゃなかったっけ?
IE7が手元にないから詳しくは分からんけどmarginが狂うのなら、他が原因なんじゃね?
関係ないけどfloatとmarginを同じセレクタに指定するときにmarginが倍になるバグがあるから注意
display: inline;を一緒に指定するのが簡単な解決策な
あと、ieとfirefoxなんかではpadding,borderと一緒に指定したとき
width,heightの認識が若干違うから一緒には使わないこと
344 :
220 :2009/07/19(日) 04:00:02 ID:???
>>241 言われたとおりにやっても出来なかったので
この役立たずが!わざと変にしようとしてんのか?
などと思ったりしたんですが、
>>241 を参考に少し調べてみたら
ついに成功しました!どうやら<br class="clear"/>の
位置が間違っていたようです てへへ
とゆうことで少し遅れましたがありがとござます!
ちょっと見ただけでソースが書けるなんて
ほんとに凄いことと思います
僕もいつかここで回答出来るようにこれから
勉強していこうと思います
また聞きに来るかもしれないので
その時はよろしくお願いします
>>344 役に立たないのはお前の脳味噌なんだけどな
この4日で何も成長していない・・・
br要素にclear:both;ってバグじゃないの……?
>>347 brが持つ改行っていう本来の意図を考えるとおかしいかもしれないけど
W3Cで決められてる文法上では何の問題もないはず
どうしても気になるなら、floatした要素の次にくる要素でclearしてやるとか
:afterの擬似クラス使ったclearfixとか使えばそっちでもできる
clearプロパティは、CSS2だとブロック要素にしか適用出来ないみたいだけど、CSS2.1だとインライン要素にも適用出来るのかな どちらにしても<br /><br />と似たような用法だと思うけど
インライン要素にclearで上手くいくのはUA側の誤りだったんだな。今初めて知った 見た目では一緒でもやっぱり気付けた方がいいよなぁ 結局いらない要素が増えないclearfixが一番楽なのかな。後続の要素にclearは面倒だし
最近CSSを知った者です… 以下のテーブルタグを多用するのでst.cssに組み込んでしまえばいいのかな? と思ったのですがcssでのテーブルタグの記述の仕方がいまいちわからないかったので教えていただけますでしょうか?
以下がそのテーブルタグです <table cellspacing=0 border=0 cellpadding=0 width=700> <tr> <td width=1></td> <td width=1></td> <td width=1></td> <td width=2></td> <td width=2></td> <td width=686></td> <td width=2></td> <td width=2></td> <td width=1></td> <td width=1></td> <td width=1></td> </tr> <tr> <td height=1 colspan=4></td> <td height=1 bgcolor=#808080></td> <td rowspan=5 bgcolor=#808080> <font color=#FFE6F0 size=3><b>タイトル </b></font> </td> <td height=1 bgcolor=#808080></td> <td height=1 colspan=4></td> </tr>
長くて1レスで投稿できなかったので…つづき <tr> <td height=1 colspan=3></td> <td height=1 colspan=2 bgcolor=#808080></td> <td height=1 colspan=2 bgcolor=#808080></td> <td height=1 colspan=3></td> </tr> <tr> <td height=1 colspan=2></td> <td height=1 colspan=3 bgcolor=#808080></td> <td height=1 colspan=3 bgcolor=#808080></td> <td height=1 colspan=2></td> </tr> <tr> <td height=2></td> <td height=1 colspan=4 bgcolor=#808080></td> <td height=1 colspan=4 bgcolor=#808080></td> <td height=2></td> </tr>
最後です。なんかいろいろすみません; <tr> <td colspan=5 bgcolor=#808080><br><br></td> <td colspan=5 bgcolor=#808080><br><br></td> </tr> <tr> <td colspan=5 bgcolor=#808080></td> <td> <table width=100% cellspacing=2 border=0 cellpadding=10 bgcolor=#FFFFFF> <tr> <td align=left bgcolor=#DCDCDC> <font color=#CD5C5C size=2>本文</font> </td> </tr> </table> </td> <td colspan=5 bgcolor=#808080></td> </tr> <tr> <td height=7 colspan=11 bgcolor=#808080></td> </tr> <tr> <td height=2 colspan=11></td> </tr> <tr> <td height=2 colspan=11 bgcolor=#808080></td> </tr> </table>
テーブルコーディングからCSSレイアウトにしたいってことかなぁ st.cssてのは何かで用意されてるファイルか? まぁCSSについて軽く調べてきた方が良いよ
>>342 >>343 自分もこんな問題おきたのはじめてでしたw
とりあえずもう一度、他に原因がないか見てみます。
ありがとうございます。
>>352-354 にあるようなテーブルを、
外部CSS(ファイル名: st.css)をいじることで表現したいってことだろ。
>>356 にあるように、
CSSの基礎中の基礎程度は、理解してないと教えても意味無いと思う。
セレクタとか宣言ブロックとか言っても分からないだろうな
360 :
Name_Not_Found :2009/07/19(日) 16:02:14 ID:SEr8iJoT
http://nukkorosu.80code.com/img/nukkorosu9917.gif 画像左が現在の状態で、画像右が理想です。
#right内の.txtの幅を中身に合わせて表示させたいのですが、
一番幅が広いものに合わせて引っ張られてしまいます。
以下に現在のソースを添えますので、ご指導いただけると幸いです。
(.txtのmarginは#rightの存在をわかりやすくするためのものなので無視してokです)
HTML部分
<div id="left">
menu
<ul>
<li>list<li>list<li>list
</ul>
</div>
<div id="right">
<div class="txt">title<br>本文</div>
<div class="txt">title<br>本文本文本文</div>
<div class="txt">title<br>本文本文<br>本文本文</div>
</div>
CSS部分
#left{
background:green;width:200px;float:left;
}
#right{
float:left;background:gray;
}
.txt{
margin:0 0 10px;background:red;
}
#right div{ display:inline; } 追加
362 :
360 :2009/07/19(日) 16:32:02 ID:SEr8iJoT
>>362 XHTML部分
<div id="left">
menu
<ul>
<li>list<li>list<li>list
</ul>
</div>
<div id="right">
<div class="txt">title<br />本文</div>
<div class="txt">title<br />本文本文本文</div>
<div class="txt">title<br />本文本文<br />本文本文</div>
</div>
CSS部分
#left{
background:#008000;width:200px;float:left;
}
#right{
background:#aaaaaa;float:left;
}
.txt{
background:#ffaaaa;float:left;clear:both;
}
365 :
364 :2009/07/19(日) 16:55:12 ID:???
ごめん。width:auto;を入れないと間違った記述になるらしい #left{ background:#008000;width:200px;float:left; } #right{ background:#aaaaaa;width:auto;float:left; } .txt{ background:#ffaaaa;width:auto;float:left;clear:both; }
366 :
360 :2009/07/19(日) 16:59:03 ID:???
>>365 うおおおおおできた!!!!できた!!!!!!!!
clearってこうやって使うんですね。一つ勉強になりました。
ありがとう、これで思い通りにレイアウトできました。本当に感謝!
CSS2の仕様ではfloatしたブロック要素には明示的に横幅指定しないといけないわけだけど 実際にはあんまり気にしなくてもいいもんなのかな
width:auto;入れときさえすれば問題ないだろ
CSS2の仕様にはwidth: auto;の値がきちんと書かれてないから、それじゃ解決にはならないんだよ CSS2.1からだとshrink-to-fitになるから問題はない まぁUA側でautoがshrink-to-fitで統一されてるかもしれないし、現時点で実害は全くないけど
CSS2を採用してるブラウザは皆無
W3CからはCSS2の仕様書が外されたって聞いたけど
皆が皆最新のブラウザ使ってくれれば楽なんだけどなぁ 昔のバージョン使ってる人がいる以上W3Cが採用しようがしまいが、この問題には関係ないよね
そうだな いつまでも古いバージョンをサポートし続けるMS氏ね
374 :
351 :2009/07/19(日) 21:50:16 ID:???
>>352-354 のテーブルを外部cssファイルに組み込んで…
と思ったのですが、いろいろ初心者用cssサイトとか見たのですが
>>352-354 のような
ちょっと凝ったテーブルでのやり方はわからずじまいでした
(シンプルなものは理解と作成できたのですが…)
ここは初心者といっても私のような本当に半歩踏み始めた者が出入りする場所ではなかったのですね…
すみませんでした
向上心があるならいいんだよ
377 :
351 :2009/07/19(日) 22:37:45 ID:???
>>375-376 ありがとうございます;
なんとなくはわかるのですが…ほんとになんとなくです
最初のtr〜/trの中の複数のtdの幅を変えることで上部の角丸ができてるのかな??
とかそんなLvです;
上部の角丸のはそれほどこだわってないのでなくてもOKなんでそのへんはごっそり削除しようかとも。
・tdの背景色は全て同じなのでこのあたりをまとめられるのではないか?
・テーブルの中にクラスでもう一個のテーブルを指定したらできるのかな?
わかったのはこれくらいです
HTMLはなんとなく書いてたことはあるのですが、本格的に(ちょっと必要にせまられて;)
調べ始めたのがここ数日です
>>377 あんな滅茶苦茶なテーブル理解出来てるんなら、divで角丸作るのは楽。作りたいんでしょ?
どんな構造になってるか詳しく知りたいなら、これをhead要素内に貼ってみそ
<style type="text/css">
table{border:solid 1px #000000;}
td{padding:5px;border:solid 1px #000000;}
</style>
ところで、CSSの指定の仕方をまず勉強した方がいいよ
・ある要素すべてに適用
・ある要素の中の、ある要素すべてに適用
・あるclassが指定された要素に適用
・あるidが指定された要素に適用 等
角丸ならborder-radiusでおk
380 :
351 :2009/07/19(日) 23:10:24 ID:???
>>378 うわあ・・・
それ入れるだけでどういう構造になってるか一目瞭然ですね!!
テーブルの中にテーブルを入れるのではなく、中央のテーブルを各テーブルで囲ってたんですね
それであんなに行数多いのか…
あれはオークのテンプレサイトから持ってきたやつだったんですが
まずちょっと自分でHTMLで作ってみて、それからcssにした方がいいのでしょうか?
>>380 まずCSSの意味を調べたほうがいいかもしれない
382 :
351 :2009/07/20(月) 00:53:31 ID:???
外部cssに、これ↓を入れました
/*テーブル部分*/
.td1 {
width:750px;
padding :10px 10px;
border-collapse: separate;
font-size:13pt;
color:#FFE6F0;
background-color:#808080;
}
.td2 {
width:700px;
font-size:8pt;
text-align : left;
padding :10px;
color: #808080;
background-color:#ffffff;
}
これを<div class="td1">の中にtd2を<center>タグつきで入れました
そしたらこんな感じです
ttp://www1.axfc.net/uploader/Img/so/52495.jpg だいぶ思ったような感じにできました!ありがとうございます
↑のでおかしな記述のとことかはないでしょうか?
初めてやったのでちょっと不安です
>>379 それはどこに入れたら良いのでしょうか?
>>382 >>379 はCSSのプロパティの一つ
でも、次の次に勧告されるCSS3の新プロパティで、ほとんどのブラウザが対応してないから気にしなくていいよ
あと、参考アップロードするなら、画像よりhtmlファイルのほうが
384 :
351 :2009/07/20(月) 01:11:17 ID:???
そうでしたか… やっぱりちょっと角丸に未練はあったようです; htmlはまだサーバーにうpしてなかったので画像にしました 斧ではhtmlファイルがうpできなかったので・・・
386 :
351 :2009/07/20(月) 01:33:14 ID:???
すみませんお布団入ってしまいましたorz また朝にでも上げさせていただきます
>>383 ほとんどのブラウザ…?
ざわ…ざわ
ざわ…ざわ
htmlをうpろだにうpするとか何考えてんだよ
それの何がいけないのかわからない。
そのサイトのCookie盗んだりブラクラ仕掛けたり出来るわけだが うpろだだから怪しいと思う人も少なくなるし
クッキーから削除用パスワードを読み取って自サーバーのプログラムに飛ばして記録したりってか? r、 r、 ヽヾ 三 |:l1 \>>/ |` } ヘ lノ `'ソ /´ / / \ / ─ ─ \ / (●) (●) \ | (__人__) | ないない \ ` ⌒´ ,/ r、 r、/ / r、 ヽヾ 三 |:l1 ヽヾ 三 |:l1 \>>/ |` } \>>/ |` } ヘ lノ `'ソ ヘ lノ `'ソ /´ / /´ / \. ィ \. ィ \ \ \ \ ) │ / r、 \ / ヽヾ 三 |:l1 \ / \>>/ |` } \ / ヘ lノ `'ソ \ ( //´ / ヽ \ / \. ィ\ ) \ ノ \ /
そもそもjsの書き換えはユーザー側でいくらでもできるわけで 取られて困るようなクッキーは全部サーバー側で処理するよね それにブラクラ引っかかるような馬鹿ってまだいんの?
そして、取られて困るような認証クッキーを盗られてサーバー側で処理してしまうわけですね。わかります。
ブラクラならうpろだじゃなくても踏むだろ >うpろだだから怪しいと思う人も少なくなるし むしろうpろだなら余計慎重になると思うが
.htmlだけでcgiとかphpで使われてるクッキー盗るのなんて、サイトの管理者がよっぽどアホじゃなきゃ無理じゃね?
javascript使えばいくらでもできるだろww 馬鹿多くて心配だわ
html許可すると踏み台にされるからなあ、わざわざHP開設しなくてもいいんだし。 経験者が言うんだから間違いない
>>397 お前はそんなに重大な情報をうpろだに送信してんのか
<form action="
http://example.com/ " method="post" target="test">
<input type="hidden" 〜 />
</form>
<iframe src="about:blank" name="test"></iframe>
これをonloadでsubmitしたら開いた人には気づかれずにPOSTできるな
iframeをdisplay:noneにしたら何も表示されないしimgで画像を読み込めばただの画像に見える。
あとは掲示板にURL変えながら貼りまくれば立派なスパムの完成だな
でっていう もはやうpろだと関係なくね?
>>397 うpロダが変な設定してなけりゃjsで読めるクッキーはjsで書いたクッキーだけだろ?
HTMLの書き換えはクライアントが好きにできるんだから
jsでいくらでもできたとしたらセキュリティも何もないだろ
>>400 うpロダの関係性皆無
ろだでも同じように出来るってことだろ 不特定多数が自由にアップロードできるから危ないってだけ
実際に運用したことない知ったかぶり多いね
>>385 なんかここHTMLあげれないみたいだよ
textareaの横幅(colsで指定するやつ)をtd width=と同じ要領でピクセル数にて指定することはできないでしょうか
style="width:100px"
height:1(縦幅1px)のdivにborder代わりの横棒画像を入れたいのですが、 height:1を指定してもどうしても1文字の高さ分が勝手に確保されてしまいます。 今はごり押しで以下のようにしているのですが、このやり方変じゃないでしょうか。 <div style=" padding:4px 0 4px 0; width:100px; height:1px; overflow:hidden; "> <img src="border.gif" width="100" height="1" style=" vertical-align:text-top; " /> </div>
padding:0; width:100px; height:1px; overflow:hidden;
>>410 実はちょうどそこのpaddingが悩みの種でして、padding:0にしたいんですが0にするとブラウザによっては横棒が消えちゃうんです
overflow:hidden;に巻き込まれてるのかなあと思ってるんですが・・・
>>409 <div style="width: 100px; height: 9px; background: url(./border.gif) 0 4px no-repeat"><span style="display: none">border</span></div>
別にこの方法でもoverflow使ってもどっちでもいいけど
マークアップを考えるなら<img>使った方がいいのかも
ちなみにpadding,borderと一緒にwidth,heightつけるとブラウザによって表示が違うから注意
面倒だけど
<div style="width: 100px;"><div style="padding: 0 4px;">inner</div></div>
こんな形にしないといけない
<div style="width: 100px;"><div style="padding: 4px 0;">inner</div></div>
こっちならオッケー
>>409 の場合はpadding: 4px 0;とheight: 1px;が一緒に入ってるのがアウト
413 :
412 :2009/07/21(火) 16:48:45 ID:???
読み違えしてた。訂正 <div style="width: 100px; height: 1px; background: url(./border.gif) 0 0 no-repeat"><span style="display: none">border</span></div>
>>413 超愛してる
自分のより明らかに直感的なのでぜひこっちにしたいと思います
span使うなんて発想なかったんで勉強がてらためしにspanを外した挙動を
ためしてみたところおそらく同じだったのですが、spanを入れた方がよいでしょうか?
今のソースはこんなかんじになりました
<div style=" width:100px; height:1px; background:url(/border.gif); repeat-x; "></div>
415 :
412 :2009/07/21(火) 17:35:28 ID:???
>>414 divは空要素じゃないから、あんまり良くない
>>409 にdivがあったからdiv使わないといけないのかなと思ったけど別にそうじゃないみたいだね
↓じゃだめなの?
<img src="border.gif" width="100" height="1" alt="border" /><br />
ただ、改行の本来の意図からは外れてるから、↓でもいいかも
<img src="border.gif" width="100" height="1" alt="border" style="display: block;" />
本当ならボーダーみたいなページの内容じゃなくてデザインに関わる部分は全部CSSでできるといいんだけど中々難しいよね
>>415 超々愛してる
たしかにspan抜くとIE6の挙動が変でした
わざわざXPの復元でロールバックした甲斐がありました
> <img src="border.gif" width="100" height="1" alt="border" style="display: block;" />
これもためしたみたんですが、IE6だと1文字分の高さのスペースが強制的に入っちゃいました
もしこっちが想定通りに動いちゃったらdivいらなくなってサイト全般あっちこっち作り直しだからちょっとホッとしてますw
IETester使え
愛してるってのが面白いとでも思ってるんなら止めた方がいいよ。むしろ不快
420 :
Name_Not_Found :2009/07/21(火) 19:20:11 ID:XMBJ7I/I
いま、フレームで、 左、リンク 右、リンク先の表示 という感じで、HTMLを組んでいます。 そこで、リンク先をステータスバーに出さないようにしたいのですが、 最近のブラウザでは可能でしょうか? いくつかネットで調べて試しましたが、IEではポップが出てきました。
javascriptで可能だけどオススメしない
422 :
Name_Not_Found :2009/07/21(火) 19:36:35 ID:XMBJ7I/I
左:メニュー 右:内容 ステータスバー:アドレス って言いたいの?
今ふと思ったんだけどなんで質問スレってjavascript と別れてるんだ? ごっちゃにしちゃうと質問が多すぎて処理できないってこと?
別れてる方が使いやすいだろ
夏だなあ
428 :
Name_Not_Found :2009/07/21(火) 21:51:40 ID:plI0zE8V
こんばんは。場違いでしたら申し訳ないのですが、一つ質問をさせてください。
先程自身のブログをIEで閲覧するとFireFoxとは表示が違う事に気が付きました。
具体的にどのように変わるのかと言うと、IEだと文字やページが全体的に大きく表示されてしまいます。
質問を簡潔に説明すると、『FireFoxとIEを同じように統一して表示させたい』です。
とあるサイトによると、『ソースを表示させて最初に出てくるHTMLを変えればいい(?)』との事で、そこで有名な他サイトのソースを見ると、
『<?xml version="1.0" encoding="euc-jp"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns="
http://www.w3.org/1999/xhtml " xml:lang="ja" lang="ja"><head>』
このようなHTMLが最初に出る事が多いんですよね。
勿論このような有名サイトではFireFox、IE共に表示が変化したり、レイアウトが崩れたりする様な問題は一切無いんです。
一度このHTMLを最初に入力してみたところ、一度は成功したように見えたのですが・・・
IEを再起動してみると元通りに戻ってしまいました。この様な状況が繰り返されているので質問させていただきました。
ちなみに変更前の最初のHTMLは、
『<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd ">
<html><head>』
でした。初心者丸出しで申し訳ありません。分かり難いですよね。
改善方法、解決方法を御存知の方は助言の御言葉を頂けないでしょうか。どうか宜しくお願い致します<(_ _)>
>>428 FireFoxじゃなくてFirefoxな
ソース晒すか、リンク張るか、HTMLファイルをアップロードしろ
複数指定(もしくは事前定義)したファイルからTemplateParamの内容を テーブル一覧やXMLで出力する機能ってありますか? ページの更新履歴を自動化したいと思ったのですが、無理ですかね。
432 :
Name_Not_Found :2009/07/21(火) 22:11:04 ID:plI0zE8V
キャッシュは問題無いと思うんですけどね。もう少し調べてから来ます。ありがとうございました。
>>426 1年ぐらいここにいるけど javascript に関する質問をして
スレチだと言われ、諦める質問者って多くない?
まあ初心者質問スレに行けばいいんだが、
質問スレが沢山あると困る人もいるしな。
質問のガイドラインでも作った方がいいかなーと
>>432 お前は「調べて」じゃなくて「マルチして」からだろ
>>433 スレタイすら読まない馬鹿が悪いんじゃね?
誘導はあってもいいだろうけど、テンプレに書き加えたところでどうせ読まないだろ
javascriptは不必要だろ
関係ないが質問者は必要以上にかしこまることはない 行き過ぎると帰って慇懃無礼でちょっと不快 ぶっちゃけ要点だけしっかりと抑えてあればいいと思う まぁ知識がないと質問の仕方もむずかしいだろうけど
俺は丁寧な文章の方がやる気出るんだけどなぁ
俺も スレチはともかく礼儀作法の好みまで”俺ルール”適用されることこそ不快
質問です。後記のソースを閲覧した際に本来なら 1. li 2. li 3. form と連番で表示されるべきなのですが、firefoxに限り 0. li 0. li 0. form このようになってしまいます。 CSSのみを変更することでこの問題を改善する手立てをご存知の方がおられましたらご教授お願い致します。 なお、<ol>を使わずに<div>で代用している理由は子要素として<form>が存在するため、以下に反してしまうからです。 (<ol>〜</ol>に<div>を書いてはいけない、<li>〜</li>に<form>を書いてはいけない) 実際の表示はもちろん、HTML4.01 Strictに沿った形でのソースを希望しています。 div#ol { list-style-type: decimal; } div#ol div { display: list-item; } <div id="ol"> <div>li</div> <div>li</div> <div><form>form</form></div> </div>
441 :
440 :2009/07/22(水) 00:16:30 ID:???
大変申し訳ありません。次の2行は訂正させていただきます。 >なお、<ol>を使わずに<div>で代用している理由は子要素として<form>が存在するため、以下に反してしまうからです。 >(<ol>〜</ol>に<div>を書いてはいけない、<li>〜</li>に<form>を書いてはいけない) 質問内容は<ol>を使わずに<div>で同じ動作をさせる方法についてです。 宜しくお願い致します。
>>440 なんかその記述じゃ、どのブラウザでもまったく機能しないんだけど。XHTML1.1で試してるからかな
ol要素は「リスト要素の項目」のみ内包できる
display:list-item;を指定した要素ももちろんdiv要素であれ内包できる
ol#ol {
list-style-type: decimal;
}
div#ol div {
display: list-item;
}
<ol id="ol">
<div>li</div>
<div>li</div>
<div><form>form</form></div>
</ol>
443 :
442 :2009/07/22(水) 01:12:24 ID:???
ごめん間違えた ol#ol{ list-style-type:decimal; } ol#ol div{ display:list-item; }
444 :
Name_Not_Found :2009/07/22(水) 03:12:31 ID:G6ZFSDIk
すいません。初心者です。 htmlを生成するcgiを設置しているんですが、cssファイルでスタイルシートを定義しています。 ところが、新しいサーバに映った途端、cssファイルが無効になってしまった様なんです。 サーバうつるまでは、異常なかったんですが。 とりあえず、そのサーバは、cgiはcgi-binフォルダに入れないといけないというのが今までのサーバと違うところですが、 誰か、解決法とか分かる人いますか? よろしくお願いします。
445 :
Name_Not_Found :2009/07/22(水) 03:44:49 ID:4uDBJSuG
間違えたらごめんだけどそのcgi-binフォルダにcssファイルを入れて 設定をしなおしたら? レンサバですか? 後はレンサバに聞くとか?
ファイル階層が変わった事で、ファイルの指定がうまく行って無いんだろうね
左右にfloatした<div>〜</div>の後で レイアウトに影響を与えずに style=" clear:both; をしたいんですが良いタグないでしょうか。
div:after{ clear:both}
>>448 ありがとうございます
さっそくそれをヒントにググってみました
けっこうブラウザ互換で奥深いみたいですね
下のサイトで互換CSS例出てたんですがまさかここまで複雑とは
ttp://hato-style.chu.jp/note/note_20070309.html /* モダンブラウザ向けclear */
#box:after{
display: block;
height: 0;
visibility: hidden;
clear: both;
content: ".";
}
* 追加 MacIE 5 と WinIE 7 向け */
#box{
display: inline-block;
}
/*MacIE \*/
* html #box {height: 1em;}
#box {display: block;}
/* */
今の時代表をtableタグで作るのはオススメできないって言われたんだけど、 やっぱりCSSで作るべき?
>>450 それは何か勘違いしている気がする。
「tableは表を作る為の要素だから、レイアウトを構成する為に使うのはオススメできない」ならわかる。
ちなみに、tableとcssは全くの別物だから、同列のものとして代替するのも何か違う。
「tableレイアウトはマークアップ的に良くないから、div等とcssを使う」ならわかる。
CSSが無くても最低限表示できるようにテーブル使うこともある 絶対に使うなと言うのは極端過ぎる
よほどでかいものじゃない限り、表は出来る限りテーブル要素で作るべき ページのレイアウトをtable要素でするなってこと
454 :
453 :2009/07/22(水) 18:02:36 ID:???
テーブル要素→table要素
表組をなんとしてでもdl,dt,ddで表現しようとするバカもいるけどな。
456 :
450 :2009/07/22(水) 18:20:24 ID:???
よかった・・・ジイチャンが「浪曲のほぉむぺぇじ建てたい」(なんか勘違いしてる)とか言い出して、 10年くらいぶりにサイト作り始めたんだがtableゴリゴリの時代に育ったからどう作っていいか全く分かんなくてさ・・・ サイト全般のレイアウト→CSS、表→tableで問題なしってことだよね tableならセルの嵐で仮想ドット絵全身マリオ作れるんだが div+CSSだと左のdivと右のdiv隙間開けずにくっつけることさえできんw
>>456 じいちゃんのために…
おまえ、いい孫だな
458 :
Name_Not_Found :2009/07/22(水) 20:55:42 ID:JLSDgoRM
cssはcssで有効だから 枠組みを語る場合は table vs div で語れ
459 :
440 :2009/07/22(水) 21:10:32 ID:???
>>442-443 >なんかその記述じゃ、どのブラウザでもまったく機能しないんだけど。XHTML1.1で試してるからかな
付加される数字が要素(div)の外側に存在していることが理由だと思われます。
div#olにpadding-leftを追加すれば機能するはずです。
提示したソースが不完全でした。申し訳ありません。
今回の質問についてですが、<li>を<div>で代用する方法ではなく、
<ol>を<div>で代用した際にfirefoxで起こるバグ(
>>440 参照)を解消する方法についてです。
どうぞ宜しくお願い致します。
>>456 趣味のサイトなら全てテーブルでも構わんよ
中身が良ければそれでよい
>>460 ネットで公開すれば当然自分以外にも見る人はいるわけで。情報を発信する以上、その考え方はエゴだよね
どれだけ優れていても媒体が貧弱だと意味がないし勿体ない。まぁそれが趣味である所以なのかもしれないけど
CSSを使っても使わなくとも見た目が同じなら何使っても良い
こっそり釣針が
PC貧弱&回線細い時代ならテーブルだくだくだと遅くてストレスだったけど 今ならなんでもいいんでない? 俺はやり続けるなら時代についていけないロートルになりたくないから勉強するけど
>>459 div要素はol要素じゃないから、ブラウザの拡大解釈で表示出来てるだけじゃないの?
table要素にするって指定はあるけど、ol要素にするなんてのはないし
list-itemを指定したらol要素/ul要素の子要素になるわけで、divの子要素になるわけじゃないから
てかちょっと待て
>(<ol>〜</ol>に<div>を書いてはいけない、<li>〜</li>に<form>を書いてはいけない)
これはなんだよ
li要素はブロック要素であるform要素を内包出来るぞ?
>>442 <!ENTITY % ol.content "( %li.qname; )+" >
DTDでは上のようになってるからli以外含めることは出来ないはずだけど
467 :
440 :2009/07/23(木) 12:15:59 ID:???
>>465 HTML的にもCSS的にもvaildしているため問題が無いものと考えておりましたが、それが原因なのかもしれません。
おそらくはdiv要素を使用する際にはol要素でのstart属性に当たる記述がないからなのだと思います。
>てかちょっと待て
確かに仰る通りです。投稿後に誤りに気付いたため
>>441 にて訂正させていただいております。
<ol>を<div>で代用する理由付けとして加えていたのですが、質問に直接的には関係ありません。
display: list-item;での実現ができることが最もスマートな方法だと考えていたのですが……。
色々と試してみた結果、CSSを下記に書き換えることでfirefoxでも同様の表示ができることが分かりました。
なお、contentプロパティと一緒にdisplay: list-item;を併用している理由につきましては、IE8未満への対応となっています。
div#ol div {
display: list-item;
list-style-type: decimal;
}
html:not([lang*=""]) div#ol div {
display: block;
counter-increment : number;
}
html:not([lang*=""]) div#ol div:before {
padding-right: 9px;
}
html:not([lang*=""]) div#ol div:before {
content: counter(number) ".";
}
div#ol form {
display: inline;
}
468 :
440 :2009/07/23(木) 12:18:05 ID:???
修正です。 div#ol div { display: list-item; list-style-type: decimal; margin-left: 20px; } html:not([lang*=""]) div#ol div { display: block; counter-increment : number; } html:not([lang*=""]) div#ol div:before { padding-right: 9px; content: counter(number) "."; } div#ol form { display: inline; }
ジイチャンの個人趣味サイトなら、訪問者も高齢者が多いんでない? だったら、ボイスブラウザ対応とか文字サイズでっかくしてもレイアウトが壊れないようなデザインを 考慮したサイトにしなきゃね
そもそも高齢者がPC使ってマイナーサイトを探し出すことが出来るのか
>>451 ややこしい言い方してますね
テーブルはだめぽ。。。これでおk
あとね
いまだにhtml4.01で作ってる人は
いい加減xhtmlに移行させなさいね
xhtml構造でリキッドデザイン+php=最低限いまどきのコンテンツ
>>471 テーブルダメだけだと意図が伝わらないし明らかにおかしいだろ
xhtmlはまぁ同意してもいいけど、最近はUXGAも増えてきてるしリキッドは鬱陶しいだけだろ
まぁmax-widthとダイナミックプロパティ使ってれば問題ないか
管理の手間減らすためのphpなんてDBMSがないと使いもんにならないし、大手のレン鯖じゃほとんど無理だしで実際難しいところだよな
そもそもユーザからすればphpだろうがcgiだろうがhtmlだろうが関係ないわけだけど
ネタにマジレス
こんなレベルの低いネタなんてあるわけねぇだろwwwwwww
君たちはほんとクズ揃いですね 何がダメなのか、その論拠を明確にして わたしの、いや現IT界の持論を論破してみなさい
現wIwTw界wwwwwwwww
せめてHTML4.01で作ってほしいね 2chなんてDOCTYPE宣言すらないよ
宣言なんてしてもしなくても一緒だろうが。 いちいち宣言して「俺プロwww」とかの自己満野郎多すぎ。
ブラウザが寛容だから表示されてるだけであって
>>480 つくったサイトうpしてみなさい
w3cで-300点ぐらいでしょ!?w
>>482 -200越えてるけど何か?
不備なく見えてるから問題ないと思うが。
ちなみに1日6000~10000PVくらいのオタ系情報サイトな。
自分のサイトならブラウザで見れればいいんじゃね。
学校の課題なのですが、javascriptのマウスオーバーについて質問です。 <script type="text/javascript"> <!-- function naka(){ document.test.src="neko2.jpg"; } function soto(){ document.test.src="neko.jpg"; // --> </script> <div> <img src="neko.jpg" name="test" alt="pic" onMouseOver="soto()" onMouseOut="naka()"> </div> 下のbodyの文が違うようで、形式チェックに通りません。 どう改変したらいいのでしょうか?
javasprictはスレ違いな上に、学校の課題のことを2chで質問するようじゃ先が思いやられる 先生に質問しなさい
ヒント:改行
関数を閉じてないから
>>487 改行ですか?すいませんわかりません
>>488 関数を閉じてないから
とはどういうことでしょうか?
>>489 これよーく見て。何か足りなくない?
function naka(){
document.test.src="neko2.jpg";
}
function soto(){
document.test.src="neko.jpg";
// -->
>>490 わかりましたが、そこの部分ではないようです
書き込むときに改行を減らすときに間違って消してしまったようです
マウスオーバーとかググレば腐るほど情報でてくるだろw
>487 >488 >490 は夏厨なのかね ?
497 :
Name_Not_Found :2009/07/25(土) 01:56:13 ID:T0xnASip
誘導されたのでこちらで再質問します。 特定の場所に文字を表示させずに半角改行だけを入れたいのですが可能でしょうか? HTMLでもCSSでもかまわないのですが、firefoxにも対応できるものでお願いします。
>>497 目的は何なの?
ソース貼るかHTMLうpするかして
普通の改行だと、全選択とかしたときに改行部分が文字として表示されるのがいやなのかな。 Shift+Enterでできる間隔のない改行を表示させる方法ってことかね?
改行コードに半角も全角もねえよ
もしかして、段落を表現したいってことかな? ならこれでおk <p>文A</p> <p>文B</p>
502 :
497 :2009/07/25(土) 03:11:14 ID:T0xnASip
自己解決しました。 色々とアドバイスありがとうございました。
503 :
Name_Not_Found :2009/07/25(土) 03:36:48 ID:YWNH4uow
ブラウザでプレビューすると現在使用しているレンタルサーバーのNot Foundの画面になってしまいます。ブラウザリストの編集でどこを選択すればいいかも分からず困っています。ググったんですけどこういったトラブルがないようで見つけられませんでした。 今まではネット接続していない状態でプレビューできていました。その状態に戻したいです。 OS:Windows Dreamweaver MX2004です。 よろしくお願いします!
その文で質問が理解できるならエスパーだな
サーバにアップしてないんじゃないの
>>503 ビデオで録画するとテレビが砂嵐の画面になってしまいます。
番組選択でどこを選択すればいいかも分からず困っています。
ググったんですけどこういったトラブルがないようで見つけられませんでした。
今まではビデオ接続していない状態で番組が見れていました。その状態に戻したいです。
テレビ:ブラビア
ビデオ:ソニーです。
よろしくお願いします!
<div style=" width:400px; border:solid 1px #222; overflow:auto; padding: 20px; ">文章</div> 以上のようにするとだいたいのブラウザでは幅400のdiv、div内側に20pxずつの余白が空いた状態になるのですが、 IE6ではdivのサイズが変わってしまいます 解決するにはどうしたらいいでしょうか
>>508 IE6の有名なバグ。DOCTYPE宣言でdtdのURLが抜けてたり、XML宣言が入ってるとそうなる
お手軽な対処法の一つは、文字コードをUTF-8にしてXML宣言を省略するとか
>>508 IEとその他のブラウザではwidth,paddingの位置取りが異なるのが原因
width,heightと一緒にpadding,borderは指定しないのが吉
IE以外に合わせたいのなら下記のソースならうまくいくはず
IEに合わせたいのならwidth: 442px;をwidth: 400px;に変えればいい
<div style="width: 442px;">
<div style="padding: 20px; border: solid 1px #222;">文章</div>
</div>
>>508 のソースならoverflowの指定は合ってもなくても一緒。「文章」の内容によるかもだけど
autoは凄く曖昧だからhiddenかscroll、もしくは指定しない方が良さげ
他の解決法では外部ファイルでハックとかもある
>>511 うおー
ちゃんと動きました
なるほどdivを入れ子にして処理を分ければいいんですね
おまけで切ったはずのIE5.5でも正常動作するようになりました
ありがとうございました
513 :
Name_Not_Found :2009/07/26(日) 12:20:14 ID:/5olAVSu
phpについてお聞きします、おそらく超初歩です。 ウェブ上での表示でよく.../page.php?id=20となっているものは、ファイル名を決める時 どうすればいいのでしょうか。 勝手に番号振ってくれるの? 「?」と「id=20」の表示が、どういう仕組みになってるのか反映しているのか教えてください。 よろしくお願いします。
>>513 オレの浅はかなPHP知識で答えるが
そのurlならDBにアクセスしている可能性が高い
番号自体はidとしてDBに挿入して反映させるハズ
その場合の更新は手動になるが
例えば不動産屋の物件ページだったりの頻繁に情報の更新が行われるような場合は
自動的にページが作成される
ハズ
ちなみに?があるのはPHPページを表示させるためのルール id=20でDB情報が表示されていると思って良いと思う
PHPでid=20のとき20.htmlを出力する例 <?php readfile($_GET['id'].".html"); ?> スレ違い
>>503 ,506
ちー★さん解決して良かったね。
まったくもって夏だなぁ
520 :
Name_Not_Found :2009/07/26(日) 19:43:55 ID:E313HAG2
某スレでFFFTPは使うなと言われたのですが何故でしょうか。
某スレで聞けばいいんじゃないか?
522 :
Name_Not_Found :2009/07/26(日) 22:01:42 ID:E313HAG2
>>521 焦らさないでよ。わたしもう我慢できない。
某スレで聞けばいいんじゃないか?
某スレで聞けばいいんじゃないか?
526 :
Name_Not_Found :2009/07/26(日) 22:49:50 ID:E313HAG2
もういい。意地悪。
きめぇ 自分で調べる気もないカスは氏ねよ
某スレで聞けばいいんじゃないか?
529 :
Name_Not_Found :2009/07/27(月) 03:26:47 ID:IDrR+XHp
まあ「URL?付属」の組み合わせは何もPHPに限ったことじゃないからPHPスレでもスレチ扱いだろうけどな .phpの後の?はおきまりで勝手につく その後のid=20ってのはphpのソースの中に「idが20だったらこのデータを表示する」的な指定が書いてある 20はいろんな条件で変動する idって名前は単にプログラマの気まぐれでそうついてるだけ イメージ的には1.htmlや2.htmlや3.htmlや...20.htmlにあたるものを何もかもひとつのphpで その場その場で生成するために使ってるんだろうと思う ソースがわからんとなんともいえんが
531 :
Name_Not_Found :2009/07/27(月) 16:46:46 ID:mkA28Xkv
CSS
533 :
Name_Not_Found :2009/07/27(月) 17:12:25 ID:mkA28Xkv
>>532 やっぱりCSSっすか
CSSだとテーブルですか?
divでもテーブルでもお好きな方をどうぞ 個人的にはdivの方がいいと思うけどね
535 :
Name_Not_Found :2009/07/27(月) 17:50:43 ID:mkA28Xkv
ありがとう
何も知らなかったくせにやっぱりとか使ってんなよ
やっぱCSSでテーブルだよな。
質問なんでが ぼくはテーブルをかいてから、文字の大きさだけcssとかいうやつで カッコつけてます これってテーブルでcssってことなんでしょぅか?
> テーブルをかいてから
>>540 カッコつけてるって、XHTML1.1使ってHTML-lintで100点とってるって意味か?
543 :
Name_Not_Found :2009/07/28(火) 17:11:16 ID:mWb3/F8O
dreamweaverのテンプレート機能を使用したところ、 デザインビューの表示がガタガタに崩れてしまいました。 適用前は問題なく表示されており、適用したとたん崩れてしまった感じです。 ブラウザでの表示にはテンプレート適用前後で差異はありません。 テンプレートを使用した方が楽なのですが、デザインビューが使えないのは不便です… 解決方法ありますでしょうか?
>>543 CS4使えばある程度はましなんじゃない?
>544 使用しているのはCS4です。 divでくくっている中身が全て外に飛び出ているような感じになってしまっているんですよね… デザインビューは諦めた方が良いんでしょうか
はじめまして HTML、CSS超初心者です CSSでレイアウトを組むとどうもブラウザを小さくしたときに レイアウトがぐちゃぐちゃになってしまいます・・・ | | |あああ| | | こんなレイアウトのものが ブラウザを小さくすると | |
547 :
546 :2009/07/28(火) 20:46:38 ID:???
すいません書いてる途中で書き込んでしまいました | | |あああ| | | こんなレイアウトのものが ブラウザを小さくすると || ||あああ || というようにボーダーの間がせまくなって 中の文字がはみ出してしまいます どうすればいいのでしょうか? よろしくお願いします!
>>546 問題箇所のHTMLとCSSのソースを載せるんだ
550 :
546 :2009/07/28(火) 21:00:20 ID:???
肝心なこと忘れてましたすいません body { margin-top: 0px; margin-bottom: 0px; padding: 1px; width: 50%; margin-left: auto; margin-right: auto; } .sub { margin-left: 50px; margin-right: 20px; } .main { margin-left: 20px; margin-right: 20px; } .contents { padding: 10px 10px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000000; border-left-color: #000000; }
551 :
546 :2009/07/28(火) 21:01:59 ID:???
html <div class="contents"> <h1>H1</h1> <div class="main"> <p>MainContents</p> </div> <h2>H2</h2> <div class="sub"> <p>SubContents</p> </div> </div>
とりあえず body の width を無くしたらIE8では突き抜けなくなったけど この 50% ってのはなんかこだわりがあるんでしょうか。
widthで指定した領域からはみ出した場合、ブラウザの初期値は overflow:visible; なので、ボックスからはみ出して表示される ただしIE6はバグのため、 visible だとボックスを拡張して表示する はみ出させないようにするには、 width:50%; に加えて min-width:文字がはみ出さない横幅; を指定しておくと良い
よくwikiとかに見たりするメニューの格納ボタンっていうのかな。 見た目では[+]が格納している状態で、[-]で展開しているボタン。 それについてググっているのですが、うまいこと該当するのがヒットしないので、 何でググればいいかだけでも教えてもらえないでしょうか?
556 :
546 :2009/07/28(火) 23:40:52 ID:???
>>552 中央寄せにしようとおもってwidthで50%指定しました
>>553 min-widthで指定したのですがはみ出してしまいます・・・
一部ソースだけじゃだめなようなので
html、cssファイルごとアップするので見ていただけませんか?
お願いします
557 :
546 :2009/07/28(火) 23:46:18 ID:???
宿題は自分でやれよ・・・
確かにIE6なら、margin対応が不完全で、min-widthに対応してないから爆発するな 横幅1400pxで表示してる人なんてそうそういないだろうから、素直にwidth:700px;にすれば?
560 :
546 :2009/07/29(水) 00:04:49 ID:???
宿題ではないです いつもいろんなサイトのテンプレートを お借りしてホームページ作っていたのですが 自分で1から作ってみようと思い 作り始めたところCSSのレイアウトで躓いてしまい ここで質問させてもらいました
>>560 それならXHTML1.1で、XML宣言省かずにIE6のバグにはなんとか対処しつつ作ろうぜ!
ついでにホームページじゃなくてサイトって言おうぜ
562 :
546 :2009/07/29(水) 00:10:11 ID:???
>>559 widthを700pxにしたら解決しました
ありがとうございました!
スレ違いになってしまうかもしれませんが
ソースを見てなにかアドバイスなどあったら
適当に教えていただけませんか?
ほんとにありがとうございました
俺ならbodyじゃなく親divを作って色々やるかなあ
564 :
546 :2009/07/29(水) 00:14:34 ID:???
>>561 HTML、CSSともに本当に初心者なので
よくわからないのですが
!DOCTYPEの上に
<?xml version="1.0" encoding="utf-8"?>
と入れたらいいんでしょうか?
565 :
546 :2009/07/29(水) 00:19:50 ID:???
>>563 アドバイスありがとうございます
最初僕もdivを作ってと思ってたのですが
サイトの上側に隙間を開けたくなかったので
margin-topを0pxにしたのですがどうしても隙間がなくならなくて・・・
親divを作ってmargin:0;にしているのに隙間が発生する原因は、そのdivの中で使われているh1とかのmarginだと思う 親divの中の子がmarginを設定すると親divの方に効果が現れてしまう
>>566 なるほど・・・勉強になります
その場合はどうすればよいのでしょうか?
>>567 細かいところまでありがとうございます!
勝手な想像なんですがこれを消すのは
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
これはHTMLという宣言でXML宣言したからこれは不要という意味でいいんでしょうか?
俺は新しいdivを作ってpaddingとかh1のmarginをpaddingで代用できる場合はそうしてる
>>568 http-equiv属性は非推奨。HTTPヘッダ情報として定義しなければいけないらしい
長文失礼します。原因が判明しないのでどなたか教えてください。 <div id="container"> <div>ヘッダ部</div> <div>コンテンツ部</div> <div>フッタ部</div> </div> という構造になっていて、コンテンツ部が <div id="main"> <div id="AA">〜</div> <div id="BB">〜</div> </div> のようになっているページが複数あります。 全てヘッダ部、コンテンツ部、フッタ部の高さは同一です。(コンテンツ部の中身は異なる) ここで、#mainに対しheightプロパティを指定すると、デザインビュー上でid="main"内の全要素が 親要素のid="container"の外に飛び出てしまいます (ヘッダ部やフッタ部は正しい位置にある((フッタ部もコンテンツ部分を詰めて表示されてしまうことはない))) デザインビューだけで表示が崩れていて、ブラウザで表示されるなら良いのですが IE6だと該当ページのみ1〜2pxほどフッタ部の位置が下にずれています。firefox3では問題ありません。 ちなみにheightプロパティを指定しない場合は、デザインビュー上では正しく表示されるがIEではズレたまま、 必要な値より大きい値を指定した場合はデザインビュー・ブラウザ共に崩れます。 バリデータやブラウザ互換性のチェックなども問題なかったのですが、 原因として何が考えられるのでしょうか… imgタグに対するvertical-align、float指定箇所に対するwidth指定などはチェック済みです。
>>572 heightを指定してもしなくても、IE6やFirefox3.5で正常に表示されたのでよくわからんが、実際のソースの空白には半角スペースを使ってるよね?
574 :
572 :2009/07/29(水) 04:35:58 ID:???
>573 空白部は半角スペースになっています。 また、同じ構成のページが複数ありますが、問題の1ページ以外は全部同じ高さで表示されています。 ちなみにid="main"内の<div id="AA">〜</div>及び<div id="BB">〜</div>をとっぱらうと、 heightを指定しているのになぜか高さが低くなります。 これもIE6だけfirefox3では低くならないのですが。何なんでしょう…
>>557 みたいに問題のファイルをアップしてもらうか、リンク張るかしてもらわないと理解できない
#waku{ width:208px; margin:0px 0px 0px 10px; padding:30px 10px 5px 10px; font-size:14px; text-align:left; float:left; border-color:#CCCCCC; border-style:solid; border-width:1px; } このような枠を横並びに3つ、縦に2つ作成し、枠内にはul.liでコンテンツを挿入します。 当然リストの数によって枠の高さは変わりますが、 初期値として最低限この高さ(例えばheight:200px;)は保って、 その高さを突き破るくらいリストがある場合に限り高さが増えるという設定は出来ますか? 素人なもので説明に不足があるかもしれませんが、 宜しくお願いします。
>>576 つ min-height
それと、枠は複数あるんだよね?
じゃあid(#)じゃなくてclass(.)を使わないと。
578 :
576 :2009/07/29(水) 12:19:16 ID:???
>>577 おおっ、こんなに早くレスもらえるとは!
出来ました。
ありがとうございました。
>じゃあid(#)じゃなくてclass(.)を使わないと。
省略しましたが、それぞれに背景画像を設定します。
ご親切にありがとうございます。
>>579 質問の意味がよくわからんのだけど、
「全てのページに同じメニュー・ヘッダ・フッタ等を表示する方法」という意味なら
そのURLのテンプレは、特殊な技法を使ったりせずに、
全てのページに同じ内容(メニュー・ヘッダ・フッタ部分)を書いてるだけだよ。
>>582 スクショ画像だけじゃなくて、ソースも載せてもらったほうがいいかな。
584 :
582 :2009/07/29(水) 19:12:42 ID:???
>>583 こんな感じです。
<div style="text-align: center;">
<div style="height:200px; width:700px; margin: 0 auto; text-align: left">
<div style="position:relative;background:#000000;">
<img style="position:absolute; top:0; left:0;" src="img/top_left.gif" />
<img style="position:absolute; top:0; right:0;" src="img/top_right.gif" />
<img style="position:absolute; bottom:0; left:0;" src="img/bottom_left.gif" />
<img style="position:absolute; bottom:0; right:0;" src="img/bottom_right.gif" />
<div class="style2" style="padding:12px;">
<table width="600"border="0">
<tr>
<td colspan="2"><strong>文字</strong></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="100">文字</td>
<td width="500">文字</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>文字</td>
<td>文字</td>
</tr>
585 :
582 :2009/07/29(水) 19:13:36 ID:???
<tr> <td> </td> <td> </td> </tr> <tr> <td>文字</td> <td>文字</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td colspan="2"><strong>文字</strong></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td>文字</td> <td>文字</td> </tr> <tr> <td> </td> <td> </td> </tr>
586 :
582 :2009/07/29(水) 19:14:16 ID:???
</table> </div> </div> </div> </div> </div> <div class="footer"> <address> Copyright サイト名 All Rights Reserved. </address> </div> 以上です。
で、cssは?
テキストでどこかにあげろよ
tableに対し、各セル間の間を空けたくない場合は border-collapse: collapse;を指定すれば良いですよね? これでtableタグにcellpadding="0" cellspacing="0"を指定したのと同じ状態になる、で合っていますか? DWのデザインビューではcollapseの指定だけではセル間隔が若干開いており、 cellpaddingとcellspacingを指定してようやく間隔が詰まるのですが、 DWだけの問題なのか、私の認識が間違っているのかどっちなんでしょう?
>>589 デザインビューは色々面白い表示をしてくれるから、
実際にブラウザで試したほうが早いよ。
ちなみにborder-collapse: collapse;だけでおk。
591 :
582 :2009/07/29(水) 20:27:00 ID:???
すいません。 cssは div.title { float: left; width: 800px; } div.menu { clear: both; } div.contents { clear: both; } div.footer { clear: both; } です。
>>589 table要素にcellspacing属性 = tableセレクタにborder-spacingプロパティ
table要素にcellpading属性 = th,tdセレクタにpaddingプロパティ
border-collapse: collapse; は隣り合ったtd同士の枠を結合させる指定。HTMLにそのような指定をする属性はない
DWのデザインビューは、過去ログでも表示がおかしいって言われてるな
593 :
589 :2009/07/29(水) 21:01:22 ID:???
>590,592
ありがとうございます。
ブラウザでは正しく表示されていたのですが、自分の理解力にいまいち自信が無く不安になってしまいました。
追加で申し訳ないのですが、質問です。
IEで表示が崩れてしまう部分があります。
以下HTMLで"IEだとずれる部分"に入れている文章が、右寄せにならず
中途半端に空間を空けた状態になっていまいます。
下の画像で、firefoxで表示されている方が正しい動きです。
http://www.rupan.net/uploader/download/1248868802.jpg 以下HTMLソース
<table>
<tr>
<th scope="row">xxx</th>
<td class="price">xxx</td>
<td class="data">xxx</td>
</tr>
<tr>
<th scope="row">xxx</th>
<td class="price">xxx</td>
<td class="data">xxx</td>
</tr>
<tr>
<td colspan="3" class="list_bottom">※IEだとずれる部分</td>
</tr>
</table>
594 :
589 :2009/07/29(水) 21:02:16 ID:???
適用しているCSS(該当部) table { table-layout: fixed; float: left; width: 480px; margin: 10px 10px 0 0; border-collapse: collapse; } th { width: 110px; /*115*/ padding: 0 0 0 3px; vertical-align: middle; text-align: left; font-weight: normal; border-bottom: 1px solid #B53B41; } td { width: 363px; /*365*/ padding: 3px 0; border-bottom: 1px solid #B53B41; }
595 :
589 :2009/07/29(水) 21:02:58 ID:???
適用しているCSS(該当部)の続き .price { width: 65px; } .data { width: 300px; line-height: 1.3; font-size: 90%; } .list_bottom { font-size: 80%; text-align: right; border: none; } どなたかご教授お願いします。
border-spacingはIEでは動かないぞ。どのバージョンかは忘れたけど
ちなみにborder-collapse: collapse;を指定した場合はborder-spacingは意味がない
border-collapse: separate;の場合のみborder-spacingで枠同士の余白を設定できる
>>589 ならtable要素にborder-collapse: collapse;、セルのmargin: 0;,padding: 0;で解決
>>584 どう考えてもtableのwidth: 480px;が原因。thとtd2つの横幅の合計より小さくなってるのがおかしい
関係ないけどCSSの部分のtableとthは↓に変えたほうがいい
table {
table-layout: fixed;
display: inline; /*IEのmarginバグ対策に加えたけどもしかしたら要らないかも*/
float: left;
width: 480px;
margin: 10px 10px 0 0;
border-collapse: collapse;
}
th {
width: 110px; /*115*/
padding: 0 0 0 3px;
vertical-align: middle;
text-align: left;
font-weight: normal;
border-bottom: 1px solid #B53B41;
}
html:not(:target) th { /*IE以外のブラウザに対応って意味*/
width: 113px;
}
>>597 <div style="padding: 1px; border: 1px #efefef solid; background: #fff;">
<div style="background: #efefef;">a</div>
</div>
>>599 ひとつのdiv内で完結できるかと思ったんですが、やっぱりふたつに分けないとダメですよね。
ありがとうございます。
601 :
582 :2009/07/29(水) 22:07:41 ID:???
602 :
598 :2009/07/29(水) 22:11:00 ID:???
>>601 安価ミス。
>>593 の間違いだった。すまん
>>582 はfooter以外CSSとHTML部分がバラバラだから答えようがない
どっかにtxtでそのまま上げてくれれば何か言えるかも
HTMLとCSSとGIFをZIPにまとめてうpすれば?
604 :
582 :2009/07/29(水) 23:19:32 ID:???
>>604 直接関係ないけど
・style要素内のCSSをコメントアウトするな
・ ←枠線表示してないんだから意味ないと
・html要素にxml:lang属性が抜けてる
・img要素にalt属性が抜けてる
・無意味にbr連続させるな
・width="600"border="0" ←くっついてるぞ
・table要素にsummary属性が抜けてる
・UTF-8じゃないのにXML宣言を省くな
HTML-lint便利だよ。こんだけの文法ミスをすぐチェックできる
表示がおかしいのはこれから調べてみる
606 :
582 :2009/07/29(水) 23:51:21 ID:???
>>605 そんなにミスがあるとは若干ヘコむorz
HTML-lintってググって調べたけど便利ですね。
ブラウザでチェックするのではなくソフト的なものは無いですか?
訂正お願いしますm(_ _)m
607 :
582 :2009/07/29(水) 23:52:37 ID:???
ローカルのもありましたね^^;
608 :
598 :2009/07/29(水) 23:58:04 ID:???
>>604 真中らへんのdivのheight: 200px;が原因
divの内包してる文字列の縦幅が200pxを超えてるからだめ
↓に変えれば解決
<div style="min-height: 200px; height: auto !important; height:200px; width:700px; margin: 0 auto; text-align: left">
609 :
582 :2009/07/30(木) 00:07:04 ID:???
>>608 御丁寧にありがとうございます。
書き直したらいけました!
てかごたごた過ぎるだろ。なんでdivで二重にくるみまくってるんだよ
611 :
609 :2009/07/30(木) 00:16:11 ID:???
>>610 すいません。
ほかにやり方が思い浮かばなくて・・・
いい方法とかあるなら教えてください
>>611 ちょっと待っててくれ!
ごちゃごちゃし過ぎて書きなおす面白そうだから、ファイル書き換えて見本作る
613 :
598 :2009/07/30(木) 00:19:19 ID:???
body { text-align: center } 略 <div style="min-height: 200px; height: auto !important; height:200px; width:700px; margin: 0 auto; text-align: left; position:relative; background:#000000"> 略 <table style="margin: 12px;">略</table> </div> 略 div減らすんならこれでいいんじゃねーの?
<table style="margin: 12px; color: #fff">略</table> 修正。table下の余白が若干変わるけど許容範囲かな まぁどうせ続き作ってくうちにぐちゃぐちゃになるだろうから ちょっと整理したくらいじゃ大した意味ないだろうけど一応。
616 :
582 :2009/07/30(木) 00:58:22 ID:???
>>613-614 記述したのですがdivが数個なくなるだけで結構違いますね
table下とCopyrightの文字の間を空けるにはどう記述したらいいのですか?
文字間隔ならletter-spaceing
618 :
612 :2009/07/30(木) 02:04:42 ID:???
619 :
593 :2009/07/30(木) 02:04:57 ID:???
すみません、スレ流れてしまっているのでどなたか >593お願いします
622 :
612 :2009/07/30(木) 02:30:55 ID:???
623 :
593 :2009/07/30(木) 03:36:36 ID:???
>>620 すみません、アンカーミスだったんですね。
tdのwidth指定を消したらうまくいきました。
tableのCSS指定にdisplay:inline;を加えるのと、
html:not(:target) th { /*IE以外のブラウザに対応って意味*/
width: 113px;
}
の箇所は用途がよく解らないので調べてきます。
ありがとうございました。
外部CSSを作るときどのように設定してます? 本当は外部のCSSは一枚だけが理想なのですが、現状は A.css:サイト全体用のスタイルが一枚。 B(〜Z).css:各html個別用のスタイルが一枚。 です。 基本各ページを作成するときは。B(〜Z).cssをいじります。 それでも、A.cssをいじったりして、どこに設定していたか、わからなく なることあります。 みなさんはどうしていますか?
>>624 一緒
>どこに設定していたか
クラス名とかがわかりにくいのが原因では?
あとCSS中にコメントアウトして詳細を記述しておくとか
そゆときCS4は便利。
CS4はどう便利なの?
628 :
Name_Not_Found :2009/07/30(木) 10:40:02 ID:ff8NQ+7S
背景画像のことでわからないことがあります; あるボックスの左右に自分が用意した画像(15*40)をy軸にそって 表示させたいのですが片方しか表示されません。 現在の設定: background:url(./image/content_bg.jpg) no-repeat; background-repeat:repeat-y; background-position:left; 背景画像を左右に表示させたい場合はどうすればいいでしょうか? アドバイスよろしくお願いします。
629 :
628 :2009/07/30(木) 10:44:39 ID:ff8NQ+7S
先ほど登校した内容に誤りがありました。 正しくは以下です。 background:url(./image/content_bg.jpn);
1つの要素には1枚の背景画像しか設定できない 2つの要素を重ねて1つは左、1つは右に指定するとか、 全体を1枚の背景画像にして1つの要素で縦に繰り返すとか
631 :
628 :2009/07/30(木) 11:01:47 ID:ff8NQ+7S
>>630 なるほど。一工夫してやらないと駄目なんですね。
どうもありがとうございました。
632 :
582 :2009/07/30(木) 11:04:15 ID:???
633 :
528 :2009/07/30(木) 11:20:31 ID:???
>>617 すいません。
文字の間隔じゃなく、table下の余白が無くすぐさま
<div>文字</div>が来て余白が無いので余白が欲しいんですよ。
余白を作るにはどうしたらどうしたらいいんですか?
634 :
Name_Not_Found :2009/07/30(木) 11:58:11 ID:bfU3dOWu
>>633 margin,paddingのどっちか使えばいい。footerにpadding-top: 10px;がいいかな
そんな簡単なことくらい自分で調べた方が早いぞ。「css 余白」でググればすぐ分かるだろ
>>634 ありがとう。
俺勉強不足過ぎるなorz
636 :
Name_Not_Found :2009/07/30(木) 12:14:27 ID:bfU3dOWu
自分で勉強する意欲が欠けてるな
>>637 自分のと見比べたら全然違うくてビビったわorz
スゲー参考になります。ありがとう!
639 :
Name_Not_Found :2009/07/31(金) 04:40:02 ID:ufXxl7dS
IE、firefox共に表示が崩れてしまいます。 下記のようなコードで、IEではtableの上、firefoxではimgの上に それぞれ10pxほどの隙間が開いてしまいます。 以下問題部のソース <div id="main"> <table> <tr> <td>〜</td> </tr> <tr> <td>〜</td> </tr> </table> <img id="main_img" src="xxx" width="190" height="370"> </div> table { table-layout: fixed; float: left; width: 485px; margin: 5px 5px 0 0; border-collapse: collapse; } td { padding: 5px; border-bottom: 1px solid #B53B41; }
640 :
639 :2009/07/31(金) 04:40:59 ID:???
続き #main { width: 680px; /*700*/ height: 370px; /*399*/ border-width: 0 1px 1px 1px; border-style: solid; border-color: #1E9518; padding: 9px; } #main_img {float:left;} どなたか解答お願いします。
どうせ確認するときに消さなきゃいけないんだから、わざわざ全角スペース入れんでいいよ
>>639 両方ともあいてるじゃん
padding: 9px;って指定してるからでしょ
643 :
639 :2009/07/31(金) 06:03:09 ID:???
>641 すみません、次回からは消します >642 上手く伝わらなかったようですみません padding;9px;はdiv id="main"の内側全体に9pxの隙間を空けるために指定したものですが、 そのpaddingに加えて IEの場合はimgの上部のみ、firefoxではtableの上のみに10px程度の意図しない隙間が開いてしまっているんです。
ブラウザのデフォルトの margin、padding を消した上での話?
645 :
Name_Not_Found :2009/07/31(金) 10:07:02 ID:+inCQ/Y3
>>639 またお前か。全角スペースは鬱陶しいから止めろ
html側のimgタグに拘らないんなら↓で大体できる。試してないから適当に合わせてくれ
innerの中にもう一つdiv加えればハック使わなくても平気
div#main {
width: 700px
}
div#main div.inner {
min-height: 423px;
height: auto !important;
height: 423px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #1E9518;
padding: 14px 204px 9px 9px;
background: url(xxx) 501px 9px no-repeat
}
html:not(:target) div#main div.inner {
min-height: 399px;
height: auto !important;
height: 399px
}
div#main table {
table-layout: fixed;
width: 485px;
border-collapse: collapse
}
div#main td {
padding: 5px;
border-bottom: 1px solid #B53B41
}
<div id="main"><div class="inner"><table>略</table></div></div>
修正 html:not(:target) div#main div.inner { min-height: 399px }
cssでリンクボタンの画像のポップアップを制御する際、 あるボタンをクリックして、そのページを表示すると 大抵の場合マウスをポイントしているときの画像が表示されます。 これはcssで完全に制御できるのでしょうか? 通常の状態では画像A、マウスを当てると画像Bに切り替わり、 ボタンをクリックしてそのページを開くと、 当のそのボタンは「このページを開いてますよ」的な意味で画像Bを表示するあれです。 #gerogero a{ width: px; height: px; background-image:url(画像A); padding:px; margin:px; float:; text-indent: -px; display: block; } #gerogero a:hover{ background-image:url(画像B); } ポップアップを制御するところまでは分かるんですが・・・。
>>647 やりたいことがよくわからないので、絵にでも描いてうpしてくれないか?
特に「ポップアップを制御する」がわからん。
ロールオーバーのことが言いたいのかな?
649 :
647 :2009/07/31(金) 16:11:59 ID:???
おっしゃるとおり・・・orz ポップアップではなく、ロールオーバーでした。
650 :
Name_Not_Found :2009/07/31(金) 16:17:45 ID:rB/03NYv
>>649 結局何がしたいのかいまいち分からないけど、
おそらくページ毎に別々のCSS作って#gerogero aのbackground-imageをページに合わせてやれば解決
もしオンマウスで画像切り替えるだけならロールオーバーでググレば腐るほどヒットするぞ
>>649 だとしたら、遷移先ページの該当箇所を単に画像Bにするだけじゃダメなのか?
たぶん、メニューなんかでそういうことをやりたいんだろうと思うけど、
自分がよく使う手段としては、こんな感じにしてる。
<ul id="menu">
<li><a href="page1.html" class="selected">メニュー1</a></li>
<li><a href="page2.html">メニュー2</a></li>
<li><a href="page3.html">メニュー3</a></li>
<ul>
#menu li a{
(いろいろ省略)
background-image:url(画像A);
}
#menu li a:hover{
background-image:url(画像B);
}
.selected{
background-image:url(画像B);
}
あ、ちなみに
>>652 はメニューの背景画像が全部同じの場合ね。
もし各メニューごとに違う画像を背景にしたい場合は、
外部cssでhoverしてないときの画像(例で言えば画像A)を指定して、
<head>内cssもしくは<body>内の該当箇所に直接入力で画像Bを指定すればおkかと。
……文章で説明するのはむずかしーな。
ロールオーバーでググったら色々出てきました。
皆様ありがとうございました。
>>652 参考にさせて頂きます。
ご丁寧にありがとうございました。
枠つきで幅400px縦100pxの親div(IEバグ対策でborderのみ親のそのまた親div扱い)の中に、 幅300pxの中央寄せ子divをiframe代わりに置き、その中に左寄せテキストの孫divを置きたいのですが、 firefoxでのみ子divの中央寄せが意味をなさず、孫divが親divの位置での左寄せになってしまいます 対処法はないでしょうか <div style=" border:solid 1px #000000; "> <div style=\" width:400px; height:100px; overflow:scroll; text-align:center; "> <!-- ← 親div --> <div style=" width:300px; text-align:center; "> <!-- ← 子div --> <div style=" width:300px; text-align:left; "> <!-- ← 孫div --> 左寄せテキスト長文 </div> </div> </div> </div>
656 :
Name_Not_Found :2009/07/31(金) 20:13:20 ID:lHxSHggH
質問です。 携帯サイトをxhtml1.0トランジッショナルでやってますが、 これだと古い機種だと見れないこともありえるんでしょうか? iモードシミュレータやってみたら、ソースしか表示されないし xhtmlにしてからヒット数がだんだん減ってきてるのですが…
657 :
639 :2009/07/31(金) 20:16:50 ID:???
>645 全角スペースは次回から消すようにします 結局何が原因なのですか? 645さんが書かれているソースが何をしようとしているものなのか解らないのですが…
>>655 三つ目のdivにmargin: 0 auto;を追加
>>657 >645さんが書かれているソースが何をしようとしているものなのか解らないのですが…
>>639 の知識不足に対してのアドバイスは難しいな。あえて言うならfloatを使いたくなかった
別にimgとfloat使ってもいいんだけどclear用の要素が必要なことを考えると微妙。別にclearfix使えばいいわけだけど
原因はおそらくwidth,heightと一緒にborder,paddingを使ってること。もしくはclearしてないから
てかまず
>>645 のソースで見た目だけでも上手くいったのか報告しろよ
659 :
639 :2009/07/31(金) 21:14:00 ID:???
>658 645さんのソースでIEでは正しく表示されましたが、firefoxでは div id="main"が潰れてしまい、その下にあったfooterなどが重なって表示されてしまいます ここで聞く前に問題箇所のimg要素の後ろに空divでclear:bothを指定していましたが、 その際は問題の解消はできずまたIEではmain下部に隙間が開いてしまっていました。 width、heightとborder、paddingを併用した際の問題とは、width、height指定時に 本来指定したい値からborderやpaddingで指定する値を引いておけば解消されるのとは違うんですか?
660 :
Name_Not_Found :2009/07/31(金) 21:23:10 ID:+inCQ/Y3
>>659 少なくとも
>>645 のソースだけならIEでもfirefoxでも同じ様に表示されるはずだから
問題があるとすればその他のソース。そっちも書いてくれ
>width、heightとborder、paddingを併用した際の問題とは、width、height指定時に
>本来指定したい値からborderやpaddingで指定する値を引いておけば解消されるのとは違うんですか?
IEとfirefoxの両方で↓のソース試してみれば分かる。IEは100pxでfirefoxでは140px
<html><body>
<div style="width: 100px; padding: 20px; background: #000;">test</div>
<body></html>
661 :
639 :2009/07/31(金) 21:31:59 ID:???
>660 すみません、645で戴いたソースは一旦消して CSSを指定しなおしたら元のソース(639)と同じような書き方で正しい表示に戻りました。 うーん、原因がよくわからない… >IEとfirefoxの両方で↓のソース試してみれば分かる。IEは100pxでfirefoxでは140px ↑これやってみましたがfirefoxもIEもまったく同じように表示されました。 バージョンのせいなんでしょうか? firefoxは3.5.1、IEは6です
662 :
639 :2009/07/31(金) 21:35:12 ID:???
追記です。 >>IEとfirefoxの両方で↓のソース試してみれば分かる。IEは100pxでfirefoxでは140px >↑これやってみましたがfirefoxもIEもまったく同じように表示されました。 →IEもfirefoxもどちらも横幅140pxになりました。
解決したんならまぁ良かったけど、ちょっと書き直したくらいで直るんなら先にやっとけよ
IE6で140pxになるなんてことは絶対にありえないから、測り間違えか
>>662 の環境がおかしい
どっちにしても100pxになる環境もあるわけだから配慮しておいて損は無い
アップロードに関して質問です。 DreamweaverCS3にてアップロードを行うと、 ページ内のURLは全て相対パスとして扱われます。 これを、常に絶対パスとしてアップロードする事は可能ですか? サイト設定の中にページのURL(HTTP〜ドメイン)を入力する箇所はあるのですが、 相対パス、絶対パスの設定が見つかりませんorz
666 :
655 :2009/07/31(金) 22:06:01 ID:???
>>658 バッチリでした
ありがとうございました
667 :
639 :2009/07/31(金) 22:19:49 ID:???
>>656 MIMEタイプをtext/htmlにしてみれば?
>>664 950pxとか、フレームいらんと思われ
>>664 フレームセットというよりはインラインフレームだね。
中央にするのは左右位置だけでいいの?
だったら、該当の要素にmargin: 0 auto;を指定すればおk。
>>664 <frameset cols="*,950px,*">
<frame src="dummy.html" name="dummy">
<frame src="main.html" name="main">
<frame src="dummy.html" name="dummy">
</frameset>
スクロールバーの位置をずらしたいんならこれでいいんじゃねーの?
そうでなければフレームを使う意味がない
bodyにtext-align: center;、body直下のブロック要素にwidth: 950px; margin: 0auto;入れた方がいい
>>667 それは俺も知らんかったわ。曖昧なこと言っててすまんかった
でも残念なことにxhtmlの場合はxml宣言が絶対必要
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
書き出しがこうなるとIEでは100pxになるからXHTML 1.0 Transitional//ENの場合は意味がないことになる
他のdoctypeも試してみればもしかすると解決するのかもしれないけど
やっぱりwidth,heightとpadding,borderを分けるのが一番確実な気がする
>>670 文字コードがUTF-8だと省略可だぞ。記述推奨だけどな
ちなみにdtdのURLを省くと、IEでは互換表示になる = ボックスの横幅がおかしくなる
IE6はURLがあっても、DOCTYPE宣言の前に文字があると互換表示になるバグがある
互換云々は今初めて知ったよ。勉強になりました
中途半端な知識で対応してしまった
>>639 には大変申し訳ない
673 :
664 :2009/07/31(金) 23:19:47 ID:???
先輩方ありがとうございます。
画像
ナビゲーションバー
ターゲット
画像
上のようなフレームを組んで、幅は950pxで固定し
ウィンドウサイズが950px以上の場合センターに表示したい。
という風にしたかったのです。
>>670 さんに教えていただいた形でトライしてみます。
674 :
664 :2009/07/31(金) 23:24:24 ID:???
途中送信してしまいました…
申し訳ありません。
>>668 フレームなしで組むには知識がたりません。申し訳ない。
>>669 インラインフレームでも組めるわけですね。勉強します。
ちなみに中央合わせは左右のみです。
フレームでちゃんと組めたら、div#hogeなるタグを活用しCSSで
組めるように挑戦してみよう!
>>674 普通に
>>673 のターゲット以外を全ページに記述すればいいんじゃないか?
メニュー部分のソースの分量だけなら、重くならんだろ
IE6、firefox3でズームしても問題なく表示されたページが IE8で文字サイズのズームをかけると崩れてしまいます (divでくくったborder付きの箱から中の文章が飛び出てしまうなど) どうしたら良いですか?
ソース書けよカス IEだけならoverflowとかword-breakとかword-wrapでいいんじゃねーの?
該当箇所が多すぎてソースを張るのも…
ちなみにfirefoxでも文字サイズのみのチェックをいれてズームすると崩れます
というか、これ多分heightを指定している為だと思うんですが
IE8やfirefoxの文字サイズ変更ででheightを指定したdivから中の文字が飛び出してしまうのは
どうしようも無いでしょうか
>>677 さんが言ってる方法は全然別方向のような気がします
679 :
Name_Not_Found :2009/08/01(土) 17:32:11 ID:Kyr6mIQq
こんばんは。質問させていただきます。
一行に
○○○○○○ △△■■
といったように
文字を右寄せと左寄せを行いたいのですが
試してみたところ
△△■■の部分が改行されてしまいます。
どのようにしたら改善されますでしょうか?
css
.header-font { font-size:small }
.header-align { text-align:right;}
#header{
background:yellow;
background-image:
http://www.livedoor.com/r/h_logo; width: 900px;
height: 100px;
}
html
<div id="header">
<p class="header-font">2009年07月16日(木) 何の日?:駅弁記念日 有名人の誕生日:福田康夫
<div class="header-align">カテゴリ一覧 ツールバー ホームに設定</div></p>
</div>
ご指南の方よろしくお願いします。
CSSで複数のブロックを位置指定しています。 IE6では指定した通りになりますがFirefox3ではmarginが効かず#Aと#Bが重なって表示されてしまいます。 両方同じ表示にするにはどう直せばいいでしょうか。 #A{ position: absolute; margin: 0; width: 15em; left: 0; top: 0; } #B{ margin: 0, 0, 0, 15em; }
>>678 >>676 で言ってることと全然違うじゃねーか氏ねよ
heightをmin-heightに変えれば解決。ieへの対応はググれ
>>679 試してないけど
div#header {
position: relative;
text-align: left;
}
div#header span {
display: block;
position: absolute;
top: 0;
right: 0;
}
<div id="header">
<p>○○○○○○</p>
<span>△△■■</span>
</div>
>>680 marginのカンマ抜いてみろ
682 :
Name_Not_Found :2009/08/01(土) 18:24:30 ID:Kyr6mIQq
681さんのように記述してみたところ やはり改行されてしまいました。
>>682 ブロック要素とインライン要素の違いとそれぞれの動作くらい知っとけ
↓でうまくいかないようなら他のところに原因があるから、そのソースも載せてくれ
div#header{
width: 900px;
height: 100px;
background: #FF0 url(
http:// ) 0 0 repeat;
position: relative;
}
div#header p {
font-size: small;
}
div#header div {
position: absolute;
top: 0;
right: 0;
}
<div id="header">
<p>2009年07月16日(木) 何の日?:駅弁記念日 有名人の誕生日:福田康夫</p>
<div>カテゴリ一覧 ツールバー ホームに設定</div>
</div>
686 :
Name_Not_Found :2009/08/01(土) 18:51:11 ID:Kyr6mIQq
ありがとうございます。この記述により改善されました^^
HTMLの勉強したいんですがオススメの教本があれば教えてください
本なんかいらねぇ しいていうならHTMLの辞書
HTMLを覚えるのに一番いい方法はサイトを沢山作ることだ
辞書ですか・・・ はい いっぱい作っておぼえたいんですが残念なことに知識がほぼ0なんですよ
プログラミング言語は教科書のようなものが無いと難しいけど マークアップ言語は要素(タグ)の意味を理解したらそれを組み合わせるだけ HTMLの書籍はAmazonとかで評価高いものを選んで買えばいい
なるほど 思ったより簡単そぉですね HTMLとゆーよりサイトの作り方みたいな本の方が分かり易いのかな 本屋行って2時間ぐらい立ち読みしてきます
文字サイズを指定するとき、みなさん単位はどうしてます? 僕は、em使ったり、px使ったりしてますが、特に明確なルールとか 決めていません。 できれば、サイト全体を統一したいのですが、結局各ページ毎に 調整をするときに、適当に単位と値を決めちゃって。各ページごと ボックスごと、バラバラになること多々あります。 文字を管理するよい方法ありますでしょうか?
694 :
Name_Not_Found :2009/08/02(日) 11:12:54 ID:qChNV5dV
>>693 面倒だから
small medium large
まずはページ全体をsmallにする
そして必要箇所をmedium や largeにする
実質2種類
>>693 >em使ったり、px使ったり
ページ全体への指定が、ページごとにpxだったりemだったりするならまずいかもしれんね
一応、pxを使わず、ページを拡大縮小してもレイアウトが崩れないのが良いページとされてる
基本12pxで統一してjsで自由にサイズ変えられるようにしてる IEさえ無ければjsも必要ないんだけどなぁ
IE7 以降なら px 指定でも大きさ変更できっぺや。
俺のサイトにはIE6ユーザーがまだ4割もいるぞ……orz
規格が統一される日は来ないのかな
MSが、CSSにFirefox並みの対応をしたIE9を出して、同時にIE8以下のセキュリティアップデートを打ち切ればいい
Firefox ってCSS優等生みたいな見られ方をするけどさ 昔はMSが独自仕様をこっそり作ってたが 今はMozzilaが公開しながら独自仕様を作ってねーか?w 特に最近のHTML5、CSS3あたりは大活躍なきが・・・
別に独自仕様はなんの問題もないよな。使わなければいいだけの話だし むしろハック使うよりも綺麗で確実なこともあるしありがたい
>>700 は、最低限Firefox並みのCSS2.1対応をって意味で言った
CSS3に先行対応するのは別に構わんと思う
今のところレンダリングが最も優秀なのはOperaね
-mozが付く独自プロパティは300近くあったな Firefox内部で使われるのが前提だから別に問題ない
対応はまちまちでもとりあえず我慢するから、ブラウザによって動作が違うってのを何とかして欲しいよ
すみません教えてください。 外部スタイルシートで .red{ color: #FF0000; } のように指定しているスタイルが IEでは適用されるのですが FirefoxやOperaで適用されなくて困っています どのような問題があるのでしょう?
>>708 それはcssファイルよりもhtml側で外部cssを呼び出しているタグに問題がありそうな予感。
該当箇所のソース貼ってみて?
>>709 「外部cssを呼び出しているタグ」というと以下の部分でしょうか?
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="Stylesheet" href="main.css">
<link rel="Stylesheet" href="main.css" type="text/css"> ならどうだろう
>>711 やってみましたがやはり適用されないようです
>>708 Firefoxなどはmimetypeを厳密に評価する。
たとえばtype="text/css"を間違ってtype="text/ccs"とすると未知のスタイルと認識してパースを中止する。
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="Stylesheet" href="main.css">
これは
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="main.css">
こう書かないといけない。大文字小文字も完全に区別される
>>713 修正してみましたがやはり該当箇所にスタイルが適用されないようです
クラスを指定していない部分のスタイルは適用されているようなのですが
クラス指定がある部分のスタイルが適用されないのです
お手数をおかけして申し訳ありません
textかzipでまとめてどこかにアップロード
>>714 じゃあ該当の「クラス指定をしている部分」のソースが必要だろ。
つーか、最初からクラス指定してる部分だけならそう書けよ……。
回答者側はエスパーでも聖人でもないんだから、後出しされるとさすがにむかつく。
>>717 申し訳ないです
クラス指定しているときというつもりで
>.red{ color: #FF0000; }
>のように指定しているスタイルが
と書いたのですが分かりにくかったですね
本当に申し訳ないです
例えば以下のような感じで指定しています
<span class="red">XXXXXXXX</span>
もう吉祥にHTMLうpしろよ
IE以外で意図した結果にならないというのは根本的におかしいから。 Web関連はIE以外でコーディングして後からIEでおかしいところを直すのが一番効率がいい
絶対逆の方が楽だろ。むしろちょっとずつ交互に見合わせていくのが最善だけど
>>721 作り上げたページをIEのバグに対応させるのは困難だから、IEで確認しながらWeb標準準拠ページを作れば他のブラウザの表示も問題ないし楽ってことだな
うpもせずにめんどい質問する奴は帰れww
>>722 >IEで確認しながらWeb標準準拠ページ
作ったことないだろ
>>724 だから、IEでも表示が崩れないようにしつつ、文法違反にならないページを作ればいいって意味じゃないかなと
>>721 は
ほら、IEって未対応のCSSとかが多いじゃん。それを使わないように、ページを作り上げるっていう
726 :
708 :2009/08/03(月) 00:08:11 ID:???
直りました ありがとうございました
どうやったら解決したのかも書けよカス
まぁ
>>722 みたいな楽しい人も
混ざるよね、、、この季節
特にリキッド100%で
Flashも伸縮ありなんてのつくると
軽く飛べますよ かるーくね
フレームの境界線の色を変えてみたんだけど、 IEじゃちゃんと見えるけどFirefoxだと黒線にしかならない 俺が間違ってるの?それともブラウザの仕様?
デフォの枠消してCSSでボーダー設定 最悪1pxのフレーム作って色つければいいんじゃね
>>730 じゃあやっぱ仕様なのかな。
CSSでやる事にした。ありがとう
divとspanの使い分け教えてください><
皆さんはCSSとhtmlは同じフォルダに置いてます? それともCSSはCSSのフォルダを作ってますか?
htmlのCSSは同じ階層で、jsとかのCSSは専用のフォルダ作ってるけど
>>738 自分も全く同じサイト見ながら設置したけどうまくいったよ。
そんな奴でよければ見るけど?
テーブルタグについてなんですが、 <Table align="center"> を加えて中央に位置させようとすると枠が消えてしまうのですがなぜでしょうか?
>>740 そこだけじゃなくて、もう少したくさんソースを貼り付けてくれないとアドバイスのしようがありません。
エスパーしてみると、borderは設定した?
742 :
738 :2009/08/03(月) 17:41:01 ID:???
743 :
Name_Not_Found :2009/08/03(月) 17:43:55 ID:2sB0edpV
css を使え それで解決
>>742 最新版(ver. 2.04)使ってる?
だとしたら、html側の6行目
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
を
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
に書き換える必要有るよ。
参考サイトのは1つ前のver.だから、最新版だと多少違うらしい。
>>741 すいません。
<Table Border="5">
<Table align="center">
<Tr>
<Td><Font Size="5">文章</Font></Td></Tr>
<Tr>
<Td><Font Size="5">文章</Font></Td></Tr>
<Tr>
<Td><Font Size="5">文章</Font></Td></Tr>
<Tr>
<Td><Font Size="5">文章</Font></Td></Tr>
<Tr>
<Td><Font Size="5">文章</Font></Td></Tr>
</Table>
こんな感じなんですがどこがいけないのでしょう?試しに右揃えもやってみましたが同じように文字だけ移動して枠は消えてしまいました。
746 :
738 :2009/08/03(月) 18:56:17 ID:???
>>744 最新版を使ってますよ。
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>に書き換えたらいけました。
ありがとうございます。
けどもまた違う問題点が、、
「NEXT」と「PREV」の画像が表示されません。
これも最新版とその1つ前のverの違いありますか?
>>745 table要素の開始タグが2回出てくるのが駄目
1つにまとめて
>>746 参考サイト見ないで公式の説明でやったらいいんでないかい
748 :
745 :2009/08/03(月) 19:23:31 ID:???
749 :
738 :2009/08/03(月) 19:32:14 ID:???
750 :
738 :2009/08/03(月) 19:48:47 ID:???
自己解決しました。 ごめんなさい
高校レベルの英語力で十分だろうに……
752 :
Name_Not_Found :2009/08/03(月) 20:29:52 ID:QX+LulaI
http://imepita.jp/20090803/732750 上記画像参照
firefox、firebug使用。
DWでxhtmlを新規作成していたら、<h1>タグにマージンが洩れなく付いてきてしまいます。
h2〜6タグも同じく、cssでmargin指定していないのに
hタグの内容の約二倍のマージンが掛かってしまう
しかし上下にしかマージンが現れていないので、どこかで設定しているのだと思いますが・・・
解決法をご存知の方いましたら回答をお願い致します(汗
このままだとhタグが不便になっちゃう・・・
何処をいじっちゃったのかなぁ。
10列5行あるテーブルを横幅100pxで統一するにはどうしたらいいですか? CSSに .date { table-layout:fixed; width:100px;} 書き込み htmlに <table class="text" summary="about"> <col class="data" /> <tr><td>画像</td><td>文字</td><td>画像</td><td>文字</td></tr> <tr><td>文字</td><td>画像</td><td>文字</td><td>画像</td></tr> </table> とこんな感じでなんですけど違いますか?
>752 いろんなタグにマージンは各ブラウザで勝手に設定されています。最初に *{margin:0;} を書いてすべてのタグのマージンを0にしたほうがいいですよ。
>>753 tableのclassに幅設定でいいのでは?
>>753 .text {table-layout:fixed; width:1000px;} じゃね?
ボーダーサイズ・セル間の距離があるから、内容量が厳密に100pxじゃないけど
内容がオーバーしたら幅バラバラになるかもしれん
内容に関係なく内容量100pxにしたいなら
.text {table-layout:fixed;}
.text col {width:100px;}
<table class="text" summary="about">
<col /><col /><col /><col />〜〜〜
<tr><td>画像</td><td>文字</td><td>画像</td><td>文字</td>〜〜〜</tr>
<tr><td>文字</td><td>画像</td><td>文字</td><td>画像</td>〜〜〜</tr>
</table>
757 :
756 :2009/08/03(月) 22:30:50 ID:???
>>753 あ、ごめん。
>>756 の2つ目のソースはこっちに訂正
.text {table-layout:fixed;}
.data {width:100px;}
<table class="text" summary="about">
<colgroup span="10" class="data"></colgroup>
<tr><td>画像</td><td>文字</td><td>画像</td><td>文字</td>(6列省略)</tr>
<tr><td>文字</td><td>画像</td><td>文字</td><td>画像</td>(6列省略)</tr>
</table>
758 :
753 :2009/08/03(月) 22:47:18 ID:???
>>757 御丁寧にありがとうございます。
両方とも試して両方ともいけました!
やはり
>>757 の方がゴチャゴチャせずにいいんでしょうかね
>>759 この量を添削とかふざけすぎだろ。自分で一行削っては確認を繰り返して原因くらい探せ
質問したいんならせめて、どのテーブルのどのセルにどのファイルでCSS指定してるのかくらい書けよ
>>759 ソースを見ても、最終的に目指したい状態や見た目が想像できない。
現状からどのように変更したいの?
763 :
759 :2009/08/03(月) 23:44:55 ID:???
>>761-762 さーせんorz
IllustテーブルとWebDesignテーブルの間を<br>で改行してるけど
その改行を使わずに今ぐらいの間隔を開けたいです
あと、WebDesignテーブルの下と角丸ボックスの黒の余白をもう少し開けたいです。
これでわかりますか?
>>763 お、俺が添削したXHTMLだな
上から目線ですまんけど、火曜が終わるまでにチェックと解説しといてやるよ
ホントに上から目線だな ・・・ま、それがおまえのいいところでもあるんだけど
766 :
759 :2009/08/04(火) 00:16:21 ID:???
>>764 先生またあえて嬉しいですw
あれから自分なりにがんばってますけどどうですかね?
若干lightbox2の設置に手こずったんすけどw
まだ新米だし上から目線で全然構いません。
宜しくお願いします
767 :
753 :2009/08/04(火) 00:48:01 ID:???
>>760 ナルホド!
参考になりました。ありがとうございます
>>763 marginとpaddingみたいな汎用性の高いプロパティの動作やバグは知っておいた方がいい
余白の作り方なんかでいちいち質問してたらきりがないぞ
>>764 優しくするのもいいけど加減も考えた方がいいんじゃね?
>768 同意 cssはブラウザによっていろんなバグがある。 float、margin、paddingが絡むと崩れやすい。
まぁそれを克服するスキルを 身に着ければいいだけなんですけどね
>>768 ごめん、俺構ってちゃんなんだ
次は解説もするから
基本的なことがわかってなかったみたいだから、まずは例やテンプレを示して自分でいじってみるのが覚えやすいと思う
俺もそうだったから
772 :
759 :2009/08/04(火) 14:52:35 ID:???
>>768 ほうほう、なるほど。
cssでそこに指定してるはずなのに上手く動作しないんすよ…
>>769 >cssはブラウザによっていろんなバグがある。
>float、margin、paddingが絡むと崩れやすい。
初めて知りました。
教えてくれてありがとう
>764 .textにmargin-bottomでできない? できないならブラウザとブラウザのバージョンも 書かないとわからんよ。 >WebDesignテーブルの下と角丸ボックスの黒の余白をもう少し開けたいです。 ここは角丸ボックスにpadding-bottomでもいくはず。
初めまして、whocaresのチャットについて質問させて下さい。板違いでしたら申し訳無いですが誘導お願いします。 チャットの入室人数を画像表示する機能(?)が元々サーバーさんに有るのですが、あの表示を文字にて表示するにはどうすれば良いのでしょうか? 試行錯誤してみたのですが、PCからは表示できても携帯からだとunsupportedと表示されてしまいます。 ご存知の方がいらっしゃいましたらぜひ教えてくださいませ。
whocaresというのを知りませんが、 動作はおそらくはcgiかphpでは? だとしたらどちかの質問スレがよいのでは、と思います
>>772 8行目<link rel="stylesheet" href="css/lightbox.css" type="text/css" />の閉じ忘れ
前も言ったけど、CSSをコメントで囲んではいけない
table要素の align属性は廃止された → gallery.css に .text{margin:10px auto;}
td要素の width属性は廃止された → <colgroup span="5"></colgroup>追加。.text colgroup {width:150px;}
[ ]はrel属性値に記述出来ない → 悪いJavaスクリプト?
以上、HTML-lintでチェックすれば出で来るので、自分で訂正するようにしてくれ
HTML-lintの解説がよくわからなければ、ここで訊いてもらっていいんだから
imgのborderでセルが押し広げられちゃって、指定した幅を超えてる
→ .text {width:750px;} .text colgroup {width:150px;} を .text {width:800px;} .text colgroup {width:160px;} に
>IllustテーブルとWebDesignテーブルの間を<br>で改行してるけど
>その改行を使わずに今ぐらいの間隔を開けたいです
>あと、WebDesignテーブルの下と角丸ボックスの黒の余白をもう少し開けたいです。
caption要素はmarginの外に表示されるので、上のmarginを0にする
→ .text {margin:0 auto 50px;} 長さを3つ指定した場合、上 左右 下
もちろん
>>773 さんの言う書き方で個別に指定してもいい
h
ttp://kissho.xii.jp/1/src/1jyou86715.zip いじったファイルだけうpした
表示にいらん時間がかかるし、あまり意味のないJavaスクリプトは使わない方がいいと思うなぁ
せめて使う使わないを閲覧者が選択出来ればいいんだけどね。これじゃあtarget属性が廃止された意味がなくなる
それにXHTMLがどういう構造になってるかわからなくならない?
個人的意見だから気にしなくていいけどね
XHTMLとCSSの辞典になるようなサイトはブックマークしてる?
まだ見つけてないなら、ググってね
777 :
759 :2009/08/04(火) 23:17:00 ID:???
>>776 今回もありがとう。
>table要素の align属性は廃止された → gallery.css に .text{margin:10px auto;}
これはどういう事なんですか?
センターにするには余白の上下を10px左右をautoにしたら宜しいんですか?
>imgのborderでセルが押し広げられちゃって、指定した幅を超えてる
画像が150×150だからって丁度にしたらダメなんすね。
>caption要素はmarginの外に表示されるので、上のmarginを0にする
自分のと添削のブレビュー等して見比べてたら
caption要素のmargin-topが反映されてなかったですよorz
textの方のmarginを10pxにしたらいけました。
>表示にいらん時間がかかるし、あまり意味のないJavaスクリプトは使わない方がいいと思うなぁ
lightbox不法ですか・・
最近結構使われてるサイト見るので私も使ってみたんすよ。
>XHTMLとCSSの辞典
とほほをブックマーク入れてます。
今回は解説までありがとうございます。
基本の参考書だけじゃダメっすね。
上級者が作ったのを、いじって調べていくと覚えやすいっす
頭悪すぎて不憫に思えてくる
どこから突っ込めばいいのか・・
780 :
Name_Not_Found :2009/08/04(火) 23:44:43 ID:aNlymEDd
自分で学ぼうという姿勢が感じられない。 初心者スレだから言っちゃいけないのかもだけど、少しは自分で調べればいいのにと思う。ググればこの程度のことはいくらでも出てくる。
>>777 .text{margin:10px auto;}
が判らないなら margin の文法を調べてみればいいんじゃないのか。
口で言うならともかく文字で「っす」ってもはや池沼レベルだろ
>>777 わからないことがあったら、まずW3Gで調べるようにしてみればどうか
とほほって、節子それXHTML1.1やない。HTML4.01やないかい
>>782 口で っす とか言われたら引くわ。文字もだけど
何という釣り堀状態。 ボックス三種の神器 margin、padding、borderの挙動が分かってくると大分楽になる。 そして慣れてきた頃にfloatでもがき苦しむのがオススメのコース。
785 :
759 :2009/08/05(水) 00:20:09 ID:???
私のせいで荒れてますね。
申し訳ないです。
>>780 自分なりにがんばってるつもりなんですけどね…
>>783 とほほじゃダメなんですかorz
>>784 ボックス三種の神器 margin、padding、borderをまずは覚えたらよろしいんですね。
ちょっと頭冷やしてきます。
がんばってる(笑)おんぶに抱っこで調子乗り過ぎだろwww まぁそんなことはどうでもいいんだけど ・marginは要素の外側(width,heightに加算)に余白を作る。floatと併用するとIEで左右のmarginが倍になるバグがある バージョンは忘れた。display: inline;を加えてやることで解決。(floatを指定するとdisplayは無視されるので実害なし) ・paddingは要素の内側に余白を作る。ブラウザによって挙動が違うから注意。宣言によっては平気らしいけど気をつけたほうがいい width,heightと併用したい場合は要素を入れ子にする。ハックでもいいけど。下記参照 <div style="width: 200px;"><div style="padding: 10px; border: 1px #000 solid;">横200px,内に黒枠1px・余白10px</div></div> ・borderは要素の外側に枠線を作る。paddingと同じくwidth,heightと併用したい場合には注意。上記参照 これを正しく理解してればおそらく問題はない。あとセレクタの書き方と汎用的なプロパティを知っておくこと。覚えなくてもコピペでいい ・floatとclearは対で覚える。ようは回り込みなわけだけどボックスの配置に使う。positionでも十分代用可 これは実際自分で試してみないと覚わらないだろうと思う。人の見ててもおそらく無駄 ↑の入れ子前提でwidth,heightとborder,paddingを分けるとすると、 ●●●●●●●●● ●○○○○○○○● ●○■■■■■○● ●○■□□□■○● ●○■□★□■○● ●○■□□□■○● ●○■■■■■○● ●○○○○○○○● ●●●●●●●●● ●margin ○width,height ■border □padding ★コンテンツ
とほほ見てるんだから事細かに書くより、どこを調べるかとかどう試すかとかを言った方が早くね?
ファイル名:1.html 内容:<href="2.html"><img src="a/1.jpg"border="0"> こんなファイルの1.htmlと2.htmlと1.jpgの部分の数字を1づつ増やしてどんどんファイルを作ってくれる都合のいいソフトはないでしょうか。 ちなみに私はhtml無知です。
IEのバグのためにそこまでぐちゃぐちゃにしなくても、if IEで適当に対処してやればいいんじゃないの
perlでもphpでも
>>790 即答ありがとうございます。
とりあえずなんかしてみます。なにすればいいのか分かんないけど。
793 :
759 :2009/08/05(水) 01:13:23 ID:???
>>786 先生かな?
事細かに説明ありがとう
私も甘えすぎましたね。
もうここで質問しないようにがんばっていきます
同人誌転載サイトみたいなページだなww
いやいやw 普通の絵やイラスト等自分の描いた作品を載せるサイトです。 知人いわくデザインがありきたりすぎると言われるけど やっぱり微妙ですかねw
シンプルがいいと思うけどね スクリプト入れてぐちゃぐちゃになった感じがするね どんな動作になってるか把握できてないでしょ Operaとかでも描写確認してる?
なるほど。 Operaってブラウザ初めて聞きましたよ Opera使ったほうがいいのですか?
基本的に、IE6か7〜・Firefox・オペラ・サファリあたりは表示確認しといたほうがいい。 IEはIETester使えば便利
IE6か7〜・Firefox・オペラ・サファリ ↓ IE6・7〜・Firefox・オペラ・サファリ だよな Operaは今のところもっともWeb標準に準拠したブラウザ Operaだとimgのa枠線とか表示されないみたいだから、表示するなら指定しないといかんね あとIEは枠線表示されるみたいだけど、Firefoxみたいにa:hoverの色が適用されたりはしないな。まあそもそも文字じゃないから 共通の表示にするなら、線を消すか、a imgにborderを指定した上で、a:hover img等にそれぞれborderプロパティで色を変えるとか
サファリってマックじゃないですか 私マックじゃなくウィンドウズですけど大丈夫かな Firefoxで確認したらIEと少し違うのでビックリしました 皆さんは各種色々なブラウザインストしてるのですかね
802 :
Name_Not_Found :2009/08/05(水) 16:58:40 ID:pcD/QGEP
IEベースで作ったらOperaでは変になるし Cssはむずかしいわ
メインブラウザは何を使用してる?
Firefoxだな拡張だけで広告ブロック、FTP、開発ツールにダウンローダも使えるから
Firefoxだな猫のスキンがあるから
シェアを理由にIE使ってる。6だが。
IE6使ってるヤツは氏ねばいい
IE6にすら対応させられないヤツは氏ねばいい
IE6にすらって、IE6以下があるのか?
IE7はIE6に比べるとだけど、随分ましだぞ
あと
>>807 はIE6の面倒を見つつ、愚痴を言ってるのだと思われ
IE5.5に対応させようとしたけど逆にスパゲッティになって萎えた
それIETesterには入ってるけど、セキュリティアップデート終了してるよ ネットに接続するのに使ってはいけないブラウザなんだから、むしろ対応なんかさせちゃ駄目だ
しかしwin95ユーザがいまだに存在してるのも事実なんだよなぁ まぁまともな記述してればほんのちょっとの手直しで対応できるんだから大した手間でもないだろう それすらできないやつはoperaにでも絞ってればいいんじゃね
セキュリティアップデートが終了したOSを使うとか…… てかそれってアクセス解析データから言ってるんなら、ロボットとかのUA偽造じゃね
814 :
Name_Not_Found :2009/08/06(木) 00:11:04 ID:1sjo8MWG
アクセス解析以外なら仕事で寄った企業2件と県立高校の図書室。三つとも今年だ
あるある。去年まで通ってた学校のPCの一部がそうだった。酷い管理体制だよな ま、ネットにつないでなければいいと思うけどね と言ってもFDとか媒介してくる可能性があるから、サポート切れのOSに突っ込む前のメディアは サポートが終了してないOSとセキュリティソフトで厳重にチェックする必要があるだろうけど
アクセス解析(Google Analytics)したら10万セッションのうち25だけIE5.5以下だった
まあセキュリティアップデートが終了したとか知らなかったり 理解出来なかったりで古いOSを使い続けている人は結構いるだろうな なまじサイトを対応させていると、使い続けて大丈夫だと思い続けるだろう まあこれはIE6とかにも言えることだけど、セキュリティ更新が切れたOSはさすがにまずいと思う 警告をだしてあげたほうが親切 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr"> <head> (省略) </head> <!--[if IE 5]><body>(セキュリティアップデートが終了して危険云々の内容を、いかにも非常そうに記述)</body><![endif]--> <!--[if !IE 5]><! --><body> (省略) </body><!--<![endif]--> </html> ぶっちゃけこんな感じでもいいんじゃない?
<!--[if IE 5]>
<META http-equiv="refresh" CONTENT="1;URL=
http://goggle.com/ ">
<![endif]-->
>>817 アップデートすらした事無いというPC初心者も多い・・・
820 :
Name_Not_Found :2009/08/06(木) 09:42:00 ID:JFuYFxwT
IEは、7と8に対応してれば十分じゃない? あとは全部、「対応してません」ってページに飛ばせばいい
firefoxが無駄にシェア伸ばしたのが原因だな
IE6以下の対応に尽力するのは 刑務所の福祉に尽力するのと同じ
CSS初心者です。基本的なことですが教えてください。 デザイン上、ヘッダ&フッタが上下にある横分断タイプのデザインではなく、 左側エリアにナビが上下貫いているデザインで、 ヘッダ&フッタは右側コンテンツエリアに入る縦分断タイプのデザインがあります。 XHTMLの記述で要素をマークアップする際に、左側ナビエリアから書いてしまうと ヘッダ要素が後ろに来てしまうけれど、それは避けて 理想的なXHTMLになるように、ヘッダ要素を最上部に記述したい。 こういう場合、普通にヘッダ→メニューの順番で記述して ヘッダの左マージンを調整して右にずらし、 メニューの上マージンをマイナス値にして上にずらすだけでOKでしょうか?
>>823 どういう順番で書きたいのかわからん
ヘッダ→メニュー(左側ナビ)→メインコンテンツ→フッタの順ってこと?
>>824 そうです。
それが一番、論理的で理想的な順番だろうと思ったので。
そんなこと重要じゃないですか?
>>824 つづきです。
XHTML+CSSの本を読んだら
見た目の順序とソースコードの記述順序は切り離して
重要度や先に記述するべき要素を判断するべきってあったので。
828 :
Name_Not_Found :2009/08/06(木) 15:40:33 ID:JFuYFxwT
>>826 重要度が高い情報を前にもってくるのは
SEO対策です。
google等のクローラーは
前からソースを前から呼んで重要度を判断しているので
出来るだけ前のほうにキーワードを入れたほうが
SEOに有利になるって理屈です。
ただ、あまり神経質になる必要もないと思います。
大手ポータルのソースを見ても
かなり乱雑なところも多いですしね
>>827 >IE6へのアップグレードを促すコード
IE6対応を打ち切るためのIE6対応とな
>>829 どこにも ”IE6へのアップグレードを促すコード” なんて書いてないんだが
IE6は確かにcssへの対応が独特wだけど これに対応させて、どのブラウザ・どのバージョンでも 均一に見られるようにコンテンツを作る これがわしらプロのwebデザなんですけどね
>>831 IEへの対応を打ち切って、軽いページを作るのがプロなんじゃね?
何のプロ?
さあ?
835 :
Name_Not_Found :2009/08/06(木) 18:49:01 ID:JFuYFxwT
そこでテーブルレイアウトの出番です。
WEBの制作委託受けてると現存するブラウザ全部に対応させてないと文句来ることあるしなぁ まあよっぽど汚い書き方してなければIEくらい別に苦でもないだろうけど
疑似クラスとかはどうすんの?
ブラウザ変えてガラリと崩れそうなアバンギャルドなページは商業には貢献しない これクリ知識な
>>837 :hoverは使う必要がない。別にCSSだけでもポップアップメニューは作れるからそれの応用
:before,:afterもあんまり必要性はないだろ。clearfixくらいしか思いつかね
擬似クラスは便利だけど無くても普通のクラスで十分代用できるし
>>828 レス遅くなってすみません。
今までテーブルレイアウト一辺倒で見た目ばかり重視していいたので
かっちりCSSとXHTMLの基礎を身につけたくて
がちがち100点満点の記述方法を学んでみたいのですが。
まあそれでいったら、そもそもデザインの時点で
縦分割は論理的にいけてないわけですしね。。
どうもありがとうございました。
もうひとつ質問です。 縦に連なるメニューで、第2階層へのリンクと第3階層へのリンクが混在しているメニュータイプ。 第2階層と第3階層で背景の色を変えたい。 見た目上は各行に背景とマージンをつけて、第3階層のマージンはより下げたい。 <div> <ul> <li>…</li> <li>… <ol> <li>…</li> <li>…</li> </ol> </li> </ul> </div> 論理的には上記のように書いて<div>にクラス指定をしたいところですが そうすると第2階層リンク用に指定したマージンを第3階層リンクにもひきずってしまいます。 こういう場合、XHTML上はすべて同列に<li>で扱って すべての<li>タグごとにクラス指定をするしかないでしょうか?
842 :
Name_Not_Found :2009/08/07(金) 10:26:19 ID:zpyFejP6
>>841 上位タグの設定は下位タグに引き継がれますんで
基本的にはそうするしかないのでは?
ちょっと質問がいまいち理解できないので
適当な回答になってしまいますが
>>841 2階層までしかないように見えるが、とりあえず子供セレクタ(要素 > 要素)使えばいいんじゃね?
844 :
842 :2009/08/07(金) 16:28:53 ID:???
どうもありがとうございます。
>>843 あ、すみません。第2階層といっているのは
メニューからのリンクで、メニューのページを第1階層と見なした場合のことです。
子供セレクタ使えばターゲット限定できるんですね?
やってみます。
先輩方、どうかご教授を。スレ違いだったら申し訳ない。 <object>タグの中身が全て読み込まれた時にしたい処理があるのだけれども、onLoadで拾ってくれないんです。 <object>の中で何をしてるかと言いますと、外部csvをデータバインドでobjectに突っ込んで これをJavaScript側で受け取って、と言う事をしようとしています。 どうすれば良いのでしょうか。
>>844 子セレクタは全てのブラウザで使えるわけじゃないから止めた方がいい。↓ならたぶんできる
div li {/*第二階層*/
margin-left: 10px;
background: #ccc;
}
div li li {/*第三階層*/
margin-left: 20px;
background: #999;
}
>>845 どう考えてもJSスレだろ。HTML側だけを変えるとしてもJSスレの方が適してる
847 :
845 :2009/08/07(金) 20:26:56 ID:???
ホームページ上で画像のみをスクロールさせようとしたら、その画像以下が閲覧できなくなってしまいました。 (つまりホームページ自体がスクロールできない) <style type="text/css"> <!--.imgwaku { width:560px; height:85px; overflow-x:auto;overflow-y:hidden;> </style> <div class="imgwaku"> <img alt="画像です" width="1600" height="60" src="画像.png" /><br /> </div> 何か問題ありますでしょうか?
>>848 コメント閉め忘れてるぞ
あとstyle要素内にコメント書くな
div.imgwakuの内部のimg以降にお前のいう「画像以下」があるのならoverflow-y: hidden;が原因。これは正常な動作 div.imgwakuの外に「画像以下」があるのなら他のソースも載せろ
初心者です。他のスレにも書かせてもらったのですが・・・ HEADが body {height:100%; } html {height:100%;} body > div.abc {height: auto;} div.abc {height:100%;min-height:100%; } で、BODYは <div class="abc">ボックス</div> です。 この記述で縦が100%の(ページの一番下まで伸びている)ボックスを作ろうとしたのですが、DOCTYPE宣言を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> にすると、IEではきちんと表示されますが、火狐だとボックスが伸びてくれません。 また、DOCTYPE宣言を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> にすると、今度は逆に、IEではきちんと表示されず、火狐だとちゃんと表示されます。 何が問題なのでしょうか?また、多少無理矢理でも良いので解決方法を教えていただけると助かります。
bodyに背景色なりつけてみれば分かる
>>852 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> ←なんだこれ。HTML4.0 Strictだぞ。こんなのもう存在してない
DTDのアドレス入れてないからIEが変な解釈してるだけだろ。うちの環境だと何の問題もないぞ
てか何がしたいの?
マルチはほんと氏ねばいい
質問です。 今までサイトの製作はDWで1から作ってきたのですが、 「photoshopで組んだものをDWに持ってくるのが普通」 と言われました。 PSでスライスした画像とhtmlをweb用に保存→ DWでHTMLを呼び出すということだと思ったのですが、合ってますか? これは「普通」のやり方なんですか? ネットではソフトをまたいだ講座が見つからず、こちらでお尋ねします。 よろしくお願いします。
発言者が「組んだ」で何を意味しているかわからないので どう答えていいのやら。 >PSでスライスした画像とhtmlをweb用に保存→ >DWでHTMLを呼び出すということだと思ったのですが、合ってますか? 前にいたWEB制作会社では、 このやり方でやっているデザイナーは皆無だった。 photoshopにHTMLまでは吐き出させない。 >「photoshopで組んだものをDWに持ってくるのが普通」 「組んだ」というのがデザインしたってことなら、この方法をとってた。 photoshop(もしくはイラレ)で全体のデザインを作ってから スライスして画像素材を作成し、DWでHTML部分を作る。
>>859 横から悪いが、Photoshopでスライスをまとめて保存するときに、
HTMLで吐き出してくれる機能あるよ。
小汚いHTMLだけどw
デザイナーが吐き出したそれをコツコツ修正するのがこの板の住人です
そもそも、「組む」ってのをPSに使うの聞いたことないわ
ねえわ 修正しようがないし、一から作り直すだろ
>>857 そういう作り方してるヤツも知ってるが、
一手間も二手間も行程が増えてるせいで仕事遅いわ。
ナビゲーションを画像に置き換えつつ音声ブラウザで読めるようにしたいんだけど、 text-indent:-9999pxとfont-size:1pxで消す以外に良い方法ないかな? 今はこんな感じでspanで挟んでdisplay: noneで消してるから音声ブラウザでは読めない状態 <ul> <li><a href="#"><span>あ</span></a></li> <li><a href="#"><span>い</span></a></li> <li><a href="#"><span>う</span></a></li> <li><a href="#"><span>え</span></a></li> <li><a href="#"><span>お</span></a></li> </ul>
>>865 <ul>
<li><a href="#">あ<span></span></a></li>
<li><a href="#">い<span></span></a></li>
<li><a href="#">う<span></span></a></li>
<li><a href="#">え<span></span></a></li>
<li><a href="#">お<span></span></a></li>
</ul>
li{position:relative;}
li a {position:absolute;top:0;left:0;width:xxpx;height:xxpx;overflow:hidden;}
li a span {position:absolute;top:0;left:0;width:xxpx;height:xxpx;background:url(../hoge.gif);}
>>865 なぜ「text-indent:-9999pxとfont-size:1pxで消す」のを除外するのか
理由があるのか?
理由によっても手段は違うだろう
868 :
865 :2009/08/09(日) 15:48:52 ID:???
>>867 携帯端末でCSS適用しても画像表示はしてない場合だと見えなくなるから避けたいなと
音声ブラウザがdisplay: none読んでくれりゃシンプルで良いんだけどね
positionとz-indexで他の要素の下に隠せば?マイナス指定もできるし何処にでも動かせる
a span { filter: alpha(opacity=0); opacity: 0; } 音声ブラウザで読めるかは知らんけど
>photoshopで組んだ これは単なるモックアップじゃね
メディアタイプというものがあってだな
>>857 です。
みなさんご意見ありがとうございました。
どうも不明瞭な点が多いので明日に詳細をきいてみます。
875 :
Name_Not_Found :2009/08/10(月) 13:16:34 ID:Qu7q7BsW
てすと
font-size1が最善の方法だろ 初心者に余計なこと教えるなよ(怒)
なにそれ。単位ついてないのは、IEのみでpxとして解釈されるだけだぞ
単位付いてなかったらemだっけ
単位を付けないでいいのは0だけ。単位を付けないと無効。ただしIEは
>>877
そしてそれがマイクロスタンダードへ…
882 :
Name_Not_Found :2009/08/10(月) 19:02:54 ID:WIfdd3wy
初歩的な質問で申し訳ないのですが
サイトを見てやってもうまくいかないので
どうかご指南のほうおねがいします。
現在外部cssファイルをhtmlファイルに反映させたいのですが
それがうまくいきません。
htmlのほうが
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<link href="./livedoor.css" rel="stylesheet" type="text/css">
<title>livedoor</title>
</head>
<body>
</body>
</html>
で、cssのほうが
body {background-color: blue}
となっております。
環境がちょっと整っていなっくて
デスクトップにwebというフォルダを作り
その中に
livedoor.htmlとlivedoor.cssという
ファイルをフォルダにはいれずに
おいています。どうかよろしくおねがいします。
bodyの中が空だからじゃね?
884 :
Name_Not_Found :2009/08/10(月) 19:12:45 ID:WIfdd3wy
bodyの中に文字などを入力しましてもまったく反応がなかったのですよ;w;
だよなぁ。別にどこもおかしなところないし 使ってるブラウザとバージョンは何? headの中に↓加えたらどうなる? <style type="text/css"> body {background-color: blue} </style>
886 :
Name_Not_Found :2009/08/10(月) 19:24:24 ID:WIfdd3wy
885さんのようにやったら青くなりました・w・ でもできれば外部スタイルシートでやっていきたいのですが 改善策はありますかね><?
887 :
Name_Not_Found :2009/08/10(月) 19:25:34 ID:WIfdd3wy
あとブラウザはIEとなってます
・htmlファイルとcssファイルが同じディレクトリにない ・cssファイルの名前を間違えている ・cssファイルの内容がbody {background-color: blue}でない ↑のどれちかじゃない限り原因なんて分かりっこない webフォルダごとzipで上げてくれ
889 :
Name_Not_Found :2009/08/10(月) 19:39:16 ID:WIfdd3wy
webフォルダをzipで上げるにはどのような 作業をすればよろしいのでしょうか><;? ちょっとそれがわからないです><;
zipに圧縮して適当なうpロダでも使えばいいだろ 少しは自分の頭で考えて調べてみろよ
まずは
>>888 の3つを一つずつ検証してみ
そのレベルだと、どうも1つめ臭い
892 :
Name_Not_Found :2009/08/10(月) 19:56:20 ID:WIfdd3wy
同じディレクトリというのはどういうことでしょう? webフォルダの中にフォルダは作らずに そのまま両ファイルを置いているのですが・・・ あとうpロダっていうのはアップローダーですかね? 圧縮ファイルまではできたのですが。。。
>>882 <link href="./livedoor.css" rel="stylesheet" type="text/css">
↓
<link href="livedoor.css" rel="stylesheet" type="text/css">
894 :
Name_Not_Found :2009/08/10(月) 20:11:18 ID:WIfdd3wy
893さんのようにやらせていただいても無理でした><;
絶対ファイル名だろ。今のままだとお前以外に確認の使用がないんだからさっさとzip上げろよ
898 :
897 :2009/08/10(月) 20:24:07 ID:???
かぶった、すまん
899 :
Name_Not_Found :2009/08/10(月) 20:25:03 ID:WIfdd3wy
今探しているのですがちょっと見つかりません;w; オススメのサイトがありましたら 教えていただけないでしょうか?
900 :
Name_Not_Found :2009/08/10(月) 20:27:24 ID:WIfdd3wy
ありがとうございます。 897さんのほうであげさせてもらいました^^
{\rtf1\ansi\ansicpg932\deff0\deflang1033\deflangfe1041{\fonttbl{\f0\froman\fprq1\fcharset128 \'82\'6c\'82\'72 \'82\'6f\'83\'53\'83\'56\'83\'62\'83\'4e;}} {\*\generator Msftedit 5.41.15.1515;}\viewkind4\uc1\pard\lang1041\f0\fs20\par body \{background-color: blue\} \par \par } なんだこれはw
902 :
Name_Not_Found :2009/08/10(月) 20:34:12 ID:WIfdd3wy
えΣ・w・;そんな風になってるんですか><? cssファイルはDWがないため アクセサリのワードパッドでlivedoor.cssをつくってから body {background-color: blue} のように記述したのですがまずいでしょうか><?
WordPadで作ったことないからわからんけど、メモ帳で body {background-color: blue} を貼り付けて、 livedoor.cssという名にして保存してみ
顔文字うぜぇ そのくらい自分で確かめとけよ
WordPadwwwwwwwww
906 :
Name_Not_Found :2009/08/10(月) 20:39:46 ID:WIfdd3wy
メモ帳ってどのパソコンでも入ってますよね?? 私の奴ワードパッドしか入っていないのですが;
>>906 ファイル名を指定して実行 -> notepad
908 :
Name_Not_Found :2009/08/10(月) 20:44:53 ID:WIfdd3wy
メモ帳で作りましたらうまくいきました>< 長々とありがとうございました^^
909 :
Name_Not_Found :2009/08/10(月) 21:32:10 ID:Qu7q7BsW
>>908 ワードパッドはデフォルト保存形式がリッチテキスト(.rtf)だから
メモ帳を使うかフリーのテキスト編集ソフトを使うべき。
もちろんワードパッドでも、保存するときにプレーンなテキスト形式(.txt)にすれば問題ない
あと文字コードはUTF-8にそろえといたほうがいい
もっと言えばTeraPadかNoEditorをインストールして、htmlファイル右クリック→編集 で出てくるソフトをそれに変更しておくといい
Macだとmiか でも、WinでEmEditor使っちゃうと、なんとなく使い勝手が悪く思えてくるんだよな
ez-htmlとかも結構いいんじゃないかな
Unicode文字?を扱えるのはEmEditorしかないな。有料版は滅茶苦茶高いけど
914 :
913 :2009/08/10(月) 22:17:18 ID:???
あ、メモ帳でも扱えるけどね
ez-htmlもいけるな。でもunicodeなんて使う機会ないよなぁ
916 :
Name_Not_Found :2009/08/11(火) 01:02:12 ID:Y2pkzsKz
個人サイトを作るくらいならSJISにしとけば windowsやmacで扱いやすいし、それで十分だと思う。 ただ長期的にはunicodeに統一される流れにあるので UTF-8で作っておけば間違いないことは事実。 正直、今のブラウザはEUCでもSJISでもJISでも 自動で切り替えてくれるのでそんなに気にする必要はないよ。 ただ、phpやperl等のサーバーサイドのスクリプト言語を使う場合は 文字コードを意識しないと文字化けが発生するから注意すべき
sql、php、html、js、css全部UTF-8で統一してる 統一しないと文字変換の時にインジェクションされるしね
携帯サイトはまだSJISだよ…
携帯用サイトってUTF-8使っちゃ駄目なん?
携帯サイトはSJISが無難。 古いタイプだとSJIS以外は火対応だったりする。
なるほど。hr要素やlink要素も未対応の携帯ブラウザがあったり?
922 :
Name_Not_Found :2009/08/11(火) 14:01:03 ID:Y2pkzsKz
>>921 フルブラウザなら当然搭載してるけど
携帯ブラウザだとちょっと変に見えるときあるね
CSS外部読み込みに対応してないブラウザは、さすがに現存してないよね?
924 :
Name_Not_Found :2009/08/11(火) 14:22:22 ID:NEcTwcfq
すいません、背景設定について質問です。 body{ width:100%; background-color: #F5F1E7;} #allcontainer{ background-image: url(bg.jpg); /* bg.jpgは幅950pxの画像でrepeatやposition設定をする必要はありません */ width:950px; margin:0px auto;} /* allcontainerはページ全体を包んでおり、コンテンツなどが複数入ります */ #footer{ clear:both; width:100%; background-color:#FFFFFF;} bodyで一番後ろの色を設定し、 一番大きな枠(?)である#allcontainerにシャドウ付きの背景画像を縦方向に設定し、フッタは<div id"allcontainer">〜</div>の外に配して100%幅にしたいと考えています。 しかし、#allcontainerの中にコンテンツを色々入れているのですが、背景画像がフッタのところまで来ないで途中で切れてしまっています。 #allcontainerで設定した背景画像はフッタの手前まで来るはずですよね? なにか原因となっているものはありますでしょうか? ちなみに</div>の数と場所に間違いはありません。 素人ですいません・・・。 是非宜しくお願い致します。
>>924 ソースに全角スペースは書くなとあれほど
書いていいのはタブ文字と半角スペースだ
>>924 pやh1〜h5などのmarginをすべて0にしてみれば
927 :
Name_Not_Found :2009/08/11(火) 20:23:31 ID:sR4r4/eL
質問です 携帯サイトで、画面両側に全角一文字分スペース空くようにしたいのですが、タグはどれが一番いいですか? 2〜3年前の機種でも見れるタグ希望です
CSSファイル中に <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> の記述をしているのに文字コードがSHIFT_JISになってくれません。 考えられる原因はなんでしょうか?
HTTPヘッダ見ろ
CSSをテキストエディタで開いて、Shift_JISに変換
>>927 body{margin-left:1em;margin-right:1em;}
932 :
Name_Not_Found :2009/08/11(火) 21:41:36 ID:sR4r4/eL
>>931 さっそくありがとうございます!使ってみたいところですが、
このタグは見れないメーカーとかはありますでしょうか?何回もすみません。
>>932 これはCSS。10年以上前に勧告されたプロパティ
まさか対応してないはずはないと思うけど、対応状況は具体的な機種名を言ってくれんとわからん
934 :
Name_Not_Found :2009/08/11(火) 21:53:05 ID:sR4r4/eL
CSSですか!CSSはドコモ対応してないんですよね…。 CSSじゃないタグで似たようなのはないですか?
ドコモはタグに直接style属性として書かないと駄目 <body style="margin:〜
936 :
Name_Not_Found :2009/08/11(火) 22:16:24 ID:1qWy8X6F
質問です。よろしくお願いします。 テーブルのセル内で要素がリンクなしの場合にはbackgroundなしで リンク指定ありの場合のみbackground指定をしたい。 (具体的には、リンクありのセル内にだけ<li>要素のlist-styleにあたるようなマークを頭につけたい。) ●css ---------------------------------- .abc { font-size: 12px; padding-left: 20px; } .abc a { background-image: url(../img/icon.gif); color: #999999; text-decoration: underline; } ●xhtml ---------------------------------- <tr><td class="abc">あいうえお</td><td>…</td></tr> <tr><td class="abc"><a href="#">あいうえお</a></td><td>…</td></tr> 上記のような感じで書いていますが、リンクありの場合でも背景が表示されません。 リンクカラーやテキストの装飾は反映されます。何がいけないのか教えてください。
>>935 マジでか!? style要素も対応してないの?
まさかそんなブラウザが存在するとは……携帯サイト作りは大変だな
auはフルブラウザじゃなくても疑似要素とか外部CSSとか普通に使えるのに
>>936 <a>はインライン要素だから、背景を指定すると、その文字等の部分だけに背景がつく。
.abc aに、試しにbackground-colorを指定してみたらいいよ。
さらに言うと、「.abc a」は「aを内包する.abc」ではなくて、「.abcの中にあるa」の意味だよ。
940 :
937 :2009/08/11(火) 22:25:32 ID:???
あ、style要素も無効なのか
941 :
Name_Not_Found :2009/08/11(火) 22:41:52 ID:sc/tQNRV
CSSを使って 見出しの最初の文字だけを装飾することは可能でしょうか? よろしくお願いします
:first-letter疑似要素使えばいい
943 :
Name_Not_Found :2009/08/11(火) 22:55:47 ID:sc/tQNRV
944 :
936 :2009/08/11(火) 23:52:53 ID:???
>>939 納得しました。
ありがとうございました。
困り果てたので失礼します。 フレームページを作ってるんですが、縦スクロールがつくくらいページ内容が長くなると、 そのスクロール部分で何かが隠れてしまうらしく、横スクロールがついてしまいます。 横スクロールバーを動かさないと、align="right"で指定したdivが完全に出てきません。 普段から小窓にしていて自サイトは絶対横幅指定しないぞ!っという信念のもと ページを作ってるんですが、どうすれば横バーが出ないようになるのでしょうか。 一体何が原因なんでしょう…。 スタイルシートoffでも横バーが出たので、スタイルシートが原因ではないのは確かです。 縦スクロールが出現すると横スクロールまで出る原因を教えてください。
>>945 >普段から小窓にしていて自サイトは絶対横幅指定しないぞ!っという信念のもと
「自サイトは絶対frame要素を使用しないぞ!っという信念」に切り替えたほうがいいよ
>>946 やっぱりソースあったほうがいいですか。
大変失礼しました。
長いので2レスで失礼します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd ">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="author" content="katsu">
<link href="sty.css" rel="stylesheet" type="text/css">
<title>********</title>
</head><body>
<h1>**********</h1>
<h2>***************************</h2>
<p>********************</p>
<table border="0" align="center">
<tr><td bgcolor="#333333">
<p class="l_f0">
●****<br>
****</p>
</td><td bgcolor="#333333">
<p class="l_f0">
●****<br>
****</p>
</td></tr><tr><td bgcolor="#333333">
<p class="l_f0">
●****<br>
****</p>
</td><td bgcolor="#333333">
<p class="l_f0">
●****<br>
********</p>
</td></tr></table>
<p class="l_f1" align="center"><font size="1">
****************</font></p><p>
********************
</p><p>
********************</p>
<h3>********</h3>
<p>********************</p>
<br>
<p align="right">
********</p>
<p align="right">
****</p>
</body>
</html>
あとだしで申し訳ないのですが、当環境unDonut +mod.1.48です
IE6と同環境と考えてもらって差し支えないと思います
>>947 元々フレームなしのページだったんですが、
ページが増えてきて分類がわかりにくくなってしまったので
仕方なしに使っています。ごめんなさい…。
950 :
945 :2009/08/12(水) 00:36:01 ID:???
952 :
928 :2009/08/12(水) 09:46:51 ID:???
>>928 です。
>>930 を試してみましたが駄目でした。
また、HTTPヘッダを見てみました。無知なのでどこまで晒しても大丈夫かわからないので関係ありそうな部分だけ抜き出してきました。
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
Accept-Language: de,en;q=0.7,en-us;q=0.3
ここらへんでしょうか?
どうやらファイルをアップロードする時になにかあるのではと思いました。
FFFTPを使っているのですが、index.php(ファイルを開いてみても文字コードはSJIS、文字化けなし)をアップロードすると、
EUCになってしまいます(このとき文字化けはしていない)
また、上記のファイルの拡張子を変えただけのindex.htmlをアップロードすると、きちんとSJISで文字化けなしで表示されました。
もしかしたらFFFTPの設定が悪いのかもしれません。
どなたかお願いします。
リクエストヘッダじゃなくてレスポンスヘッダな IEだと無視するから関係ないけどFirefoxの場合レスポンスヘッダとファイルの文字コードに違いがあると化ける
>>936 です。
>>939 の回答を踏まえて方法を変えましたがうまくいきません。
練習中につき、なるべくスマートな方法を習得する目的で
いったん全セルに背景以外のスタイルを指定して、
背景を追加したい該当セルにのみ追加のスタイル指定をする意図ですが
まったく背景が表示されません。(リンクの有無は関係ないのでソースは簡略化しています)
●css
----------------------------------
.abc {
font-size: 12px;
padding-left: 20px;
}
.abc .sub {
background-image: url(../img/icon.gif);
}
●xhtml
----------------------------------
<tr><td class="abc">背景なしです</td><td>…</td></tr>
<tr><td class="abc sub">背景ありです</td><td>…</td></tr>
参考にしている本では、<div class="abc sub">という記述をしているのですが
<td>要素だとダメなのでしょうか?
<li>要素でも同様のエラーが出てしまって、同一要素に対して2つのクラス指定をして
1つのみの適用と、2つ両方の適用をさせるテクニックが再現できません。
原因を教えてください。
一応教えてやると.abc .sub {}が間違ってる .sub {}が正解。参考にしてる本もそうしてあるだろ? class="abc sub"は.abc {}と.sub {}の両方を反映する ↓の場合は.abc .sub {}でいい <td class="abc"><a class="sub">hoge</a></td> あまり関係はないけど.abcをtd.abcに変えておくと他の要素でも同じクラス名で別のプロパティを指定できたりする
957 :
Name_Not_Found :2009/08/12(水) 20:39:22 ID:hRul6WxB
セレクタのパターンこんなにあるんやね 参考になった
いっぱいあるけどIE6のせいであまり使えない
隣接セレクタさえあればidもclassも使わなくていいんだけどなぁ。メンテしづらいだけだけど せめて:before,:afterさえ使えれば表現の幅が広がるのに
960 :
954 :2009/08/12(水) 21:41:00 ID:???
>>966 どうもありがとうございます。
できました。
しかし参考にしている本(の付録のソース)では何度確かめても
確実にabc .sub {}となっているように思います。。
なんでだろ?? たぶん何か見逃しているのかも。
お陰でだんだん理解できてきました。
>>960 セレクタ理解してたらそんな書き方しないからさ…
>>961 .abc, .sub だろw
うそ教えんな
964 :
960 :2009/08/12(水) 23:25:48 ID:???
× abc .sub {} ○ .abc .sub {} でした。変ですね。。。
>>963 の .abc,.sub はclass「abc」とclass「sub」へ同じ指定をする記述
>>964 の .abc .sub はclass「abc」の要素内にあるclass「sub」への指定
.abc.sub はclass「abc」とclass「sub」の両方が設定された要素への指定 ね
>>965 三つ目はIE7未満では上手く動作しないから人に教えるのには向いてない
IE7未満の場合はCSS側の複数のセレクタのうち最後のセレクタ、つまり.subしか見ないから
<td class="sub"></td>でも反映されてしまう。まぁ
>>954 のケースなら問題ないわけだけど
ちなみにjQueryを利用すれば上記のバグを解消できる。加えて隣接セレクタなんかも利用できるようになるから便利
td[class="abc sub"]
チラシ風のデザインをHTML化してくれ。 と頼まれて、PhotoShopファイルをもらったんだが、 どうスライスすればいいのか悩む。 チラシ風のデザインを残したい。 というのだが、とりあえずテキスト化したいところを テキストできるようにスライスすればいいのかな? でっかい写真画像があったり、角度がついた斜めの写真画像を沢山つかっているのね。 まさにWEBを無視した紙デザイン! そこでCSSで絶対配置できるように(通常のウェブページと制作するのと同じように) 丁寧にスライスしていくんだけど。 「スライスすることに意味あるの?」 「一枚画像でいいんじゃね?(もちろんSEO対策を取れた上で)」 とか思うようになってきた。 いわゆる大企業の、デザイン化されたページをみても、 堂々と、写真画像をど真ん中でスッパリとぶった切っているのを 見つけたりもする。 また、デザイン構成を無視したスライスを見たりもする。 正しいスライスって良くわからなくなってきた。 悩むなあ。同じようなこと考えている人いない?
そんな重いページは作らない
いやあ。重いっていってもFlashとか使うより遥かに軽いよ。。
>>968 スライスはたいして難しくないっしょー
手抜きしたかったら
チラシをスキャン
イラレでpdf保存
リンク先をチラシ.pdf
これでいくないですか
972 :
968 :2009/08/13(木) 01:24:16 ID:???
pdf化は、それはさすがにwww 今考えているのは、 @丹念に構成要素ごとスライスしてCSSで必至に再構築 Aテキスト以外を抜いて大雑把にスライス分割。 (ページを3分割するぐらい。) それらを背景画像にさせて、テキスト箇所を絶対配置させる。 B全部画像wwww。
>>971 グーグル先生や読み上げブラウザが
それで文字を読み取ってくれるならそれでいい
>>968 そもそもスライスしろと言われたのか?
わからないなら「ここをどうしましょう」って聞いて
要望をもらうのが一番丁寧な対応だと思うよ。
974 :
968 :2009/08/13(木) 01:32:36 ID:???
相手は紙専門のデザイン会社。あんまりウェブには詳しくない。 だから、スライスの事とかHTMLの事とかは知らないようです。 「ここをどうしましょう?」という具体的な事じゃないけど。 こういうの受けたら、みんなどうするの?と訊いてみたいのです。
元を見ないとわからん
>>970 バーカ、Flash自体は重かないよ
でかいサイズの画像をまとめて埋め込むから重くなるだけ
無知なくせに知ったかすんなw
977 :
Name_Not_Found :2009/08/13(木) 01:47:33 ID:RtXsm89G
こんばんは。質問のほうお願いします。 現在画像の回り込みをやろうと思っているます。 htmlのほうが <div id="main"> <ul><li>"平沼グループ"で新党を結成へ</li> <li>世界のグルメ都市、日本は3位に</li> <li>新型PS3は1万円値下がりか</li> <li>藤川議員の"前のblog"に異変が</li> <li>誰ともまともに付き合わない岩村</li> <li>亀田興穀、弟に対戦取られ複雑</li> <li>来日中の地震遭遇でパニックに</li> <li>朝の連ドラ"変な展開"で台無し</li> <li>"インフレが後押しした住宅購入"</li></ul> <img src="udon.bmp" class="mainimage"alt="19歳なのにおじちゃんよばわり"> <hr width="92%"> <span class="footer"> 注目のワード:サマージャンボ K−1 時をかける少女 心霊スポット 伊藤美咲</span> </div> cssのほうが .mainimage{float:right;} #main{ width: 500px; height: 900px; float:left; font-size:small; list-style-type:disc;} と記述しております。
978 :
Name_Not_Found :2009/08/13(木) 01:48:30 ID:RtXsm89G
そして画像のほうもうまく表示されたのですが、 位置が垂線と <span class="footer"> 注目のワード:サマージャンボ K−1 時をかける少女 心霊スポット 伊藤美咲</span> のところで回り込みがされてしまいました。私は <ul><li>"平沼グループ"で新党を結成へ</li> <li>世界のグルメ都市、日本は3位に</li> <li>新型PS3は1万円値下がりか</li> <li>藤川議員の"前のblog"に異変が</li> <li>誰ともまともに付き合わない岩村</li> <li>亀田興穀、弟に対戦取られ複雑</li> <li>来日中の地震遭遇でパニックに</li> <li>朝の連ドラ"変な展開"で台無し</li> <li>"インフレが後押しした住宅購入"</li></ul> の右に画像が表示されてほしかったのですが これはどのように改善したらよろしいでしょうか?
979 :
968 :2009/08/13(木) 01:49:38 ID:???
980 :
968 :2009/08/13(木) 02:00:35 ID:???
そりゃまあ。空のflashは軽いけど。 概して表現としてflash使わないといけないような、ページだと swfファイルは普通に重いと思うが。
981 :
Name_Not_Found :2009/08/13(木) 02:00:56 ID:RtXsm89G
すみません。質問させてもらったのですが少し進展が ありまして、 <div id="main"> <img src="udon.bmp" class="mainimage"alt="19歳なのにおじちゃんよばわり"> <ul><li>"平沼グループ"で新党を結成へ</li> <li>世界のグルメ都市、日本は3位に</li> <li>新型PS3は1万円値下がりか</li> <li>藤川議員の"前のblog"に異変が</li> <li>誰ともまともに付き合わない岩村</li> <li>亀田興穀、弟に対戦取られ複雑</li> <li>来日中の地震遭遇でパニックに</li> <li>朝の連ドラ"変な展開"で台無し</li> <li>"インフレが後押しした住宅購入"</li></ul> <hr width="92%"> <span class="footer"> 注目のワード:サマージャンボ K−1 時をかける少女 心霊スポット 伊藤美咲</span> </div> のように変えましたら一応<hr>の上には行って 画像も右に表示されました。しかしだいぶ リストの文と画像にすき間ができたのですが これはなぜでしょうか?
なしでしょw 切り取りが雑すぎなのと、htmlエラーそこまで出してたらヤバス
>>981 main{width:500px;}だからだろ
985 :
Name_Not_Found :2009/08/13(木) 02:11:48 ID:RtXsm89G
widthの方を少しイジってみて400pxにしてみました。 そしたら <span class="footer"> 注目のワード:サマージャンボ K−1 時をかける少女 心霊スポット 伊藤美咲</span> の行が1行で収まっていたものが2行になってしまいました。 これはしょうがないものなのでしょうか?できたら一行でおさめたいのですが。。。
986 :
968 :2009/08/13(木) 02:15:25 ID:???
ないよねwww。さすがに。 ま、htmlのエラーはちょっと無視させてもらって。 でもさ、スライスが雑なのはわかるんだけど。 それが、どんなペナルティになるのかな?(SEO的に?) キチンと商品べつにスライスできたら、 どんな利点があるのかな? それって、なんだか作成者の意地というか?良心というか? プライドというか? そんなものなのかな?
>>986 スライスとかって、HTMLにする意味なくね?
988 :
968 :2009/08/13(木) 02:24:19 ID:???
そう!! >HTMLにする意味なくね? そこに行き着くwww。 昔はさ、スライスすることで画像のサイズを抑えるという 目的あったけど。今は昔ほど容量に気をつけなくてもよくなってきたから。 なおさら。 人は何故それをスライスするのか。。。と悩む。
>>985 main{width:auto;}
あとclass="mainimage"alt="19歳なのにおじちゃんよばわり" がくっついてる
ちなみに知ってるかもしれないけど、画像を見ないときの代替コメントがaltで、ポップアップはtitleだからね
990 :
968 :2009/08/13(木) 02:34:46 ID:???
といろいろ愚痴を書き連ねたが。 基本は正しいHTML構文が書ければよい。そこに最大の目的を置くべきかと 今、思った。 その為に必要に応じてスライスしていくということかな。 スライスすべき画像の大きさに気を取られてたのかもしれん。
991 :
Name_Not_Found :2009/08/13(木) 02:39:21 ID:RtXsm89G
はい。ありがとうございます。 widthのほうをautoにしてみたところ 3カラムでの右っかわが下にずれ落ちてしまいました。 これはfloatの指定が間違っているのでしょうか? #main{float:left;} #sidebar{float:left;} #right{float:right;} という風に指定しております。
次スレテンプレ案
スレタイ:(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ3
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問大いに結構。分からない人は何回聞いても結構
(X)HTML/CSS/Dreamweaverの事なら何でもOK
ただし、JavaScriptやPHPなどはスレ違い/板違い。該当スレ/該当板でどうぞ
回答してくれる方は優しい人のみ!
質問者に対して暴言を吐く人は このスレを見るな!!
質問側も節度あるレスで!
質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー
>>980 を取った人(立てられない場合は次の宣言者)が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(
>>980 を取った場合も)
立てられない事が予め分かっている場合は、
>>980 付近の書き込みは自重しましょう
■前スレ
【Dreamweaver】HTML/CSS質問・優しく答えるスレ2
http://pc11.2ch.net/test/read.cgi/hp/1245601603/
994 :
Name_Not_Found :2009/08/13(木) 11:24:50 ID:RtXsm89G
#wrapper{ width:900px; } #main{ width:auto; height: 900px; float:left; font-size:small; list-style-type:disc; } #sidebar{ font-size:small; list-style-type:disc; width: 200px; height: 900px; float: left; } #right{ width:200px; height:900px; float: right; } cssの方のソースがこちらのほうになっています。
995 :
Name_Not_Found :2009/08/13(木) 13:48:58 ID:PPzHdTfD
>>981 のソースで、
画像とulの間の余白は400pxと、imgの横幅とulの横幅を加えたものの差になる
hrはデフォでブロック要素だったような気がするしdisplay: block;はいらないかも
imgタグを使わなくてもいいんなら#mainに背景画像として適用して、ulにマージンつければ解決
div#main {
width: 400px;
略
}
div#main img {
display: block;
float: right;
width: 画像のサイズ;
}
div#main ul {
float: left;
width: 400pxから画像のサイズを引いたもの;
}
div#main hr {
display: block;
clear: both;
}
あと、imgにはwidth,heightを指定した方がいい
>>974 専門用語を一般用語に言い換えて説明
曖昧な言葉に対し、「こういうことができるんですよ」とWebをみせて定義
「ここはお前に任せるわ」という言葉を引き出す
スーパーのチラシなんかなら1枚絵でそのまま載せても 閲覧者はチラシを見にきてるんだからいいと思うけど、 印刷物のチラシをそのまま載せることに意味がない場合は WEB用にコンテンツを作り直すのがベストというかマストだなあ。 スライスは、サーバーのレスポンスが悪い場合 ファイルの数だけリクエストが発生してストレスの元になるので 回線が太くなった今となっては諸刃の剣になりつつあると思う。
1000なら、のりぴー不起訴
999 :
968 :2009/08/13(木) 14:42:54 ID:???
そっか。今は容量よりファイル数がネックになる事もあるよね。 yahooサイトとか、細かいポイント画像とかは全て1枚画像収めていて いてそれをCSSで配置してるって聞いたことある。 細かいスライスは意味ないかもね。
次スレ立ててみます
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。