X



HTML/CSS のどんな質問に必ず優しく答えるスレ 32
0001Name_Not_Found
垢版 |
2018/02/25(日) 17:27:17.09ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。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
0678Name_Not_Found
垢版 |
2022/09/23(金) 16:23:28.92ID:???
flexは使っちゃダメなの?
0679674
垢版 |
2022/09/23(金) 16:46:09.86ID:???
>>678
駄目ではないけど、使っても無理じゃね?
なおブラウザはchorome49以降(WindowsXP以降)、IEは不要。
よってgridはNG。

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

が、まあ、flexやこの際HTML構造も多少は変更していい(div追加とか)から割と単純な解があれば募集する。
それを実際に使うかはまた別になるが。
0680Name_Not_Found
垢版 |
2022/09/23(金) 17:06:14.69ID:???
XPは2014年4月9日にサポート終了してるのに
まだ対応必要なの?
0681674
垢版 |
2022/09/23(金) 17:11:11.82ID:???
>>680
それ以前に、最新ブラウザやgridなら出来るとかでもないのだから、外す意味がないだろ。
0682674
垢版 |
2022/09/23(金) 17:36:14.48ID:???
ちなみにもうちょっと補足すると、大量にサムネが用意されたときに、
敷き詰めて、可能であればそれを中央揃えで表示したいと思ってる。

(余白)11111122(余白)
(余白)11111122(余白)
(余白)11111133(余白)
(余白)11111133(余白)
(余白)44556677(余白)
(余白)44556677(余白)

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

なお敷き詰め後にcontainerのwidthを手動で与えてしまえば、中央揃えにはなるが、
window.getComputedStyleで得られる値は空白込みなので、
やるにしてもJS側で幅をちゃんと計算しないといけない。(と言うほど難しくもないが)
今のところこれは面倒なのでやらないつもり。(左詰で妥協)
0683Name_Not_Found
垢版 |
2022/09/23(金) 17:56:05.01ID:???
flexで中央寄せした要素の中にfloatで詰めていけばいいんじゃないの、しらんけど
0684Name_Not_Found
垢版 |
2022/09/23(金) 18:47:38.11ID:???
今あるコンテナの内か外にコンテナ追加して寄せれば?
・・・と思ったけど条件大杉で無理って言われそう
0685674
垢版 |
2022/09/23(金) 20:44:06.06ID:???
>>683
やってみたが同様に駄目だ。
おそらく原因は同じで、floatで詰めたときのコンテナ幅が『右側の空白を含んだ状態で』親と同じ幅になるからだ。
だからブラウザからすると、ちゃんと「右側に空白があるblockを中央寄せ」している事になってしまう。
試した内容は以下。

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

>>684
外側は元々階層があるからコンテナモドキになってるが、flexで試したら上記の通り。
他に案がある?
あと、内側ってのの具体案は?
0686674
垢版 |
2022/09/23(金) 20:44:51.77ID:???
ちなみにただのinlineだと中央揃えにはなるが右下を埋めてくれない。
具体的には以下。


欲しいもの

(余白)111122(余白)
(余白)111122(余白)
(余白)111133(余白)
(余白)111133(余白)


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

(余白)111122(余白)
(余白)111122(余白)
(余白)1111
(余白)1111
(余白D)33(余白D)
(余白D)33(余白D)
0687Name_Not_Found
垢版 |
2022/09/23(金) 20:55:20.06ID:???
その手のはgridが一番楽なんじゃないの
その次にflexで都度divか何かで囲っていく
0689Name_Not_Found
垢版 |
2022/09/23(金) 21:06:47.41ID:???
文字で書かれると目が滑るし数字の意味が分からん
図で書こうや
0690674
垢版 |
2022/09/23(金) 21:31:58.77ID:???
>>687
使った事無いが、MDN読む限り、gridは基本的にgrid上に配置したい場合で、
大きさがデタラメな物を左上から埋める用途ではない気がするけど。
(gridは自分でレイアウトを細かく指定したい場合向け)

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


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


まあ今一応gridも試してるが、やっぱりgridは「グリッドに載せる用」に見える。
(初めてなので使い方間違ってるかもだし、もうちょっとあれこれ試してみるけど)
0692674
垢版 |
2022/09/23(金) 21:47:12.23ID:???
>>689
5chだと無理だろ。罫線書いてもずれるし。
同じ数字は同じサムネイルだと思えば分かりやすいと思うが。

