X

HTML/CSS のどんな質問に必ず優しく答えるスレ 32

0001Name_Not_Found
垢版 |
2018/02/25(日) 17:27:17.09ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。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
0129Name_Not_Found
垢版 |
2018/11/03(土) 08:49:54.46ID:tkZgNsuQ
>>128
メニュー全体をカルーセルで幅ぴったりにしたいと思っています。

修正版は

<div id="container">
　　<div class="center">
<ul class="menu" id="gnav"><!-- ここはハンバーガーメニューのプラグインを使ってる！ -->
<li class="*">
</li>
</ul>
</div>
<div class="*">
<img src="*"><!-- ここはカルーセルのプラグインを使っている！-->
</div>
</div>
0130Name_Not_Found
垢版 |
2018/11/03(土) 09:23:59.51ID:???
>>129
プラグイン含めて

jsfiddleにUPしたら？

ところで、

こういう文章が

見やすいと思ってるの？
0133Name_Not_Found
垢版 |
2018/11/05(月) 05:13:21.46ID:???
css描く矢印ってボーダーを内股にする方式しか見つからなかったので三つ折り方式作ってしまった
0134Name_Not_Found
垢版 |
2018/11/05(月) 11:14:27.41ID:???
>>129
プラグインの内容がわからないし画像の幅って言うけど画像がどこにあるかわからないし…
0135Name_Not_Found
垢版 |
2018/11/06(火) 14:24:13.12ID:???
css使いこなすと面白いな
0139Name_Not_Found
垢版 |
2018/11/29(木) 02:22:03.03ID:ClDJIjKY
フォームでリセットではなくて
切り取りボタンは設置できますか？
例えば、テキストボックスに入力された文字の一部を
マウスでハイライトして、ボタンを押すとハイライトした部分だけを切り取るような。
ブラウザで言えば、ハイライトしてブラウザの編集-切り取り。という作業の切り取りボタンを
フォームのリセットボタンの隣に置きたいです。
0141Name_Not_Found
垢版 |
2018/11/29(木) 02:29:38.77ID:ClDJIjKY
>>140　ありがとう
0143Name_Not_Found
垢版 |
2018/11/30(金) 18:18:53.00ID:???
すみません、質問よろしくお願いいたします。
ttp://allfont.net/download/tiranti-solid-let-plain10/
のページにあるwebフォントを使用したいのですが
下部のfor siteにあるとおりhtml/cssを記述してもchromeとoperaに反映されませんでした。
Safariとfirefoxではちゃんとフォントが反映されていました。
ブラウザのこの違いは何が原因で起こりどうすればいいかご教授お願いします。
0144Name_Not_Found
垢版 |
2018/11/30(金) 18:40:26.92ID:???
ブラウザの出すエラーメッセージ見た?
0145Name_Not_Found
垢版 |
2018/12/02(日) 13:47:50.30ID:???
>>144
ありがとうございます！
エラーについて調べたのですが
Blocked by CORSだそうで色々調べたのですがよくわかりませんでした
0146Name_Not_Found
垢版 |
2018/12/03(月) 10:24:20.80ID:???
>>145
調べてないけどプロトコル（http/https）がフォントとサイトで齟齬ってるんじゃ？
0148Name_Not_Found
垢版 |
2018/12/03(月) 11:14:12.54ID:4wYsvQ7f
うまくいかないページのミニマム版をくれればテストもできるんだがそもそもちゃんと書いてるかどうかすらわからんからなあ
0149Name_Not_Found
垢版 |
2018/12/03(月) 16:49:08.63ID:???
調べるより聞いた方が早いかと
0150Name_Not_Found
垢版 |
2018/12/03(月) 19:12:10.87ID:???
皆さんありがとうございます。
このフォントでサイト名をヘッダーロゴにして使用したかったのですがウェブフォントは使わずSVGに変換して表示させることにしました。
0151Name_Not_Found
垢版 |
2018/12/04(火) 00:31:39.24ID:XbNL8uMo
反映されたページ見ながらcssいじれるソフトやウェブツールってありませんか？
0152Name_Not_Found
垢版 |
2018/12/04(火) 00:35:03.56ID:???
ブラウザ上でHTMLjscss書けるところはいっぱいあるよ
あの黒系統のUIが合うなら
0154Name_Not_Found
垢版 |
2018/12/04(火) 00:47:36.39ID:???
ブラウザの開発者ツールでよくね？
htmlもjsもcssも書くとリアルタイムで反映されるぞ
ローカルファイルならファイルを上書き保存できるからエディタ的で便利
0155Name_Not_Found
垢版 |
2018/12/04(火) 10:55:24.51ID:zxWKIu5g
>>151です
回答ありがとうございます
たくさんありそうですね
cssに100を越える重複があって、それを解消するために反映されたページを見ながら、cssをいじりたいと思いました
何て単語で検索すればいいかわからずここで聞いてしまいました
>>153をヒントに調べてみます
0157Name_Not_Found
垢版 |
2018/12/04(火) 19:36:29.39ID:???
デベロッパーツールっていうすげーソフトがあるよ。
どうしてもっていうなら特別に１０万円で売ってあげるけど？
0158Name_Not_Found
垢版 |
2018/12/04(火) 21:20:40.24ID:???
>>157
それ1万円で売ってるやつだろ
しかも機能が全部中途半端
ぼったくりにも程がある
0159Name_Not_Found
垢版 |
2018/12/04(火) 22:30:51.49ID:???
>>158
かなわないなぁ…
しょうがない！１万で売ってやる。
0162Name_Not_Found
垢版 |
2018/12/05(水) 13:45:07.69ID:???
VSCode で開発すれば？

