X

HTML/CSS のどんな質問にも優しく答えるスレ 50

■ このスレッドは過去ログ倉庫に格納されています
1Name_Not_Found
垢版 |
2022/02/25(金) 16:42:48.40ID:H+CdGnmu
https://mevius.5ch.net/test/read.cgi/hp/1636434627/
2022/08/30(火) 14:08:03.28ID:???
>>687
その前に何が言いたいのか分からなかった……
2022/08/30(火) 14:22:12.18ID:???
>>687
場所が分かった
各作品ページ内か目次の欄にある「ブックマークから削除 or ブックマークに追加」のボタン
モーダル表示によるワンクッションをいれる為にjavascript:void(0)でAタグによる動作を止めてるっぽいね

>正常動作を保ちながら~とかマウスオーバーされてしまう~
この付近への理解が追いつかない
ソースを見る限り正常な動作してると思うんだよね
マウスカーソルを矢印のままにしたいとかなのかな?
690683
垢版 |
2022/08/30(火) 14:46:52.41ID:???
リンク先の値表示で、ハイパーリンク上へカーソルを持っていくとブラウザ下方にステータスが表示されますよね
-----
ncode.syosetu.com##.footerbookmark:style(float:left!important;)
ncode.syosetu.com##.footerbookmark > li:style(height:20px!important; font-size:11px!important; line-height:20px!important; margin:2px 15px 2px 0px!important;)
ncode.syosetu.com##.footerbookmark > li > .add_bookmark:style(font-weight:normal!important; color:#aaaaaa!important; border-color:#eeeeee!important; background-color:#ffffff!important;)
ncode.syosetu.com##.footerbookmark > li > .bookmark_delete_url:style(border-left:0px!important; background-color:#ffffff!important;)
ncode.syosetu.com##.footerbookmark > li > a:style(width:100px!important; padding:0px!important;)
-----
こんな感じで便利かつ邪魔にならない最適な表示位置へ変更したものの、無意味な「javascript:void(0)」ポップアップとカーソルポインタの重なりが絶妙にブラクラ状態となってしまい・・・
特定のハイパーリンクのみを、機能は維持しつつもステータス非表示に出来ないかなと

ブックマークのON/OFFは使いたいがいちいち表示される「javascript:void(0)」ポップアップを消したい
そんな願望ですm(vv)m
2022/08/30(火) 15:10:50.79ID:???
というか、それはublockとかの広告ブロッカーの話?
2022/08/30(火) 15:27:14.52ID:???
>>690
モーダル(ポップアップ)内のボタンを押した時に
JSでデータベースにアクセスするようにしてるからモーダルをスキップするのは諦めろ
Aタグどうこうだけじゃ無理だし君には手に負えない
2022/08/30(火) 15:39:37.64ID:???
> 「javascript:void(0)」ポップアップを消したい

