具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
《関連スレ》
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/
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
(＼ ∞ ﾉ
ヽ)＿ﾉ
└∩───∩┘
ヽ(`･ω･´)ﾉ < １乙 貴男にこれをあげよう・・・
（｡・-・） ﾔｯﾎ
ﾟし-J
（｡・-・）.｡ｏＯ( お～い )
ﾟし-J
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の部分が猛烈に縦長になってスクロールバーが出てしまいます。
画面にきっちり収まるようにするにはどうすればよいのでしょうか？
HTMLにはバージョンがあって、その3つは最新版のHTML5で導入された
footer{
height:100%; ←これいらん
}
いや付ける癖を付けといた方がいいよ
つけない方がいい
で背景繰り返し表示させる時に、
height: auto;
だと表示されないのは、そういう仕様でしょうか？
height: 300px;
とか、具体的に数字を指定すると繰り返しで表示されるのですが。
autoの意味を調べてくれば仕様だとわかるよ
文字の上に透過画像をdivで置いても下のリンクとか押せるようにできないですかね？
透過画像は全画面を覆ってます。
②general.css
③system.css
それぞれの違いを教えてください
と
<!--mainArea END-->
に
挟まれている内容をcssで編集するとき
<style type="text/css">
と
</style>
の間にどのように記述したらいいでしょうか・・・？
CSS買ってみるか悩んでるんだけど
まだ人いる？
ファイル名が違う
>>19
CSSは内容を編集する仕組みではないし、
そのような要素選択はできない
知らんがな
何がいけないのでしょうか。以下ソースです（適宜省略します）。
#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の空きになります。
何を根拠に30pxを20pxの空きと判断したんだ？
あとmarginとpaddingは全くの別物
a:visited img{
opacity:0.5;
}
ブラウザがIEとかいうオチじゃないの？
ありがとうございます。現行 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疑似クラスに問題があるっぽい。
a:visited img{border:5px solid green;}も効かないわけだがｗ
visited擬似クラスはアンカー要素のみが対象だから効かないのが仕様のはず
緑ボーダー効きませんか？わたしの環境では各ブラウザで効いています。
a img{border:1px solid blue;}
a:visited img{border:5px solid green;}
としてみたところ、既訪リンクが「1pxだけどgreen」という謎状態で表示されました。
「:visitedはリンクの色を変える用途にしか使わないだろ」って前提なんですかね。
だとすれば、:visitedにおいて、opacityだけじゃなくいま試してみたvertical-alignなども効かない理由がわかる気がします。
Operaで効いてしまっているのは、むしろおかしなことだって理解でいいのかな。
とりあえずFxについては
ttps://dev.mozilla.jp/2010/04/plugging-the-css-history-leak/
>訪問済みリンクは、文字、背景、アウトライン、ボーダー、SVG の線と塗りといった、配色のみ変えられるようにします。
これじゃねーかな
その他ブラウザは知らん
理解できました！ありがとうございました。
既訪リンクをわかりやすくするためのユーザースタイルに使いたかっただけなので、
（色を変えられるテキストに比べて、画像だと区別しにくかったのでopacityを使おうと思いました）
セキュリティ対策のせいで適わないのはちょっと歯がゆい気がしますが、仕方ないですね。
PHPで動作するアップローダーを探して
入れてみました。
（http://www.k-php.com/script/uploda/）
そこでこのアップローダーに枠を作って（広げて）
説明文を入れたいのですがどうすればいいのでしょう。
自分で試してわからなかったのならともかく
ゼロから作れってのはスレチ
パッと見で回答するけど
<table align="center" width="60%" cellpadding="4" cellspacing="1" bgcolor="#D0D0D0">
のwidthのパーセンテージ増やしてみろ
>>35と同じく遺憾の意
ブラウザウィンドウには枠があるじゃない
padding・border・marginの幅を含まないので、これらの設定次第で、
ウィンドウが考慮しなければならない幅は1280pxを超える可能性もある
先走って書くが、誰もがウィンドウサイズを最大にして見てるわけじゃない
1600*900以上のモニタも普及しているが、幅は閲覧者に任せてやって
max-widthだってもう普通に使えるのよ
っていう返答じゃだめなの？
出されてない情報想定して答える必要があるのかってことじゃん。
ドクタイプを上記にしています。
text-shadowがCSSで反映されないのですが、ドクタイプに原因はありますか？
どういう環境で反映されないのかを伝える術を知らないのであれば
ポテンシャル的にこの先学ぶだけ無駄だから辞めときな。
質問をする前に「どうすれば回答者に意図が伝わるか、環境を伝えれるか」っていう
基本的プロセスぶっ飛ばすヤツは要らない。
wiki見てもわからなかった
文字の色変えたり、枠で囲ったりするやつ
もう少し具体的に聞いた方がよい答えもらえるよ
画像（上）は、<p>タグにボーダースタイルで下線をつけたものです。
画像（下）のように、全ての文字の下＋文字が無くても、その段落の終わりにまで下線をひくことは、CSSで可能ですか？
※<span>にして下線をかけると、文字の下にしか下線がつかなかったので、イメージと少し違いました。
<p>でも<span>でも特にこだわらないので、何か方法があったら教えて下さい。
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
<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をった方がいいのかもあわせて答えてくれると嬉しいです
<font color="red">昆虫</font>
<font color="blue">カブトムシ、クワガタ</font>
<font color="green">特徴、食べ物</font>
俺はお前みたいにarticleやらsection分けしない
h1を大量に使うのも意味不明
セクションの見出しはhtml5仕様書では
・h1だけ使う
・セクションの入れ子に合わせて見出しランクのを使う
の2つが推奨されているのでどっちを使ってもいいようです
ttp://www.mdn.co.jp/di/articles/2432/?page=8
＞セクショニング要素を使って明示的にセクションの範囲をマークアップすると、もはやh1 ～h6 要素の数字に
＞意味はないということだ。アウトラインは、あくまでもセクショニング要素の入れ子の深さで決まる。
見出しのランクによってスタイルを変えたいならばh1だけで書かれたhtml5よりh1～h6で明示的に書いたほうがCSSを書きやすいと思います
それともh1だけで書かなければならない理由などあるのでしょうか？
article > h1
article > section > h1
と子セレクタで深さを示すことができる
h1要素のみでとするかどうかは制作者次第
>>55
ネタにしては全然面白くない
http://cdn.uploda.cc/img/img505eef6f3964b.jpg
上記の画像のようにヘッダ部分にサイトタイトルとgoogleのサイト内検索を配置するような場合
文字とスクリプトを横に並べる方法について教えてください。
positionで位置を調整していたんですが、ブラウザによって位置がけっこう変わってしまいます。
ヘッダのボックスを左右に分割することも考えたんですが、できれば1つのままで対処したいと思っています。
positionは実は悪くなくて、検索フォームで設定する文字数の幅の扱いがブラウザ毎に違うみたいで
それで表示が違って見えていました。（positionを疑ってごめんよ～
フォームのテキストボックスを文字数ではなくてpxで指定することで解決しました。
ありがとうございました。
ただのtextでfileとかつかってなさそうだから問題なさそうだけど。
10行ぐらいだと問題なく反映されるんだけど、
40行ぐらいになるとして反映されずにレイアウトが崩れる
厳密には同一のテーブルが4つあるから160行ぐらいあるとはいえ、なぜ行数が増えると反映されない。
Firefoxやchrom、IE8では起きないんだけど、こういう現象が起こる原因って何かあるでしょうか？
プログラムで動的に行数が増えているだけなので、書き間違えってのはちょっとありえないんです。
diffとって行数以外違いがないのも確認してます…
書き間違えじゃないのってのはCSSのことだがそっちも確認しろよ
というか行数以外違いがないのが駄目なんでは
行数以外違いがないのがだめっていうのはどういう状態なんでしょうか？
現状は下記のようなものがあり(列数はもう少し多いですが)、以下繰り返しの行数が増えると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>
=====
というか最初からソース書かんかい
内容によって押し広げてる状態だったらwidthは最小値の設定しかしないまで正常
最小値の設定しかシナイので、だった
しかしwidth指定するならcolにしれ
すいません、冗長かなと思ったので…
fixedとかテーブル関連のcssをいろいろと調べてやってみます。
>72
それならわかるんですが、逆に縮むんです。
180確保したいのに、50ぐらいしか確保されないために
レイアウトがぐったぐたになってしまうといった感じです
一瞬これかなと思った
ベタHTMLでならないんならJSの問題
というかならないと思う
問題が起こっているときにはjs動いてないです。
現状はとりあえず、サーバで表示データ作成し、動きとかレイアウトとかだけを見てるところです。
ページを開いた状態で、ある一定以上の行数があれば崩れて、そうでなければ崩れないって状態なので。
それでIE9のみ表示がおかしくなってるから？？？ってなってたんです。
だからしてませんって。
実装予定としては、繰り返し部分をajaxで更新したり、スクロール同期をとったりとかする予定ですが、
現状jsがそもそも画面内に存在してません。
それじゃなくてベタで同じソース作れよってことだろう
動的と言ったらすべてjsになるのがwebなんでしょうか？サーバ側の実装で行数を増やすのも動的だと思いますが。
サーバ側で生成した文字列（テーブル）をそのまんまhtmlに4回出力しているだけです。
だからどっちにしろベタに作れって
あなたの言うべたが理解できません。
1.SQLで該当するデータを抽出
2.テーブルのth部分を生成
3.その件数分テーブルのtr要素を作成
4.それを4回出力
5.出力結果をhtmlとして送信
これいじょうどうやったらべたに実装できるんですか？申し訳ありませんが、教えていただけますか？
スレチ
データベースから読み込んだデータ（特に40個目あたり）がうまくエスケープできてないとか、そういう可能性を疑っちゃう。
実際のサイトを提示して欲しいところだな
divに背景色をつけて横線として使ってます
widthを指定して表示できるようになりましたが
本文の右端で切れてしまいます
↓こういうふうにしたいんですが
あいうえおかきくけこ
---------------------------------- 続きはここ
↓こうなってしまいます
あいうえおかきくけこ
--------------------------
続きはここ
divで作った横線は「こ」の右端で切れて
「続きはここ」が改行されてしまいます
本文があるセルにwidthを指定すれば
強引に右端まで表示できるようになりますが
divは1つの要素として解釈されないのでしょうか
何がしたいのかいまいちわからん、ソースを提示して欲しい
<td>
あいうえおかきくけこ
<div class="aaa"></div><a href="URL">続きはここ</a>
</td>
</table>
.aaa {
width: 500px;
height: 3px;
float: left;
}
tableとtdにwidth="600"などと入れれば
divで作った横線がきちんと表示されますが
こういったことをせずに
右側が切れることなく表示させたいんです
そもそもhtmlがおかしいので正しいのにしてくださいとしか
<table>
<tr>
<td>
あいうえおかきくけこ
<div style="border-left: 500px black solid; text-align: right;"><a href="URL">続きはここ</a></div>
</td>
</tr>
</table>
何となくわかってきました
ヒントありがとうございました！
例
<li><a>hoge1</a></li>
<li><a id="hogeID">hoge2</a></li>
上記の場合で2行目の<li>にも#hogeIDと同様のcssを適用させたい。
仕様上<li>には個別にclassやidを追記できない。
無理
?li > #hogeID
そうですが特定の親で子に適用できるからその逆もできると思っていましたが出来ないんですね。
ありがとうございました。
「padding:0; margin:0;」とされるため、周辺とずれて違和感があります。
これを無効化する、もしくはデフォルトに指定する方法はありませんか。
固定値で試してみたんですが、IE9だと、margin:0 0 0 1.5em;、
IE6だと、margin:0 0 0 2em;で揃うので、たぶん他のブラウザもバラバラな
気がするんですよね。
の中身を中央揃えするにはどうすればよいでしょうか？
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
ＷｉｎのＩＥ６はそろそろ見捨てていいですか？ (922)
【ｱｸｾｽUP】■携帯電話検索エンジン ３■【ﾎﾟｰﾀﾙ】 (215)
+ JavaScript の質問用スレッド vol.104 + (890)
HP作成ソフトについて語って (310)
色々なHTML (547)
HP作成ソフトについて語って (310)
--log9.info------------------
GBのスーパーロボット大戦総合 (272)
【ＧＢＣ】~攻めCOMダンジョン~ドルルルアーガ (713)
GBの名作・カエルの為に鐘は鳴る を語ろう 2 (274)
王ドロボウＪＩＮＧ (480)
凸テトリス総合スレッド凸 (207)
【レトロ】GG忍びスレ【ゲームギア】 (344)
DQモンスターズ テリーのワンダーランド +5 (647)
【独特】ラブルセイバー総合【ムード】 (445)
【劣化】サンリオタイムネット【ポケモン】 (936)
SDガンダムスレッド (507)
てけ！てけ！アスミッくんワールド (443)
【RPG】セレクションとネコジャラ物語【ケムコ】 (281)
【WSC】ワイルドカード 第8章【SC】 (285)
風来のシレンGB～月影村の怪物～part6 (324)
＝ Atari Lynx (アタリ・リンクス) 総合スレ ＝ (353)
【GW】ゲームボーイギャラリー総合スレ【GB】 (384)
--log55.com------------------
●2輪ロードレース総合 (MotoGP/SBK etc.) 359●
【Toro Rosso】トロロッソ応援スレ 76【Red Bull】
□■2019□■F1GP総合 LAP2024□■独□■
レッドブル・レーシング -【Red Bull Racing】- #49
□■2019□■F1GP総合 LAP2025□■独□■
鈴鹿8時間耐久ロードレース 6周目
□■2019□■F1GP総合 LAP2026□■独□■
□■2019□■F1GP総合 LAP2028□■独□■