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 おま環持ち出したら何でも重くなるし軽くもなるだろｗ
低スペックPCでも、ある程度軽快に動作するってのは大事だと思うが
ところでDWって糞コード吐かなくなったん？ コーディングの補完とファイル管理として使うならアリだけど
それ以外は使い物にならんだろ面倒すぎるわ
普通にコード書いた方が早い このスレにDW慣れしてる化石みたいな奴がいるけどこいつはVScodeが桁違いに使いやすいのを知らないらしい
ポケベルとスマホぐらいの差がある vscodeはなんやかんや便利
だが、dwに突っ込んだスニペットから離れられなくて
自宅コーディングはdwから離れられない(´･ω･`)
出向先に無ければ無いで諦めつくけど > だが、dwに突っ込んだスニペットから離れられなくて
> 自宅コーディングはdwから離れられない(´･ω･`)
VS CodeがDWくらい使いやすいスニペットが実装されてればいいのにな あと、もしかしたらvscodeにも適切なプラグインがあるかもだけど
dwは適当なところでコード画面を折り畳めるのが良い
vscodeで折り畳めるプラグイン試したけど、何かしらの始まりから終わりまでを畳むので
ヘッダ内のcssの下からbody内の特定箇所までをガッツリ畳みたい時とか
泣きたくなる
似たような理由で適当なとこを畳みたい時も。 >>585
DWの仕様も時代とともにアプデされてるのを知らずに
昔のままだと思い込んでるお前さんみたいなのもなｗ >>581
オンボロPCでもサクサク動く有能VSコードと違ってスペックを選ぶクソDWって認めてるレスだな >>592
仕様が変わったつったって天下のVSコードと比べると微々たるもん
鈍足成長を続けてきたクソDWを過大評価してるお前のオツムは相当やばい DWで制作中のサイトにSNSリンク貼ったんだけど
リアルタイムプレビューで試しても
「◯◯◯◯◯（SNSサイト）で接続が拒否されました」
て弾かれるんだけど
普通に<a href="（SNSサイトアドレス）">ではだめなん？ 流し読みしてていつからDWスレになったんだよVScodeスレだろと思ったらどっちでもなかった >>593
オンボロPCでもサクサクとかまずそういう貧相な環境で仕事してますというの突っ込まないとなｗ >>594
天下のとか言うが頻繁にアプデしないといきなりCPU使用率100パーとかザラだし
アドオン側もアプデや～めたの放置で責任を負わないのもフリーゆえよな >>598
もうお前限界越えて何言ってるのかわかんねえよ vscodeのアプデなんてデフォで自動更新ONじゃなかったか？
CPU使用率100%なんてなったこと無いわ
このスレに来る初心者なんかが必要そうな、利用者の多い有名な機能拡張なら
大して重くもならない
機能拡張云々はブラウザでも一緒だろ
利用者が多ければ代替や後継が開発され易い利点もあるんだし
変に偏った擁護なんてせずに、それぞれメリット・デメリットで語ればいいのに >>597
ビルダーの話題が出ないだけマシだろｗ
>>601
vscode関連のCPU使用率に関しては検索すれば事例は出てくるからそちらを参照
5ちゃんという場はとかく敵を設定して一方を罵ることで話が進むゲハ傾向だしな
あとAdobeのサブスクをアドビ税と罵るようにシェアが大きいとこを叩く 大事なのは成果物の方だから
自分が使いやすいもの使えばいいだけですしー
ツールの信者になるのが一番あほらしす >>602
Adobeが悪いなんて一言も誰も書いてない
Vscodeと比べてDWがクソと言うことを頑なに認めないお前が1番アホ >>604
昨今はこういう風にクソか神か両極端な発想しかできないバカも増えたｗ >>603
まったくその通り
方程式よりも答えが合ってるかどうかが重要なのだ >>605
お前の悪いところはクソのDWを事もあろうにVscode様より上だと思い込んで、なおかつ嘘情報を発信しているところ
ゴミがゴミをゴミじゃないと言えば害悪だろ 使えるツールは多い方が良いかもしれない
サクラエディタで書けないやつはバカ
てことでよくね？ Bracketsは結構好きだったなぁ
DWにも組み込まれたりしたのに、さっさとサポート終了しちゃって
その際にVSCodeに移行しろってadobeが呼びかけてたのは笑ったな
ユーザー層が違うってのはあるにしても、DWの方じゃないんかい！っていうね VSCodeはDwより簡単にローカルサーバー立てられるのが強いわ htmlやJSよりもCSSの方が大変そうだな、CSSってちゃんと知識ないとちゃんと装飾できなそうだし > CSSってちゃんと知識ないとちゃんと装飾できなそうだし
そんなレベルからの話？ｗ 質問です！
https://coco-factory.jp/ugokuweb/move01/5-1-15/
レスポンシブでこのハンバーガーボタンを導入したんですけど画面幅に若干収まらず画面が
ガタガタしてしまいます。原因教えてくださいよろしくお願いします。
このようなケースになったのは今回が初めてです。。 #g-navって要素が画面をはみ出しちゃってるみたいなんですけど、、 それだけじゃ分からんですよ？
コード書いたjsfiddle張ってください jsfiddleの貼り方わからないので調べます！
ちなみにですがスライドショーのｊｓのプラグイン導入するとなります！！ >>618
右上にsaveクリックするとURL変わるからそのURLをここに張ってください 質問です。
<hr>をインラインにしてテキストの余白を埋めたいのですが、簡単なよい方法がありますか？
<table style="text-align:center"><tbody>
<tr><th>colA</th><th>colB</th><th>colC</th><th>colD</th><th>colE</th><th>colF</th></tr>
<tr><td><hr></td><td colspan="4">説明</td><td><hr></td></tr>
<tr><td><hr></td><td colspan="4"><hr style="display:inline-block">説明<hr style="display:inline-block"></td><td><hr></td></tr>
</tbody></table>
と説明の両端に<hr>を配置し、 (上記2行目)
--------説明--------
のような見た目にしたいのですが、実際は説明が4カラム幅に足りない部分は空白になり、
------ 説明 ------
となってしまうのがカッコ悪いので何とかしようとしています。
ここで<td>内にinline-blockで<hr>を突っ込み、上記3行目のようにすると、
インラインにはなりますが、<hr>の幅が広がらない為、表示されません。(幅0pxになる)
(width:30%とか明示的に指定すれば当然表示されますが、文字の余白を自動的に埋めて欲しいのです) これについて、<hr>を適切に自動的に広げる方法はありますか？
広げるにはflex-box使わないと駄目ですか？(使っても今回は駄目そうですが)
なお下記URL等で為されている、文字を<hr>の上にrelative等で重ねる手法は、
文字の背景を固定的に塗りつぶしているのが駄目です。
親の背景色が変わることがあるため、文字の背景色は親と同じでなければなりません。
これについてはテキストを<span style="background-color:inherit">内に入れても効きませんでした。
(多分直の親はtransparentだから。CSSで具体的な色を持った親と同じ背景色をクラスで当てて対処すべき案件？)
https://codepen.io/scottzirkel/pen/yNxNME
https://switch-box.net/css-hr-decorations.html の11
やろうとしてる事自体は普通に需要があると思うので、簡単に出来ないのはちょっと疑問なので質問です。
こちらはWeb系ではないのでこの辺の塩梅がよく分かっておりません。
ただ、インライン要素（幅は最小）に対して幅を適切に広げるのはそもそも無理筋なのかとも思ったり。 display:flexとflex-growで設定できるけど
hrタグを装飾として使うのは推奨された使い方じゃないよ >>623
ちなみに予想に反してflex-boxであっさり出来ました。
flex-baseの初期値がautoなので無限に伸びるんですね。
(ここは固定長だと思っていたので、無限に伸びるのは予想外だった)
> hrタグを装飾として使うのは推奨された使い方じゃないよ
実は調べてるうちにそれっぽい事は書いてあったのですが、
では本来はこれはどうすべきですか？
<td>の全幅を埋めてくれる水平線が欲しいのですが、
<td><div style="border: solid gray 1px"></div></td>
でも見た目はほぼ同じですが、これの方が<hr>よりは適切ですか？ >>623
お早い回答ありがとう御座いました。
互換性にも問題がないようなので、多分これで行きます。
ちなみに本件、<hr>説明</hr>で出来る仕様であるべきだと思うんですけどね。
普通に使う機能だと思うので、一々flex-boxの小細工が必要な意味が分かりません。
なお<hr>については意味論で使えとの事なので、多分<div>にします。
これも、
> 以前はこれは水平の区切り線として定義されていました。現在でもブラウザーでは水平線として表示されますが、
> この要素は表示論的な用語ではなく意味論的な用語で定義されましたので、
> 水平線を引きたいのであれば、適切な CSS を使用して行うようにしてください。
> https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr
と書くのなら、駄目な使い方と正しい使い方のサンプルへのリンクを貼ってくれ、と思うところです。
いずれにしても、こんなに早く回答来るとは思ってなかったので、助かりました。
とりあえず後1週間位はここを見てますので、何かあればよろしくお願いします。 読み上げるべきかそうでないかで見解分かれそうな気もする 意味があるかはさておき、無コストで可能なら対応してる方がマシかと。
あと、変に嵌りたくなければ想定通りの使い方に徹した方が無難ですし。
ただHTML5で装飾系排除の動きがあったのは初めて知りました。
元々<strong>や<i>や<s>とかデタラメすぎたので、順当だとは思いますが。
ただこれだとMDNのhrのページにある例、<p>間に<hr>を挿入するのも間違いで、
正しくは<p>のlast-child以外にborder-bottom, margin-bottom. padding-bottomで罫線にすべきだと思いますが。 ページ全文読み直そうか
一番上の例で水平線を書きたい場合は「適切なCSS」を使えとも書かれてる
水平線なんて設定したデザインによって多種多様に回答はあるからCSS指定する必要はないと思う
一番最後の例文は雑だけど意味がある区切りにしてるように見えるよ <p></p><p></p>で既に別段落である事を明示的に記述済みなのだから、
そこにわざわざ<hr>を入れるのは装飾の意味でしかないんですよ。これは両方の例でです。
ただ見落としてましたが、上の例では私がやりたい====$====をモロにやってて、しかも622と同じ手法ですね。
わざわざ探した私もマヌケでしたが、やはりこの形式(水平線の上に文字を書く）のは基本だって事ですよ。
折り紙文化のない欧米デハー、
----キリトリセン----や----山折り----、----谷折り----が無いので仕方ないのか？と思ってましたが、
やっぱこれは仕様から抜けてるだけですね。（仕様を考えた奴が馬鹿）
折角エディタが付いているのだから p:after で同じ事が出来るかと試してみましたが、
こちらの環境では2度目の変更以降はまともに動作しないので諦めました。
ただ、同じ事は出来るはずで、</p><hr><p>での<hr>の存在意義は無いはずです。
（意味論的にも、表示論的にも） pタグ内にhrタグはNGだし、hrタグってもう使わないほうがいいのかなー 装飾としてよくあるデザインではあるけど、HTMLの起源が論文の記述用と考えるとそういう装飾はいらんかったのかもしれんな
まあこんなんでいいんじゃね？
https://design-levelup.com/webdesign/html_css_making_2/amp/ >>630
意味論で<p>区切り限定で使えという現行の規定を遵守するなら、
もう既に使いどころがないですし、廃止の方向かと。
>>632
同じ事を私は<div>でやってるのですが、::beforeと::afterの方がいいんですかね？
意味論的には疑似要素の方が妥当な気がしますが、(感覚的に)重くなりそうなので嫌ってきてます。
あと、JSを書く側からすると、JSで触れないのが気持ち悪いというのもあります。
ちなみにMDNのhrの記述は極めて充当ですね。私の疑問、
・私が知らないだけで、実は簡単に書けるのか
・仕様がゴミで、頻出ケースでも技巧を凝らす必要があるのか
について、第一の例で挙げる ----$---- で後者である事を明確に示しているので、
私が見落とさなければここで皆様を煩わせる必要もありませんでした。すいません。
正しい使い方の例が書けないのも、そもそも存在しないからですね。 ちなみに::afterにしてみたのですが、内容の有無によって表示高さが1pxずれるのはどういう理屈ですかね？
具体的には、
<tr>
<th><div class="hr_text"></div></th>
<th><div class="hr_text">AAA</div></th>
</tr>
..hr_text {display:flex; align-items:center}
..hr_text::after {content:""; border-top:solid gray 1px; flex-grow:1}
で第1カラム(内容無し）の方が第2カラム(内容AAA)よりも1px上に線が引かれます。
何か設定不足有りますかね？
第1カラムのheightを16px以上にすると同じ高さに引かれるので、align-itemsの際の四捨五入とかですかね？
ちなみにこれは空<div>でやってたときは問題なしでした。 636訂正。
空<div>でやっても私の環境だとズレます。どうやら単に私が気づかなかっただけっぽいです。
どのみちブラウザの問題なので放置で構いません。 下の様に年号を含めた日付をコーディングするならどんあ方法がスマートですか？
2022年1月1日（水）
2月3日（金）
5月3日（金）
↑「2022年」の幅で月日の部分の左側にスペースを空けたい >>640
遅くなりましたがありがとうございます。 どうかんがえてもXDの邪魔だものな
DWやFWと同じ運命 サムネに合った幅のキャプションを付けたいのだが、display:table以外の直接的な方法はないかな？
<div class="container">
<div class="caption">横に長いキャプション</div>
<a>サムネ</a>
</div>
で、ググれば
.container{display:table}
.caption{display:table-caption}
が出てきて確かに動作するのだが、
tableを作る気がない場所でこれはちとトリッキーなので可能であれば避けたい。
「キャプションの横幅はサムネに合わせろ」と、直接的に指示出来るCSSはないかな？
ちなみに既存他サイトはコンテナにwidthを逐一指定しているのも気になってる。
このtable指定でレンダリングが酷く遅くなる事は無いはずだが、width指定よりは遅いのも確実なので、それかね？ >>644
.contanerにwidth: min-content; >>645
ありがとう。動作しました。
MDNをググってその項目があるのは分かってたのですが、違う意味だと勝手に決めつけてました。
とりあえず一通り全部試すべきでした。お手数をお掛けいたしました。 >>646
ちゅーても、この場合「兄弟要素の幅に合わせる」って意味の使い方じゃないから注意な >>647
しかし意味は合ってると思うんだけども。少なくともtableよりは断然いい。
意味は「中身の最小幅」で、出来る限り縦に細長くなる。
英文テキストはスペースで折り返すから結果的に最長単語、
日本語は任意の所で折り返されるので問題なし、
サムネは折り返されない、
よって結果的にサムネ幅になる。
多分この使い方を想定している気がするが。
(サムネが小さすぎる時にテキスト幅になるのはそれでいいし、それの方がいい)
なお他サイトでwidth逐一指定なのは多分ブラウザ対応だ。
chromeならmin-contentは46以降なので、おおよそ2016頃以前は使えなかった。
この辺も気にするならtableの方がいいのかもしれないが、
今回に関しては対応してないと多少見栄えが悪くなる(スカスカになる)だけなので、今のところmin-contentで行く予定。
そもそも「次要素の幅に合わせろ」って指定って出来るんだっけ？
出来るのなら勿論ビンゴだが、
元々それを探してinheritだ100%だ色々こねくり回して駄目だったんだけども。
ちなブラウザ対応はchrome49以降(≒WindowsXP以降)、IEは不要。 >>648
> そもそも「次要素の幅に合わせろ」って指定って出来るんだっけ？
いや、元々のオーダーがそうだったからｗ
→ > 「キャプションの横幅はサムネに合わせろ」と、直接的に指示出来るCSSはないかな？
でも今回のはどちらかというと「コンテナの横幅をサムネ合わせる」という代替案だから
それを考慮しないで変にいじるとレイアウトが崩れる場合があるから注意してねって話>>647 >>649
了解だ。
当初の要求と適切な実装が異なるのは、CSS流の思考がまだ出来てない俺の問題だ。
初心者が間違った実装を目指して空回りするのと同じ。 質問させてください
<！-- saver from url=(0039)https://abehiroshi.la.coocan.jp/menu.htm -->
例として阿部寛さんのページをださせていただきましたが、この文はどういう意味ですか？ >>651
saver？savedじゃなくて？
savedなら"saved from url="でググってみると話が早い >>653
savedでした
ありがとうございます
savedで調べてみましたがこれって普段は表示されないってことですか？ >>654
そりゃコメントアウトされてるからね
>>651みたいにエクスクラメーションが全角じゃダメだけど
Comment - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Comment >>655
ありがとうございます
!は間違えて入力してしまいました ┌───────┬────────┐
└───────┴────────┘
みたいな枠を作りたいのですが、どうすれば枠の大きさを調整できますか？ >>657-658
どういうタグで枠を作ってますか？
色々な方法があるので、枠部分のHTMLとCSSのサンプルをここに書き込んでもらうか
https://jsfiddle.net/
などにコードを貼り付けて、saveして得られたURLをここに貼って貰えるとアドバイスしやすいです >>659
部分的でいいですか？
<table width="600" align="center" border="1">
<tbody>
<tr>
<td><img src="◯◯◯.files/△△△.jpg"></td></tr>
<tr>
<td>あいうえお</td>
<td>かきくけこ</td></tr>
といった感じです >>660
だったら、例えばtdの幅を
td { width: 50%; }
で一括指定するとか、それぞれ別の幅で指定したい場合は
tdにのclassを割り当てるかnth-child()等の疑似クラスで
個別にwidthを指定するとか色んな方法がある
あと、そのtableの属性値でスタイルを指定する方法は古いので
CSSで書き換えた方がいいかも >>661
<td { width: 50%; }>あいうえお</td>
といった感じですか？
CSS使いたいのですが全くわからないです… >>662
そのレベルで知らないのならまずは参考にするサイトを探すべきだよ。
例えばこのスレを普通のブラウザで見れば、すぐ下にmenubottomnavで枠付きボタンを等幅で並べてるし、
DevToolでCSSとHTML見比べてたら書き方は見当が付くだろう。
当初は見様見真似からだと思うよ。
最終的にはMDN等読んで優先順位判定を理解しないと駄目だが、
そもそも静的な部分(多分660はそう)はclass一発で当たるように作るべきだから優先順位は関係ないし。
ついでに言うとそれは多分tableの使い方を間違ってる。
tableは表が欲しいときに使うものであって、レイアウトを手動で固定化したいときに使うものではない。
外枠線が欲しいのならborderでやれば良いだけ。
このスレだとmenuitemに外枠線付けてるけど、これが普通のやり方だと思う。
(ただしその外側がliなのはどうかね？と思うけど)
分からないと言ってても分かるようにはならないから、まずは見様見真似でいいからやってみるべきだよ。
そもそも難しいものではないし。 >>662
タグ内のスタイルの書き方はちょっと違うんだが･･･
色々と説明しようと思ったけど、ここで説明するよりも、とりあえずこういうの読んだ方が早い
CSS 入門 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/Getting_started
初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！
https://saruwakakun.com/html-css/basic/css
表（table）の作り方と装飾の変え方【HTML＆CSS】
https://saruwakakun.com/html-css/basic/table
あと、呪文だらけで何言ってるか分からないかもしれないが、>>663が書いてるように
先ずは自分に合った上記のようなサイトを探して、参考にしてみるといいと思うよ >>662
さらについで。
多分その方法は「テーブルレイアウト」と呼ばれていた物で、ググると大体今は止めとけと出てくるはず。
https://allabout.co.jp/gm/gc/456372/
だから今更テーブルレイアウトしようとしてる事がそもそも間違ってて、
参考にしてる本が異常に古いとかじゃないとそうはならないはずなのだけど。
（テーブルレイアウトの入門サイトは多分撲滅されてる）
660の場合は多分inline-blockでwidth:50%で並べればいいだけのはず。
ただもし参考にしてるサイトがテーブルレイアウトの場合はどうするか微妙だが、
662見る限り君は他サイトを参考にした事もなくて勝手にデタラメに書いてるだけでしょ。
他サイト見てればそうはならんし、そもそもテーブルレイアウトのサイトを探す方が今は難しいし。
だから可能性として一番高いのは古い本を見ながら書いてるパターンだけど、
それ自体が今のWeb開発としては間違ってる事を認識した方がいいよ。
どうしても本にこだわる奴も一部居るけど、それはもう無理なんだよ。
所詮は慣れの問題だから、画面で学ぶのに慣れるしかない。 >>661
実際は文章の長さがそれぞれ違うから個別にするつもりです
<td width="50">あいうえお"</td> 悪いことは言わないから
インラインにスタイルつける手法は非推奨なので
それから離れてCSSを覚えた方がいいよ 初手から勉強しなおしてきます…
あと自分は>>660さんと同じ質問がしたかった別人ですので… >>666
その指定だとwidthは50pxになって、例に書いた50%にはならないから注意な
ちなみにCSSのプロパティは使わずに、HTML5では廃止されてる非推奨属性で
widthを指定しようとしてるのは何か理由があるの？
<td>: 表データセル要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td
>>669
他人の質問に割り込むなら「横からですが」とか、別人と分かるように書こう >>666
それはみんな分かってる。
tableは「中身が全部表示される大きさになる」ので、
同じ大きさの中身なら各カラムも同じ大きさに必ず『自動的に』なるから。
だから「中身が全部表示されて超巨大なtableになって困ってます」なら分かるが、
660はフローレイアウトを止めようとしてるだけなので、
それはテーブルレイアウトと呼ばれた10年以上前の手法であり、使い方を間違っているというわけ。
動かないわけではないが、今新しく始める人がやるのは完全に間違ってる。
フローレイアウトは慣れないと何がどこに表示されるかさっぱり分からないので、
全く知らない初心者が感覚的に分かりやすいテーブルレイアウトに引かれるのも道理ではあるが、
フローレイアウトの方が圧倒的に便利だからみんな使っているわけで、
理解して慣れるしかない。
やってみれば、単によさげに上左から埋めてるだけであり、ほぼ全自動だから超便利だよ。
それで自動的なレイアウトから変更したければ個別にCSSを当てるだけ。 >>669
全部勉強してからやろう、と考えてるのならそれも間違い。
CSSは浅いがかなり広大なので、最初に全部学ぶのには向いてない。
664のサイトは分かりやすいから、それ系を10～20ページ、4～8時間かけて基本を抑えて、さっさと使うべき。
ただまあ、初手で勉強するほどの内容はそもそも無い。
666なら、
<td class="myColumn">あいうえお"</td>
.myColumn{width:50%}
とクラスを介して分離するだけだから、見れば分かる程度だろ。
なお661の
> td { width: 50%; }
は分かりやすさ優先でそう書いてくれてるはずだが、実際はこういうタグに当てるのは止めとけ。
グローバルスタイルになるので、サイト全体でそうしたい場合以外は余計に面倒になる。
HTMLをマークダウン等で手書きしてるのなら面倒だろうが、
一々クラスを当てるのが基本だし、そうした方が後々上手く行く。 ありがとうございます
%抜けてました
特に理由はないですがとりあえずHTMLのみで書いてみようと思ってCSSをつかってません
CSSを使いこなせないってのもあります 左上から適宜埋めたいが、埋まらないのなら真ん中に表示する方法ってある？
<a class="container">
<img>
<img>
<img>
</a>
のようにサムネを纏めて表示し、枚数も大きさもそれぞれの時に、
.container {text-align:center}
.container img{float:left}
.container img:only-child{float:none}
として1枚だけのときは問題なく真ん中に表示される。
複数枚のときも左上から埋めてくれるのはいいが、
埋まらないとき、(＝右に入らず下に表示されるときとか）
当然だが右側に空白が集められてしまう。
この場合に、真ん中(中央揃え)に表示する方法ってある？ （続き）
サムネは1枚目は大きく、2枚目以降は小さく、1枚目の隙間を埋めるように表示したい。
以下１は全部でサムネ１として、（以下同様）
１が縦長なら、
１１１１２２（空白）
１１１１２２
１１１１３３
１１１１３３
１１１１４４
１１１１４４
１１１１
１１１１
１が横長なら、
１１１１１１１１（空白）
１１１１１１１１
１１１１１１１１
１１１１１１１１
２２３３４４（空白）
２２３３４４
みたいに。この場合の（空白）を左右均等にしたい。 すまぬ、色々やってたら多少進んだので自己レスで補足。
.conteiner{display:inline-block}
で上辺を埋めきれていない場合は container幅が中身と同じになるらしく、結果的に中央揃えされる。
上辺を埋めきって、或いは入らなくて下側に折り返した場合、
右側は空白になるが、その部分も含めてcontainer幅になるらしく、中央揃えはされない。
分かりにくいのでもう一度書くと、以下。
上辺を埋めきってない場合、下記左右の空白Ａは同じ幅となり、希望通りになる。
（空白Ａ)１１１１２２（空白Ａ）
（空白Ａ)１１１１２２
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１ （続き)
上辺を埋めきって下に折り返した場合、左詰となるが、これを出来れば中央揃えにしたい。
１１１１２２（空白Ｂ）
１１１１２２
１１１１３３
１１１１３３
１１１１
１１１１
１１１１
１１１１
１が横長の場合、元々下に折り返されてるので、左詰になる。これも出来れば中央揃えにしたい。
１１１１１１１１（空白Ｃ）
１１１１１１１１
１１１１１１１１
１１１１１１１１
２２（空白Ｄ）
２２
今のところの解釈だと、float指定されたときに「実際の幅」でwidthを計算するようにさせられれば空白ＢＣはいけそうなのだが、どうか？
(可能であれば空白Ｄも中央揃えで均等にしたいが） >>678
駄目ではないけど、使っても無理じゃね？
なおブラウザはchorome49以降(WindowsXP以降）、IEは不要。
よってgridはNG。
ただflexは一次元用で、縦詰めと横詰め(677の2例）がそもそも無理臭いと見たが。
使うなら二次元用のgridだが、見る限り違うっぽいと思ってる。
が、まあ、flexやこの際HTML構造も多少は変更していい(div追加とか）から割と単純な解があれば募集する。
それを実際に使うかはまた別になるが。 XPは2014年4月9日にサポート終了してるのに
まだ対応必要なの？ >>680
それ以前に、最新ブラウザやgridなら出来るとかでもないのだから、外す意味がないだろ。 ちなみにもうちょっと補足すると、大量にサムネが用意されたときに、
敷き詰めて、可能であればそれを中央揃えで表示したいと思ってる。
（余白）１１１１１１２２（余白）
（余白）１１１１１１２２（余白）
（余白）１１１１１１３３（余白）
（余白）１１１１１１３３（余白）
（余白）４４５５６６７７（余白）
（余白）４４５５６６７７（余白）
まあよくある状況だと思うけど、
サムネの大きさはバラバラなので、上記のように綺麗に敷き詰められる場合ばかりではないが、
その場合はそれなりに敷き詰めてくれ、という事。
今のところfloatの問題は左詰になる事だけで、敷き詰め自体は上手く行ってる。（というかそれが仕様だが）
gridは多分、敷き詰めではなくフレームレイアウト向けなので、（なお使った事は無い）
敷き詰める事も出来なくはなさそうだが、色々余計な小細工が必要な気がする。
なお敷き詰め後にcontainerのwidthを手動で与えてしまえば、中央揃えにはなるが、
window.getComputedStyleで得られる値は空白込みなので、
やるにしてもJS側で幅をちゃんと計算しないといけない。（と言うほど難しくもないが）
今のところこれは面倒なのでやらないつもり。(左詰で妥協) flexで中央寄せした要素の中にfloatで詰めていけばいいんじゃないの、しらんけど 
