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 君は、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 にするとバーの上下で出てくる感じです。
ありがとうございました。 <iframe width="100%" height="500"
もう決め打ちでいいんじゃね >>180
スマホで上手く再生できないようなので諦めます。
ありがとうございました。 <div class="outer">
<iframe width="476" height="306" src="https://www.dmm.co.jp/〜/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.outer {position:relative;width:100%;max-width:640px;}
.outer::before {content:"";display:block;width:100%;padding-top:calc(100% / 476 * 306);}
.outer iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
</style>
iframeのアスペクト比を保ったままのリサイズならpaddingハックつかうのが普通じゃね？
::beforeとか使えない状況なら、代わりに下に476x306のダミー画像しいて、表示するボックスを確保しないといかんけど afterでdivやその他のタグを追加することは出来ませんか？ リンクというリンクが全部リストタグになってるページあるんだがSEO上有利なのかな 以前聞いたことあるけど今でもそうなのか？
SEO競争にGoogleが終止符を打ってオワコンと化したイメージ 変なSEO対策やると修復が大変
死ぬまで置い続ける覚悟があるならいいけど うむ。コンテンツに精を出して欲しいところ。
しかし怪しい健康サイトがSEOを徹底して検索上位に来てたなんて事件もあったしなー。世の中は理不尽である。 ではないでしょうか？
どうでしょうか？
なクソ記事コンテンツも撲滅してほしい キーワード連呼して極限まで薄く延ばした乞食サイトがはびこって
検索が使い物にならない ちょっとした疑問ですが、
5ch のスレは、書き込んだ文字列が長いと、右側の広告の下に潜り込んで、見えなくなってしまうのですが、
この文字列を折り返して表示するには、どうすれば良いですか？ もう何年もアプリでしか見てないからどうなってるかよくわからんな 隣あった要素の高さを揃えるのって昔はmatchHeight使ってて今はflexboxでやってるんだけど
隣あった要素の中の子要素を揃えたい時はいまだにmatchHeightを使ってるんだよね
<div class="item">
<div class="child"></div>
</div>
<div class="item">
<div class="child"></div>
</div>
これの .childの高さを揃える
これってflexboxでできる？ 5ch のスレは、右側の広告がページではなく、ディスプレイ画面に固定で貼り付いている
書き込みを囲む<div> の横幅が、広告の直前で止まらない。
広告の下まで、潜り込んでしまう
でも、この板のスレでは、潜り込まない。
サーバーによって違うのだろう
一般的には、潜り込まないようにするには、CSS で、どう設定するの？ >>194
外側(item)の高さが揃ってるなら、内側(child)に高さ指定してやればいいだけでは
https://jsfiddle.net/m8Lthq1x/1/ 大きい画像をcssで小さくすればページって軽くなったりします？ 5ch のスレの右側の広告は、フローティング追従広告ですね
左側の文字列が、広告の下に潜り込まないようにするには、
CSS で、どのように書けば良いですか？ padding-right: XXXpxとかwidth:calc(100% - XXXpx)とか
右側に一定のスペース空けとけばいいだけ .thread { word-break: break-all; }
広告をdisplay:none;してしまった方が捗る気がするが html + CSS で、行ごとに色を変えて、しましまにする方法はあるのでしょうか
nth-child を試してみましたが、うまく行きません
https://jsbin.com/jugecok/edit?html,css,js,output
JavaScript を使えばソレっぽいものは作れたのですが
CSS だけで、テーブルを使わずに、どうにかならないかなあと…
参考にしたページ：https://konohazuku.net/css/css_nth-child_tbl_border/ >>203
これじゃあかんの？
div {
background-color: #ff5;
}
div:nth-child(even) {
background-color: #55f;
}
tr:nth-child(even) {
background-color: #555;
}
table {
background-color: #eee;
} ありがとうございました
https://jsbin.com/xapekam/5/edit?html,css,output
CSS の基本的な所が分かっていなかったようです
お手数をおかけしました スレ本来の趣旨から離れる質問なのですが、よろしいでしょうか
「個人として弄る」分には >>203 のように
「単純な html + CSS で書く方法が思いつかないときに JavaScript で」というのも選択肢かなあと思ってしまうのですが
実務的にはどうですか？
・CSS だけで書けるんだから CSS で書け！
・JS で書くなら vanilla JS なんて使うな！ jQuery で書け！
みたいなかんじなのでしょうか バニラで問題なく書けるならわざわざjQueryで重くすることはない jQueryが重いって思ったこと無いけど、
それよりも開発コストが減るほうが重要なんじゃないの？ どんなサイトか次第でしょ
ECサイトで無駄な負荷はかけたくないな 
