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

**Name_Not_Found** · 2022/06/28(火) 20:32:11.78

グラフィックデザイン中心に仕事してるWEB初心者だけど、Dreamweaver頼みのコーディングって世間的にはダメなの？

**Name_Not_Found** · 2022/06/28(火) 20:58:39.10

DWは昔使ってたけど、コーディングに慣れてない初心者なら、入口としては別にいいんじゃない？
ただ、DWがダメって事は無いけど、世間的にはVisual Studio Code（VSCode）が主流になってる
使い勝手も機能拡張でカスタマイズできるし、動作も軽くて人気だからネットにも情報が多い
無料だし、試しにインストールしていじってみたら？

**Name_Not_Found** · 2022/06/28(火) 23:54:22.50

>>575
趣味なら自由にしたらええけど
現場では今や遺物だし手書きコーディングが基本だから
DWじゃないとわからないって人は現場ではいらないかな

**Name_Not_Found** · 2022/06/29(水) 12:16:52.53

DWはどうやったって重すぎるから最初からやらないほうがいいと思う

**Name_Not_Found** · 2022/06/29(水) 23:08:54.18

>>575
まったくもってそんなことはない
ここでDWがダメとか言ってる奴らは要するに自分らが使い慣れたツールにしか目が行ってないだけで
それ以外はダメだと先入観で語ってるに過ぎないよ。DWの仕様を昔の記憶のままでアップデートしてない

**Name_Not_Found** · 2022/06/29(水) 23:11:10.14

>>576
VSCodeも環境によっては突然重くなることもあるけどね
大抵はアドオンの入れすぎやそれぞれの相性問題だけど
本体そのものをアップデートしないとCPU使用率を100％ちかく喰うような挙動もある

**Name_Not_Found** · 2022/06/29(水) 23:13:49.36

>>578
今時のPCでDWが重すぎるとか無いわｗ単にPCがボロいだけじゃない？
VSCodeほど軽くないけどDWは最初からやらない方がいいとか
こんなのは仕事で使えないような挙動とかこういうのは大嘘だから

**Name_Not_Found** · 2022/06/30(木) 00:01:39.86

プロの人にDW小馬鹿にされるのは知ってるけどいいんだー
初めて触ったソフトだからひよこの刷り込み的なやつ
vscodeも使うけど

**Name_Not_Found** · 2022/06/30(木) 01:13:48.76

おま環持ち出したら何でも重くなるし軽くもなるだろｗ
低スペックPCでも、ある程度軽快に動作するってのは大事だと思うが

ところでDWって糞コード吐かなくなったん？

**Name_Not_Found** · 2022/06/30(木) 01:51:42.66

コーディングの補完とファイル管理として使うならアリだけど
それ以外は使い物にならんだろ面倒すぎるわ
普通にコード書いた方が早い

**Name_Not_Found** · 2022/06/30(木) 04:39:41.25

このスレにDW慣れしてる化石みたいな奴がいるけどこいつはVScodeが桁違いに使いやすいのを知らないらしい
ポケベルとスマホぐらいの差がある

**Name_Not_Found** · 2022/06/30(木) 05:37:16.31

vscodeはなんやかんや便利
だが、dwに突っ込んだスニペットから離れられなくて
自宅コーディングはdwから離れられない(´･ω･`)
出向先に無ければ無いで諦めつくけど

**Name_Not_Found** · 2022/06/30(木) 06:18:38.73

スニペットもVS Codeでできるだろ

**Name_Not_Found** · 2022/06/30(木) 06:20:46.10

スニペット自体はできるけど移管がめんどい

**Name_Not_Found** · 2022/06/30(木) 06:21:26.27

さくっと移せるならやり方教えてくださいませませ

**Name_Not_Found** · 2022/06/30(木) 08:36:22.02

> だが、dwに突っ込んだスニペットから離れられなくて
> 自宅コーディングはdwから離れられない(´･ω･`)
VS CodeがDWくらい使いやすいスニペットが実装されてればいいのにな

**Name_Not_Found** · 2022/06/30(木) 09:13:48.06

あと、もしかしたらvscodeにも適切なプラグインがあるかもだけど
dwは適当なところでコード画面を折り畳めるのが良い
vscodeで折り畳めるプラグイン試したけど、何かしらの始まりから終わりまでを畳むので
ヘッダ内のcssの下からbody内の特定箇所までをガッツリ畳みたい時とか
泣きたくなる
似たような理由で適当なとこを畳みたい時も。

**Name_Not_Found** · 2022/06/30(木) 09:51:39.56

>>585
DWの仕様も時代とともにアプデされてるのを知らずに
昔のままだと思い込んでるお前さんみたいなのもなｗ

**Name_Not_Found** · 2022/06/30(木) 10:46:02.58

>>581
オンボロPCでもサクサク動く有能VSコードと違ってスペックを選ぶクソDWって認めてるレスだな

**Name_Not_Found** · 2022/06/30(木) 10:48:20.05

>>592
仕様が変わったつったって天下のVSコードと比べると微々たるもん
鈍足成長を続けてきたクソDWを過大評価してるお前のオツムは相当やばい

**Name_Not_Found** · 2022/06/30(木) 12:59:26.78

DWで制作中のサイトにSNSリンク貼ったんだけど
リアルタイムプレビューで試しても
「◯◯◯◯◯（SNSサイト）で接続が拒否されました」
て弾かれるんだけど
普通に<a href="（SNSサイトアドレス）">ではだめなん？

**Name_Not_Found** · 2022/06/30(木) 16:17:07.65

>>595
ごめんよくわからんが解決した

**Name_Not_Found** · 2022/06/30(木) 17:07:01.29

流し読みしてていつからDWスレになったんだよVScodeスレだろと思ったらどっちでもなかった

**Name_Not_Found** · 2022/06/30(木) 18:42:00.59

>>593
オンボロPCでもサクサクとかまずそういう貧相な環境で仕事してますというの突っ込まないとなｗ

**Name_Not_Found** · 2022/06/30(木) 18:43:36.85

>>594
天下のとか言うが頻繁にアプデしないといきなりCPU使用率100パーとかザラだし
アドオン側もアプデや～めたの放置で責任を負わないのもフリーゆえよな

**Name_Not_Found** · 2022/06/30(木) 19:18:23.96

>>598
もうお前限界越えて何言ってるのかわかんねえよ

**Name_Not_Found** · 2022/06/30(木) 19:22:47.88

vscodeのアプデなんてデフォで自動更新ONじゃなかったか？
CPU使用率100%なんてなったこと無いわ
このスレに来る初心者なんかが必要そうな、利用者の多い有名な機能拡張なら
大して重くもならない

機能拡張云々はブラウザでも一緒だろ
利用者が多ければ代替や後継が開発され易い利点もあるんだし
変に偏った擁護なんてせずに、それぞれメリット・デメリットで語ればいいのに

**Name_Not_Found** · 2022/07/01(金) 04:55:26.17

>>597
ビルダーの話題が出ないだけマシだろｗ

>>601
vscode関連のCPU使用率に関しては検索すれば事例は出てくるからそちらを参照
5ちゃんという場はとかく敵を設定して一方を罵ることで話が進むゲハ傾向だしな
あとAdobeのサブスクをアドビ税と罵るようにシェアが大きいとこを叩く

**Name_Not_Found** · 2022/07/01(金) 05:48:20.13

大事なのは成果物の方だから
自分が使いやすいもの使えばいいだけですしー
ツールの信者になるのが一番あほらしす

**Name_Not_Found** · 2022/07/01(金) 08:03:06.41

>>602
Adobeが悪いなんて一言も誰も書いてない
Vscodeと比べてDWがクソと言うことを頑なに認めないお前が1番アホ

**Name_Not_Found** · 2022/07/01(金) 08:36:37.95

>>604
昨今はこういう風にクソか神か両極端な発想しかできないバカも増えたｗ

**Name_Not_Found** · 2022/07/01(金) 08:37:32.25

>>603
まったくその通り
方程式よりも答えが合ってるかどうかが重要なのだ