open in browser という拡張機能で、ファイル名を右クリックして、ブラウザが起動する。
Live Server では、HTML ファイルを保存すると、自動的にブラウザに反映される
0163Name_Not_Found
垢版 |
2018/12/05(水) 14:43:40.16ID:???
何そのどこぞの馬の骨
Live serverだろ普通
0164Name_Not_Found
垢版 |
2019/03/13(水) 13:13:45.30ID:???
なんでvertical-alignって使えるdisplayが決まっているのでしょうか？
pでもなんでも使えれば便利だと思うんですが
0165Name_Not_Found
垢版 |
2019/03/13(水) 13:14:05.37ID:???
pじゃなかった、display：blockなどですね
0167Name_Not_Found
垢版 |
2019/04/13(土) 02:13:05.26ID:???
スマホとPCの2段階のシンプルなレスポンシブなサイトを作る時、
cssはスマホ用を先に作って、PC用を後から作るのか
その逆か、どちらが作りやすいのでしょうか？

何かこころがけておきたいこと（幅とかレイアウトとか）
があればお勧めを教えてください。
0168Name_Not_Found
垢版 |
2019/04/13(土) 02:41:32.97ID:???
>>167
モバイルファースト、スマホ版から作る
もう最近はスマホ版だけにしてPC版なしってサイトも増えてきた
（スマホゲーなど）
PC版無しでもいいんじゃね

まぁ慣れれば同時に作れるけどな
0169Name_Not_Found
垢版 |
2019/04/13(土) 07:30:24.22ID:???
> >>986
> はーなるほどなぁ
>
> ここ最近擬似クラス擬似要素やっと覚えてきたから
> むだにIDやclassつかわないで構築してたけど
> これみるとDIVで細かく指定するほうがいいのか

わざとらしすぎ。divは他に変わる要素がない時に
デザインのためだけに使うもので、技術力不足を隠すためのものじゃない
0170Name_Not_Found
垢版 |
2019/04/13(土) 07:32:26.76ID:???
ajaxでデータを取ってくる時に中にHTMLが含まれてるから（←馬鹿１ 普通は含めない）
それを変えることが出来ないんですよ！（←馬鹿に２ 変えることはできる）
0171Name_Not_Found
垢版 |
2019/04/13(土) 12:32:03.43ID:???
>>167
人それぞれやりやすい方でいいよ
もしくは会社のコーディング規約に則る
俺の場合はスマホから作ってる
スマホは絶対いるし逆にPCはいらない時もあるしスマホのレイアウト違いだけのデザイン増えてきたから
ちなみにメディアクエリ出てきた頃のIE(バージョンは忘れた)はメディアクエリに対応してなかったからPC先に作ってメディアクエリでスマホ作る必要かあった
なので今でもその流れの人は多い
0172Name_Not_Found
垢版 |
2019/04/13(土) 12:44:41.05ID:???
スマホサイト→PCサイト
・グローバルメニューを左メニュー
・body　width100%→width960px