11111111
11111111

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

11
11
11
11

は縦に細長い1枚のサムネイル。
0693674
垢版 |
2022/09/23(金) 21:57:54.17ID:???
>>687
ちなみにgrid試したが、
auto-fillでもサムネ幅で勝手に埋めてくれるのではなく、
あくまでこちらが指定した幅のgridに載るだけのように見える。
(まだgrid初心者なので根本的に間違ってるかもだが)


>>688
ちなみにそのサイト確認したが、全部flexで、しかも子にもflex指定で、単なるblock扱いで埋めてるだけだな。
最初からcolspanやrowspanが分かっててそれ専用のHTMLを生成しているように見える。
何か知らんがおそらくフレームワークで吐き出してる感じ。
今回の俺の件にはこの手法は無理だ。
0694674
垢版 |
2022/09/23(金) 22:21:09.79ID:???
>>691
基本的にそんな感じ。
ただ、その例は4列に綺麗に入る(ように調整されている)が、こちらはデタラメな大きさなのが違う。

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


ただまあ、その例もgrid使いながらJS併用なら、CSSだけではきついのかな?
まあgridがどこまで出来るものか知らないから、
その例見てもどの部分をJSで補完してるのかピンと来ないのだけども、
微妙にrowがズレてるのも綺麗に埋めてるよ!という意味なら、それで当たりだ。
0695Name_Not_Found
垢版 |
2022/09/23(金) 22:26:34.68ID:???
Masonryレイアウトてやつ?
0696674
垢版 |
2022/09/23(金) 22:53:13.51ID:???
>>691
>>695
つかこれって名前が付くほどの超定番レイアウトなのか?
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
ただこれ(MDN)見る限り、行内で一番大きい物に合わせてるだけで、縦には詰め込んでないので、

{display:inline; vertical-align:top}

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



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

111111122
111111122
111111133
111111133
111111144
111111144

みたいに表示されるのと同じ事をやろうとしてるだけ。
(ただし大きさはデタラメなので綺麗には埋まらないが、それは仕方ない)
0697674
垢版 |
2022/09/23(金) 22:58:01.01ID:???
すいません696のこの部分撤回します。

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

こちらの環境の問題のようで、MDNに書いてるとおり、configして見直します。
0698Name_Not_Found
垢版 |
2022/09/23(金) 23:21:09.50ID:???
>>691は配布サイトだよ
配布されてるjsを使ってサイズ違いのものを
感覚的にタイル上に縦横の余白調整してくれるの
0699Name_Not_Found
垢版 |
2022/09/23(金) 23:58:27.35ID:rcp605hn
すいません
スレ違いかもしれませんが…
「CGIの動作が可能なHTTPD」ってどういうことですか?
0700674
垢版 |
2022/09/24(土) 00:51:42.72ID:???
>>698
それは理解している。
ただそういう場合は大体「これを使ったらこんな事が出来ますよ!」と分かるようにしていて、
実際そのページトップのデザインがそうなってる。


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

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

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

今のところfloatで左詰のまま妥協するか、
或いはfloatだと実際の所綺麗には埋まらないので、
それがあまりに見にくければ、どうにかしてmasonry的にするか、という感じ。
(とはいえサムネが2枚以下の場合はfloatでもおかしくなりようもなく、大半の記事はそうなので、そんなに目立たない)
皆さん色々ありがとう。
0701Name_Not_Found
垢版 |
2022/09/24(土) 01:03:41.19ID:???
こう書くのが正しいっつってコードの書き方に拘ったところで、見る人からすると
「あぁ、サムネ左に寄ってんな」で終了だけどな
0702674
垢版 |
2022/09/24(土) 01:31:36.45ID:???
>>701
まあ気にしない人はそうね。
俺もそうだが、気にする人は気にするんだよ。

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

682のとおり、JSでの対応は面倒なだけで難しくはないので、
俺もこんなノリだと首にされるのだろうなと思いつつ、どうするかなという感じ。
ただ、全体が中央揃えで、一個だけ左詰めだと、何これ?とはなるんだよね。
それでいちいち「バグですか?」と聞かれてもウザイし。
0703674
垢版 |
2022/09/24(土) 01:33:17.20ID:???
ごめん、702は書き方が曖昧だった。俺は気にしない派ね。
まあどうでもいい話だとも思うが。
0704Name_Not_Found
垢版 |
2022/09/24(土) 01:59:10.29ID:???
サムネのサイズをcssなり書き出しサイズなりで統一するのが
ソースも視覚的な見栄えも良くなりそうって思いましたこなみかん 
0705674
垢版 |
2022/09/24(土) 02:18:59.12ID:???
>>704
その通りだけど、外部ソースを読むのでそこはどうにもならん。


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