「ブックマークに追加」ボタンを押すことで表示されるモーダルを表示させずに
「ブックマークに追加」と「ブックマークを解除」を切り替えたいってこと?
ブックマークボタンの表示はモーダルのcloseボタンでページをリロードさせて切り替えてるし
いずれにしろjavascriptの話だからスレ違いだし、恐らく今使ってる機能拡張で対応するのは
無理じゃないかな
2022/08/30(火) 16:51:24.39ID:???
>>692-693
リンク先のステータスを一括非表示とかであればどこかで何度も目にした記憶ですが、やはりリンク単一での処理は無理でしたか
助言有難うございました
695Name_Not_Found
垢版 |
2022/08/30(火) 19:31:30.96ID:I7IXLTks
課題で作ってるサイトのお気に入りボタンのハートをクリックした後に色付きにしたいのですがcssだけでできますかね?色付きのハートのボタンを画像化するしかないですか?
2022/08/30(火) 19:45:12.00ID:???
ここで聞いたらカンニングじゃん?
2022/08/30(火) 20:49:52.70ID:???
できるけどカンニングよくない
2022/08/31(水) 00:33:01.93ID:???
>>695
CSSでできる
なにかのやり方を調べるスキルはこの先ずっと必要だから、自力でがんばれ
2022/08/31(水) 00:48:20.19ID:???
俺はハート型を書くことができない!
実装はアレとアレかなあ
2022/08/31(水) 19:32:39.32ID:???
ハートをCSSだけで作ろうと思えば作れる
クリック後に色を反転させることもJS使わずにCSSだけで作ろうと思えば作れる
2022/08/31(水) 21:13:19.20ID:???
質問スレなんだからせめてチェックボックスとかヒントいれてもいいんじゃないの
なんか答え出すなって流れだから画像出さないけどさ
答えから学ぶことも大いにあると思ってる
学べない人は遅かれ消えるんだし
そこからjsに繋がってったらええやん
2022/08/31(水) 22:12:58.68ID:???
意地悪じゃなくて不正に荷担したらダメだろ
2022/08/31(水) 22:43:29.52ID:???
過保護画像おじvs放任主義(普通)
ファイ
2022/08/31(水) 22:44:56.30ID:???
課題で とか誰も必要としてない情報を入れなければ回答得られたのにな
2022/08/31(水) 22:53:33.93ID:???
言わなくてもいいことの分別
って大事だよね
2022/08/31(水) 23:02:33.18ID:???
まあ画像おじさんの言いたいことは分かるしその通りだと思うけど
教育する立場の人もいるだろうしその役割を奪っていいのかってのはある
同じ苦労をさせて無駄な時間をかけさせるのは本当に無駄でしかないし

ただみんな課題ってとこに引っかかってるだけじゃね
2022/08/31(水) 23:15:01.30ID:???
できるかできないかのヒントは出したつもりだった
質問してくるぐらいやる気ありそうだし頑張ってほしいなと思ってみてたわ
2022/08/31(水) 23:15:11.71ID:???
課題
で一線引いたやつはいるだろうな
質問スレだから茶化すのも含め色々アウトだけど
2022/08/31(水) 23:52:39.40ID:???
>>703
ファイになるほど勢いねんだわこのスレっつーか板
スレの主題を無視すれば双方間違ったこと言ってねーし
かなC
2022/09/01(木) 00:00:54.03ID:???
ちゅーても、ググって答え見つけるのも、ここで答え貰うのも大差無いからな
書きぶりからすると、そういうのも含めて成果物が出来上がればいいってだけの課題なんだろうし
ここで質問することを一概に不正と決めつけるのも見当違いのような
画像を別に用意して実装する方法は分かってるっぽかったし、別解があるのか?って程度の質問に
そんなに騒ぐ必要も無い
2022/09/01(木) 00:10:14.32ID:???
ハートを環境依存文字でやると落第なのでしょうか
2022/09/01(木) 00:17:58.43ID:???
『cssだけでハート』ってぐぐれば
ちょうどいいの出てくんじゃん
2022/09/01(木) 01:18:17.98ID:???
そういや子供の頃BASICでハート作ったなぁ
2022/09/01(木) 01:29:31.17ID:???
>ハートを環境依存文字でやると落第なのでしょうか
そんなことで落第させるような学校は辞めてしまえ
2022/09/01(木) 01:47:33.53ID:???
↓の記事で紹介されている方法を組み合わせれば、HTMLとCSSだけで、画像を使わずにハートをクリックしたときに色を反転させることはできる

CSS | ハート型(Heart)の作り方
https://1-notes.com/css-shape-heart-design/

cssだけでトグルを実装する
https://zenn.dev/katoaki/articles/fcef72b6e16709
※HTMLの<label>を<input>要素に関連付ける方法を知っていることが前提
2022/09/01(木) 01:53:40.67ID:???
「cssだけでトグルを実装する」の例ではコンテンツの表示・非表示を切り替えているが
そうではなくて
「CSS | ハート型(Heart)の作り方」で作ったハートの背景色(background)を変えてあげればよい
2022/09/01(木) 03:53:26.30ID:???
質問の感じマルチポストしてるだろうし答えてあげてももう来ないだろうな
2022/09/01(木) 08:24:28.34ID:???
cssのプロパティーを書く順番について
width,height,background,border,padding,margin,font-size
どの順番に書いた方がいいですか?
2022/09/01(木) 09:29:01.24ID:???
>>718
csscombのstylelintに任せろ
2022/09/01(木) 13:01:51.60ID:???
ulの中にある画像やテキストや背景などにそれぞれvwをつけてウインドウ幅に合わせて
縮小させるのは難しいので
ulだけにvwをつけてulの中の画像やテキストや背景も縮小することはできないんですか?
2022/09/01(木) 13:54:52.22ID:???
>>718
MozillaやW3Cが推奨してるのは視覚順
Googleが推奨してるのはABC順

