CSS初心者スレッド=1st=at HP
CSS初心者スレッド=1st= - 暇つぶし2ch450:Name_Not_Found
08/02/22 21:20:04
質問です。
とある事情でCSSでの指定はすべて
HTMLのタグに直接styleタグを用いて指定しているのですが
HTML5ではstyleタグは廃止されていると聞きました。

これからCSSをタグに記述するのは止めたほうがいいですか??

勿論、ヘッダーや外部リンクする方が良いのはわかってますが
それは出来ないので…;

なるべくCSS使わないようにしてますが
どうしても見た目いじりたい時があって、ちょっと悩んでるんです。

451:Name_Not_Found
08/02/22 22:09:54
HTML4.01で書いてりゃいいじゃん

452:Name_Not_Found
08/02/22 23:21:13
逆に聞くけど、5にする理由、必要性は?

453:Name_Not_Found
08/02/22 23:23:01
最新最高のスキルを身に付けた
出来るやつと世間から思われたいから

とかじゃないかい?w

454:Name_Not_Found
08/02/22 23:43:04
>>450
style要素(styleタグ)は廃止されていないよ。
URLリンク(www.w3.org)

style属性は廃止らしいので、インラインスタイルは使えない。HTML 5に移行
するつもりならstyle属性は使わないほうがいいけれど、そうでないのなら
自分のやりやすいようにすればいいんでは。

455:Name_Not_Found
08/02/23 00:04:37
>>443
動くみたいだけど?
ということはあるんじゃないの。442じゃないから知らんけど。

456:Name_Not_Found
08/02/23 00:46:05
>>454
ちょっと思ったんだけど、
style属性は廃止、font要素も廃止となると、
例えば2chのような掲示板で、投稿者が自由に文字の色を選べるようにしようとすると、どうすればいいんだろ。
#000000から#ffffffまですべての組み合わせの文字色を設定したCSSファイルとかいう、馬鹿げたものをつくるの?
あるいはそのつど、必要なだけ、style要素を生成して挿入するの?

と思ったらこんなものが
URLリンク(www.w3.org)

font要素にのみstyle属性を許すのか。
そもそもfont要素は、特に何か特別な意味づけをするわけでもないと。
うーん。WYSIWYGエディタ向けの仕様と書かれているけど、
文字色を自由に設定できる掲示板とかが、作られないはずはないよね。


457:Name_Not_Found
08/02/23 03:46:51
>>455
何を引っかけようとしてるのか知らないが、
試すまでもなく「絶対に動くわけがない」とはっきりしている。

なぜなら、ちょっとjsができればそんなプロパティは存在しないと誰でもわかるんだよ。
お前は知らないようだがな。バカが。

458:Name_Not_Found
08/02/23 06:23:33 Jj3FHczU
中央が可変で、左右が固定の3カラムリキッドにしたいです。
で、今のHTML・CSSは以下の通りです。
(長くてすみません。改行が多すぎるとの事でCSSの改行を省きました。)

DOCTYPE XHTML1.0 Strict URL有り
<body>
<div id="head"></div>
<div id="wrap"><div id="main_block"></div></div>
<div id="left_block"></div>
<div id="right_block"></div>
<div id="foot"></div>
</body>

#body { margin:0pt 2%; }
#head { margin:0pt 0pt 10px; padding:0.5em 0pt; }
#wrap { float:left; width:100%; }
#main_block { margin:0pt 250px; }
#left_block { margin-left:-100%; float:left; width:250px; }
#right_block { margin-left:-200px; float:left; width:200px; }
#foot { clear:both; }

としているのですが、Opera・IE7・FireFoxでは正しく表示され、
IE6でのみleft_blockの左端が切れて表示されています。
どこの記述が原因でしょうか。
ちなみにbodyのmarginをpaddingに変更してみたら、
IE6のみでleft_blockがブラウザの左端にくっついて表示されました。

次のサイトを参考にしました。
URLリンク(www.igoo.co.uk)
よろしくお願いします。

459:458
08/02/23 06:35:20 Jj3FHczU
>>458ですが、2点だけ修正です。すみません。
#body→body
#main_block { margin:0pt 250px; } →#main_block { margin:0 200px 0 250px; }

460:Name_Not_Found
08/02/23 06:54:32
>>458
IE6以下は、floatされた要素が親要素の左右に接している場合、
その接している方向のmarginが2倍になるバグあり(標準モードでも)
左右に接しているfloatしている要素はdisplay:inlineしとき

461:450
08/02/23 07:53:33
>>452,>>454
レスありがとうございます。

styleタグじゃなくて、style属性の間違いでした;すいません。
CSS使う場合はタグにstyle属性を用いて直接指定しています。

最高のスキル云々じゃなくて、
HTML4.01をいつまでも使い続けれるのであればそうしたいのですが
もしHTML5が出た事によって廃止とかになった場合非常に困るのです;
これから先廃止の可能性は無いのでしょうか?

462:458
08/02/23 08:05:19 Jj3FHczU
>>460
floatされているボックス3つにdisplay:inline;を指定するのを
7パターンやってみましたが、どれもバグを修正されませんでした。
参考にしたサイトのボックスにもdisplay:inline;が指定されていなかったのですが、
変わりに、bodyの直下に全体を囲うように<div id="all">が指定されているのを発見し、
それをつけてみたところ、バグが修正されました。

ということで自己解決しました。
どうもです。

463:Name_Not_Found
08/02/23 14:04:59
>>461
HTML3.2だっていまだに廃止されてない。HTML2は廃止されたけど。
そもそも、もうほとんど誰も使ってない、というような状況にならなければ廃止されない。

それに廃止されたからって、HTML2で書いたらいけない法律なんて存在しない。
廃止された後、新しく文書を書く場合にHTML2を使うことはオススメされなくなるだけ。

あと、廃止されればブラウザがHTML2のサポートをやめる理由になるが、
だがしかしHTML2をサポートをやめたブラウザなんて存在しない。
過去にHTML2で書かれて放置されている文書は未来永劫HTML2だから。
つまりサポートされなくなるなんてことは99.9%ありえない。

464:Name_Not_Found
08/02/23 21:36:06 hIbCj+gT
火狐はTEXT-ALIGN使えないのですか?
全くかかってないんですけど。

465:Name_Not_Found
08/02/23 21:47:22
>>464
問題なく使えますが、エスパーして助言申し上げますと、
margin: 0 auto;
こちらを挿入していただければと存じます。

466:Name_Not_Found
08/02/23 21:48:40
>>464
対応しているよ。タイプミスなどを確認すべし。
URLリンク(jigsaw.w3.org) でCSSの文法チェックも。

467:Name_Not_Found
08/02/23 21:49:06
すごいエスパーだな、その発想はなかったわ・・・

468:Name_Not_Found
08/02/23 21:49:32
こんなのがかっこつけて火狐なんて呼んでるのか

469:Name_Not_Found
08/02/23 23:59:27
IEでセンター配置させてて
もじら系で見ると、左に寄ってる
無様なサイトって結構多いよなw

 

470:450
08/02/24 13:15:30
>>463
そうなんですか。
安心しました。ありがとうございました。

471:Name_Not_Found
08/02/24 16:49:30
>>469
寄ってるだけならまだしも、おもいっきり重なっちゃったりしてるサイトとかあるぞw
IE を基準にサイト作ってるんだよな。間違った作り方のいい例が見れたと思えばw

472:Name_Not_Found
08/02/25 17:13:23
全ての半角文字(半角カナも含む) を等幅フォントにしたいんだけど
最もシンプルでクールな方法はなに?

473:Name_Not_Found
08/02/25 17:22:45
>>472
* { font-family: monospace }

474:Name_Not_Found
08/02/25 20:41:41 O6I/uQt4
<input type="button" /> や、
<input type="submit" /> に、
一括でスタイルを指定することはできないでしょうか?

475:Name_Not_Found
08/02/25 21:05:02
input { }

476:474
08/02/25 21:14:22
それだと、ボタン以外のtypeのinputにも適用されてしまいます。

477:Name_Not_Found
08/02/25 21:16:46
おまえは日本語の勉強が先だと思うが。
E[foo="bar"]

478:Name_Not_Found
08/02/25 21:20:12
>>473
それだと全角まで等幅になっちゃうけど

479:Name_Not_Found
08/02/25 21:28:10
質問者の日本語(ry

>>478
無理

480:Name_Not_Found
08/02/25 22:59:15
おまいらってホント役に立たない子たちですねw

>>472
textboxとか適当な名前付けて
使用するフォントで等幅フォント指定する
サイズも色も重さも
 

481:Name_Not_Found
08/02/25 23:03:03
HPBからDreamwaverに乗り換えた
HPB糞杉

482:Name_Not_Found
08/02/25 23:04:57
>>478
JIS X 0201のみを収めたフォントを作成し、@font-face規則を使って読み込め
ばできないこともないけれど、WebKitくらいしか対応していない

483:Name_Not_Found
08/02/26 00:13:03
>>480
おまえみたいな奴がいると荒れるから上級者スレいけよw

484:Name_Not_Found
08/02/26 05:03:13 KFDsDtK/
質問です。

<ol>
 <li><img src="hoge.gif">
  <ul>
  <li>aaa</li>
  <li>bbb</li>
  </ul>
 </li>
……
</ol>

こんな感じのhtmlで、このような見た目にしたい。
1.[img] ・aaa
     ・bbb

でもfloatを使ったら「1.」の部分が見えなくなりました。

imgをspanで囲ってブロック要素にしてfloat、が自分の限界orz
なんかもっとスマートなやり方ないでしょうか。
ヒントだけでもいいので教えてください。

485:Name_Not_Found
08/02/26 06:30:18
質問です

<div id="footer">
</div>
こういう記述でdiv要素内の情報をページの形関係なしに常に一番下にくっつけておく命令ってありますか?
#footer {
 命令
}
みたいな感じで

486:Name_Not_Found
08/02/26 06:59:19
自己解決しました

487:472
08/02/26 23:25:37
>>480
いちいち囲うのがめんどうなので・・・
aあiいuうeえoお とかやってられないことないですか?

488:Name_Not_Found
08/02/27 04:34:24
[A][B]
[A][C]

分かりにくいけど、[A]は縦につながってる感じです。
このようなレイアウトをするにはどうすればいいのでしょうか?

489:Name_Not_Found
08/02/27 09:25:37
テーブルでも使ってればぁ?

490:Name_Not_Found
08/02/27 09:31:57
ごく大雑把に、
[A]をfloat:leftにして[B] [C]にmargin-left: Aの幅+余白ぶんとするか、
[A]をposition:absoluteで固定して、あと同上か、
全体を包む親要素を作ってから
[A]をfloat:leftにして[B] [C]にfloat:right。

491:Name_Not_Found
08/02/27 11:27:18 H0blEv4F
よろしくお願いします

#contents {
width:700px;
background-color:#FFFFFF;
margin:auto;
}

#main {
width: 520px;
float:right;
background-color:#FFFFFF;
font-size:10px;
text-align:center;
}

#side {
width: 180px;
float:left;
background-color:#FFFFFF;
font-size:9px;
text-align:left;
}


として、HTMLで<div id="contents">の中に<div id="main">と<div id="side">を入れてるのですが、
なぜかmainの中身を書くと、sideの中身が画面下に下がってしまうのです。
ものすごく単純なことしかしていないのですが…、なぜですか?

492:Name_Not_Found
08/02/27 11:53:34
>>491
<div id="Contents">
<div id="main">
<div id="side"></div>
</div>
</div>

こう書いてるんじゃないか?

493:Name_Not_Found
08/02/27 11:59:25
未だに単位に px 使ってる人いるのね…