もうめんどくさくて最近全部これ
以上！終了！
0173Name_Not_Found
垢版 |
2019/04/15(月) 21:11:49.64ID:???
ライブドアブログと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とスマホでそれぞれ適切な大きさに表示させることは可能でしょうか？

可能でしたら記述を教えてください。よろしくお願いします。
0174Name_Not_Found
垢版 |
2019/04/15(月) 21:21:53.43ID:???
<iframe width="476" height="306"
↓
<iframe width="100%"
か
<iframe width="100%" height="auto"
多分前者で行けるけど念の為
0175Name_Not_Found
垢版 |
2019/04/15(月) 21:40:19.71ID:???
>>174
レスありがとうございます。

書いてみたのですが横幅は良くなるのですが、
縦が上半分のみになってしまいます・・・。

width="100%"で画像はできたのですが、動画が上手く表示できず質問しました。

引き続きよろしくお願いいたします。
0177Name_Not_Found
垢版 |
2019/04/16(火) 10:14:37.86ID:???
>>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>

皆様、お手数おかけいたします。
0178Name_Not_Found
垢版 |
2019/04/16(火) 14:15:15.92ID:???
こうかな
<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>
0179Name_Not_Found
垢版 |
2019/04/16(火) 14:46:44.85ID:???
>>178
ありがとうございます。

先程と同じく横幅は良くなるのですが、
縦が上半分のみになってしまい画面全体が映りません。
scrolling="no"　を　yes にするとバーの上下で出てくる感じです。

ありがとうございました。
0180Name_Not_Found
垢版 |
2019/04/16(火) 14:48:03.87ID:???
<iframe width="100%" height="500"
もう決め打ちでいいんじゃね
0181Name_Not_Found
垢版 |
2019/04/16(火) 15:07:38.77ID:???
>>180
スマホで上手く再生できないようなので諦めます。
ありがとうございました。
0182Name_Not_Found
垢版 |
2019/04/17(水) 20:59:46.93ID:???
<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のダミー画像しいて、表示するボックスを確保しないといかんけど
0183Name_Not_Found
垢版 |
2019/05/14(火) 18:22:43.77ID:kGY3IxPa
afterでdivやその他のタグを追加することは出来ませんか？
0184Name_Not_Found
垢版 |
2019/05/29(水) 12:18:12.91ID:J16+m6pE
リンクというリンクが全部リストタグになってるページあるんだがSEO上有利なのかな
0185Name_Not_Found
垢版 |
2019/05/29(水) 14:51:14.87ID:???
以前聞いたことあるけど今でもそうなのか？
SEO競争にGoogleが終止符を打ってオワコンと化したイメージ
0186Name_Not_Found
垢版 |
2019/06/04(火) 16:46:40.21ID:???
変なSEO対策やると修復が大変
死ぬまで置い続ける覚悟があるならいいけど
0187Name_Not_Found
垢版 |
2019/06/04(火) 23:15:50.94ID:4xkr/mar
うむ。コンテンツに精を出して欲しいところ。

しかし怪しい健康サイトがSEOを徹底して検索上位に来てたなんて事件もあったしなー。世の中は理不尽である。
0188Name_Not_Found
垢版 |
2019/06/05(水) 00:20:05.30ID:???
ではないでしょうか？
どうでしょうか？
なクソ記事コンテンツも撲滅してほしい
0189Name_Not_Found
垢版 |
2019/06/05(水) 04:21:53.11ID:???
キーワード連呼して極限まで薄く延ばした乞食サイトがはびこって
検索が使い物にならない
0190Name_Not_Found
垢版 |
2019/06/05(水) 23:30:41.81ID:???
もはやググレバカスだからな
0191Name_Not_Found
垢版 |
2019/06/07(金) 21:41:36.11ID:???
ちょっとした疑問ですが、

