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

このエントリーをはてなブックマークに追加
1神様見習いの代理人

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

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

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

質問側も節度あるレスで!
2神様見習い:2009/06/22(月) 02:11:35 ID:???
>>1
乙であります。。。

2ゲット!
3うなぎ:2009/06/22(月) 20:42:51 ID:gotatCac
>>1
乙です。
手書きが出来ない初心者なのですが、Dreamweaverでやるのと普通のメモ帳の様なテキストエディタならどっちがいいですか?
やっぱり手書きは出来た方がいいのでしょうか?
4Name_Not_Found:2009/06/22(月) 20:55:20 ID:???
>>3
もう何度も同じような質問が出ているけど、結論は
自分がやり易い方法がいちばんいい

手書きは、出来ないよりは出来た方がいいけど
出来ないでもサイトを構築できるのだったら、それでいいんじゃない
5Name_Not_Found:2009/06/22(月) 21:02:59 ID:shhvXdQD
4を使っているのですが、作成したファイルを3で見たらデザインがぐちゃぐちゃになってしまいました。原因が全くわかりません。アドバイスお願いします。ちなみにファイルは手打で作成しましたす。
6Name_Not_Found:2009/06/22(月) 21:09:09 ID:???
font:'メイリオ', 'MS Pゴシック', Osaka, 'ヒラギノ角ゴ Pro W3';

フォント指定したんだけど、DWのプレビューではメイリオが表示されるのに
ブラウザだと表示されません。
なして?
7Name_Not_Found:2009/06/22(月) 21:54:07 ID:???
Meiryoにしたら?dw使わないからどうなるか知らんけど
そもそもユーザーが皆同じフォント入れてるわけじゃないからあんまり気にしなくてもいい
dwのプレビューがどんなものか分からんけど、もしかしたらお前がメイリオ入れてないだけだったり
8Name_Not_Found:2009/06/22(月) 22:01:43 ID:???
>>6
各ブラウザに対応させるのには "meiryo","メイリオ" 両方書くべし
9Name_Not_Found:2009/06/23(火) 16:14:18 ID:sMyY/ndW
HTMLファイル及びブラウザによる表示結果を書けとあるんですが、どこを見ればいいんですか?
10Name_Not_Found:2009/06/23(火) 16:18:13 ID:sMyY/ndW
身の回りの電気機器でネットワーク接続されたら便利になると思われるものを一つ挙げ、列挙した電気機器の設定を行うためのインターフェース部分をHTMLで技術せよ。
クーラーで作ろうと思うんですが、どうやってやればいいんですか?どんなボタンを何が良くてわざわざ選んだのかも書くらしいです。誰か助けてください
11Name_Not_Found:2009/06/23(火) 17:41:44 ID:???
宿題は自分でやりなよ
12Name_Not_Found:2009/06/23(火) 21:59:56 ID:???
これがゆとりか
13Name_Not_Found:2009/06/24(水) 15:32:30 ID:92bJVYa6
window.open( "xxx.jpg"

画像クリックでサイズ指定したサブウィンドウでオリジナル画像を表示させてるんだけど
この開いたサブウィンドウの画像をクリックすると閉じる。ってのはできないですか?
リンク先がjpgだとダメ。htmlで作らないと。ってことかな?
14Name_Not_Found:2009/06/24(水) 17:46:08 ID:???
うん
15Name_Not_Found:2009/06/24(水) 18:37:51 ID:???
サブウィンドウはマジでうざいからやめてほしい
16Name_Not_Found:2009/06/24(水) 21:49:02 ID:???
>>15に同意
クリックで閉じるならonclick="window.open("about:blank","_self").close(); return: false"
とりあえずhtmlとjavascriptの区別くらいはできとけ
17Name_Not_Found:2009/06/24(水) 22:11:02 ID:???
角丸作るとき
画像div画像の間に隙間が出来て困ります

divとimgタグのスペースを消したら解決できるのですけど
ソースが汚くなりまる

解決できますか?
18Name_Not_Found:2009/06/24(水) 22:15:36 ID:???
IE6だけのトラブルです
19Name_Not_Found:2009/06/24(水) 22:30:05 ID:9NI7EvKL
サイトの<iframe>内でFC2ブログ表示をすると
ニコニコ動画外部プレイヤーがテキスト表示になります
直リンクでブログ確認すると再生表示されます

FC2ユーザーサポートに確認▼以下回答
iframeからの表示などにつきましては正常動作されないこともございます。
また、正常に設置する方法などのカスタマイズにつきましてはサポートすることができません。

どうすれば<iframe>内で正常表示されるのか分かりますか?
FC2 iframe ニコニコ テキスト表示 でぐぐったら自分の質問が一番上にwwww
誰もこんな現象になってないのか…
20Name_Not_Found:2009/06/25(木) 00:25:34 ID:???
iframeのiframeは上手く表示されないってことかしらん
2119: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>
22Name_Not_Found:2009/06/25(木) 01:47:28 ID:Kj+i2guH
書き込んだ内容を後から編集できる掲示板を作ろうとしています
書き込んだ内容はtxtファイルに保存していて
編集するときにフォームに以前書いたtxtを出したいのですがどうすればよいでしょうか?

<textarea>ここにコメントを書き込んでください</textarea>

↑の”ここにコメントを書き込んでください”の部分をtxtファイルにしたいのですが・・・
23Name_Not_Found:2009/06/25(木) 07:06:20 ID:???
>>21
一番下ので表示できてるんなら、それでいいんじゃねーの?
>>22
スレチ。使用してる言語のスレで聞け
2413: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作ってそれをリンク貼れということですか?
25Name_Not_Found:2009/06/25(木) 11:08:58 ID:???
>24
少しwindow.openとかでぐぐって来たらどうだね
2613:2009/06/25(木) 11:39:51 ID:???
すみません・・
やはりサブウィンドウのリンクを.jpgにしておいて
開いたjpg(サブウィンドウ)をクリックで閉じるというのはやはり無理でしょうか?

).close(); return: false"
だと開いてくれず、
).close()にしてみたら開いたとたん勝手に閉じてしまいました。
ここのどこかにクリックで閉じるが適用できると言うことでしょうか?
27Name_Not_Found:2009/06/25(木) 11:55:36 ID:???
>onclick="window.open("about:blank","_self").close(); return: false"
これは使えなかったの
28Name_Not_Found:2009/06/25(木) 12:12:52 ID:???
>>26
できるわけねーだろ。.jpgが何なのか調べて来い
あと自分に対する返信は全部理解できるまで何度でも読んどけ。>>14とか

サブウィンドウはhtmlで(画像の個数分ページを作る)
<html><head></head><body>
<img src="XXX.jpg" onClick="window.parent.close()">
</body></html>
これで閉じることはできる。開くのはwindow.open()でググれ
2913: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のリンクに書くのでしょうが、どういう風に書いたらいいかわかりません・・
30Name_Not_Found:2009/06/25(木) 12:35:23 ID:???
>>29
お前自分で一切調べてないだろ
まずjavascriptの構文勉強してからonclick,window.open(),close()でググレカス
31Name_Not_Found:2009/06/25(木) 12:46:37 ID:???
そんなめんどくさいことやんないでさっさとLightBox導入してカスタイマイズでもしてた方がいいんじゃない
3213:2009/06/25(木) 12:47:29 ID:???
>>30
調べてます。
教えていただいた文をどこに入れる・または入れ替えるのか
調べてるんですが。。
これってリンク先をhtmlにして書き込むってことですか?
3313:2009/06/25(木) 13:09:46 ID:???
以前から調べてるんですがやはりサブウィンドウにjpgしてだと
その後のクリック閉じるという命令を親ウィンドウに書いても無理と言うことでしょうか。
何処を見ても画像を開くのはあるが、閉じるとなるとサブウィンドウ用のhtmlを用意とあります。
34Name_Not_Found:2009/06/25(木) 14:26:54 ID:TwkEo7eB
ライブビューについて質問です。

DreamweaverでHTML込みのPHPのファイルを操作することがあるのですが、
ライブビューにすると、PHPでの処理も閲覧できるのでしょうか?
echoで表示する箇所が出力されたり。
35Name_Not_Found:2009/06/25(木) 15:46:16 ID:???
>33
>何処を見ても画像を開くのはあるが、閉じるとなるとサブウィンドウ用のhtmlを用意とあります。
そういうことです
3613:2009/06/25(木) 15:59:33 ID:???
>>35

あらら・・
では16に書かれてた↓はなんだったの・・
onclick="window.open("about:blank","_self").close(); return: false"
37Name_Not_Found:2009/06/25(木) 17:35:39 ID:???
これからサイトを作っていきたいんですが
HTML4.01とかXHTML1.0や1.1やStrict、Transitional、Framesetなどたくさんあって迷います
デザインやソースの綺麗さはこだわりませんがなるべく多くの人が見れるサイトにしたいです
将来的にはPHPなども使っていきたいですがどのバージョン使っていけばいいですか?
38Name_Not_Found:2009/06/25(木) 17:46:46 ID:???
Strictがいいよ、覚えるタグが少なくて済む
なるべく多くの人が見れるサイトにしたいなら、余計なことは一切しないほうがいい
3919:2009/06/25(木) 18:04:08 ID:???
>>23
プレイヤー表示がしたいので苦戦しているのですがネ

原因を<iframe>ばかりに着目していましたが
考えてみればjavascriptの方が原因か…?
其方の方面で再度探り直します
ノシ
40Name_Not_Found:2009/06/25(木) 22:23:16 ID:???
>>37
最初は4.01のFramesetでいい。
徐々にあげていって最終目標はXHTML 1.1で
41Name_Not_Found:2009/06/26(金) 00:15:20 ID:???
とある事情で海外からのHPへの接続を遮断したいのですが、
HTMLにその手の拒否命令等は組み込めますでしょうか?
42Name_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は×印がついて見れません。
なんでですか・
43Name_Not_Found:2009/06/26(金) 00:47:41 ID:???
>>42
DTDの宣言ないのに閉じタグ使い???
画像とCSSのディレクトリはあっているのか?
jpgはちゃんとRGBのjpg?
44Name_Not_Found:2009/06/26(金) 00:56:51 ID:P/Jnr4bu
42の者です
JPGはRGBでした。
ディレクトリがちょっとわからないので明日調べてみます。ありがとうございます。
45Name_Not_Found:2009/06/26(金) 00:57:28 ID:???
>>40
おいっ、おまいは答えてはいけないレベルたぞ ! !
46Name_Not_Found:2009/06/26(金) 00:57:56 ID:P/Jnr4bu
あ、でもJPGのサイズがA4だったんですが、これも関係ありますか??
47Name_Not_Found:2009/06/26(金) 01:20:55 ID:???
>>46
A4サイズは関係ないが、表示はピクセルとdpiの方がが問題。
ブラウザが読み込むのに時間かかる大きい画像は、すぐには表示できず
最初×でることがあるが、
そもそもそんな画像を表示用に使ってたら誰も見てくれないで
戻るボタンだな。

一応いっとくが、実際の拡張子は大文字JPGで、
HTMLは小文字だと、
ローカルでは表示されてもネットではデッドリンクになるぞ
48Name_Not_Found:2009/06/26(金) 01:26:31 ID:P/Jnr4bu
>>47
ありがとうございました!わかりやすいです。
とりあえず画像の解像度など調べてみます。
拡張子も小文字で確認します。
ありがとうございました
^^
49Name_Not_Found:2009/06/26(金) 02:58:25 ID:???
>>41
HTMLでは無理。
.htaccessを使うのが普通。鯖によっては使えないケースもあるけどな。
50Name_Not_Found:2009/06/26(金) 07:02:55 ID:???
>47
>一応いっとくが、実際の拡張子は大文字JPGで、
>HTMLは小文字だと、
>ローカルでは表示されてもネットではデッドリンクになるぞ

えっ?
51Name_Not_Found:2009/06/26(金) 07:23:49 ID:???
>>50
うpしたファイル名がhoge.JPGなのに、HTML内で<img src="hoge.jpg" />って書くと
ちゃんと表示されないってことだろ。
52Name_Not_Found:2009/06/26(金) 09:12:45 ID:???
>51
すまん そういうことか
HTMLでは本来大文字で表記されるべきみたいな意味に捉えてしまった
53うなぎ:2009/06/26(金) 10:02:14 ID:iEdiFiXz
>>42
ファイル指定する時に .とか/はちゃんと入ってますか?
なぜCSSも反応しないんでしょうね。
54Name_Not_Found:2009/06/26(金) 11:16:00 ID:???
ディレクトリが間違ってんだろjk
55Name_Not_Found:2009/06/26(金) 13:51:31 ID:???
ソースフォーマットで質問あります。
タブ1、スペースでやりたいのですけど
h1~とかのタグだとタブ4ぐらいスペースあきます。
よろしくお願いいたします。
56Name_Not_Found:2009/06/26(金) 15:37:54 ID:P/Jnr4bu
>>53
入っていると思うのですが…。また挑戦してみます。
57Name_Not_Found:2009/06/26(金) 17:47:26 ID:???
>55
dreamweaverのソースコードフォーマット機能のことか?
だったら
メニュー > 編集 > 環境設定 > コードフォーマット
に設定する項目がある
58Name_Not_Found:2009/06/26(金) 17:47:33 ID:???
>>55
質問するときは具体的に例をあげるといいよ
タブ1やタブ4とかいまいち言っていることが良く分からないから