**Name_Not_Found** · 2022/07/01(金) 12:45:09.35

>>605
お前の悪いところはクソのDWを事もあろうにVscode様より上だと思い込んで、なおかつ嘘情報を発信しているところ
ゴミがゴミをゴミじゃないと言えば害悪だろ

**Name_Not_Found** · 2022/07/01(金) 15:33:06.54

使えるツールは多い方が良いかもしれない
サクラエディタで書けないやつはバカ

てことでよくね？

**Name_Not_Found** · 2022/07/01(金) 17:19:28.33

Bracketsは結構好きだったなぁ
DWにも組み込まれたりしたのに、さっさとサポート終了しちゃって
その際にVSCodeに移行しろってadobeが呼びかけてたのは笑ったな
ユーザー層が違うってのはあるにしても、DWの方じゃないんかい！っていうね

**Name_Not_Found** · 2022/07/01(金) 17:42:13.74

VSCodeはDwより簡単にローカルサーバー立てられるのが強いわ

**Name_Not_Found** · 2022/07/01(金) 18:06:44.52

Brackets俺も好きだった

**Name_Not_Found** · 2022/07/02(土) 02:38:04.79

ATOMは先に逝ったよ

**Name_Not_Found** · 2022/07/17(日) 13:15:38.06

htmlやJSよりもCSSの方が大変そうだな、CSSってちゃんと知識ないとちゃんと装飾できなそうだし

**Name_Not_Found** · 2022/07/18(月) 15:33:25.02

> CSSってちゃんと知識ないとちゃんと装飾できなそうだし
そんなレベルからの話？ｗ

**Name_Not_Found** · 2022/07/27(水) 23:17:08.08

質問です！
https://coco-factory.jp/ugokuweb/move01/5-1-15/
レスポンシブでこのハンバーガーボタンを導入したんですけど画面幅に若干収まらず画面が
ガタガタしてしまいます。原因教えてくださいよろしくお願いします。
このようなケースになったのは今回が初めてです。。

**Name_Not_Found** · 2022/07/27(水) 23:19:04.91

#g-navって要素が画面をはみ出しちゃってるみたいなんですけど、、

**Name_Not_Found** · 2022/07/27(水) 23:21:41.72

それだけじゃ分からんですよ？
コード書いたjsfiddle張ってください

**Name_Not_Found** · 2022/07/27(水) 23:39:54.98

jsfiddleの貼り方わからないので調べます！
ちなみにですがスライドショーのｊｓのプラグイン導入するとなります！！

**Name_Not_Found** · 2022/07/28(木) 00:29:15.01

ちなんでないです

**Name_Not_Found** · 2022/07/28(木) 00:58:26.02

>>618
右上にsaveクリックするとURL変わるからそのURLをここに張ってください

**Name_Not_Found** · 2022/08/25(木) 23:35:52.47

質問です。
<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%とか明示的に指定すれば当然表示されますが、文字の余白を自動的に埋めて欲しいのです)

**Name_Not_Found** · 2022/08/25(木) 23:36:12.91

これについて、<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系ではないのでこの辺の塩梅がよく分かっておりません。
ただ、インライン要素（幅は最小）に対して幅を適切に広げるのはそもそも無理筋なのかとも思ったり。

**Name_Not_Found** · 2022/08/25(木) 23:42:56.22

display:flexとflex-growで設定できるけど
hrタグを装飾として使うのは推奨された使い方じゃないよ

**Name_Not_Found** · 2022/08/26(金) 00:06:28.07

>>623
ちなみに予想に反してflex-boxであっさり出来ました。
flex-baseの初期値がautoなので無限に伸びるんですね。
(ここは固定長だと思っていたので、無限に伸びるのは予想外だった)

> hrタグを装飾として使うのは推奨された使い方じゃないよ
実は調べてるうちにそれっぽい事は書いてあったのですが、
では本来はこれはどうすべきですか？
<td>の全幅を埋めてくれる水平線が欲しいのですが、

<td><div style="border: solid gray 1px"></div></td>

でも見た目はほぼ同じですが、これの方が<hr>よりは適切ですか？

**Name_Not_Found** · 2022/08/26(金) 00:34:32.76

>>623
お早い回答ありがとう御座いました。
互換性にも問題がないようなので、多分これで行きます。

ちなみに本件、<hr>説明</hr>で出来る仕様であるべきだと思うんですけどね。
普通に使う機能だと思うので、一々flex-boxの小細工が必要な意味が分かりません。

なお<hr>については意味論で使えとの事なので、多分<div>にします。
これも、
> 以前はこれは水平の区切り線として定義されていました。現在でもブラウザーでは水平線として表示されますが、
> この要素は表示論的な用語ではなく意味論的な用語で定義されましたので、
> 水平線を引きたいのであれば、適切な CSS を使用して行うようにしてください。
> https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr
と書くのなら、駄目な使い方と正しい使い方のサンプルへのリンクを貼ってくれ、と思うところです。

いずれにしても、こんなに早く回答来るとは思ってなかったので、助かりました。
とりあえず後1週間位はここを見てますので、何かあればよろしくお願いします。

**Name_Not_Found** · 2022/08/26(金) 11:30:20.56

読み上げるべきかそうでないかで見解分かれそうな気もする

**621** · 2022/08/26(金) 12:59:00.19

意味があるかはさておき、無コストで可能なら対応してる方がマシかと。
あと、変に嵌りたくなければ想定通りの使い方に徹した方が無難ですし。

ただHTML5で装飾系排除の動きがあったのは初めて知りました。
元々<strong>や<i>や<s>とかデタラメすぎたので、順当だとは思いますが。
ただこれだとMDNのhrのページにある例、<p>間に<hr>を挿入するのも間違いで、
正しくは<p>のlast-child以外にborder-bottom, margin-bottom. padding-bottomで罫線にすべきだと思いますが。

**Name_Not_Found** · 2022/08/26(金) 14:12:11.32

ページ全文読み直そうか
一番上の例で水平線を書きたい場合は「適切なCSS」を使えとも書かれてる
水平線なんて設定したデザインによって多種多様に回答はあるからCSS指定する必要はないと思う
一番最後の例文は雑だけど意味がある区切りにしてるように見えるよ

**Name_Not_Found** · 2022/08/26(金) 17:25:43.78

<p></p><p></p>で既に別段落である事を明示的に記述済みなのだから、
そこにわざわざ<hr>を入れるのは装飾の意味でしかないんですよ。これは両方の例でです。