仕事ならグループ内の基準に合わせて
個人ならお好きにどうぞ
2022/09/01(木) 14:17:42.09ID:???
>>720
>>682
2022/09/01(木) 15:09:36.43ID:???
bootstrapで作ってて、

<a class="btn btn-light btn-lg fs-1 fw-bold" href="...">hoge</a>

みたいなコードが何個もあるんですが、
このクラスのセットをまとめてcssファイルに切り出したりってどうやったらできますか
2022/09/01(木) 15:32:45.49ID:???
ブラウザの開発ツールから実際に適用されてるstyleをコピペ
もしくはcssファイル開いてセレクタで検索
2022/09/01(木) 17:00:03.17ID:???
同じコードが複数あるから「btn btn-light btn-lg fs-1 fw-bold」の部分を一つのクラスにして↓みたいなことをやろうとしているのならやめた方がいい
<a class="bd-btn" href="...">hoge</a>
ボタンのhoverやactive時のエフェクトが効かなくなると思う
2022/09/01(木) 17:05:59.67ID:???
>>695 ありがとうございました。オンラインスクールの課題だったので軽い気持ちで質問してしまいました。ポートフォリオに載せる時はcssだけのやり方で実装したいと思います
2022/09/01(木) 22:14:59.30ID:???
>>709
無視は草
いやだめだろそれw

>>726
軽い気持ちで質問していきゃいいよ
基本ここのおじは回答したい欲に飢えてるからw
回答を通して自分の引き出しの再確認って意味合いもあるしwin-winよ
2022/09/01(木) 22:52:42.19ID:???
お題があると自分の再確認になるのは確かだね
2022/09/01(木) 23:04:45.58ID:???
質問があると回答おじ達の運動会が始まるから中々回答できねーわ
みんなこのくらいに帰ってるんだよな俺もたまには回答したいわ
2022/09/02(金) 00:06:22.67ID:???
再確認するまでもないはずの非推奨になって使わなくなったプロパティでそうだったっけ?ってのを確認したことはあるな
直近で言えばzoomとか
結局再確認ってとこに落ち着いたけど
※荒らす意図はない
2022/09/02(金) 00:30:10.14ID:???
>>723
以下のように、JavaScript を使えば出来るけど、
HTML, CSS だけで出来るかどうかは知らない

例えば複数クラス、class="aa bb" は、
"aa bb"という文字列を、class属性に設定するだけ

<div id="xx" class="aa bb">ABC</div>
<div id="yy">おはよう</div>

// xx から、クラス属性を取得する
const cName = document.getElementById( "xx" ).className;
console.log( cName ); //-> "aa bb"

// yy のクラス属性に、"aa bb"を設定する
document.getElementById( "yy" ).className = cName;

結果
<div id="yy" class="aa bb">おはよう</div>
2022/09/02(金) 03:15:24.19ID:???
いつもの人が、いつも以上に頓珍漢な回答をしてるな・・・
2022/09/02(金) 04:16:44.27ID:???
クラス付与はcssじゃ無理
回答しようにもクラスをセットで云々ってトコにかすりもしないしこの回答でいいのかが分からんからエスパー気味になるけど

隣接兄弟要素に同じスタイルを付与したいとか、一つの要素を基準に別の要素にスタイルを当てたいって相談だったのなら
結合子を使って.A + .Bとか擬似クラスを使えば出来る
js自体は綺麗だし良いと思う

それぞれ画像みたいな感じ
正直回答がこれでいいのか自信がない
2022/09/02(金) 04:17:59.71ID:???
画像貼り忘れたけど自信ないしいいかすまん
2022/09/02(金) 06:54:50.76ID:???
>>734
着地点俺もよくわからないし気にすんな
2022/09/02(金) 13:04:29.52ID:???
<style>
#test{
width:100%;
height:300px;
background-image:url("./test.png");
background-size:cover;
}
</style>
<div id="test"></div>

