1read 100read
2013年01月Web制作12: CSS初心者スレッド=12th= (232)
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▼
2chに晒された管理人の憩いの場。 3 (944)
【SEO】みんなで1位獲得【業者は見ないで】 (231)
+ JavaScript の質問用スレッド vol.104 + (890)
ページランクが付くまでマターリするスレ13 (701)
関西圏のWEB制作会社 4 (480)
自分のサイトやブログに自分の顔写真載せてる奴 (315)
CSS初心者スレッド=12th=
- 1 :2012/07/28 〜 最終レス :2013/01/16
- 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初心者スレッド=4th=
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 :
- ___
(\ ∞ ノ
ヽ)_ノ
└∩───∩┘
ヽ(`・ω・´)ノ < 1乙 貴男にこれをあげよう・・・
- 4 :
- CSSは時期尚早
- 5 :
- /^^ヽ
(。・-・) ヤッホ
゚し-J
(。・-・).。oO( お〜い )
゚し-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
Ageneral.css
Bsystem.css
それぞれの違いを教えてください
- 19 :
- <!--mainArea START-->
と
<!--mainArea END-->
に
挟まれている内容をcssで編集するとき
<style type="text/css">
と
</style>
の間にどのように記述したらいいでしょうか・・・?
- 20 :
- ゾンビエスケープの動画みて
CSS買ってみるか悩んでるんだけど
まだ人いる?
- 21 :
- 買ってこい !
- 22 :
- >>18
ファイル名が違う
>>19
CSSは内容を編集する仕組みではないし、
そのような要素選択はできない
- 23 :
- >>19
知らんがな
- 24 :
- CS:S内でチャットができないんだけど直し方だれかわからない?
- 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;}も効かないわけだがw
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の問題じゃないのw
- 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で生成してるんだろw
- 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元 削除依頼 ▲
CSS Tips コレクション (247)
VALID SEO被害者の会 (911)
SEOのパワーテクノロジー (707)
雑談スレ (402)
【jQuery】JavaScript ライブラリ総合質問所 vol.2 (384)
Dreamweaver Fireworks♪Macプロ(その23) (507)
--log9.info------------------
年末大掃除 交換スレ (296)
OSXはあと3年もすれば・・・ (パート2) (315)
第一回Macワープロソフト選手権 (292)
PB2400cをつかってるひといるか? part4 (282)
マックじゃ出来ないことって何ですか? (333)
元祖iMac (603)
LC575使ってる奴いる? (265)
新型Mac発表! (240)
Apple】ついにiPodまでもが破裂・発火 (203)
Macは好きだが、なんちゃってMacユーザが大嫌い (422)
最高のスピーカーforMAC (318)
Macでfriio 2台目 (816)
Mac mini Part112 (738)
【Disk】ディスクメンテナンスソフト総合スレ3 (658)
iMac part 169 (914)
【水没】僕ちんのiPodがぁぁっ【バンジー】 (397)
--log55.com------------------
一杯のかけそばを知っている奴集まれ!
フルオートメーション介護
あらすじ.comについて語るスレ★2ピコ目
◆◆◆プロ作家の最低な小説◆◆◆
小説現代ショートショートコンテスト2
☆一行リレー小説 『一夜物語』★
【執筆談義】喫茶店・フードコートで執筆する人々
SNバッファロームラカミ
-