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 969 名前：Name_Not_Found[sage] 投稿日：2018/10/07(日) 22:23:52.27 ID:???
どうやるの？
flexって好きな位置でのwrapと
複数行にわたる縦幅の一致ができないよね
それさえできれば万能なのに
973 名前：Name_Not_Found[sage] 投稿日：2018/10/07(日) 22:57:41.72 ID:???
>>971
更新してなかった
具体的にどうするんです？
＜div class="container" style="width:1000px"＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x200.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜div＞＜img src="http://placehold.jp/200x100.png";＞＜/div＞
＜/div＞
これを (width height 指定一切なしで) flex 関連のスタイルだけで
3 x 3 の等サイズの四角形に配置できます？ ほれ
flexで合わせてやったぞ
前スレでアスペとか言ってたヴァカは脳みそ足りねえからてめえはスルー
https://i.imgur.com/NvwzobL.jpg ぐーぐるこわい
あいつらその気になればせかいほろぼせる 画像だけで証拠になってると本気で思ってるならアスペすぎだろ 確かに行にまたがって高さ合わせたい場合あるよなー
リンクボタンで１つだけ長い文章で２行になったりするとみっともない
<style>
a {
display: block;
width: 50%;
border: solid 1px #000;
margin: 1em auto;
padding: 1em;
border-radius: 0.5em;
color: #000;
text-decoration: none;
text-align: center;
}
a:hover{
background-color: #eee;
}
</style>
<a href="#">長ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい文章</a>
<a href="#">短い文章</a> めんどくせーからできるかだけでいいって前スレで言われてるからソースは不要ってことだろうな flexboxで割付した際に余白のpx知りたいんだけど
デベロッパーツールで確認って出来るん？ let max_width = 0, max_height = 0;
$('.container > div').each((_, e) => {
if($(e).width() > max_width ) max_width = $(e).width();
if($(e).height() > max_height) max_height = $(e).height();
});
$('.container > div').width(max_width).height(max_height); 高さ合わせるのは無理でも折返しぐらいはできないの？
折り返しできないなら flex って inline-block 以下じゃん 残りスペースに関係なくすきなところで折り返すって意味だと思うよ
早い話 <br> をやりたいってことかと 最初からってどいういうこと？
最初からそう作るにはどうするかって話なのに
flexで何でもできるとか言い出したのお前じゃん ちょいちょい俺の荒らしレス入れてるから話がごっちゃになっとるねぇ〜 HTMLの初歩を学んでいるんですが、img要素ってわざわざp要素で囲まなきゃいけないんですか？
囲まなかったらどうなるんですか？ >>23
そうなんですか？
だったら自分が今学習しているサイトはちょっと信頼できないかもしれないですね
画像をパラグラフ要素で囲むって意味分からないですもんね BEM記法とかそこまで厳密じゃなくても
基本的にインライン要素はブロックで囲むってのは推奨されてるね
flexがでてからは１つ外側に指定したいからスタイル当てるのがやりやすい divでもいいけど p で囲むのはデフォルトで p のほうが下側にマージンが付いてるから
がぞうが連続した場合でもレイアウトがみやすいってことかと
意味論を重視するなら コンテナー div であるべきだけど
p のほうが何もかかずに見栄えよくなるから好みかな
困ったら p つかっとけってコーディングスタイルはウェブコーダーでも普通にいる >>25>>26
ありがとうございます
まだまだ勉強が足りないですね >>22
俺の中でだが
インライン要素は生もの食品のイメージで裸で置いてはいけない。
魚、肉とかが何も包装されてない状態を連想するようにしてる もし<p>を書かずに<span>を書きたくなったらこうすればいい
<body>
<div class="main">
自由に配置できる
</div>
<body>
全てがdivブロックの中にあるので、>>28のルールを破ることなく
インライン要素を自由に配置できる >>29
お前みたいなのがいるからな…divなくなって欲しいわ無能 >>29を見て思ったのだけど、
なんとなくbodyにCSSをあまりくっつけたくないから、
ページ全体をdivで囲って、そこにページの基本となるCSS
（background-imageとかfont-familyとか）
をくっつけてるんだけど、
これってマズイんだろうか bodyの末尾になんか追加するjqueryプラグインとかあるからなあ
<div>いれとくのはちょっと気持ち悪いけど仕方ないかなって思ってる >>32
文法以外の所で、divを入れる必要性があるのか
そういう可能性は頭になかった
ありがとう >>29
俺の中でだが
1枚の袋に魚、肉とかまとめてブっ込んで
カオスに入り乱れてるイメージ
中のインライン要素をまとめて1つの段落やアウトラインとして認識されていいならいいのかも >>30
無能はお前。インライン要素はブロックに入れずに置いていい。
それだけの話なのに、ブロックに入れないとダメとかいうから
お前の話は矛盾してるって突っついてやったんだよ htmlタグは気にせずにCSSのdisplayを駆使しまくれということでええのかな めんどくさ
そんなことしなくてもサイトに表示されればいいんだよ
細けえよ ul,olを入れ子状に何度も繰り返して配置する時、最大いくつまで入れ子に出来ますか？ >>38
HTMLのルールと
スタイルとはまた別問題
良し悪しは別として >>41
規定として入れ子レベルに制限はないけど、5000階層とかなったらブラウザの処理が重くなるかもしれない。勿論ul,ol直下にli以外は置いてはいけない。 >>37
何の話だよw
単純にdivのブロック要素で生置きspanが回避できる！っていってることがおかしいって話だよ
てかこの話何回目だろうぇ
多分divがある限り永遠と繰り返されるんだろうな MathJaxを使っています
$\begin{array}{cc}
a & b \\
c & d
\end{array}$
はちゃんと機能していますが、
$\begin{array}{cc}
a & b \\
\multicolumn{2}{c}{d}
\end{array}$
が機能しません。
なぜですか？
MathJaxでは\multicolumnは実装されていないんですか？
使っているMathJaxは
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML";>
</script>
です。 レシポンジブで、フォントの大きさ指定する単位は何でしてる？
rem？vw？それともpx…
なんか色々読んだけど。pxでいいような気がしてきた… >>49
pxだとデバイス毎に全〜〜部指定しなおさなきゃいけないから面倒じゃない？
remならrootのpxだけ定義すればいいから楽だぞ でも大手見るとpxでやってるとこはまだ多くある
デザインカンプに超忠実にやらなければならない場合
pxの方がいちいち計算不要だから作るのは早い
illustratorやphotoshopのカンプがpxで指定さいれてるわけだから
それをremに計算するといちいち面倒になる。
vwなんてウインドウサイズで文字以外の要素とのバランス崩れるから大変
全部の要素を完全リキッドに対応させる必要がでてきちゃう
海外サイトみたいに文字中心のざっくりデザインのサイトなら余裕だけど >>49
もはやvwしか使いたくない
viewportを画面の大きさに合わせる仕組みがあるのならpxでも構わないと思う
何れにせよリキッドじゃなければそれほど面倒はないはず フォームのパーツでプルダウンの中身まで作ってあるデザインをもらって、selectタグで再現できないからulとJSのクリックイベントを使って実装したのですが、タブキーで操作できるようにしてくれないかと言われてしまいました。
たしかにselectタグを使えばタブで選択して項目を選ぶことができたのですが、HTMLでselectやinput「っぽい」パーツを作って、タブで操作できるようにすることは可能なのでしょうか？ プルダウン自体はCSSだけで可能だよ
ただ前スレでもでてたけど select というか option にデザインあてるのが結構制約あるから
デザイン指定されてるなら厳しいかもね
すでにJSで実装してるなら accesskey=key とかつけるだけでいいんじゃないの >>55
まさにoptionの方のカスタマイズが必要だったのでselectを使いませんでした。
accesskeyは調べてみましたが、あくまでほかのフォームパーツと同じようにタブ操作できるようにするのが目的なのでちょっと違うかなと思いました。 タブキーで操作ってのをぐらいかしてくれないとよくわからないけど
jQueryUIのselectableとかなら数行かくだけでわりと高機能なことができた気がする >>49-52
漏れは、画像の高さに、vh を使えば「ctrl +-」で拡大縮小ができなかったから、
最初にJavaScript で、window.screen.availHeight で、
タスクバーのような、固定部分を引いた画面の高さ (ピクセル単位) を取得して、
728 px など、その値を元に、画像の高さを、px で設定した
vh, vw は便利だけど、拡大縮小ができないだろ？ semanticをhtmlに、presentationをcssにとキレイに切り分けるためにはcss側で要素を追加する機能がまだ貧弱だと思うんだよね
::beforeと::afterの2人しか作れない…
ネストして::before::beforeと孫を追加したり、::before(2)で2人目のbeforeを作ったりしたいにょ :nth-child(3):hover:beforeとか疑似要素疑似クラスできるのには驚いた >>58
正確にできそうだけどサイトのフォントサイズ定義の場合
js使用前提だとなんとなく嫌だな
いやなんとなくなんだが HTML5のフォームバリデーションを本番で使った人いる？
まだまだ、本番では使えないような気がするんだが… >>52
vwって最大最小決めれないからどこまでもでかくなり、どこまでも小さくなるよな
media queryで変更できるけど、どんなふうに使ってるんだ？ >>63
その通りメディアクエリで区切ってる範囲内だけど
別にいいじゃん小さくなっても >>64
読みやすさは必ずしも横幅と一致しないんだが
まあ人それぞれだからどうでもいいんだけど ライブドアブログですが
画像に枠を入れようと思い
img {
padding: 5px;
border: 1px solid #808080;
をCSSに入れたいのですが、どこに入れても
サイドバーが表示されなくなったりします。
どこに入れたらいいでしょうか？ >>65
ほんそれ。
文字は文字であってオブジェクトじゃないのにな。
一行の長さだって段組の常識があるのに・・・ >>66
ここでライブドアのブログなんて使ってる人なんてほとんどいないと思うから
ブログ系のスレとかアフィリエイトのスレの方が回答もらえそう >>66
セレクタがざっくりしすぎ
imgって書いたらドキュメント内のすべてのimg要素が対象になっちまう
だからサイドバーとかにも影響が出る
親要素で限定するとよかろう
あとimg要素やフォームの部品のような
何かに置き換わる奴を置換インライン要素なんて呼んだりするんだけど
大雑把にいうとpaddingは使わんほうがいい
少なくともCSSを理解できるようになるまでは >>68
>>70
ありがとうございます
暇つぶしニュースにある画像みたいに
画像に小さく枠がほしいんですけど
リンクが貼れなくて申し訳ありませんが >>71
ブラウザはChromeかFirefoxかSafariを使おう
んで、真似したいものがあったら
例えばChromeだったら、それを右クリして一番下の「検証」を選ぶんだ
そうすっと、開発ツールってのが開いて
そこのHTMLとCSSがどうなってんのかわかるから、真似すればいい
んでそのニュースは見てないけど
十中八九、img要素の外に小さい枠のためのボックスが別にあると予想 >>72 ありがとうございます
https://imgur.com/a/PlKfeRd
この画像の1.2.3当たりがCSSだと思うのですが
コピー参考にするヒントをいただけませんでしょうか？ >>73
２
.article-body img { hoge: fuga; }
ってのは「article-bodyというclassを持つ要素の子孫のimg要素」って意味だよ
意地悪で言うわけじゃないんだけど
このくらいのことは聞く前にまず試してみたほうが、早いし理解も深いと思うよ ２の.article-body-more img {}
の{}の中にカーソル合わせると左にチェックボックス出てくるから
オン・オフすると即時連動した変化が確認できるので
imgの枠線に重要な部分もすぐわかると思う >>73
（もちろん自分のサイトを作る時の確認にも活躍する） >>76 ありがとうございます。
ならない、、、のは
.article-body-more img {
margin: 5px 0;
max-width: 695px;
padding: 3px;
border: 1px solid #CFC7AF;
}
とCSSに入れればいい。という単純なことではないんですね、、 >>77
>>66のコードから察するに
もしも、CSSの基本中の基本で躓いてる？なら
問題点はまず、
img {
の部分で括弧が開きっぱなしな点
img {}
という風に括弧を閉じないといけない
あとは、セレクタ（どの要素を選択するかの文字列）の意味と用法はググってもらうとして
CSSの基本は、
セレクタ { スタイル }
という形式になる、ということ。
＞とCSSに入れればいい。という単純なことではないんですね、、
>>77の例で言うと、セレクタは
.article-body-more img
の部分で、意味はざっくり言うと
「クラス名がarticle-body-more要素の、子要素のimg要素全部を選択する」
なので自分のサイトのHTMLに、そもそも「クラス名がarticle-body-moreの要素」が存在しなければ
何も起こらない
ライブドアブログを使っているということなのでおそらく
テンプレの長文コードに滅入っていると推察。
さらに、HTMLもCSSの基本（中の基本）もわからないとなれば
おそらく、「要素にarticle-body-moreというクラス名を付加する」
というのを理解できているかどうか、そこから始めないといけない段階 質問です。
特定のサイトを閲覧する際にユーザーCSSを適用し（ChromeのStylusを使っています）、
tableをflexなりgridなりで並べ替えたいのですがどうすればよいでしょうか？
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
…
…
</table>
と縦にひたすら並んでいるのを強制的に
┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐
│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
と横並び、かつ10個並ぶごとに自動で折り返してくれるようにしたいのです。
displayの値をtableやtable-cellから変えればよいのでしょうけれど、
flexやgridといった新しい要素は何度いじってもまだなかなか慣れなくて……。 tr に display:block; float:left つけて
tr: nth-child(10n):after に clearfix でもつければいいんじゃない >>79
ありがとうございます
セレクタ（どの要素を選択するかの文字列）の意味と用法
勉強してみます。 >>81
あ、新しいやり方をしないといけないと思い込んでいましたが
ずっと昔ながらのやり方でできましたね。ありがとうございます
どうもclearfixが効かないので、もう少し色々試してみます
（一応widthを調整するだけで無理やり10個ずつにはできましたが） div > section とあって
h1に画像をバックグラウンドを指定して
その下に
div > p class="utaimonku"に画像の謳い文句を書いていたのですが、
この謳い文句が文字だけなのも寂しいので画像にしつつ、文字としてもhtml上で記述するということはできますか？ 寒くなってきたので、そろそろ扇風機をしまい
電気ストーブを出そうと思います。
でもその前に秋物の洋服を着るとそこそこ暖かくなるのですが
電気ストーブをつけつつ扇風機はしまわずおいておき
服だけはまだ夏物にしてもいいですか？ キーボードの設定が全角かなと半角英数を間違った状態で
打ち始めている事って頻発しない？
これなんとかならんかなあ >>86
電気ストーブなら扇風機も回した方がいい
暖められた空気は上に行くので扇風機を上に向けて空気を回す
その方が暖まる
というか秋物着て暖かいんならそれでストーブつけなければ電気代うくんじゃないか？
というかこれってスレチじゃないか？ アメブロですが
2chまとめくすで まとめサイト作ってみたのですが
<em style=color: %color%; background-color: %bgcolor%;
font-weight: bold;" class="specified">ID:%id%</em>
この文章に
<em style=size="1"color: %color%; background-color: %bgcolor%;
font-weight: bold;" class="specified">ID:%id%</em>
と変更しても駄目でした。アドバイスお願いします 普通のブラウザならば、
<details>
<summary>あ
<div>い</div>
う</summary>
<p>えお</p>
</details>
と書いた時、要約部分には｢あいう｣が表示されるはずですが、
現在の私の環境では｢あ｣しか表示されません(▲をクリックしたら展開されたところに｢いう｣が見えます)
何が原因だと考えられそうですか？ >>95
style=size="1"color: の部分が特におかしい。
正しくはこう
<em style="size: 1; color: %color%; background-color: %bgcolor%; font-weight: bold;" class="specified">ID:%id%</em> >>97
そんなタグが新たに追加されていた事すら知らなかったｗ
しれっと増えてるのなんとかなんないのかよ
こういうのって追加された時、どこで情報得てるの？ ■ このスレッドは過去ログ倉庫に格納されています