494:Name_Not_Found
08/02/27 12:27:44
px 以外に何があるんだ?

495:Name_Not_Found
08/02/27 12:46:11 H0blEv4F
>>492

いえ、確かに
<div id=contents>

<div id=main>
ほにゃらら
</div>

<div id=side>
ほにゃらら
</div>

</div>

って書いてるんです…

496:496
08/02/27 13:18:20 eeP2S4P4
横からすいません。a要素にborder-left-style:none;が適応してくれないんですがどうすれば良いでしょうか?
<div id="navi">
<ul id="nav">
<li><a href="" title="home">HOME</a></li>
<li><a href="" title="news">NEWS</a></li>
<li><a href="" title="profile">PROFILE</a></li>
<li><a href="" title="faq">LINKS</a></li>
</ul>
</div>

ul#nav {display: inline; list-style-type: none;}

ul#nav li{float: left; width: 140px;}

ul#nav li a{display: block; width: 140px; height: 30px; line-height: 30px; border: 1px solid #fff; text-align: center; text-decoration:none;}

a[home]{border-left-style:none;}
と記述しているのですが...。
横メニューのボックスでHOMEの左のborderだけ消したいのですが方法がわかりません。
よろしくお願いします。

497:Name_Not_Found
08/02/27 13:57:21
>496
URLリンク(www.stylish-style.com)

498:496
08/02/27 14:14:45 eeP2S4P4
497さんありがとうございます。


499:Name_Not_Found
08/02/27 14:38:41
a[home]{border-left-style:none;}
えーと・・・

500:Name_Not_Found
08/02/27 15:29:43
↑言いたいことは解るぞw

a[title=home]{border-left-style:none;}

a[title*=home]{border-left-style:none;}

URLリンク(www.w3.org)

501:Name_Not_Found
08/02/27 16:38:42 hpkDotpr
誘導されてきました
画像を背景にしたのですが小さい画像だと何枚も重なってしまいます
一枚だけ任意の場所に背景として置くにはどうしたらよいのでしょうか

502:Name_Not_Found
08/02/27 17:57:24
norepeat

503:Name_Not_Found
08/02/27 17:58:13
>>501
background: #fff url("画像のURL") no-repeat 20px 50px; など
キーワード'no-repeat'で繰り返しなしになります。
座標はx軸、y軸の順に指定し、パディング辺を基準に配置されます。
パーセントの指定も可能。詳しい説明は↓
URLリンク(www6.plala.or.jp)
URLリンク(hp.vector.co.jp)

504:Name_Not_Found
08/02/27 18:06:13
>>495
標準モード、後方互換モードのIE6,IE7,Opera 9.26,Firefox 2.0.0.12で
表示確認してみたが再現しなかった。
再現できるブラウザのバージョンは?

505:Name_Not_Found
08/02/27 18:31:42 hpkDotpr
>>503
ありがとうございます!

506:Name_Not_Found
08/02/27 23:02:39
>>504

IE6と7です~。
かれこれずーっとあれやこれややってみてますが、治らない…。
もうダメ、寝ます…。
HTML&スタイルシート、レイアウトブックに書いてあること、そのままやっているだけなのですが…なぜ…??

507:Name_Not_Found
08/02/27 23:26:54
>>506
そうなるってことは左右にフロートしてるdivの幅の合計値が
700pxを超えてるんだだろうな。

それか、>>491では<div id="contents">と書いているけれど
>>495では <div id=contents> と書いてあって、
""が抜けているけど、そういうケアレスミスとかは無い?

508:Name_Not_Found
08/02/27 23:30:00
コンテンツを完全な中央(左右だけでなく上下も)に配置するにはどうすれば良いのでしょうか?

509:Name_Not_Found
08/02/27 23:43:33
>>506
ちょと待たれよ!

clearしてないってオチじゃないよな?

510:Name_Not_Found
08/02/28 01:12:58
>>506
単純にpaddingとかborder入れてるとかじゃねーの?

511:488
08/02/28 03:33:25
>>490
ありがとうございます。無事できました。

512:Name_Not_Found
08/02/28 08:21:28
>>506
背景を2つとも白にするんじゃなくて、side→#f00; main→#000 とかにしてみ。
多分はみ出してると思う。

513:Name_Not_Found
08/02/28 08:28:33
>508

h1 {
text-align: center;
line-height: 100%;
}



<html>
<body>
<h1>hogehoge</h1>
</body>
</html>

やってみ

514:Name_Not_Found
08/02/28 09:27:12
>>508
margin: auto; だけでできると思う。

515:506
08/02/28 09:35:40 cQBmkgHd
あう、みなさま昨夜はありがとうございます…
はみ出してるのかな?? と、中に入れているものを画像をやめて文字にしたり、
mainとsideの幅を少なくしたり いろいろいろいろ やったんですが、 ダメでした~。
(ホントになぜ・・・?)

しょうがないので、地道にpxで位置指定しようと思います。ありがとうございました~。

516:Name_Not_Found
08/02/28 12:56:10
>>508
URLリンク(www.stylish-style.com)

左右のセンタリングはmargin-left: auto; margin-right: auto;
上下については「CSS 上下 中央」などで検索すれば、たくさん見つかるよ。

517:Name_Not_Found
08/02/28 13:03:22
CSSの中にSSIを仕込むってやはり邪道なのだろうか?

<!--#if expr="( $HTTP_USER_AGENT != /hoge/ )" -->
/* hogeブラウザの場合 */
left: -8px;
top: -16px;
<!--#else -->
line-height: 128%;
<!--#endif -->
こんな感じに。

518:Name_Not_Found
08/02/28 14:50:33
>>517
出来るの?
スタイルシートをCGI化するのはやったことあるけど・・・

519:Name_Not_Found
08/02/28 15:12:11
できないと考える方が不自然だな
URLリンク(httpd.apache.org)

520:Name_Not_Found
08/02/28 15:15:29
>>517
PHP使えるなら、PHPにした方がいいよう気がする…

521:Name_Not_Found
08/02/28 21:36:35
>>515
こっちが気になって仕方ないww
とりあえずhtmlとCSSをうpしてくれw

522:Name_Not_Found
08/02/28 22:14:38 qRXST2ld
すみません質問です。

_期待する正常な表示_______.
|..............| | H3.         ____ |
|....M......| | TEXTTEXTTEXT |      | |  こんな感じに表示させたいのですが 
|.....E......| | TEXTTEXTTEXT |  IMG.. | |  imgにfloat: rightを設定した瞬間
|.....N......| | TEXTTEXTTEXT |      | |  IEのみ下記のような現象が起きてしまいます。
|.....U......| |           |      | |  
|..............| | (空のclear:both;).  ̄ ̄ ̄ ̄ .|  何とかうまいこと上のような表示にするには
|..............| | H3.         ____ |  どうすればいいでしょうか?
 ̄ ̄ ̄ .| TEXTTEXTTEXT |      | |
     | TEXTTEXTTEXT | IMG..  | |
     | TEXTTEXTTEXT |      | |
     | TEXTTEXTTEXT |      | |
     |              ̄ ̄ ̄ ̄ |
      ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄

_IE7のみ起きるおかしな表示____
|..............|  H3          ____ |
|....M......|  TEXTTEXTTEXT |      | .|
|.....E......|  TEXTTEXTTEXT |  IMG  | .|
|.....N......|  TEXTTEXTTEXT |      | |
|.....U......|             |      | .|  
|..............| (空のclear:both;)   ̄ ̄ ̄ ̄ |
|..............|  H3          ____ |
| ̄ ̄ ̄  TEXTTEXTTEXT |      | |
|       TEXTTEXTTEXT | IMG..  | |
|       TEXTTEXTTEXT |      | |
|       TEXTTEXTTEXT |      | |
|                    ̄ ̄ ̄ ̄ |
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
↑右のボックスが左端まで出てしまっている

523:522
08/02/28 22:33:02
>>522 の続きです。
clear: both; を全部撤廃したら枠は正常に戻りましたが
今度は下記のようになってしまいます。ひとつでも
clear: both; を挿入するとまた元に戻ってしまいます。

H3          _____
TEXTTEXTTEXT |     |
TEXTTEXTTEXT | IMG.   |
TEXTTEXTTEXT |      .|
H3    _____.|      .|
TEXTT.|      | ̄ ̄ ̄ ̄~
EXTTE. |  IMG.   |
XTTEX. |      |
TTEXT. |      |
EXTTE  ̄ ̄ ̄ ̄~
XTTEX
TTEXT
TEXT

524:Name_Not_Found
08/02/28 22:36:43
ソース見せて。

525:522
08/02/28 22:53:05
URLリンク(thg.danmaq.com)
綺麗じゃないが勘弁。

526:522
08/02/28 23:07:31
URLリンク(thg.danmaq.com)
XSL変換したやつが出来たのでお願いします。

527:Name_Not_Found
08/02/28 23:22:05 OvKZec6y
<pre> のように改行で折り返しになりつつ、表示領域右端いっぱいまで来ても折り返すようなスタイルはどう書けば良いですか?

528:Name_Not_Found
08/02/28 23:24:17
floatはIEでバグ起こしやすいからね。

URLリンク(cssbug.at.infoseek.co.jp)
これかな。よくわからん。

529:Name_Not_Found
08/02/28 23:31:19
>>526
試しに
.window { zoom: 1; }
って書いたら直った。


530:Name_Not_Found
08/02/28 23:34:57
>>527
URLリンク(hyper-text.org)

531:Name_Not_Found
08/02/28 23:38:24
div.right {
border: 2px #8E91F7 solid;
margin-left: 285px;
margin-right: 10px;
padding: 10px 10px 10px 10px;
}
div.contents-nohead {
font-size: 11px;
border: 2px #8E91F7 solid;
float: left;
width: 240px;
margin-left: 10px;
padding: 8px 8px 8px 8px;
}

これを指定して左側にコンテンツ、右側に本文とやってるんですが、このブロック要素の下にトップページへのテキストリンクを入れるとコンテンツのブロックの下でなく、本文のブロックの下に表示されてしまいます。
どうすればいいでしょうか?

532:529
08/02/28 23:40:21
>>529
ご教授ありがとうございます。

それにしてもどういうトリックなんだw
しかもこれだけで本当に治ってるし。


533:522
08/02/28 23:41:12
>>532>>529じゃなくて>>522。失礼。

534:Name_Not_Found
08/02/29 00:17:14
>>531
clear

535:Name_Not_Found
08/02/29 00:20:29
>>530
でけた! ありがとう。
同じ名前で複数定義して解釈できるどれかひとつが適用されるのを期待するのって
ちょっとイレギュラーな感じがするけど良いのかな。

536:質問その1
08/02/29 03:09:30
2ch外で質問したのですが回答が得られなかったため、そちらの質問を削除し、こっちでさせていただきます。

<html>
<head>
<title>タイトル</title>
<link rel="stylesheet" href="../base.css">
</head>
<body>
<blocKQUote>
本文
</blockquote>
</body>
</html>

ところが、この間、かなりの長文をこのテンプレートに挿入してアップードしてIEで表示確認すると、
<blockquote>~</blockquote>の間の内容が、全く表示されないことに気がつきました。
外部のcssファイルで設定している背景画像などは、問題なく表示されています。

また、なぜかは分かりませんが、IEの窓のサイズを広げるか、文字サイズの表示を中⇒小にするかの
どちらかの対応をすれば、<blockquote>~</blockquote>の間の内容が突然表示されます。
ただし、この現象が起こるのは、今回新しくアップロードしたこの長文小説だけで、
今までのの小説は、同じテンプレートのhtmlを使っているにも関わらず、
画面を小さくしようが、全画面にしようが、関係なく問題なく表示されます。