ちなみによくよく考えれば2枚の時はデフォのinlineで結果的にも全く問題なかったので、
floatじゃないと埋まらないのは3枚以上の時であり、674で :only-child 使ってるのも間違いだったわ。
0706Name_Not_Found
垢版 |
2022/09/24(土) 02:25:03.61ID:???
>>699
CGIが動作可能な状態に設定されたWebサーバ
0708Name_Not_Found
垢版 |
2022/09/24(土) 13:53:07.39ID:???
>>707
coverは切り取られるので使い物にならない。
使うとしたらcontainかscale-downなのだけど、object-fitはそもそも外形を維持してしまうので、詰め込みは出来ない。
0709Name_Not_Found
垢版 |
2022/09/24(土) 20:10:14.04ID:+zwbCZte
この板にカキコしていいかわからんけど、昔なつかしホームページを作りたい。
いまは、htmlを頑張って調べながら作っている状況だけど
90年代後半、2000年代前半のホームページあるあるを教えてください!
たとえば、アクセスカウンターみたいな・・・・。
できれば、昔なつかしデザインが残っている老舗ホームページのリンクもほしい。
0711Name_Not_Found
垢版 |
2022/09/24(土) 20:58:13.51ID:???
>>709
まんまググれば実例がたくさん出てくる
スレの主旨から外れてるので、作る段階での疑問が出てきてからまたどうぞ
0712Name_Not_Found
垢版 |
2022/09/27(火) 20:30:11.45ID:???
fieldset をMDNで見ると
>フォーム内のコントロールをグループ化するために使用します。
とありますが、記事本文で吹き出しのような枠の使い方は本来の使い方と反れますか?

<fieldset>
 <legend>タイトル</legend>
 本文
</fieldset>
0714Name_Not_Found
垢版 |
2022/09/27(火) 23:31:27.64ID:???
それだとCSS1行で目的達成できるので
でももうdivにしました
0715Name_Not_Found
垢版 |
2022/09/28(水) 03:50:29.01ID:???
>>709
その時代だとフレームやテーブルでレイアウトは基本だなw
アクセスカウンターや掲示板とかMIDIのサウンド鳴らしてうざがられるとか
0716Name_Not_Found
垢版 |
2022/09/28(水) 07:39:48.39ID:XJttU28j
こんなふうに、入力したら動いてくれるタグとかってないでしょうか。
うまく説明することができず、申し訳ないですがリンクのように予め入力した時間に
電車アイコンが動くようにしたいです。
速度がだんだん早くなるとかそういうのはいらないので駅についたら泊まる、駅間は動く
という感じだけで構わないですから、どういう言語またはどのようにググればいいのか教えて下さい
https://loo-ool.com/rail/SI/38/
0717Name_Not_Found
垢版 |
2022/09/29(木) 16:40:08.55ID:???
>>716
アイコン要素にCSS transition仕込んどけば、飛び先の座標を指定すると勝手に動くよ
どの時間にどの座標に居るかはJavaScriptでよきにはからって

必要な知識はCSS Positioning, CSS Transition, JavaScriptでの要素取得かな
0719Name_Not_Found
垢版 |
2022/09/29(木) 18:00:35.91ID:???
>>718
こんなのあったのか
未確認だけどiOSの挙動にも対応してるのかな?
してたらいいな
0720Name_Not_Found
垢版 |
2022/11/16(水) 17:43:53.81ID:H0+PC0k5
CSSについての質問です
例えば
p {
color: red;
}
というのがあったとしますが
p {color: red;}
これではダメなのですか?
0721Name_Not_Found
垢版 |
2022/11/16(水) 17:45:49.15ID:???
ダメ!そういう記述じゃ管理しにくいでしょ
0722720
垢版 |
2022/11/16(水) 19:43:19.47ID:H0+PC0k5
>>721
すいません、そこについて詳しくお願いします