5ch のスレは、書き込んだ文字列が長いと、右側の広告の下に潜り込んで、見えなくなってしまうのですが、
この文字列を折り返して表示するには、どうすれば良いですか？
0192Name_Not_Found
垢版 |
2019/06/07(金) 22:33:02.06ID:???
適当なとこで
改行を
する
0193Name_Not_Found
垢版 |
2019/06/07(金) 22:38:25.35ID:???
もう何年もアプリでしか見てないからどうなってるかよくわからんな
0194Name_Not_Found
垢版 |
2019/06/08(土) 12:27:25.72ID:???
隣あった要素の高さを揃えるのって昔はmatchHeight使ってて今はflexboxでやってるんだけど
隣あった要素の中の子要素を揃えたい時はいまだにmatchHeightを使ってるんだよね
<div class="item">
<div class="child"></div>
</div>
<div class="item">
<div class="child"></div>
</div>
これの .childの高さを揃える
これってflexboxでできる？
0195191
垢版 |
2019/06/08(土) 23:50:58.70ID:???
5ch のスレは、右側の広告がページではなく、ディスプレイ画面に固定で貼り付いている

書き込みを囲む<div> の横幅が、広告の直前で止まらない。
広告の下まで、潜り込んでしまう

でも、この板のスレでは、潜り込まない。
サーバーによって違うのだろう

一般的には、潜り込まないようにするには、CSS で、どう設定するの？
0198Name_Not_Found
垢版 |
2019/06/10(月) 17:05:39.08ID:1aGcNMl0
大きい画像をcssで小さくすればページって軽くなったりします？
0200191
垢版 |
2019/06/12(水) 00:34:58.33ID:???
5ch のスレの右側の広告は、フローティング追従広告ですね

左側の文字列が、広告の下に潜り込まないようにするには、
CSS で、どのように書けば良いですか？
0201Name_Not_Found
垢版 |
2019/06/12(水) 14:49:41.85ID:???
padding-right: XXXpxとかwidth:calc(100% - XXXpx)とか
右側に一定のスペース空けとけばいいだけ
0202Name_Not_Found
垢版 |
2019/06/12(水) 15:07:18.20ID:???
.thread { word-break: break-all; }

広告をdisplay:none;してしまった方が捗る気がするが
0203Name_Not_Found
垢版 |
2019/06/13(木) 02:35:33.65ID:???
html + CSS で、行ごとに色を変えて、しましまにする方法はあるのでしょうか

nth-child を試してみましたが、うまく行きません
https://jsbin.com/jugecok/edit?html,css,js,output

JavaScript を使えばソレっぽいものは作れたのですが
CSS だけで、テーブルを使わずに、どうにかならないかなあと…
参考にしたページ：https://konohazuku.net/css/css_nth-child_tbl_border/
0205Name_Not_Found
垢版 |
2019/06/13(木) 02:51:51.76ID:???
>>203
これじゃあかんの？

div {
background-color: #ff5;
}
div:nth-child(even) {
background-color: #55f;
}

tr:nth-child(even) {
background-color: #555;
}

table {
background-color: #eee;
}
0208Name_Not_Found
垢版 |
2019/06/13(木) 07:27:00.31ID:???
スレタイ通りで良いスレだな
0209203
垢版 |
2019/06/13(木) 10:27:45.23ID:???
スレ本来の趣旨から離れる質問なのですが、よろしいでしょうか

「個人として弄る」分には >>203 のように
「単純な html + CSS で書く方法が思いつかないときに JavaScript で」というのも選択肢かなあと思ってしまうのですが
実務的にはどうですか？


・CSS だけで書けるんだから CSS で書け！
・JS で書くなら vanilla JS なんて使うな！　jQuery で書け！

みたいなかんじなのでしょうか
0210Name_Not_Found
垢版 |
2019/06/13(木) 12:18:10.49ID:???
バニラで問題なく書けるならわざわざjQueryで重くすることはない
0211Name_Not_Found
垢版 |
2019/06/13(木) 13:34:04.14ID:???
jQueryが重いって思ったこと無いけど、
それよりも開発コストが減るほうが重要なんじゃないの？
0212Name_Not_Found
垢版 |
2019/06/13(木) 16:09:04.70ID:???
どんなサイトか次第でしょ
ECサイトで無駄な負荷はかけたくないな
0213Name_Not_Found
垢版 |
2019/06/13(木) 17:44:14.71ID:???
ECサイトでかけたくない負荷は、
サーバー側であって、クライアント側じゃないよｗ