背景画像の元のサイズは幅1200px高さ800pxとする
これでウインドウを縮小すると背景画像も縮小されるけど、背景画像の全体が表示されるので、背景画像の隠れた部分まで表示されてしまいます。
隠れた部分を表示せずに背景画像の比率も変えないでウインドウ幅に合わせて縮小するにはどうやればいいんですか?
なお背景画像は複数表示されてもOKです。
2022/09/02(金) 13:19:29.34ID:???
ちょっと何言ってるか分からないけど、言葉通りの質問なら
例題が答えになってるという珍しいパターン
2022/09/02(金) 14:12:13.70ID:???
>背景画像の隠れた部分まで表示されてしまいます。
隠れた部分が表示されないのでどうすれば表示されますか?なら分かるが
まさしく>>737だね
739Name_Not_Found
垢版 |
2022/09/02(金) 14:24:58.40ID:/RJw6LmJ
>>736
高さ指定を下記の様に書き換えた時の動きが求める解ですか?
height: calc(100vw * 0.25);
2022/09/02(金) 18:27:49.82ID:???
>>739
近い感じだけど
それだと背景画像がちょっと横に引き伸ばされちゃった
引き伸ばしはされないでウインドウ幅に合わせて縮小って感じにしたいです
2022/09/02(金) 18:49:27.37ID:???
例えば円の画像を背景にすると自動で下の図のように並ぶけど
この並んだ状態のまんまウインドウ幅に合わせて縮小ってことです
coverだと円が枠いっぱいに拡大されちゃうのでだめです
2022/09/02(金) 18:55:22.82ID:???
background-size:100% 100%;
のことか?
2022/09/02(金) 18:55:47.70ID:???
間違えた 100% auto
2022/09/02(金) 19:10:53.54ID:???
background-size: contain; でもいいと思う
no-repeat をつけるかつけないかはお好みで
2022/09/02(金) 19:54:36.95ID:???
>>742-743
それだな
2022/09/02(金) 23:14:38.60ID:???
セクションの区切りの線を波線にしたいのですがイラレで波線をsvg形式で保存するっていうのはそのセクション前後の背景色込みのデータを保存すれば良いですか?
例えば白のセクションの次のセクションの背景を青にしたくてその青の線を波線にするにはどういうsvgデータを作成すれば良いのでしょうか?
2022/09/02(金) 23:39:05.74ID:???
Custom Shape Dividers でぐぐってみて
2022/09/03(土) 09:41:20.10ID:???
>>741
>>736 と同じ問の流れだとすると前提条件が違う
まさかzoomマン?
後出しで条件を変えて解答を否定するのは良くない
2022/09/03(土) 09:52:18.83ID:???
>>746
“hr 背景画像 波線” でググる
背景色に影響されたくなかったらベクターの背景透過画像
2022/09/03(土) 12:38:07.79ID:???
>>743>>747
試してみたけどちょっと思った通りと違いました。
>>743は横に引き伸ばされちゃって、>>747は比率が変わっちゃいました
cssは無理なのかな?JSでやるしかないのかな?
2022/09/03(土) 12:38:33.21ID:???
>>747
>>749
ありがとうございます!
2022/09/03(土) 13:00:00.03ID:???
>>750
アンカー間違ってそうだけど>>744も試してみた?
必要に応じて background-position や background-repeat もつけてね
2022/09/03(土) 13:28:08.22ID:???
>>750
> 横に引き伸ばされちゃって

