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 >>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製作者から見て、やらおんとかはちまとかの大手アフィサイトの出来っていい方なの?
それとも技術的にみてもゴミクソサイトなの? まとめサイトで結構いいデザインだなってとこどこがある? 金儲けサイトは間違えて広告を押してしまいやすいサイトだからなw 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> はセットでたてならびにして
それの横にならべるのってCSSでできますか?
absoluteやポジション指定すれば当然できるんですが
できればピクセル指定なしで中身の幅に合わせてならぶようにしたいです 出来ないと思う
使いづらいけどみんな好きだよなあ、dl >>435
こういう風にしたいわけ?
このサイトも同じようなことを考えてたけどできないので
1列ごとにdlで囲ってそれをfloatさせる方法でやってるね
http://d.hatena.ne.jp/tamo_hand/20090628/p1
>>436
わかりやすくはあるんだけどね
dtがインラインのみでddはインラインもブロックもOKというのを最初に頭に入れておくと理解しやすい >>436,437
まさにこうしたかったです
システムからの自動出力でHTMLの構造がいじれなくて
ちょっと短文が多めでたてに並ぶと見栄えが悪いのでよこにならべられないかなと思った次第です
できないようなのであきらめます
できないことがわかるだけでも無駄に悩まずにすむので助かりました
ありがとうございました >>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だけで何かを記憶したり削除したり文章構造の変更はできないと思う
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使っても無理
何らかのCGI つまりサーバー側の記述が必要 ただサイト側のCMSにそういう仕組みがそなわってて
<{favorite_button_attribute product_id=$productlist[num].id added_class="fav-items"}>>
みたいな記述でできるのかもしれないけど
それはHTMLやCSSの範疇じゃない独自拡張なのでこのスレの範囲外
この記述でぐぐると カラーミー テンプレート とかでてくるので
カラーミーっていう専用CMSサイト上の話なんじゃないのかな JSなら無理ではないんじゃね
URLにうめこむなりlocalStorage使うなりでページに状態をもたせることはできるよね
まあマーケッティングリサーチに使うならお気に入りって情報は鯖側でもったほうがいいと思うし
いずれにしろスレチ >>478
違うページに移動はしなくてもいいです。お気に入りから外れれば結果的にリストには残らないはずなので
今困っているのは>>467>>468の記述だと、お気に入りマークをクリックしても変わらない(お気に入りのままになっている)のです
>>472>>473を改変しているのですがどこがいけないのでしょうか?
>>479
[num]を少し調べてみます。
カラーミーのテンプレをカスタマイズしているショップさんは克服しているのでサーバーとは関係ないと思います。
カスタマイズに関してカラーミーはノータッチなので。
費用が発生するような質問だったらすみません。
プロに頼めってことですよねorz ページ遷移っていうのは違うページに移動することじゃない
同じURLを再度表示したときにページ内容を変えることもページ遷移っていう
ページ遷移なしでいいならこういうことをすれば表示だけは消せる
逆にページ遷移すると復活するのでおそらくやりたいことじゃないと思うが
.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>
>お気に入りから外れれば結果的にリストには残らない
この時点で鯖側のDB更新必須なので根本的にHTMLとCSSの範疇じゃない 別スレいってくれ <{favorite_button_attribute product_id=$product.id delete="favorite-list__fav-items"}>
の独自仕様部分でボタンをおしたら何らかのアクションスクリプトで
product_idのアイテムのDOMをfavorite-list__fav-itemsからさ駆除するようになってるんだろう
でいまそれが動いてないだけなんだろうけどそんな独自仕様が動かないのをきかれても答えられるわけない
とりあえずその部分が動かない限り何かが変化することはないよ 有料CMS用のコードを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
書いたことないです。自分が出来るのはコピペと改変だけ。これで何とかやってますwww
見様見真似でやってるので理論みたいなのはわかりません ダミーテキストがわからんっていわれても
こっちはお気に入り商品の中身知らないんだから何かしら別のテキストいれるしかないだろ
商品の中身は自分でいれるしかないんだし
文字のおきかえすらできないならどうせ無理だからあきらめたほうがいいよ ■ このスレッドは過去ログ倉庫に格納されています