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 本来は点数なんてものは存在しないからシンプル
点数のせいで複雑に見えてる 優先度を考えなきゃいかんような状況に陥った時点で
設計に問題があるかもしれないね CSSの優先度なんて種類で分岐して数を数えるだけ
IDがありますか？ → Aランクグループへ
クラス等（要素以外）がありますか？ → Bランクグループへ
要素（疑似要素）がありますか？ → Cランクグループへ
*ですか？→ Dランクグループへ
各ランクグループは、そのランクの個数で勝負
（下位ランクのものをいくつ持っていても意味ない）
それだけの話なんだが
例外として、style属性に書いてあれば、ランク関係なしに優先されて
!importantがついていれば、それよりも優先される
（!importantがついている者同士でランキング争いは行う） > （下位ランクのものをいくつ持っていても意味ない）
訂正。同じ個数持っている場合は下位ランクの数で比較 >>381
なるほど
桁が下の数字がいくら積み上がっても上の桁を凌駕することはないのですか
単なる合算よりも分かりやすい、すっきりする挙動ですね
ありがとうございました 17年ほど前の話だが
サイトで足し算しろってドヤ顔で書いた
id1個とclass10個で上回れないからセレクタ10個以上は無視されるとまで書いた
本当に申し訳ないと思う >>390
+はすぐ後ろ、>は直下
<div class="hoge">
<div class="fuga"></div>
</div>
<div class="piyo"></div>
ってあった場合
.hoge + div は .piyo のこと
.hoge > div は .fuga のこと >>389
１つ目がクラスじゃなくなるんだから
１つ目も属性セレクタで書けばいいよ X Y
Y は、X の子孫。
子・孫など、どんな子孫でもよい
X > Y
Y は、X の子。
直接の子だけ。孫以下の子孫は含まない >>392
ありがとう
どうも別に原因があったらしいです
これから検証orz aタグの中にfigcaption入れたらW3Cのチェックでエラーになったんだけどこれって何でですか 示される理由が英語で読めませーんとかなら翻訳板行け ウェブフォントを使ってるサイトは
ページが表示されてから少し間があってフォントが変わりますが
この挙動がいまいちな気がします
フォントをすっかり読み込んでからテキストをフェードインさせるとかした方がいいんじゃないでしょうか？ >>398
入れちゃダメってことになってるからダメ っていうエラーでしたよ
これじゃ合理性に欠ける >>401
使い方を勘違いしていただけですね
ご丁寧にありがとうございます tableタグでdivが効かないのですが
tableタグのtdタグ内で
画像を置いたり位置を調節するには
どうしたらよいのでしょうか？ >>399
FOUTと呼ばれる現象。長い間メリケンweb屋を激怒させてきた。
今ではcssのfont-displayで挙動を指定できたり、
jsならfont loading apiというのもある。
あとはググれ。ポリフィルもあるはず。 俺は宗教上の理由でtableでのレイアウトを禁じられているので答えられないが、このスレに太古より生息するテーブルレイアウトの達人が答えてくれるだろう… >>404
ありがとうございます
あれを気持ち悪いと思っていたのが自分だけじゃないと分かって安心しました
対策もあったんですね まとめブログをやってるんですが、背景設定するとパーツが透けて背景が見えてしまいます
パーツの背景だけを白にするとかどうやればよろしいのでしょうか？
backgroundで指定するとその列全体に適応される（例えば記事と記事の空白に背景が映るようにしたいけどそこも白くなる）
ググってもやり方が見つけられなかったのでぜひとも解決方法を教えてください ヤフオクの商品ページをいつもHTMLで書いてるのですが、
ここで使えるタグは一部だけ公表されていて不透明な部分が多かったりします。
表の編集でセル内の文字のセンタリングを指定したくても
<td style="text-align: center;〜のstyle要素がごっそり削られてしまうのでこの手が使えず
かと言って<center>が普通に使えるHTMLエディタは現行のものはないのではないかと。
ということで
1)現行のHTMLエディタで表のソース中に一つ一つ<center>タグを手打ちする
→正直かなり面倒
2)2000年前後に公開された古いHTMLエディタを使う
→探してますが今一つ見当たらず。特に最適化とか
厳密なエラーチェックとかやってくれる奴があるかも分からず。
BlueGriffonやSharepoint Desingner2007とかとりあえず使ってますが
この問題で悩んでます。
何かアドバイスとか頂ければ幸いです。 >>407
もう少し具体的に
出来ればどこかにコード晒して >>403
多分何か勘違いしている
divが効かないってのを
もう少し標準的な用語で説明してちょ >>411
tableタグのtdタグの中で
divタグを使用しても
divタグのwidthやheightが
効かないのです
background-colorで着色しても
領域に色が塗られません >>412
つまり、
<table><tbody><tr><td>
<div style="background-color: red;">何か</div>
</table>
としても「何か」の背景は赤にならないと？
どこかにあるdiv用のスタイル または table用のスタイル
が悪さをしているとしか考えられんが
他の要素の場合は？ >>413
うーん、それができないんですよね
☆事業内容
みたいな
アイコン+文字列をやるために
画像領域と文字列領域を
divで区切りたかったのですが
tdタグの中のdivは効く様子がないです
同僚からはtableタグは使うなみたいに言われまして
結局divに変更することにしました >>412
そんなことはない
heightはtableかtdにもheight与えなきゃいけないけどwidthやbackgroundはちゃんと効く
そのdivを開発者ツールとかで見てみろ
display:inlineとかbackground:#fffとかがimportantされてるとかのオチじゃないか >>415
なるほど
他におかしいところがあるから
おかしくなってるということですね ブラウザの右クリックメニューから、その要素上で、要素の検査をすれば、
F12開発者ツールが起動するから、
CSS を見れば、適用されているスタイルがわかる もしスレチだったらごめんなさい
Android7.1.1でクローム65.0.3325.109を使っているのですが、あるサイトの決まったページのものだけ「新しいタブで開く」で開くと毎回再読込をしないとページが表示されません
地味に不便なのですが、これは何か規則性があるのでしょうか？ えーっと、伝え方が悪かったです。
こんなのになるんですよ
再読込押すと普通に出てきます
https://i.imgur.com/XpIjuXr.jpg 再読込押すと普通にエラーではない画面が出てきます、の間違いです 今試してみると全く同じページがgalaxyの純正ブラウザでは開けました セッション管理をしていて、途中の状態からは、アクセスできないとか
一番最初の状態から始めないと、アクセスできないような作りになっているとか Web製作者から見て、やらおんとかはちまとかの大手アフィサイトの出来っていい方なの？
それとも技術的にみてもゴミクソサイトなの？ まとめサイトで結構いいデザインだなってとこどこがある？ 金儲けサイトは間違えて広告を押してしまいやすいサイトだからなｗ Android Chromeの機能のひとつに、
リンクが密集している部分をタップした場合、タップした周辺がルーペみたいに拡大されるものがあるんですけれど、
iframeタグを使って埋め込んだサイトでこれをやるとルーペの中身が真っ白になってしまいます。
<iframe src="（wikipediaみたいなリンクの密集してるサイト）"></iframe>
確認したのはChromeは53.0.2785.97、Android4.4.2なので相当古いのですが、
ルーペを出さないようにするかルーペの中身をハンドルする方法ってあるんでしょうか。 <dl>
<dt><dd>
<dt><dd>
:
</dl>
ってならんでるHTMLで1つの <dt><dd> はセットでたてならびにして
それの横にならべるのってＣＳＳでできますか？
absoluteやポジション指定すれば当然できるんですが
できればピクセル指定なしで中身の幅に合わせてならぶようにしたいです 出来ないと思う
使いづらいけどみんな好きだよなあ、dl >>435
こういう風にしたいわけ？
このサイトも同じようなことを考えてたけどできないので
1列ごとにdlで囲ってそれをfloatさせる方法でやってるね
http://d.hatena.ne.jp/tamo_hand/20090628/p1
>>436
わかりやすくはあるんだけどね
dtがインラインのみでddはインラインもブロックもOKというのを最初に頭に入れておくと理解しやすい >>436,437
まさにこうしたかったです
システムからの自動出力でＨＴＭＬの構造がいじれなくて
ちょっと短文が多めでたてに並ぶと見栄えが悪いのでよこにならべられないかなと思った次第です
できないようなのであきらめます
できないことがわかるだけでも無駄に悩まずにすむので助かりました
ありがとうございました >>435
>>435
dl{display:grid;
grid-template-columns:repeat(auto-fill,max-content);
grid-template-rows:repeat(2,max-content);
grid-auto-flow:row dense;
}
dt{grid-row:1/2;}
dd{grid-row:2/3;}
dt,dd{jistify-item:center;
align-item:center;
}
※max-contentやgrid layout使用のため最新ブラウザのみ。レスポンシブ非対応。 こういう問題見ると、まだまだ未完成な言語だなあって思うわ >>440
昔と比べれば日々進歩してるな
IEが早く消えてればもっと進歩も早かったはず IEにくらべたらまぁ
IE6がもっともガンだったけど
やっと消えてくれたから ↓A要素のアウトライン
マ ┏━━━━━━━━━━━━━━━━━━━━━━━┓
│ ┃AAAAAAAAAAAAAAAAABBBBBBBBBBBBBBBBBBBB┃
ジ ┃AAAAAAAAAAAAAAAA↑BBBBBBBBBBBBBBBBBBB┃
ン ┃AAAAAAAAA[←A要素内のB要素→]BBBBBBBBBBBB┃
マ ┃CCCCCCCCCCCCCC↓CDDDDDDDDDDDDDDDDDDD┃
│ ┃CCCCCCCCCCCCCCCCDDDDDDDDDDDDDDDDDDD┃
ジ ┃CCCCCCCCCCCCCCCCDDDDDDDDDDDDDDDDDDD┃
ン ┗━━━━━━━━━━━━━━━━━━━━━━━┛
こんな感じのA要素内のB要素を、ボタン推すとマージンとか全部無視してぱっと画面いっぱいに拡大表示させたいのですが (それはJSでCSS切り替えしてやります)
widht,heightだけ指定して拡大しても
マ ┏━━━━━━━━━━━━━━━━━━━━━━━┓
│ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ジ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ン ┃AAAAAAAAA[←A要素内のB要素→]AAAAAAAAABB┃
マ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
│ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ジ ┃CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCDD..┃
ン ┗━━━━━━━━━━━━━━━━━━━━━━━┛
こんな感じで、A要素の中でだけ拡大されてしまいます
質問ですが親要素を無視して、特定の要素を拡大して表示する方法はあるでしょうか？
CSS初心者なので、初歩的なやり方をしらないだけだとは思うのですが、どうかよろしくおねがいします <select>で表示されるプルダウンメニューをクリックしたときの一度に表示される要素数を変えるにはどうしたらいいんですか＞
<select size=6>とかだとリストボックス形式になるからプルダウン式で >>445
Aを offset parent にして
Bを position: absoluteにして
margin: auto
top: 0
bottom : 0
left : 0
right : 0 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
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 ■ このスレッドは過去ログ倉庫に格納されています
