1read 100read
2013年17Web制作46: CSS初心者スレッド＝12th＝ (561)
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▼
Netscape Composer でHPを作ろう ! (443)
自称コンサルタントに悩まされています (573)
【ローカルルール】痛い注意書き 2【俺ルール】 (259)
楽天でHP作ってる香具師 (187)
◇ツール関連総合スレッド・Web制作方面◇ (372)
福岡のWEB制作会社2 (431)
CSS初心者スレッド＝12th＝
- 1 ：2012/07/28 ～ 最終レス ：2013/09/15
- CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
《関連スレ》
Webサイト制作初心者用質問スレ part230
http://toro.2ch.net/test/read.cgi/hp/1339311306/
《前スレ》
CSS初心者スレッド＝11th＝
http://toro.2ch.net/test/read.cgi/hp/1327663847/
CSS初心者スレッド＝12th＝ (dat落ち)
http://toro.2ch.net/test/read.cgi/hp/1341746420/
- 2 ：
- 《過去スレ》
CSS初心者スレッド＝10th＝
http://toro.2ch.net/test/read.cgi/hp/1306489752/
CSS初心者スレッド＝9th＝
http://hibari.2ch.net/test/read.cgi/hp/1287470663/
CSS初心者スレッド＝8th＝
http://hibari.2ch.net/test/read.cgi/hp/1273383771/
CSS初心者スレッド＝7th＝
http://pc11.2ch.net/test/read.cgi/hp/1251527427/
CSS初心者スレッド＝6th＝
http://pc11.2ch.net/test/read.cgi/hp/1234355194/
CSS初心者スレッド＝5th＝
http://pc11.2ch.net/test/read.cgi/hp/1228900036/
CSS初心者スレッド＝４ｔｈ＝
http://pc11.2ch.net/test/read.cgi/hp/1218200382/
CSS初心者スレッド＝3rd＝
http://pc11.2ch.net/test/read.cgi/hp/1212198165/
CSS初心者スレッド＝2nd＝
http://pc11.2ch.net/test/read.cgi/hp/1207202319/
CSS初心者スレッド＝1st＝
http://pc11.2ch.net/test/read.cgi/hp/1193327030/
≪各種仕様≫
http://hp.vector.co.jp/authors/VA022006/css/
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://www.d-toybox.com/spec/CSS2.1/appendixC/
http://www.w3.org/Style/CSS/current-work
- 3 ：
- ＿＿＿
(＼ ∞ ﾉ
ヽ)＿ﾉ
└∩───∩┘
ヽ(`･ω･´)ﾉ < １乙 貴男にこれをあげよう・・・
- 4 ：
- CSSは時期尚早
- 5 ：
- /^^ヽ
（｡・-・） ﾔｯﾎ
ﾟし-J
（｡・-・）.｡ｏＯ( お～い )
ﾟし-J
- 6 ：
- このスレの過疎ぶりを見ると抗いようのないCSS廃止への流れが実感できるね
- 7 ：
- ネタにしては面白くもなんともないが
- 8 ：
- html {
height:100%;
}
body {
height:100%;
}
footer {
height:100%;
background: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<article>
<p>aaaaa<br>aaaaa<br>aaaaa</p>
</article>
<footer></footer>
</body>
</html>
footerの部分が猛烈に縦長になってスクロールバーが出てしまいます。
画面にきっちり収まるようにするにはどうすればよいのでしょうか？
- 9 ：
- 30分やって1キルしか取れないnoodですがよろしくお願いします
- 10 ：
- 最近はheaderとかfooterとかarticleとかいうタグがあるのあか？
- 11 ：
- >>10
HTMLにはバージョンがあって、その3つは最新版のHTML5で導入された
- 12 ：
- >>8
footer{
height:100%; ←これいらん
}
- 13 ：
- >>12
いや付ける癖を付けといた方がいいよ
- 14 ：
- >>13
つけない方がいい
- 15 ：
- background-repeat: repeat-y;
で背景繰り返し表示させる時に、
height: auto;
だと表示されないのは、そういう仕様でしょうか？
height: 300px;
とか、具体的に数字を指定すると繰り返しで表示されるのですが。
- 16 ：
- どうせheightの中身がないとかそういうオチだろ
autoの意味を調べてくれば仕様だとわかるよ
- 17 ：
- しっつもーん
文字の上に透過画像をdivで置いても下のリンクとか押せるようにできないですかね？
透過画像は全画面を覆ってます。
- 18 ：
- ①common.css
②general.css
③system.css
それぞれの違いを教えてください
- 19 ：
- <!--mainArea START-->
と
<!--mainArea END-->
に
挟まれている内容をcssで編集するとき
<style type="text/css">
と
</style>
の間にどのように記述したらいいでしょうか・・・？
- 20 ：
- ゾンビエスケープの動画みて
CSS買ってみるか悩んでるんだけど
まだ人いる？
- 21 ：
- 買ってこい !
- 22 ：
- >>18
ファイル名が違う
>>19
CSSは内容を編集する仕組みではないし、
そのような要素選択はできない
- 23 ：
- >>19
知らんがな
- 24 ：
- ＣＳ：Ｓ内でチャットができないんだけど直し方だれかわからない？
- 25 ：
- iPhoneシミュレータで確認していると左右のpaddingで右側だけ10px足りないのですが、
何がいけないのでしょうか。以下ソースです（適宜省略します）。
#contents {padding:0 20px;}
input {width:100%;}
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<article id="contents">
<input type="text">
</article>
上記だとフォームの左側は20pxのマージンがありますが、右側は10pxしか空いていません。
#contents {padding:0 30px 0 20px;}
こうすると左右20pxの空きになります。
- 26 ：
- >>25
何を根拠に30pxを20pxの空きと判断したんだ？
あとmarginとpaddingは全くの別物
- 27 ：
- 質問です。これができないのはどうしてでしょうか。
a:visited img{
opacity:0.5;
}
- 28 ：
- >>27
ブラウザがIEとかいうオチじゃないの？
- 29 ：
- >>28
ありがとうございます。現行 Firefox 14.0.1 です。
セレクタが a:visited だけとか、a img だけ、img だけなら問題なく表示されます。
-moz-opacityプロパティも試しましたがダメでした。
IE(filter),Chrome,Safariもダメでした。
が、Operaならできました！
てことはブラウザの実装の問題でしょうか。
そこまで高度な指定でもないと思ったんですけど…。
a:visited img{border:5px solid green;} だと各ブラウザで効くので、opacityに問題があるっぽい。
a img{opacity:0.5 !important;} だと各ブラウザで効くので、visited疑似クラスに問題があるっぽい。
- 30 ：
- >>29
a:visited img{border:5px solid green;}も効かないわけだがｗ
visited擬似クラスはアンカー要素のみが対象だから効かないのが仕様のはず
- 31 ：
- >>30
緑ボーダー効きませんか？わたしの環境では各ブラウザで効いています。
a img{border:1px solid blue;}
a:visited img{border:5px solid green;}
としてみたところ、既訪リンクが「1pxだけどgreen」という謎状態で表示されました。
「:visitedはリンクの色を変える用途にしか使わないだろ」って前提なんですかね。
だとすれば、:visitedにおいて、opacityだけじゃなくいま試してみたvertical-alignなども効かない理由がわかる気がします。
Operaで効いてしまっているのは、むしろおかしなことだって理解でいいのかな。
- 32 ：
- >>31
とりあえずFxについては
ttps://dev.mozilla.jp/2010/04/plugging-the-css-history-leak/
>訪問済みリンクは、文字、背景、アウトライン、ボーダー、SVG の線と塗りといった、配色のみ変えられるようにします。
これじゃねーかな
その他ブラウザは知らん
- 33 ：
- >>32
理解できました！ありがとうございました。
既訪リンクをわかりやすくするためのユーザースタイルに使いたかっただけなので、
（色を変えられるテキストに比べて、画像だと区別しにくかったのでopacityを使おうと思いました）
セキュリティ対策のせいで適わないのはちょっと歯がゆい気がしますが、仕方ないですね。
- 34 ：
- CSS,HTMLともに全くの知識皆無です。
PHPで動作するアップローダーを探して
入れてみました。
（http://www.k-php.com/script/uploda/）
そこでこのアップローダーに枠を作って（広げて）
説明文を入れたいのですがどうすればいいのでしょう。
- 35 ：
- >>34
自分で試してわからなかったのならともかく
ゼロから作れってのはスレチ
- 36 ：
- >>34
パッと見で回答するけど
<table align="center" width="60%" cellpadding="4" cellspacing="1" bgcolor="#D0D0D0">
のwidthのパーセンテージ増やしてみろ
>>35と同じく遺憾の意
- 37 ：
- width:1280pxにしてると下にスクロールバー？がでるのはどうしてですか？
- 38 ：
- 横1280pxのモニタで最大化してるときってこと？
ブラウザウィンドウには枠があるじゃない
- 39 ：
- 加えて、widthはコンテンツ領域の幅であって、その外側にある、
padding・border・marginの幅を含まないので、これらの設定次第で、
ウィンドウが考慮しなければならない幅は1280pxを超える可能性もある
先走って書くが、誰もがウィンドウサイズを最大にして見てるわけじゃない
1600*900以上のモニタも普及しているが、幅は閲覧者に任せてやって
max-widthだってもう普通に使えるのよ
- 40 ：
- 1280pxだろうがなんだろうが描画域が収まらなかったらスクロールバーが出るよ。
っていう返答じゃだめなの？
- 41 ：
- それはだめなの？ってわざわざ聞くようなことなの？
- 42 ：
- 聞くというより1280pxでスクロールバーが出るとかって質問の仕方が意味不明だから、
出されてない情報想定して答える必要があるのかってことじゃん。
- 43 ：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ドクタイプを上記にしています。
text-shadowがCSSで反映されないのですが、ドクタイプに原因はありますか？
- 44 ：
- 意味がわからない
- 45 ：
- htmlのverとcssのverは別。
どういう環境で反映されないのかを伝える術を知らないのであれば
ポテンシャル的にこの先学ぶだけ無駄だから辞めときな。
質問をする前に「どうすれば回答者に意図が伝わるか、環境を伝えれるか」っていう
基本的プロセスぶっ飛ばすヤツは要らない。
- 46 ：
- CSSって何なんですか？
wiki見てもわからなかった
- 47 ：
- >>46
文字の色変えたり、枠で囲ったりするやつ
- 48 ：
- HTMLの見た目を定義するもの
もう少し具体的に聞いた方がよい答えもらえるよ
- 49 ：
- というかwiki（pedia？）見ただけで完結しちゃいかんわ
- 50 ：
- http://cdn.uploda.cc/img/img50508564411dd.png
画像（上）は、<p>タグにボーダースタイルで下線をつけたものです。
画像（下）のように、全ての文字の下＋文字が無くても、その段落の終わりにまで下線をひくことは、CSSで可能ですか？
※<span>にして下線をかけると、文字の下にしか下線がつかなかったので、イメージと少し違いました。
<p>でも<span>でも特にこだわらないので、何か方法があったら教えて下さい。
- 51 ：
- text-decorationが挙動じゃないならfont-sizeから幅計算して背景でrepoeatすればいいんじゃん。
- 52 ：
- マルチは帰れ
- 53 ：
- 創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
- 54 ：
- <article>
<h1>昆虫</h1>
<section>
<h1>カブトムシ</h1>
<section>
<h1>特徴</h1>
<p>～説明～</p>
</section>
<section>
<h1>食べ物</h1>
<p>～説明～</p>
</section>
</section>
<section>
<h1>クワガタ</h1>
<section>
<h1>特徴</h1>
<p>～説明～</p>
</section>
<section>
<h1>食べ物</h1>
<p>～説明～</p>
</section>
</section>
</article>
アウトライン一段目 昆虫
アウトライン二段目 カブトムシ、クワガタ
アウトライン三段目 特徴、食べ物
「昆虫」を赤文字、「カブトムシ、クワガタ」を青文字、「特徴、食べ物」を緑文字にするCSSの書き方を教えて下さい
idやclassを使わずセレクタで指定する方法を希望です
それと、見出しにそれぞれにスタイルを指定する時は見出しの一つ一つにclassを書くほうがいいのか、またはsectionを使っての見出しでh1だけのセクション分けはせずh1、h2、h3をった方がいいのかもあわせて答えてくれると嬉しいです
- 55 ：
- >>54
<font color="red">昆虫</font>
<font color="blue">カブトムシ、クワガタ</font>
<font color="green">特徴、食べ物</font>
俺はお前みたいにarticleやらsection分けしない
h1を大量に使うのも意味不明
- 56 ：
- >>54
セクションの見出しはhtml5仕様書では
・h1だけ使う
・セクションの入れ子に合わせて見出しランクのを使う
の2つが推奨されているのでどっちを使ってもいいようです
ttp://www.mdn.co.jp/di/articles/2432/?page=8
＞セクショニング要素を使って明示的にセクションの範囲をマークアップすると、もはやh1 ～h6 要素の数字に
＞意味はないということだ。アウトラインは、あくまでもセクショニング要素の入れ子の深さで決まる。
見出しのランクによってスタイルを変えたいならばh1だけで書かれたhtml5よりh1～h6で明示的に書いたほうがCSSを書きやすいと思います
それともh1だけで書かなければならない理由などあるのでしょうか？
- 57 ：
- >>54
article > h1
article > section > h1
と子セレクタで深さを示すことができる
h1要素のみでとするかどうかは制作者次第
>>55
ネタにしては全然面白くない
- 58 ：
- floatを使ったボックスレイアウトで質問なんですが
http://cdn.uploda.cc/img/img505eef6f3964b.jpg
上記の画像のようにヘッダ部分にサイトタイトルとgoogleのサイト内検索を配置するような場合
文字とスクリプトを横に並べる方法について教えてください。
positionで位置を調整していたんですが、ブラウザによって位置がけっこう変わってしまいます。
ヘッダのボックスを左右に分割することも考えたんですが、できれば1つのままで対処したいと思っています。
- 59 ：
- こんなヨレヨレレイアウトは無理ですう
- 60 ：
- そんなこと言わずにおしえておくれよう
- 61 ：
- で、ソースどうなってて何によってブラウザでの位置がずれる原因になってんの
- 62 ：
- すみません、解決しました！
positionは実は悪くなくて、検索フォームで設定する文字数の幅の扱いがブラウザ毎に違うみたいで
それで表示が違って見えていました。（positionを疑ってごめんよ～
フォームのテキストボックスを文字数ではなくてpxで指定することで解決しました。
ありがとうございました。
- 63 ：
- form関係は基本ブラウザ依存だからsafariやchromeでへんなことなってなければいいね。
ただのtextでfileとかつかってなさそうだから問題なさそうだけど。
- 64 ：
- IE9でテーブルの行数が増えるとcssに記載したwidthの指定が無視される…
10行ぐらいだと問題なく反映されるんだけど、
40行ぐらいになるとして反映されずにレイアウトが崩れる
厳密には同一のテーブルが4つあるから160行ぐらいあるとはいえ、なぜ行数が増えると反映されない。
Firefoxやchrom、IE8では起きないんだけど、こういう現象が起こる原因って何かあるでしょうか？
- 65 ：
- 書き間違いじゃないの、としか
- 66 ：
- >65
プログラムで動的に行数が増えているだけなので、書き間違えってのはちょっとありえないんです。
- 67 ：
- だったら益々CSSの問題じゃなくてJSの問題じゃないのｗ
- 68 ：
- >67
diffとって行数以外違いがないのも確認してます…
- 69 ：
- >>666
書き間違えじゃないのってのはCSSのことだがそっちも確認しろよ
というか行数以外違いがないのが駄目なんでは
- 70 ：
- >69
行数以外違いがないのがだめっていうのはどういう状態なんでしょうか？
現状は下記のようなものがあり(列数はもう少し多いですが)、以下繰り返しの行数が増えるとthのclassの指定が反映されなくなる感じなんですが…
やってることとしては言ってしまえば、Excelの分割なので実際には同じものが4つ出力されている感じです。
hoge.css
=====
.wi80 {
width: 80px;
}
.wi180 {
width: 180px;
}
=====
表示ページの問題個所
=====
<table>
<tr>
<th class="wi80">項目1</th><th class="wi180">項目2</th><th class="wi180">項目3</th><th class="wi180">項目4</th>
</tr>
--以下行数分繰り返し
<tr>
<td><input></td>
<td><select><option value="0">0</option><option value="1">1</option></select></td>
<td>値3</td>
<td>値4</td>
</tr>
--
</table>
=====
- 71 ：
- 1行目で固めるならtable-layout: fixedにするとか
というか最初からソース書かんかい
- 72 ：
- >>70
内容によって押し広げてる状態だったらwidthは最小値の設定しかしないまで正常
- 73 ：
- >>70
最小値の設定しかシナイので、だった
しかしwidth指定するならcolにしれ
- 74 ：
- >71
すいません、冗長かなと思ったので…
fixedとかテーブル関連のcssをいろいろと調べてやってみます。
>72
それならわかるんですが、逆に縮むんです。
180確保したいのに、50ぐらいしか確保されないために
レイアウトがぐったぐたになってしまうといった感じです
- 75 ：
- http://webdev-nekodama.xii.jp/css/hack.php?h=white-space
一瞬これかなと思った
- 76 ：
- >>74
ベタHTMLでならないんならJSの問題
というかならないと思う
- 77 ：
- >76
問題が起こっているときにはjs動いてないです。
現状はとりあえず、サーバで表示データ作成し、動きとかレイアウトとかだけを見てるところです。
ページを開いた状態で、ある一定以上の行数があれば崩れて、そうでなければ崩れないって状態なので。
それでIE9のみ表示がおかしくなってるから？？？ってなってたんです。
- 78 ：
- いやJSで生成してるんだろｗ
- 79 ：
- >78
だからしてませんって。
実装予定としては、繰り返し部分をajaxで更新したり、スクロール同期をとったりとかする予定ですが、
現状jsがそもそも画面内に存在してません。
- 80 ：
- プログラムで動的に行数が増えているって言ってるのは一体
それじゃなくてベタで同じソース作れよってことだろう
- 81 ：
- >80
動的と言ったらすべてjsになるのがwebなんでしょうか？サーバ側の実装で行数を増やすのも動的だと思いますが。
サーバ側で生成した文字列（テーブル）をそのまんまhtmlに4回出力しているだけです。
- 82 ：
- 最近はそうね
だからどっちにしろベタに作れって
- 83 ：
- >82
あなたの言うべたが理解できません。
1.SQLで該当するデータを抽出
2.テーブルのth部分を生成
3.その件数分テーブルのtr要素を作成
4.それを4回出力
5.出力結果をhtmlとして送信
これいじょうどうやったらべたに実装できるんですか？申し訳ありませんが、教えていただけますか？
- 84 ：
- CSSの問題じゃなくなってるし
スレチ
- 85 ：
- IE9特有のCSSバグかと言われると微妙。
データベースから読み込んだデータ（特に40個目あたり）がうまくエスケープできてないとか、そういう可能性を疑っちゃう。
- 86 ：
- なんにせよこのままだとエスパー能力がないと無理そうだから
実際のサイトを提示して欲しいところだな
- 87 ：
- 質問です
divに背景色をつけて横線として使ってます
widthを指定して表示できるようになりましたが
本文の右端で切れてしまいます
↓こういうふうにしたいんですが
あいうえおかきくけこ
---------------------------------- 続きはここ
↓こうなってしまいます
あいうえおかきくけこ
--------------------------
続きはここ
divで作った横線は「こ」の右端で切れて
「続きはここ」が改行されてしまいます
本文があるセルにwidthを指定すれば
強引に右端まで表示できるようになりますが
divは1つの要素として解釈されないのでしょうか
- 88 ：
- セルってのはテーブルのtd要素のことをいうんだが。
何がしたいのかいまいちわからん、ソースを提示して欲しい
- 89 ：
- <table>
<td>
あいうえおかきくけこ
<div class="aaa"></div><a href="URL">続きはここ</a>
</td>
</table>
.aaa {
width: 500px;
height: 3px;
float: left;
}
tableとtdにwidth="600"などと入れれば
divで作った横線がきちんと表示されますが
こういったことをせずに
右側が切れることなく表示させたいんです
- 90 ：
- >>89
そもそもhtmlがおかしいので正しいのにしてくださいとしか
- 91 ：
- >>89
<table>
<tr>
<td>
あいうえおかきくけこ
<div style="border-left: 500px black solid; text-align: right;"><a href="URL">続きはここ</a></div>
</td>
</tr>
</table>
- 92 ：
- なぜかFireFoxとIEでは挙動が違うのですが
何となくわかってきました
ヒントありがとうございました！
- 93 ：
- 質問なのですが、cssで子要素に特定の条件があった場合親要素にも適用させるという記述はできるのでしょうか？
例
<li><a>hoge1</a></li>
<li><a id="hogeID">hoge2</a></li>
上記の場合で2行目の<li>にも#hogeIDと同様のcssを適用させたい。
仕様上<li>には個別にclassやidを追記できない。
- 94 ：
- >>93
無理
- 95 ：
- しばらーく待てば使えるようになるかもしれない
?li > #hogeID
- 96 ：
- >>94 >>95
そうですが特定の親で子に適用できるからその逆もできると思っていましたが出来ないんですね。
ありがとうございました。
- 97 ：
- 外部スクリプトからinnerHTMLか何かで書き込まれる内容に、styleが含まれます。
「padding:0; margin:0;」とされるため、周辺とずれて違和感があります。
これを無効化する、もしくはデフォルトに指定する方法はありませんか。
固定値で試してみたんですが、IE9だと、margin:0 0 0 1.5em;、
IE6だと、margin:0 0 0 2em;で揃うので、たぶん他のブラウザもバラバラな
気がするんですよね。
- 98 ：
- 外部スクリプトの指定の方法による
- 99 ：
- input type="number"
の中身を中央揃えするにはどうすればよいでしょうか？
- 100read 1read
- 1read 100read
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
Wordでいいじゃん (104)
恐くて見れない画像解説スレinWEB制作板 (472)
熊本のWeb制作会社について語ろう (151)
おまいらどういう流れでWEBデザイナーになった？ (835)
福岡のWEB制作会社2 (431)
『ｱｰﾄ･音楽･ﾃｷｽﾄ』等のオﾘｼﾞﾅﾙ物系ｻｲﾄ管理人の集い (170)
--log9.info------------------
【本土】国産ヒラタ Part7【離島亜種】 (597)
神奈川のカブクワ採集ポイント (738)
ここの住人は生物学の知識がなさすぎる。 (220)
東京都２３区 カブト・クワガタ 採集スレ vol.2 (276)
【総合】☆カブト ★ クワガタ☆【スレッド】 (179)
世界最重量のゾウカブトを語れ (859)
アシダカグモについて語ろう (844)
ついに帰ってきた！笑ったコピーをぺー！in昆虫版2 (318)
★クワガタ採集★原住民とトラブル！ (275)
ミルワーム好きが大いに語るスレ (885)
カブト、クワガタ飼育の失敗体験 (359)
コクワガタを極めるスレ 12 (374)
☆離島のクワガタを熱く語るスレ☆ (333)
【自称研究家】ダケン(吉田賢治)先生スレ【虫研】 (903)
シェンクリンクについて（情報皆無） (911)
クワガタ、カブトの値段議論 (170)
--log55.com------------------
最高の氏は何か
ローマ帝国滅亡から暗黒の中世へ7
悟った人の日月神示 2
【ｺﾃﾊﾝ禁止】TOEIC L&R公開試験各回統一スレ323
英作の添削してちょ
【ようつべ】YouTubeで勉強するスレ２【使えるよ!】
なぜ英語は発音と綴りを一致させないのか？
今年英検1級とTOEIC950取ったけど質問ある？
-