ソースのフォーマットは自分だけが見るのなら何も気にしなくてもいいし
他人に見せるのならインデントがあれば十分。タブでもスペースでも可
5955:2009/06/26(金) 18:16:17 ID:???
<div>
<ul class="t12s140">
<li></li>
</ul>
</div>
6055:2009/06/26(金) 18:17:24 ID:???
まちがえました
ul,liは半角スペースです
61Name_Not_Found:2009/06/26(金) 21:28:52 ID:???
(;´д`)…ダメダコリャ
62Name_Not_Found:2009/06/26(金) 22:23:19 ID:???
何を言ってるのかよくわからん・・・
63Name_Not_Found:2009/06/26(金) 22:36:32 ID:???
paddingとかmarginの話かな
64Name_Not_Found:2009/06/26(金) 23:20:26 ID:???
暗号解読班の出番だな
6555: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回+半角スペースっていみです
よろしくお願いいたします。
66Name_Not_Found:2009/06/27(土) 00:03:18 ID:???
Please japanese.
OK?
67Name_Not_Found:2009/06/27(土) 00:34:53 ID:???
悪いけどもうちょっと理解してから質問してください
6855:2009/06/27(土) 00:44:22 ID:???
益子 貴寛のガイドラインに沿っただけなのに
説明って難しい

ぼけ
69Name_Not_Found:2009/06/27(土) 01:00:30 ID:???
日本語が理解できなくて逆ギレとは之如何に
70Name_Not_Found:2009/06/27(土) 01:14:21 ID:???
>>68
それじゃガイドラインも理解できていないw
益子 貴寛もいい迷惑だね
71Name_Not_Found:2009/06/27(土) 01:42:55 ID:???
画像掲示板のような物を作りたいのですが、わからないところが出てきたので質問させてください
画像を入れてコメントを書いて投稿ボタンを押したら
完了画面に飛ぶようにしたいのですがどうすればよいのでしょうか?
formのactionを複数入れる方法があれば楽なのですが・・・
72Name_Not_Found:2009/06/27(土) 01:59:25 ID:???
>>71
スレちがい
73Name_Not_Found:2009/06/27(土) 02:07:04 ID:???
>>72
htmlの部分なのでここで聞かせてもらったのですが・・・
何処のスレに行けばいいのでしょうか?
74Name_Not_Found:2009/06/27(土) 02:24:46 ID:???
>>73
たとえばこんなのとか
ttp://javascript.eweb-design.com/1005_pj.html
75Name_Not_Found:2009/06/27(土) 03:38:20 ID:???
テキストの均等割付について質問なんですが
3カラムのブログを全体的に均等割付、禁則処理をしたくて
例えば以下のような指定をしています

.entry {
text-align: justify;
text-justify: inter-ideograph;
line-break: strict;
}

IE、Firefoxは全く問題なく均等割付、禁則処理してくれるんですが
SafariとOperaだけが上手く行きません
具体的には、サイドバーなどの短い文章は均等割付になるんですが
メインコンテンツの長文テキストが全く効きません

これはこういう仕様なんでしょうか
ブラウザのバージョンは全て最新です
76Name_Not_Found:2009/06/27(土) 11:30:40 ID:???
SafariとOperaではtext-align: justify;は和文には効かなかったような気がする
そもそも文末以外を両端揃えにするだけだから等幅フォント使った方が楽だと思うんだけどな
77Name_Not_Found:2009/06/27(土) 15:38:32 ID:???
質問させてください
現在<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>
78Name_Not_Found:2009/06/27(土) 15:39:47 ID:???
↑続き


<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を埋め込んでます
79Name_Not_Found:2009/06/27(土) 15:40:50 ID:???
↑すみません、まだ続きます

<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構文とかになってしまいますか?
板違いだったらすいません
80Name_Not_Found:2009/06/27(土) 17:04:47 ID:???
>>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のが確実だし併用するのが一番かも
81Name_Not_Found:2009/06/27(土) 18:20:56 ID:QaJ00wVD
td style="border: solid 5px white" valign="middle" align="center"

枠を指定し、縦横サイズ指定した画像を入れたのですが、
win IEだと下に1pxほど余白が出来てしまいます。
これを回避する方法はないでしょうか?
82Name_Not_Found:2009/06/27(土) 18:23:06 ID:???
テーブルレイアウト(笑)
83Name_Not_Found:2009/06/27(土) 18:37:22 ID:???
<img>と</td>の間にスペースとか改行入ってないか?
それを無くすかまたはアホくさいけど<td><img><br></td>これで回避できたような気がしないこともない
もしくはセルのサイズ指定して背景画像として入れればいい

関係ないけど
style="border: solid 5px #fff; text-align: center; vertical-align: middle;"
こっちのがいいかもな

テーブルは表組むだけならいいけどレイアウトには使わない方がいい
84Name_Not_Found:2009/06/27(土) 23:22:31 ID:???
>>76
なるほど
とりあえず仕様として理解しておきます
85Name_Not_Found:2009/06/27(土) 23:27:14 ID:???
とりあえず、そう聞いておきましょぅかね
86Name_Not_Found:2009/06/28(日) 13:17:23 ID:bmqJ44ma
ホームページ作成を始めて2ヶ月の初心者です。質問させて下さい。
50ページ程のHPで左側に全ページ共通のリストがあります。
そのリストを1項目でも増やしたら50ページ全てに手を加えています。
多少、階層を持っており、リンクの間違いなどが多発します。
うまく言えませんが、1つの修正・更新でも該当ページが多岐に渡る場合、
皆様はどのように対処されていますか?
テンプレート機能は知っていますが、他のHPを見ても<editabele・・・>
なんてありませんし、宜しければヒントとなるHPでも教えて頂けないでしょうか。
使用ソフトはdreamweaver cs3です。
87Name_Not_Found:2009/06/28(日) 13:30:51 ID:???
検索置換
88Name_Not_Found:2009/06/28(日) 14:11:47 ID:O3ePBFBA
超初心者ですが質問です

現在HTMLで左右に二分割したフレームのページを作ってます
そこに小説を載せようと思っていて、
左側にページ数、右側にページ(小説)を表示させたいんですが、
左側のおページ数をクリックして次ページに飛ぶだけでなく、
右側のページそのものをクリックしても次ページに飛べるようにするには
どうしたらいいんでしょうか・・・

どなたかお願いします


89Name_Not_Found:2009/06/28(日) 15:07:56 ID:???
>>88
普通に右側のページにリンク張ればおk
90Name_Not_Found:2009/06/28(日) 18:38:39 ID:???
>>86
テンプレートorライブラリ機能を使って作業しても、
最終的にdw専用のタグ(というかコメント)を消したデータを
サーバーにUPしている事は多い。
91Name_Not_Found:2009/06/28(日) 19:49:41 ID:???
すいません、お力をお借りしたく…。

他人様のサイトですが、たとえばこのページ。
ttp://az-store.nrym.org/archive/mynotes/lecture/html4ref/link
IE8で、代替スタイルシートに切り替えたり無効化しようとすると固まります。
Opera9・FireFox3では問題ありません。

一方で、こちらも他人様のサイトですが
ttp://www.ihara.org/accessibility/index.html
では、IE8でも切り替え・無効化がうまくいきます。

なぜなんでしょうか。どうすればフリーズを回避できるでしょうか。
92Name_Not_Found:2009/06/28(日) 20:21:48 ID:???
CS4を使いの方にお尋ねです。

自分の会社はXMなのですが、お客さんのところに行って編集しようとしたら
cs4が入っていました。
プロパティのところにあった文字色設定が消えているのですが、CSSではなく
htmlの編集で行きたいのですが、文字色パレットを表示させる方法は
cs4からは無くなったのでしょうか?
93Name_Not_Found:2009/06/28(日) 20:22:44 ID:???
>>91
下のURLのやつは選択したスタイルシートをサーバーサイドで優先スタイルシートに設定したHTMLを出力するね
94Name_Not_Found:2009/06/28(日) 21:02:44 ID:bmqJ44ma
>>90
コメントを消されてるとは思いもしませんでした。
私はテンプレートを試してみましたが、うまく機能させる事ができず、
他サイトのソースを見てもコメントを発見できなかったので、
勝手に使えないと判断していました。参考書を見て再度挑戦しましたら
機能させる事ができました。さらに使いこなせるよう頑張ります。
ありがとうございました。
95Name_Not_Found:2009/06/28(日) 21:09:00 ID:???
IE6を使っているんですが同じフォントを指定しているのに
FONTタグを使ったときとスタイルシートを使ったときで字体が違います。
スタイルシートを使うと字が太くなり行間が広くなってしまうんですが
どうすれば直せるんでしょうか?
96Name_Not_Found:2009/06/28(日) 21:41:00 ID:???
letter-spaceing
97Name_Not_Found:2009/06/28(日) 21:42:14 ID:u8XUwyRj
imgタグ内からのリンク先もrelでnofollowしないとジュースこぼれますか?
それとも
aタグ内からのリンク先だけ?
教えて下さい。
98Name_Not_Found:2009/06/28(日) 21:43:43 ID:???
ttp://pikohammer.ath.cx/ph/pikapaint/PikaPaintTop.php

このページは何が間違ってるから、正常に表示されないんでしょうか?
99Name_Not_Found:2009/06/28(日) 22:15:14 ID:VwQyk16H
>>98
改行を入れ過ぎなんじゃないでしょうか?
100Name_Not_Found:2009/06/28(日) 22:31:43 ID:???
>>98のインラインフレーム内のページ
ttp://pikohammer.ath.cx/ph/pikapaint/PikaVmlData/V1246059713.html
は改行がそれほど含まれていませんが、Tridentでしか絵が表示されません
10191:2009/06/28(日) 23:17:07 ID:???
すいません。自己解決しそうです。

ブロック要素(?)に、

display: inline;

を指定しているスタイルシート適用の状態から、
スタイルシート無効化すると固まってしまうようです。
displayのデフォルト値に戻らず、描画できなくなってしまうんでしょうか。

これってIEのバグだと思うのですが、どこかに載ってるのかな…。
10277〜79です:2009/06/28(日) 23:33:41 ID:???
>>80

>フラッシュと代替画像を同じサイズにしておいて


その手がありました!!
すみません、簡単なことなのに思いつけませんでした(汗

おかげでスムーズに行きました!!
ほんとありがとうございました!!!
103Name_Not_Found:2009/06/29(月) 11:18:47 ID:???
開いたウインドウサイズが貼られてる画像より小さい場合のみ縦横比を保って縮小したんだけど
こういうのってできますか?

どこに書けば良いんだろう。
104Name_Not_Found:2009/06/29(月) 15:06:34 ID:???
>>103
JavaScript関係できけばいいよ
105Name_Not_Found:2009/06/29(月) 17:27:11 ID:FAt6qSgL
はじめまして。質問です。
今大学の講義でhtmlを扱っていて、サイト内のみの検索機能を付けたいです。

どのような感じかというと、都道府県の特産物検索システムというものを作っています。
入力フォームとリンク機能なんですが、入力フォームに入力後、リンク先を見つけ出し、
表示するようにしたいのですが、可能でしょうか?ちなみにcgi形式を使ってます。
例:"東京都"と入力→検索→東京都について表示
106Name_Not_Found:2009/06/29(月) 17:59:26 ID:???
>>105
あなたが教員なら、板違い。WebProg板でどうぞ。

あなたが生徒・学生なら、そういうことを掲示板で質問しちゃ駄目。
教員に質問するとか、自分でGoogleとかで情報を探すとかしましょう。
107Name_Not_Found:2009/07/02(木) 19:27:56 ID:???
上下にフレームでページを別けてます
上のページにはサイト名やメニューを置いてるだけなのですが
F12のプレビューで見ると何故かスクロールしてしまいます。
スクロールしない方法を教えてください。
108Name_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をどんな感じに変えればいいのでしょうか。
109Name_Not_Found:2009/07/02(木) 21:00:21 ID:???
>107
scrolling="no"

>108
図がよく解んない
「このページみたいにしたい」ってURLがあるなら
それ見せてくれた方が早い
110Name_Not_Found:2009/07/02(木) 21:15:13 ID:???
ヘッダー
ナビゲーションバー  右カラム
左カラム コンテンツ 右カラム
フッター

こうか?
111107:2009/07/02(木) 21:37:55 ID:???
>>109
scrolling="no"を何処に入れたらいいんですか?
112Name_Not_Found:2009/07/02(木) 21:40:55 ID:???
上のフレームのbodyタグかindexじゃないの
113Name_Not_Found:2009/07/02(木) 22:24:59 ID:???
107はframeタグについてぐぐってこい
不勉強すぎ
114Name_Not_Found:2009/07/02(木) 23:26:46 ID:???
■■■■■■◇◇
■■■■■■◇◇
○○□□□□◇◇
○○□□□□◇◇
○○□□□□◇◇
○○□□□□◇◇

こんな形を望んでいるに相違あるまい。
元の形が分からないので、どう手を入れるかは他に任せた。
115Name_Not_Found:2009/07/02(木) 23:52:06 ID:???
そろそろフレーム使うのやめようぜ
116Name_Not_Found:2009/07/03(金) 01:05:10 ID:???
ユーザーに画像をアップしてもらい、それを表示するというものを作っています
小さな画像は引き伸ばして大きな画像は縮小して表示スペースぴったりにさせたいのですが
画像のサイズの調べ方がわかりません
どうかご教示ください
117Name_Not_Found:2009/07/03(金) 01:10:00 ID:???
width="100%"
118Name_Not_Found:2009/07/03(金) 01:11:57 ID:???
>>117
それだとそのままのサイズで表示されてしまうと思うのですが・・・
119Name_Not_Found:2009/07/03(金) 01:13:15 ID:???
前やったから記憶が曖昧だけど、divかテーブルの横幅が指定されてる中だったら、その横幅の100%で表示されてたと思う
でも等倍じゃないから意味ないな
120Name_Not_Found:2009/07/03(金) 01:15:26 ID:???
>>118
<a href="画像のURL"><img src="画像のURL" /></a>
こうすればおk

てか何がしたいの? PerlかPHPの質問?
121Name_Not_Found:2009/07/03(金) 01:18:26 ID:???
divボックスの大きさが横と縦両方100pxだった場合
たとえば縦150、横70の画像を表示する時に自然とボックスの中におさまるようにしたいってことじゃないの
122Name_Not_Found:2009/07/03(金) 01:32:50 ID:???
HTML/CSSで書くなら
width:150px;max-height:200px
こんな感じで
123Name_Not_Found:2009/07/03(金) 01:53:36 ID:???
>>120
>>121さんが私の言いたいことを的確に表現してくれました
124Name_Not_Found:2009/07/03(金) 23:21:53 ID:???
アップロードっていってるからサーバサイドを使うと思うんだが
もしそうなら <img> を出力するときに width と height を
一緒に指定して出力してやればいいんじゃね?

HTML・CSSの範疇をちょっと超えてるけど
125Name_Not_Found:2009/07/04(土) 11:41:36 ID:bgbjl5EI
初質問です、宜しくお願いします。

現在商用でPC・携帯サイトを作成しているのですが、ディレクトリの操作がうまくいきません。
アドレスを

http://...jp/(PC)
http://...jp/m/(携帯)

と定めたいのですがディレクトリが転送されず(物理的には転送済みなんですがwebで反映されない)困っています。
どうかご指南宜しくお願いします。

当方DW CS3、FileZillaを使用しています。
126Name_Not_Found:2009/07/04(土) 12:17:28 ID:???
反映されないのは単にそういうサイト作ってFTPしただけだからではないの?
携帯からのアクセスを携帯サイトに勝手に飛ばしたいなら
携帯サイト振分機能のあるサーバを使うか、
PHPを仕込んだりしないと無理
127Name_Not_Found:2009/07/04(土) 12:41:48 ID:???
パーミッションとか
128Name_Not_Found:2009/07/04(土) 12:50:47 ID:???
>>125
public_htmlがあるならその下に置きましょう
129Name_Not_Found:2009/07/04(土) 15:03:57 ID:GLX4jaRM
>>108です
なんかずれてしまいました。

ttp://sinsoku.livedoor.biz/
こんな感じにしたいのですがどうすればいいでしょうか?
130Name_Not_Found:2009/07/04(土) 15:17:00 ID:bgbjl5EI
>>126
やはりですか。
PHP勉強しなければいけませんな。ありがとうございます。

>>128
public_htmlの下にはmフォルダ(携帯サイトデータ)を
そのまま入れちゃっていいんでしょうか。
mフォルダから取り出してpublic_htmlの真下にhtmlを置くべき?

フォルダの階層がそのままアドレスになるという認識が既に足かせになっているのかも。
間違ってたらスミマセン。
131Name_Not_Found:2009/07/04(土) 15:24:55 ID:???
>>130
例えば

ディレクトリの構成がこうなっていたら
/public_html/example_homepage/index.html
httpで見るとこうなる
http://example.net/example_homepage/index.html
132Name_Not_Found:2009/07/04(土) 15:55:37 ID:???
ドキュメントル−トがどこかもわかっていないんじゃ・・・
133Name_Not_Found:2009/07/04(土) 16:05:51 ID:ZHTEGRpU
yahoo!みたいに

12345678910次へ>

のようにしたいのですが
ホームページビルダーでできるんでしょうか?
134Name_Not_Found:2009/07/04(土) 16:08:48 ID:???
1ページづつ組みなよ^^
135Name_Not_Found:2009/07/04(土) 17:36:17 ID:???
>>125です

単に階層が違ってたっぽい。
デフォルトであるindexフォルダにindex.htmlが入ってると思ってたら
一つ上の階層に別のindex.htmlが入っててそっちを読み込んでたらしい。
初歩ミスorz

ご指南ありがとうございました!
136Name_Not_Found:2009/07/06(月) 06:35:10 ID:ovL8iTj8
外部CSSを利用し、箇条書きのリストを作ろうと考えています。
それぞれの文章が長いため、画面横いっぱいに広がってしまう問題があるのですが
widthのように幅を指定することは可能ですか?
可能であれば、外部CSSの方で制御したいのですが…。
初歩的な質問で申し訳ないです。
137Name_Not_Found:2009/07/06(月) 08:28:23 ID:???
>136
>widthのように幅を指定することは可能ですか?
こんなの大した労力じゃないんだから自分で試せよ…
138136:2009/07/06(月) 10:51:31 ID:ovL8iTj8
すみません、試したつもりだったのですが記述に誤りがあったために
widthを指定しても反映されていなかったようです。
ありがとうございました。
139ちり紙:2009/07/06(月) 12:21:30 ID:???
>>133

> ホームページビルダーでできるんでしょうか?

ホームページビルダ単体の機能ではできません。
この機能を実現したければ、perlやphp等のcgiプログラミングの知識が必要です。
さらに、Yahooのようなという要求ならば、データベースの知識も必要になるでしょう
140Name_Not_Found:2009/07/08(水) 11:06:13 ID:eZqxVpLr
TOPやGallery等のメニューにマウスポインタを置くと文字の色が変わったり画像が変わったり
(今選択されていますと)枠がでたりするにはどうしたらいいのでしょうか?
教えてください。
141ちり紙:2009/07/08(水) 12:27:23 ID:???
>>140

JavaScriptを使うと比較的簡単に実現できます。

具体的には、

Googleで " javascript マウスオーバ " というキーワードで検索します。

次に検索結果から、自分にあった方法が記されたページを探し、
そのページの指示に従って処理します。
142Name_Not_Found:2009/07/08(水) 13:50:03 ID:???
>>140
文字の色・背景の色が変わったり、枠が出たりするのはCSSでもできますよ。
画像を変えるのは基本的には>>141の方法だけど、CSSでもできる方法はある。
143140:2009/07/08(水) 14:18:39 ID:tJIpX3xi
>>141
御丁寧にありがとうございます。

>>142
もしよければCSSでの方法を教えてください
144Name_Not_Found:2009/07/08(水) 14:25:31 ID:???
CSS Spriteとか:hoverをつかいませう
145140:2009/07/08(水) 14:33:23 ID:tJIpX3xi
>>144
ありがとう。
「CSS Sprite」や「:hover」でググってみて調べたよ
ちょっと難しそうだけどがんばってみます。
146Name_Not_Found:2009/07/08(水) 23:23:32 ID:???
http://www.uka-blog.com/web/html_css/entry_000735.php
↑ここで説明してるようなロールオーバーのメニューバーを作成したいのですがどうしたらいいです?
そのページで記述してるCSSが良くわからないんです。
もう少し優しく教えていただけると助かります。
147Name_Not_Found:2009/07/08(水) 23:34:45 ID:???
とりあえず、そのページに書いてあるのと同じのを作ってみれば分かるよ
148Name_Not_Found:2009/07/08(水) 23:42:07 ID:???
はい。これは何処に記述したらいいですか?
149Name_Not_Found:2009/07/08(水) 23:42:23 ID:???
CSS Spriteってなんで文字ごとに画像を用意してるのかな
どうせ背景なんだから、ボックス内に文字を表示すればいいのに
150Name_Not_Found:2009/07/08(水) 23:46:23 ID:???
>>148
HTMLとCSSのファイルを作ってだな・・・ってそこから説明しなきゃならんの?
151Name_Not_Found:2009/07/08(水) 23:48:24 ID:???
う・・・
CSSのファイル??と思ってしまったオレは一から出直しだなorz
152Name_Not_Found:2009/07/08(水) 23:55:03 ID:???
>>149
http://www.uka-blog.com/web/html_css/entry_000735.phpのやり方は説明用に平易に書いたものだな
背景画像だけ変えれば良いので、本来ならば画像に文字を入れる必要は無い
153Name_Not_Found:2009/07/09(木) 08:54:57 ID:???
>>151
外部スタイルシートでぐぐれ
154Name_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;})
どうすればいいのでしょうか?
155Name_Not_Found:2009/07/10(金) 12:23:46 ID:???
classかidかspan
156Name_Not_Found:2009/07/10(金) 13:03:11 ID:???
>>154
CSS使うんならセレクタくらい勉強しとけ。基礎だから
157154:2009/07/10(金) 13:28:20 ID:???
>>155
外部スタイルシートでのみいじれるんです。HTMLにはさわれないので・・・
二番目のhogehoge2にスタイルを適用させるなら p + p {color:red;}でいけるんですが
p p + pとかp[3]とかで指定というのができないみたいで・・・

>>156
すいません・・・
158Name_Not_Found:2009/07/10(金) 15:05:44 ID:???
CSSに

p .hoge3 {略}

て書いて

<p class="hoge3">
159Name_Not_Found:2009/07/10(金) 15:27:48 ID:???
>>158
>>157から察するにhtmlファイルの方は内容を変えられないんじゃないの?
文盲っていうのはこういうのを言うのか……
160154:2009/07/10(金) 15:28:55 ID:???
>>158
レスありがとうございます。
すいません、書き方がおかしかったですかね
HTMLのほうはさわれない、改変不可なので、スタイルシートのみで
Javascriptのようにpタグの何番目の要素、というように選べればと思ったのですが・・・
161Name_Not_Found:2009/07/10(金) 17:23:10 ID:???
>>154
body > p:first-child + p + p { color: red; }

ただしIE6以下には未対応
162Name_Not_Found:2009/07/10(金) 21:04:16 ID:???
対応状況がまちまちなセレクタ使うやつは死ね
どうせ未対応用にidなりclass振ってcss適用させるんだったら最初っからそうやっちまったほうがいい
メンテもいちいち2箇所直さないといけないとかめんどいだろ
163Name_Not_Found:2009/07/10(金) 21:34:07 ID:???
対応してないのは古いIEだけな件について
164Name_Not_Found:2009/07/10(金) 21:39:32 ID:???
質問です。
文章の前に箇条書きのときにつける●をつけたいのですが
<ul>のタグだと小さい黒丸しかやり方がわかりませんでした。
具体的には
http://www.dotup.org/uploda/www.dotup.org222502.jpg
くらいの大きさのものをつけたいのですが、方法がわかる方、教えてもらえませんか?お願いします。
165Name_Not_Found:2009/07/10(金) 22:05:46 ID:???
>>162
質問くらい読めよカスが
次善だろうが何もしないよりかはマシだろ

>>164
<ul>タグにCSSでlist-style-imageで画像指定すればいい
もしくは<li>にbackground-imageとpadding併用でも可能
166Name_Not_Found:2009/07/10(金) 22:12:29 ID:???
>>165
画像として●を使用しないといけないということですね。ありがとうございます。
<ul>での・の大きさの変更は出来ないということなのでしょうか?
167Name_Not_Found:2009/07/10(金) 23:52:13 ID:???
>>166
形は帰られても大きさは無理
168Name_Not_Found:2009/07/11(土) 00:05:01 ID:???
>>167
わかりました。ありがとうございました。
169154:2009/07/11(土) 08:58:57 ID:???
>>161
レスありがとうございます。
+って繋げることができるんですね。助かりました、dくす
170Name_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という要素の所に適用されるのですか?
171Name_Not_Found:2009/07/12(日) 23:21:07 ID:???
>>170
menu_barというIDの中で組まれている
リスト内のaタグに適用される
172Name_Not_Found:2009/07/12(日) 23:22:32 ID:???
id="menu_bar"を指定した要素の子要素であるliタグの更に子要素であるaタグに適用される
173Name_Not_Found:2009/07/12(日) 23:28:57 ID:???
>>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>
174170:2009/07/12(日) 23:37:01 ID:qZmbJj58
>>171-173
なるほど、ありがとうございます。

>スペースは「〜の中の」に変換すると分かりやすいよ。
これはわかりやすいですね!
親切にどうもm(_ _)m
175170: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>

間違ってますかね・・・?
176Name_Not_Found:2009/07/12(日) 23:47:53 ID:7YsSseBB
ここでいいのでしょうか?
もしスレ違いなら誘導お願いします。
私はlang-8.comというSNSでブログを書いていますが
ttp://lang-8.com/
そこではyoutubeの動画はアドレスを張るだけ
フレームがでてくるのですが
ニコニコ動画を貼り付けようと動画のタグを
コピペしてもタグ自体が有効にならず文字として認識されてしまいます。
一応ページのソースを見て
youtubeのフレーム部分と思われる場所をコピペしてみたのですが
それも文字として認識されてしまいました。
どうすればニコニコ動画のフレームが挿入できるのでしょうか?
177Name_Not_Found:2009/07/12(日) 23:55:29 ID:???
>>176
文字として認識されてるとかじゃなくて、<>が&lt;&gt;に変換されてるんじゃないの?
タグ使用禁止とかの理由で
178Name_Not_Found:2009/07/13(月) 00:00:16 ID:???
>>176
画像指定してないのに出るわけが…と思うんだが気のせいなのだろうか
179Name_Not_Found:2009/07/13(月) 00:00:56 ID:???
ゴメス
>>178は175宛で
180Name_Not_Found:2009/07/13(月) 00:02:20 ID:???
>177
ありがとうございます。
確認したら、そうなってました。
これってじゃあ
にこにこ動画は貼り付けられないってことですか!?
181170:2009/07/13(月) 00:14:03 ID:???
>>178
画像指定という事は<a href="hoge.html">を書き換えたらいいんですよね?
記述間違いてましたら訂正の教えてください
182Name_Not_Found:2009/07/13(月) 00:21:26 ID:???
ブログなら記事を書くところと、直にソースを入力できるところの二つがあるはず
>>181
>>178-179
183170:2009/07/13(月) 00:22:29 ID:???
ブログじゃないですorz
184Name_Not_Found:2009/07/13(月) 00:28:45 ID:???
そもそもニコ動は視る方がIDもってないと時間制限とかもあるから
HPに貼るには向かなくないか?
185170:2009/07/13(月) 00:32:18 ID:???
>>182
>>184
>>176じゃなく>>175ですorz
186Name_Not_Found:2009/07/13(月) 00:36:00 ID:???
>176=>180です。
そうなんですか?知らなかったですOTL
流れる日本語とかを
外国の人にも見て欲しいんですけどね・・・。
>182
直にソースを書き込めるところ・・・?
いま、探してみましたがなさそうですOTL
187Name_Not_Found:2009/07/13(月) 00:36:15 ID:???
>>185
君以外はだれも混同していないと思うが?
188Name_Not_Found:2009/07/13(月) 01:03:43 ID:???
>>185
お前初めてかここは、力抜けよ
とりあえず >>146 のリンク先見てくといい。
189185:2009/07/13(月) 01:09:48 ID:???
>>188
これは個別に設定する方法では・・・?
190Name_Not_Found:2009/07/13(月) 01:17:25 ID:???
どういう形にしたいかがハッキリしないので汎用性のあるやり方の紹介しかできない。
こんなページにしたいとか、こういうメニューにしたいとかを説明するかサイトなりのサンプルを示して欲しい。
191185:2009/07/13(月) 01:30:20 ID:???
>>190
http://www.raku-gaki.info/index.htm
↑コレは画像じゃないですけど
コレの画像版で選択されているメニューだけ違う画像にしたいんですよ。
画像はコレです↓
http://upload.fam.cx/cgi-bin/img-box/ijf90713012842.jpg

ちなみに1番上のURL先のような一部だけ丸みをおびたメニューの作り方も教えてください。
192Name_Not_Found:2009/07/13(月) 01:38:38 ID:???
>>191
初歩すぎる
193Name_Not_Found:2009/07/13(月) 01:45:53 ID:???
>>191
丸みを帯びたボタンはCSSではなく
ボタンの作り方とかフォトショや花火を使って作る方
194Name_Not_Found:2009/07/13(月) 06:57:12 ID:???
>>191

#menu_bar li a:hover{

width:○○px;

background-position:○○px ○○px;

}

メニュー一つの幅指定してどこを画像のどの部分を表示させるかってことをやる
説明下手ですまんがこれで行けるんじゃない?多分
195Name_Not_Found:2009/07/13(月) 12:12:20 ID:???
<a href=".jpg" target=blank >ダウンロードはこちら。</a>

このようにJPGリンクを別名保存させたいんだけど、
これをjavascriptかなんかで強制的に保存モードになって保存先が聞かれるようにはできないかな?

PC素人さん達に写真ギャラリー見せて欲しい画像をクリックで保存できるようにできたら。。と。
196Name_Not_Found:2009/07/13(月) 12:51:58 ID:???
>195
鯖の設定に寄るんでphpとかいじれるならならできるっぽいけど
htmlだけじゃ無理ぽ
197Name_Not_Found:2009/07/13(月) 12:53:46 ID:???
>>196
有り難うございます。
javascriptで画像保存のプロテクト等あるから
クリックでそんな技もあるかも!と思ってしまった。。
198Name_Not_Found:2009/07/13(月) 13:35:12 ID:???
zipで保存してリンク貼っておけば良いんじゃね
199Name_Not_Found:2009/07/13(月) 13:39:35 ID:???
>>198
素直にそうせい!だな。。
タグをちょろっと書くとペロッとなるかと。
サンクス。
200Name_Not_Found:2009/07/13(月) 17:21:30 ID:???
いくら優しく答える旨とは言え、質問する側にも態度ってもんがあるよな
201Name_Not_Found:2009/07/13(月) 18:26:03 ID:???
>>200
理解に苦しむだんが。。
なぜ195-199が態度云々って話になるんだ?
そんなに神聖なものなのか?

これどう?
むりじゃね?
そか。。ありがと。

普通だろう?
それともどちらかが神かなんかなのか?
202Name_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);
203Name_Not_Found:2009/07/13(月) 20:01:57 ID:???
headerとreadfileだけでよくね?
204191:2009/07/13(月) 20:33:08 ID:???
アクセク規制でパソコンから書き込めなくなったorz

初歩的な事で申し訳ないのですがCSS内とhtml内にどう記述するのか教えてください<(_ _)>
205Name_Not_Found:2009/07/13(月) 20:42:51 ID:???
>204
CSSとhtmlの基礎勉強した方が早いんじゃない?
これから毎度毎度このスレで聞くのも面倒だと思うんだが
206191:2009/07/13(月) 20:53:58 ID:???
>>205
俺が質問してる事はそんなに簡単な事なんですか?
207Name_Not_Found:2009/07/13(月) 21:41:23 ID:???
>>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>
208206:2009/07/14(火) 00:21:12 ID:???
>>207
どうも。
このまま入れても無理だったので
コレを参考にしたらいいんですね。
209207: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>
210Name_Not_Found:2009/07/14(火) 00:38:51 ID:???
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をつけないと背景指定で破綻する。
211Name_Not_Found:2009/07/14(火) 07:24:23 ID:???
text-indentってテキストが複数行あると1行目しかインデントされない現象はバグなの?
212Name_Not_Found:2009/07/14(火) 07:31:26 ID:???
インデントが何の為にあるか考えろ
213Name_Not_Found:2009/07/14(火) 08:14:03 ID:???
バグじゃなくて仕様というべきだな
214Name_Not_Found:2009/07/14(火) 08:18:57 ID:???
brは強制改行であって、段落じゃないぞ
215Name_Not_Found:2009/07/14(火) 09:02:51 ID:???
216207:2009/07/14(火) 09:50:43 ID:???
>>209
動きました。どうもありがとう。

>>210
はい、理解してから挑戦したいと思います。


>>215
こちらで答えてくれなさそうだったので
向こうに書きました。
217Name_Not_Found:2009/07/14(火) 13:37:09 ID:???
夏だなぁ
218Name_Not_Found:2009/07/14(火) 17:24:02 ID:???
悪びれもしないとは
219Name_Not_Found:2009/07/15(水) 00:10:34 ID:???
DREAM WEAVER CS4使ってます。ヒストリパネルを開いても半透明で何も選択できないのは何でですか?
220Name_Not_Found:2009/07/15(水) 02:43:00 ID:???
「div#A」で全体をまとめた後に
「div#B」で一部分をまとめると
「div#B」が全体の枠からはみだしてしまいます
「div#B」を納める方法はありませんか?
221Name_Not_Found:2009/07/15(水) 04:01:11 ID:???
div#Bにfloat付けてない?
div#Bの後にclearfixのdivを追加すると直るかも

http://archiva.jp/web/html-css/clearfix.html
222Name_Not_Found:2009/07/15(水) 14:42:27 ID:???
ヘッダー、メインコンテンツ、フッターとフレームで分けています
メニューでクリックしたリンク先をメインコンテンツに飛ばしているのですが
何故かメインコンテンツだけでなく全画面に適応さててしまいます。
何故でしょうか?教えてください。

記述は間違って無いと思います
<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>
223Name_Not_Found:2009/07/15(水) 14:47:16 ID:???

HPにクイックタイムで再生できるように自分がもっているMOVの動画を

<EMBED src="./img/ファイル名.MOV" loop="1" volume="50">と書いて
UPしてみたところ、HPを立ち上げたと同時に動画が再生されてしまいます。

さらに、プレイヤーの下に表示されるはずの再生ボタンや停止ボタンが
表示されません。なにが原因かわかりませんアドバイスお願いします。

参考http://www.scnet.tv/~narinarito/contents03.html
224Name_Not_Found:2009/07/15(水) 14:47:58 ID:???
>>222
target="_top"の意味、わかってる?
「フレーム分割を解除してウィンドウ全体に表示」するって意味だよ。
メインコンテンツを表示するフレームだけにリンクしたいなら、
まずフレーム名をつけて、(例:<frame name=""main">)
リンク先のターゲットをフレーム名にする(例:<a href="hoge.html" target="main">)
225Name_Not_Found:2009/07/15(水) 14:56:51 ID:???
>>223
QuickTimeはあまり詳しくないんだけど、
「自動的に再生するかどうか」を選ぶ属性と、
「コントロールを表示するかどうか」を選ぶ属性があったはず…。
あと、.movを埋め込むときは、widthとheight属性は必須だったと思うよ。
もっと言うと、埋め込みタグとしては<embed>よりも<object>が推奨されているはず。
どちらも自分はあんまり使わない要素なので、詳しく教えられなくてごめん。
226Name_Not_Found:2009/07/15(水) 15:44:02 ID:???
早速のお答えありがとです>>225

クイックタイムでMOVの動画をUPしてあるHPでソースをコピしてやってみたのですがだめでした;;
やってみたのですが、同じ結果になりました。
<EMBED SRC="./img/ファイル名.MOV" HEIGHT=250 WIDTH=320" CONTROLLER="TRUE" LOOP ="FALSE" KIOSKMODE="FALSE">

この間にAUTOPLAY="FALSE"と入力すると自働で再生はしないのですが、コントローラーが表示されてないので
再生できません。やってるテーブルが違うのですかね??
227222:2009/07/15(水) 17:15:29 ID:???
>>224
凡ミスでしたm(_ _)m
228Name_Not_Found:2009/07/15(水) 17:24:59 ID:???
>>227
それは凡ミスじゃなくて無知だったと書くべきですね
229220:2009/07/15(水) 17:25:37 ID:???
>>221
返信どうも
floatはつけてました
>>220ではちょっとわかりにくかったと思うので
わかりやすく書いてみます
>>220は忘れて下さい

全体枠の中にA枠とB枠があります
(全体枠とは背景を作る為につけたものです)
A枠にdivでfloat:leftを使いました
B枠は特に何もしてません
ところがA枠が全体枠から少しだけはみだしてます

A枠は左にB枠は右に配置したいんですが
どうしたら上手く行くでしょうか?
230Name_Not_Found:2009/07/15(水) 17:39:48 ID:???
>>229
ソース貼れば?
231Name_Not_Found:2009/07/15(水) 17:50:50 ID:???
>>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%;だとしたら小さいウィンドウ(ブラウザを縮小した場合)で表示した時に
横にスクロールすると背景が消えるから注意。まぁ気にするほどでもないけど
232220: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}
233Name_Not_Found:2009/07/15(水) 18:54:17 ID:kQLTdTIl
>>232
あのな、いくら優しく答えるスレだからと言っても
もうちょっとマシなソース書けるようになってから来い。
234Name_Not_Found:2009/07/15(水) 18:58:40 ID:???
ポップアップメニューを作ってるのですが
そのメニューの内一つだけ、別窓で表示させたい場合どうすればよろしいでしょうか。
235Name_Not_Found:2009/07/15(水) 19:16:11 ID:???
>>234
何を使ってポップアップメニューを作ってるのかによるんじゃないの?
JavaScriptなのか、FLASHなのかで方法が全然違うでしょ?
とりあえずソース貼ろうよ。
236Name_Not_Found:2009/07/15(水) 19:55:41 ID:???
>>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"でいいんじゃねーの?
ポップアップについての質問ならスレち
237220: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}
238220:2009/07/15(水) 21:32:29 ID:???
「blocks」ってゆうのは「hidari」と「migi」に
当たる部分ですよね?いきなり登場しても分かりにくい
のでそのまま書いてくれるとありがたいんですが

<div id〜はスタイルシートの後の<body〜の
各部分に当てはめて書けってことだと解釈したんですが
合ってますか?
<br class〜は最後の</div>の前に書けばいいんですか?
239234: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>
240Name_Not_Found:2009/07/15(水) 22:35:26 ID:???
見にくい
241Name_Not_Found:2009/07/15(水) 22:57:41 ID:???
>>238
お前わがままだなw

同じセレクタにclear2回指定しちゃダメだろ
cssの基本的な書き方くらい勉強してから来いよ
br.clear {
clear: both
}
にまとめること
これで解決しなかったらhtml部分も書き込め


関係ないけどセレクタとプロパティを同じ行に書かれるとごちゃごちゃして見づらい
242Name_Not_Found:2009/07/15(水) 23:30:11 ID:???
http://web-conte.com/blue/img_archives/051209_rounded_2.gif
↑画像のような丸みを帯びたテーブル?CSS?は、どうやって作るのですか?
243Name_Not_Found:2009/07/15(水) 23:31:46 ID:???
>>242
WebCreatorsを3カ月も買えば何種類も出てるよ
244Name_Not_Found:2009/07/15(水) 23:33:38 ID:???
>>242
角丸な
245Name_Not_Found:2009/07/15(水) 23:39:06 ID:???
>>242
まず自分が試してみたことを書き込んでみろよ
246Name_Not_Found:2009/07/15(水) 23:43:07 ID:???
>>243-244
ありがと!

「角丸」ググったらありました。
247NAME IS NULL:2009/07/16(木) 08:46:09 ID:???
希望している動作は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が優先されてしまうみたいなんですけど
どうすれば良いのでしょうか?
248Name_Not_Found:2009/07/16(木) 11:15:59 ID:???
>>247
試してないからわからんけど
.hage .hoge td{padding:20px;}
249Name_Not_Found:2009/07/16(木) 12:50:05 ID:???
>>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>
250Name_Not_Found:2009/07/16(木) 15:12:11 ID:???
>>249
display:inline-block;はIE8未満とか火狐3未満とかは対応してないぞ
251Name_Not_Found:2009/07/16(木) 15:55:54 ID:???
ロールオーバーのメニューバー作成できました!
ありがとうございます。

また問題がorz

クリックし選択しているメニューがホワイトに戻りグレーになりません。

マウスポインタがメニューの上に載るとホワイト→グレーに変化するけど
マウスポインタが離れるとホワイトに戻ります。
選択中はグレーになって欲しいけどどうしたらいいですか?
教えてください。
252Name_Not_Found:2009/07/16(木) 15:57:27 ID:???
続きです。
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;
}
253Name_Not_Found:2009/07/16(木) 15:58:08 ID:???

#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; }
254Name_Not_Found:2009/07/16(木) 15:59:56 ID:???
以上です。書いてるのはあってると思うんですが
訂正よろしくお願いします。

a:visitedに何か宣言しないといけないんですかね?
255Name_Not_Found:2009/07/16(木) 17:02:00 ID:JWRVi2tt
こんにちは。初めて質問させてもらうのですが、
現在3カラムのホームページを作ろうと思っています。
雰囲気、livedoorさんのようなホムペを作ろうと
思っているのですが、回り込みというのはどう
行っていったらいいのでしょうか。
現在cssでヘッダー、メイン、サイドメニュー、ライト、フッターという
ボックスを作っていて、
メインの左にサイドメニューをくっつけたいのですが、
それはどういう手順でやったらいいのでしょうか?
256Name_Not_Found:2009/07/16(木) 17:19:33 ID:???
257Name_Not_Found:2009/07/16(木) 17:20:52 ID:???
>>255
メインを親ボックスとしてサイドメニューにfloat:leftを指定するのじゃダメなのか
258Name_Not_Found:2009/07/16(木) 17:30:44 ID:JWRVi2tt
それはcssに記述すればいいんですよね?
どういった具合に記述したらいいのでしょう?
メインとサイドどちらにでしょう?
259Name_Not_Found:2009/07/16(木) 17:30:52 ID:???
>>255
まず自分がやってみたのを書き込めって
そしたら改善できるようアドバイスしてやれるから
260Name_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はこんな具合です。色をつけてるのはボックスが
わかりやすいようにするためです。
261Name_Not_Found:2009/07/16(木) 17:38:14 ID:???
#sidebar{
background:blue;
width: 200px;
height: 500px;
float: left;
}
262Name_Not_Found:2009/07/16(木) 17:41:32 ID:JWRVi2tt
261さんのようにやらせていただきましたらsidebarは
移動せずになぜかrightがなくなってしまいました。
なぜでしょうか><?
263Name_Not_Found:2009/07/16(木) 17:46:29 ID:???
HTMLのソースは?
264Name_Not_Found:2009/07/16(木) 17:47:45 ID:???
#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;
}
265Name_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>

こんな感じで書いております><
266Name_Not_Found:2009/07/16(木) 18:02:25 ID:JWRVi2tt
264さんのやり方でやらせていただきました。
そしたらヘッダーは変わらずに
メインのボックスの位置も変わらずに
sidebarとrightの間になぜか
footerが入ってきちゃいました
267247: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以下で対応できる方法は無いのでしょうか?
268254:2009/07/16(木) 18:06:46 ID:???
>>256
a:activeとa:hoverの位置を入れ替えたけど無理でしたよ
269Name_Not_Found:2009/07/16(木) 18:09:50 ID:???
>>266
div#footer {
clear: both
}

>>268
何がやりたいのかが今いち分かりづらい
hoverとactiveに同じプロパティを指定してみれば?
270269: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カラム 作り方」とかでググれば欲しい情報が見つかると思うぞ
271Name_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;
}
272Name_Not_Found:2009/07/16(木) 18:19:29 ID:JWRVi2tt
#footer{
background:red;
width: 700px;
height: 50px;
clear: both
}
この用に記述してみたんですよ。
そしたら
ヘッダーとフッターはいい位置にあるのですが
サイド・メイン・ライトの順にしたいのですが、
メイン・サイド・ライトの順になってしまい
サイドとライトの間には無駄な隙間ができてしまいました
これはどのように直したらいいのでしょうか?
273Name_Not_Found:2009/07/16(木) 18:25:39 ID:???
>>272
floatを重複指定してるのはネタか?
順番はhtml側でサイド・メイン・ライトの順番に書けばいい
隙間ができるのはおそらく、
サイド・メイン・ライトの親要素の横幅が900pxになってないから
これについては>>270を参考に
274Name_Not_Found:2009/07/16(木) 18:33:16 ID:JWRVi2tt
重複指定というのは
#right{
background:#0F9;
width:200px;
height:500px;
float: right;
float: right;
}
のことでしょうか><?;;
htmlのほうをいじってみますね・x・
親要素というのほあヘッダーとフッターのことでしょうか?
275Name_Not_Found:2009/07/16(木) 18:53:51 ID:???
>>274
float: right;を2回も書いてどうすんだよ
他の二つも同じ。floatは1回でいい

<div>
<h1>h1</h1>
<p><span>span</span></p>
</div>

h1,p要素の親はdiv
span要素の親はp
詳しくはググれ
276Name_Not_Found:2009/07/16(木) 19:04:09 ID:JWRVi2tt
2個書いてたのは消しても反映されませんでした^^
でもmainのところは片方消したら位置がずれるのでおいておいてもよろしいのですか?

277Name_Not_Found:2009/07/16(木) 19:15:10 ID:???
>>276
2個書いても無駄だから1個にしろってことな
mainの方はfloat: left;だけでいい
ちょっとぐらいCSSの書き方勉強しとけ
278Name_Not_Found:2009/07/16(木) 19:22:40 ID:JWRVi2tt
わかりました><;言われた通りやると
上手くいけました^^ありがとうございます。
隙間を閉じるには
プロパティ→ボックス→クリア→ボス
とかいうのを使うのですしょうか?
279Name_Not_Found:2009/07/16(木) 19:24:54 ID:???
>>278
メイン・サイドバー・ライトの親要素のwidthを900pxにしてみれば?
これで3回目だぞ
280Name_Not_Found:2009/07/16(木) 19:34:43 ID:JWRVi2tt
ん〜。。。新しくIDを指定して
それをメイン・サイド・ライトを囲んで
width900pxにするということでしょうか?
281Name_Not_Found:2009/07/16(木) 19:39:46 ID:???
>>280
合ってる。聞く前に試してみろよカスが
282Name_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;
283Name_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はとりあえずこのように記述してみました
284Name_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>
285Name_Not_Found:2009/07/16(木) 19:57:06 ID:???
>#wrapper{width:900px;
閉じてない
> <div id=wrapper">
"が抜けてる
> <div id="sidebar"></p></div>
<p>がない

コピペミスかもしれんけど雑すぎ

・wrapperの中にfooterを入れてやらないとclearが効かない


うまくいかないなら、どこがどんな風になってるか書かないと伝わらないぞ
286Name_Not_Found:2009/07/16(木) 20:04:21 ID:JWRVi2tt
#wrapper{width:900px;
これはfooterの下で閉じたつもりだったのですがこれでは
閉じたことになっていないのでしょうか・w・?
wrapperの中にfooterを入れるというのはどういうことでしょう?
.footer {
font-size:small;
} これを入れてあげるということでしょうか?
うまくいかないのはrightがやっぱりメインとくっついてくれないのです
287Name_Not_Found:2009/07/16(木) 20:10:11 ID:???
>>250
IE8未満はわかるが、Firefox3未満ってなんだよ
セキュリティアップデート終了してるだろ
288Name_Not_Found:2009/07/16(木) 20:21:13 ID:???
>>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は現役らしい
289Name_Not_Found:2009/07/16(木) 20:28:14 ID:JWRVi2tt
上手くできました><
本当にありがとうございました;w;
ちなみにfloatをleftに変える作業で上手くいきました><
290Name_Not_Found:2009/07/16(木) 20:42:51 ID:JWRVi2tt
BOXモデルというのはカラムのことなんですかね?

あとDreamWeaverでhtmlファイルを
編集したらだめと聞いたのですがそうなのですか?
291Name_Not_Found:2009/07/16(木) 21:20:19 ID:???
>>290
はぁ?????
292Name_Not_Found:2009/07/16(木) 22:20:20 ID:???
>>290
トイレでオシッコをしたらだめと聞いたのですがそうなのですか?
293Name_Not_Found:2009/07/16(木) 22:50:01 ID:???
さすが英字全角様!
我々の想像の斜め上を行ってらっしゃる!
294247:2009/07/17(金) 00:39:20 ID:???
すみません。結局の所、テーブルの中のテーブルで
上位にpadding指定がある場合に下位のpadding指定は
(IE8以下では)無理という事なのでしょうか?
295Name_Not_Found:2009/07/17(金) 00:39:44 ID:???
http://www.worldfolksong.com/css5/tips/rtable02.html
上記の方法で角丸テーブルを作ったけど
ブラウザの画面と同じ様にテーブルも伸縮してしまます。
テーブルの大きさの指定はどうやればよろしいですか?
296Name_Not_Found:2009/07/17(金) 00:43:50 ID:???
>>295
そのやり方なら、全体をdivでくくってdivに幅指定してみたら?
297295:2009/07/17(金) 00:54:49 ID:???
>>296
<div width ="" height=""></div>で指定したらOKですね?
298Name_Not_Found:2009/07/17(金) 01:01:10 ID:???
>>297
違う
width ="" height="" ではない。それはテーブルや画像のHTMLでのサイズ指定だろう。

style="height:yyy; width:xxx;"

またはdivにIDかstyleふって外付けかページ内のCSSに書くの。

はぁ
299295:2009/07/17(金) 01:09:50 ID:???
>>298
ごめん。
何か自分でも可笑しいと思ってたけど・・・

<div style="height:yyy; width:xxx;"></div>でやっても無理だったから
他の試しても無理じゃないかな・・
300Name_Not_Found:2009/07/17(金) 01:16:59 ID:???
無理なのは君の指定が不確実なため
301Name_Not_Found:2009/07/17(金) 01:21:42 ID:???
単位つけてないだけだろどうせ
302Name_Not_Found:2009/07/17(金) 02:53:45 ID:OnP07dyC
fleXcrollの質問てここでしてもおk?

firefoxを基本にして動作確認、作成しているので是非使ってみたいのですが
インクルード自体初心者で、挿入の仕方より
まず画像の作成方法からご教授願いたいです。

zipに添付してある素材のpng

とてもコンパクトになっているけど、オリジナルの素材もあんな風に作っていいんでしょうか。
挿入の仕方もチンプンカンプンなので今調べているんですが・・・
念のためお聞きしたく質問をしました。
Flexcrollを使用してる方、どうか知識を分けて下さいまし。
303Name_Not_Found:2009/07/17(金) 08:47:30 ID:???
>>294
「IE8以下では」って何だよ
普通に「IEでは」って言えよ
304Name_Not_Found:2009/07/17(金) 09:23:52 ID:???
「未満」と「以下」を間違えたんじゃないのかな?
305Name_Not_Found:2009/07/17(金) 09:33:58 ID:???
煽られてばっかりの>>247カワイソス(w
誰も質問の解を答えられないのか…
漏れも試してみたけど、有効な解を求められなかったyo
306Name_Not_Found:2009/07/17(金) 13:58:30 ID:MFbukY/g
IE5.5以上限定のwebアプリを開発しています。
inputタグをクリックしてもフォーカスを当てたく無い場合、IE7までは該当のコントロールに
tabindex="-1"を記載すれば可能でしたが、IE8からはクリックするとフォーカスが当たってしまいます。
元々IE7までの仕様がおかしかったといえばそれまでなんですが、コントロールをクリックしても
フォーカスが当たらなくなる方法が他にありますか?
onfocusイベントで他へフォーカスを当てるという方法は避けたいです。
307Name_Not_Found:2009/07/17(金) 14:07:48 ID:???
>>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>
308Name_Not_Found:2009/07/17(金) 14:08:08 ID:???
>>294
具体的になにがしたいの?
309307:2009/07/17(金) 14:09:42 ID:???
>>307
> <table id="table2" cellspacing="0" cellpadding="0"><tr>
cellspacing="0" cellpadding="0"は要らなかった。ミス
310Name_Not_Found:2009/07/17(金) 14:12:06 ID:???
>>306
inputタグの上にpositionで同じ大きさのブロック被せてやればいいんじゃねーの?
311Name_Not_Found:2009/07/17(金) 14:26:56 ID:???
>>310
タレントの画像の上に透明なgifを貼って、右クリックしてもDL出来ないようにしてた
サイトがありましたが、これもやりたい事は同じですね。
ありがとうございます。
どうも簡単にはいきそうにないですね〜
312247: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>
313307:2009/07/17(金) 14:48:28 ID:???
>>312
2行目見ろよカス
divをtableに置き換えてcssちょっと書き換えるだけだろ
314247: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>
315Name_Not_Found:2009/07/17(金) 15:13:49 ID:???
威勢よく煽っておいて、間違いカコワルイwww
316307: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;
}
317Name_Not_Found:2009/07/17(金) 15:31:42 ID:???
スレタイ100万回読め。ここは「優しく答えるスレ」だ。
優しく答えられない精神状態なら書き込むなよwww
318307: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;
}

続く
319307: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
優しく教えると丁寧に教えるは別だろ?
320295:2009/07/17(金) 15:41:38 ID:???
>>300-301
すいません、単位の付け忘れでした。
この角丸テーブルを中央にもって行きたくて
書き込みの後に
<div style="height:200px; width:200px; background-position:center"></div>と記述したのですが反応無いです。
今度は有ってると思ったのに、御指摘お願いします。
321Name_Not_Found:2009/07/17(金) 15:52:14 ID:???
</div>じゃなくてテーブルをちゃんと囲ってるんですか?
322295:2009/07/17(金) 16:20:20 ID:???
>>321
サイズ変更は適用されてるので囲ってると思います。
323307: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>

こんな感じ
324295:2009/07/17(金) 17:01:01 ID:???
>>323
無事出来ました!
ありがとう!
325Name_Not_Found:2009/07/18(土) 07:30:27 ID:FIVHoP6u
表レイアウト脱しようと、CSSに初挑戦しています。
すみません、質問させて下さい。

コメントアウトしようとすると、レイアウトが崩れる事に困っています。
このような感じです。
【コメントアウト前】
http://www.mo-bic.jp/testpage/test/
【コメントアウト後】
http://www.mo-bic.jp/testpage/test/index2.html

かれこれ3時間ほどぐぐっては挑戦してみているのですが、
さっぱり解決しません。。

どなたか、原因を教えて頂けないでしょうか?

よろしくお願いします。
326Name_Not_Found:2009/07/18(土) 07:54:13 ID:FIVHoP6u
補足 IE8でのテストです。

コメントの代わりに
<P></P>を入れても崩れるので、
p {margin:0px; padding:0px;}
としてみましたが、変化ありませんでした。

コメント箇所を<div></div>で括るとレイアウトは崩れませんでした。。
<div>
<!--コメント-->
</div>
327Name_Not_Found:2009/07/18(土) 08:05:39 ID:???
>>325
両方全く同じように見えますが
328Name_Not_Found:2009/07/18(土) 08:14:45 ID:FIVHoP6u
あら??何故でしょう・・・。

ビルダーのプレイビュー、IE8共に崩れてしまってます。
PCの調子が悪いのでしょうか・・・。

知人のPCで見てみます。
329Name_Not_Found:2009/07/18(土) 08:20:20 ID:FIVHoP6u
他のPC、IE7 で確認しましたら、やはり崩れていました。

このような感じです。
http://www.mo-bic.jp/testpage/img/testimg.gif
330Name_Not_Found:2009/07/18(土) 08:38:30 ID:???
>>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> ←これ追加
331Name_Not_Found:2009/07/18(土) 09:11:44 ID:FIVHoP6u
おお!!
直りました。

コメントも本文となってしまうのですね^^;
勉強になりました。

皆様、ありがとうございましたm(__)m
332Name_Not_Found:2009/07/18(土) 11:57:43 ID:???
スレ違いだったらごめんなさい。
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番下だけに広告を表示させるにはどうしたらよろしいですか?
333Name_Not_Found:2009/07/18(土) 12:11:26 ID:???
frame.htmlは3つのフレームのどれかじゃなくて、フレームを表示するhtml名でしょ
一番上をmenu.html、次をmenu2.html、一番下をfooter.htmlにでもして、それを表示してるindex.htmlをframe.htmlにすればいいんじゃないの
334Name_Not_Found:2009/07/18(土) 18:50:48 ID:???
overflow:auto;で疑似フレームつかってるんですが
IEのみ!
スクロールバーが表示はされるのですが、固定されてしまっていてスクロールが出来ません。

なんなのIEマジで消えて欲しい!

解決方法ググっても全然無いし、休日出勤数時間無駄にしてます…
335Name_Not_Found:2009/07/18(土) 19:04:05 ID:???
>>334
そんなバグあったっけな。記述ミスじゃねーの?
てか質問する気あんならソース見せろよ
愚痴ならチラシの裏にでも書いてろ
336Name_Not_Found:2009/07/18(土) 19:04:27 ID:???
ここはグチるスレではありませんよ
337Name_Not_Found:2009/07/18(土) 19:08:11 ID:???
>>333
その方法でやってみたらサイトが表示されなくなりました。
338Name_Not_Found:2009/07/18(土) 19:29:15 ID:???
>>337
html,cssとは直接関係ないからスレチ

Q&Aのすぐ下に誘導あるんだからそっち行けよ
ttp://www.sugoibbs.com:10002/cgi-bin/bbs.cgi?uid=18&cid=1&counting=1
339Name_Not_Found:2009/07/18(土) 22:24:10 ID:???
”HTML言語”って”Hyper Text Markup Language 言語”になって馬から落ちて落馬みたいだよな
340Name_Not_Found:2009/07/18(土) 22:29:08 ID:???
むしろ 金閣寺テンポー みたいな感じじゃないだろうか
341Name_Not_Found:2009/07/18(土) 23:02:13 ID:???
すいません。質問です。

IE7で親要素のCSSに text-align:left; を使うと
子要素の最初のボックス要素のCSSの margin が
反映されなくなるという仕様に気づいたのですが
(IE8, IE6 では普通に反映されます。
ついでに 最初の要素のCSSに float:left; を追加すると
margin が反映されるようになります。
現象を再現したテストページを用意したのでご参照ください
http://www.geocities.jp/caphawk12001/up/ie7test.html

これで生じたズレを治すにはCSSハックや最初の子要素の前に
身代わりのボックス要素を追加する以外に何かいい方法はあるでしょうか。

教えてください。よろしくお願いします。
342Name_Not_Found:2009/07/18(土) 23:30:24 ID:???
仕様w
343Name_Not_Found:2009/07/18(土) 23:37:38 ID:???
>>341
そんな面倒な問題無かったように思うんだけどなぁ
そもそもtext-align: left;ってデフォじゃなかったっけ?
IE7が手元にないから詳しくは分からんけどmarginが狂うのなら、他が原因なんじゃね?


関係ないけどfloatとmarginを同じセレクタに指定するときにmarginが倍になるバグがあるから注意
display: inline;を一緒に指定するのが簡単な解決策な
あと、ieとfirefoxなんかではpadding,borderと一緒に指定したとき
width,heightの認識が若干違うから一緒には使わないこと
344220:2009/07/19(日) 04:00:02 ID:???
>>241

言われたとおりにやっても出来なかったので
この役立たずが!わざと変にしようとしてんのか?
などと思ったりしたんですが、>>241を参考に少し調べてみたら
ついに成功しました!どうやら<br class="clear"/>の
位置が間違っていたようです てへへ

とゆうことで少し遅れましたがありがとござます!
ちょっと見ただけでソースが書けるなんて
ほんとに凄いことと思います
僕もいつかここで回答出来るようにこれから
勉強していこうと思います

また聞きに来るかもしれないので
その時はよろしくお願いします
345Name_Not_Found:2009/07/19(日) 09:22:48 ID:???
>>344
役に立たないのはお前の脳味噌なんだけどな
346Name_Not_Found:2009/07/19(日) 09:29:35 ID:???
この4日で何も成長していない・・・
347Name_Not_Found:2009/07/19(日) 10:17:08 ID:???
br要素にclear:both;ってバグじゃないの……?
348Name_Not_Found:2009/07/19(日) 10:25:16 ID:???
>>347
brが持つ改行っていう本来の意図を考えるとおかしいかもしれないけど
W3Cで決められてる文法上では何の問題もないはず
どうしても気になるなら、floatした要素の次にくる要素でclearしてやるとか
:afterの擬似クラス使ったclearfixとか使えばそっちでもできる
349Name_Not_Found:2009/07/19(日) 10:49:55 ID:???
clearプロパティは、CSS2だとブロック要素にしか適用出来ないみたいだけど、CSS2.1だとインライン要素にも適用出来るのかな
どちらにしても<br /><br />と似たような用法だと思うけど
350Name_Not_Found:2009/07/19(日) 11:03:25 ID:???
インライン要素にclearで上手くいくのはUA側の誤りだったんだな。今初めて知った
見た目では一緒でもやっぱり気付けた方がいいよなぁ
結局いらない要素が増えないclearfixが一番楽なのかな。後続の要素にclearは面倒だし
351Name_Not_Found:2009/07/19(日) 11:21:26 ID:???
最近CSSを知った者です…

以下のテーブルタグを多用するのでst.cssに組み込んでしまえばいいのかな?
と思ったのですがcssでのテーブルタグの記述の仕方がいまいちわからないかったので教えていただけますでしょうか?
352Name_Not_Found:2009/07/19(日) 11:24:05 ID:???
以下がそのテーブルタグです

<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>
353Name_Not_Found:2009/07/19(日) 11:25:20 ID:???
長くて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>
354Name_Not_Found:2009/07/19(日) 11:26:44 ID:???
最後です。なんかいろいろすみません;

<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>
355Name_Not_Found:2009/07/19(日) 11:45:55 ID:???
>>351-354
何がしたいのかが今一わからないけど
おそらくアホみたいに基本的なことだから
ttp://www.tohoho-web.com/css/basic.htm
ここでも見とけ

そもそもst.cssってなんだよ
それにCSSでのタグの書き方なんて言われても意味わかんね。属性のこと?
356Name_Not_Found:2009/07/19(日) 13:09:10 ID:???
テーブルコーディングからCSSレイアウトにしたいってことかなぁ
st.cssてのは何かで用意されてるファイルか?
まぁCSSについて軽く調べてきた方が良いよ
357Name_Not_Found:2009/07/19(日) 14:41:55 ID:???
>>342
>>343
自分もこんな問題おきたのはじめてでしたw
とりあえずもう一度、他に原因がないか見てみます。

ありがとうございます。
358Name_Not_Found:2009/07/19(日) 15:10:14 ID:???
>>352-354にあるようなテーブルを、
外部CSS(ファイル名: st.css)をいじることで表現したいってことだろ。
>>356にあるように、
CSSの基礎中の基礎程度は、理解してないと教えても意味無いと思う。
359Name_Not_Found:2009/07/19(日) 15:20:35 ID:???
セレクタとか宣言ブロックとか言っても分からないだろうな
360Name_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;
}
361Name_Not_Found:2009/07/19(日) 16:12:43 ID:???
#right div{
display:inline;
}
追加
362360:2009/07/19(日) 16:32:02 ID:SEr8iJoT
即レスthx。でもそれだとこうなっちゃうんだ。(多少改行いれたが)
http://nukkorosu.80code.com/img/nukkorosu9918.gif

.txt自体の横幅は揃えたいんだ。注文多くてすまんこ・・・
363Name_Not_Found:2009/07/19(日) 16:40:44 ID:???
>>362
素直にテーブル使えw
364Name_Not_Found:2009/07/19(日) 16:50:16 ID:???
>>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;
}
365364: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;
}
366360:2009/07/19(日) 16:59:03 ID:???
>>365
うおおおおおできた!!!!できた!!!!!!!!
clearってこうやって使うんですね。一つ勉強になりました。
ありがとう、これで思い通りにレイアウトできました。本当に感謝!
367Name_Not_Found:2009/07/19(日) 17:12:54 ID:???
CSS2の仕様ではfloatしたブロック要素には明示的に横幅指定しないといけないわけだけど
実際にはあんまり気にしなくてもいいもんなのかな
368Name_Not_Found:2009/07/19(日) 17:45:21 ID:???
width:auto;入れときさえすれば問題ないだろ
369Name_Not_Found:2009/07/19(日) 18:34:43 ID:???
CSS2の仕様にはwidth: auto;の値がきちんと書かれてないから、それじゃ解決にはならないんだよ
CSS2.1からだとshrink-to-fitになるから問題はない
まぁUA側でautoがshrink-to-fitで統一されてるかもしれないし、現時点で実害は全くないけど
370Name_Not_Found:2009/07/19(日) 18:36:03 ID:???
CSS2を採用してるブラウザは皆無
371Name_Not_Found:2009/07/19(日) 18:43:32 ID:???
W3CからはCSS2の仕様書が外されたって聞いたけど
372Name_Not_Found:2009/07/19(日) 19:22:23 ID:???
皆が皆最新のブラウザ使ってくれれば楽なんだけどなぁ
昔のバージョン使ってる人がいる以上W3Cが採用しようがしまいが、この問題には関係ないよね
373Name_Not_Found:2009/07/19(日) 19:29:46 ID:???
そうだな
いつまでも古いバージョンをサポートし続けるMS氏ね
374351:2009/07/19(日) 21:50:16 ID:???
>>352-354のテーブルを外部cssファイルに組み込んで…
と思ったのですが、いろいろ初心者用cssサイトとか見たのですが>>352-354のような
ちょっと凝ったテーブルでのやり方はわからずじまいでした
(シンプルなものは理解と作成できたのですが…)

ここは初心者といっても私のような本当に半歩踏み始めた者が出入りする場所ではなかったのですね…
すみませんでした
375Name_Not_Found:2009/07/19(日) 21:56:02 ID:???
向上心があるならいいんだよ
376Name_Not_Found:2009/07/19(日) 21:58:25 ID:???
>>374
>>352-354はどういう構造になってるか理解出来てる?
377351:2009/07/19(日) 22:37:45 ID:???
>>375-376

ありがとうございます;
なんとなくはわかるのですが…ほんとになんとなくです
最初のtr〜/trの中の複数のtdの幅を変えることで上部の角丸ができてるのかな??
とかそんなLvです;
上部の角丸のはそれほどこだわってないのでなくてもOKなんでそのへんはごっそり削除しようかとも。

・tdの背景色は全て同じなのでこのあたりをまとめられるのではないか?
・テーブルの中にクラスでもう一個のテーブルを指定したらできるのかな?

わかったのはこれくらいです
HTMLはなんとなく書いてたことはあるのですが、本格的に(ちょっと必要にせまられて;)
調べ始めたのがここ数日です
378Name_Not_Found:2009/07/19(日) 22:45:04 ID:???
>>377
あんな滅茶苦茶なテーブル理解出来てるんなら、divで角丸作るのは楽。作りたいんでしょ?
どんな構造になってるか詳しく知りたいなら、これをhead要素内に貼ってみそ

<style type="text/css">
table{border:solid 1px #000000;}
td{padding:5px;border:solid 1px #000000;}
</style>

ところで、CSSの指定の仕方をまず勉強した方がいいよ
・ある要素すべてに適用
・ある要素の中の、ある要素すべてに適用
・あるclassが指定された要素に適用
・あるidが指定された要素に適用   等
379Name_Not_Found:2009/07/19(日) 22:52:10 ID:???
角丸ならborder-radiusでおk
380351:2009/07/19(日) 23:10:24 ID:???
>>378
うわあ・・・
それ入れるだけでどういう構造になってるか一目瞭然ですね!!
テーブルの中にテーブルを入れるのではなく、中央のテーブルを各テーブルで囲ってたんですね
それであんなに行数多いのか…

あれはオークのテンプレサイトから持ってきたやつだったんですが
まずちょっと自分でHTMLで作ってみて、それからcssにした方がいいのでしょうか?
381Name_Not_Found:2009/07/19(日) 23:13:48 ID:???
>>380
まずCSSの意味を調べたほうがいいかもしれない
382351: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
それはどこに入れたら良いのでしょうか?
383Name_Not_Found:2009/07/20(月) 01:05:07 ID:???
>>382
>>379はCSSのプロパティの一つ
でも、次の次に勧告されるCSS3の新プロパティで、ほとんどのブラウザが対応してないから気にしなくていいよ
あと、参考アップロードするなら、画像よりhtmlファイルのほうが
384351:2009/07/20(月) 01:11:17 ID:???
そうでしたか…
やっぱりちょっと角丸に未練はあったようです;

htmlはまだサーバーにうpしてなかったので画像にしました
斧ではhtmlファイルがうpできなかったので・・・
385Name_Not_Found:2009/07/20(月) 01:20:50 ID:???
386351:2009/07/20(月) 01:33:14 ID:???
すみませんお布団入ってしまいましたorz
また朝にでも上げさせていただきます
387Name_Not_Found:2009/07/20(月) 09:38:06 ID:???
>>383
ほとんどのブラウザ…?

ざわ…ざわ
ざわ…ざわ
388Name_Not_Found:2009/07/20(月) 09:47:19 ID:???
htmlをうpろだにうpするとか何考えてんだよ
389Name_Not_Found:2009/07/20(月) 11:26:21 ID:???
>>388
意味不
390Name_Not_Found:2009/07/20(月) 12:18:44 ID:???
それの何がいけないのかわからない。
391Name_Not_Found:2009/07/20(月) 14:49:39 ID:???
そのサイトのCookie盗んだりブラクラ仕掛けたり出来るわけだが
うpろだだから怪しいと思う人も少なくなるし
392Name_Not_Found:2009/07/20(月) 15:05:50 ID:???
クッキーから削除用パスワードを読み取って自サーバーのプログラムに飛ばして記録したりってか?
          r、     r、
          ヽヾ 三 |:l1
            \>>/ |` }
             ヘ lノ `'ソ
             /´  /
           /      \
          / ─    ─ \
        /   (●)  (●)  \
        |      (__人__)     |     ないない
         \     ` ⌒´    ,/
 r、     r、/         /    r、
 ヽヾ 三 |:l1         ヽヾ 三 |:l1
  \>>/ |` }          \>>/ |` }
   ヘ lノ `'ソ           ヘ lノ `'ソ
    /´  /             /´  /
    \. ィ              \. ィ
       \             \
         \             \
          )             │
         /   r、           \
        /    ヽヾ 三 |:l1      \
       /       \>>/ |` }       \
     /         ヘ lノ `'ソ          \
    (           //´ /            ヽ
     \        / \. ィ\           )
       \     ノ       \        /