ってか重いと思ったこと無いんで
余計な負荷はないと考えて良いんじゃねーの？
0214Name_Not_Found
垢版 |
2019/06/13(木) 18:46:40.63ID:???
フロントエンドを重いと思うかどうかは開発者ではなくユーザー(閲覧者)
バックエンドが重いのは誰が見ても同じだがフロントエンドは閲覧してるデバイスによるので開発者が「重いと思わない」というのはなんの役にもたたない
バニラでするかjQueryでするかでは実際にjQueryの方が重いことはよくある
逆にバニラでした方が開発コストかかるかどうかは仕様(処理の複雑さ)による
実務としては多少コストがかかる程度なら見積り時にバニラで実装する想定で見積りを出す(見積書には明言しないが)
それで発注がもらえればコストの面は気にしなくていいので設計時にどうするかを決める
こんな感じ
0215Name_Not_Found
垢版 |
2019/06/13(木) 19:44:42.91ID:???
まぁ書き方にもよるけどな
速度にそんな差が出る処理って例えばどんなん？
0216Name_Not_Found
垢版 |
2019/06/13(木) 19:55:38.60ID:???
>>214
でもさ、お前、古いブラウザすぐに切り捨てるじゃん？

新しいブラウザを搭載してるのは、性能がいい端末なので
jQuery程度、なんの生涯にもならんよ

そもそも、ほとんどのサイトが使っていて
今まで問題起きてない
0217Name_Not_Found
垢版 |
2019/06/13(木) 20:11:05.94ID:???
複数タブ開くのは普通だし少しでもリソース無駄にしたくない派と
性能いいんだから開発楽するためになんでも使うバッテリーの持ちなんて知ったことじゃねー派は常に相容れない
0218Name_Not_Found
垢版 |
2019/06/13(木) 21:17:39.16ID:???
jQueryをやめてもバッテリーの消費は誤差程度の違いしか生まれなかったよ
0219Name_Not_Found
垢版 |
2019/06/13(木) 23:04:58.41ID:???
jQuery覚えるのめんどくさいから、vanillaで済ましてる
この仕事始めてすぐにVistaとIE9のサポート切れたんで、なくても困ったことがない
ライブラリもjQuery非依存のやつが一通りそろってるし、
定番プラグインだったらしいのは軒並みメンテナンス放棄されてるしな
使うのは他人が書いたコードをメンテするときだけ
0220Name_Not_Found
垢版 |
2019/06/13(木) 23:06:58.22ID:???
jQueryのメリットなんてもう薄っぺらいもんな
使う必要かなくなってきた
0221Name_Not_Found
垢版 |
2019/06/13(木) 23:09:48.58ID:???
ってかここってHTML/CSSのスレじゃん
jQuery云々はさすがにスレチだろ
0222Name_Not_Found
垢版 |
2019/06/14(金) 00:11:51.81ID:???
Bootstrap を使ったら、依存関係で、jQuery も必要！
Bootstrapの機能は、jQueryで作られているから

だから、Bootstrapのユーザーが増えるに従って、jQueryのシェアも増えていく
0224Name_Not_Found
垢版 |
2019/06/14(金) 02:35:07.70ID:???
メンテの面からCSSですむならCSSかな
0225Name_Not_Found
垢版 |
2019/06/14(金) 04:56:00.13ID:???
他人が書いたコードをメンテするときに使うから
結局jQueryを使う。この業界にいて覚えないなんて選択肢はないよ
0226Name_Not_Found
垢版 |
2019/06/14(金) 09:54:25.14ID:???
jQueryの話はjQueryのスレに行ってください
0227Name_Not_Found
垢版 |
2019/06/15(土) 01:53:39.00ID:Fc2SWzYL
>>223
そうなの？　Googleのじゃなくて？
0228Name_Not_Found
垢版 |
2019/06/15(土) 12:29:20.27ID:???
>>222
まあこういうドミノ倒しばかりだな　ゼロから作るならそもそもbootstrapを使わない。
新着レスの表示
レスを投稿する

ニューススポーツなんでも実況