HTML/CSS のどんな質問に必ず優しく答えるスレ 32
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術も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 CSS3とHTML5で
スクロールしたら文字浮き出たりするのは
無理ですか？
jsなしで、jsありならできるのはわかります。 大枠:hover 浮き出る要素
とかでそれっぽくできんじゃね？
スマホには対応しないけど スクロールしたらなのになんでhoverが出てきたしｗ >>83
ありがとう、hoverしかないですよね。
なんか色々探したらJavaScript使用するのはありました。
ま、無理そうなので諦めます。
勉強になりましたわ。 >>76-79
SASS で良い
ただし、SASSとは、SCSS の事です。
昔のSASSではない cssをもう一度基礎からやりたいんだけどおすすめの本を教えて >>87
本も知識かたよってるからね。信頼できる師匠見つけて、仕事手伝って覚えるのがいい >>89
うん。どうやったって偏るから、信頼できる人のを学ぶのがいい >>88
>>89
人によって書き方にはクセがあるからね Bootstrap 使っているサイト内のロゴをcinzelというフォントとstyle.cssで文字組みしてデザインしたいんですが、h1を使うとbootstrapのh1が反映されてしまい、!importalを付けても反映されませんでした。
どうしたらいいかお願いします https://www.nadsukimikadsuki.com/
こちらのサイトの上部４つのリンク(【手帳活】〜)のようにマウスオーバーで変化するcssが知りたいです。
よろしくおねがいします。 >>103
必要なのはHTMLとCSSのみ
期待通り動かないのはコピーする場所が間違っているか、不足している ずーっと気になってて、以前から調べても解決できなかったんですが、疑似要素を使った矢印とかで、モバイル版のchromeでみると必ず隙間ができるのはなんでだろう…
PCのブラウザだと問題ないから、ブラウザ依存なら諦めるしかないのかなぁ
本体と疑似要素の間をつめても線が入っちゃうから隙間とは違うのかな
どなたか解決方法を知ってますか？
https://i.imgur.com/n2XO4HC.jpg >>102
ありがとうございます。
記載したサイトそのままの動きにするにはどのようなcssを書けばいいでしょうか。
ソースを見てみましたが探せませんでした。 <div class="pickup-image"> の所の、transform, transition に色々書いてある
サイトを表示して、右クリックメニューから要素の検査をすれば、F12 開発者ツールが起動する >>108
ありがとうございます。
探していろいろと触ってみたのですが他の要素も混ざっていたりと難しく、
ソースを参考にするのは断念してしまいました。
http://www.cssdesk.com/6JLsA
自分で調べながら理想の形になるように組み合わせてみたのですが、
当たり前ですがそれぞれの要素にマウスが重なったときしか反応しません。
画像にマウスオーバーしたら枠線や中央のテキストの効果も全て反応するようにしたいのですが、
なにか良い方法はありませんでしょうか。
それともこの方法では無理ですか？
無知で申し訳ないです。どなたかご教示いただければ幸いです。
よろしくお願いします。 度々すみません。
>>109です。
検索してみて
https://mementoo.info/archives/777
https://coliss.com/articles/build-websites/operation/css/css-hover-on-everything-but.html
この方法でできるのではと思い、
http://www.cssdesk.com/6JLsA
こちらで試してみたのですが(下の画像の方です)
変化がありません。
ずぶの素人でどこをどうすれば同時に変化するようになるのか分かりません。
cssの書き方が間違っているのでしょうか。
ご教示いただけましたら幸いです。
何度も申し訳ないです。 DOMイベント伝播(バブリング)の順番は、孫 → 子 → 親。
つまり内側から外側へ、伝播される
外側のイベント発生時に、内側へイベントを発生させるには、
Vue.js などのJavaScript を使わないとできないのでは？
1. 外側(親)の要素がイベントをキャッチする
2. 内側(子)の要素へイベントを投入すると同時に、自分(親)のイベントを消化する >>111
ご丁寧にありがとうございます。
https://mementoo.info/archives/777
こちらのURLで紹介されているデモでは、
外側の#testにマウスオーバーする事で
内側の#innerも変化しているように見えるのですが
これはまた別なのでしょうか？
私の書き方が間違っているわけではないのでしょうか。 君は、101 かい？
書き込みを続けるなら、名前欄に、101 と入れてくれ
>>112
:hover で他の要素とも、連動できるのか。
そのサイトを参考にして作れば？ >>109
.text { }
#sample:hover > .text { }
この2つは、内容が同じだから、変わらないのでは？
もっと、内容を変えてみれば？
それと、もっとポイントを絞って、狭い範囲で質問してほしい。
量が多すぎて、何が悪さしているのか、ちょっとわからない
それと、このサイトを使わない方がよい。
動きがおかしい。バグってる
CSS が一番下まで表示されないし、特に、Edge ではコピペもできないし、
ろくにテストもしていないし、技術力が低すぎて使えない >>112
www.cssdesk.com/bTqgy
何やりたいかよくわかんなかったけどこんな？ 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。 コアアドインフィニティ
吉田篤史 ニート歴10年
経歴詐称で入社、ただいま職歴ロンダリング中 チェックボックスのチェックありなしで
tableのthを消したりtableそのものをdisplay:blockで並びを変えたいのですが
cssの記述がわかりません
チェックボックスのチェックありなしの時に設定したいcssそのものは出来上がってて現在はhtmlを分けて動かしてます。 これだけの情報ではいかんともしがたい
まずコードがわからない
チェックボックスとtableの位置関係は？
tableそのものの並びを変えたいとは？
できあがってるcssとは？
htmlを分けてるとは？ いずれこっちに統合予定でチェックボックスでテーブルの切り替え機能付ける予定
https://excelog.web.fc2.com/2018.html
↑このページを基本としてチェックボックスにチェックついたら↓のページのhtmlのヘッダのところに書いてあるcssで↓のページのように縦長にcssでやりたいけどうまく動いてくれないというのが質問です。
https://excelog.web.fc2.com/2018_test.html
スクリプトでゴリゴリ書いてもいいんだけどcssでできそうだからと試したら泥沼状態 しかしWPFやsilverlightやってたときもそうだがこの手の技術はブラックボックス納得させるのに苦労するね
コードは割となんとでもなるんだがビュー周りがきつい 質問しておいてあれですが自己解決しました
>>119
>>121
は取り下げします 初歩的な質問でごめん、
ulでliのメニューがあるんだけど、これを画像の幅にピッタリ連動するように
するコードを書くようにするにはどうしたらいい？できれば中央揃いで。
参考になるサイトがあったらよろしく。
ものすごく基本的な事聞いてるかもしれないけど、段々頭が混乱してきたので
書いておく、ちなみにコードは
HTMLは
<div id="container">
<div class="center">
<ul class="menu" id="gnav"><!-- ここはハンバーガーメニューのプラグインを使ってる！ -->
<li class="*">
</li>
</ul>
<div class="*">
<img src="*"><!-- ここはカルーセルのプラグインを使っている！-->
</div>
</div> cssは
#.center {
width;100%;
}
.center {
width:100%;
margin:0 auto;
}
@media scerrn and (min-width:1680ps) {
.center {
margin:0 auto;
width:73%;
}
}
ul.menu {
zoom:1;
postion:absolute;
z-index:2;
margin-left:15%;
}
なにかわかったら教えてくり >>125
どゆこと？
メニュー全体の幅をカルーセルの幅に合わせたい？
っていうかそのhtml、divの閉じタグが足りないが >>128
メニュー全体をカルーセルで幅ぴったりにしたいと思っています。
修正版は
<div id="container">
<div class="center">
<ul class="menu" id="gnav"><!-- ここはハンバーガーメニューのプラグインを使ってる！ -->
<li class="*">
</li>
</ul>
</div>
<div class="*">
<img src="*"><!-- ここはカルーセルのプラグインを使っている！-->
</div>
</div> >>129
プラグイン含めて
jsfiddleにUPしたら？
ところで、
こういう文章が
見やすいと思ってるの？ css描く矢印ってボーダーを内股にする方式しか見つからなかったので三つ折り方式作ってしまった >>129
プラグインの内容がわからないし画像の幅って言うけど画像がどこにあるかわからないし… フォームでリセットではなくて
切り取りボタンは設置できますか？
例えば、テキストボックスに入力された文字の一部を
マウスでハイライトして、ボタンを押すとハイライトした部分だけを切り取るような。
ブラウザで言えば、ハイライトしてブラウザの編集-切り取り。という作業の切り取りボタンを
フォームのリセットボタンの隣に置きたいです。 すみません、質問よろしくお願いいたします。
ttp://allfont.net/download/tiranti-solid-let-plain10/
のページにあるwebフォントを使用したいのですが
下部のfor siteにあるとおりhtml/cssを記述してもchromeとoperaに反映されませんでした。
Safariとfirefoxではちゃんとフォントが反映されていました。
ブラウザのこの違いは何が原因で起こりどうすればいいかご教授お願いします。 >>144
ありがとうございます！
エラーについて調べたのですが
Blocked by CORSだそうで色々調べたのですがよくわかりませんでした >>145
調べてないけどプロトコル（http/https）がフォントとサイトで齟齬ってるんじゃ？ うまくいかないページのミニマム版をくれればテストもできるんだがそもそもちゃんと書いてるかどうかすらわからんからなあ 皆さんありがとうございます。
このフォントでサイト名をヘッダーロゴにして使用したかったのですがウェブフォントは使わずSVGに変換して表示させることにしました。 反映されたページ見ながらcssいじれるソフトやウェブツールってありませんか？ ブラウザ上でHTMLjscss書けるところはいっぱいあるよ
あの黒系統のUIが合うなら ブラウザの開発者ツールでよくね？
htmlもjsもcssも書くとリアルタイムで反映されるぞ
ローカルファイルならファイルを上書き保存できるからエディタ的で便利 >>151です
回答ありがとうございます
たくさんありそうですね
cssに100を越える重複があって、それを解消するために反映されたページを見ながら、cssをいじりたいと思いました
何て単語で検索すればいいかわからずここで聞いてしまいました
>>153をヒントに調べてみます デベロッパーツールっていうすげーソフトがあるよ。
どうしてもっていうなら特別に１０万円で売ってあげるけど？ >>157
それ1万円で売ってるやつだろ
しかも機能が全部中途半端
ぼったくりにも程がある >>158
かなわないなぁ…
しょうがない！１万で売ってやる。 VSCode で開発すれば？
open in browser という拡張機能で、ファイル名を右クリックして、ブラウザが起動する。
Live Server では、HTML ファイルを保存すると、自動的にブラウザに反映される 何そのどこぞの馬の骨
Live serverだろ普通 なんでvertical-alignって使えるdisplayが決まっているのでしょうか？
pでもなんでも使えれば便利だと思うんですが pじゃなかった、display：blockなどですね 誰でも頭が良くなる、プログラムが書けるようになる方法が発見される 66945
https://you-can-program.hatenablog.jp スマホとPCの2段階のシンプルなレスポンシブなサイトを作る時、
cssはスマホ用を先に作って、PC用を後から作るのか
その逆か、どちらが作りやすいのでしょうか？
何かこころがけておきたいこと（幅とかレイアウトとか）
があればお勧めを教えてください。 >>167
モバイルファースト、スマホ版から作る
もう最近はスマホ版だけにしてPC版なしってサイトも増えてきた
（スマホゲーなど）
PC版無しでもいいんじゃね
まぁ慣れれば同時に作れるけどな > >>986
> はーなるほどなぁ
>
> ここ最近擬似クラス擬似要素やっと覚えてきたから
> むだにIDやclassつかわないで構築してたけど
> これみるとDIVで細かく指定するほうがいいのか
わざとらしすぎ。divは他に変わる要素がない時に
デザインのためだけに使うもので、技術力不足を隠すためのものじゃない ajaxでデータを取ってくる時に中にHTMLが含まれてるから（←馬鹿１ 普通は含めない）
それを変えることが出来ないんですよ！（←馬鹿に２ 変えることはできる） >>167
人それぞれやりやすい方でいいよ
もしくは会社のコーディング規約に則る
俺の場合はスマホから作ってる
スマホは絶対いるし逆にPCはいらない時もあるしスマホのレイアウト違いだけのデザイン増えてきたから
ちなみにメディアクエリ出てきた頃のIE(バージョンは忘れた)はメディアクエリに対応してなかったからPC先に作ってメディアクエリでスマホ作る必要かあった
なので今でもその流れの人は多い スマホサイト→PCサイト
・グローバルメニューを左メニュー
・body width100%→width960px
もうめんどくさくて最近全部これ
以上！終了！ ライブドアブログとFC2ブログでDMMアダルトのアフィリエイトサイトを始めたのですがわからないことがあります。
無料動画のアフィリエイトのHTMLが以下なのですが、
PCとスマホで確認したところ右カラム等にはみ出してしまいました。
サイズは４種類あり以下は一番小さい476×306です。
<iframe width="476" height="306" src="https://www.dmm.co.jp/〜/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>
PCとスマホでそれぞれ適切な大きさに表示させることは可能でしょうか？
可能でしたら記述を教えてください。よろしくお願いします。 <iframe width="476" height="306"
↓
<iframe width="100%"
か
<iframe width="100%" height="auto"
多分前者で行けるけど念の為 >>174
レスありがとうございます。
書いてみたのですが横幅は良くなるのですが、
縦が上半分のみになってしまいます・・・。
width="100%"で画像はできたのですが、動画が上手く表示できず質問しました。
引き続きよろしくお願いいたします。 calc(calc(306 / 476) * 100%) >>176
レスありがとうございます。
calc(calc(306 / 476) * 100%)
は下記のどこに書けばよいのでしょうか？
<iframe width="476" height="306" src="https://www.dmm.co.jp/〜/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>
皆様、お手数おかけいたします。 こうかな
<iframe width="100%" style="height: calc(calc(306 / 476) * 100%);" src="https://www.dmm.co.jp/〜/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe> >>178
ありがとうございます。
先程と同じく横幅は良くなるのですが、
縦が上半分のみになってしまい画面全体が映りません。
scrolling="no" を yes にするとバーの上下で出てくる感じです。
ありがとうございました。 