393Name_Not_Found:2009/07/20(月) 15:19:01 ID:???
そもそもjsの書き換えはユーザー側でいくらでもできるわけで
取られて困るようなクッキーは全部サーバー側で処理するよね
それにブラクラ引っかかるような馬鹿ってまだいんの?
394Name_Not_Found:2009/07/20(月) 15:25:05 ID:???
そして、取られて困るような認証クッキーを盗られてサーバー側で処理してしまうわけですね。わかります。
395Name_Not_Found:2009/07/20(月) 15:28:49 ID:???
ブラクラならうpろだじゃなくても踏むだろ

>うpろだだから怪しいと思う人も少なくなるし
むしろうpろだなら余計慎重になると思うが
396Name_Not_Found:2009/07/20(月) 15:32:19 ID:???
.htmlだけでcgiとかphpで使われてるクッキー盗るのなんて、サイトの管理者がよっぽどアホじゃなきゃ無理じゃね?
397Name_Not_Found:2009/07/20(月) 16:03:24 ID:???
javascript使えばいくらでもできるだろww
馬鹿多くて心配だわ
398Name_Not_Found:2009/07/20(月) 16:09:58 ID:???
html許可すると踏み台にされるからなあ、わざわざHP開設しなくてもいいんだし。
経験者が言うんだから間違いない
399Name_Not_Found:2009/07/20(月) 16:13:49 ID:???
>>397
お前はそんなに重大な情報をうpろだに送信してんのか
400Name_Not_Found:2009/07/20(月) 16:20:41 ID:???
<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変えながら貼りまくれば立派なスパムの完成だな
401Name_Not_Found:2009/07/20(月) 16:30:55 ID:???
でっていう
もはやうpろだと関係なくね?
402Name_Not_Found:2009/07/20(月) 16:31:25 ID:???
>>397
うpロダが変な設定してなけりゃjsで読めるクッキーはjsで書いたクッキーだけだろ?
HTMLの書き換えはクライアントが好きにできるんだから
jsでいくらでもできたとしたらセキュリティも何もないだろ
>>400
うpロダの関係性皆無
403Name_Not_Found:2009/07/20(月) 16:36:14 ID:???
ろだでも同じように出来るってことだろ
不特定多数が自由にアップロードできるから危ないってだけ
404Name_Not_Found:2009/07/20(月) 16:39:45 ID:???
実際に運用したことない知ったかぶり多いね
405Name_Not_Found:2009/07/20(月) 17:01:45 ID:???
>>385
なんかここHTMLあげれないみたいだよ
406Name_Not_Found:2009/07/20(月) 17:22:28 ID:???
textareaの横幅(colsで指定するやつ)をtd width=と同じ要領でピクセル数にて指定することはできないでしょうか
407Name_Not_Found:2009/07/20(月) 17:25:42 ID:???
style="width:100px"
408Name_Not_Found:2009/07/20(月) 17:35:29 ID:???
>>407
愛してる
409Name_Not_Found:2009/07/21(火) 16:14:50 ID:???
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>
410Name_Not_Found:2009/07/21(火) 16:18:52 ID:???
padding:0; width:100px; height:1px; overflow:hidden;
411Name_Not_Found:2009/07/21(火) 16:30:33 ID:???
>>410
実はちょうどそこのpaddingが悩みの種でして、padding:0にしたいんですが0にするとブラウザによっては横棒が消えちゃうんです
overflow:hidden;に巻き込まれてるのかなあと思ってるんですが・・・
412Name_Not_Found:2009/07/21(火) 16:45:35 ID:???
>>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;が一緒に入ってるのがアウト
413412: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>
414Name_Not_Found:2009/07/21(火) 17:10:40 ID:???
>>413
超愛してる