機能的には問題なく動作するということでok?
0723Name_Not_Found
垢版 |
2022/11/16(水) 20:21:58.09ID:???
>>722
721ではないが、そう。文法的には問題ない。
ただ、ネット帯域をケチりたいのなら、適当にググって出てくるminifierを使って限界まで詰めたほうがいい。
0724Name_Not_Found
垢版 |
2022/11/16(水) 21:51:03.49ID:???
>>720
ぜんぜん問題ないよー
記述属性多いとは探しにくくなるけど、行数は節約できて一覧性は上がるね
0725Name_Not_Found
垢版 |
2022/11/16(水) 22:21:58.39ID:???
今の時代にCSSの記述で詰めて帯域ケチるとかあんの?
0726Name_Not_Found
垢版 |
2022/11/16(水) 22:35:11.25ID:???
SCSS使ってるから可読性の為にわざわざ余白やコメント残す必要無いし
CSSにコンパイルする時に自動的に余白は削れるようにしてるわ
0727Name_Not_Found
垢版 |
2022/11/16(水) 23:13:34.35ID:???
>>725
地味に効くし、技術的にはやらない理由はないし、実際大きいところはほぼやってると思うよ。
自分が参考にしてるサイトを確認してみればいい。
0728Name_Not_Found
垢版 |
2022/11/16(水) 23:50:35.66ID:???
>>727
レギュレーションで決まってたりするしね
0730720
垢版 |
2022/11/17(木) 17:37:46.63ID:Y+4HTSfN
>>723-729
ありがとうございます

機能的には問題ないのですね。
記述属性が多いと探しにくいとはどんな場合ですか?
0731Name_Not_Found
垢版 |
2022/11/17(木) 17:58:59.40ID:???
>>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; }

最終のミニファイはツールに任せればいいので、見やすさとメンテのしやすさ基準で使い分ければいいんでない
0732Name_Not_Found
垢版 |
2022/11/27(日) 20:26:49.06ID:u3mPJfN3
<h1>あかさたなはま</h1>
これに外部CSSファイルの
{margin-bottom: 0px;}
を適用させたいのですがどうすればいいですか?
0734Name_Not_Found
垢版 |
2022/11/27(日) 20:55:27.26ID:zK8OILpg
>>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。

※stylesheet01.cssにはh1以外にh2などへの記述もしてます。
0735Name_Not_Found
垢版 |
2022/11/27(日) 20:57:39.66ID:VYL5yHZn
>>733
あ、すいません。
全くの言葉足らずでした。
h1{
margin-bottom: 0px;
}
を書いたstylesheet01.cssってのがあったとして
これをhtmlに適応させる方法を聞きたかったです。

※stylesheet01.cssにはh1以外にh2などへの記述もしてます。
0736Name_Not_Found
垢版 |
2022/11/27(日) 21:00:23.50ID:???
<link rel="stylesheet href="(path to stylesheet)/stylesheet01.css" />
を<head>内に記述
0737Name_Not_Found
垢版 |
2022/12/04(日) 22:42:19.72ID:fcM5zgOa
"ページ全体に背景グラデーションを掛ける"方法が参考書に記載されていて
疑問があります(参考書には何故そうなのか理由がなかったので....)

<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>
0738Name_Not_Found
垢版 |
2022/12/04(日) 22:49:10.32ID:fcM5zgOa
<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%;"でも同く途切れずグラデーションが適用されす。
その理由が参考書や調べてもわかりません。
0739Name_Not_Found
垢版 |
2022/12/04(日) 23:05:46.43ID:???
ブラウザの表示高より長いページで違いが出る
0740Name_Not_Found
垢版 |
2022/12/04(日) 23:12:12.12ID:fcM5zgOa
>>739
早速のレス、ありがとうございます。
もう少し具体的に解説して頂けないでしょうか?
自分のブラウザ(chrome)だと、"min-height: 100%;"も"height: 100%;"も
同じ表示結果になります。
0741Name_Not_Found
垢版 |
2022/12/05(月) 01:33:40.54ID:???
>>740
.contentにheight:150vh;を追加してみると違いが分かりやすいよ
0742Name_Not_Found
垢版 |
2022/12/05(月) 04:42:22.33ID:/BQ72wR4
>>741
あっ!本当だ....
"height: 100%;"だと途切れ、"min-height: 100%;"だと途切れません。
これは何故、"height: 100%;"だと途切れるのでしょうか?

