HTML/CSS のどんな質問にも優しく答えるｽﾚ 48
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 47
https://mevius.5ch.net/test/read.cgi/hp/1617839294/
■関連スレ
Webサイト制作初心者用質問スレ part252
https://mevius.5ch.net/test/read.cgi/hp/1595561376/
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html >>99
たぶん、君は「カエル display flex」で検索すると幸せになると思う
やってみ、俺もそれで育った >>101
transform、transition、animationあたりも頼む さっきprogateのHTML/CSSコース終わらせてとりあえずホームページ作ってみてるんだけど、CSSで文字のサイズとか余白とかいじるのって感覚というか慣れしかない感じ？
プレビュー見ながらちまちまいじってみてるんだけどみんなこうやってるのかな デザインに従うんだから慣れも何もなくね
コーディングしながらデザインしようとしてるなら2年早い >>104
なるほど、簡単なHPだからなんとなく書きながら考えてたけど一旦別に見た目考えてから書くことにします。
感謝。 一般的な制作会社の制作フローは、
デザイナーがillustratorやphotoshopでデザインを画像で作成して
それをコーダーがhtml/css等でWEBし、
最後にバックエンドエンジニアなんかがサーバーサイドのプログラムやDB回りを連携させる感じ 自分Windowsで書いててChromeでプレビューしてるんですけど、
スマホとかMacとか、Safari、Edge、Firefoxだったらとかっていうのはレスポンシブ対応以上にコーディングでやることってない感じですか？ 古いandroidが一番厄介
それと画面が狭いスマホのopera
IEはもうやらね スマホは実機が手元にあるなら実際に開いて動作は見た方いいよ
ほとんど同じだけどAndoroidとiOSそれぞれ特有の挙動があったりするから
PCと同じ表示がされなくてたまに苦しめられる >>100
それで縦の中央揃えはできたけど
align-items:bottomとやっても下揃えはできませんでしたが
下揃えはどうやるんですか？ >>108
safariはだいぶやばいぞ
ベンダープレフィクスつけときゃいいだろとナメてるとハゲる >>112
フレックスアイテムの下揃えはalign-items: flex-end;
align-items - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/align-items デベロッパーツールのエミュレータとか便利だけど、あまり信用しちゃいけない
スマホはせめてsafariだけでも実機確認しとかないと危ない cssの質問があります。
同じセレクタが何度も出てくるのと、同じプロパティと値ならセレクタ何度も出ていいので
まとめてしまうのはどちらが良いのでしょうか？
エディタのリント？ってのだと、何度も同じセレクタが出てくるのが駄目そうです…
①
h2,
p {
color: red;
}
h2 {
...
}
p {
...
}
②
h2 {
color: red;
...
}
p {
color: red;
...
} 俺もそれがどっちが良いか、15年ぐらい悩んでるわ
どっちつかずな状態 プロパティをセレクタにかけるのではなく
セレクタにプロパティを記述していくのだから
プロパティが同じでもセレクタで分けるべき
ただ同じプロパティを流用したいというならユーティリティクラスを作ればいい シンプルなサイトならタグに直接プロパティ指定してしまう・・・ bootstrapは普通にタグに直接paddingとか文字サイズ指定しててイラっとする
なんで勝手に決めてんだよって いくつものセレクタに同じプロパティの値を設定するならカスタムプロパティを使うべきということになるのかな Scssとかjsでこそ出来た事が毎回遅れてcssだけでも出来るようになってるから
どうせ待ってりゃcssだけで出来るようになるっしょ？とか
画像の遅延ロードとかスマホ用画像のsrc記述とか5Gになれば全部無駄なゴミになるんだよなとか思うとなんもしたくない >>119
論点はそこじゃねーだろ
揚げ足取ること生きがいにしてんのか？ >>125
横だが
>>118が正解じゃん？
んで、その根底には>>119の考えがあるって事だろ >>116の例がセレクタでなく全部クラス名だった場合はどう考えるのが適切？ >>127
どっちでもOKだろ
実際は汎用をscssで作ってるのがほとんどだろうな。
結果として②が出力されてるみたいな感じで。
自分は効率的で①が好きだから①。 mixinにするなら1みたいなのもありだな
自分は構造や意味とソースが一致してないと気持ち悪いから極力ユーティリティclassは作らずmixinにする >>128-130
ありがとう
好みの部分もあるんだね 1つ聞きたいんですが、SCSSを導入する際メンテナンスが面倒なら嫌だなと思ってます
dart sassにサポートが切り替わった際にその前のruby－sassやnode-sassのコードをわざわざ書き換えないといけないんでしょうか？ それでもscssはやったほうがいいよ
環境変化めんどいことなってもいざとなったら出力されたソースを運用すればいい 初歩的すぎることかもしれないですけど失礼します
HTML LSではインライン要素の中にブロック要素入れても問題ないですよね？？？
あと、例えばaみたいな既定でdisplay: inlineの要素をdisplay: blockにするのも問題ないですよね 連投失礼
色を#F00みたいな感じに省略して書くのってまずかったりしますか？ display属性は何が何の中に入っててもいいよ
入れ子にできるかどうかはタグによって決まってる
無くなったのはHTML4までのタグごとのブロックレベルとかの分類 >>135
インライン要素の件はHTML5なら問題なし。
でも感覚として、divをemタグで囲うような事はやめて欲しいが
displayは問題なし >>139
感覚としてじゃなくてemにdivはふつうに違反だよ >>141
そうかすまない。
結局aタグだけがインライン要素の概念変わっただけで、
他は結局は言い方だけ変わって実はブロックレベル／インラインと同じ・・？ >>143
細かく見ていくとa以外にもネストできるようになったもの、できなくなったものがある
divとemがたまたまhtml4のそれと同じなだけで
ブロック要素とインライン要素という概念自体が消滅して
これにこれは入れられる、という関係性がそれぞれ独立して存在する感じ
チートシート貼っておく
https://yoshikawaweb.com/element/ flex-boxのチートシートはないのかと聞いておる そういやaとemってどっちが先とかあるん？
いつもaの中にemやspan入れちゃってるけど
外の方がいいの？ 息子はお父さんには成れるがお父さんは息子には戻れないんやで >>150
言っている意味がわからない
<a>あああ<span>いいい</span>ううう</a>
みたいな例なら全体がリンクならspanを先も何も無い
<a><span>あああいいいううう</span></a>
みたいに装飾目的で使っている場合は「装飾も含めてリンク対象か」を考えればいい
意味もなくemやspanを入れているならコーディング辞めたほうがいい リンクにした文字列を装飾するか→ <span><a>あああ</a></span>
装飾した文字列をリンクにするか→ <a><span>あああ</span></a>
みたいに、aとspanのどっちを入れ子にするのか？って話じゃないの？ 怪文書をエスパーするのもめんどくさいからaが親でいいよ imgやiframeなどsrcではない要素で
スマホではロードさせたくないdivなどがある場合、
どのような対応方法がありますか？(非WordPressで) PHPで出し分ける
PCのみjsでDOMを生成する >>159
ありがと
phpはライブラリだろうしjsはjsのソースに書かなきゃいけないし
めんどくさい方法しかないよね ライブラリが必要なほどではないが
スマートフォンかどうかの判定が単純にブレークポイントじゃない場合多少めんどくさい ん？phpならUA判定が最もラクそうだが
ブレークポイント判定もラクにできるん？ 会社のHPを任されているのですが、
わからないので質問してもよろしいでしょうか? このスレは質問していいですか？っていう質問までは受け付けていないので
どうぞご自由に質問なさってください 現在、orderを使用して簡易的にレスポンシブ対応したいのですが、orderをCSSに埋め込んでも動きませんでした。
現状のHP構成は<meta name="viewport" content="width=device-width, initial-scale=1.0">をhead内に書き込んであり、
CSSは親が.containerであり、その中に子要素・孫要素・ひ孫要素?があります
<table id="container" cellspacing="0" cellpadding="0" border="0">
<div class="a">
<div class="b">
のような感じです。CSS本体としては
#container {
background: none repeat scroll 0 0 #FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
text-align: left;
width: 890px;
display: flex;}
~~~省略~~~
@media (max-width: 600px) {
.centerbox{
order: 1; }
~~~~~中略~~~~~
}
のように配置場所を変更することでスマホで閲覧しやすくする予定でした。ですが、上記のようにしても動かなかったので確認したところ
.list {
display: block;
line-height: 130%;
padding: 0;}
.sidemain1 li {
color: #0E577E;
display: block;
padding: 2px 0 2px 10px;}
と複数の display: block;となっている場所を発見しました。この場合、子要素上で｢display: block;｣となっているので、orderで配置が変更できないのでしょうか?
また、この場合の解決策として｢@media ｣内に該当箇所の display: block;をnoneやflexに変更することで配置を変更できるのでしょうか?よろしくお願いします。 スマンがPC表示で何がどう配置されているかスマホでどう配置したいのかが全く分からん・・・ tableの直接の子にdivは置けないのでhtml構造を見直しましょう 168です。
説明不足で申し訳ない
説明出来なかったのでパワポでイメージ図を作成しました。
1枚目から2枚目のように変更したいのですが、
Tableタグだとできないのでしょうか?
お願いします。
https://imgur.com/uIz4UjG
https://imgur.com/EeldZlS >>170,173
教えていただき、ありがとうございます。
ただ、こちらの環境ではショップサーブのサイトを使用しており
現在のまま変更することは無理そう・・・ということが返信から分かりました。
(ショップサーブ側でレスポンシブ対応サイトに変更すれば行ける気がしますがCSSがよくわからないため)
ちなみにお聞きしたいのですが、
<div class="a">
<table id="container">
<tr>
<td>
<div class="A1">
</div>
</td>
</tr>
<tr>
<td>
<div class="B1">
</div>
</td>
</tr>
</table>
</div>
の場合だと、orderによる配置変更は可能でしょうか? それでひと纏まりになってるからtableの中身は無理じゃね
クラスaのdivと他の纏まりが横並びになっているのを縦にするのはflexでできるけど
orderってのはflexとかgridでの並び順を変えるプロパティだよ みんなよくこの説明でわかるな
エスパー能力高すぎだろ >>174
flexでorder使って入れ替え可能なのは子要素までで、孫要素にorder設定しても入れ替え不可
>>174のtableの場合、tableにdisplay: flex;なら、孫のtdの中のdivにorder設定しても入れ替えられないけど
子のtrにorder設定で入れ替え可能
>>172の画像の内容だと、入れ替え可能かどうかはtableの構造次第 trやtdをdisplay:contentsとかにしてもorderというかflex-item伝播しないかね なんかよくわからない現象で困ってます
<style>
body{margin:0px;}
#test1,#test2{width:90%;height:300px;background:#00ffff;}
</style>
<br>
<div id="test1">aaa</div>
<br>
<div id="test2">bbb</div>
これでどっちのdivも幅が1214ピクセルだったけど
１個目の<br>または２個目の<br>を削除するとどっちのdivの幅も1229ピクセルになってしまいます
この増えた15ピクセル分はどこから来たのでしょうか？
ブラウザはchrome最新版です よく読んでないけどfont-sizeとline-heightを0にしたら >>181
変わらないけど？
もしかして高さ変わってスクロールバーの有無？ >>180
横だが display: contents; いいね
自分も知らなかったのでありがたい 179だけど
コード的に親タグが必須なもの（ul, dl, fieldset, それこそtableなど）を
どうにかレスポンシブに組み替えなければいけないけど
元のソースは編集してはいけないみたいな限定的な状況で悪戦苦闘した時に見つけたんやったわ
便利だけどどうしても使わないと無理な場面は滅多にない display: contents;自分も知らなかった・
css2の頃は知らないほぼなかったのに
最近はそんなのいつできたん？みたいのが次から次と出てくるんだが スマホ対応でgridなんかをいちいち書き換えず横着できそう HTML上は構造化しておいて、動作上はdisplay: contents;で構造化を解除？して
入れ子になってた要素を、gridアイテムとかにして並べ替えたりできるってことか ttps://www.aicrowd.com/challenges/flatland
1. ↑のページをパソコン（高解像度）で見ると、上のタイトルが左端にめり込んで表示されますが自分だけでしょうか？
2. その場合、CSSのマージンの設定かあたりが影響してるんでしょうか？ 高解像度ではなく低解像度ででは
高解像度モニターではウィンドウの最大化を解除して幅を小さくしていくとそのうちめり込んでいく
ページ側で横幅が強制的に何百ピクセルかは確保されるようにしてるせいで入り切らないのであろう すげー強気な姿勢が羨ましいな
IEや旧Androidブラウザのサポートを断るのでも苦労したよ
主に社内の上長に対して サイトへのアクセスが7割以上がスマホで、iOSシェアが高いこの時代に
なかなか無謀ですな 次はGoogleChromeもサポート外にする予定 ６割を占めるメインボリュームをサポート外にするかっ ■ このスレッドは過去ログ倉庫に格納されています