ただ見落としてましたが、上の例では私がやりたい====$====をモロにやってて、しかも622と同じ手法ですね。
わざわざ探した私もマヌケでしたが、やはりこの形式(水平線の上に文字を書く）のは基本だって事ですよ。
折り紙文化のない欧米デハー、
----キリトリセン----や----山折り----、----谷折り----が無いので仕方ないのか？と思ってましたが、
やっぱこれは仕様から抜けてるだけですね。（仕様を考えた奴が馬鹿）

折角エディタが付いているのだから p:after で同じ事が出来るかと試してみましたが、
こちらの環境では2度目の変更以降はまともに動作しないので諦めました。
ただ、同じ事は出来るはずで、</p><hr><p>での<hr>の存在意義は無いはずです。
（意味論的にも、表示論的にも）

**Name_Not_Found** · 2022/08/26(金) 17:39:47.09

pタグ内にhrタグはNGだし、hrタグってもう使わないほうがいいのかなー

**Name_Not_Found** · 2022/08/26(金) 18:19:19.93

？？

**Name_Not_Found** · 2022/08/26(金) 18:49:10.96

装飾としてよくあるデザインではあるけど、HTMLの起源が論文の記述用と考えるとそういう装飾はいらんかったのかもしれんな
まあこんなんでいいんじゃね？
https://design-levelup.com/webdesign/html_css_making_2/amp/

**Name_Not_Found** · 2022/08/26(金) 20:29:21.04

>>630
意味論で<p>区切り限定で使えという現行の規定を遵守するなら、
もう既に使いどころがないですし、廃止の方向かと。

>>632
同じ事を私は<div>でやってるのですが、::beforeと::afterの方がいいんですかね？
意味論的には疑似要素の方が妥当な気がしますが、(感覚的に)重くなりそうなので嫌ってきてます。
あと、JSを書く側からすると、JSで触れないのが気持ち悪いというのもあります。

ちなみにMDNのhrの記述は極めて充当ですね。私の疑問、
・私が知らないだけで、実は簡単に書けるのか
・仕様がゴミで、頻出ケースでも技巧を凝らす必要があるのか
について、第一の例で挙げる ----$---- で後者である事を明確に示しているので、
私が見落とさなければここで皆様を煩わせる必要もありませんでした。すいません。
正しい使い方の例が書けないのも、そもそも存在しないからですね。

**Name_Not_Found** · 2022/08/26(金) 20:58:04.79

hr廃止ってどこで公式に語られてる話なん？

**Name_Not_Found** · 2022/08/26(金) 21:05:36.62

ただの思い込みだと思う

**Name_Not_Found** · 2022/08/26(金) 22:07:37.60

ちなみに::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>でやってたときは問題なしでした。

**Name_Not_Found** · 2022/08/27(土) 06:26:32.74

636はブラウザの問題のようなので取り下げます。

**Name_Not_Found** · 2022/08/27(土) 10:28:29.32

636訂正。
空<div>でやっても私の環境だとズレます。どうやら単に私が気づかなかっただけっぽいです。
どのみちブラウザの問題なので放置で構いません。

**Name_Not_Found** · 2022/09/12(月) 19:59:05.17

下の様に年号を含めた日付をコーディングするならどんあ方法がスマートですか？
2022年1月1日（水）
　　　2月3日（金）
　　　5月3日（金）
↑「2022年」の幅で月日の部分の左側にスペースを空けたい

**Name_Not_Found** · 2022/09/12(月) 20:12:03.51

>>639
visibility:hidden

**Name_Not_Found** · 2022/09/13(火) 15:37:19.58

>>640
遅くなりましたがありがとうございます。

**Name_Not_Found** · 2022/09/15(木) 23:24:02.52

FigmaがAdobeによる買収に合意
https://www.figma.com/blog/a-new-collaboration-with-adobe/

**Name_Not_Found** · 2022/09/16(金) 04:49:27.55

どうかんがえてもXDの邪魔だものな
DWやFWと同じ運命

**Name_Not_Found** · 2022/09/16(金) 10:14:44.94

サムネに合った幅のキャプションを付けたいのだが、display:table以外の直接的な方法はないかな？

<div class="container">
<div class="caption">横に長いキャプション</div>
<a>サムネ</a>
</div>

で、ググれば

.container{display:table}
.caption{display:table-caption}

が出てきて確かに動作するのだが、
tableを作る気がない場所でこれはちとトリッキーなので可能であれば避けたい。
「キャプションの横幅はサムネに合わせろ」と、直接的に指示出来るCSSはないかな？

ちなみに既存他サイトはコンテナにwidthを逐一指定しているのも気になってる。
このtable指定でレンダリングが酷く遅くなる事は無いはずだが、width指定よりは遅いのも確実なので、それかね？

**Name_Not_Found** · 2022/09/16(金) 13:49:41.51

>>644
.contanerにwidth: min-content;

**Name_Not_Found** · 2022/09/16(金) 14:47:00.53

>>645
ありがとう。動作しました。

MDNをググってその項目があるのは分かってたのですが、違う意味だと勝手に決めつけてました。
とりあえず一通り全部試すべきでした。お手数をお掛けいたしました。

**Name_Not_Found** · 2022/09/16(金) 20:47:14.36

>>646
ちゅーても、この場合「兄弟要素の幅に合わせる」って意味の使い方じゃないから注意な

**Name_Not_Found** · 2022/09/16(金) 23:44:42.48

>>647
しかし意味は合ってると思うんだけども。少なくともtableよりは断然いい。

意味は「中身の最小幅」で、出来る限り縦に細長くなる。
英文テキストはスペースで折り返すから結果的に最長単語、
日本語は任意の所で折り返されるので問題なし、
サムネは折り返されない、
よって結果的にサムネ幅になる。
多分この使い方を想定している気がするが。
(サムネが小さすぎる時にテキスト幅になるのはそれでいいし、それの方がいい)

なお他サイトでwidth逐一指定なのは多分ブラウザ対応だ。
chromeならmin-contentは46以降なので、おおよそ2016頃以前は使えなかった。
この辺も気にするならtableの方がいいのかもしれないが、
今回に関しては対応してないと多少見栄えが悪くなる(スカスカになる)だけなので、今のところmin-contentで行く予定。

そもそも「次要素の幅に合わせろ」って指定って出来るんだっけ？
出来るのなら勿論ビンゴだが、
元々それを探してinheritだ100%だ色々こねくり回して駄目だったんだけども。
ちなブラウザ対応はchrome49以降(≒WindowsXP以降)、IEは不要。

**Name_Not_Found** · 2022/09/17(土) 01:54:54.04

>>648
> そもそも「次要素の幅に合わせろ」って指定って出来るんだっけ？

いや、元々のオーダーがそうだったからｗ
→ > 「キャプションの横幅はサムネに合わせろ」と、直接的に指示出来るCSSはないかな？

でも今回のはどちらかというと「コンテナの横幅をサムネ合わせる」という代替案だから
それを考慮しないで変にいじるとレイアウトが崩れる場合があるから注意してねって話>>647

**Name_Not_Found** · 2022/09/17(土) 08:51:23.11

>>649
了解だ。
当初の要求と適切な実装が異なるのは、CSS流の思考がまだ出来てない俺の問題だ。
初心者が間違った実装を目指して空回りするのと同じ。

**Name_Not_Found** · 2022/09/18(日) 02:06:17.05

質問させてください
<！-- saver from url=(0039)https://abehiroshi.la.coocan.jp/menu.htm -->
例として阿部寛さんのページをださせていただきましたが、この文はどういう意味ですか？

**Name_Not_Found** · 2022/09/18(日) 02:13:36.97

コメントだからこちらには分からない

**Name_Not_Found** · 2022/09/18(日) 02:32:25.03

>>651
saver？savedじゃなくて？
savedなら"saved from url="でググってみると話が早い

**Name_Not_Found** · 2022/09/18(日) 02:35:18.77

>>653
savedでした
ありがとうございます

savedで調べてみましたがこれって普段は表示されないってことですか？

**Name_Not_Found** · 2022/09/18(日) 05:14:46.86

>>654
そりゃコメントアウトされてるからね
>>651みたいにエクスクラメーションが全角じゃダメだけど

Comment - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Comment

**Name_Not_Found** · 2022/09/18(日) 12:06:06.29

>>655
ありがとうございます
!は間違えて入力してしまいました

**Name_Not_Found** · 2022/09/18(日) 22:52:49.42

┌───────┬────────┐
└───────┴────────┘
みたいな枠を作りたいのですが、どうすれば枠の大きさを調整できますか？

**Name_Not_Found** · 2022/09/18(日) 22:53:34.02

片方だけ小さくなってしまいます

**Name_Not_Found** · 2022/09/18(日) 23:18:33.90

>>657-658
どういうタグで枠を作ってますか？
色々な方法があるので、枠部分のHTMLとCSSのサンプルをここに書き込んでもらうか
https://jsfiddle.net/
などにコードを貼り付けて、saveして得られたURLをここに貼って貰えるとアドバイスしやすいです

**Name_Not_Found** · 2022/09/18(日) 23:34:17.45

>>659
部分的でいいですか？

<table width="600" align="center" border="1">
<tbody>
<tr>
<td><img src="◯◯◯.files/△△△.jpg"></td></tr>
<tr>
<td>あいうえお</td>
<td>かきくけこ</td></tr>

といった感じです

**Name_Not_Found** · 2022/09/19(月) 00:50:24.77

>>660
だったら、例えばtdの幅を
td { width: 50%; }
で一括指定するとか、それぞれ別の幅で指定したい場合は
tdにのclassを割り当てるかnth-child()等の疑似クラスで
個別にwidthを指定するとか色んな方法がある

あと、そのtableの属性値でスタイルを指定する方法は古いので
CSSで書き換えた方がいいかも

**Name_Not_Found** · 2022/09/19(月) 01:21:13.95

>>661
<td { width: 50%; }>あいうえお</td>
といった感じですか？

CSS使いたいのですが全くわからないです…

**Name_Not_Found** · 2022/09/19(月) 02:40:30.56

>>662
そのレベルで知らないのならまずは参考にするサイトを探すべきだよ。
例えばこのスレを普通のブラウザで見れば、すぐ下にmenubottomnavで枠付きボタンを等幅で並べてるし、
DevToolでCSSとHTML見比べてたら書き方は見当が付くだろう。
当初は見様見真似からだと思うよ。
最終的にはMDN等読んで優先順位判定を理解しないと駄目だが、
そもそも静的な部分(多分660はそう)はclass一発で当たるように作るべきだから優先順位は関係ないし。

ついでに言うとそれは多分tableの使い方を間違ってる。
tableは表が欲しいときに使うものであって、レイアウトを手動で固定化したいときに使うものではない。
外枠線が欲しいのならborderでやれば良いだけ。
このスレだとmenuitemに外枠線付けてるけど、これが普通のやり方だと思う。
(ただしその外側がliなのはどうかね？と思うけど)

分からないと言ってても分かるようにはならないから、まずは見様見真似でいいからやってみるべきだよ。
そもそも難しいものではないし。

**Name_Not_Found** · 2022/09/19(月) 03:25:30.18

>>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が書いてるように
先ずは自分に合った上記のようなサイトを探して、参考にしてみるといいと思うよ

**663** · 2022/09/19(月) 07:14:45.48

>>662
さらについで。
多分その方法は「テーブルレイアウト」と呼ばれていた物で、ググると大体今は止めとけと出てくるはず。
https://allabout.co.jp/gm/gc/456372/

だから今更テーブルレイアウトしようとしてる事がそもそも間違ってて、
参考にしてる本が異常に古いとかじゃないとそうはならないはずなのだけど。
（テーブルレイアウトの入門サイトは多分撲滅されてる）

660の場合は多分inline-blockでwidth:50%で並べればいいだけのはず。
ただもし参考にしてるサイトがテーブルレイアウトの場合はどうするか微妙だが、
662見る限り君は他サイトを参考にした事もなくて勝手にデタラメに書いてるだけでしょ。
他サイト見てればそうはならんし、そもそもテーブルレイアウトのサイトを探す方が今は難しいし。
だから可能性として一番高いのは古い本を見ながら書いてるパターンだけど、
それ自体が今のWeb開発としては間違ってる事を認識した方がいいよ。
どうしても本にこだわる奴も一部居るけど、それはもう無理なんだよ。
所詮は慣れの問題だから、画面で学ぶのに慣れるしかない。

**660** · 2022/09/19(月) 10:55:16.31

>>661
実際は文章の長さがそれぞれ違うから個別にするつもりです
<td width="50">あいうえお"</td>

**Name_Not_Found** · 2022/09/19(月) 11:21:03.91

悪いことは言わないから
インラインにスタイルつける手法は非推奨なので
それから離れてCSSを覚えた方がいいよ

**Name_Not_Found** · 2022/09/19(月) 11:22:55.06

>>663-665
ありがとうございます

**662** · 2022/09/19(月) 11:25:38.28

初手から勉強しなおしてきます…
あと自分は>>660さんと同じ質問がしたかった別人ですので…

**Name_Not_Found** · 2022/09/19(月) 13:30:31.28

>>666
その指定だとwidthは50pxになって、例に書いた50%にはならないから注意な

ちなみにCSSのプロパティは使わずに、HTML5では廃止されてる非推奨属性で
widthを指定しようとしてるのは何か理由があるの？

<td>: 表データセル要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td

>>669
他人の質問に割り込むなら「横からですが」とか、別人と分かるように書こう

**Name_Not_Found** · 2022/09/19(月) 13:35:50.13

>>666
それはみんな分かってる。
tableは「中身が全部表示される大きさになる」ので、
同じ大きさの中身なら各カラムも同じ大きさに必ず『自動的に』なるから。
だから「中身が全部表示されて超巨大なtableになって困ってます」なら分かるが、
660はフローレイアウトを止めようとしてるだけなので、
それはテーブルレイアウトと呼ばれた10年以上前の手法であり、使い方を間違っているというわけ。
動かないわけではないが、今新しく始める人がやるのは完全に間違ってる。

フローレイアウトは慣れないと何がどこに表示されるかさっぱり分からないので、
全く知らない初心者が感覚的に分かりやすいテーブルレイアウトに引かれるのも道理ではあるが、
フローレイアウトの方が圧倒的に便利だからみんな使っているわけで、
理解して慣れるしかない。
やってみれば、単によさげに上左から埋めてるだけであり、ほぼ全自動だから超便利だよ。
それで自動的なレイアウトから変更したければ個別にCSSを当てるだけ。

**Name_Not_Found** · 2022/09/19(月) 13:37:14.36

>>669
全部勉強してからやろう、と考えてるのならそれも間違い。
CSSは浅いがかなり広大なので、最初に全部学ぶのには向いてない。
664のサイトは分かりやすいから、それ系を10～20ページ、4～8時間かけて基本を抑えて、さっさと使うべき。

ただまあ、初手で勉強するほどの内容はそもそも無い。
666なら、

<td class="myColumn">あいうえお"</td>

.myColumn{width:50%}

とクラスを介して分離するだけだから、見れば分かる程度だろ。
なお661の
> td { width: 50%; }
は分かりやすさ優先でそう書いてくれてるはずだが、実際はこういうタグに当てるのは止めとけ。
グローバルスタイルになるので、サイト全体でそうしたい場合以外は余計に面倒になる。
HTMLをマークダウン等で手書きしてるのなら面倒だろうが、
一々クラスを当てるのが基本だし、そうした方が後々上手く行く。

**660** · 2022/09/19(月) 13:54:09.09

ありがとうございます
%抜けてました

特に理由はないですがとりあえずHTMLのみで書いてみようと思ってCSSをつかってません
CSSを使いこなせないってのもあります

**Name_Not_Found** · 2022/09/23(金) 13:33:10.80

左上から適宜埋めたいが、埋まらないのなら真ん中に表示する方法ってある？

<a class="container">
<img>
<img>
<img>
</a>

のようにサムネを纏めて表示し、枚数も大きさもそれぞれの時に、

.container {text-align:center}
.container img{float:left}
.container img:only-child{float:none}

として1枚だけのときは問題なく真ん中に表示される。
複数枚のときも左上から埋めてくれるのはいいが、
埋まらないとき、(＝右に入らず下に表示されるときとか）
当然だが右側に空白が集められてしまう。
この場合に、真ん中(中央揃え)に表示する方法ってある？

**Name_Not_Found** · 2022/09/23(金) 13:35:00.58

（続き）
サムネは1枚目は大きく、2枚目以降は小さく、1枚目の隙間を埋めるように表示したい。
以下１は全部でサムネ１として、（以下同様）

１が縦長なら、

１１１１２２（空白）
１１１１２２
１１１１３３
１１１１３３
１１１１４４
１１１１４４
１１１１
１１１１

１が横長なら、

１１１１１１１１（空白）
１１１１１１１１
１１１１１１１１
１１１１１１１１
２２３３４４（空白）
２２３３４４

みたいに。この場合の（空白）を左右均等にしたい。

**674** · 2022/09/23(金) 14:33:01.75

すまぬ、色々やってたら多少進んだので自己レスで補足。

.conteiner{display:inline-block}

で上辺を埋めきれていない場合は container幅が中身と同じになるらしく、結果的に中央揃えされる。
上辺を埋めきって、或いは入らなくて下側に折り返した場合、
右側は空白になるが、その部分も含めてcontainer幅になるらしく、中央揃えはされない。

分かりにくいのでもう一度書くと、以下。

上辺を埋めきってない場合、下記左右の空白Ａは同じ幅となり、希望通りになる。
（空白Ａ)１１１１２２（空白Ａ）
（空白Ａ)１１１１２２
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１
（空白Ａ)１１１１

