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 margin-top:calc(100vw / 25); だとスクロールバーの横幅も含むのが難儀よね margin-top:calc(100% / 25); で横幅100%取得、計算できるようにならないかしら キチガイは、質問に答えることが目的じゃなくて、 自分の知っていることをひけらかしたいんだろう 自重したらひけらかせないから、絶対に自重なんてしない >>747 windowsも早くスクロールバーを他と同じようにしてくれればいいんだがな… viはビューポートインラインで、vbはビューポートブロックとかかね >>752 もう今さらなんじゃない? androidもiosもmacosもスクロールバーの幅とらない方になっちゃったし viとかvbとかなんだよw また知らぬ間に新しいの出てんのかよ〜 他にもいつの間にか出てそうだな めんどくせえ Bootstrapはもう時代遅れでSASSを勉強したほうがいいんですか? >>755 全然関係ないものだから ただ両方とも勉強とかするようなもんではない気がする 便利に使って楽するもんだ >>755 SASSなんて勉強するほどのものじゃないだろ。 単なる道具だから使えばいいやん 久々にレスポンシブページを作ろうとしています。 今ってvwとかvminとかあるんですね。 親要素に伴う変化が必要ならば%で良いと思いますが、 基本的にはmarginやpadding、フォントサイズは、 vw(h)/vmin(max)で指定した方が良いのでしょうか? 低レベルな質問ですいません 既存のサイトをベースにモックアップを作りたいのですが 普通はどうやりますか?ツールとか使ってなるべく簡単にできる方法があれば知りたいです。 JSとかCSSの知識はあります >>759 好きにすればいいけど %は継承する先祖要素に対する割合だから 子要素になるに連れて変動して都度計算が必要になるので vwのような絶対値に対する割合の方がらくちんちーんな気がするな俺は sassを使えるならデザインカンプのpxをvwに変換する関数作っておくと pxで作るとの同じ要領で書くことが出来る あんまり書くとsass絶対許さないマンに怒られそうだからこの辺にしておくけど >>760 モックてどんなものを指して言っているの? >>762 デザインとか動きとか決めるためのhtmlです サーバーとつながってないダミー画面みたいなやつ wgetとかでローカル保存すればいい気がしてきた。 >>763 htmlはサーバーに繋がってなくても出来るものだけど? 要はどっかのサイトをマルパクで盗んできて色々混ぜこんで見せたいってことでしょ? ならwgetかcurlでまるっととってきて apiからajaxするぶんだけ静的ファイルにしてしまえばいいんでない? >>766 そういうことですよね。 さっきwgetでとってきたらデザイン崩れてなかったしなんかこれで進められそうです。 ありがとうございましたー (ちなみに丸パクではなく既存サイトの改修ですw) jsでdomいじられまくるサイトじゃなくて良かったね 本当に無知な質問すみません <a href="□□□" onclick="window.open('△△△')"target="_blank">[テキスト]</a> これを□と△が同時では無く0.1秒等時間をズラして表示させるにはどうしたら良いのでしょうか? >>770 そんな事もわからず質問していましたすみませんm(_ _)m 質問です! 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のスレだ いんじゃねたまには?ユーザビリティや仕様、挙動は関係ない話でもないし センスあるプロの人かわいいデザインの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> でも、ブラウザへ絶対パスを打ち込んでも同じです!! ブラウザへコピーってURKLをコピーしてとんでるって意味ではないのか? >>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 のクラスにだけスタイルかいて 2つのブロック横に並べて高さをそろえる(shortを引き伸ばす)方法ってありますか? 外側に div をつけて flex とかにすれば当然高さもストレッチされるんですけど データベースの自動出力で外側をさわれないんですよね… >>843 こう? .short+div,.short{ display:inline; } >>841 >本当はもっと写真です!! その写真をUPしてくれないと意味ないんだが・・。 ちなみにそのURLの画像のは問題無くローカルのhtmlでクロームで表示できるぞい >>841 まあajax使ってるならローカルなのが原因かもね しかしそれならその画像だけが表示されないというのはおかしいな だから予めヤフーの画像で試してもらったんだがなあ >>844 これだとlongの2行目が左側にまわりこんでしまうし そもそも高さがそろってないので 単に内側にだけスタイル指定っていう条件で2列のテーブルみたいにしたいんですよね <style> .container { display:flex; } .container > * { background:#888; } </style> <div class="container"> <div class="short">short</div> <div>long<br>long</div> </div> っていうのと同じみためにしたいんです ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる