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 >>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はペー、だっけ 聞き取り間違いを防ぐためというのなら
なんで本場の人は正確な発音をするのだろうか？ 英語？
たとえば向こうの人はvとb聞き分けられるだろ。
そういうこと。 まあ言うても極端にs/n比悪い環境での音声通話とかではあいつらもフォニックコード表使ったりするが >>549
その理屈だと最近の（若い）人も、外国人と同じように
ティーとテーを聞き分けられるようになったんだろ？
ティッシュをテッシュといわないのと同じように
聞き取り間違いを防ぐためと言うより
聞き分けられないっていうのが正解な気がする 工場は機械音でうるさいって前提では？そういう場合英語でもフォニックコード使うし。フォーマルな電話口とか管制とか。 画像を画面中央に配置してまわりの背景とシームレスにグラデーションするのってどうかけばいいですか？
画像側の４すみを透明にグラデーションするでもいいし
上に背景色をradial-gradientするのでもいいんですけど
画像が正方形じゃないのでうまくいかないんですよね
http://fast-uploader.com/file/7081868847119/
こんな感じにしたいです >>550
フォネティックコードっとおっしゃりたい？
使うと以外に通じないよね
特にあまり使わない単語だと
ブラボーのB、タンゴのT、ヴィクターのVとか言っても通りが悪い
ABCのB、STUのT、UVWのVみたいに
アルファベットの連続する３つの方がまだ通る、気がする
ていうか、団塊老人より今の子の方が
ネイティブな英語に接するのは楽なはずなのに、英語力は逆なのは何故なんだ
やっぱ海外に行く機会が少ななってるからなのか 俺「ビクターのビーですね。かしこまりました！」
俺「BikutaaのB、と。これでよし！」 >>553
画像自体には一切グラデを使わず、透過させる
背景のグラデを透けさせて完了 フリーのテンプレートですが、このデモサイトをiOSのSafariから開いた時に
下にスクロールしても上部のアドレスバーが縮小されず全表示のままになってしまいます。
何が作用してしまっているのでしょうか？
アドレスバーダブルクリックで最上部に移動できるSafariの挙動等も利用できず不便なので解除したいです。
よろしくお願いします
https://gatsby-starter-personal-blog.greglobinski.com/ >>557
スマホでしか見てないけど
windowというかviewportが動いてないんじゃない？ >>557
スクロールバーがブラウザのスクロールバーではなく、jsで生成されたものであり
一見ページをスクロールしているようだがブラウザ側ではスクロールしているという認識がされていない様子。
つーかページのソース見た？
jsで生成されててとても改変する気が起きないわ pwaなどという技術はない。
マイナスイオンガーみたいな乱用をやめろ。 PWAなんて言葉初めて知ったわ。
ナニコレ
もうますますデザイナーやフロントエンドの仕事が無くなりそうな時代の流れじゃね？ サイトをアプリ化してインストールで出来上り
出来上る結果は素人目線でWordPressと何が違うかと言われると
何も違わない気がしなくもないけど、この業界の仕事に危機を感じたわ がっつりフロントエンドなんだがなんでフロントエンドの仕事がなくなるんだ？ｗ
いかに自分がバカなこと言ってるのか分からないんだろうなｗ >>567
そうかな？
素人がそのまま使おうとして使えるレベルのデザインが出来上ってると思うけど。
あとはWPのテーマのようにデザインバリエーションを増やすだけで
WPよりも気軽にサイト持てると思ったんだが。 がっつりフロントエンドなんだがなんでフロントエンドの仕事がなくなるんだ？ｗ
いかに自分がバカなこと言ってるのか分からないんだろうなｗ ありがとうございました
JavaScriptのせいだったんですね
流石にJavaScriptをいじる知識はないので調べつついけそうなら頑張ってみようかと思います がっつりフロントエンドなんだがなんでフロントエンドの仕事がなくなるんだ？ｗ
いかに自分がバカなこと言ってるのか分からないんだろうなｗ > あと変数はできるだけ名前を短くして寿命（スコープ）を短くするのが良いと個人的には思うよ
こんなアホなことをいうフロントエンジニアなら知ってる >>569,>>571
そうかな？
素人がそのまま使おうとして使えるレベルのデザインが出来上ってると思うけど。
あとはWPのテーマのようにデザインバリエーションを増やすだけで
WPよりも気軽にサイト持てると思ったんだが。
バーカ。おまえは自分の状況すら理解出来ないまま職を失えばいいｗ まあ普通に考えて、
ディレクター、デザイナー、フロントエンド、バックエンドで
一番最初に無くなる可能性が高いのはフロントエンドだろうな。
認めたくないからって俺にしつこく絡むなアホ。
冷静に現実を見て認めろよ。 >>567のしつこさからいって荒れるだろうなこれは。
昔からここ住みついてるキモイやつにまた絡まれた可能性 >>574のような引用の仕方を知らない奴って世にあふれてるの？
初めてこういう文章を読んだときには？？？だった ■ このスレッドは過去ログ倉庫に格納されています