自分のより明らかに直感的なのでぜひこっちにしたいと思います

span使うなんて発想なかったんで勉強がてらためしにspanを外した挙動を
ためしてみたところおそらく同じだったのですが、spanを入れた方がよいでしょうか?

今のソースはこんなかんじになりました
<div style=" width:100px; height:1px; background:url(/border.gif); repeat-x; "></div>
415412: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でできるといいんだけど中々難しいよね
416Name_Not_Found:2009/07/21(火) 18:15:43 ID:???
>>415
超々愛してる

たしかにspan抜くとIE6の挙動が変でした
わざわざXPの復元でロールバックした甲斐がありました

> <img src="border.gif" width="100" height="1" alt="border" style="display: block;" />

これもためしたみたんですが、IE6だと1文字分の高さのスペースが強制的に入っちゃいました
もしこっちが想定通りに動いちゃったらdivいらなくなってサイト全般あっちこっち作り直しだからちょっとホッとしてますw
417Name_Not_Found:2009/07/21(火) 18:22:44 ID:???
IETester使え
418Name_Not_Found:2009/07/21(火) 18:35:26 ID:???
>>417
超絶愛してる

ダウンロード中w
419Name_Not_Found:2009/07/21(火) 18:39:02 ID:???
愛してるってのが面白いとでも思ってるんなら止めた方がいいよ。むしろ不快
420Name_Not_Found:2009/07/21(火) 19:20:11 ID:XMBJ7I/I
いま、フレームで、
左、リンク
右、リンク先の表示
という感じで、HTMLを組んでいます。

そこで、リンク先をステータスバーに出さないようにしたいのですが、
最近のブラウザでは可能でしょうか?

いくつかネットで調べて試しましたが、IEではポップが出てきました。

421Name_Not_Found:2009/07/21(火) 19:31:37 ID:???
javascriptで可能だけどオススメしない
422Name_Not_Found:2009/07/21(火) 19:36:35 ID:XMBJ7I/I
>>421
簡単にでも教えてもらえませんか?
423Name_Not_Found:2009/07/21(火) 19:39:24 ID:???
>>422
スレチ。氏ねよ図々しい
424Name_Not_Found:2009/07/21(火) 19:40:15 ID:???
左:メニュー
右:内容
ステータスバー:アドレス
って言いたいの?
425Name_Not_Found:2009/07/21(火) 20:02:22 ID:???
今ふと思ったんだけどなんで質問スレってjavascript と別れてるんだ?
ごっちゃにしちゃうと質問が多すぎて処理できないってこと?
426Name_Not_Found:2009/07/21(火) 20:06:43 ID:???
別れてる方が使いやすいだろ
427Name_Not_Found:2009/07/21(火) 20:13:54 ID:???
夏だなあ
428Name_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>』

でした。初心者丸出しで申し訳ありません。分かり難いですよね。
改善方法、解決方法を御存知の方は助言の御言葉を頂けないでしょうか。どうか宜しくお願い致します<(_ _)>
429Name_Not_Found:2009/07/21(火) 21:54:07 ID:???
>>428
FireFoxじゃなくてFirefoxな
ソース晒すか、リンク張るか、HTMLファイルをアップロードしろ
430Name_Not_Found:2009/07/21(火) 21:55:30 ID:???
複数指定(もしくは事前定義)したファイルからTemplateParamの内容を
テーブル一覧やXMLで出力する機能ってありますか?
ページの更新履歴を自動化したいと思ったのですが、無理ですかね。
431Name_Not_Found:2009/07/21(火) 22:04:48 ID:???
>>428
マルチかよ
ttp://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1428510324


> 一度このHTMLを最初に入力してみたところ、一度は成功したように見えたのですが・・・
> IEを再起動してみると元通りに戻ってしまいました。この様な状況が繰り返されているので質問させていただきました。
これがまずありえないので、おそらくおかしいのはソースじゃなくてお前の環境
大方キャッシュでも残ってんじゃねーの?
432Name_Not_Found:2009/07/21(火) 22:11:04 ID:plI0zE8V
キャッシュは問題無いと思うんですけどね。もう少し調べてから来ます。ありがとうございました。
433Name_Not_Found:2009/07/21(火) 22:13:04 ID:???
>>426
1年ぐらいここにいるけど javascript に関する質問をして
スレチだと言われ、諦める質問者って多くない?

まあ初心者質問スレに行けばいいんだが、
質問スレが沢山あると困る人もいるしな。
質問のガイドラインでも作った方がいいかなーと
434Name_Not_Found:2009/07/21(火) 22:15:38 ID:???
>>432
お前は「調べて」じゃなくて「マルチして」からだろ
435Name_Not_Found:2009/07/21(火) 22:28:28 ID:???
>>433
スレタイすら読まない馬鹿が悪いんじゃね?
誘導はあってもいいだろうけど、テンプレに書き加えたところでどうせ読まないだろ
436Name_Not_Found:2009/07/21(火) 22:28:59 ID:???
javascriptは不必要だろ
437Name_Not_Found:2009/07/21(火) 22:48:53 ID:???
関係ないが質問者は必要以上にかしこまることはない
行き過ぎると帰って慇懃無礼でちょっと不快
ぶっちゃけ要点だけしっかりと抑えてあればいいと思う
まぁ知識がないと質問の仕方もむずかしいだろうけど
438Name_Not_Found:2009/07/21(火) 22:54:19 ID:???
俺は丁寧な文章の方がやる気出るんだけどなぁ
439Name_Not_Found:2009/07/21(火) 22:58:53 ID:???
俺も
スレチはともかく礼儀作法の好みまで”俺ルール”適用されることこそ不快
440Name_Not_Found:2009/07/21(火) 23:54:52 ID:???
質問です。後記のソースを閲覧した際に本来なら
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>
441440:2009/07/22(水) 00:16:30 ID:???
大変申し訳ありません。次の2行は訂正させていただきます。
>なお、<ol>を使わずに<div>で代用している理由は子要素として<form>が存在するため、以下に反してしまうからです。
>(<ol>〜</ol>に<div>を書いてはいけない、<li>〜</li>に<form>を書いてはいけない)

質問内容は<ol>を使わずに<div>で同じ動作をさせる方法についてです。
宜しくお願い致します。
442Name_Not_Found:2009/07/22(水) 00:45:51 ID:???
>>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>
443442:2009/07/22(水) 01:12:24 ID:???
ごめん間違えた

ol#ol{
list-style-type:decimal;
}
ol#ol div{
display:list-item;
}
444Name_Not_Found:2009/07/22(水) 03:12:31 ID:G6ZFSDIk
すいません。初心者です。
htmlを生成するcgiを設置しているんですが、cssファイルでスタイルシートを定義しています。
ところが、新しいサーバに映った途端、cssファイルが無効になってしまった様なんです。
サーバうつるまでは、異常なかったんですが。
とりあえず、そのサーバは、cgiはcgi-binフォルダに入れないといけないというのが今までのサーバと違うところですが、
誰か、解決法とか分かる人いますか?
よろしくお願いします。
445Name_Not_Found:2009/07/22(水) 03:44:49 ID:4uDBJSuG
間違えたらごめんだけどそのcgi-binフォルダにcssファイルを入れて
設定をしなおしたら?
レンサバですか?
後はレンサバに聞くとか?
446Name_Not_Found:2009/07/22(水) 09:05:22 ID:???
ファイル階層が変わった事で、ファイルの指定がうまく行って無いんだろうね
447Name_Not_Found:2009/07/22(水) 10:34:12 ID:???
左右にfloatした<div>〜</div>の後で
レイアウトに影響を与えずに  style=" clear:both;
をしたいんですが良いタグないでしょうか。
448Name_Not_Found:2009/07/22(水) 11:12:24 ID:???
div:after{ clear:both}
449Name_Not_Found:2009/07/22(水) 12:01:56 ID:???
>>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;}
/* */
450Name_Not_Found:2009/07/22(水) 17:39:12 ID:???
今の時代表をtableタグで作るのはオススメできないって言われたんだけど、
やっぱりCSSで作るべき?
451Name_Not_Found:2009/07/22(水) 17:54:39 ID:???
>>450
それは何か勘違いしている気がする。
「tableは表を作る為の要素だから、レイアウトを構成する為に使うのはオススメできない」ならわかる。
ちなみに、tableとcssは全くの別物だから、同列のものとして代替するのも何か違う。
「tableレイアウトはマークアップ的に良くないから、div等とcssを使う」ならわかる。
452Name_Not_Found:2009/07/22(水) 17:59:41 ID:???
CSSが無くても最低限表示できるようにテーブル使うこともある
絶対に使うなと言うのは極端過ぎる
453Name_Not_Found:2009/07/22(水) 18:01:56 ID:???
よほどでかいものじゃない限り、表は出来る限りテーブル要素で作るべき
ページのレイアウトをtable要素でするなってこと
454453:2009/07/22(水) 18:02:36 ID:???
テーブル要素→table要素
455Name_Not_Found:2009/07/22(水) 18:14:10 ID:???
表組をなんとしてでもdl,dt,ddで表現しようとするバカもいるけどな。
456450:2009/07/22(水) 18:20:24 ID:???
よかった・・・ジイチャンが「浪曲のほぉむぺぇじ建てたい」(なんか勘違いしてる)とか言い出して、
10年くらいぶりにサイト作り始めたんだがtableゴリゴリの時代に育ったからどう作っていいか全く分かんなくてさ・・・
サイト全般のレイアウト→CSS、表→tableで問題なしってことだよね

tableならセルの嵐で仮想ドット絵全身マリオ作れるんだが
div+CSSだと左のdivと右のdiv隙間開けずにくっつけることさえできんw
457Name_Not_Found:2009/07/22(水) 18:29:39 ID:???
>>456
じいちゃんのために…

おまえ、いい孫だな
458Name_Not_Found:2009/07/22(水) 20:55:42 ID:JLSDgoRM
cssはcssで有効だから
枠組みを語る場合は table vs div で語れ
459440:2009/07/22(水) 21:10:32 ID:???
>>442-443
>なんかその記述じゃ、どのブラウザでもまったく機能しないんだけど。XHTML1.1で試してるからかな
付加される数字が要素(div)の外側に存在していることが理由だと思われます。
div#olにpadding-leftを追加すれば機能するはずです。
提示したソースが不完全でした。申し訳ありません。

今回の質問についてですが、<li>を<div>で代用する方法ではなく、
<ol>を<div>で代用した際にfirefoxで起こるバグ(>>440参照)を解消する方法についてです。
どうぞ宜しくお願い致します。
460Name_Not_Found:2009/07/22(水) 22:24:33 ID:???
>>456
趣味のサイトなら全てテーブルでも構わんよ
中身が良ければそれでよい
461Name_Not_Found:2009/07/22(水) 22:38:19 ID:???
>>460
ネットで公開すれば当然自分以外にも見る人はいるわけで。情報を発信する以上、その考え方はエゴだよね
どれだけ優れていても媒体が貧弱だと意味がないし勿体ない。まぁそれが趣味である所以なのかもしれないけど
462Name_Not_Found:2009/07/22(水) 22:51:11 ID:???
CSSを使っても使わなくとも見た目が同じなら何使っても良い
463Name_Not_Found:2009/07/22(水) 23:38:09 ID:???
こっそり釣針が
464Name_Not_Found:2009/07/22(水) 23:53:05 ID:???
PC貧弱&回線細い時代ならテーブルだくだくだと遅くてストレスだったけど
今ならなんでもいいんでない?


俺はやり続けるなら時代についていけないロートルになりたくないから勉強するけど
465Name_Not_Found:2009/07/23(木) 00:28:32 ID:???
>>459
div要素はol要素じゃないから、ブラウザの拡大解釈で表示出来てるだけじゃないの?
table要素にするって指定はあるけど、ol要素にするなんてのはないし
list-itemを指定したらol要素/ul要素の子要素になるわけで、divの子要素になるわけじゃないから

てかちょっと待て
>(<ol>〜</ol>に<div>を書いてはいけない、<li>〜</li>に<form>を書いてはいけない)
これはなんだよ
li要素はブロック要素であるform要素を内包出来るぞ?
466Name_Not_Found:2009/07/23(木) 02:59:54 ID:???
>>442
<!ENTITY % ol.content "( %li.qname; )+" >

DTDでは上のようになってるからli以外含めることは出来ないはずだけど
467440: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;
}
468440: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;
}
469Name_Not_Found:2009/07/23(木) 18:28:11 ID:???
ジイチャンの個人趣味サイトなら、訪問者も高齢者が多いんでない?
だったら、ボイスブラウザ対応とか文字サイズでっかくしてもレイアウトが壊れないようなデザインを
考慮したサイトにしなきゃね
470Name_Not_Found:2009/07/23(木) 19:36:27 ID:???
そもそも高齢者がPC使ってマイナーサイトを探し出すことが出来るのか
471Name_Not_Found:2009/07/23(木) 20:43:27 ID:???
>>451
ややこしい言い方してますね
テーブルはだめぽ。。。これでおk

あとね
いまだにhtml4.01で作ってる人は
いい加減xhtmlに移行させなさいね
xhtml構造でリキッドデザイン+php=最低限いまどきのコンテンツ
472Name_Not_Found:2009/07/23(木) 21:09:32 ID:???
>>471も釣・・・だよね?
473Name_Not_Found:2009/07/23(木) 21:22:23 ID:???
>>471
テーブルダメだけだと意図が伝わらないし明らかにおかしいだろ

xhtmlはまぁ同意してもいいけど、最近はUXGAも増えてきてるしリキッドは鬱陶しいだけだろ
まぁmax-widthとダイナミックプロパティ使ってれば問題ないか
管理の手間減らすためのphpなんてDBMSがないと使いもんにならないし、大手のレン鯖じゃほとんど無理だしで実際難しいところだよな
そもそもユーザからすればphpだろうがcgiだろうがhtmlだろうが関係ないわけだけど
474Name_Not_Found:2009/07/23(木) 21:45:22 ID:???
ネタにマジレス
475Name_Not_Found:2009/07/23(木) 22:08:38 ID:???
こんなレベルの低いネタなんてあるわけねぇだろwwwwwww
476Name_Not_Found:2009/07/23(木) 22:16:10 ID:???
君たちはほんとクズ揃いですね

何がダメなのか、その論拠を明確にして
わたしの、いや現IT界の持論を論破してみなさい
 
477Name_Not_Found:2009/07/23(木) 22:37:37 ID:???
現wIwTw界wwwwwwwww
478Name_Not_Found:2009/07/24(金) 00:15:48 ID:???
釣りに見えないという>>475が釣りか
479Name_Not_Found:2009/07/24(金) 00:16:34 ID:???
せめてHTML4.01で作ってほしいね
2chなんてDOCTYPE宣言すらないよ
480Name_Not_Found:2009/07/24(金) 00:30:19 ID:???
宣言なんてしてもしなくても一緒だろうが。

いちいち宣言して「俺プロwww」とかの自己満野郎多すぎ。
481Name_Not_Found:2009/07/24(金) 00:55:26 ID:???
ブラウザが寛容だから表示されてるだけであって
482Name_Not_Found:2009/07/24(金) 02:05:31 ID:???
>>480
つくったサイトうpしてみなさい
w3cで-300点ぐらいでしょ!?w
483Name_Not_Found:2009/07/24(金) 10:31:28 ID:???
>>482
-200越えてるけど何か?
不備なく見えてるから問題ないと思うが。

ちなみに1日6000~10000PVくらいのオタ系情報サイトな。
484Name_Not_Found:2009/07/24(金) 11:28:04 ID:???
自分のサイトならブラウザで見れればいいんじゃね。
485Name_Not_Found:2009/07/24(金) 12:19:25 ID:???
学校の課題なのですが、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の文が違うようで、形式チェックに通りません。
どう改変したらいいのでしょうか?
486Name_Not_Found:2009/07/24(金) 12:33:20 ID:???
javasprictはスレ違いな上に、学校の課題のことを2chで質問するようじゃ先が思いやられる
先生に質問しなさい
487Name_Not_Found:2009/07/24(金) 12:40:20 ID:???
ヒント:改行
488Name_Not_Found:2009/07/24(金) 13:07:50 ID:???
関数を閉じてないから
489Name_Not_Found:2009/07/24(金) 13:19:55 ID:???
>>487
改行ですか?すいませんわかりません

>>488
関数を閉じてないから 
とはどういうことでしょうか?
490Name_Not_Found:2009/07/24(金) 13:24:26 ID:???
>>489
これよーく見て。何か足りなくない?

