HTML/CSS のどんな質問に必ず優しく答えるスレ 31
レス数が900を超えています。1000を超えると表示できなくなるよ。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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 カメラの画像です！
大きさは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
俺も３年前にこんなことやってると知って驚愕した [ 3 ]
①HTML
②タグ
③半角
④htm
[ 4 ]
問1
https://jsfiddle.net/mxc7zy63/1/
※jsFiddleだと<body>が解釈されませんchromeはわかってくれた
①size
②color
③border
④caption
⑤tr
⑥/table
⑦/html
問2
#ffffff → 白
#00ff00 → グリーン
問3
⑧#ff0000
⑨#0000ff
問4
クロ
問5
(イ) → エ、文字を斜体にする命令
(ウ) → オ、センタリングにさせる命令
(エ) → イ、文字を左右に動かす命令
(オ) → キ、背景全体に色をつける命令 >>861
860読み返したら随分きつい言い方してたわ、ごめん
解決できたようで何よりでした まぁHTMLの授業がある自体マシでは
わしの中学生の時はキーボードを押す練習しかなかったからな
キーボード配列がテストに出るレベル 最近の学生はプログラミングが授業で学べるのがええな
裏山 CSSはデリミタに_ではなく-を使いますが
ID名やクラス名もデリミタに_ではなく-を使う方がいいのでしょうか？ >>881
<blockquote>
<p>CSSはデリミタに_ではなく-を使いますが</p>
</blockquote>
それどこ情報？ >>882
プロパティ名に使われているハイフンのことじゃね？
background-colorとかfont-sizeとか selectを全面に広げたペインのある場合も
そのselectはnavなどのブロックレベル要素に入れた方がいいのでしょうか？
インラインレベル要素を直接レイアウトのレベルに置くのはなんだか抵抗がありますが
なくても問題ないコンテナ要素ならない方がいいんじゃないかとも思います
どうなのでしょうか？ >>886
直接レイアウトしてるブロックの子にするのが気持ち悪いのはわかる
俺もよく<p>とかに入れてる
でもこういうのはもうポリシーの問題に近いので
良し悪しは人に決めてもらうのではなく、自分で決めること
だと思ってる >>886
あと何かしらの要素に入れておいたほうが
裸で置いておくよりも
後々デザインの為にCSSを書くときに都合が良いことが多い >>887-888
決まったセオリーがあるというわけでもないのですね
ではシンプルさよりも気持ち悪いという感覚の方を重視してコンテナを使おうと思います
ありがとうございました >>880
h1は文字を大きくしますとか教える授業だぞ
あれならないほうがまし >>890
うわ～酷いな、そうやってアメリカや東欧州などから遅れていくわけだ とはいえどう教えるかって難しいよな
大学生ぐらいなら見出しを意味し、ブラウザで見たときの文字が大きくなるデフォルトスタイルになってることが多い
っていってもいいけど小学生ぐらいなら文字が大きくなるって教えるしかないんじゃね
「h1は文字を大きくする(ために使う）」はひどいが
「ためしにh1をかいてみましょう 大きくなりましたね」ぐらいのことしかいえないだろう <h1>は知らんけど
従姉妹に娘に教えてあげてって頼まれたときに
「改行するときは<p>と書きます」って教えてると知った時は戦慄した
そんですごく迷った
本当のことを教えてしまうと、たぶん学校では役に立たないだろうし
かと言ってこんな20年前のやり方を教えてしまうのもどうかと
幸い、その子はまったくやる気がなかったんで
おっちゃんやっとくから遊んどいでって言って、普通にコーディングしたった 小学生でもわかる
pは段落、brは改行
h1は大見出し、大きくしたいならCSSという物を使う >まったくやる気がなかった
それが正解
下手に覚えるならやらんほうがマシ
小学生でもやってるのか知らんが、教科書の「この部分」でわかるだろ まあでも学校の先生には少しわりーことしたな、とは思う
彼らだって専門家でもないのに、知らんなりに指導要領通りに一生懸命やってるだけなんだろうし
そこに
class以外の属性がほとんどないのに色や大きさが変わってたり
<marquee>じゃないのに動いてるのがあるの持ってこられても
わけわかんなかっただろうなと 何気に教科書って h,p,img,strong,i,ul,table、段組みなどいい教材なんだよな >>895
小学生でもわかる
pは段落、brは改行
h1は大見出し、
ここまではいいけど
>大きくしたいならCSSという物を使う
これが小学校では範囲外なんだよね
小学校で負の数って概念にふれちゃダメなのと同じ リセットCSSは使うのが普通なのでしょうか？
今まで使っていなかったのですが、ブラウザ間の差異を知らなかったせいで
変なハマり方をしたので、使った方がいいのかと思ってきました
今まで使っていなかった理由は、
ブラウザによるふるまいの違いも知っておいた方がいいのでは？と思っていたからです >>900
ブラウザ間の差異に煩わしい思いしたくないから使う 子どもの話全部真に受けてるのがやばいわｗ
pを改行ってその子どもがそう覚えてただけかもしらんだろ >>900
知っておくのは大事だけど、ブラウザ間の問題解決が目的ではないよ >>903
あー言葉足らずですまん、口伝ではないのよ
プリントで要素の説明が幾つか書かれてるのを見たんだ
先生が個人で作ったにしては手の込んだデザインのプリントではあったけど
教科書や副読本的のコピーではなかったっぽいんで
全国でそうしているかどうかはわからんよね
断言ぽく書いてすまんかった 画像のように三分割したいのですがうまく行きません
二列目のはじまりを揃えて、三列目は大きな画像を表示させたいです
https://i.imgur.com/S37cxsn.png >>908
やっていたのは一つ一つの文字にクラス名付けてcssの方で整えようとしてました
テーブルで簡単に出来るんじゃと思い試している最中です flexアイテムは
先行するflexアイテムのoutlineの上に乗っかってくる
ということに気づきました
フォーカスでoutlineが表示されるフォーム部品やa要素を
flexboxを使って並べると、
フォーカス時にoutlineが後ろのflexアイテムに隠されてしまいます
（気づきにくいですが、outlineを太く、outline-offsetを大きくすれば分かります）
ChromeでもFirefoxでも同じなので、仕様的なものかと思いますが
マージンを大きめに取るくらいしか解決方法はないでしょうか？ >>911
ありがとうございます！
重ね重ねすみません。画像の高さがautoになっていますが、1·2列目の全体の高さと合わせたい場合はどうすれば良いでしょうか全体の枠組みが画像に合わせるのではなくて1·2列目にと考えています。言葉足らずですみません。 flexあるから今の人はもうfloatとか勉強しないの？ <style>
<!--
.mainArea{ width:800px; font-size:150%; }
.borderBox { border:solid 5px #000; display:flex; padding:1em; justify-content:space-between; }
.borderBox > ul {list-style:none; display:flex; flex-wrap:wrap; align-content:space-between; width:15em;}
.borderBox > ul > li {margin:auto; inherit; display:flex; justify-content:space-between;}
.borderBox > ul > li > div {width:6em; margin:0 1em;}
-->
</style>
<div class="mainArea">
<div class="borderBox">
<ul>
<li><div>サークルＫ</div><div>良い</div></li>
<li><div>ローソン</div><div>微妙</div></li>
<li><div>ファミマ</div><div>悪い</div></li>
<li><div>セブン</div><div>良い</div></li>
</ul>
<p><img src="http://placehold.jp/300x300.png";></p>
</div>
</div>
１，２列目にあわせるって 画像のほうが確実にちいさいってこと？ まあ顧客の原稿でもよくあるパターンだよな
どの線をどこにあわせるのか
あいたスペースはすべてつかうのかつめるのか
こっちが推測してデザインしたのに意図が違うってごねられるの >>912
1、2行目のことかね？
1、2行目に何か特別な意味があって、画像は1、2行目と関連があって
高さを合わせたい
ということで良いかね？ >>914
すみません。そのコードで解決しました。
ありがとうございました。
助かりました。 >>916
すみません、こちらの説明がおかしくて。
最初に書いていただいたコードで解決しました。
画像の高さはこちらの勘違いです。
ありがとうございました。 >>914
これみておもったけど
flex-direction: column; で縦にalign-contentする方法ってないの？
これ幅固定して無理やりwrapさせてalign-contentしてんだよね？ >>910の件ですが
flexboxをやめたらうまくいきました
便利なのでやたらflexboxとgrid layoutを使っていたのですが
完全上位互換とは言えないようですね レス数が900を超えています。1000を超えると表示できなくなるよ。