自分の見解ですと、"height: 100%;"だと画面(ブラウザ)の大きさに対して
100%の高さが表示されるからだと思いました。
ずっと考えて眠れず今の時間まで考えました。
0743Name_Not_Found
垢版 |
2022/12/07(水) 08:22:47.62ID:???
「css height min-height 違い」で検索!
0745Name_Not_Found
垢版 |
2022/12/09(金) 02:55:09.85ID:???
すごく正しいようで間違ってる答えが量産されるってのはこういうことか
0748Name_Not_Found
垢版 |
2023/04/02(日) 20:33:44.83ID:9BBsnBBH
ここで聞いてよい内容なのか悩んだのですがHTMLの事なので質問させてください。

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

これはimg srcおよびHTMLでは出来ないことなんでしょうか
0750Name_Not_Found
垢版 |
2023/04/02(日) 21:01:57.75ID:9BBsnBBH
>>749
あ、(NHKの天気予報)の部分はここで説明するために付け加えたもので実際にはjpg">となってます
0751Name_Not_Found
垢版 |
2023/04/02(日) 21:39:48.93ID:???
稀に外部ドメインからの参照を弾いてるところもあるけど
前提条件として
画像のurlは問題ない?
別窓で画像のurl叩いて表示される?
0752Name_Not_Found
垢版 |
2023/04/02(日) 22:02:54.04ID:???
>>751
ちゃんと表示されてるのでURL自体に間違いはないと思います。
0753Name_Not_Found
垢版 |
2023/04/02(日) 22:13:09.92ID:???
一応、外部からでもローカルでも読み込めるけど
https://jsfiddle.net/xr2vjd16/
adblock系の機能拡張とかで弾いてるとか?
自分だけが利用する目的のページってのが、どういうものか分からんから
何とも言えないとこあるけど
0754Name_Not_Found
垢版 |
2023/04/02(日) 22:13:42.81ID:???
>>748
> これはimg srcおよびHTMLでは出来ないことなんでしょうか
別人だが普通に出来るよ。
出来ないのならDevToolにエラーが出てるはずだからF12押して確認すればいいだけ。
0755Name_Not_Found
垢版 |
2023/04/03(月) 00:49:04.08ID:AzsXWjAV
>>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="〜
以下終了タグのみなので略
0756Name_Not_Found
垢版 |
2023/04/03(月) 00:51:25.18ID:AzsXWjAV
>>755
2chの規制でURLを省いてしまい分かりにくくなってしまったので…
jsfiddle.net/zogmhs76/
0757Name_Not_Found
垢版 |
2023/04/03(月) 01:20:06.49ID:???
>>755-756
閉じタグ無いけど、そのjsfiddleで問題なく表示されてるが
そっちで表示されてないなら、完全におま環

機能拡張だけじゃなくセキュリティソフト等でブロックされてる可能性は?
複数ブラウザやスマホ等でも表示されない?
デベロッパーツールで当該部分はどう表示される?
0758Name_Not_Found
垢版 |
2023/04/03(月) 01:57:33.92ID:AzsXWjAV
>>757
終了タグ省いてすいません。
jsfiddleをRunするのは表示されています。

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

デベロッパーツールは明日確認してみようと思います。
0759Name_Not_Found
垢版 |
2023/04/03(月) 02:56:58.03ID:???
Mypal29はマイナーブラウザ?なのか初めて耳にしたけど
IEは流石に変えようや……
0760Name_Not_Found
垢版 |
2023/04/03(月) 05:22:54.49ID:???
Mypalブラウザはfirefoxベースというかpale monnベースというか
xpでも動作するってのが売りのブラウザ…ってことは、まさかのxp使い?

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

試しにインスコしてみたけど、普通に表示されるのでブラウザの問題ではなさげ
よく分からんがインターネットオプションいじれば治るんじゃね?(適当)
0761Name_Not_Found
垢版 |
2023/04/03(月) 08:32:36.29ID:???
つかさっさとDevTool見ろって。F12押すだけだし。

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

ちなCSPの場合はおまサイトが原因になる。
0762Name_Not_Found
垢版 |
2023/04/03(月) 13:45:40.21ID:???
www3.nhk.or.jpはTLS1.2/1.3だから自前で処理するFirefox/Pelemoon系なら行けるだろうけど
OS依存のIE6はTLS処理用の串でも通さないと見られないはずだよね
0763Name_Not_Found
垢版 |
2023/04/03(月) 13:55:11.59ID:MNDqoGm6
>>761
デベロッパー見ようと今日開いてみたら問題なく表示されてしまいました。
質問しといてですが、何が原因なのか分からずモヤモヤしています。
0764Name_Not_Found
垢版 |
2023/04/03(月) 13:58:21.18ID:MNDqoGm6
>>759
IE6がインストールできる最上のバージョンなんです。
0765Name_Not_Found
垢版 |
2023/04/03(月) 14:01:50.67ID:MNDqoGm6
>>760
作成しているパソコンはメイン利用の2000です。
不具合を確認する際に使った別のパソコンはXPを利用しました。

