[過去ﾛｸﾞ] HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (1002ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
368: 2024/02/10(土)14:47 ID:??? AAS
漏れはShowroom を、
Ruby で、selenium-webdriver を使って、ブラウザを操作して、
画面上のアバターやパネルなどを削除して見ている
Chrome の拡張機能にも、Showroom を改造するものがあるのでは？
# 各要素の削除
jsCode = <<'EOT'
var elements = document.getElementsByClassName( 'footer-menu' ) ;
elements[0].parentNode.removeChild(elements[0]) ;
var elem = document.getElementById('js-avatar');
elem.parentNode.removeChild(elem);
省11
369: 2024/02/10(土)14:59 ID:??? AAS
こいついつもいるな
370: 2024/02/10(土)15:14 ID:??? AAS
ルビーキチガイはちゃんとルビーオンレイルズといつもの表記しろ
NGすり抜けるな
371(1): 2024/02/11(日)04:03 ID:??? AAS
画面幅768~1000とかでスクロールバー出すのってどうなんだろう
iPadは良いけどPCで画面幅縮小した時とかのUIが良くないから避けるべき？
372: 2024/02/11(日)06:12 ID:??? AAS
ユーザー自身が拡縮する分は
こちらの想定外でいいと思う
373: 371 2024/02/11(日)14:01 ID:??? AAS
サンクス
374: 2024/02/18(日)14:35 ID:??? AAS
人のSassのソースを見る機会があったんですが
以下のA・B、どっちが主流ですか？
Bで書くことが多いのでAのメリットはなんでしょう？
Aの書き方
.hoge {
width: 100px;
@media (min-width: 1080px) {
width: 200px;
}
…
省10
375: 2024/02/18(日)15:17 ID:??? AAS
Aは同じセレクターの状態違いだとわかる
Bはもうsassの意味がないレベル
376: 2024/02/18(日)15:21 ID:??? AAS
ありがとうございます
SP作ってからPC版を作成ってクセが
個々にメディアクエリを書くより楽なもので
377: 2024/02/18(日)15:32 ID:??? AAS
メディアクエリをmixin化するのだ
ひとつセレクタがあったら
.hoge{
@include mixin.media(sp){
}
@include mixin.media(tab){
}
@include mixin.media(pc){
}
}
省2
378: 2024/02/18(日)15:34 ID:??? AAS
なるほどー
mixinを使うと元を修正するだけで済むから汎用性がますんですね
アドバイス助かります
379(1): 2024/02/18(日)16:54 ID:??? AAS
Scssは横幅毎にファイル分けてだけどおかしなやり方だったんかなぁ
380(1): 2024/02/18(日)17:22 ID:??? AAS
>>379
見通しがよければなんでもいいと思うけど
同じセレクターというか同じものを指す記述が何カ所にも登場するとそれだけでclass名の変更があったときなどに置き換える箇所が増えて変更に弱くなるよね
これは&使わない教にも言える
他方、親セレクタひとつ変えれば子孫や状態変化すべて変えられるような変更に強いコードは
hoge__fuga みたいなHTML上のセレクタそのもので全文検索しても見つからないので
hoge の中から探すか、ソースマップ必須になる
どちらが保守性が高いと言えるかはプロジェクトの規模やチームの特性によって変わりうる
381: 2024/02/18(日)18:41 ID:??? AAS
>>380
なるほど変更修正も考えて分かりやすくって事ですね
382(1): 2024/02/29(木)18:15 ID:??? AAS
div.hogeに以下のようなcssを効かせました
hoge{
position:relative;
}
hoge::after{
position: absolute;
bottom: -20px;
right: -20px;
display: block;
width: 100%;
省8
383: 2024/02/29(木)18:40 ID:??? AAS
>>382
hogeの中にインナーを作る
z-indexが インナー>hoge::afterになるようにする
というか影つけるだけなら疑似要素なんかいらなくて
hogeにbox-shadowであかんの
384: 2024/02/29(木)18:44 ID:??? AAS
ありがとうございます
after要素が透明ありのpngなんで、filterなんです
どうもz-indexへの愛と理解が足りてない。。
385: 2024/02/29(木)18:48 ID:??? AAS
疑似要素にcontentでpngを入れてるなら素直にimgタグ書くべき
背景画像がpngという意味ならdrop-shadowきかない
386: 2024/02/29(木)18:51 ID:??? AAS
背景パターンなのでpngをBGに使っています
filter drop-shadow自体は効くようですが
chromeで見ただけなので効かないのもあるんですか
検証します ありがとうございます
387: 2024/02/29(木)19:11 ID:??? AAS
お騒がせしました
after要素に問題なくdrop-shadowが付いてました
なにも書き換えてないと思うのですが
上下前次1-新書関写板覧索設栞歴
あと 615 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.012s