function naka(){
document.test.src="neko2.jpg";
}
function soto(){
document.test.src="neko.jpg";
// -->
491Name_Not_Found:2009/07/24(金) 13:26:18 ID:???
>>490
わかりましたが、そこの部分ではないようです
書き込むときに改行を減らすときに間違って消してしまったようです
492Name_Not_Found:2009/07/24(金) 13:38:05 ID:???
>>485
なんという初歩で、スレ違いなレス

+ JavaScript の質問用スレッド vol.72 +
http://pc11.2ch.net/test/read.cgi/hp/1247911761/
493Name_Not_Found:2009/07/24(金) 13:53:29 ID:???
>>492
誘導ありがとうございます
494Name_Not_Found:2009/07/24(金) 17:04:41 ID:???
マウスオーバーとかググレば腐るほど情報でてくるだろw
495Name_Not_Found:2009/07/24(金) 19:04:21 ID:???
>487 >488 >490 は夏厨なのかね ?
496Name_Not_Found:2009/07/24(金) 19:10:16 ID:???
497Name_Not_Found:2009/07/25(土) 01:56:13 ID:T0xnASip
誘導されたのでこちらで再質問します。
特定の場所に文字を表示させずに半角改行だけを入れたいのですが可能でしょうか?
HTMLでもCSSでもかまわないのですが、firefoxにも対応できるものでお願いします。
498Name_Not_Found:2009/07/25(土) 02:20:35 ID:???
>>497
目的は何なの?
ソース貼るかHTMLうpするかして
499Name_Not_Found:2009/07/25(土) 02:22:22 ID:???
普通の改行だと、全選択とかしたときに改行部分が文字として表示されるのがいやなのかな。
Shift+Enterでできる間隔のない改行を表示させる方法ってことかね?
500Name_Not_Found:2009/07/25(土) 02:49:40 ID:???
改行コードに半角も全角もねえよ
501Name_Not_Found:2009/07/25(土) 02:58:38 ID:???
もしかして、段落を表現したいってことかな?
ならこれでおk

<p>文A</p>
<p>文B</p>
502497:2009/07/25(土) 03:11:14 ID:T0xnASip
自己解決しました。
色々とアドバイスありがとうございました。
503Name_Not_Found:2009/07/25(土) 03:36:48 ID:YWNH4uow
ブラウザでプレビューすると現在使用しているレンタルサーバーのNot Foundの画面になってしまいます。ブラウザリストの編集でどこを選択すればいいかも分からず困っています。ググったんですけどこういったトラブルがないようで見つけられませんでした。
今まではネット接続していない状態でプレビューできていました。その状態に戻したいです。

OS:Windows
Dreamweaver MX2004です。

よろしくお願いします!
504Name_Not_Found:2009/07/25(土) 03:46:05 ID:???
その文で質問が理解できるならエスパーだな
505Name_Not_Found:2009/07/25(土) 07:58:58 ID:???
サーバにアップしてないんじゃないの
506Name_Not_Found:2009/07/25(土) 11:46:35 ID:???
>>503
ちー★さんこんにちは。w
507名無しさん@そうだ選挙にいこう:2009/07/25(土) 12:32:39 ID:???
>>503
ビデオで録画するとテレビが砂嵐の画面になってしまいます。
番組選択でどこを選択すればいいかも分からず困っています。
ググったんですけどこういったトラブルがないようで見つけられませんでした。
今まではビデオ接続していない状態で番組が見れていました。その状態に戻したいです。

テレビ:ブラビア
ビデオ:ソニーです。

よろしくお願いします!
508Name_Not_Found:2009/07/25(土) 14:24:07 ID:???
<div style=" width:400px; border:solid 1px #222; overflow:auto; padding: 20px; ">文章</div>

以上のようにするとだいたいのブラウザでは幅400のdiv、div内側に20pxずつの余白が空いた状態になるのですが、
IE6ではdivのサイズが変わってしまいます
解決するにはどうしたらいいでしょうか
509Name_Not_Found:2009/07/25(土) 14:44:53 ID:???
>>508
IE6の有名なバグ。DOCTYPE宣言でdtdのURLが抜けてたり、XML宣言が入ってるとそうなる
お手軽な対処法の一つは、文字コードをUTF-8にしてXML宣言を省略するとか
510Name_Not_Found:2009/07/25(土) 14:53:17 ID:???
>>509
うわーバグですか
こりゃまいりました

ヘッダは以下の通りです

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv=content-type content="text/html"; charset="shift_jis">


文字コードをshift_jisから動かせないんでどうにもならなそうですね・・・
最悪インラインフレームにします・・・とほほ・・・
511Name_Not_Found:2009/07/25(土) 14:57:09 ID:???
>>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、もしくは指定しない方が良さげ
他の解決法では外部ファイルでハックとかもある
512Name_Not_Found:2009/07/25(土) 15:46:58 ID:???
>>511
うおー
ちゃんと動きました
なるほどdivを入れ子にして処理を分ければいいんですね
おまけで切ったはずのIE5.5でも正常動作するようになりました

ありがとうございました
513Name_Not_Found:2009/07/26(日) 12:20:14 ID:/5olAVSu
phpについてお聞きします、おそらく超初歩です。

ウェブ上での表示でよく.../page.php?id=20となっているものは、ファイル名を決める時
どうすればいいのでしょうか。
勝手に番号振ってくれるの?
「?」と「id=20」の表示が、どういう仕組みになってるのか反映しているのか教えてください。
よろしくお願いします。
514Name_Not_Found:2009/07/26(日) 12:52:05 ID:???
>>513
オレの浅はかなPHP知識で答えるが
そのurlならDBにアクセスしている可能性が高い
番号自体はidとしてDBに挿入して反映させるハズ
その場合の更新は手動になるが
例えば不動産屋の物件ページだったりの頻繁に情報の更新が行われるような場合は
自動的にページが作成される

ハズ
515Name_Not_Found:2009/07/26(日) 12:53:55 ID:???
ちなみに?があるのはPHPページを表示させるためのルール
id=20でDB情報が表示されていると思って良いと思う
516Name_Not_Found:2009/07/26(日) 12:56:33 ID:???
PHPでid=20のとき20.htmlを出力する例
<?php
readfile($_GET['id'].".html");
?>

スレ違い
517Name_Not_Found:2009/07/26(日) 14:17:19 ID:???
>>514-515
わかってないなら答えないで誘導してやれよw
ちなみに教えてること全然違うよ。

>>513
とりあえず >>516さんの言うとおりPHP は スレ違いだから
これから、あるいは>>516 さんの解説がわからなかったら
WebProg 板で聞いた方がいいと思われます。↓とか
http://pc11.2ch.net/test/read.cgi/php/1245074032/l50
518Name_Not_Found:2009/07/26(日) 16:28:08 ID:???
>>503,506
ちー★さん解決して良かったね。
519Name_Not_Found:2009/07/26(日) 17:00:39 ID:???
まったくもって夏だなぁ
520Name_Not_Found:2009/07/26(日) 19:43:55 ID:E313HAG2
某スレでFFFTPは使うなと言われたのですが何故でしょうか。
521Name_Not_Found:2009/07/26(日) 20:00:28 ID:???
某スレで聞けばいいんじゃないか?
522Name_Not_Found:2009/07/26(日) 22:01:42 ID:E313HAG2
>>521
焦らさないでよ。わたしもう我慢できない。
523Name_Not_Found:2009/07/26(日) 22:28:50 ID:???
某スレで聞けばいいんじゃないか?
524Name_Not_Found:2009/07/26(日) 22:35:58 ID:???
某スレで聞けばいいんじゃないか?
525Name_Not_Found:2009/07/26(日) 22:48:08 ID:???
>>520
セキュリティが脆弱だからな
526Name_Not_Found:2009/07/26(日) 22:49:50 ID:E313HAG2
もういい。意地悪。
527Name_Not_Found:2009/07/26(日) 22:54:49 ID:???
きめぇ 自分で調べる気もないカスは氏ねよ
528Name_Not_Found:2009/07/27(月) 00:11:49 ID:???
某スレで聞けばいいんじゃないか?
529Name_Not_Found:2009/07/27(月) 03:26:47 ID:IDrR+XHp
>>516-517
助言どうもありがとうございます。
確かにスレ違いでした(汗
530Name_Not_Found:2009/07/27(月) 03:50:17 ID:???
まあ「URL?付属」の組み合わせは何もPHPに限ったことじゃないからPHPスレでもスレチ扱いだろうけどな
.phpの後の?はおきまりで勝手につく
その後のid=20ってのはphpのソースの中に「idが20だったらこのデータを表示する」的な指定が書いてある
20はいろんな条件で変動する
idって名前は単にプログラマの気まぐれでそうついてるだけ

イメージ的には1.htmlや2.htmlや3.htmlや...20.htmlにあたるものを何もかもひとつのphpで
その場その場で生成するために使ってるんだろうと思う
ソースがわからんとなんともいえんが
531Name_Not_Found:2009/07/27(月) 16:46:46 ID:mkA28Xkv
初歩的な質問で申し訳ないです。
http://www.raku-gaki.info/
↑のようなヘッダーとフッターをフレームで別けて無いサイトはどのようにして作るのですか?
532Name_Not_Found:2009/07/27(月) 16:49:13 ID:???
CSS
533Name_Not_Found:2009/07/27(月) 17:12:25 ID:mkA28Xkv
>>532
やっぱりCSSっすか
CSSだとテーブルですか?
534Name_Not_Found:2009/07/27(月) 17:32:03 ID:???
divでもテーブルでもお好きな方をどうぞ
個人的にはdivの方がいいと思うけどね
535Name_Not_Found:2009/07/27(月) 17:50:43 ID:mkA28Xkv
ありがとう
536Name_Not_Found:2009/07/27(月) 21:45:04 ID:???
何も知らなかったくせにやっぱりとか使ってんなよ
537Name_Not_Found:2009/07/27(月) 22:37:31 ID:???
>>536
やっぱり、オレも思うよ
538Name_Not_Found:2009/07/27(月) 23:10:14 ID:???
>>537
やっぱり思うよな
539Name_Not_Found:2009/07/28(火) 01:12:30 ID:???
やっぱCSSでテーブルだよな。
540Name_Not_Found:2009/07/28(火) 01:17:15 ID:???
質問なんでが
ぼくはテーブルをかいてから、文字の大きさだけcssとかいうやつで
カッコつけてます

これってテーブルでcssってことなんでしょぅか?
541Name_Not_Found:2009/07/28(火) 01:26:44 ID:???
> テーブルをかいてから
542Name_Not_Found:2009/07/28(火) 01:44:59 ID:???
>>540
カッコつけてるって、XHTML1.1使ってHTML-lintで100点とってるって意味か?
543Name_Not_Found:2009/07/28(火) 17:11:16 ID:mWb3/F8O
dreamweaverのテンプレート機能を使用したところ、
デザインビューの表示がガタガタに崩れてしまいました。
適用前は問題なく表示されており、適用したとたん崩れてしまった感じです。
ブラウザでの表示にはテンプレート適用前後で差異はありません。
テンプレートを使用した方が楽なのですが、デザインビューが使えないのは不便です…
解決方法ありますでしょうか?
544Name_Not_Found:2009/07/28(火) 17:30:34 ID:???
>>543
CS4使えばある程度はましなんじゃない?
545Name_Not_Found:2009/07/28(火) 18:10:46 ID:???
>544
使用しているのはCS4です。
divでくくっている中身が全て外に飛び出ているような感じになってしまっているんですよね…
デザインビューは諦めた方が良いんでしょうか
546Name_Not_Found:2009/07/28(火) 20:45:18 ID:???
はじめまして
HTML、CSS超初心者です

CSSでレイアウトを組むとどうもブラウザを小さくしたときに
レイアウトがぐちゃぐちゃになってしまいます・・・

|    |
|あああ|
|    |

こんなレイアウトのものが
ブラウザを小さくすると

|
|
547546:2009/07/28(火) 20:46:38 ID:???
すいません書いてる途中で書き込んでしまいました

|    |
|あああ|
|    |

こんなレイアウトのものが
ブラウザを小さくすると

||
||あああ
||

というようにボーダーの間がせまくなって
中の文字がはみ出してしまいます

どうすればいいのでしょうか?
よろしくお願いします!
548Name_Not_Found:2009/07/28(火) 20:50:58 ID:???
>>546
で、ソースは?
549Name_Not_Found:2009/07/28(火) 20:51:26 ID:???
>>546
問題箇所のHTMLとCSSのソースを載せるんだ
550546: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;
}
551546: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>
552Name_Not_Found:2009/07/28(火) 22:41:50 ID:???
とりあえず body の width を無くしたらIE8では突き抜けなくなったけど
この 50% ってのはなんかこだわりがあるんでしょうか。
553Name_Not_Found:2009/07/28(火) 23:21:13 ID:???
widthで指定した領域からはみ出した場合、ブラウザの初期値は overflow:visible; なので、ボックスからはみ出して表示される
ただしIE6はバグのため、 visible だとボックスを拡張して表示する
はみ出させないようにするには、 width:50%; に加えて min-width:文字がはみ出さない横幅; を指定しておくと良い
554Name_Not_Found:2009/07/28(火) 23:29:24 ID:???
よくwikiとかに見たりするメニューの格納ボタンっていうのかな。
見た目では[+]が格納している状態で、[-]で展開しているボタン。
それについてググっているのですが、うまいこと該当するのがヒットしないので、
何でググればいいかだけでも教えてもらえないでしょうか?
555Name_Not_Found:2009/07/28(火) 23:38:02 ID:???
>>554
つ ソースの表示
556546:2009/07/28(火) 23:40:52 ID:???
>>552
中央寄せにしようとおもってwidthで50%指定しました

>>553
min-widthで指定したのですがはみ出してしまいます・・・

一部ソースだけじゃだめなようなので
html、cssファイルごとアップするので見ていただけませんか?
お願いします
557546:2009/07/28(火) 23:46:18 ID:???
ttp://www.katzenohr.com/up/src/kat0131.zip_ht4BLqclVyKPytit0xp5/kat0131.zip

これです。よろしくお願いします。
558Name_Not_Found:2009/07/28(火) 23:52:45 ID:???
宿題は自分でやれよ・・・
559Name_Not_Found:2009/07/29(水) 00:02:04 ID:???
確かにIE6なら、margin対応が不完全で、min-widthに対応してないから爆発するな
横幅1400pxで表示してる人なんてそうそういないだろうから、素直にwidth:700px;にすれば?
560546:2009/07/29(水) 00:04:49 ID:???
宿題ではないです
いつもいろんなサイトのテンプレートを
お借りしてホームページ作っていたのですが

自分で1から作ってみようと思い
作り始めたところCSSのレイアウトで躓いてしまい
ここで質問させてもらいました
561Name_Not_Found:2009/07/29(水) 00:08:13 ID:???
>>560
それならXHTML1.1で、XML宣言省かずにIE6のバグにはなんとか対処しつつ作ろうぜ!
ついでにホームページじゃなくてサイトって言おうぜ
562546:2009/07/29(水) 00:10:11 ID:???
>>559
widthを700pxにしたら解決しました
ありがとうございました!

スレ違いになってしまうかもしれませんが
ソースを見てなにかアドバイスなどあったら
適当に教えていただけませんか?

ほんとにありがとうございました

563Name_Not_Found:2009/07/29(水) 00:14:14 ID:???
俺ならbodyじゃなく親divを作って色々やるかなあ
564546:2009/07/29(水) 00:14:34 ID:???
>>561
HTML、CSSともに本当に初心者なので
よくわからないのですが
!DOCTYPEの上に
<?xml version="1.0" encoding="utf-8"?>
と入れたらいいんでしょうか?
565546:2009/07/29(水) 00:19:50 ID:???
>>563
アドバイスありがとうございます
最初僕もdivを作ってと思ってたのですが
サイトの上側に隙間を開けたくなかったので
margin-topを0pxにしたのですがどうしても隙間がなくならなくて・・・

566Name_Not_Found:2009/07/29(水) 00:22:53 ID:???
親divを作ってmargin:0;にしているのに隙間が発生する原因は、そのdivの中で使われているh1とかのmarginだと思う
親divの中の子がmarginを設定すると親divの方に効果が現れてしまう
567Name_Not_Found:2009/07/29(水) 00:25:50 ID:???
>>564
<div align="center">と終了タグを消して、.footerにtext-align:center;を追加


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<?xml version="1.0" encoding="utf-8"?>
<!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">
<head>



文法チェックのみだけど、HTML-lint使うと便利だよ。先にDOCTYPE宣言だけXHTML1.1に替えてチェックしてみると、上の個所が指摘される
568Name_Not_Found:2009/07/29(水) 00:34:57 ID:???
>>566
なるほど・・・勉強になります
その場合はどうすればよいのでしょうか?

>>567
細かいところまでありがとうございます!
勝手な想像なんですがこれを消すのは
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
これはHTMLという宣言でXML宣言したからこれは不要という意味でいいんでしょうか?
569Name_Not_Found:2009/07/29(水) 00:36:37 ID:???
>>564
現時点で>>564がXHTMLに移行するメリットはほとんどないだろうから絶対ってわけでもないよ
XHTMLの利点はデータベースとの連携だったり図形の描写だったりするけど、
実際には自己満足とソースの厳密性からくるブラウザ間の曖昧さ回避のために使ってる人の方が多いんじゃないかな
ttp://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
ここ参考にしながらstrictでHTML書いとけば問題ない
570Name_Not_Found:2009/07/29(水) 00:37:18 ID:???
俺は新しいdivを作ってpaddingとかh1のmarginをpaddingで代用できる場合はそうしてる
571Name_Not_Found:2009/07/29(水) 00:46:35 ID:???
>>568
http-equiv属性は非推奨。HTTPヘッダ情報として定義しなければいけないらしい
572Name_Not_Found:2009/07/29(水) 02:17:44 ID:???
長文失礼します。原因が判明しないのでどなたか教えてください。

<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指定などはチェック済みです。
573Name_Not_Found:2009/07/29(水) 03:52:42 ID:???
>>572
heightを指定してもしなくても、IE6やFirefox3.5で正常に表示されたのでよくわからんが、実際のソースの空白には半角スペースを使ってるよね?
574572:2009/07/29(水) 04:35:58 ID:???
>573
空白部は半角スペースになっています。
また、同じ構成のページが複数ありますが、問題の1ページ以外は全部同じ高さで表示されています。
ちなみにid="main"内の<div id="AA">〜</div>及び<div id="BB">〜</div>をとっぱらうと、
heightを指定しているのになぜか高さが低くなります。
これもIE6だけfirefox3では低くならないのですが。何なんでしょう…
575Name_Not_Found:2009/07/29(水) 06:38:47 ID:???
>>557みたいに問題のファイルをアップしてもらうか、リンク張るかしてもらわないと理解できない
576Name_Not_Found:2009/07/29(水) 10:26:10 ID:???
#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;)は保って、
その高さを突き破るくらいリストがある場合に限り高さが増えるという設定は出来ますか?

素人なもので説明に不足があるかもしれませんが、
宜しくお願いします。
577Name_Not_Found:2009/07/29(水) 11:35:09 ID:???
>>576
つ min-height
それと、枠は複数あるんだよね?
じゃあid(#)じゃなくてclass(.)を使わないと。
578576:2009/07/29(水) 12:19:16 ID:???
>>577
おおっ、こんなに早くレスもらえるとは!
出来ました。
ありがとうございました。

>じゃあid(#)じゃなくてclass(.)を使わないと。
省略しましたが、それぞれに背景画像を設定します。
ご親切にありがとうございます。
579Name_Not_Found:2009/07/29(水) 14:06:27 ID:???
すいません。
http://pondt.com/con_tpl/change/kihon/
↑のようにフレームを使わず
同じページにリンク先を表示するにはどうしたら良いですか?
上記のサイトだと左側にリンク先を表示
580Name_Not_Found:2009/07/29(水) 14:32:50 ID:???
>>579
質問の意味がよくわからんのだけど、
「全てのページに同じメニュー・ヘッダ・フッタ等を表示する方法」という意味なら
そのURLのテンプレは、特殊な技法を使ったりせずに、
全てのページに同じ内容(メニュー・ヘッダ・フッタ部分)を書いてるだけだよ。
581Name_Not_Found:2009/07/29(水) 15:15:49 ID:???
>>580
ありがとう。
解決しました。
582Name_Not_Found:2009/07/29(水) 18:29:35 ID:???
http://allabout.co.jp/internet/hpcreate/closeup/CU20050228A/
上記サイトを参考にサイトを作りました。
私のはDとEが分かれてなく、くっ付いています
角丸テーブルを作り、ブラウザで確認したら下記の画像のようになりました。
http://upload.fam.cx/cgi-bin/img-box/oae90729182444.jpg
Copyright・・・の文字(1番上のサイトでいうFの部分)を1番下に固定?表示するにはどうしたらいいのか教えてください。
583Name_Not_Found:2009/07/29(水) 18:37:02 ID:???
>>582
スクショ画像だけじゃなくて、ソースも載せてもらったほうがいいかな。
584582: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>
585582: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>
586582:2009/07/29(水) 19:14:16 ID:???
</table>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<address>
Copyright サイト名 All Rights Reserved.
</address>
</div>
以上です。
587Name_Not_Found:2009/07/29(水) 19:29:32 ID:???
で、cssは?
588Name_Not_Found:2009/07/29(水) 19:41:39 ID:???
テキストでどこかにあげろよ
589Name_Not_Found:2009/07/29(水) 20:03:40 ID:???
tableに対し、各セル間の間を空けたくない場合は
border-collapse: collapse;を指定すれば良いですよね?
これでtableタグにcellpadding="0" cellspacing="0"を指定したのと同じ状態になる、で合っていますか?
DWのデザインビューではcollapseの指定だけではセル間隔が若干開いており、
cellpaddingとcellspacingを指定してようやく間隔が詰まるのですが、
DWだけの問題なのか、私の認識が間違っているのかどっちなんでしょう?
590Name_Not_Found:2009/07/29(水) 20:22:13 ID:???
>>589
デザインビューは色々面白い表示をしてくれるから、
実際にブラウザで試したほうが早いよ。
ちなみにborder-collapse: collapse;だけでおk。
591582: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;
}

です。
592Name_Not_Found:2009/07/29(水) 20:28:59 ID:???
>>589
table要素にcellspacing属性 = tableセレクタにborder-spacingプロパティ
table要素にcellpading属性 = th,tdセレクタにpaddingプロパティ
border-collapse: collapse; は隣り合ったtd同士の枠を結合させる指定。HTMLにそのような指定をする属性はない

DWのデザインビューは、過去ログでも表示がおかしいって言われてるな
593589: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>
594589: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;
}
595589: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;
}

どなたかご教授お願いします。
596Name_Not_Found:2009/07/29(水) 21:05:54 ID:???
border-spacingはIEでは動かないぞ。どのバージョンかは忘れたけど
ちなみにborder-collapse: collapse;を指定した場合はborder-spacingは意味がない
border-collapse: separate;の場合のみborder-spacingで枠同士の余白を設定できる
>>589ならtable要素にborder-collapse: collapse;、セルのmargin: 0;,padding: 0;で解決
597Name_Not_Found:2009/07/29(水) 21:10:58 ID:???
しょうもない質問ですみません

http://www.rupan.net/uploader/download/1248869258.jpg

cssでこんなテーブルを作りたいのですが

border: 1px solid #EFEFEF;
padding:2px;
background-color:#EFEFEF;

これだけではpaddingの部分が白くならないので……
どうにかして画像のようなデザインにできないものでしょうか。
よろしくお願いいたします。
598Name_Not_Found:2009/07/29(水) 21:14:06 ID:???
>>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;
}
599Name_Not_Found:2009/07/29(水) 21:15:53 ID:???
>>597
<div style="padding: 1px; border: 1px #efefef solid; background: #fff;">
<div style="background: #efefef;">a</div>
</div>
600Name_Not_Found:2009/07/29(水) 21:20:41 ID:???
>>599
ひとつのdiv内で完結できるかと思ったんですが、やっぱりふたつに分けないとダメですよね。
ありがとうございます。
601582:2009/07/29(水) 22:07:41 ID:???
>>598
width: 480pxにしてないです
width: 480pxの書き込みは>>589氏で
私の書き込みは>>584-586>>591です。
私はどう訂正したらよろしいですか?
602598:2009/07/29(水) 22:11:00 ID:???
>>601
安価ミス。>>593の間違いだった。すまん

>>582はfooter以外CSSとHTML部分がバラバラだから答えようがない
どっかにtxtでそのまま上げてくれれば何か言えるかも
603Name_Not_Found:2009/07/29(水) 22:27:53 ID:???
HTMLとCSSとGIFをZIPにまとめてうpすれば?
604582:2009/07/29(水) 23:19:32 ID:???
>>602-603
http://www.rupan.net/uploader/download/1248877056.zip
にUPしました。
パスは私の「582」です。よろしくお願いします。
605Name_Not_Found:2009/07/29(水) 23:44:25 ID:???
>>604
直接関係ないけど
・style要素内のCSSをコメントアウトするな
・ ←枠線表示してないんだから意味ないと
・html要素にxml:lang属性が抜けてる
・img要素にalt属性が抜けてる
・無意味にbr連続させるな
・width="600"border="0" ←くっついてるぞ
・table要素にsummary属性が抜けてる
・UTF-8じゃないのにXML宣言を省くな

HTML-lint便利だよ。こんだけの文法ミスをすぐチェックできる
表示がおかしいのはこれから調べてみる
606582:2009/07/29(水) 23:51:21 ID:???
>>605
そんなにミスがあるとは若干ヘコむorz

HTML-lintってググって調べたけど便利ですね。
ブラウザでチェックするのではなくソフト的なものは無いですか?

訂正お願いしますm(_ _)m
607582:2009/07/29(水) 23:52:37 ID:???
ローカルのもありましたね^^;
608598: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">
609582:2009/07/30(木) 00:07:04 ID:???
>>608
御丁寧にありがとうございます。
書き直したらいけました!
610Name_Not_Found:2009/07/30(木) 00:10:28 ID:???
てかごたごた過ぎるだろ。なんでdivで二重にくるみまくってるんだよ
611609:2009/07/30(木) 00:16:11 ID:???
>>610
すいません。
ほかにやり方が思い浮かばなくて・・・
いい方法とかあるなら教えてください
612Name_Not_Found:2009/07/30(木) 00:17:44 ID:???
>>611
ちょっと待っててくれ!
ごちゃごちゃし過ぎて書きなおす面白そうだから、ファイル書き換えて見本作る
613598: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減らすんならこれでいいんじゃねーの?
614Name_Not_Found:2009/07/30(木) 00:23:37 ID:???
<table style="margin: 12px; color: #fff">略</table>
修正。table下の余白が若干変わるけど許容範囲かな

まぁどうせ続き作ってくうちにぐちゃぐちゃになるだろうから
ちょっと整理したくらいじゃ大した意味ないだろうけど一応。
615Name_Not_Found:2009/07/30(木) 00:41:13 ID:???
>>612
サンプル楽しみにしてます。

>>613-614
ありがとう。
なんか俺まだまだだなぁって感じるわ、、
616582:2009/07/30(木) 00:58:22 ID:???
>>613-614
記述したのですがdivが数個なくなるだけで結構違いますね

table下とCopyrightの文字の間を空けるにはどう記述したらいいのですか?
617Name_Not_Found:2009/07/30(木) 01:36:02 ID:???
文字間隔ならletter-spaceing
618612:2009/07/30(木) 02:04:42 ID:???
>>615
でけた! 面白かった〜
table要素よくわかってなかったから、勉強になったわ
http://www.rupan.net/uploader/download/1248886950.zip

なんかW3C的におかしいところがあれば指摘よろ
619593:2009/07/30(木) 02:04:57 ID:???
すみません、スレ流れてしまっているのでどなたか
>593お願いします
620Name_Not_Found:2009/07/30(木) 02:08:19 ID:???
621Name_Not_Found:2009/07/30(木) 02:12:32 ID:???
>>618
w3cでリントしてきたら?
622612:2009/07/30(木) 02:30:55 ID:???
>>621
間違ってたから修正した。パス:612
http://www.rupan.net/uploader/download/1248888482.zip
623593:2009/07/30(木) 03:36:36 ID:???
>>620
すみません、アンカーミスだったんですね。
tdのwidth指定を消したらうまくいきました。

tableのCSS指定にdisplay:inline;を加えるのと、
html:not(:target) th { /*IE以外のブラウザに対応って意味*/
 width: 113px;
}
の箇所は用途がよく解らないので調べてきます。
ありがとうございました。
624Name_Not_Found:2009/07/30(木) 03:52:55 ID:???
外部CSSを作るときどのように設定してます?

本当は外部のCSSは一枚だけが理想なのですが、現状は
A.css:サイト全体用のスタイルが一枚。
B(〜Z).css:各html個別用のスタイルが一枚。
です。

基本各ページを作成するときは。B(〜Z).cssをいじります。
それでも、A.cssをいじったりして、どこに設定していたか、わからなく
なることあります。

みなさんはどうしていますか?
625Name_Not_Found:2009/07/30(木) 07:20:34 ID:???
>>624
一緒

>どこに設定していたか
クラス名とかがわかりにくいのが原因では?
あとCSS中にコメントアウトして詳細を記述しておくとか
626Name_Not_Found:2009/07/30(木) 07:22:12 ID:???
そゆときCS4は便利。
627Name_Not_Found:2009/07/30(木) 09:30:52 ID:???
CS4はどう便利なの?
628Name_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;

背景画像を左右に表示させたい場合はどうすればいいでしょうか?

アドバイスよろしくお願いします。
629628:2009/07/30(木) 10:44:39 ID:ff8NQ+7S
先ほど登校した内容に誤りがありました。

正しくは以下です。
background:url(./image/content_bg.jpn);
630Name_Not_Found:2009/07/30(木) 10:56:38 ID:???
1つの要素には1枚の背景画像しか設定できない
2つの要素を重ねて1つは左、1つは右に指定するとか、
全体を1枚の背景画像にして1つの要素で縦に繰り返すとか
631628:2009/07/30(木) 11:01:47 ID:ff8NQ+7S
>>630
なるほど。一工夫してやらないと駄目なんですね。

どうもありがとうございました。
632582:2009/07/30(木) 11:04:15 ID:???
>>617
ありがとう。

>>612
ファイルが見当たらないのですがもう1度UPしてくれませんか?
633528:2009/07/30(木) 11:20:31 ID:???
>>617
すいません。
文字の間隔じゃなく、table下の余白が無くすぐさま
<div>文字</div>が来て余白が無いので余白が欲しいんですよ。
余白を作るにはどうしたらどうしたらいいんですか?
634Name_Not_Found:2009/07/30(木) 11:58:11 ID:bfU3dOWu
>>633
margin,paddingのどっちか使えばいい。footerにpadding-top: 10px;がいいかな
そんな簡単なことくらい自分で調べた方が早いぞ。「css 余白」でググればすぐ分かるだろ
635Name_Not_Found:2009/07/30(木) 12:13:48 ID:???
>>634
ありがとう。

俺勉強不足過ぎるなorz
636Name_Not_Found:2009/07/30(木) 12:14:27 ID:bfU3dOWu
自分で勉強する意欲が欠けてるな
637Name_Not_Found:2009/07/30(木) 21:54:05 ID:???
>>632
ごめん、サイズが小さいと消えるのかな
HTMLとCSS分離の参考にしてくれ

http://kissho.xii.jp/1/src/1jyou86057.zip
ここならHTMLもパスなしでアップロード出来るし、スレ的に便利だと思う
638Name_Not_Found:2009/07/30(木) 22:23:51 ID:???
>>637
自分のと見比べたら全然違うくてビビったわorz

スゲー参考になります。ありがとう!
639Name_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;
}
640639: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;}


どなたか解答お願いします。
641Name_Not_Found:2009/07/31(金) 05:17:19 ID:???
どうせ確認するときに消さなきゃいけないんだから、わざわざ全角スペース入れんでいいよ
642Name_Not_Found:2009/07/31(金) 05:27:53 ID:???
>>639
両方ともあいてるじゃん
padding: 9px;って指定してるからでしょ
643639:2009/07/31(金) 06:03:09 ID:???
>641
すみません、次回からは消します

>642
上手く伝わらなかったようですみません
padding;9px;はdiv id="main"の内側全体に9pxの隙間を空けるために指定したものですが、
そのpaddingに加えて
IEの場合はimgの上部のみ、firefoxではtableの上のみに10px程度の意図しない隙間が開いてしまっているんです。
644Name_Not_Found:2009/07/31(金) 09:03:37 ID:???
ブラウザのデフォルトの margin、padding を消した上での話?
645Name_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>
646Name_Not_Found:2009/07/31(金) 10:07:55 ID:???
修正
html:not(:target) div#main div.inner {
min-height: 399px
}
647Name_Not_Found:2009/07/31(金) 15:36:34 ID:???
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);
}
ポップアップを制御するところまでは分かるんですが・・・。
648Name_Not_Found:2009/07/31(金) 15:41:45 ID:???
>>647
やりたいことがよくわからないので、絵にでも描いてうpしてくれないか?
特に「ポップアップを制御する」がわからん。
ロールオーバーのことが言いたいのかな?
649647:2009/07/31(金) 16:11:59 ID:???
おっしゃるとおり・・・orz
ポップアップではなく、ロールオーバーでした。
650Name_Not_Found:2009/07/31(金) 16:17:45 ID:rB/03NYv
この広告の背景を透明にする方法はありますか? 本当は消したいけど
http://www.myspace.com/116588518
[PR] 7/31、green bird代表/渋谷区議会議員のハセベケンさんが語るのは?
651Name_Not_Found:2009/07/31(金) 16:59:34 ID:???
>>649
結局何がしたいのかいまいち分からないけど、
おそらくページ毎に別々のCSS作って#gerogero aのbackground-imageをページに合わせてやれば解決
もしオンマウスで画像切り替えるだけならロールオーバーでググレば腐るほどヒットするぞ
652Name_Not_Found:2009/07/31(金) 17:25:57 ID:???
>>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);
}
653Name_Not_Found:2009/07/31(金) 17:32:29 ID:???
あ、ちなみに>>652はメニューの背景画像が全部同じの場合ね。
もし各メニューごとに違う画像を背景にしたい場合は、
外部cssでhoverしてないときの画像(例で言えば画像A)を指定して、
<head>内cssもしくは<body>内の該当箇所に直接入力で画像Bを指定すればおkかと。
……文章で説明するのはむずかしーな。
654647 649:2009/07/31(金) 18:03:45 ID:???
ロールオーバーでググったら色々出てきました。
皆様ありがとうございました。

>>652
参考にさせて頂きます。
ご丁寧にありがとうございました。
655Name_Not_Found:2009/07/31(金) 19:12:54 ID:???
枠つきで幅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>
656Name_Not_Found:2009/07/31(金) 20:13:20 ID:lHxSHggH
質問です。
携帯サイトをxhtml1.0トランジッショナルでやってますが、
これだと古い機種だと見れないこともありえるんでしょうか?
iモードシミュレータやってみたら、ソースしか表示されないし
xhtmlにしてからヒット数がだんだん減ってきてるのですが…
657639:2009/07/31(金) 20:16:50 ID:???
>645
全角スペースは次回から消すようにします
結局何が原因なのですか?
645さんが書かれているソースが何をしようとしているものなのか解らないのですが…
658Name_Not_Found:2009/07/31(金) 20:45:36 ID:???
>>655
三つ目のdivにmargin: 0 auto;を追加

>>657
>645さんが書かれているソースが何をしようとしているものなのか解らないのですが…
>>639の知識不足に対してのアドバイスは難しいな。あえて言うならfloatを使いたくなかった
別にimgとfloat使ってもいいんだけどclear用の要素が必要なことを考えると微妙。別にclearfix使えばいいわけだけど
原因はおそらくwidth,heightと一緒にborder,paddingを使ってること。もしくはclearしてないから
てかまず>>645のソースで見た目だけでも上手くいったのか報告しろよ
659639: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で指定する値を引いておけば解消されるのとは違うんですか?
660Name_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>
661639: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です
662639:2009/07/31(金) 21:35:12 ID:???
追記です。
>>IEとfirefoxの両方で↓のソース試してみれば分かる。IEは100pxでfirefoxでは140px
>↑これやってみましたがfirefoxもIEもまったく同じように表示されました。
→IEもfirefoxもどちらも横幅140pxになりました。
663Name_Not_Found:2009/07/31(金) 21:49:49 ID:???
解決したんならまぁ良かったけど、ちょっと書き直したくらいで直るんなら先にやっとけよ
IE6で140pxになるなんてことは絶対にありえないから、測り間違えか>>662の環境がおかしい
どっちにしても100pxになる環境もあるわけだから配慮しておいて損は無い
664Name_Not_Found:2009/07/31(金) 21:54:54 ID:???
先輩方に質問です。

フレームセットを使ったwebサイトを作っているのですが
フレームセットの幅を950pxに固定して、センターに表示するには
どのようにすればいいでしょうか?

イメージはこんな感じです。
ttp://77c.org/d.php?f=nk9135.jpg
665Name_Not_Found:2009/07/31(金) 22:02:35 ID:???
アップロードに関して質問です。

DreamweaverCS3にてアップロードを行うと、
ページ内のURLは全て相対パスとして扱われます。

これを、常に絶対パスとしてアップロードする事は可能ですか?
サイト設定の中にページのURL(HTTP〜ドメイン)を入力する箇所はあるのですが、
相対パス、絶対パスの設定が見つかりませんorz
666655:2009/07/31(金) 22:06:01 ID:???
>>658
バッチリでした
ありがとうございました
667639:2009/07/31(金) 22:19:49 ID:???
>663
すみません、660の通りに表示されないのはDW上にコピペして行ったせいだったみたいです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
の記述があるとIEでもfirefoxでも140pxに
記述がないとIEのみ100pxになりますね
ということは>660さんの言っていた問題はdoctype宣言で解消するんでしょうか?
668Name_Not_Found:2009/07/31(金) 22:32:21 ID:???
>>656
MIMEタイプをtext/htmlにしてみれば?

>>664
950pxとか、フレームいらんと思われ
669Name_Not_Found:2009/07/31(金) 22:35:52 ID:???
>>664
フレームセットというよりはインラインフレームだね。
中央にするのは左右位置だけでいいの?
だったら、該当の要素にmargin: 0 auto;を指定すればおk。
670Name_Not_Found:2009/07/31(金) 22:39:58 ID:???
>>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を分けるのが一番確実な気がする
671Name_Not_Found:2009/07/31(金) 22:52:14 ID:???
>>670
文字コードがUTF-8だと省略可だぞ。記述推奨だけどな

ちなみにdtdのURLを省くと、IEでは互換表示になる = ボックスの横幅がおかしくなる
IE6はURLがあっても、DOCTYPE宣言の前に文字があると互換表示になるバグがある
672Name_Not_Found:2009/07/31(金) 22:58:28 ID:???
互換云々は今初めて知ったよ。勉強になりました
中途半端な知識で対応してしまった>>639には大変申し訳ない
673664:2009/07/31(金) 23:19:47 ID:???
先輩方ありがとうございます。

    画像
ナビゲーションバー
   ターゲット
    画像

上のようなフレームを組んで、幅は950pxで固定し
ウィンドウサイズが950px以上の場合センターに表示したい。
という風にしたかったのです。
>>670さんに教えていただいた形でトライしてみます。
674664:2009/07/31(金) 23:24:24 ID:???
途中送信してしまいました…
申し訳ありません。

>>668
フレームなしで組むには知識がたりません。申し訳ない。
>>669
インラインフレームでも組めるわけですね。勉強します。
ちなみに中央合わせは左右のみです。

フレームでちゃんと組めたら、div#hogeなるタグを活用しCSSで
組めるように挑戦してみよう!
675Name_Not_Found:2009/07/31(金) 23:28:44 ID:???
>>674
普通に>>673のターゲット以外を全ページに記述すればいいんじゃないか?
メニュー部分のソースの分量だけなら、重くならんだろ
676Name_Not_Found:2009/08/01(土) 15:31:15 ID:???
IE6、firefox3でズームしても問題なく表示されたページが
IE8で文字サイズのズームをかけると崩れてしまいます
(divでくくったborder付きの箱から中の文章が飛び出てしまうなど)
どうしたら良いですか?
677Name_Not_Found:2009/08/01(土) 15:57:30 ID:???
ソース書けよカス

IEだけならoverflowとかword-breakとかword-wrapでいいんじゃねーの?
678Name_Not_Found:2009/08/01(土) 16:14:21 ID:???
該当箇所が多すぎてソースを張るのも…
ちなみにfirefoxでも文字サイズのみのチェックをいれてズームすると崩れます
というか、これ多分heightを指定している為だと思うんですが

IE8やfirefoxの文字サイズ変更ででheightを指定したdivから中の文字が飛び出してしまうのは
どうしようも無いでしょうか

>>677さんが言ってる方法は全然別方向のような気がします
679Name_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>
ご指南の方よろしくお願いします。
680Name_Not_Found:2009/08/01(土) 17:51:21 ID:???
CSSで複数のブロックを位置指定しています。
IE6では指定した通りになりますがFirefox3ではmarginが効かず#Aと#Bが重なって表示されてしまいます。
両方同じ表示にするにはどう直せばいいでしょうか。

#A{
  position: absolute;
  margin: 0;
  width: 15em;
  left: 0;
  top: 0;
}
#B{
  margin: 0, 0, 0, 15em;
}
681Name_Not_Found:2009/08/01(土) 18:17:14 ID:???
>>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のカンマ抜いてみろ
682Name_Not_Found:2009/08/01(土) 18:24:30 ID:Kyr6mIQq
681さんのように記述してみたところ
やはり改行されてしまいました。
683Name_Not_Found:2009/08/01(土) 18:38:20 ID:???
>>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>

684Name_Not_Found:2009/08/01(土) 18:41:38 ID:???
>>681
直りました!ありがとうございます。
685Name_Not_Found:2009/08/01(土) 18:42:51 ID:???
>>684>>680の件です。
686Name_Not_Found:2009/08/01(土) 18:51:11 ID:Kyr6mIQq
ありがとうございます。この記述により改善されました^^
687Name_Not_Found:2009/08/02(日) 02:21:17 ID:???
HTMLの勉強したいんですがオススメの教本があれば教えてください
688Name_Not_Found:2009/08/02(日) 02:46:02 ID:???
本なんかいらねぇ
しいていうならHTMLの辞書
689Name_Not_Found:2009/08/02(日) 03:08:54 ID:???
HTMLを覚えるのに一番いい方法はサイトを沢山作ることだ
690Name_Not_Found:2009/08/02(日) 03:26:31 ID:???
辞書ですか・・・
はい
いっぱい作っておぼえたいんですが残念なことに知識がほぼ0なんですよ
691Name_Not_Found:2009/08/02(日) 03:32:04 ID:???
プログラミング言語は教科書のようなものが無いと難しいけど
マークアップ言語は要素(タグ)の意味を理解したらそれを組み合わせるだけ
HTMLの書籍はAmazonとかで評価高いものを選んで買えばいい
692Name_Not_Found:2009/08/02(日) 04:10:03 ID:???
なるほど
思ったより簡単そぉですね
HTMLとゆーよりサイトの作り方みたいな本の方が分かり易いのかな
本屋行って2時間ぐらい立ち読みしてきます
693Name_Not_Found:2009/08/02(日) 10:13:00 ID:???
文字サイズを指定するとき、みなさん単位はどうしてます?
僕は、em使ったり、px使ったりしてますが、特に明確なルールとか
決めていません。
できれば、サイト全体を統一したいのですが、結局各ページ毎に
調整をするときに、適当に単位と値を決めちゃって。各ページごと
ボックスごと、バラバラになること多々あります。

文字を管理するよい方法ありますでしょうか?
694Name_Not_Found:2009/08/02(日) 11:12:54 ID:qChNV5dV
>>693
面倒だから
small medium large

まずはページ全体をsmallにする
そして必要箇所をmedium や largeにする
実質2種類
695Name_Not_Found:2009/08/02(日) 11:21:05 ID:???
>>693
>em使ったり、px使ったり
ページ全体への指定が、ページごとにpxだったりemだったりするならまずいかもしれんね
一応、pxを使わず、ページを拡大縮小してもレイアウトが崩れないのが良いページとされてる
696Name_Not_Found:2009/08/02(日) 13:41:41 ID:???
基本12pxで統一してjsで自由にサイズ変えられるようにしてる
IEさえ無ければjsも必要ないんだけどなぁ
697Name_Not_Found:2009/08/02(日) 14:26:09 ID:???
IE7 以降なら px 指定でも大きさ変更できっぺや。
698Name_Not_Found:2009/08/02(日) 14:47:50 ID:???
俺のサイトにはIE6ユーザーがまだ4割もいるぞ……orz
699Name_Not_Found:2009/08/02(日) 14:55:35 ID:???
規格が統一される日は来ないのかな
700Name_Not_Found:2009/08/02(日) 14:59:28 ID:???
MSが、CSSにFirefox並みの対応をしたIE9を出して、同時にIE8以下のセキュリティアップデートを打ち切ればいい
701Name_Not_Found:2009/08/02(日) 15:04:40 ID:???
Firefox ってCSS優等生みたいな見られ方をするけどさ
昔はMSが独自仕様をこっそり作ってたが
今はMozzilaが公開しながら独自仕様を作ってねーか?w

特に最近のHTML5、CSS3あたりは大活躍なきが・・・
702Name_Not_Found:2009/08/02(日) 15:14:50 ID:???
別に独自仕様はなんの問題もないよな。使わなければいいだけの話だし
むしろハック使うよりも綺麗で確実なこともあるしありがたい
703Name_Not_Found:2009/08/02(日) 15:16:52 ID:???
>>700は、最低限Firefox並みのCSS2.1対応をって意味で言った
CSS3に先行対応するのは別に構わんと思う
今のところレンダリングが最も優秀なのはOperaね
704Name_Not_Found:2009/08/02(日) 15:29:44 ID:???
-mozが付く独自プロパティは300近くあったな
Firefox内部で使われるのが前提だから別に問題ない
705Name_Not_Found:2009/08/02(日) 16:02:11 ID:???
>>702
>>703
ごめん、把握した
706Name_Not_Found:2009/08/02(日) 16:12:17 ID:???
対応はまちまちでもとりあえず我慢するから、ブラウザによって動作が違うってのを何とかして欲しいよ
707Name_Not_Found:2009/08/02(日) 16:16:42 ID:???
>>689
禿胴

xhtmlはスイミングですね
708Name_Not_Found:2009/08/02(日) 19:18:34 ID:???
すみません教えてください。
外部スタイルシートで
.red{ color: #FF0000; }
のように指定しているスタイルが
IEでは適用されるのですが
FirefoxやOperaで適用されなくて困っています
どのような問題があるのでしょう?
709Name_Not_Found:2009/08/02(日) 19:26:14 ID:???
>>708
それはcssファイルよりもhtml側で外部cssを呼び出しているタグに問題がありそうな予感。
該当箇所のソース貼ってみて?
710Name_Not_Found:2009/08/02(日) 19:29:51 ID:???
>>709
「外部cssを呼び出しているタグ」というと以下の部分でしょうか?

<meta http-equiv="Content-Style-type" content="text/css">
<link rel="Stylesheet" href="main.css">
711Name_Not_Found:2009/08/02(日) 19:36:25 ID:???
<link rel="Stylesheet" href="main.css" type="text/css">
ならどうだろう
712Name_Not_Found:2009/08/02(日) 19:41:19 ID:???
>>711
やってみましたがやはり適用されないようです
713Name_Not_Found:2009/08/02(日) 19:43:47 ID:???
>>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">

こう書かないといけない。大文字小文字も完全に区別される
714Name_Not_Found:2009/08/02(日) 19:49:24 ID:???
>>713
修正してみましたがやはり該当箇所にスタイルが適用されないようです
クラスを指定していない部分のスタイルは適用されているようなのですが
クラス指定がある部分のスタイルが適用されないのです
お手数をおかけして申し訳ありません
715Name_Not_Found:2009/08/02(日) 19:50:43 ID:???
>>714
いいからソース貼れよ
716Name_Not_Found:2009/08/02(日) 19:52:05 ID:???
textかzipでまとめてどこかにアップロード
717Name_Not_Found:2009/08/02(日) 19:57:31 ID:???
>>714
じゃあ該当の「クラス指定をしている部分」のソースが必要だろ。
つーか、最初からクラス指定してる部分だけならそう書けよ……。
回答者側はエスパーでも聖人でもないんだから、後出しされるとさすがにむかつく。
718Name_Not_Found:2009/08/02(日) 20:24:07 ID:???
>>717
申し訳ないです
クラス指定しているときというつもりで

>.red{ color: #FF0000; }
>のように指定しているスタイルが

と書いたのですが分かりにくかったですね
本当に申し訳ないです

例えば以下のような感じで指定しています

<span class="red">XXXXXXXX</span>
719Name_Not_Found:2009/08/02(日) 20:42:23 ID:???
もう吉祥にHTMLうpしろよ
720Name_Not_Found:2009/08/02(日) 21:01:39 ID:???
IE以外で意図した結果にならないというのは根本的におかしいから。
Web関連はIE以外でコーディングして後からIEでおかしいところを直すのが一番効率がいい
721Name_Not_Found:2009/08/02(日) 22:07:57 ID:???
絶対逆の方が楽だろ。むしろちょっとずつ交互に見合わせていくのが最善だけど
722Name_Not_Found:2009/08/02(日) 22:19:21 ID:???
>>721
作り上げたページをIEのバグに対応させるのは困難だから、IEで確認しながらWeb標準準拠ページを作れば他のブラウザの表示も問題ないし楽ってことだな
723Name_Not_Found:2009/08/02(日) 22:31:08 ID:???
うpもせずにめんどい質問する奴は帰れww
724Name_Not_Found:2009/08/02(日) 23:13:08 ID:???
>>722
>IEで確認しながらWeb標準準拠ページ

作ったことないだろ
725Name_Not_Found:2009/08/02(日) 23:24:00 ID:???
>>724
だから、IEでも表示が崩れないようにしつつ、文法違反にならないページを作ればいいって意味じゃないかなと>>721
ほら、IEって未対応のCSSとかが多いじゃん。それを使わないように、ページを作り上げるっていう
726708:2009/08/03(月) 00:08:11 ID:???
直りました
ありがとうございました
727Name_Not_Found:2009/08/03(月) 00:30:09 ID:???
どうやったら解決したのかも書けよカス
728Name_Not_Found:2009/08/03(月) 00:31:01 ID:???
まぁ>>722みたいな楽しい人も
混ざるよね、、、この季節

特にリキッド100%で
Flashも伸縮ありなんてのつくると
軽く飛べますよ かるーくね
729Name_Not_Found:2009/08/03(月) 00:36:50 ID:???
フレームの境界線の色を変えてみたんだけど、
IEじゃちゃんと見えるけどFirefoxだと黒線にしかならない
俺が間違ってるの?それともブラウザの仕様?
730Name_Not_Found:2009/08/03(月) 00:58:26 ID:???
デフォの枠消してCSSでボーダー設定
最悪1pxのフレーム作って色つければいいんじゃね
731Name_Not_Found:2009/08/03(月) 01:06:41 ID:???
>>730
じゃあやっぱ仕様なのかな。
CSSでやる事にした。ありがとう
732Name_Not_Found:2009/08/03(月) 05:47:33 ID:???
divとspanの使い分け教えてください><
733Name_Not_Found:2009/08/03(月) 06:42:53 ID:???
>>721=>>728
詳しく
734Name_Not_Found:2009/08/03(月) 08:26:57 ID:???
皆さんはCSSとhtmlは同じフォルダに置いてます?
それともCSSはCSSのフォルダを作ってますか?
735Name_Not_Found:2009/08/03(月) 08:38:58 ID:???
htmlのCSSは同じ階層で、jsとかのCSSは専用のフォルダ作ってるけど
736Name_Not_Found:2009/08/03(月) 08:48:30 ID:???
>>732
改行あるかないか
737Name_Not_Found:2009/08/03(月) 09:02:50 ID:???
>>735
サンクス!参考にします
738Name_Not_Found:2009/08/03(月) 12:10:46 ID:???
http://journal.mycom.co.jp/articles/2007/06/14/lightbox/index.html
このHPを見ながらLightboxを設置したのですが上手くいきません。
添削して頂ける方を探してます。お願いします
739Name_Not_Found:2009/08/03(月) 13:00:05 ID:???
>>738
自分も全く同じサイト見ながら設置したけどうまくいったよ。
そんな奴でよければ見るけど?
740Name_Not_Found:2009/08/03(月) 16:05:21 ID:???
テーブルタグについてなんですが、

<Table align="center">

を加えて中央に位置させようとすると枠が消えてしまうのですがなぜでしょうか?
741Name_Not_Found:2009/08/03(月) 16:15:07 ID:???
>>740
そこだけじゃなくて、もう少したくさんソースを貼り付けてくれないとアドバイスのしようがありません。
エスパーしてみると、borderは設定した?
742738:2009/08/03(月) 17:41:01 ID:???
>>739
その後も原因を考えてたのですが、わからないのでお願いします
http://kissho.xii.jp/1/src/1jyou86588.zip
743Name_Not_Found:2009/08/03(月) 17:43:55 ID:2sB0edpV
css を使え
それで解決
744Name_Not_Found:2009/08/03(月) 18:15:47 ID:???
>>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.だから、最新版だと多少違うらしい。
745Name_Not_Found:2009/08/03(月) 18:19:45 ID:???
>>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>

こんな感じなんですがどこがいけないのでしょう?試しに右揃えもやってみましたが同じように文字だけ移動して枠は消えてしまいました。
746738:2009/08/03(月) 18:56:17 ID:???
>>744
最新版を使ってますよ。
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>に書き換えたらいけました。
ありがとうございます。
けどもまた違う問題点が、、
「NEXT」と「PREV」の画像が表示されません。
これも最新版とその1つ前のverの違いありますか?
747Name_Not_Found:2009/08/03(月) 19:12:25 ID:???
>>745
table要素の開始タグが2回出てくるのが駄目
1つにまとめて

>>746
参考サイト見ないで公式の説明でやったらいいんでないかい
748745:2009/08/03(月) 19:23:31 ID:???
>>747
ありがとうございました。
749738:2009/08/03(月) 19:32:14 ID:???
>>747
英語がわからないですorz
750738:2009/08/03(月) 19:48:47 ID:???
自己解決しました。
ごめんなさい
751Name_Not_Found:2009/08/03(月) 20:19:09 ID:???
高校レベルの英語力で十分だろうに……
752Name_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タグが不便になっちゃう・・・
何処をいじっちゃったのかなぁ。
753Name_Not_Found:2009/08/03(月) 20:35:57 ID:???
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>
とこんな感じでなんですけど違いますか?
754Name_Not_Found:2009/08/03(月) 21:57:12 ID:???
>752
いろんなタグにマージンは各ブラウザで勝手に設定されています。最初に
*{margin:0;}
を書いてすべてのタグのマージンを0にしたほうがいいですよ。
755Name_Not_Found:2009/08/03(月) 21:58:46 ID:???
>>753
tableのclassに幅設定でいいのでは?
756Name_Not_Found:2009/08/03(月) 22:23:49 ID:???
>>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>
757756: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>
758753:2009/08/03(月) 22:47:18 ID:???
>>757
御丁寧にありがとうございます。
両方とも試して両方ともいけました!
やはり>>757の方がゴチャゴチャせずにいいんでしょうかね
759Name_Not_Found:2009/08/03(月) 23:01:36 ID:???
もう1度力を貸してください。
テーブルの中身の事なのですが
極力改行の<br>を使わずに書きたくて
paddingやmarginを使い記述したのですが何故か適応しないorz
添削お願いいたします。
http://kissho.xii.jp/1/src/1jyou86609.zip
760Name_Not_Found:2009/08/03(月) 23:01:53 ID:???
>>758
>>756の1つ目と2つ目は場合によって表示が違うからね
もし>>756の2つ目を選択したなら、>>757にしたほうがスマート
761Name_Not_Found:2009/08/03(月) 23:20:42 ID:???
>>759
この量を添削とかふざけすぎだろ。自分で一行削っては確認を繰り返して原因くらい探せ
質問したいんならせめて、どのテーブルのどのセルにどのファイルでCSS指定してるのかくらい書けよ
762Name_Not_Found:2009/08/03(月) 23:34:20 ID:???
>>759
ソースを見ても、最終的に目指したい状態や見た目が想像できない。
現状からどのように変更したいの?
763759:2009/08/03(月) 23:44:55 ID:???
>>761-762
さーせんorz
IllustテーブルとWebDesignテーブルの間を<br>で改行してるけど
その改行を使わずに今ぐらいの間隔を開けたいです

あと、WebDesignテーブルの下と角丸ボックスの黒の余白をもう少し開けたいです。

これでわかりますか?
764Name_Not_Found:2009/08/04(火) 00:03:14 ID:???
>>763
お、俺が添削したXHTMLだな
上から目線ですまんけど、火曜が終わるまでにチェックと解説しといてやるよ
765Name_Not_Found:2009/08/04(火) 00:13:43 ID:???
ホントに上から目線だな
・・・ま、それがおまえのいいところでもあるんだけど
766759:2009/08/04(火) 00:16:21 ID:???
>>764
先生またあえて嬉しいですw
あれから自分なりにがんばってますけどどうですかね?
若干lightbox2の設置に手こずったんすけどw

まだ新米だし上から目線で全然構いません。
宜しくお願いします
767753:2009/08/04(火) 00:48:01 ID:???
>>760
ナルホド!
参考になりました。ありがとうございます
768Name_Not_Found:2009/08/04(火) 12:39:27 ID:???
>>763
marginとpaddingみたいな汎用性の高いプロパティの動作やバグは知っておいた方がいい
余白の作り方なんかでいちいち質問してたらきりがないぞ
>>764
優しくするのもいいけど加減も考えた方がいいんじゃね?
769Name_Not_Found:2009/08/04(火) 13:57:45 ID:???
>768
同意
cssはブラウザによっていろんなバグがある。
float、margin、paddingが絡むと崩れやすい。
770Name_Not_Found:2009/08/04(火) 14:24:07 ID:???
まぁそれを克服するスキルを
身に着ければいいだけなんですけどね
771Name_Not_Found:2009/08/04(火) 14:29:13 ID:???
>>768
ごめん、俺構ってちゃんなんだ
次は解説もするから
基本的なことがわかってなかったみたいだから、まずは例やテンプレを示して自分でいじってみるのが覚えやすいと思う
俺もそうだったから
772759:2009/08/04(火) 14:52:35 ID:???
>>768
ほうほう、なるほど。
cssでそこに指定してるはずなのに上手く動作しないんすよ…

>>769
>cssはブラウザによっていろんなバグがある。
>float、margin、paddingが絡むと崩れやすい。
初めて知りました。
教えてくれてありがとう
773Name_Not_Found:2009/08/04(火) 17:11:06 ID:???
>764
.textにmargin-bottomでできない? できないならブラウザとブラウザのバージョンも
書かないとわからんよ。

>WebDesignテーブルの下と角丸ボックスの黒の余白をもう少し開けたいです。
ここは角丸ボックスにpadding-bottomでもいくはず。
774Name_Not_Found:2009/08/04(火) 19:14:42 ID:???
初めまして、whocaresのチャットについて質問させて下さい。板違いでしたら申し訳無いですが誘導お願いします。

チャットの入室人数を画像表示する機能(?)が元々サーバーさんに有るのですが、あの表示を文字にて表示するにはどうすれば良いのでしょうか?
試行錯誤してみたのですが、PCからは表示できても携帯からだとunsupportedと表示されてしまいます。
ご存知の方がいらっしゃいましたらぜひ教えてくださいませ。
775Name_Not_Found:2009/08/04(火) 20:51:31 ID:???
whocaresというのを知りませんが、
動作はおそらくはcgiかphpでは?

だとしたらどちかの質問スレがよいのでは、と思います
776Name_Not_Found:2009/08/04(火) 21:01:42 ID:???
>>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さんの言う書き方で個別に指定してもいい

http://kissho.xii.jp/1/src/1jyou86715.zip いじったファイルだけうpした

表示にいらん時間がかかるし、あまり意味のないJavaスクリプトは使わない方がいいと思うなぁ
せめて使う使わないを閲覧者が選択出来ればいいんだけどね。これじゃあtarget属性が廃止された意味がなくなる
それにXHTMLがどういう構造になってるかわからなくならない?
個人的意見だから気にしなくていいけどね

XHTMLとCSSの辞典になるようなサイトはブックマークしてる?
まだ見つけてないなら、ググってね
777759: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の辞典
とほほをブックマーク入れてます。

今回は解説までありがとうございます。
基本の参考書だけじゃダメっすね。
上級者が作ったのを、いじって調べていくと覚えやすいっす
778Name_Not_Found:2009/08/04(火) 23:23:26 ID:???
頭悪すぎて不憫に思えてくる
779Name_Not_Found:2009/08/04(火) 23:30:45 ID:???
どこから突っ込めばいいのか・・
780Name_Not_Found:2009/08/04(火) 23:44:43 ID:aNlymEDd
自分で学ぼうという姿勢が感じられない。
初心者スレだから言っちゃいけないのかもだけど、少しは自分で調べればいいのにと思う。ググればこの程度のことはいくらでも出てくる。
781Name_Not_Found:2009/08/04(火) 23:50:50 ID:???
>>777
.text{margin:10px auto;}
が判らないなら margin の文法を調べてみればいいんじゃないのか。
782Name_Not_Found:2009/08/04(火) 23:54:08 ID:???
口で言うならともかく文字で「っす」ってもはや池沼レベルだろ
783Name_Not_Found:2009/08/04(火) 23:56:29 ID:???
>>777
わからないことがあったら、まずW3Gで調べるようにしてみればどうか
とほほって、節子それXHTML1.1やない。HTML4.01やないかい

>>782
口で っす とか言われたら引くわ。文字もだけど
784Name_Not_Found:2009/08/04(火) 23:58:53 ID:???
何という釣り堀状態。

ボックス三種の神器 margin、padding、borderの挙動が分かってくると大分楽になる。
そして慣れてきた頃にfloatでもがき苦しむのがオススメのコース。
785759:2009/08/05(水) 00:20:09 ID:???
私のせいで荒れてますね。
申し訳ないです。


>>780
自分なりにがんばってるつもりなんですけどね…

>>783
とほほじゃダメなんですかorz

>>784
ボックス三種の神器 margin、padding、borderをまずは覚えたらよろしいんですね。

ちょっと頭冷やしてきます。
786Name_Not_Found:2009/08/05(水) 00:39:42 ID:???
がんばってる(笑)おんぶに抱っこで調子乗り過ぎだろ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 ★コンテンツ
787Name_Not_Found:2009/08/05(水) 00:52:55 ID:???
とほほ見てるんだから事細かに書くより、どこを調べるかとかどう試すかとかを言った方が早くね?
788Name_Not_Found:2009/08/05(水) 01:00:24 ID:???
ファイル名:1.html
内容:<href="2.html"><img src="a/1.jpg"border="0">

こんなファイルの1.htmlと2.htmlと1.jpgの部分の数字を1づつ増やしてどんどんファイルを作ってくれる都合のいいソフトはないでしょうか。

ちなみに私はhtml無知です。
789Name_Not_Found:2009/08/05(水) 01:02:03 ID:???
IEのバグのためにそこまでぐちゃぐちゃにしなくても、if IEで適当に対処してやればいいんじゃないの
790Name_Not_Found:2009/08/05(水) 01:02:46 ID:???
>>788
Excel
791Name_Not_Found:2009/08/05(水) 01:05:07 ID:???
perlでもphpでも
792Name_Not_Found:2009/08/05(水) 01:06:37 ID:???
>>790
即答ありがとうございます。
とりあえずなんかしてみます。なにすればいいのか分かんないけど。
793759:2009/08/05(水) 01:13:23 ID:???
>>786
先生かな?
事細かに説明ありがとう

私も甘えすぎましたね。
もうここで質問しないようにがんばっていきます
794Name_Not_Found:2009/08/05(水) 01:19:28 ID:???
同人誌転載サイトみたいなページだなww
795Name_Not_Found:2009/08/05(水) 02:05:50 ID:???
いやいやw
普通の絵やイラスト等自分の描いた作品を載せるサイトです。

知人いわくデザインがありきたりすぎると言われるけど
やっぱり微妙ですかねw
796Name_Not_Found:2009/08/05(水) 02:13:07 ID:???
シンプルがいいと思うけどね
スクリプト入れてぐちゃぐちゃになった感じがするね
どんな動作になってるか把握できてないでしょ
Operaとかでも描写確認してる?
797Name_Not_Found:2009/08/05(水) 10:51:36 ID:???
なるほど。
Operaってブラウザ初めて聞きましたよ
Opera使ったほうがいいのですか?
798Name_Not_Found:2009/08/05(水) 11:52:57 ID:???
基本的に、IE6か7〜・Firefox・オペラ・サファリあたりは表示確認しといたほうがいい。
IEはIETester使えば便利
799Name_Not_Found:2009/08/05(水) 12:36:10 ID:???
IE6か7〜・Firefox・オペラ・サファリ
 ↓
IE6・7〜・Firefox・オペラ・サファリ  だよな

Operaは今のところもっともWeb標準に準拠したブラウザ
Operaだとimgのa枠線とか表示されないみたいだから、表示するなら指定しないといかんね
あとIEは枠線表示されるみたいだけど、Firefoxみたいにa:hoverの色が適用されたりはしないな。まあそもそも文字じゃないから
共通の表示にするなら、線を消すか、a imgにborderを指定した上で、a:hover img等にそれぞれborderプロパティで色を変えるとか
800Name_Not_Found:2009/08/05(水) 12:40:04 ID:???
サファリってマックじゃないですか
私マックじゃなくウィンドウズですけど大丈夫かな
Firefoxで確認したらIEと少し違うのでビックリしました

皆さんは各種色々なブラウザインストしてるのですかね
801Name_Not_Found:2009/08/05(水) 12:48:57 ID:???
にじんだ文字が好きでWindows版Safariを使ってる人もいる。なんか不当にAcid3に合格させたとかで評判悪いけど
まあ他の3つとレンダリングエンジンが違うから、確認しておくに越したことはない

IEは最新版でさえ描写が貧弱だから、メインで使うのはやめたほうがいい
http://az-store.nrym.org/archive/mynotes/misc/selectors
ここ見るとよくわかるけど、IE6はもはや論外。でもいまだにサポートが続いてるので、IE6でも表示確認はしたほうがいい
802Name_Not_Found:2009/08/05(水) 16:58:40 ID:pcD/QGEP
IEベースで作ったらOperaでは変になるし
Cssはむずかしいわ
803Name_Not_Found:2009/08/05(水) 17:04:54 ID:???
メインブラウザは何を使用してる?
804Name_Not_Found:2009/08/05(水) 17:16:40 ID:???
Firefoxだな拡張だけで広告ブロック、FTP、開発ツールにダウンローダも使えるから
805Name_Not_Found:2009/08/05(水) 21:56:53 ID:???
Firefoxだな猫のスキンがあるから
806Name_Not_Found:2009/08/05(水) 22:41:01 ID:???
シェアを理由にIE使ってる。6だが。
807Name_Not_Found:2009/08/05(水) 22:46:11 ID:???
IE6使ってるヤツは氏ねばいい
808Name_Not_Found:2009/08/05(水) 22:53:12 ID:???
IE6にすら対応させられないヤツは氏ねばいい
809Name_Not_Found:2009/08/05(水) 23:06:22 ID:???
IE6にすらって、IE6以下があるのか?
IE7はIE6に比べるとだけど、随分ましだぞ

あと>>807はIE6の面倒を見つつ、愚痴を言ってるのだと思われ
810Name_Not_Found:2009/08/05(水) 23:07:10 ID:???
IE5.5に対応させようとしたけど逆にスパゲッティになって萎えた
811Name_Not_Found:2009/08/05(水) 23:15:27 ID:???
それIETesterには入ってるけど、セキュリティアップデート終了してるよ
ネットに接続するのに使ってはいけないブラウザなんだから、むしろ対応なんかさせちゃ駄目だ
812Name_Not_Found:2009/08/05(水) 23:54:46 ID:???
しかしwin95ユーザがいまだに存在してるのも事実なんだよなぁ
まぁまともな記述してればほんのちょっとの手直しで対応できるんだから大した手間でもないだろう
それすらできないやつはoperaにでも絞ってればいいんじゃね
813Name_Not_Found:2009/08/06(木) 00:09:27 ID:???
セキュリティアップデートが終了したOSを使うとか……
てかそれってアクセス解析データから言ってるんなら、ロボットとかのUA偽造じゃね
814Name_Not_Found:2009/08/06(木) 00:11:04 ID:1sjo8MWG
アクセス解析以外なら仕事で寄った企業2件と県立高校の図書室。三つとも今年だ
815Name_Not_Found:2009/08/06(木) 00:17:21 ID:???
あるある。去年まで通ってた学校のPCの一部がそうだった。酷い管理体制だよな
ま、ネットにつないでなければいいと思うけどね
と言ってもFDとか媒介してくる可能性があるから、サポート切れのOSに突っ込む前のメディアは
サポートが終了してないOSとセキュリティソフトで厳重にチェックする必要があるだろうけど
816Name_Not_Found:2009/08/06(木) 00:31:07 ID:???
アクセス解析(Google Analytics)したら10万セッションのうち25だけIE5.5以下だった
817Name_Not_Found:2009/08/06(木) 01:24:08 ID:???
まあセキュリティアップデートが終了したとか知らなかったり
理解出来なかったりで古い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>
ぶっちゃけこんな感じでもいいんじゃない?
818Name_Not_Found:2009/08/06(木) 01:37:08 ID:???
<!--[if IE 5]>
<META http-equiv="refresh" CONTENT="1;URL=http://goggle.com/">
<![endif]-->
819Name_Not_Found:2009/08/06(木) 01:46:13 ID:???
>>817
アップデートすらした事無いというPC初心者も多い・・・
820Name_Not_Found:2009/08/06(木) 09:42:00 ID:JFuYFxwT
IEは、7と8に対応してれば十分じゃない?
あとは全部、「対応してません」ってページに飛ばせばいい
821Name_Not_Found:2009/08/06(木) 11:39:03 ID:???
firefoxが無駄にシェア伸ばしたのが原因だな
822Name_Not_Found:2009/08/06(木) 12:11:12 ID:???
IE6以下の対応に尽力するのは
刑務所の福祉に尽力するのと同じ
823Name_Not_Found:2009/08/06(木) 13:07:14 ID:???
CSS初心者です。基本的なことですが教えてください。

デザイン上、ヘッダ&フッタが上下にある横分断タイプのデザインではなく、
左側エリアにナビが上下貫いているデザインで、
ヘッダ&フッタは右側コンテンツエリアに入る縦分断タイプのデザインがあります。

XHTMLの記述で要素をマークアップする際に、左側ナビエリアから書いてしまうと
ヘッダ要素が後ろに来てしまうけれど、それは避けて
理想的なXHTMLになるように、ヘッダ要素を最上部に記述したい。

こういう場合、普通にヘッダ→メニューの順番で記述して
ヘッダの左マージンを調整して右にずらし、
メニューの上マージンをマイナス値にして上にずらすだけでOKでしょうか?
824Name_Not_Found:2009/08/06(木) 13:27:49 ID:???
>>823
どういう順番で書きたいのかわからん
ヘッダ→メニュー(左側ナビ)→メインコンテンツ→フッタの順ってこと?
825Name_Not_Found:2009/08/06(木) 13:34:44 ID:???
>>824
そうです。
それが一番、論理的で理想的な順番だろうと思ったので。
そんなこと重要じゃないですか?
826Name_Not_Found:2009/08/06(木) 13:37:34 ID:???
>>824
つづきです。
XHTML+CSSの本を読んだら
見た目の順序とソースコードの記述順序は切り離して
重要度や先に記述するべき要素を判断するべきってあったので。
827Name_Not_Found:2009/08/06(木) 14:46:52 ID:???
「IE6はもういらない」――Web企業が撲滅キャンペーン
IE6への対応が負担になっていることから、Web企業がIE6ユーザーをなくすためのキャンペーンを立ち上げた。
2009年08月06日 11時21分 更新
ttp://www.itmedia.co.jp/news/articles/0908/06/news031.html
828Name_Not_Found:2009/08/06(木) 15:40:33 ID:JFuYFxwT
>>826
重要度が高い情報を前にもってくるのは
SEO対策です。

google等のクローラーは
前からソースを前から呼んで重要度を判断しているので
出来るだけ前のほうにキーワードを入れたほうが
SEOに有利になるって理屈です。

ただ、あまり神経質になる必要もないと思います。
大手ポータルのソースを見ても
かなり乱雑なところも多いですしね
829Name_Not_Found:2009/08/06(木) 16:01:50 ID:???
>>827
>IE6へのアップグレードを促すコード

IE6対応を打ち切るためのIE6対応とな
830Name_Not_Found:2009/08/06(木) 16:43:05 ID:???
>>829
どこにも ”IE6へのアップグレードを促すコード” なんて書いてないんだが
831Name_Not_Found:2009/08/06(木) 17:53:44 ID:???
IE6は確かにcssへの対応が独特wだけど
これに対応させて、どのブラウザ・どのバージョンでも
均一に見られるようにコンテンツを作る

 これがわしらプロのwebデザなんですけどね
832Name_Not_Found:2009/08/06(木) 17:56:29 ID:???
>>831
IEへの対応を打ち切って、軽いページを作るのがプロなんじゃね?
833Name_Not_Found:2009/08/06(木) 18:35:27 ID:???
何のプロ?
834Name_Not_Found:2009/08/06(木) 18:41:33 ID:???
さあ?
835Name_Not_Found:2009/08/06(木) 18:49:01 ID:JFuYFxwT
そこでテーブルレイアウトの出番です。
836Name_Not_Found:2009/08/06(木) 18:58:23 ID:???
WEBの制作委託受けてると現存するブラウザ全部に対応させてないと文句来ることあるしなぁ
まあよっぽど汚い書き方してなければIEくらい別に苦でもないだろうけど
837Name_Not_Found:2009/08/06(木) 19:03:11 ID:???
疑似クラスとかはどうすんの?
838Name_Not_Found:2009/08/06(木) 19:13:35 ID:???
ブラウザ変えてガラリと崩れそうなアバンギャルドなページは商業には貢献しない
これクリ知識な
839Name_Not_Found:2009/08/06(木) 19:25:25 ID:???
>>837
:hoverは使う必要がない。別にCSSだけでもポップアップメニューは作れるからそれの応用
:before,:afterもあんまり必要性はないだろ。clearfixくらいしか思いつかね
擬似クラスは便利だけど無くても普通のクラスで十分代用できるし
840823=826:2009/08/07(金) 07:33:43 ID:???
>>828
レス遅くなってすみません。
今までテーブルレイアウト一辺倒で見た目ばかり重視していいたので
かっちりCSSとXHTMLの基礎を身につけたくて
がちがち100点満点の記述方法を学んでみたいのですが。
まあそれでいったら、そもそもデザインの時点で
縦分割は論理的にいけてないわけですしね。。
どうもありがとうございました。
841Name_Not_Found:2009/08/07(金) 08:00:36 ID:???
もうひとつ質問です。

縦に連なるメニューで、第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>タグごとにクラス指定をするしかないでしょうか?
842Name_Not_Found:2009/08/07(金) 10:26:19 ID:zpyFejP6
>>841
上位タグの設定は下位タグに引き継がれますんで
基本的にはそうするしかないのでは?

ちょっと質問がいまいち理解できないので
適当な回答になってしまいますが
843Name_Not_Found:2009/08/07(金) 11:04:22 ID:???
>>841
2階層までしかないように見えるが、とりあえず子供セレクタ(要素 > 要素)使えばいいんじゃね?
844842:2009/08/07(金) 16:28:53 ID:???
どうもありがとうございます。
>>843
あ、すみません。第2階層といっているのは
メニューからのリンクで、メニューのページを第1階層と見なした場合のことです。
子供セレクタ使えばターゲット限定できるんですね?
やってみます。
845Name_Not_Found:2009/08/07(金) 19:51:16 ID:???
先輩方、どうかご教授を。スレ違いだったら申し訳ない。

<object>タグの中身が全て読み込まれた時にしたい処理があるのだけれども、onLoadで拾ってくれないんです。
<object>の中で何をしてるかと言いますと、外部csvをデータバインドでobjectに突っ込んで
これをJavaScript側で受け取って、と言う事をしようとしています。

どうすれば良いのでしょうか。
846Name_Not_Found:2009/08/07(金) 20:03:40 ID:???
>>844
子セレクタは全てのブラウザで使えるわけじゃないから止めた方がいい。↓ならたぶんできる
div li {/*第二階層*/
margin-left: 10px;
background: #ccc;
}
div li li {/*第三階層*/
margin-left: 20px;
background: #999;
}

>>845
どう考えてもJSスレだろ。HTML側だけを変えるとしてもJSスレの方が適してる
847845:2009/08/07(金) 20:26:56 ID:???
>>846
おk把握、行ってきます。ありがとう。
848Name_Not_Found:2009/08/07(金) 21:04:16 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>

何か問題ありますでしょうか?

849Name_Not_Found:2009/08/07(金) 21:14:23 ID:???
>>848
コメント閉め忘れてるぞ
あとstyle要素内にコメント書くな
850Name_Not_Found:2009/08/07(金) 21:46:55 ID:???
div.imgwakuの内部のimg以降にお前のいう「画像以下」があるのならoverflow-y: hidden;が原因。これは正常な動作
div.imgwakuの外に「画像以下」があるのなら他のソースも載せろ
851Name_Not_Found:2009/08/07(金) 23:42:00 ID:???
>>849-850
お騒がせしました
問題なかったです
コメントアウト忘れてただけでした
852Name_Not_Found:2009/08/08(土) 16:49:33 ID:???
初心者です。他のスレにも書かせてもらったのですが・・・
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ではきちんと表示されず、火狐だとちゃんと表示されます。
何が問題なのでしょうか?また、多少無理矢理でも良いので解決方法を教えていただけると助かります。
853Name_Not_Found:2009/08/08(土) 17:44:16 ID:???
bodyに背景色なりつけてみれば分かる
854Name_Not_Found:2009/08/08(土) 17:58:03 ID:???
>>852
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> ←なんだこれ。HTML4.0 Strictだぞ。こんなのもう存在してない
DTDのアドレス入れてないからIEが変な解釈してるだけだろ。うちの環境だと何の問題もないぞ
てか何がしたいの?
855Name_Not_Found:2009/08/08(土) 17:58:11 ID:???
マルチポスト(同じ質問を複数のスレッドに書き込むこと)をしないことが、脱初心者への第一歩。

>>852
他のスレこと「/* CSS・スタイルシート質問スレ 上級者用【71th】」の658に、答えを書いてくれた人がいる。
http://pc11.2ch.net/test/read.cgi/hp/1205680031/658
856Name_Not_Found:2009/08/08(土) 18:16:34 ID:???
マルチはほんと氏ねばいい
857Name_Not_Found:2009/08/09(日) 13:54:43 ID:???
質問です。

今までサイトの製作はDWで1から作ってきたのですが、
「photoshopで組んだものをDWに持ってくるのが普通」
と言われました。

PSでスライスした画像とhtmlをweb用に保存→
DWでHTMLを呼び出すということだと思ったのですが、合ってますか?
これは「普通」のやり方なんですか?

ネットではソフトをまたいだ講座が見つからず、こちらでお尋ねします。
よろしくお願いします。
858Name_Not_Found:2009/08/09(日) 13:58:52 ID:???
>>857
おもしろいなw
859Name_Not_Found:2009/08/09(日) 14:14:45 ID:???
発言者が「組んだ」で何を意味しているかわからないので
どう答えていいのやら。

>PSでスライスした画像とhtmlをweb用に保存→
>DWでHTMLを呼び出すということだと思ったのですが、合ってますか?
前にいたWEB制作会社では、
このやり方でやっているデザイナーは皆無だった。
photoshopにHTMLまでは吐き出させない。

>「photoshopで組んだものをDWに持ってくるのが普通」
「組んだ」というのがデザインしたってことなら、この方法をとってた。
photoshop(もしくはイラレ)で全体のデザインを作ってから
スライスして画像素材を作成し、DWでHTML部分を作る。

860Name_Not_Found:2009/08/09(日) 14:22:19 ID:???
>>859
横から悪いが、Photoshopでスライスをまとめて保存するときに、
HTMLで吐き出してくれる機能あるよ。
小汚いHTMLだけどw
861Name_Not_Found:2009/08/09(日) 14:24:29 ID:???
デザイナーが吐き出したそれをコツコツ修正するのがこの板の住人です
862Name_Not_Found:2009/08/09(日) 14:30:10 ID:???
そもそも、「組む」ってのをPSに使うの聞いたことないわ
863Name_Not_Found:2009/08/09(日) 14:30:31 ID:???
ねえわ
修正しようがないし、一から作り直すだろ
864Name_Not_Found:2009/08/09(日) 14:51:56 ID:???
>>857
そういう作り方してるヤツも知ってるが、
一手間も二手間も行程が増えてるせいで仕事遅いわ。
865Name_Not_Found:2009/08/09(日) 15:20:32 ID:???
ナビゲーションを画像に置き換えつつ音声ブラウザで読めるようにしたいんだけど、
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>
866Name_Not_Found:2009/08/09(日) 15:31:43 ID:???
>>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);}
867Name_Not_Found:2009/08/09(日) 15:35:27 ID:???
>>865
なぜ「text-indent:-9999pxとfont-size:1pxで消す」のを除外するのか
理由があるのか?

理由によっても手段は違うだろう
868865:2009/08/09(日) 15:48:52 ID:???
>>867
携帯端末でCSS適用しても画像表示はしてない場合だと見えなくなるから避けたいなと
音声ブラウザがdisplay: none読んでくれりゃシンプルで良いんだけどね
869Name_Not_Found:2009/08/09(日) 15:57:12 ID:???
positionとz-indexで他の要素の下に隠せば?マイナス指定もできるし何処にでも動かせる
870Name_Not_Found:2009/08/09(日) 15:58:46 ID:???
a span {
filter: alpha(opacity=0);
opacity: 0;
}
音声ブラウザで読めるかは知らんけど
871Name_Not_Found:2009/08/09(日) 17:02:30 ID:???
>photoshopで組んだ
これは単なるモックアップじゃね
872Name_Not_Found:2009/08/09(日) 20:08:51 ID:???
メディアタイプというものがあってだな
873Name_Not_Found:2009/08/09(日) 23:26:11 ID:???
>>857です。
みなさんご意見ありがとうございました。
どうも不明瞭な点が多いので明日に詳細をきいてみます。
874Name_Not_Found:2009/08/09(日) 23:27:51 ID:???
>>873
出来れば報告希望
875Name_Not_Found:2009/08/10(月) 13:16:34 ID:Qu7q7BsW
てすと
876Name_Not_Found:2009/08/10(月) 17:06:32 ID:???
font-size1が最善の方法だろ

初心者に余計なこと教えるなよ(怒)
877Name_Not_Found:2009/08/10(月) 17:31:32 ID:???
なにそれ。単位ついてないのは、IEのみでpxとして解釈されるだけだぞ
878Name_Not_Found:2009/08/10(月) 17:39:53 ID:???
>>865を理解できるまで読めば?特に2行目
879Name_Not_Found:2009/08/10(月) 18:19:29 ID:???
単位付いてなかったらemだっけ
880Name_Not_Found:2009/08/10(月) 18:36:27 ID:???
単位を付けないでいいのは0だけ。単位を付けないと無効。ただしIEは>>877
881Name_Not_Found:2009/08/10(月) 18:47:51 ID:???
そしてそれがマイクロスタンダードへ…
882Name_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という
ファイルをフォルダにはいれずに
おいています。どうかよろしくおねがいします。
883Name_Not_Found:2009/08/10(月) 19:12:03 ID:???
bodyの中が空だからじゃね?
884Name_Not_Found:2009/08/10(月) 19:12:45 ID:WIfdd3wy
bodyの中に文字などを入力しましてもまったく反応がなかったのですよ;w;
885Name_Not_Found:2009/08/10(月) 19:16:06 ID:???
だよなぁ。別にどこもおかしなところないし
使ってるブラウザとバージョンは何?
headの中に↓加えたらどうなる?
<style type="text/css">
body {background-color: blue}
</style>
886Name_Not_Found:2009/08/10(月) 19:24:24 ID:WIfdd3wy
885さんのようにやったら青くなりました・w・
でもできれば外部スタイルシートでやっていきたいのですが
改善策はありますかね><?
887Name_Not_Found:2009/08/10(月) 19:25:34 ID:WIfdd3wy
あとブラウザはIEとなってます
888Name_Not_Found:2009/08/10(月) 19:31:44 ID:???
・htmlファイルとcssファイルが同じディレクトリにない
・cssファイルの名前を間違えている
・cssファイルの内容がbody {background-color: blue}でない
↑のどれちかじゃない限り原因なんて分かりっこない
webフォルダごとzipで上げてくれ
889Name_Not_Found:2009/08/10(月) 19:39:16 ID:WIfdd3wy
webフォルダをzipで上げるにはどのような
作業をすればよろしいのでしょうか><;?
ちょっとそれがわからないです><;
890Name_Not_Found:2009/08/10(月) 19:43:53 ID:???
zipに圧縮して適当なうpロダでも使えばいいだろ
少しは自分の頭で考えて調べてみろよ
891Name_Not_Found:2009/08/10(月) 19:46:42 ID:???
まずは>>888の3つを一つずつ検証してみ
そのレベルだと、どうも1つめ臭い
892Name_Not_Found:2009/08/10(月) 19:56:20 ID:WIfdd3wy
同じディレクトリというのはどういうことでしょう?
webフォルダの中にフォルダは作らずに
そのまま両ファイルを置いているのですが・・・

あとうpロダっていうのはアップローダーですかね?
圧縮ファイルまではできたのですが。。。
893Name_Not_Found:2009/08/10(月) 20:06:42 ID:???
>>882
<link href="./livedoor.css" rel="stylesheet" type="text/css">

<link href="livedoor.css" rel="stylesheet" type="text/css">
894Name_Not_Found:2009/08/10(月) 20:11:18 ID:WIfdd3wy
893さんのようにやらせていただいても無理でした><;
895Name_Not_Found:2009/08/10(月) 20:17:42 ID:???
絶対ファイル名だろ。今のままだとお前以外に確認の使用がないんだからさっさとzip上げろよ
896Name_Not_Found:2009/08/10(月) 20:23:18 ID:???
うpはここでヨロ
http://kissho.xii.jp/1/
897Name_Not_Found:2009/08/10(月) 20:23:40 ID:???
ここに上げれ
http://www.dotup.org/
898897:2009/08/10(月) 20:24:07 ID:???
かぶった、すまん
899Name_Not_Found:2009/08/10(月) 20:25:03 ID:WIfdd3wy
今探しているのですがちょっと見つかりません;w;
オススメのサイトがありましたら
教えていただけないでしょうか?
900Name_Not_Found:2009/08/10(月) 20:27:24 ID:WIfdd3wy
ありがとうございます。
897さんのほうであげさせてもらいました^^
901Name_Not_Found:2009/08/10(月) 20:31:27 ID:???
{\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
902Name_Not_Found:2009/08/10(月) 20:34:12 ID:WIfdd3wy
えΣ・w・;そんな風になってるんですか><?
cssファイルはDWがないため
アクセサリのワードパッドでlivedoor.cssをつくってから
body {background-color: blue}
のように記述したのですがまずいでしょうか><?
903Name_Not_Found:2009/08/10(月) 20:36:02 ID:???
WordPadで作ったことないからわからんけど、メモ帳で body {background-color: blue} を貼り付けて、
livedoor.cssという名にして保存してみ
904Name_Not_Found:2009/08/10(月) 20:36:15 ID:???
顔文字うぜぇ そのくらい自分で確かめとけよ
905Name_Not_Found:2009/08/10(月) 20:39:21 ID:???
WordPadwwwwwwwww
906Name_Not_Found:2009/08/10(月) 20:39:46 ID:WIfdd3wy
メモ帳ってどのパソコンでも入ってますよね??
私の奴ワードパッドしか入っていないのですが;
907Name_Not_Found:2009/08/10(月) 20:40:31 ID:???
>>906
ファイル名を指定して実行 -> notepad
908Name_Not_Found:2009/08/10(月) 20:44:53 ID:WIfdd3wy
メモ帳で作りましたらうまくいきました><
長々とありがとうございました^^
909Name_Not_Found:2009/08/10(月) 21:32:10 ID:Qu7q7BsW
>>908
ワードパッドはデフォルト保存形式がリッチテキスト(.rtf)だから
メモ帳を使うかフリーのテキスト編集ソフトを使うべき。
もちろんワードパッドでも、保存するときにプレーンなテキスト形式(.txt)にすれば問題ない

あと文字コードはUTF-8にそろえといたほうがいい
910Name_Not_Found:2009/08/10(月) 21:45:45 ID:???
もっと言えばTeraPadかNoEditorをインストールして、htmlファイル右クリック→編集 で出てくるソフトをそれに変更しておくといい
911Name_Not_Found:2009/08/10(月) 21:58:30 ID:???
Macだとmiか
でも、WinでEmEditor使っちゃうと、なんとなく使い勝手が悪く思えてくるんだよな
912Name_Not_Found:2009/08/10(月) 22:07:26 ID:???
ez-htmlとかも結構いいんじゃないかな
913Name_Not_Found:2009/08/10(月) 22:16:29 ID:???
Unicode文字?を扱えるのはEmEditorしかないな。有料版は滅茶苦茶高いけど
914913:2009/08/10(月) 22:17:18 ID:???
あ、メモ帳でも扱えるけどね
915Name_Not_Found:2009/08/10(月) 22:39:09 ID:???
ez-htmlもいけるな。でもunicodeなんて使う機会ないよなぁ
916Name_Not_Found:2009/08/11(火) 01:02:12 ID:Y2pkzsKz
個人サイトを作るくらいならSJISにしとけば
windowsやmacで扱いやすいし、それで十分だと思う。

ただ長期的にはunicodeに統一される流れにあるので
UTF-8で作っておけば間違いないことは事実。

正直、今のブラウザはEUCでもSJISでもJISでも
自動で切り替えてくれるのでそんなに気にする必要はないよ。

ただ、phpやperl等のサーバーサイドのスクリプト言語を使う場合は
文字コードを意識しないと文字化けが発生するから注意すべき
917Name_Not_Found:2009/08/11(火) 01:29:07 ID:???
sql、php、html、js、css全部UTF-8で統一してる
統一しないと文字変換の時にインジェクションされるしね
918Name_Not_Found:2009/08/11(火) 03:31:59 ID:???
携帯サイトはまだSJISだよ…
919Name_Not_Found:2009/08/11(火) 07:01:09 ID:???
携帯用サイトってUTF-8使っちゃ駄目なん?
920Name_Not_Found:2009/08/11(火) 13:34:46 ID:???
携帯サイトはSJISが無難。
古いタイプだとSJIS以外は火対応だったりする。
921Name_Not_Found:2009/08/11(火) 14:00:04 ID:???
なるほど。hr要素やlink要素も未対応の携帯ブラウザがあったり?
922Name_Not_Found:2009/08/11(火) 14:01:03 ID:Y2pkzsKz
>>921
フルブラウザなら当然搭載してるけど
携帯ブラウザだとちょっと変に見えるときあるね
923Name_Not_Found:2009/08/11(火) 14:07:24 ID:???
CSS外部読み込みに対応してないブラウザは、さすがに現存してないよね?
924Name_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>の数と場所に間違いはありません。
素人ですいません・・・。
是非宜しくお願い致します。
925Name_Not_Found:2009/08/11(火) 15:48:59 ID:???
>>924
ソースに全角スペースは書くなとあれほど
書いていいのはタブ文字と半角スペースだ
926Name_Not_Found:2009/08/11(火) 16:16:02 ID:???
>>924
pやh1〜h5などのmarginをすべて0にしてみれば
927Name_Not_Found:2009/08/11(火) 20:23:31 ID:sR4r4/eL
質問です
携帯サイトで、画面両側に全角一文字分スペース空くようにしたいのですが、タグはどれが一番いいですか?
2〜3年前の機種でも見れるタグ希望です
928Name_Not_Found:2009/08/11(火) 20:44:14 ID:???
CSSファイル中に
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
の記述をしているのに文字コードがSHIFT_JISになってくれません。
考えられる原因はなんでしょうか?
929Name_Not_Found:2009/08/11(火) 20:46:36 ID:???
HTTPヘッダ見ろ
930Name_Not_Found:2009/08/11(火) 20:46:48 ID:???
CSSをテキストエディタで開いて、Shift_JISに変換
931Name_Not_Found:2009/08/11(火) 21:14:53 ID:???
>>927
body{margin-left:1em;margin-right:1em;}
932Name_Not_Found:2009/08/11(火) 21:41:36 ID:sR4r4/eL
>>931
さっそくありがとうございます!使ってみたいところですが、
このタグは見れないメーカーとかはありますでしょうか?何回もすみません。
933Name_Not_Found:2009/08/11(火) 21:44:31 ID:???
>>932
これはCSS。10年以上前に勧告されたプロパティ
まさか対応してないはずはないと思うけど、対応状況は具体的な機種名を言ってくれんとわからん
934Name_Not_Found:2009/08/11(火) 21:53:05 ID:sR4r4/eL
CSSですか!CSSはドコモ対応してないんですよね…。
CSSじゃないタグで似たようなのはないですか?
935Name_Not_Found:2009/08/11(火) 22:15:52 ID:???
ドコモはタグに直接style属性として書かないと駄目
<body style="margin:〜
936Name_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>

上記のような感じで書いていますが、リンクありの場合でも背景が表示されません。
リンクカラーやテキストの装飾は反映されます。何がいけないのか教えてください。
937Name_Not_Found:2009/08/11(火) 22:18:24 ID:???
>>935
マジでか!?  style要素も対応してないの?
まさかそんなブラウザが存在するとは……携帯サイト作りは大変だな
938Name_Not_Found:2009/08/11(火) 22:21:46 ID:???
auはフルブラウザじゃなくても疑似要素とか外部CSSとか普通に使えるのに
939Name_Not_Found:2009/08/11(火) 22:22:02 ID:???
>>936
<a>はインライン要素だから、背景を指定すると、その文字等の部分だけに背景がつく。
.abc aに、試しにbackground-colorを指定してみたらいいよ。
さらに言うと、「.abc a」は「aを内包する.abc」ではなくて、「.abcの中にあるa」の意味だよ。
940937:2009/08/11(火) 22:25:32 ID:???
あ、style要素も無効なのか
941Name_Not_Found:2009/08/11(火) 22:41:52 ID:sc/tQNRV
CSSを使って
見出しの最初の文字だけを装飾することは可能でしょうか?

よろしくお願いします
942Name_Not_Found:2009/08/11(火) 22:43:59 ID:???
:first-letter疑似要素使えばいい
943Name_Not_Found:2009/08/11(火) 22:55:47 ID:sc/tQNRV
>>942
解決しました

ありがとうございました
944936:2009/08/11(火) 23:52:53 ID:???
>>939
納得しました。
ありがとうございました。
945Name_Not_Found:2009/08/12(水) 00:11:33 ID:???
困り果てたので失礼します。

フレームページを作ってるんですが、縦スクロールがつくくらいページ内容が長くなると、
そのスクロール部分で何かが隠れてしまうらしく、横スクロールがついてしまいます。
横スクロールバーを動かさないと、align="right"で指定したdivが完全に出てきません。

普段から小窓にしていて自サイトは絶対横幅指定しないぞ!っという信念のもと
ページを作ってるんですが、どうすれば横バーが出ないようになるのでしょうか。
一体何が原因なんでしょう…。

スタイルシートoffでも横バーが出たので、スタイルシートが原因ではないのは確かです。
縦スクロールが出現すると横スクロールまで出る原因を教えてください。
946Name_Not_Found:2009/08/12(水) 00:12:47 ID:???
>>945
問題のページのソースを貼ってください
947Name_Not_Found:2009/08/12(水) 00:20:37 ID:???
>>945
>普段から小窓にしていて自サイトは絶対横幅指定しないぞ!っという信念のもと
「自サイトは絶対frame要素を使用しないぞ!っという信念」に切り替えたほうがいいよ
948Name_Not_Found:2009/08/12(水) 00:21:47 ID:???
>>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">
949Name_Not_Found:2009/08/12(水) 00:26:05 ID:???
<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
元々フレームなしのページだったんですが、
ページが増えてきて分類がわかりにくくなってしまったので
仕方なしに使っています。ごめんなさい…。
950945:2009/08/12(水) 00:36:01 ID:???
ごめんなさい、自己解決しました。

http://www.shoshinsha.com/pukiwiki/pukiwiki.php?%B2%A3%A5%B9%A5%AF%A5%ED%A1%BC%A5%EB%A5%D0%A1%BC%A4%AC%BD%D0%A4%C6%A4%B7%A4%DE%A4%A6
yahoo質問やgooばかり見ていて見逃していたようです。
お騒がせしました…。
951Name_Not_Found:2009/08/12(水) 03:00:51 ID:???
>>948
要出典
952928: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の設定が悪いのかもしれません。
どなたかお願いします。
953Name_Not_Found:2009/08/12(水) 13:06:46 ID:???
リクエストヘッダじゃなくてレスポンスヘッダな
IEだと無視するから関係ないけどFirefoxの場合レスポンスヘッダとファイルの文字コードに違いがあると化ける
954Name_Not_Found:2009/08/12(水) 15:09:43 ID:???
>>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つ両方の適用をさせるテクニックが再現できません。
原因を教えてください。
955Name_Not_Found:2009/08/12(水) 15:57:53 ID:???
>>954
CSSの基本であるセレクタを理解していないので勉強をした方がいい
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html
956Name_Not_Found:2009/08/12(水) 20:12:40 ID:???
一応教えてやると.abc .sub {}が間違ってる
.sub {}が正解。参考にしてる本もそうしてあるだろ?
class="abc sub"は.abc {}と.sub {}の両方を反映する

↓の場合は.abc .sub {}でいい
<td class="abc"><a class="sub">hoge</a></td>
あまり関係はないけど.abcをtd.abcに変えておくと他の要素でも同じクラス名で別のプロパティを指定できたりする
957Name_Not_Found:2009/08/12(水) 20:39:22 ID:hRul6WxB
セレクタのパターンこんなにあるんやね
参考になった
958Name_Not_Found:2009/08/12(水) 20:52:17 ID:???
いっぱいあるけどIE6のせいであまり使えない
959Name_Not_Found:2009/08/12(水) 20:58:45 ID:???
隣接セレクタさえあればidもclassも使わなくていいんだけどなぁ。メンテしづらいだけだけど
せめて:before,:afterさえ使えれば表現の幅が広がるのに
960954:2009/08/12(水) 21:41:00 ID:???
>>966
どうもありがとうございます。
できました。

しかし参考にしている本(の付録のソース)では何度確かめても
確実にabc .sub {}となっているように思います。。
なんでだろ?? たぶん何か見逃しているのかも。
お陰でだんだん理解できてきました。
961Name_Not_Found:2009/08/12(水) 21:43:13 ID:???
>>960
abc ,sub じゃねえの?
962Name_Not_Found:2009/08/12(水) 22:07:05 ID:???
>>960
セレクタ理解してたらそんな書き方しないからさ…
963Name_Not_Found:2009/08/12(水) 22:23:32 ID:???
>>961
.abc, .sub だろw
うそ教えんな
964960:2009/08/12(水) 23:25:48 ID:???
× abc .sub {}
○ .abc .sub {}
でした。変ですね。。。
965Name_Not_Found:2009/08/12(水) 23:40:06 ID:???
>>963の .abc,.sub  はclass「abc」とclass「sub」へ同じ指定をする記述
>>964の .abc .sub はclass「abc」の要素内にあるclass「sub」への指定
        .abc.sub  はclass「abc」とclass「sub」の両方が設定された要素への指定 ね
966Name_Not_Found:2009/08/13(木) 00:04:18 ID:???
>>965
三つ目はIE7未満では上手く動作しないから人に教えるのには向いてない
IE7未満の場合はCSS側の複数のセレクタのうち最後のセレクタ、つまり.subしか見ないから
<td class="sub"></td>でも反映されてしまう。まぁ>>954のケースなら問題ないわけだけど
ちなみにjQueryを利用すれば上記のバグを解消できる。加えて隣接セレクタなんかも利用できるようになるから便利
967Name_Not_Found:2009/08/13(木) 00:21:04 ID:???
td[class="abc sub"]
968Name_Not_Found:2009/08/13(木) 00:59:25 ID:???
チラシ風のデザインをHTML化してくれ。
と頼まれて、PhotoShopファイルをもらったんだが、
どうスライスすればいいのか悩む。

チラシ風のデザインを残したい。
というのだが、とりあえずテキスト化したいところを
テキストできるようにスライスすればいいのかな?

でっかい写真画像があったり、角度がついた斜めの写真画像を沢山つかっているのね。
まさにWEBを無視した紙デザイン!

そこでCSSで絶対配置できるように(通常のウェブページと制作するのと同じように)
丁寧にスライスしていくんだけど。

「スライスすることに意味あるの?」
「一枚画像でいいんじゃね?(もちろんSEO対策を取れた上で)」

とか思うようになってきた。

いわゆる大企業の、デザイン化されたページをみても、
堂々と、写真画像をど真ん中でスッパリとぶった切っているのを
見つけたりもする。
また、デザイン構成を無視したスライスを見たりもする。

正しいスライスって良くわからなくなってきた。
悩むなあ。同じようなこと考えている人いない?
969Name_Not_Found:2009/08/13(木) 01:05:44 ID:???
そんな重いページは作らない
970Name_Not_Found:2009/08/13(木) 01:07:31 ID:???
いやあ。重いっていってもFlashとか使うより遥かに軽いよ。。
971Name_Not_Found:2009/08/13(木) 01:16:10 ID:???
>>968
スライスはたいして難しくないっしょー

手抜きしたかったら
 チラシをスキャン
 イラレでpdf保存
 リンク先をチラシ.pdf
これでいくないですか
972968:2009/08/13(木) 01:24:16 ID:???
pdf化は、それはさすがにwww

今考えているのは、
@丹念に構成要素ごとスライスしてCSSで必至に再構築

Aテキスト以外を抜いて大雑把にスライス分割。
(ページを3分割するぐらい。)
それらを背景画像にさせて、テキスト箇所を絶対配置させる。

B全部画像wwww。
973Name_Not_Found:2009/08/13(木) 01:25:51 ID:???
>>971
グーグル先生や読み上げブラウザが
それで文字を読み取ってくれるならそれでいい

>>968
そもそもスライスしろと言われたのか?
わからないなら「ここをどうしましょう」って聞いて
要望をもらうのが一番丁寧な対応だと思うよ。
974968:2009/08/13(木) 01:32:36 ID:???
相手は紙専門のデザイン会社。あんまりウェブには詳しくない。
だから、スライスの事とかHTMLの事とかは知らないようです。

「ここをどうしましょう?」という具体的な事じゃないけど。
こういうの受けたら、みんなどうするの?と訊いてみたいのです。
975Name_Not_Found:2009/08/13(木) 01:37:25 ID:???
元を見ないとわからん
976Name_Not_Found:2009/08/13(木) 01:42:20 ID:???
>>970
バーカ、Flash自体は重かないよ
でかいサイズの画像をまとめて埋め込むから重くなるだけ
無知なくせに知ったかすんなw
977Name_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;}
と記述しております。
978Name_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>
の右に画像が表示されてほしかったのですが
これはどのように改善したらよろしいでしょうか?
979968:2009/08/13(木) 01:49:38 ID:???
例えば、こんなスライスってあり?
http://www.toyotomiusa.com/
980968:2009/08/13(木) 02:00:35 ID:???
そりゃまあ。空のflashは軽いけど。
概して表現としてflash使わないといけないような、ページだと
swfファイルは普通に重いと思うが。
981Name_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>の上には行って
画像も右に表示されました。しかしだいぶ
リストの文と画像にすき間ができたのですが
これはなぜでしょうか?
982Name_Not_Found:2009/08/13(木) 02:03:56 ID:???
>>979
ないわ
983Name_Not_Found:2009/08/13(木) 02:04:09 ID:???
なしでしょw
切り取りが雑すぎなのと、htmlエラーそこまで出してたらヤバス
984Name_Not_Found:2009/08/13(木) 02:07:18 ID:???
>>981
main{width:500px;}だからだろ
985Name_Not_Found:2009/08/13(木) 02:11:48 ID:RtXsm89G
widthの方を少しイジってみて400pxにしてみました。
そしたら
<span class="footer"> 注目のワード:サマージャンボ K−1 時をかける少女 心霊スポット 伊藤美咲</span>
の行が1行で収まっていたものが2行になってしまいました。
これはしょうがないものなのでしょうか?できたら一行でおさめたいのですが。。。
986968:2009/08/13(木) 02:15:25 ID:???
ないよねwww。さすがに。
ま、htmlのエラーはちょっと無視させてもらって。


でもさ、スライスが雑なのはわかるんだけど。
それが、どんなペナルティになるのかな?(SEO的に?)

キチンと商品べつにスライスできたら、
どんな利点があるのかな?

それって、なんだか作成者の意地というか?良心というか?
プライドというか?

そんなものなのかな?
987Name_Not_Found:2009/08/13(木) 02:20:08 ID:???
>>986
スライスとかって、HTMLにする意味なくね?
988968:2009/08/13(木) 02:24:19 ID:???
そう!!
>HTMLにする意味なくね?

そこに行き着くwww。

昔はさ、スライスすることで画像のサイズを抑えるという
目的あったけど。今は昔ほど容量に気をつけなくてもよくなってきたから。
なおさら。

人は何故それをスライスするのか。。。と悩む。
989Name_Not_Found:2009/08/13(木) 02:30:23 ID:???
>>985
main{width:auto;}
あとclass="mainimage"alt="19歳なのにおじちゃんよばわり" がくっついてる
ちなみに知ってるかもしれないけど、画像を見ないときの代替コメントがaltで、ポップアップはtitleだからね
990968:2009/08/13(木) 02:34:46 ID:???
といろいろ愚痴を書き連ねたが。
基本は正しいHTML構文が書ければよい。そこに最大の目的を置くべきかと
今、思った。

その為に必要に応じてスライスしていくということかな。
スライスすべき画像の大きさに気を取られてたのかもしれん。
991Name_Not_Found:2009/08/13(木) 02:39:21 ID:RtXsm89G
はい。ありがとうございます。
widthのほうをautoにしてみたところ
3カラムでの右っかわが下にずれ落ちてしまいました。
これはfloatの指定が間違っているのでしょうか?
#main{float:left;}
#sidebar{float:left;}
#right{float:right;}
という風に指定しております。
992Name_Not_Found:2009/08/13(木) 09:04:55 ID:???
>>991
ソース貼れよ
993Name_Not_Found:2009/08/13(木) 09:21:03 ID:???
次スレテンプレ案

スレタイ:(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/
994Name_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の方のソースがこちらのほうになっています。
995Name_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を指定した方がいい
996Name_Not_Found:2009/08/13(木) 14:03:26 ID:???
>>974
専門用語を一般用語に言い換えて説明
曖昧な言葉に対し、「こういうことができるんですよ」とWebをみせて定義
「ここはお前に任せるわ」という言葉を引き出す
997Name_Not_Found:2009/08/13(木) 14:23:27 ID:???
スーパーのチラシなんかなら1枚絵でそのまま載せても
閲覧者はチラシを見にきてるんだからいいと思うけど、
印刷物のチラシをそのまま載せることに意味がない場合は
WEB用にコンテンツを作り直すのがベストというかマストだなあ。

スライスは、サーバーのレスポンスが悪い場合
ファイルの数だけリクエストが発生してストレスの元になるので
回線が太くなった今となっては諸刃の剣になりつつあると思う。
998Name_Not_Found:2009/08/13(木) 14:27:13 ID:???
1000なら、のりぴー不起訴
999968:2009/08/13(木) 14:42:54 ID:???
そっか。今は容量よりファイル数がネックになる事もあるよね。
yahooサイトとか、細かいポイント画像とかは全て1枚画像収めていて
いてそれをCSSで配置してるって聞いたことある。

細かいスライスは意味ないかもね。
1000Name_Not_Found:2009/08/13(木) 14:43:06 ID:???
次スレ立ててみます
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。