リンク先の画像が貼ってある
www3.nhk.or.jp/news/
では問題なく表示されてたんですよね
0766Name_Not_Found
垢版 |
2023/04/03(月) 14:25:45.16ID:MNDqoGm6
>>762
そうですね。
ただMypalで確認した際に画像が読み込めないにしても四角の中に×みたいなのが表示されてもいいと思ってたのでIE6でも確認してみました。
(IE6でも四角の中に×みたいなのは表示されてませんでした)
0767Name_Not_Found
垢版 |
2023/04/03(月) 17:47:13.43ID:???
なんかよく分からんが、キャッシュ関係とか再起動すりゃどうにかなる系の不具合だったのかね
今となっては検証のしようもないけども
0768Name_Not_Found
垢版 |
2023/04/03(月) 20:16:39.51ID:???
>>767
昨日はどうやっても表示されなかったので不思議です。

沢山のアドバイスをして頂いたのに検証ができずすいません。
0769Name_Not_Found
垢版 |
2023/04/03(月) 22:26:50.65ID:???
>>765
身も蓋もないが環境が古すぎる…
自力でなんとかできないのに使い続けるのはちょっと厳しいよ
0770Name_Not_Found
垢版 |
2023/04/03(月) 23:56:16.28ID:MNDqoGm6
>>769
まだまだ使えますから^ ^

PCの方は自力で何とかできているので使ってます
0771Name_Not_Found
垢版 |
2023/04/04(火) 01:03:38.20ID:???
XPも2000もOSのサポートが切れて10年弱だし使えるとは言い難いね
現におま環の誤動作出てるしここに質問にも来てるし
無理して使ってるだけじゃん
0772Name_Not_Found
垢版 |
2023/04/04(火) 01:58:07.93ID:???
>>770
スタンドアロンならともかく、サポート切れたOSをネットに繋ぐのは皆に迷惑かけることもあるからなあ
踏み台にならないよう念入りに警戒しておいてな
0773Name_Not_Found
垢版 |
2023/04/04(火) 08:20:02.07ID:???
>>770
使えてもIEは既に多くのサイトサポート対象外ですよ
セキュリティの面でも更新が続いているOS、ブラウザ環境でネットに繋いで頂きたい
0774Name_Not_Found
垢版 |
2023/04/04(火) 13:22:34.85ID:???
特にこのスレには、使えるからといって化石を使い続ける残党のせいで
苦しめられてきた人が多いしなぁ
やっとIEのサポート切れて、たいぶ解放された感あるけど
0775Name_Not_Found
垢版 |
2023/04/04(火) 23:32:33.79ID:MvPv+Bp7
>>770
自分もまだ2000使ってる

8以降のOS嫌いなんだよね
0776Name_Not_Found
垢版 |
2023/04/05(水) 21:49:04.22ID:???
こりゃまたとんでもない糞爺が出てきたな。
勝手にしろとしか言えない
0777Name_Not_Found
垢版 |
2023/05/21(日) 01:46:06.93ID:8x3puaut
HTMLの話と言いますかテキストエディタの話といいますか
スレチでしたらスレチとお願いします
便利と言われているVSCODEを使っています
https://i.imgur.com/TRcxf3L.jpg
今回事前にメモに書いてそれをテキストエディタに貼り付けて清書しているのですが、段落の<P>を初めとしたコードの入力が不便すぎて解決方法を知っていたら教えていただきたいです。
1 既存文の行頭や文章間でコードを入れても判断してもらえない
2 コードが勝手に閉じる(任意でオンオフしたい)
という感じです。

ブログサイトの自動変換では余計なコードが多く文字数が超過してしてしまい投稿できないので自分で打つようにしました
0778Name_Not_Found
垢版 |
2023/05/21(日) 02:47:57.09ID:???
ショートカットを覚えて駆使してけば良さそうに見えるけど
vscodeの使い方ならvscodeのスレあるよ
レスを投稿する


ニューススポーツなんでも実況