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 HTMLを書き換えたときにCSS/SCSSを「書き換える必要があるか」という点においては、どちらも変わらない
書き換える量がどれほど違うかでは、SCSSのほうが少なくなる可能性が高い buttonを普通のインラインブロック要素と同じ見た目にするにはどうすればいいのでしょうか？
http://jsbin.com/rixerukaka/edit?html,css,output
paddingを0にしたりborderを消したりしても、
中に入れたテキストが何故か他のインラインブロック要素よりも少し小さくなってしまい
同じ見た目にはなりません
chromeで確認しています >>719
やっと理解できたか。
別の例を出して話を混ぜっ返すんじゃねーよ ごく普通のサイトを作っています。
Edge,IE,Firefoxではほぼ同じ見栄えになるのですが、
Chromeで表示すると、何故か倍率125%に設定しているくらいに全体が大きめに表示されます。
でも倍率を確認すると100%です。
どういう原因が考えられますか？ >>722
は？勘違いしてたのはscssキチﾌﾟｹﾞﾗってことだよ？いいのねそれで。 >>724
俺が今説明してやったろーが
それで理解したよな子セレクタだって >>723
このスレは雑談スレなので他で聞いてください。ブラウザーに関しては該当スレがないので立ててはどうでしょう >>725
ちげーだろw
何故かいきなりscssマンが子セレクタ限定で話進めてた、まわりは子孫セレクタを想定してたから全く噛み合わずちんぷんかん。
からの最後にこれは最初から子セレクタの話です！とか言い出した意味不がいまの状況 >>721
興味深かったので調べてみた
デフォルトのfont-familyが<button>はArial、<div>はMeiryoになってる（Windows Chrome） 【悲報】 今まで散々技術知識を口にしてきたscssさんは子セレクターと子孫セレクターの違いを理解してなかった >>727
頭が悪いおまえは子孫セレクタでないと理解できないんだろうが
子セレクタでも同じ状態は作れる で結局、scssを使えばいいってことが
子セレクタを例にすれば理解できるんだろ？
だからこれからもscssの話題は続けるぜ いまここ基地外が居るからまともな回答かえってこないよ
全部scssにこじつけられて論点摩り替えられる
cssスレいったほうがいいよ >>732
子孫セレクタ知らなかったのにscssの話なんてできるのぉ？ﾌﾟﾌﾟﾌﾟ >>728
buttonだけフォントが違うとは思いもしませんでした
font-family: inherit;
としたら普通のインラインブロック要素と同じになりました
ありがとうございました 要素がgridアイテムになったら、
ブロックレベル要素かインラインレベル要素かという違いは意味を持たなくるのでしょうか？ >>739
ありがとうございます
flexboxとcss grid layoutは挙動も似ていて
この二つを組み合わせて使うのが今のやり方なんだなーということが分かってきました CSSの話じゃなくてSCSSの話だからでは？
自分が初心者でCSSについての質問したとして
SCSSがうんたらかんたらって言われても
？？？ってなっちゃう >>744
初心者でほんとに分からんのかもしれんが全く違う。
見た感じが似てるからそう思ってるのかも知れんがSCSSはブラウザが解釈できない非標準技術いわば勝手拡張。
ブラウザはCSSしか解釈できないからweb標準のCSSに事前に(ブラウザに渡る前に)に変換が必要。
javascriptで言うcoffeescriptとかtypescriptとかと同じ。 margin-top:calc(100vw / 25);
だとスクロールバーの横幅も含むのが難儀よね
margin-top:calc(100% / 25);
で横幅100%取得、計算できるようにならないかしら ｷﾁｶﾞｲは、質問に答えることが目的じゃなくて、
自分の知っていることをひけらかしたいんだろう
自重したらひけらかせないから、絶対に自重なんてしない >>747
windowsも早くスクロールバーを他と同じようにしてくれればいいんだがな… viはビューポートインラインで、vbはビューポートブロックとかかね >>752
もう今さらなんじゃない？
androidもiosもmacosもスクロールバーの幅とらない方になっちゃったし viとかvbとかなんだよｗ
また知らぬ間に新しいの出てんのかよ〜
他にもいつの間にか出てそうだな
めんどくせえ 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のスレだ いんじゃねたまには？ユーザビリティや仕様、挙動は関係ない話でもないし センスあるプロの人かわいいデザインのＣＳＳつくって
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なりが必要だろう
そのクリックする部分は何が書いてある？ ■ このスレッドは過去ログ倉庫に格納されています
