HTML/CSS のどんな質問にも優しく答えるスレ 34
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 33
http://mevius.5ch.net/test/read.cgi/hp/1531279252/
■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html まえに一度使おうとして断念したんだけど
CSSのscrollsnapって、JSで拾えるイベントあるもの？ まあそうなんだけど
snapしたときになんかイベントあったら便利なのになー
と思いまして そりゃあったほうがいいわな
transitionのtrantitionEndみたいなもんだろ？ わかる
snapした瞬間
ズギャーーーーーーン！！！
って鳴らしたいよね
このスレの総意 ごめん、人によって
ガシューーーーーーン！！！
かもしれないから総意とは言えなかった LP的なアニメーションごりごりを作る時に
ぶっぴがーん！に合わせてアニメーション始めたいというのは当然あるな
同等のことをするJSライブラリが
停止時に発火するコールバックを設定できるのもそのためだろう amazonと楽天にリンクするボタンがほしいのです
それっぽいのどこぞにプログラムございませんでしょうか？ アフィリンクのボタンならそれぞれのアフィ審査受けないとリンクはもらえん
ただのボタンならプログラムじゃなくてaタグ Superfish モバイル用のハンバーガーメニューの設定がわからない。 >>256
ありがとうございます
アマゾンも楽天も通ってます。
https://imgur.com/a/Yg8lNFi
このようなボタン形式のリンクがほしーのです、 >>258
aタグのリンクにcss適用すればいい
aタグ ボタン cssで検索すればいくらでもでてくる cssが何かもよくわかってないんだろ
カエレバ CSSで検索 >>259
>>260
ありがとうございます。こういうふうな仕組みなんですね、勉強になります
いろいろ触ってみますが、また何かあったらお助けお願いするかもです、、
ありがとうございます！ inline-blockである .dan と .jo がDOMツリー上で
男女女女男女男女男男女女
と並んでいるとき
男女
女
女
男女
男女
男
男女
女
と左右に並べ分けたいのですが、どういう方法がありますか？
floatとかですか？
.dan + .jo { float: left } …うーん？ .dan, .jo {
display: inline-block;
width: 49%;
}
.dan {
background-color: #eef;
margin-right: 2%;
}
.jo {
background-color: #fee;
}
.jo + .jo {
margin-left: 51%;
}
こんなじゃだめ？ >>238
JavaScriptの事で良いんですか？
解りました。
ありがとうございました。 >>269
ありゃ
htmlでって書いてたのにjsでいいの？ CSS Gridについて教えてください。
<div class="container">
<div class="a"><img></div>
<div class="b"><img></div>
<div class="c"><img></div>
...以下大量に。
</div>
この様な感じで、インスタグラムの様に、.a .b .c ...の中にあるimgをひたすら詰め込んで羅列したい場合は、
レイアウトする画像のサイズが決まっていれば(例えば300px角)
grid-auto-rows:300px と grid-template-columns:repeat(auto-fit,300px)
で可能ですが、
ウィンドウサイズによって画像のサイズも変動する様にするには、
（100px角にも800px角にもなったりする）
auto-rowsもrepeatも使用せずに、
.a .b .c ... にgrid-row と grid-columnをそれぞれのクラスに指定しなくてはならないのでしょうか？ IEのクソ対応を考えたらcss gridは使いたくない こちらのサイト（カントリーマウム）は
gridを使用しているとのことで、
ウィンドウサイズを変えるとそれに伴って中の画像のサイズも変動していますが、
これは画像1枚1枚をcolumnとrowで1/5や5/17と1つずつ指定しているのかと思いまして >>273
display: grid;を利用してるわけじゃなくてデザインがグリッドレイアウトなだけだと思う。 >>275
検証を使うとdisplay:gridなら縦横の点線が出ると思うのですが、これにはでないので不思議でした
そういうことだったのですね・・・
このサイトはテーブルセルとtext-alignで画像を配置しているのでしょうか
ありがとうございます！ >>276
flex-boxでwrapすればいいのでは？ CSSに凝りだすと、ちょっと画面が狭い場合にはこんな感じで
@media screen and (max-width: 480px){
設定を書く
}
とやりますよね。
でも、こう言うメディアクエリを一箇所に集めるのは手間が掛かります。
別の要素に対してCSSを書いていて、その場合にも少し狭い場合には、
@media screen and (max-width: 480px){
別の設定を書く
}
みたいに、CSSの中に上のような同じ記述が何度も出て来ます。
WEBプログラミング上級者の人は、こう言う場合どのように対処されているのでしょうか？
@media screen and (max-width: 1030px){・・・}
@media screen and (max-width: 768px){・・・}
@media screen and (max-width: 480px){・・・}
みたいなのは一箇所にまとめるべきですか？ >>279
ファイルをメディアによって分け、linkタグのmedia属性でメディア種別やクエリを指定する。
このリソースはメディアの条件が真になった場合のみ読み込まれるので、
１ファイルにまとめるより読み込まれる容量も減る。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/link
SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。
ツールが何をやっているかも分からずツールに使われている>>280のようになってはいけないよ。 >>281
えええええ
そっちの方が面倒臭いじゃん… >>282
面倒くさいにも二通りの意味があってな
作業を効率化する（のが面倒くさい）が、その後の作業自体は楽になる
と
作業を効率化しなくて楽だが、その後の作業自体は面倒くさい
どっちの面倒くさいを取るかなんだよ？ まぁそれがめんどくさいレベルの規模なら自動化の契機だな。PostCSSとnpm scriptまたはgulpで自動化できる。 >>281
> SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。
ブラウザで直接解釈されても、同じことでは？ >>281
解説ありがとうございました。
>このリソースはメディアの条件が真になった場合のみ読み込まれるので、
これはブラウザのウインドウ幅を変化された場合に、
それに応じてメディアファイルが読み込まれると言う事ですか？ >>283
あたまかたーい
普通は
その後の作業が面倒くさくならないように、作業を効率化するよねー @media なんかを使っている、WEBプログラミング上級者は100%、SASS！
というか、海外では初心者でも90%、SASS
知らないのは、50% の日本人だけ >>289
日本でもそんなに変わらんじゃろ
流石に
普及してから何年経ったと >>270
すんません。
さっぱり解らないんですが、ｈｔｍｌのｊｓってのが有るんですか？
それと、ｊａｖａとｈｔｍｌってのは違うものなのですか？
自分としては目的のサイトを作れるのなら、方法については
何でも良いのですが。 >>291
なんでもいいのなら他人に任せたほうが良い
自分でやるなら、理解しろ >>291
JSはJavaScriptのことだ
名前はJAVAと似ているが全くの別物だ
JAVAとJavaScriptは、メロンとメロンパンくらい違うものだ
JavaScriptはブラウザの中で動くプログラムのことだ
んでHTMLは文章の構造を決めるものでたいした機能はないんだ
何かを押したらどうこうする、みたいなのはJavaScriptの仕事だ >>293
まったくわかりません。
もっとわりやすく説明できませんか？ ミニ丼セットの丼だけのオーダーはお受けできませ「ぬ！」 英語圏で色々もあるよー
difference java javascript でググると似たような与太話しいっぱいヒットする
CatとCatfish
hamとhamstar
CarとCarpet
CockとCocktail
とかとか 仕様見てると
<h1>
<p>~</p>
</h1>
も
<p>
<h1>
~~~~
</h1>
</p>
もどっちも書いても良さそうだけど、ブログで後者はNGって記事をよく見る
実際どうなんやろ？ >>293
自分は２９１ですが、
良くわかりました。
ありがとうございました。 >>266
20代前半はそういう職場で働いてたわ
皆おっとりしてたから居心地は良かったが
性格悪い奴とか気性が荒い女が紛れてると
パシリに使われるかボイコットされたり最悪な環境にもなりえるんだろうな >>279
それは汎用性、メンテナンス性に欠けるクソ構造だよ
更新や編集の多いサイトを深く運用してみれば意味がわかるようになる。
優れたデザインは常にシンプル。
複雑なものを複雑に書くより
必要なもの以外をいかにそぎ落としていくかに尽力した方がいい。 >>303
>優れたデザインは常にシンプル
それ複雑なデザインをまとめられないだけなんじゃ… 複雑なものを整理してまとめることは誰でもできる
複雑なものを複雑なままバランス取るのは素人にはできん >>310
少なくとも後者は駄目だわな
<p>はブロックレベル要素を内包できない
だから無理やり入れると、そこで<p>のブロックは一度切れるじゃろ？
前者はどうだろう
<h1>って内包してはならん要素ってあったかなあ 所見です
font-sizeについて質問があります。
全ての要素のサイズをvmまたは%で指定し、
font-sizeもvmで指定すれば理論上、画面幅をいくつにしようが
全ての縦横比、スタイルは保持され、
文字もまた、行内文字数、行数が保持されるはずなのですが、
実際に画面幅を変えると、行内文字数、行数は変化してしまいます。
これはなぜでしょうか？
例外的にstrong内の文字は行内文字数、行数は変化しないことを発見しました。
これはなぜでしょうか？ >>310
h要素はブロックレベル入れられないから >>300
やってもいいしちゃんと表示されるけど
正しいHTML構造文としてはNG
SEO的に評価下がるよってだけ >>316
それを世間一般ではやっちゃダメって言うやろ 実際にはSEOの評価は下がらんのやけどねｗ
何故かと言うと結局の所検索で重要視したいのは
HTMLの文法ではなくてコンテンツだから。
HTMLのタグの違いによるスコアの差が悪用されたから
タグによってのスコアの差はなくなってしまっている
今はコンテンツ（CSSなどを反映した実際に画面に表示される内容）で
判断されるようになってる。昔は不正なHTMLをどのように解釈されるかが
バラバラだったから、正しいHTMLを書くことが推奨されていたけど、
HTML5になってから不正なHTMLも同じように解釈するようになったので
ブラウザで表示されてるように解釈される
例えば隠し文字は評価対象から外れるとかね ブロックレベルってhtml5でもまだ言うの?
まあフローコンテンツとかより分かりやすい気もするんだけど div多用したら怒られたんだけど…
divっていっぱい使ったらあかんのか？ そりゃ必要ないときに使うのはだめだろうな
適切なタグを使っていれば、divは殆どいらない ネストしたレイアウトが必要だったり
アコーディオンやタブみたいに変化するようなのはdiv大量になるのは仕方ないんじゃない
逆にそういうのBEM記法使わずにコンテナでかこわなかったりすると
flex がとじてもどしたら block になったとかで変なバグ入りそう >>321
いくらでも使っていいぞ
なんなら二、三個くらいおまけしてやってもいい
余分なタグは使うなとかいう
カビの生えたストリクト原理主義者の言うことに耳を傾ける必要はねえ
マジで 現場に出なきゃわからないことが多いんだろうな
今はfloatは使わずにflexで、inlineは使わずにinline-blockが普通？ いまの現場ほぼdiv
かなりネストしてる
SEO関係ないけどどうなのよと思ってる >>319
キュレーションサイトの問題で
構造より無意味な文章1万文字のほうが評価が高いって結果でちゃったからなぁ
あれからグーグルがなんか対策したならしらんけど 何らかの要素を
display:none;
した後で、再び表示させたい場合、
display:unset;
display:initial;
どちらをセットしても同じような挙動になりますか？ >>313
実際には vm や % で指定されてないスタイルがまだあるんじゃないか
ブラウザの UA スタイルシートなど暗黙的に設定されているやつ >>333
同じ挙動になるとは限らないので、元の display 値を覚えておくか、専用の class でオンオフ切り替えるしかないな
hidden 属性を設定する方法もある（ hidden を消せば元に戻る） >>335
ありがとうございました。
大変参考になりました。
クラスでやります。 そのためのコンテナー
外側はとりあえず div にしといて display は none と block できりかえる
flex 使いたければ内側にかく
jquery の .show() hide() 使えばそれやってくれるから楽だよ >>337
いつの時代だよ？そうやって適当に教えるな 画面を小さくすると、背景画像の両端がトリミングされるコードが分からない。 >>337の何がおかしいのかよくうわからない
うちでもそうしてるからもっといい方法があったら教えてくれ 自分の会社でもブロック以外は裸でおかずにとりあえずとりあえず div か p でかこっとけっていわれてるわ
BEM記法ほど厳密じゃないが ■ このスレッドは過去ログ倉庫に格納されています
