HTML/CSS のどんな質問にも優しく答えるスレ 32
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
https://mevius.5ch.net/test/read.cgi/hp/1517028608/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
1KSSR >>446
すみません、サイトの構成が複雑すぎてjsfiddleに再現しきれなかったです
シンプルに書いたのですが、実際は親要素もいっぱいある感じで、親要素全部はいじるのは難しいです
>>448
ありがとうございます、ですがこれを設定してみてもダメでした。offset parentはもともとAでした
あと追加ですみません、色々やってて気づいたのですがz-indexを1億に設定しても前に出てくる要素があったりします
改めてまとめると「(ほぼ)どんな場合でも親要素を無視して最前面表示できる出来る方法」を知りたいのですが、ないでしょうか？
色んなサイトで使いたいので汎用法があればと思ったのですが >>450
>z-indexを1億に設定しても前に出てくる
他をいじらずにそれを必ず避けることはできない
element が属する stacking context を establish している box が box tree の root でない限り、他の element が前に出てくる可能性は避けられない >>450
複雑なものを複雑なままにしてるからいかんのよ
問題はシンプルにして解決法を考えるもんだ
いらん要素は全部取っ払って
必要なもんだけ書きなされ font sizeをpxで指定することがありますが、この時どこの大きさ（長さ？）を指定しているんでしょうか？
文字サイズ10pxというのは何が10pxなんですか？ >>453
いわゆる em ボックス（ font のグリフをデザインするための基準矩形）の高さ
「em」という名称は文字 M に由来する なるほど、それを元にして1.2emとかを使っていくんですね
スッキリしました
ありがとうございます >>451
なるほど、ある要素だけをいじって最前面にするってのは不可能ということですね
ありがとうございました！
>>452
わたしのサイトではないので・・・すみません 画像クリックで別のリンク先へ飛べるようにしたんですが、クリックできる範囲が画像+横のオレンジ部分まで広くなってしまいました
どうすればクリック出来る範囲を画像の部分だけにできますか？
>>457
マークアップが
<a><img></a>
ならば、 a か img のスタイルをどうにかする
例えば どっちかが display:block になってるせいかもしれない aタグがblockとかになってるかpadding持ってるんじゃ？ >>458
>>459
imgでblockになっていましたありがとうございます
それで更新してIEで見ると画像部分だけになりましたが、Chromeでみると画像じゃない部分もまだクリック出来てしまいます
これは仕様ですかね？ 状況に応じてブレークポイントとかJSで簡単に調整できるのがいいよねremは >>460
これキャッシュ残ってただけでした
アリガトゴザイマシタ 子要素にfont-size:12px !important;
などと設定されている場合、親要素側でコントロールすることは不可能でしょう蚊帳 firefoxの検索バーにflex=1などという指定がされているのですが、このせいかわからないですが、検索バー付近にブックマークをドラッグしたときに（サイドバーから）、検索バーが意図せずに伸び切ってしまうのですが、このflexというのが関係あるでしょうか？
また、cssでは無効にできない部分でしょうか
>>465
やってみます
ありがとうございました お気に入り一覧でお気に入りボタンをクリックするとお気に入りから削除されるようにしたいです。
（#fa8072から#999にボタンマークの色が変わってページが更新されるとリストから消えるようにしたい）
以下の状態だとお気に入りマークをクリックしても色も変わらずリストからも削除されません。
何がいけないのでしょうか？
<div class="favorite-list__fav-items">
<button type="button" class="favorite-button" <{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>>
<svg role="img" aria-hidden="true"><use xlink:href="#heart"></use></svg>
</button>
</div> （続き）
.favorite-list__fav-items button {
display: block;
width: 100%;
padding: 5px 0;
cursor: pointer;
transition: .2s;
text-align: center;
color: #fa8072;
border: 0;
outline: none;
background: transparent;
}
.favorite-list__fav-items .fav-items {
color: #999;
}
.favorite-list__fav-items svg {
width: 20px;
height: 20px;
fill: currentColor;
} ランキングサイトのバナーを貼るとこうなってしまう(リンクはできる)のですが、どういった原因が考えられますか？
https://i.imgur.com/VZg4qmH.jpg >>467
まずHTMLじゃないでしょこれ
HTMLとCSSだけで何かを記憶したり削除したり文章構造の変更はできないと思う
ＣＳＳでできるのは「予め」かかれてあるものを「表示」「非表示」にすることだけ
ボタンを押してHTMLの中身を書き換えたり
どこかと通信して削除された後のHTMLを表示したりするのはこのスレの対象外 >>471
Javaスクリプトとか必要になって来るということですか？
>>467は、お気に入りに追加の仕様を削除に出来ないか試してみたものなんですが
元のコードはこれです。
<div class="product-list__fav-items">
<button type="button" class="favorite-button" <{favorite_button_attribute product_id=$productlist[num].id added_class="fav-items"}>>
<svg role="img" aria-hidden="true"><use xlink:href="#heart"></use></svg>
</button>
</div> （続き）
.product-list__fav-items {
margin-top: 10px;
width: 30px;
}
.product-list__fav-items button {
display: block;
width: 100%;
padding: 5px 0;
cursor: pointer;
transition: .2s;
text-align: center;
color: #999;
border: 0;
outline: none;
background: transparent;
}
.product-list__fav-items .fav-items {
color: #ff7373;
}
.product-list__fav-items svg {
width: 20px;
height: 20px;
fill: currentColor;
} （続き）
サンプルサイトです。
ttps://monosample.shop-pro.jp/
これは「お気に入りボタンを商品一覧ページへ設置」なんですが、こんな感じで「お気に入りページ」を作りたいのです。
商品一覧(product-list)をお気に入りリスト（favorite-list）に変更して
ボタンの色を#fa8072→#999（追加済みなので）に変更したのですが、ボタンを押しても動かないんです。
一応スクリプトとか使わなくても出来るらしいので、どこか間違っているだけかもしれないのですが、どこがおかしいのかわからないんです。
上記のコードはサンプルサイトのコードになりますので、色コードが一部違います。
紛らわしくてすみません。 👀
Rock54: Caution(BBR-MD5:fc5433912aa55592f73f2dda4d43bdf8) 要素の削除は、JavaScript のjQuery の、remove
CSS では、要素の削除はできないのでは？
非表示にするとか、マイナス座標に飛ばせるだけで、削除はされていないのでは？
削除されていない場合は、メモリ内には存在する <button <{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>>
<<{ }>>
これは、タグの中に、タグがある
{ } 内に、何かのプログラムの命令文がある >>475
サンプルサイトではお気に入りしたものがページ下部にお気に入り一覧として出るんですが
商品詳細や商品一覧でお気に入りを外すと、ページ下部の一覧からも消えます。
この仕様がそのまま使えないのかなと。
Javaスクリプトとか自分は扱えないので、スクリプト必要な場合はあきらめます。
>>476
管理サイトの独自タグというヤツなんですが、お気に入り商品数が25商品までに
自動的になっているので命令文あると思います。
ただお気に入りページをカスタマイズしているショップさんも他にあって
プロの方がスクリプトの話はせずにお気に入りページ作れると言っていたので出来るのではないかと
こちらが元ネタです
ttps://shop-pro.jp/news/20170421-favorite-function/ >>477
結論からいうと無理
ページ遷移後に違うページを表示させることはHTML CSSだけでは無理
JS使っても無理
何らかのＣＧＩ つまりサーバー側の記述が必要 ただサイト側のＣＭＳにそういう仕組みがそなわってて
<{favorite_button_attribute product_id=$productlist[num].id added_class="fav-items"}>>
みたいな記述でできるのかもしれないけど
それはＨＴＭＬやＣＳＳの範疇じゃない独自拡張なのでこのスレの範囲外
この記述でぐぐると カラーミー テンプレート とかでてくるので
カラーミーっていう専用ＣＭＳサイト上の話なんじゃないのかな JSなら無理ではないんじゃね
ＵＲＬにうめこむなりlocalStorage使うなりでページに状態をもたせることはできるよね
まあマーケッティングリサーチに使うならお気に入りって情報は鯖側でもったほうがいいと思うし
いずれにしろスレチ >>478
違うページに移動はしなくてもいいです。お気に入りから外れれば結果的にリストには残らないはずなので
今困っているのは>>467>>468の記述だと、お気に入りマークをクリックしても変わらない（お気に入りのままになっている）のです
>>472>>473を改変しているのですがどこがいけないのでしょうか？
>>479
[num]を少し調べてみます。
カラーミーのテンプレをカスタマイズしているショップさんは克服しているのでサーバーとは関係ないと思います。
カスタマイズに関してカラーミーはノータッチなので。
費用が発生するような質問だったらすみません。
プロに頼めってことですよねorz ページ遷移っていうのは違うページに移動することじゃない
同じＵＲＬを再度表示したときにページ内容を変えることもページ遷移っていう
ページ遷移なしでいいならこういうことをすれば表示だけは消せる
逆にページ遷移すると復活するのでおそらくやりたいことじゃないと思うが
.favorite-list__fav-items input {
display: none;
}
.favorite-list__fav-items input:checked + .fav-items {
display: none;
}
-->
</style>
<div class="favorite-list__fav-items">
<input type="checkbox" id="item1">
<div class="fav-items">
<label for="item1">お気に入り削除</label>
<div>ダミーテキスト</div>
</div>
<input type="checkbox" id="item2">
<div class="fav-items">
<label for="item2">お気に入り削除</label>
<div>ダミーテキスト</div>
</div>
</div>
>お気に入りから外れれば結果的にリストには残らない
この時点で鯖側のＤＢ更新必須なので根本的にHTMLとCSSの範疇じゃない 別スレいってくれ <{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>
の独自仕様部分でボタンをおしたら何らかのアクションスクリプトで
product_idのアイテムのDOMをfavorite-list__fav-itemsからさ駆除するようになってるんだろう
でいまそれが動いてないだけなんだろうけどそんな独自仕様が動かないのをきかれても答えられるわけない
とりあえずその部分が動かない限り何かが変化することはないよ 有料ＣＭＳ用のコードをapache上で動かそうとしてるだけなんじゃないの だーかーらー
htmlとcssだけでは無理だってみんな何回も言ってるじゃん
最低限JavaScriptがいるの
その上で場合によってはPHPやCGIもいる >>482
labelというのは見たことないのでやれるかどうかわかりませんが調べてみます。
>>483>>485
やっぱスクリプトですかね。お手上げです。
>>484
CMSというのはこちらで初耳です。プロが指南しているサイトではスクリプトとか
特別な何かを使う話はなかったのでHTMLとCSSだけで出来るのかと思ってました。
お気に入り一覧を一つのページにまとめて掲載するだけなので場所が違うだけだと思ったのですが。
失礼致しました&ありがとうございました。 >>482
すみません、ダミーテキストって何のことですか？ ダミーのテキストのことです。
具体的にいうと宮沢賢治です。 もちろんググりましたよ。
でもhtmlにダミーテキストを入れる理由がわかりません。
なぜそんなものを入れるんですか？
あとこんな素人ですが、サイトをレスポンシブに変えるのは無謀でしょうか。
やり方を説明しているサイトがあるので自分で出来ないだろうかと。 入れないと何も表示されずにデモにならないから入れてるだけだろ
HTMLかいたことすらないレベルなのか ダミーテキストの文字自体は意味ないよ
そこを好きにかきかえてお気に入りの内容を表示させるためにいれたんだけど
ラベルの中にいれて全部クリック対象にしてもいいよ
label っていうのは for を input の id と一致させることで
ラベル内をクリックしたときにチェックボックスに判定をもたせることができる
でチェックボックスがチェックされるとそれに隣接する fav-item クラスを「非表示」にしている
決して削除しているわけではない
つーかお気に入りアイテムの内容のどこをクリックしても削除されたら困るだろう
やりたいことがよーわからんけどお気に入り削除の文字だけクリックしたら消えるのかと思ったわ hboxやその子要素にに指定されているflexを無効にする方法はありますか？
テーブルの場合はtable-layout:fixed;などという指定があるようです hboxってなんだろう
flexを無効にするのは別のdisplayを設定すればいいんじゃないかな
display:block;なりdisplay:inline-blockなり
htmlとflexの何が困るかをかいてくれたほうが具体的な回答もらいやすいかも >>493
>お気に入り削除の文字だけクリックしたら消えるのかと思ったわ
その通りです。これがやりたいんですが、サンプルサイトにあるようにハートマークがあるので
ハートーマークをクリックしてピンクからグレーになればお気に入りから消える、という仕様を考えてました。
でも「お気に入りから削除」のボタンがあれば、それをクリックして消えればいいんです
ボタン作ったりとか出来なかったのでハートマークでやるしかありませんでした
>>492
書いたことないです。自分が出来るのはコピペと改変だけ。これで何とかやってますｗｗｗ
見様見真似でやってるので理論みたいなのはわかりません ダミーテキストがわからんっていわれても
こっちはお気に入り商品の中身知らないんだから何かしら別のテキストいれるしかないだろ
商品の中身は自分でいれるしかないんだし
文字のおきかえすらできないならどうせ無理だからあきらめたほうがいいよ >ハートーマークをクリックしてピンクからグレーになればお気に入りから消える
ピンクからグレーに表示を変える → CSSのみで可能
その状態でページを更新すると表示を消す → 不可能（サーバー側の記述が必要）
データがどこにかかれていて何を変化させたいかをきちんと整理したほうがいいよ クッキーなりローカルストレージなりに状態保存すれば出来るんじゃ？ >>500
>>501
そうです。これ、元々ブラウザのクッキーの保存機能を使ったお気に入りなんです。
だからサーバーと全然関係なくて、データも保存されてません。
クッキー削除したら消える簡易的なものです。
まあ今時珍しいですよね。。。でもカラーミーはこれしか用意してないんですよ。
だから自分でカスタマイズしろっていう。
>ピンクからグレーに表示を変える → CSSのみで可能
これが変わらないので見てもらいたかったのです。
>>468のcssのどこかが間違っていると思うんですけど。 >>502
>これ、元々ブラウザのクッキーの保存機能を使ったお気に入りなんです。
だからサーバーと全然関係なくて、データも保存されてません。
それ最初に言えよ >>503
マニュアルのリンク貼ったじゃないですか。
読めばわかるでしょ いずれにしろクッキー使った時点でHTML/CSSじゃ無理なんでスレチ
つーかスレチな内容にレスしすぎ
やさしくはあくまでスレの範疇だけにしてくれ >>502
まあ>>473のCSSだけなら一応このスレの範囲だけど
そのCSSに表示が変化する要素どこにもないからなー
ボタンおしたときの
<{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>
が何かしないことには表示がかわることはないんだからまずはそれが動いてるか確認しなよ >>504
初めの質問(>>467)ではCookieに全く触れていないし、マニュアルも出してないよね？
情報は始めにまとめて出して >>502
<style>
<!--
.favorite-list__fav-items input {
display: none;
}
.favorite-list__fav-items .fav-items {
margin:1em;
padding:1em;
background-color:#fdd;
}
.favorite-list__fav-items input:checked + .fav-items {
background-color:#eee;
}
.favorite-list__fav-items label {
border:outset 1px #ccc;
padding:0.5em;
}
-->
</style>
<div class="favorite-list__fav-items">
<input type="checkbox" id="item1">
<div class="fav-items">
<span>商品１</span>
<label for="item1">お気に入り削除</label>
</div>
<input type="checkbox" id="item2">
<div class="fav-items">
<span>商品２</span>
<label for="item2">お気に入り削除</label>
</div>
</div> 質問です
ol要素のlist-style-positionをoutsideにして
margin-leftで余白を設ける場合、
何か指標となる数字みたいなものはありますか？
あくまで目分量でこれくらい、というふうに決めるしかないのでしょうか？
とりあえず1.5emほど余白をとっているのですが…… >>509
ちゃんとレスを追いかけて全部に目を通しておけばそれぐらいわかりはずです。
もっと頭を使ってください。 >>512
あなたが>>467時点でCookieを何とかしようとする事に思い至っていないことは分かったよ
マニュアル見ても根本的な原因が分からないんだね > >508
><{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>
>が何かしないことには表示がかわることはないんだからまずはそれが動いてるか確認しなよ
実はこれ、addをdeleteに変えてみたヤツなんですが動かないです（オリジナルはaddになってます）
やっぱりこの部分がネックですよね
どうしたらいいかわからなくて
>>510
回答ありがとうございます。ちょっとまだ取りかかれないので、確認してからまた来ます。
>>509
マニュアル（元ネタ）は>>477のリンク先です。
>>512
誰ですかあなたｗｗｗ
ありがとうございますｗ http://jsbin.com/mufefaneli/edit?html,css,output
min-heightによって高さが決まった親要素に対して
子要素のheightを％指定すると、高さが有効になりません
minやmaxを使ってサイズ指定した親を持つ子要素に
％でサイズ指定したい場合はどうすればいいのでしょうか？ 結論からいうと無理
% 指定は明示的に高さの指定された包含ブロックに対しての高さになる
なのでこの場合 50% は body の高さに対して50%になる
逆に言うとparentの高さをなぜ決定できないの？ ありがとうございます
http://jsbin.com/kepeqoyuse/edit?html,css,output
bodyに対しての%になると言いますが
bodyのheightを明示的に100pxにしても、heightは0pxのままのようですが・・ http://jsbin.com/xabarusote/edit?html,css,output
子をabsoluteにして、その子を持てるように親もrelativeにしたら
望み通りのサイズになりました
何故absoluteにしたら、%指定していても親の実サイズを元に計算されるのか、よく分かりませんが
これはCSSの仕様通りなのでしょうか？ >>520
原則として、% は包含ブロックを元に計算される。
relative にした親は absolute にした子孫の包含ブロックになるので、そのサイズを元に計算される。
この場合、親の height は指定されていないが min-height は指定されているので、それが親の「仮の height 」とみなされ、子の height の元になるんじゃないかな。
実際の決まり方は複雑多岐に渡るんだが
https://drafts.csswg.org/css-sizing-3/ widthを声に出して言わなきゃいけないとき、
普段はウィドスって言ってるくせにウィスって言うんですか？ ｳｨﾄﾞｩｽって言ってる
なんか恥ずかしい時は幅とか言っちゃう charsetをキャラセットと読む恥ずかしい人もいるからね
ウィドスとかワイズはまだましな方じゃね ウィズで通じない人と話すときはワイドとか「幅」と言ってる（ウィドゥスでも通じないことが多い）
heightはハイトではなく「高さ」
>>528
じゃあ何と読めばいいの？ ｳｨﾄﾞｩｽワロタｗ
catchはｷｬﾄｩﾁかな？ｗ
watchはｳｫﾄｩﾁ？
bridgeはﾌﾞﾘﾄﾞｩｼﾞ！ アンカーリンクいっても通じない時あるしね
発音難しいよね うぃずす、って言う
英語として間違ってるのはわかってる めんどくせーからもう
だぶりゅーあいでぃーてぃーえいち
にしようぜ ファースト、セカンド、サード、フォース、ファイブス、シックスス カラミー懐かしいな
あれってさ外部jsファイルを新規で追加できないんだぜ？
jQueryの本体もコピペして書き写した記憶があるわｗｗｗ ティーエイチである
テーエイチではない
ティーをテーと発音するのは昭和 工場だといまでも聞き取り間違い防ぐため一部ドイツ読みdはデー、pはペー、だっけ 聞き取り間違いを防ぐためというのなら
なんで本場の人は正確な発音をするのだろうか？ ■ このスレッドは過去ログ倉庫に格納されています