**674** · 2022/09/23(金) 14:34:11.24

（続き)
上辺を埋めきって下に折り返した場合、左詰となるが、これを出来れば中央揃えにしたい。

１１１１２２（空白Ｂ）
１１１１２２
１１１１３３
１１１１３３
１１１１
１１１１
１１１１
１１１１

１が横長の場合、元々下に折り返されてるので、左詰になる。これも出来れば中央揃えにしたい。

１１１１１１１１（空白Ｃ）
１１１１１１１１
１１１１１１１１
１１１１１１１１
２２（空白Ｄ）
２２

今のところの解釈だと、float指定されたときに「実際の幅」でwidthを計算するようにさせられれば空白ＢＣはいけそうなのだが、どうか？
(可能であれば空白Ｄも中央揃えで均等にしたいが）

**Name_Not_Found** · 2022/09/23(金) 16:23:28.92

flexは使っちゃダメなの？

**674** · 2022/09/23(金) 16:46:09.86

>>678
駄目ではないけど、使っても無理じゃね？
なおブラウザはchorome49以降(WindowsXP以降）、IEは不要。
よってgridはNG。

ただflexは一次元用で、縦詰めと横詰め(677の2例）がそもそも無理臭いと見たが。
使うなら二次元用のgridだが、見る限り違うっぽいと思ってる。

が、まあ、flexやこの際HTML構造も多少は変更していい(div追加とか）から割と単純な解があれば募集する。
それを実際に使うかはまた別になるが。

**Name_Not_Found** · 2022/09/23(金) 17:06:14.69

XPは2014年4月9日にサポート終了してるのに
まだ対応必要なの？

**674** · 2022/09/23(金) 17:11:11.82

>>680
それ以前に、最新ブラウザやgridなら出来るとかでもないのだから、外す意味がないだろ。

**674** · 2022/09/23(金) 17:36:14.48

ちなみにもうちょっと補足すると、大量にサムネが用意されたときに、
敷き詰めて、可能であればそれを中央揃えで表示したいと思ってる。

（余白）１１１１１１２２（余白）
（余白）１１１１１１２２（余白）
（余白）１１１１１１３３（余白）
（余白）１１１１１１３３（余白）
（余白）４４５５６６７７（余白）
（余白）４４５５６６７７（余白）

まあよくある状況だと思うけど、
サムネの大きさはバラバラなので、上記のように綺麗に敷き詰められる場合ばかりではないが、
その場合はそれなりに敷き詰めてくれ、という事。
今のところfloatの問題は左詰になる事だけで、敷き詰め自体は上手く行ってる。（というかそれが仕様だが）
gridは多分、敷き詰めではなくフレームレイアウト向けなので、（なお使った事は無い）
敷き詰める事も出来なくはなさそうだが、色々余計な小細工が必要な気がする。

なお敷き詰め後にcontainerのwidthを手動で与えてしまえば、中央揃えにはなるが、
window.getComputedStyleで得られる値は空白込みなので、
やるにしてもJS側で幅をちゃんと計算しないといけない。（と言うほど難しくもないが）
今のところこれは面倒なのでやらないつもり。(左詰で妥協)

**Name_Not_Found** · 2022/09/23(金) 17:56:05.01

flexで中央寄せした要素の中にfloatで詰めていけばいいんじゃないの、しらんけど

**Name_Not_Found** · 2022/09/23(金) 18:47:38.11

今あるコンテナの内か外にコンテナ追加して寄せれば？
･･･と思ったけど条件大杉で無理って言われそう

**674** · 2022/09/23(金) 20:44:06.06

>>683
やってみたが同様に駄目だ。
おそらく原因は同じで、floatで詰めたときのコンテナ幅が『右側の空白を含んだ状態で』親と同じ幅になるからだ。
だからブラウザからすると、ちゃんと「右側に空白があるblockを中央寄せ」している事になってしまう。
試した内容は以下。

.containerの親 {
display:flex;
flex-direction: column;
align-items: center;
}

>>684
外側は元々階層があるからコンテナモドキになってるが、flexで試したら上記の通り。
他に案がある？
あと、内側ってのの具体案は？

**674** · 2022/09/23(金) 20:44:51.77

ちなみにただのinlineだと中央揃えにはなるが右下を埋めてくれない。
具体的には以下。

欲しいもの

(余白)１１１１２２(余白)
(余白)１１１１２２(余白)
(余白)１１１１３３(余白)
(余白)１１１１３３(余白)

実際(display:inline;vertical-align:topだと)

(余白)１１１１２２(余白)
(余白)１１１１２２(余白)
(余白)１１１１
(余白)１１１１
(余白D)３３(余白D)
(余白D)３３(余白D)

**Name_Not_Found** · 2022/09/23(金) 20:55:20.06

その手のはgridが一番楽なんじゃないの
その次にflexで都度divか何かで囲っていく

**Name_Not_Found** · 2022/09/23(金) 21:00:47.29

こういうの想像したんだけど違うのかな？
https://home.belgianbeerweekend.jp/

**Name_Not_Found** · 2022/09/23(金) 21:06:47.41

文字で書かれると目が滑るし数字の意味が分からん
図で書こうや

**674** · 2022/09/23(金) 21:31:58.77

>>687
使った事無いが、MDN読む限り、gridは基本的にgrid上に配置したい場合で、
大きさがデタラメな物を左上から埋める用途ではない気がするけど。
（gridは自分でレイアウトを細かく指定したい場合向け）

例では分かりやすいように大きさを固定倍にしてるが、
実際はバラバラの大きさのサムネイルを、出来るだけ余白無しで固めて表示して欲しくて（←ここまでは出来てる）
ただ場合によっては右側に大きな余白が残るのが見た目気に入らないだけ。
grid使えば楽勝で出来る！とかなら対象ブラウザを変更する事も検討するけど、実際、grid使っても無理でしょ。

>>688
基本的にはそれ。
ただし、サムネの大きさはデタラメで、綺麗にgridには載らない。

まあ今一応gridも試してるが、やっぱりgridは「グリッドに載せる用」に見える。
（初めてなので使い方間違ってるかもだし、もうちょっとあれこれ試してみるけど）

**Name_Not_Found** · 2022/09/23(金) 21:46:29.09

js使わないと無理ゲーじゃないかな
jqueryだけどこういうのとも違う？
https://masonry.desandro.com/

**674** · 2022/09/23(金) 21:47:12.23

>>689
5chだと無理だろ。罫線書いてもずれるし。
同じ数字は同じサムネイルだと思えば分かりやすいと思うが。

１１１１１１１１
１１１１１１１１

は横長の１枚のサムネイル。

１１
１１
１１
１１

は縦に細長い１枚のサムネイル。

**674** · 2022/09/23(金) 21:57:54.17

>>687
ちなみにgrid試したが、
auto-fillでもサムネ幅で勝手に埋めてくれるのではなく、
あくまでこちらが指定した幅のgridに載るだけのように見える。
（まだgrid初心者なので根本的に間違ってるかもだが）

>>688
ちなみにそのサイト確認したが、全部flexで、しかも子にもflex指定で、単なるblock扱いで埋めてるだけだな。
最初からcolspanやrowspanが分かっててそれ専用のHTMLを生成しているように見える。
何か知らんがおそらくフレームワークで吐き出してる感じ。
今回の俺の件にはこの手法は無理だ。

**674** · 2022/09/23(金) 22:21:09.79

>>691
基本的にそんな感じ。
ただ、その例は4列に綺麗に入る（ように調整されている）が、こちらはデタラメな大きさなのが違う。

実際はニュースリーダーみたいな物を作っていて、
各ニュース記事では写真の枚数も大きさも不定で、
それらを表示する際、原寸だと邪魔なので小型化してサムネとして表示している。
だからサムネの縦横のどちらかはこちらが指定した大きさ(例150px）と一致するが、
もう片方はデタラメになってしまうし、順番もソースが載せてる順なので綺麗に埋まるとは限らない。
そして目標サムネサイズよりも小さい物は拡大しない為、上記「どちらかは150px」も常に成り立つわけではない。
ただ、記事にはこういう写真が付いてますよ、と分かればいいので、
出来るだけ余白を詰めてぐちゃっと表示されてくれて問題ない。
(というか文字を表示する場所を確保する為、出来るだけ余白無しで表示したい)

ただまあ、その例もgrid使いながらJS併用なら、CSSだけではきついのかな？
まあgridがどこまで出来るものか知らないから、
その例見てもどの部分をJSで補完してるのかピンと来ないのだけども、
微妙にrowがズレてるのも綺麗に埋めてるよ！という意味なら、それで当たりだ。

**Name_Not_Found** · 2022/09/23(金) 22:26:34.68

Masonryレイアウトてやつ？

**674** · 2022/09/23(金) 22:53:13.51

>>691
>>695
つかこれって名前が付くほどの超定番レイアウトなのか？
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
ただこれ(MDN)見る限り、行内で一番大きい物に合わせてるだけで、縦には詰め込んでないので、

{display:inline; vertical-align:top}

で同じ事が出来るはずだけど、何が違うのかよく分からん。
(691のサイトはそれ以上に詰め込んでいるので、違いは分かるが)

俺自身は普通に見かける、例えばtwitter等でも複数のファイルを添付した際、

１１１１１１１２２
１１１１１１１２２
１１１１１１１３３
１１１１１１１３３
１１１１１１１４４
１１１１１１１４４

みたいに表示されるのと同じ事をやろうとしてるだけ。
（ただし大きさはデタラメなので綺麗には埋まらないが、それは仕方ない)

**674** · 2022/09/23(金) 22:58:01.01

すいません696のこの部分撤回します。

> {display:inline; vertical-align:top}
> で同じ事が出来るはずだけど、何が違うのかよく分からん。

こちらの環境の問題のようで、MDNに書いてるとおり、configして見直します。

**Name_Not_Found** · 2022/09/23(金) 23:21:09.50

>>691は配布サイトだよ
配布されてるjsを使ってサイズ違いのものを
感覚的にタイル上に縦横の余白調整してくれるの

**Name_Not_Found** · 2022/09/23(金) 23:58:27.35

すいません
スレ違いかもしれませんが…
「CGIの動作が可能なHTTPD」ってどういうことですか？

**674** · 2022/09/24(土) 00:51:42.72

>>698
それは理解している。
ただそういう場合は大体「これを使ったらこんな事が出来ますよ！」と分かるようにしていて、
実際そのページトップのデザインがそうなってる。

masonryレイアウトも確認した。確かに691と同じような事をCSSで出来るようになってた。
出来るだけ詰め込め、というノリは俺が欲しい物と同じ。
ただ、今回はgridに載る必要はなく、詰め込めればいいだけなので、これではない。
gridも再度確認したが、基本的にgridに強制的に載せる為の物で、
逆に、grid関係なくとにかく詰め込めなら、通常のフローレイアウトの方が当たってるように見える。

実際は確かにmasonryレイアウトの方が綺麗に見えるのは分かるが、
今回は単にサムネを出来るだけ固めたいだけだから、やはりfloatが正しいように見える。
ただ、floatの場合は「入るのなら横に、駄目なら下に」でしかないから、
節操なくデタラメに詰め込まれ、綺麗なラインなんて出来ず、
場合によってはおかしな改行や空白が入ったトンデモ配置になるので、嫌われるのも分かる。
しかもfloatでは何も制御出来ない。
この辺考えてmasonryレイアウトなのだろうし、今回それを採用すべきなのかもしれないが。

今目指しているもので、最高に上手く詰め込めた状態なら、688になる。
ただしfloatの場合は688の"GOOSE"のような縦長ブロックが途中で差し込まれたら悲惨な事になるが。
masonryの場合は一応そういう事が発生しにくい分は優れてる。

今のところfloatで左詰のまま妥協するか、
或いはfloatだと実際の所綺麗には埋まらないので、
それがあまりに見にくければ、どうにかしてmasonry的にするか、という感じ。
（とはいえサムネが2枚以下の場合はfloatでもおかしくなりようもなく、大半の記事はそうなので、そんなに目立たない)
皆さん色々ありがとう。

**Name_Not_Found** · 2022/09/24(土) 01:03:41.19

こう書くのが正しいっつってコードの書き方に拘ったところで、見る人からすると
「あぁ、サムネ左に寄ってんな」で終了だけどな

**674** · 2022/09/24(土) 01:31:36.45

>>701
まあ気にしない人はそうね。
俺もそうだが、気にする人は気にするんだよ。

ただ、このスレの連中は気にするべきでは？
なおジョブスは色々と美的にうるさかったらしく、「フォントの話は…」てな事を言った奴は即首にしたらしいが。
https://www.youtube.com/watch?v=cNPZzNHHmkY

682のとおり、JSでの対応は面倒なだけで難しくはないので、
俺もこんなノリだと首にされるのだろうなと思いつつ、どうするかなという感じ。
ただ、全体が中央揃えで、一個だけ左詰めだと、何これ？とはなるんだよね。
それでいちいち「バグですか？」と聞かれてもウザイし。

**674** · 2022/09/24(土) 01:33:17.20

ごめん、702は書き方が曖昧だった。俺は気にしない派ね。
まあどうでもいい話だとも思うが。

**Name_Not_Found** · 2022/09/24(土) 01:59:10.29

サムネのサイズをcssなり書き出しサイズなりで統一するのが
ソースも視覚的な見栄えも良くなりそうって思いましたこなみかん　

**674** · 2022/09/24(土) 02:18:59.12

>>704
その通りだけど、外部ソースを読むのでそこはどうにもならん。

>>684
内部コンテナって、もしかして個別サムネサイズに合わせて<div>で688みたいに段組しろって事か？
それはさすがにHTMLを見た目全振りにしすぎてるし、
今のところ682方式の方がJSも楽なので、やるとしたら682になる。

ちなみによくよく考えれば2枚の時はデフォのinlineで結果的にも全く問題なかったので、
floatじゃないと埋まらないのは3枚以上の時であり、674で :only-child 使ってるのも間違いだったわ。

**Name_Not_Found** · 2022/09/24(土) 02:25:03.61

>>699
CGIが動作可能な状態に設定されたWebサーバ

**Name_Not_Found** · 2022/09/24(土) 11:15:58.78

>>705
object-fit:cover

**Name_Not_Found** · 2022/09/24(土) 13:53:07.39

>>707
coverは切り取られるので使い物にならない。
使うとしたらcontainかscale-downなのだけど、object-fitはそもそも外形を維持してしまうので、詰め込みは出来ない。

**Name_Not_Found** · 2022/09/24(土) 20:10:14.04

この板にカキコしていいかわからんけど、昔なつかしホームページを作りたい。
いまは、htmlを頑張って調べながら作っている状況だけど
90年代後半、2000年代前半のホームページあるあるを教えてください！
たとえば、アクセスカウンターみたいな・・・・。
できれば、昔なつかしデザインが残っている老舗ホームページのリンクもほしい。

**Name_Not_Found** · 2022/09/24(土) 20:50:22.54

>>709
ttp://abehiroshi.la.coocan.jp/

**Name_Not_Found** · 2022/09/24(土) 20:58:13.51

>>709
まんまググれば実例がたくさん出てくる
スレの主旨から外れてるので、作る段階での疑問が出てきてからまたどうぞ

**Name_Not_Found** · 2022/09/27(火) 20:30:11.45

fieldset をMDNで見ると
＞フォーム内のコントロールをグループ化するために使用します。
とありますが、記事本文で吹き出しのような枠の使い方は本来の使い方と反れますか？

<fieldset>
　<legend>タイトル</legend>
　本文
</fieldset>

**Name_Not_Found** · 2022/09/27(火) 22:00:10.30

divとhにしよ？

**Name_Not_Found** · 2022/09/27(火) 23:31:27.64

それだとCSS1行で目的達成できるので
でももうdivにしました

**Name_Not_Found** · 2022/09/28(水) 03:50:29.01

>>709
その時代だとフレームやテーブルでレイアウトは基本だなｗ
アクセスカウンターや掲示板とかMIDIのサウンド鳴らしてうざがられるとか

**Name_Not_Found** · 2022/09/28(水) 07:39:48.39

こんなふうに、入力したら動いてくれるタグとかってないでしょうか。
うまく説明することができず、申し訳ないですがリンクのように予め入力した時間に
電車アイコンが動くようにしたいです。
速度がだんだん早くなるとかそういうのはいらないので駅についたら泊まる、駅間は動く
という感じだけで構わないですから、どういう言語またはどのようにググればいいのか教えて下さい
https://loo-ool.com/rail/SI/38/

**Name_Not_Found** · 2022/09/29(木) 16:40:08.55

>>716
アイコン要素にCSS transition仕込んどけば、飛び先の座標を指定すると勝手に動くよ
どの時間にどの座標に居るかはJavaScriptでよきにはからって

必要な知識はCSS Positioning, CSS Transition, JavaScriptでの要素取得かな

**Name_Not_Found** · 2022/09/29(木) 17:06:39.69

これいいな

CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方
https://coliss.com/articles/build-websites/operation/css/what-is-the-top-layer.html

**Name_Not_Found** · 2022/09/29(木) 18:00:35.91

>>718
こんなのあったのか
未確認だけどiOSの挙動にも対応してるのかな？
してたらいいな

**Name_Not_Found** · 2022/11/16(水) 17:43:53.81

CSSについての質問です
例えば
p {
color: red;
}
というのがあったとしますが
p {color: red;}
これではダメなのですか？

**Name_Not_Found** · 2022/11/16(水) 17:45:49.15

ダメ！そういう記述じゃ管理しにくいでしょ

**720** · 2022/11/16(水) 19:43:19.47

>>721
すいません、そこについて詳しくお願いします

機能的には問題なく動作するということでok？

**Name_Not_Found** · 2022/11/16(水) 20:21:58.09

>>722
721ではないが、そう。文法的には問題ない。
ただ、ネット帯域をケチりたいのなら、適当にググって出てくるminifierを使って限界まで詰めたほうがいい。

**Name_Not_Found** · 2022/11/16(水) 21:51:03.49

>>720
ぜんぜん問題ないよー
記述属性多いとは探しにくくなるけど、行数は節約できて一覧性は上がるね

**Name_Not_Found** · 2022/11/16(水) 22:21:58.39

今の時代にCSSの記述で詰めて帯域ケチるとかあんの？

**Name_Not_Found** · 2022/11/16(水) 22:35:11.25

SCSS使ってるから可読性の為にわざわざ余白やコメント残す必要無いし
CSSにコンパイルする時に自動的に余白は削れるようにしてるわ

**Name_Not_Found** · 2022/11/16(水) 23:13:34.35

>>725
地味に効くし、技術的にはやらない理由はないし、実際大きいところはほぼやってると思うよ。
自分が参考にしてるサイトを確認してみればいい。

**Name_Not_Found** · 2022/11/16(水) 23:50:35.66

>>727
レギュレーションで決まってたりするしね

**Name_Not_Found** · 2022/11/17(木) 12:46:03.59

>>727
大手でもやってないとこもあるなｗ

**720** · 2022/11/17(木) 17:37:46.63

>>723-729
ありがとうございます

機能的には問題ないのですね。
記述属性が多いと探しにくいとはどんな場合ですか？

**Name_Not_Found** · 2022/11/17(木) 17:58:59.40

>>730
こんなん
.p01 { color: red; font-family: 'Noto Sans', 'Hiragino Sans', sans-serif; font-size: 16px; line-height: 1.8; text-align: justify; font-weight: 500; text-decoration: underline; padding: 0 0.5em; margin: 0 0 2em; }
.p02 { position: absolute; left: 0; bottom: 2em; color: black; font-family: 'Noto Serif'', sans-serif; font-size: 14px; line-height: 1.6; text-align: left; font-weight: 600; padding: 0 2em; margin: 0 0 2em; }
.p03 { color: #0005; font-family: 'Noto Sans', 'Hiragino Sans', sans-serif; font-size: 12px; line-height: 1.5; text-align: justify; font-weight: 300; padding: 0; margin: 1em 0; }

最終のミニファイはツールに任せればいいので、見やすさとメンテのしやすさ基準で使い分ければいいんでない

**Name_Not_Found** · 2022/11/27(日) 20:26:49.06

<h1>あかさたなはま</h1>
これに外部CSSファイルの
{margin-bottom: 0px;}
を適用させたいのですがどうすればいいですか？

**Name_Not_Found** · 2022/11/27(日) 20:30:41.59

>>732
h1{
margin-bottom: 0px;
}

**Name_Not_Found** · 2022/11/27(日) 20:55:27.26

>>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。

※stylesheet01.cssにはh1以外にh2などへの記述もしてます。

**Name_Not_Found** · 2022/11/27(日) 20:57:39.66

>>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。

※stylesheet01.cssにはh1以外にh2などへの記述もしてます。

**Name_Not_Found** · 2022/11/27(日) 21:00:23.50

**Name_Not_Found** · 2022/12/04(日) 22:42:19.72

"ページ全体に背景グラデーションを掛ける"方法が参考書に記載されていて
疑問があります(参考書には何故そうなのか理由がなかったので....)

<HTML>
<div class="content">
<h1>主題主題主題</h1>
<p>文章文章文章文章文章文章</p>

<h2>副題副題副題</h2>

<h3>副副題副副題副副題</h3>
<ul>
<li>9:30〜</li>
<li>11:30〜</li>
<li>14:30〜</li>
<li>16:30〜</li>
</ul>
　　　以下2回ループ
</div>

**Name_Not_Found** · 2022/12/04(日) 22:49:10.32

<CSS>
html{
min-height: 100%;
}

body{
background: linear-gradient(#9ad4fc, #dcffb8);
}

.content{
max-width: 900px;
background: rgba(255, 255, 255, 0.7);
margin: 60px auto 0 auto;
padding: 30px;
border-radius: 15px;
}

ここで疑問です途中でグラデーションが途切れるので
"html"要素に対して高さを指定するのはわかります。
何故、最小値の高さ"min-height: 100%;"なのでしょうか?
"height: 100%;"でも同く途切れずグラデーションが適用されす。
その理由が参考書や調べてもわかりません。

**Name_Not_Found** · 2022/12/04(日) 23:05:46.43

ブラウザの表示高より長いページで違いが出る

**Name_Not_Found** · 2022/12/04(日) 23:12:12.12

>>739
早速のレス、ありがとうございます。
もう少し具体的に解説して頂けないでしょうか?
自分のブラウザ(chrome)だと、"min-height: 100%;"も"height: 100%;"も
同じ表示結果になります。

**Name_Not_Found** · 2022/12/05(月) 01:33:40.54

>>740
.contentにheight:150vh;を追加してみると違いが分かりやすいよ

**Name_Not_Found** · 2022/12/05(月) 04:42:22.33

>>741
あっ!本当だ....
"height: 100%;"だと途切れ、"min-height: 100%;"だと途切れません。
これは何故、"height: 100%;"だと途切れるのでしょうか?

自分の見解ですと、"height: 100%;"だと画面(ブラウザ)の大きさに対して
100%の高さが表示されるからだと思いました。
ずっと考えて眠れず今の時間まで考えました。

**Name_Not_Found** · 2022/12/07(水) 08:22:47.62

「css height min-height 違い」で検索！

**Name_Not_Found** · 2022/12/09(金) 01:32:51.73

ChatGPTに聞いた結果
https://i.imgur.com/SIhutDy.jpg
https://i.imgur.com/qtlwmez.jpg
https://i.imgur.com/DfMBnQt.jpg

**Name_Not_Found** · 2022/12/09(金) 02:55:09.85

すごく正しいようで間違ってる答えが量産されるってのはこういうことか

**Name_Not_Found** · 2022/12/09(金) 03:06:49.53

2枚目で　ん？　となる

**Name_Not_Found** · 2023/03/04(土) 14:45:18.27

~~┗─y(;´Д`)y─┛~~

**Name_Not_Found** · 2023/04/02(日) 20:33:44.83

ここで聞いてよい内容なのか悩んだのですがHTMLの事なので質問させてください。

自分だけが利用する目的のページに天気予報を貼りたかったので
<img src="https://www3.nhk.or.jp/weather/tenki/tenki_01.jpg(NHKの天気予報)">
と入力しましたが表示されません。

これはimg srcおよびHTMLでは出来ないことなんでしょうか

**Name_Not_Found** · 2023/04/02(日) 20:56:21.90

>>748
単なる画像表示をしたいのであれば、src内の最後にある
「(NHKの天気予報)」を削除して
<img src="https://www3.nhk.or.jp/weather/tenki/tenki_01.jpg";>
拡張子jpgで終わるURLに変更してみて下さい

**Name_Not_Found** · 2023/04/02(日) 21:01:57.75

>>749
あ、(NHKの天気予報)の部分はここで説明するために付け加えたもので実際にはjpg">となってます

**Name_Not_Found** · 2023/04/02(日) 21:39:48.93

稀に外部ドメインからの参照を弾いてるところもあるけど
前提条件として
画像のurlは問題ない？
別窓で画像のurl叩いて表示される？

**Name_Not_Found** · 2023/04/02(日) 22:02:54.04

>>751
ちゃんと表示されてるのでURL自体に間違いはないと思います。

**Name_Not_Found** · 2023/04/02(日) 22:13:09.92

一応、外部からでもローカルでも読み込めるけど
https://jsfiddle.net/xr2vjd16/
adblock系の機能拡張とかで弾いてるとか？
自分だけが利用する目的のページってのが、どういうものか分からんから
何とも言えないとこあるけど

**Name_Not_Found** · 2023/04/02(日) 22:13:42.81

>>748
> これはimg srcおよびHTMLでは出来ないことなんでしょうか
別人だが普通に出来るよ。
出来ないのならDevToolにエラーが出てるはずだからF12押して確認すればいいだけ。

**Name_Not_Found** · 2023/04/03(月) 00:49:04.08

>>753
拡張機能等はいれてません。

検索エンジン(search.yahooに接続するだけですが)のような感じです。

<html><head>
<meta charset="utf-8">
<title>search</title>
</head>
<body>
<form action="search.yahoo.co.jp/search">
<input size="30" name="p">
<input type="submit" value="検索">
<br>
<br>
<br>
<br>
<img src="～
以下終了タグのみなので略

**Name_Not_Found** · 2023/04/03(月) 00:51:25.18

>>755
2chの規制でURLを省いてしまい分かりにくくなってしまったので…
jsfiddle.net/zogmhs76/

**Name_Not_Found** · 2023/04/03(月) 01:20:06.49

>>755-756
閉じタグ無いけど、そのjsfiddleで問題なく表示されてるが
そっちで表示されてないなら、完全におま環

機能拡張だけじゃなくセキュリティソフト等でブロックされてる可能性は？
複数ブラウザやスマホ等でも表示されない？
デベロッパーツールで当該部分はどう表示される？

**Name_Not_Found** · 2023/04/03(月) 01:57:33.92

>>757
終了タグ省いてすいません。
jsfiddleをRunするのは表示されています。

そこまで厳しいセキュリティ入れてるつもりはないんですけどね…
確認しているブラウザはIE6、Mypal29(firefoxベースのブラウザ)です。
どちらも表示結果は同じでした。
また別のPCでも試しましたが同様でした。

デベロッパーツールは明日確認してみようと思います。

**Name_Not_Found** · 2023/04/03(月) 02:56:58.03

Mypal29はマイナーブラウザ？なのか初めて耳にしたけど
IEは流石に変えようや……

**Name_Not_Found** · 2023/04/03(月) 05:22:54.49

Mypalブラウザはfirefoxベースというかpale monnベースというか
xpでも動作するってのが売りのブラウザ…ってことは、まさかのxp使い？

Mypal - Official Website
https://www.mypal-browser.org/

試しにインスコしてみたけど、普通に表示されるのでブラウザの問題ではなさげ
よく分からんがインターネットオプションいじれば治るんじゃね？（適当）

**Name_Not_Found** · 2023/04/03(月) 08:32:36.29

つかさっさとDevTool見ろって。F12押すだけだし。

というかそれは開発手順を間違えてるよ。
お試しならDevTool上でエレメント選択して右クリックかF2でhtmlを改変するのが一番早い。
そんなことせずとも動く自信があるのなら鯖上のhtmlを改変してリロードでいいけど、
実際動いてないんだし。

ちなCSPの場合はおまサイトが原因になる。

**Name_Not_Found** · 2023/04/03(月) 13:45:40.21

www3.nhk.or.jpはTLS1.2/1.3だから自前で処理するFirefox/Pelemoon系なら行けるだろうけど
OS依存のIE6はTLS処理用の串でも通さないと見られないはずだよね

**Name_Not_Found** · 2023/04/03(月) 13:55:11.59

>>761
デベロッパー見ようと今日開いてみたら問題なく表示されてしまいました。
質問しといてですが、何が原因なのか分からずモヤモヤしています。

**Name_Not_Found** · 2023/04/03(月) 13:58:21.18

>>759
IE6がインストールできる最上のバージョンなんです。

**Name_Not_Found** · 2023/04/03(月) 14:01:50.67

>>760
作成しているパソコンはメイン利用の2000です。
不具合を確認する際に使った別のパソコンはXPを利用しました。

リンク先の画像が貼ってある
www3.nhk.or.jp/news/
では問題なく表示されてたんですよね

**Name_Not_Found** · 2023/04/03(月) 14:25:45.16

>>762
そうですね。
ただMypalで確認した際に画像が読み込めないにしても四角の中に×みたいなのが表示されてもいいと思ってたのでIE6でも確認してみました。
(IE6でも四角の中に×みたいなのは表示されてませんでした)

**Name_Not_Found** · 2023/04/03(月) 17:47:13.43

なんかよく分からんが、キャッシュ関係とか再起動すりゃどうにかなる系の不具合だったのかね
今となっては検証のしようもないけども

**Name_Not_Found** · 2023/04/03(月) 20:16:39.51

>>767
昨日はどうやっても表示されなかったので不思議です。

沢山のアドバイスをして頂いたのに検証ができずすいません。

**Name_Not_Found** · 2023/04/03(月) 22:26:50.65

>>765
身も蓋もないが環境が古すぎる…
自力でなんとかできないのに使い続けるのはちょっと厳しいよ

**Name_Not_Found** · 2023/04/03(月) 23:56:16.28

>>769
まだまだ使えますから^ ^

PCの方は自力で何とかできているので使ってます

**Name_Not_Found** · 2023/04/04(火) 01:03:38.20

XPも2000もOSのサポートが切れて10年弱だし使えるとは言い難いね
現におま環の誤動作出てるしここに質問にも来てるし
無理して使ってるだけじゃん

**Name_Not_Found** · 2023/04/04(火) 01:58:07.93

>>770
スタンドアロンならともかく、サポート切れたOSをネットに繋ぐのは皆に迷惑かけることもあるからなあ
踏み台にならないよう念入りに警戒しておいてな

**Name_Not_Found** · 2023/04/04(火) 08:20:02.07

>>770
使えてもIEは既に多くのサイトサポート対象外ですよ
セキュリティの面でも更新が続いているOS、ブラウザ環境でネットに繋いで頂きたい

**Name_Not_Found** · 2023/04/04(火) 13:22:34.85

特にこのスレには、使えるからといって化石を使い続ける残党のせいで
苦しめられてきた人が多いしなぁ
やっとIEのサポート切れて、たいぶ解放された感あるけど