縮小はしたいけど、拡大はNGなの?
だったらメディアクエリのmin-widthで画像の最大幅を指定して
background-size: auto;を指定してやれば済む話だろ
2022/09/03(土) 22:43:58.15ID:???
>>752
それでやったけど枠より大きい画像の場合縮小されてしまいました。
>>753
元の画像より拡大はしたくないです
2022/09/03(土) 23:01:11.11ID:???
背景画像が枠より大きい場合は図のように表示
ウインドウ幅を縮小するとをその状態のまんま背景画像を縮小って意味です。
coverやcontainだと枠からはみ出た部分も枠に入っちゃうんです。
枠からはみ出た部分は枠に入れたくなかったんですぅ。
2022/09/03(土) 23:01:24.10ID:???
>>754
だから>>743 + >>753でイケるじゃん
2022/09/03(土) 23:05:17.82ID:???
>>755
height:300pxで固定じゃないのかよ
画像サイズも縦長になっちゃってるし
途中で条件変えるなよ
2022/09/03(土) 23:49:36.91ID:???
>>755
ほれ。zoom要らないぞ?
https://jsfiddle.net/m9db30z6/
2022/09/04(日) 00:05:08.98ID:???
>>755
zoomマン様
出来るけれどそれは単純じゃない

要件を小出しにしてきたのは良くない
その要件も背景の事しか書いていないけれど
前面の要素はどうするんだよとかツッコミどころがある

とにかく色々と解答を得たことにダメ出ししたままで全部投げは良くない
ダメな部分をどうすれば良いのか自分で応用案を考えるのが先だよ
760Name_Not_Found
垢版 |
2022/09/04(日) 13:26:51.53ID:xF1KZss9
>>758
イイね
ちょこっと複数背景画像を指定して
ちょこっと手直しでイイ感じ
2022/09/04(日) 14:34:31.67ID:???
また後出し要素が・・・
そんなに気軽に手直しできるかな?
2022/09/04(日) 16:04:11.96ID:???
zoomerにかまうのやめよう
2022/09/04(日) 17:25:19.19ID:???
zoomerはもう少し伝える努力をして欲しい
レス番の修正もそうだけど言ってる内容がちぐはぐな事が多いので
書き込む前に複数回見返す癖をつけようや
2022/09/05(月) 23:46:37.97ID:???
<td>x
xと一致するときだけスタイルシートを適用したいのですが
<td class="hoge">と何百行と書くのを避けたいです
どのような指定方法がありますか?よろしくおねがいします
2022/09/06(火) 00:41:04.97ID:???
ややスレチな回答になるけど、<td>は全部手打ち?
手打ちの場合はjavascriptで<td>内の該当文字のあるタグにclass名を付与する
PHP等による自動挿入の場合は、導入する時にclass名を自動で付与しよう

それ以外だと
<td>xが何列目に来るのかが固定の場合は
中身に対してではなく○番目のタグのような色変更はできるよ
設問の例だとどういう形になるのかな?
2022/09/06(火) 00:55:10.85ID:???
返信ありがとうございます
巨大なテーブルタグをツールで出力しました
<tr>と<td>がそれぞれ数百行あり、<td>xの出現はまちまちで規則性はありません
やりたいことは、<table class="hoge">として、特定の文字列の<td>にスタイルを適用したいのです
<td>xを<td class="hoge">xと律儀に置換するしか表現できないのでしょうか?
2022/09/06(火) 00:56:17.61ID:???
>>764
・手打ちなら最後に正規表現使ってクラス付きのタグに一括置換
・動的テーブルなら出力時に条件設定してクラス付加
2022/09/06(火) 01:07:16.95ID:???
jsで<table class="hoge">の中の<td>を全部取得してその中に特定の文字列がある<td>にクラスを付与するのかな
2022/09/06(火) 10:49:23.82ID:???
>>766
ツールってどういうツール?
javascript?PHP?Excel等のローカル?
2022/09/06(火) 14:08:42.09ID:???
>>766
CSSに内容によるセレクタはないので、どうしてもHTML上でクラス付加したくなければJS使うしかないね
ただ、もとのテーブルがツール管理なら出力後のHTMLをどう加工しても影響なくない?
クラス付加程度でソースの可読性は落ちないし、メンテ考えるとJSでの処理はおすすめしないなあ
2022/09/06(火) 17:04:10.22ID:???
Ruby で正規表現で作ったら、
<td>xx も置換されてしまった

re = /<td>x/
replace = '<td class="hoge">x'

html = <<'EOT'
<td>x</td>
<td>xx</td>
EOT

dest = html.gsub( re, replace )
print dest

出力
<td class="hoge">x</td>
<td class="hoge">xx</td>
2022/09/06(火) 20:03:37.10ID:???
rubyでやったことないけど、re = /<td>x(?=<)/ ならいけるんでない
773771
垢版 |
2022/09/07(水) 00:47:53.91ID:???
確かに、re = /<td>x(?=<)/
にすれば、<td>xx は置換されなかった

<td>x</td>
だけが置換された
774771
垢版 |
2022/09/07(水) 01:02:56.22ID:???
これでも良かった。
re, replace 両方の末尾に、< を付ける

re = /<td>x</
replace = '<td class="hoge">x<'
775766
垢版 |
2022/09/07(水) 08:10:48.16ID:???
みなさん親切に教えていただきありがとうございました
表を作るたびにjavascriptで指定するのは大変なので、ファイルサイズが1mbに倍増しましたがクラス付加にしました
.hoge a[href="URL"] { みたいな指定が内容に対してできないと分かってよかったです
ツールというのはwebツールでexcelデータをtableタグに置換しただけです(書き方が悪くてすみませんでした)
776771
垢版 |
2022/09/07(水) 12:01:29.92ID:???
HTML パーサーを使うのなら、外側にid を付けるだけでも、処理する範囲を限定できる

例えば、id="tbl_1" の子(直下)のtr の子のtd
みたいに、構造が決まっていれば、正確に処理する範囲を限定できる

もちろん、もっと細かく、すべてのtr, td に、class を付けることも出来る。
要するに、正確に処理する範囲を限定できるかどうかが重要

<table id="tbl_1">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>あ</td>
<td>い</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
2022/09/07(水) 12:28:50.47ID:???
javascriptとかruby使う必要あるか
出力されたHTMLをテキストエディタで開いて<td>xxx</td>を<td class="hoge">xxx</td>に一括置換すればいいだけなのでは
2022/09/07(水) 13:38:22.59ID:???
>>775
画像なしで1MBはちょっと大きいね
ページを分割するか、外部データにして動的に少しずつ読み込む方が見る側に優しいかも
779Name_Not_Found
垢版 |
2022/09/07(水) 20:28:33.73ID:H3nxHm9n
srcsetで
PC用画像の時にだけ効かせるCSS
スマホ用画像の時にだけ効かせるCSS
て書く方法あります?

<picture>
<source media="(max-width:750px)" srcset="SP.jpg">
<img class="hoge" src="PC.jpg">
</picture>

これだと.hogeはスマホの画像にも効いてしまう

mediaqueryで対応すれば解決自体はできるけど、上記の方法を知りたい
2022/09/07(水) 21:12:05.96ID:???
なんでメディアクエリじゃ駄目なのかわからん
2022/09/07(水) 21:23:26.96ID:???
>>779
pictureでまとめたものはsourceひっくるめて一つのオブジェクト扱いなので、クラス分けるのは無理
メディアクエリでSP用とPC用の定義を分けるのが最適解
2022/09/07(水) 21:44:36.95ID:???
>>781すばらしい
ありがとう!
2022/09/08(木) 07:34:50.40ID:???
>>764
jQueryなら1行でできるけどな。
$('td:contains:("x")').css('color','red');

jQuery使いたくないならjsの.includes() 使えばいい。

cssはテキストノードに関しては無理。 href="x"やvalue="x"など「属性」なら属性セレクタでできる
2022/09/08(木) 12:39:01.58ID:???
ハイフンから始まるcssプロパティーってベンダープレフィックスだけですか?
2022/09/08(木) 12:53:49.70ID:???
>>784
ハイフンハイフンで始まるカスタムプロパティ (CSS 変数)がある
2022/09/08(木) 15:06:18.05ID:???
>>783
containsの後にコロン入ってるよ!
あとcss()よりaddClass()の方が使い勝手いいかも
2022/09/08(木) 17:09:56.14ID:???
>>766
素のjsでもxpath使えばこんなもん
const result = document.evaluate('//table[@class="hoge"]//td[text()="x"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (let i=0; i<result.snapshotLength; i++) { result.snapshotItem(i).classList.add("hage"); }
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。

ニューススポーツなんでも実況