いろいろ調べて、問題は本文ファイル中にリンクしているスタイルシートbase.css内の、
blockquote要素の記述にあるのではないかと思いました。

537:質問その2
08/02/29 03:10:31 zTmvjs8m
■■base.css内の、blockquote要素の記述■■

blockquote{
 filter:alpha(opacity=75);
 background-color:white;
 width:100%;
 margin-right:12%;
 margin-left:12%;
 margin-top:10%;
 margin-bottom:10%;
 padding:15;
} 

思いつきで、width:100%;を削除してアップロードしてみると、なぜか小画面でも本文が表示されるように
なりました。
しかしその代わりに、今度はfilter:alpha(opacity=75);が背景に対して反応しなくなりました。

上記のことはいったいどうしてでしょうか?
また、何故、全面画面では本文表示されるのに、小画面にすると本文が表示されないのでしょうか?  

538:質問その3
08/02/29 03:13:41
すみません。
>>536で、いきなり「ところが、」から始まっていますが、下記の文章が抜けていました。

↓↓↓
いつも上記のようなhtmlの雛形を作成し、そこに小説を流し込んでhtmlファイルをつくり、サイトをつくっています。
2年くらい全く様式を変更せずに更新していましたが、全く問題はありませんでした。
↑↑↑

539:Name_Not_Found
08/02/29 04:37:08
ところでだな、<blockquote>~</blockquote>は引用文を囲むタグだ。
その本文が引用じゃないなら、わざわざ<blockquote>を使わずに
cssの内容をDIVに適用するとかしてくれたほうが、閲覧者に優しい。
あとfilter:alpha(opacity=75); はIE以外では見えない。

それでほとんど解決すると思うよ。

540:Name_Not_Found
08/02/29 04:43:58
返答ありがとうございます。

<blockquote>については、すでに300ページほどの小説を書いてしまっているので、
できたら変えたいないのが本音です。
あと、フィルタがIE以外に対応していないのは知っていたので、
一応バックグラウンドの色にホワイトを指定して、
壁紙と重ならないようにしたんですが……

フィルター自身は消さないとやっぱりいけませんか?


541:Name_Not_Found
08/02/29 04:53:28
なんか聞いていながら、生意気なことを言ってますね。

blockquoteに関しては、新しく更新する分から<DIV>を使おうと思います。
インデントに便利だったので、つい使っていました。

542:Name_Not_Found
08/02/29 06:06:24
filter:alphaなんてページが重くなるだけで何のメリットもないよ
しかも長文と来たら君のサイトは低スペックのPCだと閲覧できないんじゃね?

543:Name_Not_Found
08/02/29 07:36:21
ためしに、長文の量を半分にしてみたら、窓の広さや文字の大きさの表示設定に関係なく
ちゃんと表示されました。
やはり超!長文+フィルタの設定+IEの組み合わせが不味かったようです。
理屈は良く分からないのですが。
(普段は細かくページ分けしてるのですが、一括表示ページも欲しいといわれ、長文ページを作ったのです)

長文ページはお客様の希望のため取り下げられませんし、
フィルタは諦めます。
アドバイスありがとうございます。

544:Name_Not_Found
08/02/29 07:40:31
filter:alpha は文が長くなって範囲が大きくなると本文が表示されなくなる。
背景はビットマップで保持して重ねているはずだから IE 内部でメモリが足りなくなっていると思われ。

545:Name_Not_Found
08/02/29 07:56:36
>544
ありがとうございます!
ようやく謎がとけました。

>ビットマップで保持して
だから、IEの文字表示を中⇒小にしたら、いきなり表示が出来るようになったんですね。
(面積が小さくなって)

どちらにしろ、フィルターはやめます。
皆さんご親切にありがとうございました。

546:Name_Not_Found
08/02/29 09:20:45
半角英数文字のフォントを指定したいんだけど
どうしたらいい?

547:Name_Not_Found
08/02/29 11:41:31
>>546
font-family: Arial, "MS Pゴシック", sans-serif;
みたいに、最初に英文用フォントファミリを指定すると、
Arialに含まれている半角英数字はArialで、そうでない
文字はMS Pゴシックで表示されるはず(フォントが
インストールされていれば)。
URLリンク(hp.vector.co.jp)

548:Name_Not_Found
08/02/29 11:50:07
体の本字って久しぶりに見たな
ほねへんにゆたか

さかなへんにゆたかでハモだな

549:Name_Not_Found
08/02/29 15:13:30 zVCB/BlH
htmlファイルがcssファイルを読み込んでくれない。なんでだろう

550:Name_Not_Found
08/02/29 15:33:03
ファイルを読み込むのはブラウザの仕事だ

551:Name_Not_Found
08/02/29 17:50:11 Bd+qRCuw
     .__________
hoge :|_________|
fuga. :|_________|
piyo  :|_________|
foo  :|_________|

こんな感じにinputの入力フォームをそろえたいんですが
これはやっぱテーブル組むしかないのでしょうか?

552:Name_Not_Found
08/02/29 17:53:50
左がわを p にして、widthとfloatを指定してどう?

553:Name_Not_Found
08/02/29 17:55:42
>>551 自己レス。

fieldset{ padding-right: 5em; text-align: right; }
とかアホな方法で一応は自己解決しましたが、
他にもっと良いやり方あれば教えてください。

554:Name_Not_Found
08/02/29 17:59:24 KAzIvyNF
質問です。
myspaceのプロフィールをcssでいじるときに、#←この記号が使えなくって困ってます。
id属性を表記したいんだけれど....なにかよい方法はありませんでしょうか。
だれか助けてください。

555:Name_Not_Found
08/02/29 18:00:03
>>552
それも考えてはみたのですがいくら<label>があるとは言えちょっと
ラベルとフォームの一体感とか考えるとアレかなぁとか思ってみたり。

556:Name_Not_Found
08/02/29 18:14:38
>>554
myspaceは使ったことがないから分からないんだが、
ユーザがプロフィール画面のCSSを変更できるが、
なぜかそのCSSで、IDセレクタを使うために#記号を使おうとしたら、
なぜか変更できないと?

うーん、属性セレクタ?

*[id="hoge"] { }

557:Name_Not_Found
08/02/29 23:16:30
>>539
CHTMLの定義では、blockquote=「ブロック化インデント」とあるぞ。
引用だなどと、一言も書いてない。docomo公認のインデントするためのタグなのだ。

558:Name_Not_Found
08/02/29 23:26:19
>>551
dt/ddでできると思うが、別にそれは項目/フォームの表だと思うんだが。
ただ:はいらない。

559:Name_Not_Found
08/03/01 00:02:31
css初心者が何も知らずに発言させてもらうと、
>docomo公式
↑逆にあやしい。

