HTML/CSS のどんな質問にも優しく答えるｽﾚ 44
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 43
https://mevius.5ch.net/test/read.cgi/hp/1583911920/
■関連スレ
Webサイト制作初心者用質問スレ part251
http://mevius.5ch.net/test/read.cgi/hp/1564414228/l50
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html js/css初心者です。
HTMLのテーブルにリアルタイムに行(tr)を追加するページを作っています。
(1秒間に最大数十行追加、一定行以上は削除する)
新しく追加した行が一定時間だけハイライトされるように、trに対してanimationスタイルを適用して赤から無色にbackground-colorが変化するようにしています。
ただ、セル(td)には列単位で一部個別のbackground-colorが適用されており、優先順位の関係で上記のtrに対するアニメーションが反映されません。
反映されない理由は理解しています。
アニメーションでなはく永続的なものであれば、スクリプトでtd側をtransparentにしたりクラスを除去したり等で回避できるかと思いますが、trのアニメーション終了後はセルのbackground-colorで表示させたいです。
個々のtdに対してanimationさせたり、setTimerやイベントでクラスを操作しないと無理でしょうか？ >>924
> 今の1セレクタ1行で4000行もあるから、何万行にもなっちゃうｗ
CSSつかうとそうなるよね。行数が増えてメンテナンスが不可能になっちゃう
そういうときにSCSSを使うんだよ
半分以下になるはずだよ 適当にpx, %, emとか使ってしまうんだけど、
フォントはremだけでええんか？ >>955
確かに、この数千行の左側なんて同じ文字列の繰り返しで600KBもファイルあるしなぁ。
apacheでdeflateしてるから実際は数十KBだろうけど。 そういう意味ならsass使っても変わらんな最後にcss吐くんだから >>954
td には属さない、tr だけの範囲を作れば？
tdの外側で、trの内側の範囲
その部分だけは、trのアニメが使えるのでは？ >>958
だよな。>>955は何とんちんかんな事言ってんだって思った >>959
赤から無色の変化分部はtrの背景色でするのではなく、
before疑似要素で背景専用のオーバーレイ要素を作りそれを一番上になるようにレイヤーを重ねる
ざっくりでこんな感じで
tr{
position:relative;
}
tr:before{
content:'';
posirion:absolute;
top:0;
left:0
z-index:3;
background-color: rgba(100,100,255,1.0);
} ありがとうございます。
>>959
tdの外にspanで囲むということでしょうか？
それでもspanのbackground-colorが優先されtrのアニメーションは適用されませんでした。
また1セル(td)=1データという形の表にしたいのでtdは使いたいです。
>>961
GASを使っているためか、trのposition=relativeが効かない問題が出ており::beforeが変なところに出てしまっていますが、
それはまた別問題として、このtr::beforeでオーバーレイさせるという方法で、tr 1行の背景色が反映される仕組みがよくわかりません。
contentが空の状態だとこの疑似要素のbackground-colorは表示されませんでした。
例えばcontentのところに何らかの文字を入れると、その文字分だけ背景色が表示されます。
trの行頭から行末までぴったり色を重ねるというのはこの方法でできるのでしょうか？？
以下のような単純なHTMLで試しています。
tr.test_row {
position: relative;
}
tr.test_row::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 3;
background-color: rgba(100,100,255,1.0);
}
<table border="1">
<tr class="test_row"><td>あ</td><td>い</td><td>う</td></tr>
</table>
まだ知識が浅く、的外れな質問をしてしまっていたらすみません。 tableでマウスオーバーでtrのカラーを変えるのはできるけど、
縦ってどうすれば実現できるの？ >>963
tr.test_row::beforeにwidthやheightを指定する必要があるよ >>963
ほい。GASは関係ないかと。
tr.test_row {
display:block;
position: relative;
background-color: #f5f5f5;
}
tr.test_row::before {
content: '';
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
z-index: 3;
background-color: rgba(100,100,255,0.8);
} >>965,967
ありがとうございます！
できました。
ただ、「重ねる」ってことで薄々気づいていましたが、文字の上からになっていまうのはしょうがないんですよね？
アニメーションをある程度透過した色からスタートさせることで違和感は減りましたが、文字には影響させないっていうのはやはり無理ですよね。
いろいろ難しいですね… そら本来JSでやるべきアニメーションを、CSSだけでやろうとか言ってたら、そうなるわな
CSS3で機能が増えたせいで、本来の棲み分けが分からなくなっている人が多い気がする 6年ぐらい前に
box-sizingをcontent-boxで書かれた、divで入れ子しまくりなサイトを
いずれレスポンシブも考慮してborder-boxで書き換えたいんだけど、
開発ツールで*{box-sizing:border-box}にすると、
グシャっと変わってびびるけど基本的に幅が小さくなるのよね？
どのプロパティあたりからレイアウトを整えていけば良いの？
box-orderしかしらないから、ちょっとpaddingつけたりして崩れるの怖すぎ content-boxのままじゃいかんの？
borderとpaddingを勘定の内に入れればいいだけよ >>968
例えばこれを追記すればtdと文字が一番上に来る
tr.test_row td {
position: relative;
z-index: 4;
}
純粋に文字だけ一番上にしたいならHTML側に文字をspanで括るなどしてこうすればいい
tr.test_row td span {
position: relative;
z-index: 4;
} >>968
ちなみにjs側がどう書いてるのか気になる
気が向いたらソース書いてくれ >>973
jsの部分はテーブルに行を追加してクラスを割り当てているだけなので、あまり本質ではないと思って載せていませんでした。
細かくは省略はしていますが、↓こんな感じです。>>954で質問した際に動かしていたパターンです。
新しいデータを取得する度に addRow が呼び出されるイメージです。
-- js
function addRow(data) {
var elemTable = document.getElementById("test_table");
var newRow = elemTable.insertRow(0);
newRow.classList.add('test_row');
newRow.innerHTML = "<td nowrap>" + data[0] + '</td><td nowrap class="' + data[1] + '">' + data[1] + '</td>";
}
-- css
td.class1 {
background-color: lightgreen;
}
td.class2 {
background-color: lightpink;
}
@keyframes red-fade {
0% {background: red;}
100% {background: none;}
}
tr.test_row {
animation: red-fade 1s linear 1;
} 当初の質問のとおりtdのbackground-colorが優先され、trのアニメーションのbackgound-colorがそのtdだけには反映されない、というものです。
data[1]には上記の例では"class1"とか"class2"とかが入り、値に応じたクラス=色が割り当たるイメージです。
(イメージとして、ログ出力でのcritical/error/warningで色を変えるイメージ)
実現したいことは、tdにbackground-colorが割り当たっていても、trのアニメーション中はtrの色で表示し、アニメーション終了後は本来のtdの色で表示してほしい、というものです。
具体的な要素のtdよりtrを優先する、というオプションなどあれば理想なのですが、そう簡単ではないということがわかりました。 >>978
まさにそのイメージです。ありがとうございます。
spanで文字だけ上のレイヤーに浮かせるということですね。
こういうテクニックを駆使しないとダメなんですね。勉強になります。 >>978
ついでに教えてください。
trにdisplay:block指定があると、trが複数行の時に、各列(td)をwidthで明示的に指定しないと各行の文字数によって行単位で列幅がズレるのですが、そういうものですか？
あと行と行の間にも隙間(？)ができて線が太く見えてしまいます。
(tdの下辺と、次の行のtdの上辺が重ならなくなり2pxの線に見える)
table{
border-color: #0FF;
border: solid 1px;
border-collapse: collapse;
border-spacing: 0;
}
table th,table td{
padding: 1px 4px;
text-align: center;
border: solid 1px;
} display: block
display: table
これってどういう違いがあるの？
margin: 0 autoも使えるし、機能的な差があるの？ >>981
普通のブロックは広がる
テーブルは縮む >>980
そういうものだな
解決方法わからんわｗ おじさん疲れたので誰か頼むわ
隙間や線の件はこうすりゃいいよ
table{
border-collapse: collapse;
border-spacing: 0;
}
table th,table td{
padding: 1px 4px;
text-align: center;
border: solid 1px #0FF;
} 誰か教えてくれ
tr:beforeの親要素てtrじゃないのけ？
overflo:hiddenが効かないわ
td:beforeにしてもtrに書いているoverflo:hiddenが効かないわ
糞テーブルとoverflo:hiddenの相性くそ悪いfuck 「ついでに教えてください」は社会に出てからは使うの気を付けた方がいいよ >>984
table-rowだけでなく
table-cellもダメなんじゃね？
table-layoutをfixedにしないと
たぶん内部的に計算できないんじゃなかろか？ display: tableの場合、table-layout: autoだと
中身を全部見てから各行やセルの大きさを
いい感じに決めるから
overflowしようにも本来の大きさがないので
計算出来ないんだよ
糞だの相性だの言う前に
内部でどんな計算しているかを考えると
わりと答えに行きつきやすいと思うよ overflow - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
> overflow の効果を得るには、ブロックレベルコンテナーに高さ (height または max-height) を設定するか、
> white-space を nowrap に設定することが必要です。 >>982
なるほど！
たしかに言われて見ればホントだ >>990
>>988でも書いたけど
tableは子要素が決めんの
blockは親要素が決めんの、幅 ランディングページてあるじゃないですか
広告がこう、下にベローンとつづく
あれってHTML で作れるモンなんですか >>994
HTMLとcssでベースは作るけど、結局広告デザイン作る為にillustrator、photoshopとデザインスキルが必要。
あとjsも。 >>994
毎日泣きながら
LP作って糊口を凌いでる人もいるんですよ( ；∀；) つい最近にツイッターに
副業でLPで簡単に稼げるみたいに煽ってるヤツのせいで
未経験者が大漁に釣れてるくさいな
Lpなめんなよまじで HTMLの初心者です、よろしくお願いします。
現在、formでプルダウンメニューで市町村を選ぶとiframeにその市町村のページが表示されるものを作ろうと思っています。
しかし、actionで送信先を指定する必要ありですがiframeへ送信するために何を書けばいいのか？
actionにはCGIやURLを書く必要あるのは分かったのですが、今回の場合は具体的に何と書けばよいのか･･･
また、その他にもミスがあるのか分かりません。
<form action="▲▲▲" method="post" target="inline">
<label for="">市区町村</label><br>
<select name="url">
<option value="" selected="">
選択して下さい
</option>
<option value="https://town-hikaku.site/%e5%8d%83%e4%bb%a3%e7%94%b0%e5%8c%ba/";>
千代田区
</option>
<option value="https://town-hikaku.site/%e6%a8%aa%e6%b5%9c%e5%b8%82/";>
横浜市
</option>
<option value="https://town-hikaku.site/%e5%b7%9d%e5%8f%a3%e5%b8%82/";>
川口市
</option>
</select>
<p><input type="submit" value="送信する"></p>
</form>
<iframe name="inline" width="350" height="1000"></iframe> >>998
1. formへのsubmitはホストにPOST送信しに行くが、この場合の目的ではサーバープログラムは必要ないのでは？ということで撤去
2. ボタンのclickかselectのchange(だったかな？)イベントでJavaScriptの関数を呼ぶ
3. iframeの切り替えは、なんかタイミングの関係で動かないことがあったんで、エレメントのouterHTMLを書き換えて強制的に切り替えるようにしてる >>999
ありがとうございます。
この場合、actionに何かを指定するだけではダメってことなんですね･･･ このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 88日 5時間 21分 53秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
