HTML/CSS のどんな質問に必ず優しく答えるスレ 31
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/
■関連スレ
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 質問です！
Mixiのようなコミュニティサイトを作るには
HTML CSSはどの程度理解していればよいでしょうか？ >>772
スレ違いな者に丁寧な回答ありがとうございましたm(_ _)m感謝です！ HTML5で
sectionやarticleごとにH1タグが必須なのでしょうか？ CSS Grid Layoutで、セル単位で背景色を設定する方法はありますか？
グリッドコンテナやグリッドアイテムはHTML要素なので背景色を設定することは出来ますが
セルに設定することは出来ない気がします
グリッドアイテムをセル全面にして、グリッドアイテムに背景色を持たせるとかしないと無理でしょうか？ >>777
HTML Standardでvalidであるかどうかで考えればいらない
でもGoogle先生のご機嫌とるためには
セクションの頭には見出しがほしい
んで見出しレベルの高さは、セクションの高さと相談して考えるのがよろし IE11でfilter, mask, clip-pathは使えるんですかい？ Gecko寄りのスレがあるのかもしれませんが、
input type="number" の上下ボタンは、-moz-appearance:textfield で消せるようですが、
input type="date" の×ボタンは、消せないのでしょうか？
requiredで必須にしても消せちゃう(泣)
海外のサイトでclip-pathで消しているのを見付けましたが、無理矢理感が強い あのさー、
ニュースサイトとかなんだけど、
ページ開いてから、文がちょっとしか書いてなくて、
もう一回「続きを読む」を押すとか、やめてくんねーかな。
1回クリックしたら、一発で記事読めるようにしろや。
記事なんて、ザッとあっという間に読んじゃうんだからさ、2度手間取らせんなよ。
ほんとに腹立つな！！！！！！ >>777
セクション毎にh1つけてたアホがhtml5.1になって涙目なのしらないの？ >>784
わかるわ〜
クソ重いサイトに限ってよくやってる
もう二度と行かない そんなことよりやたらとアプリ版のインストールを促してくるサイトがムカつく
酷いのだとアプリじゃないと続き読めなかったりするし Chromeがcol要素にmin-widthを受け付けてくれん
IE11なら動いてくれるんだが
どっちが正しい挙動なの？
ぶっちゃけcol要素いりますかね？列ごとにまとめて指定できるようなフリして全然できねーし SNSのごり押し強いところも腹立つ
やたらでかいボタンで本文隠れててスクロールしないと読めない
酷いとこはページ開くと先ずSNSのサブウィンドウが出てOKしないと読めない
そんなとこは当然ウィンドウ（タブ）即クローズ デザインの話はデザインのスレでしろ
ここはHTMLとCSSのスレだ いんじゃねたまには？ユーザビリティや仕様、挙動は関係ない話でもないし センスあるプロの人かわいいデザインのＣＳＳつくって
header nav section article footer
h1 h2 ul a
ぐらいでいいので かわいいって意味がわからん
かっこよさやきれいさはデザインでだせるけどかわいさは画像使わないと無理じゃね 意訳：”私が”かわいいと思うデザインを予想して作って >>797
できるプロの人にきいてるんで
できないならだまっててくれませんか ドロップダウンメニューは入れ子にしたulで実現するのがセオリーだと思いますが
メインメニューの項目が一つしかない場合には
ulを使うのは不自然だと思います
ulの代わりに使うタグは何がいいですか？ 達人が集うインターネットがあると聞いてやってきました。
デジカメで撮ってもらった画像をhtmlからリンクさせ、ブラウザで閲覧できるようにしたいです。
<img src="test.png">
で表示させたいのですが、画像が表示されません。
・撮ってもらった画像以外は表示されるので、単純なリンクミスはないと思います。
・撮ってもらった画像以外は表示されるので、タグのミスもないと思います。
・画像のプロパティを確認する限り、拡張子も.pngになっています。
・.jpg形式で保存しなおしても表示されませんでした。
・画像は画像ビュアーでは閲覧できますし、windows付属のペイントでも閲覧・編集できます。
・画像をwindows付属のペイントで編集したものとgimpで編集したものをそれぞれ.pngで保存し直していますが、それでもhtmlからリンクさせブラウザで確認すると表示されません。
・テストはローカル環境で行い、F5も押しているので更新遅れのようなものもないと思います。
もうお手上げなのですが、撮ってもらった画像をブラウザ上で表示させるにはどうしたらいいんでしょうか？ 質問があります。
掲示板のようにどんどん文字を追加していって、それを保存していく技法はjavascripですか？ >>802
閲覧者だけのコメントならjavascriptでもできますけど、
他人のコメントも、ということならサーバサイドのスクリプトかデータベース使うとできますよ >>801
追記
画像サイズは80KBくらい。
ブラウザへURLを直接入力すると画像が表示される。
誰か教えてください！！ >>804
メイン項目が一つの時はリストではないので。
見た目はセレクトボックスみたいになりますが
アイテムの字数によってサイズが伸び縮みしない点がselect要素とは異なります
クリックするとメニューが表示されるので、button要素かな？とか思いますが >>806のいい例がありました
amazonの検索窓の、カテゴリー選択の部分です
この部分の幅は、現在選択されているカテゴリーにのみ規定されて、
最長の選択肢に規定されているわけではありません >>801
まずはブラウザに直接
http://画像のパス
で表示されるか試してみて
>>802
やり方はいろいろあるけど自然なのは
追加する文字を送るのは HTML <form> で
うけとってサーバーに保存するのは CGI っていうサーバーサイドのプログラム ブラウザに直接画像のパスを入力すると表示されて、その直接のパスをコピーして
<img src="画像の直接のパス">
しても表示されません！！
もうわけがわかりません！！ >>811
<a href="画像の直接のパス">hoge</a>
とかして、パスの問題なのかそれ以外の問題なのか切り分けてみては httpステータスにはなにが返ってくるか見るほうがはやいか >>812
ありがとうございます！！
<a href="画像へのパス">てすと</a>
でやってみましたが、
・表示される画像の場合はクリックすると画像へ飛ぶ
・表示されない画像は絶対パスでも早退パスでも画像へ飛ばない
・表示される画像と表示されない画像は同一フォルダに保管されている
こんな感じです！！
一歩前進した気がしますがやっぱりわけがわかりません！”！ <a href="画像への絶対パス">テスト</a>
を右クリックしてリンクをコピーしてブラウザへペーストすると画像は表示されます！！
やっぱり単純なミスはない気はします！！！ >>816
たぶんはいってません！！
1個目のPCでEdgeとIEで今までのような挙動でした！！
2個目のPCでIEで1個目のPCと同じ挙動でした！
しかしchromeでは「ファイルがみつかりませんでした」というメッセージがでます！！
これは<a href="画像へのパス">テスト</a>
でも、ブラウザへ絶対パスを打ち込んでも同じです！！
画像に何かされているんでしょうか？？？ >>807
質問目的やりたいことを整理しよう
1. タグとしてどちらが適切なのか
ulでも不自然はない
2. 見た目をどうしたいのか
例えば複数の項目だとする
ulなら接した方が自然で、selectなら離して設置する
が、もっと具体的に書いてくれないと何ともいえない
button要素ならulなりが必要だろう
そのクリックする部分は何が書いてある？ >>818
よくわかりませんがローカル環境で絶対パスと相対パスと両方でやっています！！
諦めてカメラで撮った画像を模写して描いたデータは表示されました！
模写を頑張ればなんとかなりそうですがこんなアナログな解決方法いやです！！ >>820
もしかしてカメラのRAW画像？
縦横のサイズが大きすぎるとかない？
それと一旦試してみって欲しいのが、photoshopなどのソフトで
一旦web用書き出して保存し直してみてほしい。
それとこの画像を一度、自分のPCにダウンロードしてみて
https://s.yimg.jp/images/top/sp2/cmn/logo-170307.png
その写真をUPした時と同じ手順でUPするとちゃんと表示されるか試してみて。 カメラの画像です！
大きさは700px × 400pxくらいなので大きすぎもしない気がします！
photosyopはカメラで撮ってもらった人にやってもらったので持ってません！
ヤフーの画像はhtml上でも表示されました！！
フォトショップのせいなんでしょうか？？ すみません、レスもらえてうれしすぎて名前欄とアンカーと間違えました！！
>>821
カメラの画像です！
大きさは700px × 400pxくらいなので大きすぎもしない気がします！
photosyopはカメラで撮ってもらった人にやってもらったので持ってません！
ヤフーの画像はhtml上でも表示されました！！
フォトショップのせいなんでしょうか？？ Web APIの仕様書で
URL：/xxx_get
とあるものは、ブラウザのURLに/xxx_getをつければ値が返ってくるのですが、
URL：/xxx_set
Request：cmd={xxx_no}&id={xxx_id}
とあるものは、どうやってアクセスすればよいのでしょうか？
ド素人の質問で恐縮ですが教えて下さい。 >>815と>>817で矛盾したこといってないか？
<a href="画像への絶対パス">テスト</a>
を右クリックしてリンクをコピーしてブラウザへペーストすると画像は表示されます！！
しかしchromeでは「ファイルがみつかりませんでした」というメッセージがでます！！
これは<a href="画像へのパス">テスト</a>
でも、ブラウザへ絶対パスを打ち込んでも同じです！！
ブラウザへコピーってＵＲＫＬをコピーしてとんでるって意味ではないのか？ >>825
HTTPのスレが見当たらないんですよね。
JavaScriptのスレで質問したら、JavaScriptではないと言われたので、こちらに質問しました。 Web API ってのは特定のプロトコルをさす固有名詞じゃないんで
具体的に何の Web API なんかわからんと答えようがない
Request：cmd={xxx_no}&id={xxx_id} って表示させてるのは何なの？
httpのgetでいいなら
/xxx_set?cmd={xxx_no}&id={xxx_id}
あたりでアクセすできるだろうから試してみるといい
postならブラウザ上だけでは無理だし
80番をつかってるだけでhttpですらない可能性もある >>828
すみません、業務で扱っているもので、何のWeb APIなのかは具体的に言えないのです。
そのため質問も分かりづらくて申し訳ないです。
説明不足でした、httpのPOSTです。xmlで返ってきます。
サンプルがありまして、jqueryを読み込んでいて、scriptタグの中に以下の記述があります。
function xxx_setup(id) {
$.ajax({
type: "POST",
url: "cgi/xxx",
data:"cmd=1&id="+ id
});
}
このようなHTMLファイルをつくることと、ブラウザからアクセスすることの結びつきが分かりません。
ファイルにRequestの内容を記述するのなら、ネットワークアドレスを記述しないと宛先が分からないのでは？と思います。 >>826
IEとEdgeではブラウザに画像の絶対パスを直打ちで画像が見られるんです！！
ところが、chromeで同じことをすると、ファイルが見つからないと言われるんです！！ 勉強ならともかく、さすがに画像のアップローダーは今時アホらしくて自作する気にならん
グーグル先生には敵わないよ >>831
tesuto.png
tesuto.jpg
にしてます！半角小文字の英語です！ >>821
photosyopはもっていませんが、gimoとペイントで保存しなおしてますがだめです！！
ヤフーの画像と同じようにアップロードしたいところですが、ローカル環境でやっているのでアップロード作業がないです！！
うすうす画像の問題なきがしてきたのですが、ここにいてもいいんでしょうか？？？ >>834
タグ云々関係なく、画像をブラウザにドラッグ＆ドロップして表示する？ >>835
すみません、やり方がよくわかりません！
ブラウザへのショートカット、ブラウザのURL入力窓、ブラウザのサイトが表示される場所、メニューバー
全部にドラッグ&ドロップしましたが、>>821のヤフーの画像も表示されません！！ >>836
セキュリティーツールやプラグインで画像へのアクセスを遮断してないか確認してみて >>801
一番手っ取り早いのが、その画像ファイルをどっかにUPしてくれれば
ここの回答者が実際検証できるし、photoshopで書き出し直してもあげられる。
FTP環境が無いなら、こういうアップロダとかかなあ・・
https://dotup.org/
ちなみにそれ、画像掲示板にUPするとどうなるんだろうな？ >>801
そもそも、HTMLと画像ファイルが、同じディレクトリにあるのか？
まず、同じ所にあることを確かめる
同じ場所にあるなら、相対パス付きで書けば？
<img src="./test.png">
./ をつける。ドットはカレントディレクトリ。
HTMLから見て、HTMLのあるディレクトリを表す
それか画像を何かのアプリで開いていて、ブラウザからアクセスできないとか、
Chrome が以前の画像をキャッシュして、表示しようとしているとか
異なるドメインにはアクセスできないとか、CORS。
Ajax で、サーバーを立てていないから、ローカルファイルにアクセスできないとか
基本的に、サーバーを立てていないと、開発できない。
ブラウザはサーバー経由で、HTMLをもらうのが前提だから。
初心者は、サーバーが無くても動くと、勘違いしてる
ローカルのファイルをHTML上で表示させたい
https://teratail.com/questions/28389 >>829
function xxx_setup(id) {
$.ajax({
type: "POST",
url: "cgi/xxx",
data:"cmd=1&id="+ id
});
}
例えば、xxx_setup(5); と関数の引数に、5 を渡せば、data:"cmd=1&id="+ 5 になるから、
URL の最後に、クエリ文字列、cmd=1&id=5 がつく
xxx_setup(10); なら、cmd=1&id=10 になる
jQuery の質問は、jQueryスレへ書き込んで >>838
https://dotup.org/uploda/dotup.org1478190.png.html
パスワードはhelupuです！！
ペイントで上書きしているので、本当はもっと写真です！！
>>839
サーバーにあげたら見えました！！不思議！！
他の画像はサーバーに上げなくても見えていて、今までこんなことなかったのに不思議です！！
ajaxは使ってますが画像にはかかわってないので関係ないと思ってました！！ <div class="short">short</div>
<div>long<br>long</div>
こういうhtml構造になってるとき short のクラスにだけスタイルかいて
２つのブロック横に並べて高さをそろえる(shortを引き伸ばす)方法ってありますか？
外側に div をつけて flex とかにすれば当然高さもストレッチされるんですけど
データベースの自動出力で外側をさわれないんですよね… >>843 こう?
.short+div,.short{
display:inline;
} >>841
>本当はもっと写真です！！
その写真をUPしてくれないと意味ないんだが・・。
ちなみにそのURLの画像のは問題無くローカルのhtmlでクロームで表示できるぞい >>841
まあajax使ってるならローカルなのが原因かもね
しかしそれならその画像だけが表示されないというのはおかしいな
だから予めヤフーの画像で試してもらったんだがなあ >>844
これだとlongの２行目が左側にまわりこんでしまうし
そもそも高さがそろってないので
単に内側にだけスタイル指定っていう条件で２列のテーブルみたいにしたいんですよね
<style>
.container {
display:flex;
}
.container > * {
background:#888;
}
</style>
<div class="container">
<div class="short">short</div>
<div>long<br>long</div>
</div>
っていうのと同じみためにしたいんです >>847
long側にもクラスつけられないの？
つけられるなら両方に display:table-cell つけるだけでいいと思うが >>842
どこで見たらいいかわかりませんがペイントで保存しなおしてます！！
>>845
この画像も表示されません！！
試しにimgタグだけのhtmlファイルをつくったら表示されたのでajaxが原因みたいです！！
でもこの画像だけなのが謎です！！！
原因がはっきりわかってないですがなんとなく解決できました！！
ありがとうございます！！！！ >>848
子要素にはいくらでもクラスつけていいので
やりたいことにかなり近づいているんですけど
marginがきかないんですね…
調べたらdisplay:table系にmarginつけるには上位のdisplay:tableにborder-spaceを設定しなきゃいけないみたいで…
beforeやafterつかって間にスペースはさもうとしてもうまくいかない…
なんとかmarginつけられないでしょうか ご質問があります。
職場でサーバーを用いない？掲示板を作ってみたいのですがphpを用いずサイトを更新していくことって可能なんでしょうか？
メモを残せる程度で良いのですが
例えばJavaScriptを利用したりとか、またはphpをサーバーを用いずに利用可能？
素人以下の知識で申し訳ありません。 不可能
javascriptはクライアント内で動作するプログラム
サーバー側でデータ変更するにはphpなりＣＧＩが必要
ウェブサーバーを経由しないでphpでp2p通信プログラムを作ることはできる
その場合も誰かがコネクションをうけて書き込みデータを保存する役割はしなければいけない メモを残せる程度っていうのが
他人にみせる必要はなく単に自分用のデータを残すだけでいいなら可能
javascriptのlocalStrage.setあたりを使えば閲覧者のローカルにデータをためて
次にアクセスしたときに再び表示させたりはできる
jsの話はすれ違いなのでこれ以上はほかスレで 文字コードで教えてください。
今までXHTML1.1でCGIプログラムのやりとりをしているページを書いていました。
試しにHTML5に書き直ししてみました。
ただCGIプログラムで文字コードはShift-JISなので、
HTML5でmeta charset="shift_jis"としました。
PCでは新しいブラウザでは問題なく使えているのですが、
iPhone 5/5c(iOS10.3.3)のSafariだと文字化けしてしまいます。
それ以降のiPhoneでは問題ないです。
これってiPhone5c/iOS10.3.3/Safari特有の問題なのでしょうか？
HTML5でシフトJISは、違う指定方法があるのでしょうか？ >>841-849
ajax のJavaScript 部分で、エラーが起こって、
それ以降の画像読み込み部分が、実行されないのかも
コンソールログに、エラーが出ているかも。
F12 開発者ツールを起動して、見てみろ
>>854
BOM 無し、UTF-8(UTF-8N)に、変換した方がよい >>855
文字コードで教えてくれと言われてるのになに日本語で答えてるんだ？アスペかな >>854
新しいSafariで問題ないのなら不具合なんでしょう
CGIのほうのContent-typeでcharsetを指定していないのなら、指定してみると良いかも >>855,857
ありがとうございます。
UTF8化したいのですが、
jcode.pl使ってるのでpmに直さないといけないですよね。
将来的には手を加えたいです。
Content-type指定してもダメでした。
HTML5に書き直したのをXHTMLに直したら、
正常に表示されました。
※iPhone5s 10.3.3ではHTML5で問題なし、
5cのみがダメっぽいですね。
まずはCGIのUTF8対応方向で変えていこうと思います。
ありがとうございました。 >>859
jcode.plって、何時代の人！？
10年以上前のプロジェクトの引き継ぎならともかく、今はperl自体がutf8対応してるからそんなのお払い箱だよ ちょっとスレチになってしまいましたが、
今ってエンコード処理させなくても使えてしまうんですね。
SJISをUTF8に変換して…、メールの時は…って難しく考えてしまってやってませんでした。
全部UTF-8Nにしてjcode部をなくしただけで、
データベースも使えるしメールも送信できるし、
今まで何を悩んでたのかな？って感じでした。
ほんと>>860の指摘の通りでした。
もうShift-JISサイトの方が珍しいし、
メールもjisに変換しなくても行けるのも驚きました。
ホント久々に触れたので感動みたいな驚きです。
ありがとうございました。 jcode.pl の事を知ってる人がいて、良かったね
漏れは検索したけど、perl は分からんし、
ライブラリには、そういう固有のやり方があるのか、と思った >>863
marqueeってなに？って思ったら
HTML5では廃止されてるタグなのね・・・ テーブルのtdとか閉じてなくね？
あとソースのtable のとこの3ってなにが入るん？
cellspacing とか cellpaddingとかかね？ >>864
先週です。
>>867 同感です。
<table ( 3 ) >
< ( 4 ) >
の答えは何でしょうか？
< ( 7 ) >はbodyを閉じるのでしょうか、htmlを閉じるのでしょうか？
trやth、td、thの中のfontは閉じなくてもいいのでしょうか？ <table>を<marquee>ｗｗｗ
つーか<html>と<body>のあいだに書いてあるのか (4)はcaptionだろうけど
(3)がわかんねｗ
summary="1月カレンダー"とか？？
widthとかalignとかborderとか何でも正解かもしれんしｗ
(7)は流れから見てhtmlの方だろうね >>863
俺も３年前にこんなことやってると知って驚愕した ■ このスレッドは過去ログ倉庫に格納されています