560:Name_Not_Found
08/03/01 00:14:33
>>557
quoteって単語自体が(ry

561:Name_Not_Found
08/03/01 01:41:04
>>539
それって「hr=ヘアラインタグ」って大真面目に書いてあった奴だろ。
そのレベルで国際標準化提案してるんだからバカ丸出し。
さすがRFC無視のメールシステムで世界に鼻で笑われるだけのことはあるよな。

というか「W3Cに提案する」という行為の存在を知っていて、
何故「HTML4の仕様書」の存在を知らないのか?
(知ってたら、blockquote=ブロック引用とか、hr=水平罫線だとわかるだろう)
怪しげな「タグ講座」レベルの知識で世界標準を作ろうなんてすごすぎる。

562:Name_Not_Found
08/03/01 07:41:29
みかかってメールだけじゃなく、そんなあほなことまでしてたのか。

563:Name_Not_Found
08/03/01 10:04:08 B8YPvZ9w
>>556
ありがとうございます。
遅くなってすいません...

>ユーザがプロフィール画面のCSSを変更できるが、
なぜかそのCSSで、IDセレクタを使うために#記号を使おうとしたら、
なぜか変更できないと?

そうなんです!!
教えていただいた方法でやってみたのですが、やっぱりできなくって...
あきらめるしか無いですかねぇ;;

564:Name_Not_Found
08/03/01 12:22:33
>>563
ソースも出さないのにどう答えろと?
というかmyspaceのスレってないのか?


565:Name_Not_Found
08/03/01 13:46:43
それこそmyspace内で調べればいいんじゃね?
使ったこと無いけど

566:Name_Not_Found
08/03/01 14:52:18 B8YPvZ9w
>>564
myspaceのスレにcssについてはこっちで聞くようにってリンクが貼ってあったものですから...
ソースって言われても膨大すぎてどこらへんを出せばよいのかよくわからなくって;
すいません。

たとえば
<div id="navigationBarDiv">
<table>
<tr>
<td>
<table>
--省略--
</table>
</td>
</tr>
</table>
</div>

ってなっているときって、普通だと

div#navigationBarDiv{}

↑これでいじれますよね...??
でも、何回入力しても確認画面でsubmitを押すと、#だけ勝手に消えてしまって、
指定ができないんです(汗)
もちろんこれはmyspaceの構造かなにかの問題だとは思うんですが、
なんとかしてid属性を表記する方法が他にないものかなと思いまして...




567:Name_Not_Found
08/03/01 15:39:53
>↑これでいじれますよね...??
Yes。それで消えるとかの問題だったらCSSの問題じゃないからスレ違い。

568:Name_Not_Found
08/03/01 15:46:47 B8YPvZ9w
>>567
そうですか....
お手数おかけしてすみませんでした;
ありがとうございます。

569:Name_Not_Found
08/03/01 15:54:55
classじゃだめなの?
idとclassじゃ意味合い違うけど。

570:Name_Not_Found
08/03/01 16:21:47 B8YPvZ9w
classは問題なくcssでいじることができるのですが、
ほとんどの主要なtableとかdivはid属性で指定されているんです;
自分でtableとかを追加するときはすべてclassで指定してなんとか
いじれるようにしているのですが、既存のベースとなっている構造をいじりたいので....;_;




571:Name_Not_Found
08/03/01 16:30:29
>>570
ブログなんだろ?
ブログ側でidはいじれない仕様なんじゃないのか?
だからブログの質問はブログ板って事なんだ。

572:Name_Not_Found
08/03/01 16:38:38
>>570
CSSの書きかたは合っているので、myspace側の不具合なのでは。
myspaceのスレで同じ現象が発生する人がいないか尋ねてみたり、
サポート↓に問い合わせるのがいいと思う。
URLリンク(www.myspace.com)

573:Name_Not_Found
08/03/01 17:03:36 B8YPvZ9w
>>572
ありがとうございます。
スレ違いみたいなのに丁寧に答えてくださって本当に助かります;U;!!



574:Name_Not_Found
08/03/01 17:44:26
あほなmyspaceが#を取り除いたとしても、
まだ属性セレクタは使えると思うんだが。
IE6は知らんが。

575:Name_Not_Found
08/03/01 18:05:40
>>574
上級者スレへお帰りください

576:Name_Not_Found
08/03/01 19:50:47
「<h1><span>タイトル<span></h1>」というHTMLを書き、
CSSで
h1 { background: url('logo.gif'); height: 200px; } /* 成功 */
h1 span { margin-top: 30px; padding-top: 30px; } /* 失敗 */
を追加したのですが、h1 は成功しますが h1 span は反映されません。
なにがわるいのでしょうか。
ブラウザは Safari 3 です。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      <!--
h1 {
    height: 150px;
    border: solid 1px #FF0000;
}
h1 span {
    margin: 30px;
    padding: 30px;
    border: solid 1px #00FF00;
}
      -->
    </style>
  </head>
  <body>
    <h1><span>タイトル<span></h1>
  </body>
</html>


577:Name_Not_Found
08/03/01 20:08:58
>>576
何の実験だか知りませんが、標準モードで複数プラウザを使って確認すべきです。
さて、どちらを反映させたいのかわかりませんが、
cssでは後に書いた指定が優先されます。

578:Name_Not_Found
08/03/01 20:09:18
>>576
基本から勉強しなおしてください・・・

579:Name_Not_Found
08/03/01 20:09:47
>>577
>>577
>>577

580:Name_Not_Found
08/03/01 20:18:24 sPojkeTz
行き詰まりました、どなたか助言をお願いいたしますm(_ _)m

<center>
<table><tr><td> </td>
<td name="img">①</td>
</tr>
</table>
</center>

このテーブル構造の①部分に、
<img src="sumple1.png" style="z-index:0; position:absolute; top:0; left:0;">
<img src="sumple2.png" style="z-index:1; position:absolute; top:0; left:0;">
<img src="sumple3.png" style="z-index:2; position:absolute; top:0; left:0;">
<img src="sumple4.png" style="z-index:3; position:absolute; top:0; left:0;">
このような感じで、4つの画像を重ね合わせた状態で設置したいのです。

この場合、<img>の親要素は<td name="img">だと思い、
<td name="img" style="position:relative;">
と入れたのですが、IEだと狙い通りの表示になるのですが、
Firefoxでは<td>ではなくページの左上に表示されてしまいます。
Firefoxでうまく表示させるには、どうしたら良いのでしょうか(´;ω;)

581:576
08/03/01 20:21:28
>>577
>cssでは後に書いた指定が優先されます。
この場合なら、別に重なっていないので、両方反映されるように思うのですが。

>>578
ヒントだけでもお願いします。

582:Name_Not_Found
08/03/01 20:24:35
>>581
ソースをじっくり見直せ。ケアレスミス。

583:Name_Not_Found
08/03/01 20:36:05
>>580
親boxはtdじゃなくtableだろ。

584:576
08/03/01 20:36:20
>>582
わ、わからない。
<span></span>が閉じてなかったので閉じましたが、margin-top: 30px や padding-top: 30px が反映されないのは変わりませんでした。


585:Name_Not_Found
08/03/01 20:44:29
インライン要素だから空白とか変じゃね?
自分は、初心者だからいい加減言ってるけど。

586:580
08/03/01 20:45:08 sPojkeTz
>>583
レスありがとうございます。
<table>に style="position:relative;" を挿入しても
imgはページ左上に表示されてしまいました。
<td name="img">の中に<span style="position:relative;"></span>を入れ、
その中に<img>を置いてみてもダメでした…。

先程書き忘れてしまいましたが、IE7とFirefox2でテストしています。

587:Name_Not_Found
08/03/01 20:48:02
>>584
あんたの元ソースコピーしたら、妙な空白がいっぱい入ってた。
削除したら、普通に表示される。
何使ってインデントしてんだよ?

588:Name_Not_Found
08/03/01 21:01:02
display: block

589:Name_Not_Found
08/03/01 21:01:58
>>584
<span>で囲んだインライン要素に上下のアキ(margin,padding)は反映されないよ。
させたい場合は display: blockに。

590:580
08/03/01 21:05:54 sPojkeTz
事故解決しましたm(_ _)m
<DIV style="position:relative;">
<DIVstyle="z-index:0; position:absolute; top:0; left:0;">
<IMG>
</DIV>
</DIV>
これでIE・Firefoxで同じ表示がされるようになりましたm(_ _)m
ありがとうございましたm(_ _)m

591:Name_Not_Found
08/03/01 21:06:43
>>586
親テーブルposition:relative指定しても表示されないのが普通です。
IEが独自の実装でそう出来るだけなのです。

下のページに詳しいよ。
URLリンク(gyauza.egoism.jp)

592:576
08/03/01 21:11:21
>>589
キャー、ありがとうございます。
display: block で解決しました。
そうかー、inlineだと上下のマージンは反映されないのか。全然知りませんでした。
589さん、あなたは救いの神です。助かりました。

593:Name_Not_Found
08/03/01 21:37:00
>>588涙目

594:580
08/03/01 23:29:57
>590
ありがとうございます!そういうページを探していました(´;ω;)
本当にありがとうございました!

595:Name_Not_Found
08/03/01 23:37:58
<ul>
<li>foo</li>
</ul>
としたときの、箇条書きの「・」と、内容の「foo」との間隔を調整するにはどうしたらいいですか。

596:Name_Not_Found
08/03/02 00:00:02
>>595
li { padding-left: 値; }

597:Name_Not_Found
08/03/02 00:14:16
>>595
marker-offsetだけど
今現在それを実現はできない(´・ω・`)

598:質問 1/2
08/03/02 07:40:58 IAbVHBqj
画面の右下にこういう<div>だけがある
デザインのページが作りたいと思っています。
<div>の表示はうまくいくのですが、
鯖の広告が、通常なら下段1行に表示される筈なのに、
なぜか最上部に表示されます。
自分としては、ページ下段にぴったりとへばりつくようにしたいのですが。

ちなみに本文は、文章で4行ぐらいなので、スクロールバーは出ません。

599:質問 2/2
08/03/02 07:41:41 IAbVHBqj
<html>
<head>
<style type"text/css">
<!--
#Layer1 {
width:250px;
_position:absolute;
right:10px;
bottom:10%;
}
-->

</style>
</HEAD>
<body>
<div id="Layer1">
本文
</div>
</body>

***ここに広告のジャバスクリプトが入る***

</html>

600:質問 598
08/03/02 07:53:33 IAbVHBqj
書き忘れました。
position:fixed;
も、#Layer1で指定しているので、
firefoxでもちゃんと右下で表示されますが、
やっぱり広告は一番上で表示されます。

601:質問 598
08/03/02 09:04:56 IAbVHBqj
連投すみません。
自己解決しました。
上の摩訶不思議なタグは忘れてください。

602:Name_Not_Found
08/03/03 05:17:41
文章を改行しないと、横にスクロールバーが出て
文が画面からはみ出してしまいます。
改行しないで、横にスクロールバーが出ないようにするにはどうしたらいいですか。

603:Name_Not_Found
08/03/03 07:43:38
ボックスにwidthを指定する以上

604:Name_Not_Found
08/03/03 09:04:42
>>603
できました
ありがとうございました

605:Name_Not_Found
08/03/03 09:17:20 ec8IZkVe
ボックス内にテキストを打って、
それを縦軸の真ん中に置きたいのですが、
指定する方法ってあるでしょうか?

具体的には
height: 50px;
width: 400px;
background-image: ~;
のようなボックスの中にテキストでタイトルを入れたいのですが、
それが縦軸の真ん中に来るようにしたいのです。

分かる方いたら教えてください。

606:Name_Not_Found
08/03/03 11:21:14
テキストのボックスをdisplay: blockにしてmargin, paddingで調整とか、
親ボックスをposition: relative、テキストのボックスをposition: absoluteにして
top, leftで調整とか
どちらもフォントサイズで微妙に思ったようにいかんかも試練が

607:Name_Not_Found
08/03/03 11:31:11
>>605
テキストが1行ならば
line-height: 50px;

608:Name_Not_Found
08/03/03 12:46:46
>>606,607
やはり、裏技的なやり方で対処する方法しかないみたいですね。
なんでこういうのに対応したCSSないんでしょうね…。

回答ありがとうございました。

609:Name_Not_Found
08/03/03 13:03:28
裏技……

610:Name_Not_Found
08/03/03 13:57:07
うん。

611:Name_Not_Found
08/03/03 14:05:13
もうちょっと、vertical-alignの使い勝手が良ければ・・・

612:Name_Not_Found
08/03/03 15:48:17
おまえら……

613:Name_Not_Found
08/03/03 15:54:50
次の人まだ~

614:Name_Not_Found
08/03/03 16:09:35
   _,,....,,_  _人人人人人人人人人人人人人人人_
-''":::::::::::::`''>   ゆっくりしていってね!!!   <
ヽ::::::::::::::::::::: ̄^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ ̄
 |::::::;ノ´ ̄\:::::::::::\_,. -‐ァ     __   _____   ______
 |::::ノ   ヽ、ヽr-r'"´  (.__    ,´ _,, '-´ ̄ ̄`-ゝ 、_ イ、
_,.!イ_  _,.ヘーァ'二ハ二ヽ、へ,_7   'r ´          ヽ、ン、
::::::rー''7コ-‐'"´    ;  ', `ヽ/`7 ,'==─-      -─==', i
r-'ァ'"´/  /! ハ  ハ  !  iヾ_ノ i イ iゝ、イ人レ/_ルヽイ i |
!イ´ ,' | /__,.!/ V 、!__ハ  ,' ,ゝ レリイi (ヒ_]     ヒ_ン ).| .|、i .||
`!  !/レi' (ヒ_]     ヒ_ン レ'i ノ   !Y!""  ,___,   "" 「 !ノ i |
,'  ノ   !'"    ,___,  "' i .レ'    L.',.   ヽ _ン    L」 ノ| .|
 (  ,ハ    ヽ _ン   人!      | ||ヽ、       ,イ| ||イ| /
,.ヘ,)、  )>,、 _____, ,.イ  ハ    レ ル` ー--─ ´ルレ レ´

615:Name_Not_Found
08/03/03 16:28:25
   _,,....,,_  _人人人人人人人人人人人人人人人人人_
-''":::::::::::::`''>くさってやがる!ゆっくりしすぎたんだ!!<
ヽ::::::::::::::::::::: ̄^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^YY^Y^Y^Y^ ̄
 |::::::;ノ´ ̄\:::::::::::\_,. -‐ァ
 |::::ノ   ヽ、ヽr-r'"´  (.__
_,.!イ_  _,.ヘーァ'二ハ二ヽ、へ,_7         r' ̄i __   _____   ______
::::::rー''7コ-‐'"´    ;  ', `ヽ/`7    , - 、 ゙‐- ',´ _,, '-´ ̄ ̄`-ゝ 、_ イ、
r-'ァ'"´/  /! ハ  ハ  !  iヾ_ノ   {   }   'r ´          ヽ、ン、  r'⌒',
!イ´ ,' | /__,.!/ V 、!__ハ  ,' ,ゝ   `‐-‐'   ,'==─-      -─==', i  !、_丿
`!  !/レi' (ヒ_]     ヒ_ン レ'i ノ    ◯     i イ iゝ、イ人レソ     i |
,'  ノ   !'"    ,___,  "' i .レ'          ,レリイi (ヒ_]     / _ルヽイ、i .|| ○
 (  ,ハ    ヽ _ン   人!           ,,/!Y!"" ,___,  ヒ_ン ) 「 !ノ i  |-‐、,,
,.ヘ,)、  )>,、 _____, ,.イ  ハ    ,,r-─(_)      ヽ _ン   "".ノ !.; ヽ ヽ `,
                    (                        ,r‐″
                      ̄つ                 ,r─‐‐''
                      (´              ,r─'
                       ̄ ゙̄'──--------‐'

616:Name_Not_Found
08/03/03 16:45:25
YES!

617:Name_Not_Found
08/03/03 23:40:31
高須!

618:Name_Not_Found
08/03/03 23:47:46
クリニック

619:すいません
08/03/04 02:33:15 C4HBc0fL
マイスペースで自分のバンドのロゴを背景として使いたいんですけど、コードがイマイチよく分かりません親切な方是非教えてくださいお願いします!!

620:Name_Not_Found
08/03/04 07:32:48
専門スレでやれ
たんに、HTMLがそのままいけるなら <img src="パス" alt="代替テキスト" />

621:Name_Not_Found
08/03/04 10:26:26
>>619

<わからない七大理由>
1. 読まない ・・・説明書などを読まない。読む気などさらさらない。
2. 調べない ・・・過去スレ、ググるなど最低限の内容も自分で調べようとしない。
3. 試さない ・・・めんどくさいなどの理由で実行しない。する気もない。
4. 理解力が足りない ・・・理解力以前の問題で理解しようとしない。
5. 人を利用することしか頭にない ・・・甘え根性でその場を乗り切ろうとする。
6.感謝しない・・・教えてもらって当たり前。事がすんだらさようなら。
7.逆切れする・・・自分の思うようにならないと逆切れする。

622:Name_Not_Found
08/03/04 11:26:18
8.単に馬鹿・・・説明不要

623:Name_Not_Found
08/03/04 15:22:49
質問です。

divでボックスを作り、その中に背景を入れたいのですが、
ボックス自体は使い回ししたいので、
背景のCSSは分けてHTML内に記載したいと考えています。

<div class="box" style="background-image: url("○○");"><div>

と書いてみたんですが、うまく機能しません。
スタイルシート指定しているところに更に入れ込むのはできないのでしょうか。

また、
<div class="box">
<div style="width: ○○px; height: ○○px; background-image: url("○○");">
<div>
<div>

とやってみたのですが、これも駄目でして。
なにか対応方法ありますでしょうか。

よろしくお願いします。

624:Name_Not_Found
08/03/04 15:48:58
>使い回ししたいので、背景のCSSは分けてHTML内に記載したいと考えています。
><div class="box" style="background-image: url("○○");"><div>
これから殴るよと言いつつ蹴りを入れて来るって事ですかね。

625:Name_Not_Found
08/03/04 15:56:05
>>623
脳みそが不自由か?

><div class="box" style="background-image: url("○○");"><div>
ブラウザはboxクラスとstyle属性のどっちを選ぶと思う?

>ボックス自体は使い回ししたいので、
>背景のCSSは分けてHTML内に記載したいと考えています。

やめれ、クラスセレクタもうひとつつくれ

.box
{ /*プロパティ*/ }

.bk
{ background-image: url("bk.png"); }

<div class="box bk">
</div>

626:Name_Not_Found
08/03/04 16:52:32
>>625
どっち選ぶと思う?
と聞かれても、それが分からないから初心者スレで聞いてる訳でして…。

<div class="box">
<div style="width: ○○px; height: ○○px; background-image: url("○○");">
<div>
<div>

↑これに関しても脳みそ不自由ですか?
教えてください。

627:Name_Not_Found
08/03/04 17:17:44
div.box div.hogehoge {
 width: ○○px;
 height: ○○px;
 background-image: url("○○");
}

div.box div.piyopiyo {
 width: ××px;
 height: ××px;
 background-image: url("××");
}

とでも書いておけばいいんじゃね?(ホジホジ

628:Name_Not_Found
08/03/04 17:50:53
>>626
クラスセレクタでボックスとスタイル別々に括ればいいだけだろ

629:Name_Not_Found
08/03/04 18:23:52
>>628
クラスセレクタの意味はいま調べて分かりましたが、
実際どうしていいやらさっぱりです…。

良かったら具体例教えてください。
面倒だったら、申し訳ないのでいいです。

630:Name_Not_Found
08/03/04 18:30:26
>>629
>>625の方法でいいんじゃない?クラスセレクタは.box {}の".box"の部分。
HTMLでclass="box"が指定された要素にマッチする。
URLリンク(www.kanzaki.com)
URLリンク(hp.vector.co.jp)

631:Name_Not_Found
08/03/04 18:44:47
う~ん 上級者に見せてやりたいほど良い流れだ。

632:Name_Not_Found
08/03/04 19:12:04
ウォッチャー気取りwww

633:Name_Not_Found
08/03/04 19:20:32
>>623
書き方は合っているので、画像のURLが間違っているんでは。

634:623
08/03/04 19:52:01
皆様親切にありがとうございます。

もう少し色々いじってみます。
できたら報告しますね。

635:623
08/03/04 19:57:51
うおおおおおおおおおおおお!
できた。

こんな便利なやり方があったのか…。

皆様ありがとうございました。

636:Name_Not_Found
08/03/04 20:11:42
URLリンク(www.itmedia.co.jp)

いい感じだな

637:Name_Not_Found
08/03/04 20:34:05
IE8登場以後はCSS tablesを使ってカラムデザインをシンプルに
URLリンク(journal.mycom.co.jp)

638:Name_Not_Found
08/03/04 20:36:26
登場後の阿鼻叫喚を想像して楽しんでるんだね

639:Name_Not_Found
08/03/04 21:43:54
<html>
<body>
<div>
<div style="width:300px;float:left;border:solid 1px;">hoge1</div>
<br clear="all">
<div style="width:100px;float:left;border:solid 1px;">hoge2</div>
<div style="width:200px;float:left;border:solid 1px;">hoge3</div>
</div>
</body>
</html>

IEだと上段と下段がずれないのですが
Operaだとずれてしまいます。
両方でずれないようにするにはどうしたらいいでしょうか?

640:Name_Not_Found
08/03/04 21:59:44
>>639
borderのpx分ズレるんでしょ。IE以外はそれが仕様通りだし、標準モードにすればIEも同じ。
例えばこうするとかね。
<div style="width:300px;">
<div style="border:solid 1px #000;">hoge1</div>
<div style="width:100px; float:left; border:solid 1px #000;">hoge2</div>
<div style="border:solid 1px #000;">hoge3</div>
</div>

641:Name_Not_Found
08/03/04 22:25:53
>>640
ありがとうございました!!

642:Name_Not_Found
08/03/06 00:27:31
<div id="main">
<div id="contents">
<div id="primary"></div>
<div id="secondary"></div>
</div>
</div>
<div id="side"></div>

#main { width:100%; float:left; margin-right:-300px;}
#side { width:300px; float:right;}
#contents { width:100%;}
#primary { width:49%; float:left;}
#secondary { width:49%; float:left;}

こんな感じで3カラムで右カラム固定幅、左の2カラム可変を作ろうと思って指定してるんですけど、
どうしても左のコンテンツがブラウザに対して49%の幅になってしまい、右カラムと重なってしまいます。
#contentsに対してmargin-right:300px;をかければ意図したとおりに表示されますが、
widthの%指定って包含ブロックのwidthに対しての割合ですよね?
widthはmargin,border,paddingを含まないはずなのに、なんでブラウザに対しての割合になっちゃうんでしょう?
(ブラウザサイズ)ー(ネガティブマージン)=width では無いのですか?

MacIE5,Safari,Fx2,IE6,IE7,Opera,NN7で確認しましたが、全部同じような解釈でした。
解る方いましたら教えていただけませんか?

643:Name_Not_Found
08/03/06 01:42:21
>>642
上級スレのテンプレ見れば解決する

644:Name_Not_Found
08/03/06 06:14:28
>>642
実は#mainはブラウザ幅一杯に広がっているんだよ
ただし300px分の侵食可能域ができていて、その300pxに#sideが侵入してくる
で、#contentsは忠実に#mainのwidth一杯に広がる(ブラウザ幅一杯に広がる)


645:Name_Not_Found
08/03/06 09:42:01
>>643-644
浸食可能になってるだけで、幅はブラウザに対しての100%って事になってるんですね。
私のwidthに対しての解釈とDWのデザインビューでの結果が同じだったのでかなり悩みましたw
すっきりしました。ありがとうございます。

646:Name_Not_Found
08/03/06 23:58:09
各ブラウザ共通のCSSは可能ですか?
それとも、各ブラウザ毎に設定するほうがいいのでしょうか?


647:Name_Not_Found
08/03/07 00:10:29
YES
好きにしろ

648:Name_Not_Found
08/03/07 00:22:35
プロの方はどうされてるのかと思いまして
それも人それぞれなんでしょうか

649:Name_Not_Found
08/03/07 00:27:58
プロのサイトのソース見ればいいじゃない

650:Name_Not_Found
08/03/07 10:59:13
当方が対策してるのは、
firefoxで確認しながら制作したのち、IE6,7とMacで確認。
各ブラウザ毎に崩れたレイアウトを修正。

てかIE8の複数仕様に殺意を覚えたよ。

651:Name_Not_Found
08/03/07 11:14:11
バルマーの禿げがやりそうなことだ

652:Name_Not_Found
08/03/07 21:38:30 6ki5drJM
>>646
全てのブラウザを対象にすればそれだけの数のcssがいるわな。

でも、それは古いブラウザがあなたのもとになければ話にならないんだよ。
効果を確かめる事ができないから。

どこまでのブラウザを対象にして、どこからを切り捨てるのか、その判断をした方がいいでしょう。


653:Name_Not_Found
08/03/08 02:02:16
俺は二度手間になるからIEで表示確認しながら制作してる
FirefoxはまともなCSS書いていれば普通に表示されるから最終チェック時に見るぐらい

654:Name_Not_Found
08/03/08 02:08:15
初心者が失敗する方法をわざわざ書いて自慢大会か

655:Name_Not_Found
08/03/08 03:22:55
凄いやり方だな…普通逆だろ。

656:Name_Not_Found
08/03/08 09:50:40
>>653は悪いお手本

657:Name_Not_Found
08/03/08 11:26:22
>>653は肛門に爆弾を抱えている


658:Name_Not_Found
08/03/08 13:06:18
>>653
漢だな

659:Name_Not_Found
08/03/08 13:22:27 FgsmjM5B
>>653
firefoxでずれてた時、直す時は2度手間どころか3度手間にならないか?ww
前にfirefoxがIEエミュモードになっているのに気付かずにコーディングして酷い目に遭ったんだが。

IEでのみ動作確認している会社は信用できないわ。昔の職場そうだったけど今考えるとありえない

660:Name_Not_Found
08/03/08 18:56:58
webコンサルって名乗っててもieでしか確認しないという凄い会社もあるしな・・・

今ウチの会社に来てるコンサルです。ホントカンベンしてください。・゜・(/Д`)・゜・。

661:Name_Not_Found
08/03/09 00:28:28
CSSのついて教えてください。

URLリンク(seirei.s302.xrea.com)

1.margin: 0px auto;でセンタリングしているつもりですが
 やや右寄りになってる気がします。どこが原因でしょうか?

2.ブラウザでテキストサイズを変えるとテキストが隠れて見えなくなってしまいます。
 yahooとかだと枠も多きくなるんですが、どうしてるのでしょうか?

662:Name_Not_Found
08/03/09 00:31:10
>>659
Firefoxで確認しないといけないぐらいニワカなのか?

663:Name_Not_Found
08/03/09 00:32:56
ネタ乙

664:Name_Not_Found
08/03/09 00:50:01
>>662
ネタにしてもつまらなすぎる
どんだけ素人なんだよ。話にならん

665:Name_Not_Found
08/03/09 01:29:21
FirefoxなんてまともなCSSを書けば
仕様通り反映されるのにどうして確認が必要なんだよwww

おまえらレベル低すぎwww

666:Name_Not_Found
08/03/09 01:53:19
ニワカ
Firefoxで土台を作り後からIE等のバグ回避作業

通常
それらすべての作業をIE上で終わらせる

要するに知識レベルの差だな

667:Name_Not_Found
08/03/09 01:59:32
つまらん

668:Name_Not_Found
08/03/09 12:34:47
>>661
1.<div align="center">に見えるんだが。
 CSSだけでならないとしたら(IEだろ?)互換モードになってるせい。
2.floatがclearされてないせい。

その他.doctypeは必ず一行目。

669:Name_Not_Found
08/03/09 12:36:04 ldDp3Pd5
超初心者でCSSを覚えたてなのですが、
アシストしてくれるような使いやすい
エディタってありますでしょうか?

670:Name_Not_Found
08/03/09 12:53:26
>>669
プロパティをアシストしてもらっても、知識がなかったらせいぜいtypoがなくなるくらい。
そのくらいなら仕様書や説明サイト首っ丈でプロパティコピペしたほうが初心者は楽。
URLリンク(hp.vector.co.jp)

671:Name_Not_Found
08/03/09 18:31:08 vgojNVC9
通常サイトの場合、リンクにマウスを合わせたら指マーク??に変化します。
firefoxの場合上記のようになるのですが、IEだと変化しません。
どのようにすればIEでも変化するようになるでしょうか?

672:Name_Not_Found
08/03/09 19:07:36
>670
同意だが首っ引きな。首っ丈は恋愛感情だ

673:Name_Not_Found
08/03/09 19:15:04
>>671
div{width:100px height:100px;}

<a><div></div></a>とかやってない?

674:Name_Not_Found
08/03/09 19:17:34
ゴメ
div{width:100px; height:100px;}ね。

別にdivで囲わないで、a{display:block;}にすれば良いのは分かってるんだけど、これもieの解釈が間違ってるの?
教えてエロいひと


675:Name_Not_Found
08/03/09 19:38:07
>>671
・floatとかpositionとかの要素がaに被ってる。
・単に処理が遅くて、一瞬で変化しなかった。

>>674
IE6ではブロック要素にしたらちゃんとheight、widthを解釈した。

>div{width:100px; height:100px;}
どっから出てきた。

676:Name_Not_Found
08/03/09 19:52:22 vgojNVC9
>>673-674
おそらくなっていません。
アドセンスは問題ないのですが、自己作成したリンクだけ>>671のようになってしまいます。
参考書片手に作成したので、なにか間違って制限をかけるようことをしてしまったかも
しれません。CSSで>>671のように制限をかけることも可能なのでしょうか?
可能だとすればどう表記すれとなってしまうのでしょうか?
質問がずれてしまいすみません。

677:Name_Not_Found
08/03/09 19:55:19 vgojNVC9
>>675
・floatとかpositionとかの要素がaに被ってる。
という一文の意味がよくわかりませんが、

a:hover {
position: relative;

上記のようなものを見つけたのですがこれでしょうか?

678:674
08/03/09 20:25:48
>>675

>>div{width:100px; height:100px;}
>どっから出てきた。

いやie6ってさ、高さと幅を指定したブロック要素を<a>で囲むと、カーソルが変化しなくなるじゃない?
それのことかなーと思って。


679:Name_Not_Found
08/03/09 22:47:24
>>677
それは(ものすごくエスパーだが)マウスを乗せたときにリンク文字がピコッと
動くやつだと思う。

positionは平気で上に乗っかったりする。
今回はaにrelativeだから、自分の予想している事態(*)にはなってないと思う。

*)┌─┐
 │ A ├─┐
 └┬─┘B.│
   └──┘
こういう風に重なってたら、Bにリンクがあっても、Aと重なってる部分では
マウスが指にならない(押せない)。

>>678
そんな現象があるのか。ごめん、自分が無知だった。
ためしにしてみたらなった。ちょっと感動した。

680:Name_Not_Found
08/03/09 23:16:49 vgojNVC9
>>679
そうですそれです!!ほんとエスパーですね。
リンク文字がピコッと動くやつの効果を消したんですが、
リンクにマウスを合わせたら指マーク??に変化しなくて困ってます。
Firefoxでは問題ないのですがIEで表示するにはどう対処すればよいのでしょうか?

681:Name_Not_Found
08/03/10 00:07:11
>>672
orz
おまえに首っ丈ってことでよろしく。

682:Name_Not_Found
08/03/10 10:08:38
>>680
ピコッと動くやつは、あった方が嬉しいなら消さなくていい。
どのみち関係ない。

ところで>>674->>675はどうなった?
てか、該当部分前後のhtmlとcss晒したほうが早い。

683:Name_Not_Found
08/03/10 11:58:41
URLリンク(sakuratan.ddo.jp)

画を描きました。
ブロックをfloatでleftとrightで画像1のように指定したんですが、
ブラウザのサイズを小さくすると画像2のように縦にずれてしまいます。

ブラウザのサイズを小さくしても左右のブロックがずれないようにするにはどうしたらいいですか?

684:Name_Not_Found
08/03/10 12:24:30
>>683
<div class="cb">
<div class="float">floatA</div>
<div class="float">floatB</div>
</div>
のように、フロートを収めるボックスをつくり、
.cb { width: 700px; }
.float { float: left; width: 300px; }
と、フロートの合計幅がフロートを包含するボックスの幅を超えないように
するか、
.float { float: left; width: 40%; }
と、パーセントでフロートの幅を指定するといいと思うよ。


685:Name_Not_Found
08/03/10 13:22:12
質問です

<h1>タイトル</h1>
<p>内容</p>

*{margin:0; padding:0;}
h1{margin-left: 200px;}
p{float:left; width:200px;}

【結果】
   タイトル
内容

【理想】
内容 タイトル

なぜか【結果】のように、浮かせた(floatした)のに入り込みません。
h1とpを逆にすればうまくいくけれど、この順序のままでいきたいです。
positionを使わずにしたいのですが、どうすればいいでしょうか。

686:Name_Not_Found
08/03/10 15:04:50
h1, p { float: right }でどう?


687:Name_Not_Found
08/03/10 19:53:14 QOqQMEs5
>>682
ピコッと動くやつ関係ないんですか‥。
・floatとかpositionとかの要素がaに被ってる。
・高さと幅を指定したブロック要素を<a>で囲む。
上記の2つ以外指マークに変化しない理由がないのならわかりそうにありませんね。


688:Name_Not_Found
08/03/10 21:15:55
ピコッにpositon使うだろ。蒸し返してどうする。。

689:Name_Not_Found
08/03/10 23:30:27
>>684
試してみます。
ありがとうございました。

690:Name_Not_Found
08/03/11 01:38:45
>>687
>>682じゃないけど、おまえグダグダうるせえよ
さっさとソース出せ

691:685
08/03/11 17:44:56
>>686
なるほど!両方浮かせないと入らないんですね。
いろいろ調べたら、ネガティブマージンを使うみたいです。
URLリンク(www.geocities.jp)
一つ賢くなりました。ありがとう!

692:Name_Not_Found
08/03/12 23:17:50 EVnm+a6I
CSSのスレが多くてどこで質問したらいいか迷いましたが、ここで質問させてください。

できるだけCSSのみでプルダウンメニューを作ろうとしていたのですが、
OperaとFirefoxではサブメニューが出たのですが、IEだけ機能しなくて弱っています。

■HTML部(整形の都合上全角スペースを使用)

<ul id="mainmenu">
  <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー1</a></li>
  <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー2</a></li>
  <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー3</a></li>
  <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー4</a>
    <ul class="sub1">
      <li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
      <a href="#">サブメニュー1</a>
      </li>
      <li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
      <a href="#">サブメニュー2</a>
      </li>
    </ul>
  </li>
  <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー5</a></li>
  <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー6</a></li>
</ul>

693:Name_Not_Found
08/03/12 23:19:14 EVnm+a6I
■CSS部

/*-------------------------------------------------------------------------------
メインメニュー
-------------------------------------------------------------------------------*/
ul#mainmenu *{margin:0px; padding:0px; list-style:none; display:block;}
ul#mainmenu{
  position:relative; width:912px;
  font-size:16px; line-height:100%; font-weight:bold;
  text-align:center; margin:0px auto; z-index:100;
  }
ul#mainmenu li{
  width:150px; height:28px;
  background-color:black; text-align:center;
  float:left;
  }
ul#mainmenu li a{
  position:relative;
  width:100%; height:100%; padding:6px; text-decoration:none;
  }
ul#mainmenu li a:link{color:white;}
ul#mainmenu li a:visited{color:white;}
ul#mainmenu li a:hover, ul#mainmenu li.on{background-color:#999999;}
ul#mainmenu li.off, ul#mainmenu li.on{
  overflow:hidden;
  border-width:1px; border-style:none solid; border-color:#cccccc;
  }
ul#mainmenu li.on{border-bottom:0px; background-color:#cccccc;}
ul#mainmenu li.off{position:relative;}
ul#mainmenu>li.on{overflow:visible;}

694:Name_Not_Found
08/03/12 23:20:01 EVnm+a6I
/*-------------------------------------------------------------------------------
サブメニュー1
-------------------------------------------------------------------------------*/
ul#mainmenu li ul.sub1{
  width:150px; height:28px;
  text-align:left;
  }
ul#mainmenu li ul.sub1{background-color:black;}
ul#mainmenu li ul.sub1 li a{
  width:100%; height:100%;
  padding:6px; text-align:left; text-decoration:none;
  }
ul#mainmenu li ul.sub1 li a:hover, ul#mainmenu li ul.sub1 li.on2{color:white; background-color:#999999;}
ul#mainmenu li ul.sub1 li a:link{color:white;}
ul#mainmenu li ul.sub1 li a:visited{color:white;}
ul#mainmenu li ul.sub1 li.off2, ul#mainmenu li ul.sub1 li.on2{
  overflow:hidden;
  border-width:1px; border-style:none solid; border-color:#cccccc;
  }
ul#mainmenu li ul.sub1 li.off2{position:relative; overflow:hidden;}
ul#mainmenu li ul.sub1 li.on2{overflow:hidden;}
ul#mainmenu li ul.sub1>li.on2{overflow:visible;}


695:Name_Not_Found
08/03/12 23:22:44 EVnm+a6I
以上のような構成でメニューを作ったのですが、
先述の通りIEだけサブメニューが出てきません。あとはどこをいじったら良いのでしょうか?
どなたか分かる方がいらっしゃいましたら、助言を頂けたら幸いです。

696:Name_Not_Found
08/03/13 00:14:01
そんな糞長いソースを他人にチェックしろってのかよボケ
現象の出る最小構成ソース貼れアホ

697:Name_Not_Found
08/03/13 00:15:30
長すぎて見る気がしないが
IE6は子供セレクタに対応してないこと知ってるかとエスパー

698:Name_Not_Found
08/03/13 00:20:46
おれもエスパーに同意

699:Name_Not_Found
08/03/13 01:08:14
>>629
>>629-694のソースをコピペしてみたが、IE6で動いたよ。
もしかして、これ↓使ってる?
URLリンク(www.stylish-style.com)

700:Name_Not_Found
08/03/13 06:28:05
>>699
海外のでは、IE対策にtable使ってた。参考までに。

URLリンク(coliss.com)
URLリンク(coliss.com)

701:Name_Not_Found
08/03/13 07:53:27
(゚д゚)テーブルの問題じゃないだろ・・・

702:692
08/03/13 21:45:09
>>699
大元はそこのソースです。
ただ、olタグが本来の用途に使われてないのが気になったので、
どうせならいじり直そうと思ったのが災いしたみたいです。
おとなしくデフォルトのまま使おうと思います……orz

>>700
これも良さげですね。
ただ、htmlはできる限りシンプルにしたいので、参考だけにとどめておきます。
どうもありがとうございました。

703:Name_Not_Found
08/03/14 11:14:20
header,コンテンツエリア、footerと要素があって
html上ソースをフッターからかきたいのですがどうやればいいですか

704:Name_Not_Found
08/03/14 11:14:54 18Cjtbc8
あげ

705:Name_Not_Found
08/03/14 15:15:23
いみふ

706:Name_Not_Found
08/03/14 16:05:21
>>703
フッタから書くってこういうこと?
<body>
<div id="footer">フッタ</div>
<div id="header">ヘッダ</div>
<div id="contents">コンテンツ</div>
</body>


707:Name_Not_Found
08/03/14 17:24:59
何でそんなことをしたがるのかなぁ

708:Name_Not_Found
08/03/14 17:45:29
(C)ヘタレ会社 All rights reserves
これをぐぐるでひっかけさせたいとかじゃないよな?w

709:Name_Not_Found
08/03/14 18:09:48
そもそもフッターって言ってんのになんで上に書くんだよ

710:Name_Not_Found
08/03/14 22:56:04
position

711:Name_Not_Found
08/03/14 23:01:06

  春だなぁ・・・

712:Name_Not_Found
08/03/14 23:14:18
春なの~に~春なの~に~♪

713:Name_Not_Found
08/03/15 02:40:59 w12nIhho
cssで2カラムのフレームを作ってメニュー部分だけスクロールされないようにする事は可能ですか?


714:Name_Not_Found
08/03/15 07:30:15 dXndptf/
css 疑似メニュー でググるよろし

715:Name_Not_Found
08/03/15 07:31:10 dXndptf/
間違った。疑似フレーム ね

716:Name_Not_Found
08/03/15 07:39:27 PrcUEovF
>>714-715
ありがとう
ググってみます

717:Name_Not_Found
08/03/15 09:42:10 h/Yime1K
サムネイルポップアップのスクリプトを設置しようとしているのですが、
// Insert your WebSnapr developer key here - get it free on www.websnapr.com
var developerKey = 'your developer key';の一番最後にある「your developer key」って所に何を入れるのかか分からないのです。

developer keyって、サーバーのパスワードとかIDなんですかね?

718:717
08/03/15 09:56:45
717です。自己解決しました。スルーお願いします。

719:Name_Not_Found
08/03/16 09:51:29 E69PkzzJ
URLリンク(www.j-cnet.co.jp)
ここの中の枠はボックスですよね?
ボックスの角を丸くするにはどうすればいいですか?

720:Name_Not_Found
08/03/16 10:16:27
単に丸い画像を背景に設定しているだけです

721:Name_Not_Found
08/03/16 18:41:18
Web制作質問スレから、
誘導されました。

800x30pxのスペース内に
横並びのメニューをリストタグで作る際、
どのブラウザでも、
メニュー項目が中心に来るような設定はありますか?

marginやpadding、line-heightで調整すると、
ブラウザによってずれが出てきてしまいます。


722:Name_Not_Found
08/03/16 20:03:44
div#sub { width: 16em; float: left; }
div#main { margin-left: 18em; }

<p>ほめぱげ</p>
<hr>
<div id="sub">
<p>ほげほげ</p>
</div>
<div id="main">
<p>はげはげ</p>
</div>

以下のように「はげはげ」が一行下がってしまうのはどうしてでしょう?
ちなみに<hr>を消すと同じ高さになります。これもどうして?

ほめぱげ
──────────
ほげほげ
              はげはげ



723:Name_Not_Found
08/03/16 21:07:01
>>721
できます。
基本難で勉強してきてください。
全部教えろってのはノーサンキュー。

>>722
IEだったらバグ。

724:Name_Not_Found
08/03/17 17:21:18
>>721
<center>
<li>
</li>
<center>

725:Name_Not_Found
08/03/18 19:34:23 74OG8H0/
overflowではみ出た文字を折り返して表示する方法を教えてください。

726:Name_Not_Found
08/03/18 19:43:25
white-space: normal


727:725
08/03/18 20:14:42 74OG8H0/
言い忘れていましたが、セレクトボックスをプルダウン表示以外での場合でおねがいします。

728:Name_Not_Found
08/03/18 20:32:25
>>727 悪いがどういう状態のなにを折り返したいのか、検討がつかない

729:725
08/03/18 20:46:37 74OG8H0/
例えば
URLリンク(www.htmq.com)
このHPの下にある星座の名前がボックスの幅よりも長い名前の場合に幅よりも長い部分を折り返して表示したいのですが、わかりましたでしょうか?

730:Name_Not_Found
08/03/18 21:12:48
>>725 簡単に調べてみたけど無理っぽいかも
別のやりかたとしては
折り返しをせずに選択の際にボックスを文字列の大きさまで増やすとか
liとJavaScriptを組み合わせて擬似的にプルダウンメニューにするとか

ここら辺でどう?

731:721
08/03/19 00:10:09
>>723,724
ありがとうございます。
すいません、書き漏れがありました。
水平中心ではなく、垂直方向です。

732:Name_Not_Found
08/03/19 00:14:09
>>731
テンプレ

733:Name_Not_Found
08/03/19 00:14:48
っとこっちにはないのか。
スレリンク(hp板)
ここのテンプレ

734:Name_Not_Found
08/03/19 09:59:18
>>731
<ul class="menu">
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>

* { margin: 0; padding: 0; }
.menu li {
float: left;
display: block;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}

こんな感じ?

735:Name_Not_Found
08/03/20 04:17:44
角丸のボックスを作りたいのですが、画像なしと画像ありだとどっちの方がいいんですか?
画像なしだと文法がひどくなる(?)みたいですが、
画像ありと比べてなにか大変なことってあるんですか?

736:Name_Not_Found
08/03/20 05:00:17
どっちの方がいいと聞かれても何に対して良し悪しを判断するのか?
どちらにも利点と欠点がある。

737:Name_Not_Found
08/03/20 11:04:39
>>753
画像なしだと画像を作る手間が省けるとか、CSSを触るだけで色を変えられる
とか、それくらいじゃないかな?
画像ありでもなしでも大変なことはないと思うが。

738:Name_Not_Found
08/03/20 12:33:50
画像で高さ幅可変にしようとするとHTMLをいじらなきゃならない。
画像なしならHTMLをいじらなくて済む。

739:Name_Not_Found
08/03/20 17:50:08
だが画像無しだとMacIEで表示されない

740:Name_Not_Found
08/03/20 21:22:46
は?単に背景色なりボーダーなりだから
丸まらなくても表示はされるだろ?

741:Name_Not_Found
08/03/20 23:01:34
角丸が表示されないって意味だろ普通にw

742:Name_Not_Found
08/03/20 23:13:23
対応する必要もない

743:Name_Not_Found
08/03/20 23:27:23
>>741
そんなのMacIEだけの問題じゃないし、なんでわざわざMacIE限定でものを言う?

744:Name_Not_Found
08/03/21 00:10:09
canvas要素を使ってJavascriptで描けばおk

745:Name_Not_Found
08/03/21 00:12:21 u88J/n5r
この際、Flashにしちまえよ

746:Name_Not_Found
08/03/21 01:35:42
つーか角丸なんてもう流行らないからやめるがいいね

747:Name_Not_Found
08/03/21 02:05:37
なんだかいろいろ回答ありがとうございます
少し勉強になりました
角丸、はやりませんか…でもせっかく教えていただいたので
画像使ってやってみます

748:Name_Not_Found
08/03/21 02:38:50
ま っ た く 理 解 し て な い

749:Name_Not_Found
08/03/21 02:47:12 98NsX60D
SELECTボックス内の行数をSIZEで指定しているのですが、これをウィンドウの割合でSIZEを決め表示することって可能なのでしょうか・?

750:Name_Not_Found
08/03/21 03:53:03
横or縦のサイズだったら%とかemで指定すればできるけど、行数って…

751:Name_Not_Found
08/03/21 03:56:11
>>749
むこうで礼も言わずに来ただろ・・・

752:Name_Not_Found
08/03/21 04:41:56 osTCIJfd
MacIEなんて切り捨てればいい
変に対応していくと何時までも使いつづける馬鹿が増えるだけ

753:Name_Not_Found
08/03/21 11:01:52
我々はIE全般切り捨てて作るべきだ
糞ブラウザの解釈につきあうから世界が変わらないのだ

754:Name_Not_Found
08/03/21 14:00:05
むしろIE以外を切り捨てるのが事実上の世界標準

755:Name_Not_Found
08/03/21 15:14:28
個人的にはIE7で大きな問題はなくなった気がする
そしてIEを切り捨てるのもIE以外を切り捨てるのも世界標準ではなく糞サイト
ついでに>>752~755はスレ違い

756:Name_Not_Found
08/03/21 15:16:10 SWZ05IwX
IEって全体の何パーセントぐらいの人間が使ってるんだろうか?
一番多そうな気もするけど

757:Name_Not_Found
08/03/21 16:37:02
サイトにもよるだろうけど、全体の割合としてはまだ7割~8割はいくんじゃない?
俺のとこだと、1割超えのだけだと

A)
IE6 62%
IE7 19%
Firefox 13%

B)
IE6 33%
IE7 14%
Firefox 36%
Opera 12%

って感じになってる
ちなみに俺はOpera使ってるんだけど、なんだか寂しいんだぜ…

758:Name_Not_Found
08/03/21 17:30:24
safariは

759:Name_Not_Found
08/03/21 17:51:17
>>758
ごめん圏外

760:Name_Not_Found
08/03/21 19:57:35
safariで見られないサイトの可能性もあるな

761:Name_Not_Found
08/03/21 21:14:27
IEを切り捨てたい。

…というのがサイト運営者の本音だろうけど
そうは行かない現実なんだよな。


762:Name_Not_Found
08/03/21 22:35:29 anOD8yjk
画像を中央寄せにしたいのですが、できません><
なんででしょうか? ↓

ソース
<img class="centering" src="画像のパス">

CSS
img.centering{
text-align:center;
}

763:Name_Not_Found
08/03/22 00:10:58
>>762
img直書きなんてしないだろ。
然るべき要素で囲んで、そっちをセンタリング。

764:Name_Not_Found
08/03/22 00:27:37
>>762
imgがインライン要素だから、画像のサイズがそのまま横幅になるのでセンタリングできない
イメージとしては、箱のサイズぴったりのこんにゃくが入ってたら中央寄せできないだろ?
img要素に横幅指定するとひどい事になるから、<p><img></p>とでもして
p要素にtext-align:centerを指定すればおk

765:Name_Not_Found
08/03/22 01:20:24
>img要素に横幅指定するとひどい事になるから

   嘘はいかんぞ嘘は

766:Name_Not_Found
08/03/22 03:38:13
背景を指定した場合ブラウザでは表示されるのですが、chmファイルにした場合に背景が表示されません。
chmファイルでは無効なのでしょうか?

body {
background-color: #605c58;
color: #dddddd;
background-image: url("img/a.png");
background-repeat: repeat;
background-attachment: fixed;
}


767:766
08/03/22 03:40:30
background-imageについての質問です。

768:Name_Not_Found
08/03/22 04:18:57
>>765
いや、img要素に画像サイズと異なる横幅指定すると、縮小/拡大されるって事ね

>>766
ヘルプファイルだよね…?
普通のブラウザじゃ画像云々以前にchmの表示自体できない気がする
背景として使いたいなら、一旦画面キャプチャするなりして画像にしてからで

769:Name_Not_Found
08/03/22 04:31:46
>>768
誰がchmを背景にしたいと言ってるんだ?

>>766
ここに背景画像が抜けてしまう症状について書いてあったけど、これかな
URLリンク(www.slock.co.jp)


770:766
08/03/22 04:58:35
>>769
まさにそれですね。
ありがとうございます。

771:Name_Not_Found
08/03/22 09:52:18
なんだか可愛そうな回答者がいるねえ・・・

772:Name_Not_Found
08/03/22 12:59:12
いいかげんテーブル並に楽に段組みできる方法作れよ。

横並びが簡単に滅亡壊滅崩壊しまくる本来の使い方ではない
間違ったCSSの段組みはもうたくさん

773:Name_Not_Found
08/03/22 13:15:43
ご自分でお作りになられたらいかがでしょうか ?

774:Name_Not_Found
08/03/22 13:29:22
横並びが崩壊されないで横スクロールバーを出せってか。アホめ。

775:Name_Not_Found
08/03/22 16:06:43
アホ言うもんがアホ

776:Name_Not_Found
08/03/22 17:07:08
2度も言った奴はどうなるんだw

777:Name_Not_Found
08/03/22 17:13:00
>>776
アホアホ

778:Name_Not_Found
08/03/22 17:18:38
いやアッホホーだろう

779:Name_Not_Found
08/03/22 17:23:51
春だな

780:Name_Not_Found
08/03/22 21:06:00
春だなって言う奴がお花畑

781:Name_Not_Found
08/03/22 21:47:48
うんばらほー!

782:Name_Not_Found
08/03/23 03:50:00
CSSでプルダウンメニューを作りたくて、
URLリンク(www.k5.dion.ne.jp)
このサイトを参考に作ったのですが、

メニューブロックのすぐ下に
FLASH画像を置いているのですが、

MacのSafari, Firefoxでは正しく表示されますが、
Win IE6, Firefox, Safariだと、
プルダウンメニューがFLASHの下に隠れて表示されてしまいます。

どうにか最前面にだす方法はないですか?

783:Name_Not_Found
08/03/23 05:09:10
>>782
それらへんの制御は多分無理

784:初心者
08/03/23 07:01:09 eOdXMnK5
#000000と#111111の中間の色ってなんですか?#101010?

785:Name_Not_Found
08/03/23 07:25:28
>>784
CSSの質問じゃなくて算数の質問だと思うんだが・・・
#080808

786:Name_Not_Found
08/03/23 07:33:39 eOdXMnK5
>>785
すみません…仕組みがいまいち分からなくて。
ありがとうございましたm(_ _)m

787:Name_Not_Found
08/03/23 08:23:09
>>786
16進数だから、一桁が0 1 2 3 4 5 6 7 8 9 A(10) B(11) C(12) D(13) E(14) F(15)の16ある
#111111は#16 16 16 16 16 16って事だから、#000000との間は#888888ってなるわけ

788:Name_Not_Found
08/03/23 08:23:50
ごめん間違えたorz

789:Name_Not_Found
08/03/23 09:23:23
www

790:Name_Not_Found
08/03/23 10:18:25 M1cUmSyN
ちょっと質問させてください
URLリンク(themes.wordpress.net)
このテンプレートを使用しています
テストランしてもらえればわかるのですが
Firefoxではフッターの下に1センチほどの隙間ができてしまいます
IEではちゃんと表示できるのですが隙間を改善する方法はありませんか?
よろしくお願いします

791:Name_Not_Found
08/03/23 11:57:20
なぜ隙間ができるのか。その辺をまず自分なりに考えてみよう!

792:Name_Not_Found
08/03/23 12:31:06
vertical-align:bottom;
という指定が必要なのかと思っていたのですが
いろいろ試してみても改善できず困っています

793:Name_Not_Found
08/03/23 12:51:22
>>790
#wrap:after{}
↑この中にfont-size:0px;を追加

794:790,792
08/03/23 13:05:13
>>793
どうもお手数をおかけしました
ちゃんと表示できます
ありがとうございました

795:Name_Not_Found
08/03/23 14:18:33 ktkc/ndC
テーブルに1行ずつ線を引きたいと思っているのですけど、
どのようにソースを書けば出来ますか?

796:795
08/03/23 14:20:37 ktkc/ndC
ちょっと日本語がおかしくなってました;
行の下にまっすぐな線を引くということをやりたいのですが、
やり方を教えてもらえませんでしょうか?

797:Name_Not_Found
08/03/23 14:38:12
>>782
flashのwmodeをopaqueもしくはtransparentにする
flashを貼るタグはobjectタグとembedタグの両方があるので、どっちにも設定すること

798:Name_Not_Found
08/03/23 15:06:53
>>795
tr { border-bottom: 1px solid black }など

799:Name_Not_Found
08/03/23 15:08:57
それだけじゃ出ないだろ
table {border-collapse: collapse;}もいる

800:Name_Not_Found
08/03/23 19:22:09
-index
-style.css
-[A]
-[B]-[C]
-[D]-[E]

このような階層になっている場合、
[C]ディレクトリのhtmから外部スタイルシートを.
./../style.cssで表示上は読み込めているのですが、
生ログではすべて[C]内のスタイルシートを404で返してきます
[C]内にはスタイルシートを置いていないので。

[A]や[B][D]などのフォルダから読み込む際には
全く問題がないのですが、[C][E]のディレクトリだけ
エラーが出ます

解決策はありませんでしょうか
よろしくお願いします

801:782
08/03/23 20:00:08
>>797
ありがとう!解決しました。

802:Name_Not_Found
08/03/23 20:09:30
ページ全体を#wrapparでまとめ、その中に
#header
#maincontent
#footer
を積み上げてるんですが、各要素のボックス間に空白ができてしまいます。
どうやったらぴったりくっつけられるのでしょうか。ご教授お願いします。


803:Name_Not_Found
08/03/23 20:49:20
>>800
鯖の設定だろ。スレ違い。

>>802
まともに作ればできない。間違えてるんだろ、としか言いようがない。

804:Name_Not_Found
08/03/23 21:26:47
>>802
* { margin:0 }

805:Name_Not_Found
08/03/23 21:40:34 Od1QfjZq
URLリンク(www.juken-senryaku.com)
スタイルシートをいじっていたら、レイアウトが崩れてしまいました。
どこの記述をおかしくしてしまったのかよく分かっていない状況です。
どこを直せば直るでしょうか?

806:Name_Not_Found
08/03/23 21:51:26
>>803

css以外(インクルードしているphp等)は正常に読み込めるので
cssの問題だと思ったんですけど、鯖の設定なんですか

どーもw

807:Name_Not_Found
08/03/23 23:44:52
>>802
paddingも0にしといたほうがいいよ。

cssリセットとかでぐぐってみそ。

808:Name_Not_Found
08/03/24 06:33:45 vEH0Pu49
bodyにline-height:1.4;と設定しているのですが
IE以外のブラウザでは反映されません
原因としてはどんなことが考えられるでしょうか?

809:Name_Not_Found
08/03/24 08:14:45
>>808 単位がない

810:Name_Not_Found
08/03/24 09:13:51
line-height にはあえて単位を指定しないっていう手法があったようななかったような

811:Name_Not_Found
08/03/24 10:17:02
回答者が初心者でどうするんだよ・・・

>>808
その前どこかで;が抜けてるとか括弧が全角になってるとか

812:Name_Not_Found
08/03/24 10:19:06 fxuW0qGR
>>808
> line-height:1.4;

これは正しい宣言です。

>>809
実数値だと、 フォントサイズに対する倍率として扱われます。 それは仕様書に明記されています。

>>810
line-heightには長さではなく、 フォントサイズに対する倍率を指定するのが定石です。
(詳しくはウェブで調べたし。)

で、 原因ですが、 その宣言には問題がありませんので、 ほかのところにあると思います。

813:Name_Not_Found
08/03/24 11:46:45
>>808
原因はいろいろ考えられるので↓でチェックするといいよ。
URLリンク(jigsaw.w3.org)

814:Name_Not_Found
08/03/24 13:39:59
@wikiでCSSカスタマイズするとき、全ページのフォントサイズを
大きくするにはどうすればいいんだ?

815:Name_Not_Found
08/03/24 14:18:16
“フォントサイズ「大」でご覧ください。”

816:Name_Not_Found
08/03/24 14:55:28
>>814
「いいんだ?」

817:805
08/03/24 15:29:59 u6N6oHBG
URLリンク(www.juken-senryaku.com)
CSSのURLです。
なにかおかしな記述を見つけられませんか?

818:Name_Not_Found
08/03/24 16:09:47
>>817
>>813

819:Name_Not_Found
08/03/24 16:17:59
floatをclear

820:808
08/03/24 16:50:17 vEH0Pu49
line-heightのことで質問した者です
みなさん、色々とありがとうございます
>>813でチェックしてみましたがCSS自体に問題はありませんでした
完全にお手上げです・・・

821:Name_Not_Found
08/03/24 17:25:54
>820
メシ食ってうんこして寝る
 ↓
次の日温泉に入る
 ↓
このことは忘れる
 ↓
そのうちに思い出して見直す
 ↓
なぜかマズい点が見つかる!ふしぎ!

822:Name_Not_Found
08/03/24 17:55:55
>>821

そして何故か次々にまずい点が見つかる!

1から書き直した方が早いことに気付く

メシ食ってうんこして寝る


823:Name_Not_Found
08/03/24 18:12:01
えんどれす

824:Name_Not_Found
08/03/24 20:19:50
>>820
予想した間隔と違っているから気付いていないだけで
実際には反映されてるんじゃないの?
line-height:5.8;
とかで実験してみそ。

825:808
08/03/25 18:28:47
>>824
ありがとうございます
やってみたのですが、全く変化はありませんでした

そこで試しにbodyではなく、Pの中にline-heightを設定してみたところ
IE以外のブラウザ(火狐)でも反映されるようになりました
なぜ、bodyがダメでPはいいのか、よくわかりませんが・・・

826:Name_Not_Found
08/03/25 18:36:40
>>825
単にどっかで上書きしちゃってるとしか思えないんだが

827:805
08/03/25 20:45:18 g0C8ROQJ
チェッカーで調べて、原因はなにかいろいろいじってるんですが
自分でデザインしたCSSでないので原因がいまだ突き止められません。

URLリンク(www.juken-senryaku.com)

828:Name_Not_Found
08/03/25 20:49:00
>>827
おまえ・・・line-heightどころの問題じゃねーよ。
最初からやり直せ。

829:Name_Not_Found
08/03/25 21:03:26
つーか、htmlの基礎からやり直せ

830:Name_Not_Found
08/03/25 21:23:51
※ページデザインが壊れています。1週間以内に復旧させます。(笑)

831:Name_Not_Found
08/03/25 21:57:12
ユーザビリティ向上のためにうちのサイトにも、
他のサイトで最近よく見るフォントサイズの変更ボタンを置きたいです。

それの設置方法が説明されてるHPありますか?


832:Name_Not_Found
08/03/25 22:00:56
◆ 5行: 要素名に大文字が使われています。(META)
◆ 5行: 属性nameの値がクォーテーションで囲まれていません。
◆ 5行: 属性contentの値がクォーテーションで囲まれていません。
◆ 6行: 要素名に大文字が使われています。(META)
◆ 6行: 要素METAはこの位置には置けません。
◆ 7行: 要素titleはこの位置には置けません。
◆ 8行: 要素linkはこの位置には置けません。
◆ 9行: /headの前に、/metaが必要です。(⇒6行目参照)
◆ 9行: /headの前に、/metaが必要です。(⇒5行目参照)
◆ 17行: /spanに対応する開始タグが見つかりません。
◆ 22行: 属性colorの値がクォーテーションで囲まれていません。
◆ 27行: /aの前に、/imgが必要です。
◆ 32、36、37、38、行: 要素名に大文字が使われています。(SCRIPT)
◆ 38行: /Aの前に、/imgが必要です。
◆ 38行: 要素名に大文字が使われています。(/NOSCRIPT)
◆ 56行: olの中に通常文字を記述することは出来ません。
◆ 73、74、75、76、79、80、81、82、86、87、88、89行: 要素liはこの位置には置けません。
◆ 149行: /bodyの前に、/divが必要です。⇒11行目参照)
【 文法チェック結果: ◆エラー 36, ◇情報 0 】



次ページ
最新レス表示
レスジャンプ
類似スレ一覧
スレッドの検索
話題のニュース
おまかせリスト
オプション
しおりを挟む
スレッドに書込
スレッドの一覧
暇つぶし2ch