X



HTML/CSS のどんな質問にも優しく答えるスレ 33
■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2018/07/11(水) 12:20:52.58ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!

質問側も節度あるレスで!質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人(立てられない場合は次の宣言者)が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(>>980を取った場合も)
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 32
http://mevius.5ch.net/test/read.cgi/hp/1521035557/

■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/

■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html
0265Name_Not_Found
垢版 |
2018/08/15(水) 19:15:50.43ID:???
>>264
その後の繰り返しでわかってきたことです
ならないは不正確で、なるときとならないときがある、でした
箇条書きするとこんな感じです

広告によって上寄せになる広告もある
同じページを何回もリロードさせると現象がわかる
新規簡易ページでも従来の記事のページのどちらでも現象は出る
ウィンドウ幅400〜500px位だと上寄せが出る回数が多い様子(幅100%、高さ100pxの場合)
0266Name_Not_Found
垢版 |
2018/08/17(金) 21:01:38.77ID:???
>>234
>・insにwidth,heightを与える

与えるものではなくて与えられるもの
よって意味なし
0267Name_Not_Found
垢版 |
2018/08/17(金) 22:41:01.03ID:???
確かに広告側でins要素にwidth,heightを設定してくれているなら、ins要素にwidth,heightをしておく意味はない
……というか設定すべきではないね
書き忘れてて申し訳ないが、そもそも >238 は広告側がそれをやってくれていればセンタリングされるはず、という例示だった

で、センタリングされないという状況から推測できるのは
・広告側では必ずしもins要素にwidth, heightを設定しない
→センタリング方法を変える必要あり
もしくは
・表示される広告に対して間違ったwidth, heightが設定されている
→こっちでins要素にwidth,heightをしているならそれが優先されている可能性があるが、そうでないならそういう広告だと考えるしかないような……
0268Name_Not_Found
垢版 |
2018/08/17(金) 22:51:28.11ID:???
display: flex が使えるなら
ins要素の親に以下を指定するだけでいい気がする

display: flex;
align-items: center;
justify-content: center;
0269Name_Not_Found
垢版 |
2018/08/18(土) 15:33:40.19ID:???
>>268
最初から読んでないならややこしくなるだけだから

それと、自分でbox作って自分でwidth, height当ててできると言ってるのも問題外
(>>267の人はちゃんとやってるから別)
最初からそういう問題ではないと書いてあったはず
0270Name_Not_Found
垢版 |
2018/08/18(土) 17:18:12.41ID:???
ぶっちゃけheightを100pxという狭い固定なら
出る広告の縦サイズも限られてるよね
ならinsの直親要素をその広告の最大サイズに設定しとけば
少なくとも、その親の親要素の縦のセンタリングは気にする必要なくね
どのみちテキスト白地広告とかディスプレイ広告だと
最下層の入れ子ins下で数pxの誤差のある広告が出ることあるし
0271Name_Not_Found
垢版 |
2018/08/18(土) 17:20:49.21ID:???
あとは、レスポンシブ広告側で縦の最大最小サイズを設定しとけば
さらに確実
0272Name_Not_Found
垢版 |
2018/08/18(土) 17:25:38.91ID:???
上で言われてるinsにwidth,heightが与えられるときと与えられない時がある
そういうの見たこと無いので、ほんとかどうかは知らないが
もしかするとあえて広告側で最小最大設定すれば
確実にwidthとheightが与えられるかも
試すのめんどいからやらないけど
0273Name_Not_Found
垢版 |
2018/08/18(土) 20:45:13.85ID:???
>>270
広告の仕組みわかってないようだな
数pxの誤差なんてレベルではないし、親の親ってなんだ?
0274Name_Not_Found
垢版 |
2018/08/18(土) 21:53:05.17ID:???
そもそも縦が100px固定ってほぼ横長バナーを想定してると思うのだが
広告の最小縦幅が60pxで次が90px?
たったこの2種類幅を考慮するメリットがあるのだろうか
レスポンシブで例えば縦幅73pxみたいな微妙な幅って出たっけ?
0275Name_Not_Found
垢版 |
2018/08/18(土) 22:46:53.44ID:???
100px、75pxもあるよ
今後変わるかもしれんしいちいちそんなこと気にしてないだろ
0276Name_Not_Found
垢版 |
2018/08/18(土) 22:50:00.53ID:???
100pxは例えであってそれで完成ではないかもしれんし
別の箇所では違う高さかもしれんし
今そこは重要なことではない
0277Name_Not_Found
垢版 |
2018/08/18(土) 22:58:24.96ID:???
いや質問者は二度も、高さ100pxの場合って言ってるから
100xp固定の場合の解決例を示しただけじゃん

カモしれないって自分で言ってんのに、なぜそれを元に重要なことではないと断言できるんだろ
単にマウント取りたいだけか?
0278Name_Not_Found
垢版 |
2018/08/18(土) 23:02:53.55ID:???
>>275
そう、つまり微妙な幅も出るかもしれないし、今後変わるかもしれないから
広告側で範囲を設定した方が無難
もしかしたらその設定でwidthもheightの設定がデフォになるかもしれない

そもそもinsにwidthやheightが設定されないor別の値が設定される
という再現ができないんだよな
ほんとか?
0279Name_Not_Found
垢版 |
2018/08/18(土) 23:04:39.40ID:???
width,heightが、設定されないor広告にあってないサイズ値が設定される
というのを再現できれば
広告側で範囲設定後にサイズ値が強制的に設定される
というのも確認できるんだがなぁ
0280Name_Not_Found
垢版 |
2018/08/18(土) 23:06:00.31ID:???
訂正 設定されないor広告にあってないサイズ値が設定される
→設定されないor広告にあってないサイズ値が設定される、場合がある
0281Name_Not_Found
垢版 |
2018/08/18(土) 23:09:50.51ID:???
ちなみに、広告の親要素にあってないサイズ
これは広告の親要素の縦幅を100px以下、具体的には60pxにしたとき
縦幅100pxや90pxの広告が表示されたことは確認できた
0282Name_Not_Found
垢版 |
2018/08/19(日) 15:20:41.62ID:???
>>277
君が最初から読んでないだけだから、もういいだろ

>>279
>width,heightが、設定されないor広告にあってないサイズ値が設定される

いつからそんな話に?無茶苦茶だな
0283Name_Not_Found
垢版 |
2018/08/19(日) 16:17:08.61ID:???
>>282
いや、前スレから読んでるから。
で、最初は高さは質問者も限定してないが
その後に質問者が100px固定で回答する>>233
で、回答者がそれぞれ高さ固定の例を示して>>238>>239
その後に質問者が、100pxの場合について再度確認してる>>265

なので100pxの場合を示しただけ。
もちろん別の場合(100px固定以外)があれば
その対処を示せばいいだけの話なんだが?
>>276が、なぜ”かもしれない”で100px固定限定の場合の回答を
重要でないと断言できたのかが意味不明

>width,heightが、設定されないor広告にあってないサイズ値が設定される
>>267の推察として可能性があがっていたから。
後者は確認済
前者がもし無いのであれば
そもそもの、topに表示されてしまう、という原因がさらに絞れる
0284Name_Not_Found
垢版 |
2018/08/19(日) 16:32:13.77ID:???
ちなみにおれが思うに
前スレから今までの質問者の回答、
>>256
>なるときとならないときがある
>広告によって
という部分から

(1)最下層のins下のディスプレイ広告(img)のサイズよりも
 最上のins要素のサイスがでかい

 かつ

(2)広告の親要素の縦幅が100px固定で
 最上ins要素の縦幅が100pxのディスプレイ広告がでた

が、topに配置されているように(見える)原因だと思う
これだと辻褄が合う
つまり、
最上のinsは親要素(100px固定)の縦幅全部に表示されている(≒センタリングされている)が、
最下層のimgはトップに位置されている
が正解かと

(1)はレスポンシブ広告のを知っている人、実際に試してみた人、
広告の表示テストした人、しか伝わらないので注意な
どうも想像で話してる人が紛れ込んでるようなのであえて言うが。
0286Name_Not_Found
垢版 |
2018/08/19(日) 19:23:59.51ID:???
>>283
質問は高さ固定、つまり
・まだ決めてない
・幾つかあって異なる
・今後変更になる
など様々考えられる

100pxは「場合」とあるがソース出すのにとりあえず書いた可能性がある
それを100pxだけに絞る意味がない
勝手に問題文読み変えて答えてるようなもんだ
あくまで質問は「高さ固定」
つまり80pxやその他もあるかもしれん

>広告にあってないサイズ値が設定される
意味がわからん
仕様はサイズ値に合う広告が表示される
前者はソースで書かれている
0287Name_Not_Found
垢版 |
2018/08/19(日) 19:29:38.81ID:???
>>286の最後の行は混じったので削除
>width,heightが、設定されない
などどこにも書かれてない、ということ
0288Name_Not_Found
垢版 |
2018/08/19(日) 20:29:23.46ID:???
>>286
>100pxは「場合」とあるがソース出すのにとりあえず書いた可能性がある
>その他もあるかもしれん
それはわかってる、その先の話をしてる。
ひとりの回答者が100px固定以外での回答例を出したのにもかかわらず
その後に再度>>265で100pxでのテストを示した
つまり、80pxでも500pxでも、他にあるのかは質問者以外にはわからないが
少なくとも>>265の時点では質問者は何らかの理由で100px固定でのこだわりを見せた。
それに答えただけ。ただ、それだけ。
今、他の高さ固定パターンがある云々は的外れ

>広告にあってないサイズ値が設定される
意味がわからないのは、実際に試してないから
もしくは例外に出会ってないからからだと思う
例えば広告の親要素の高さを60pxや80pxにして
何回かレスポンシブすると、高さ90pxや100px広告が出てくることがある
0289Name_Not_Found
垢版 |
2018/08/19(日) 20:35:07.27ID:???
>例えば広告の親要素の高さを60pxや80pxにして
>何回かレスポンシブすると、高さ90pxや100px広告が出てくることがある

それ大問題だろw
0290Name_Not_Found
垢版 |
2018/08/19(日) 20:39:17.91ID:???
よくよく見てみたら、最初の回答者の例も
500px固定なんだよな
その後の「やってみました」というのも固定幅に関しては言及なしで
テストにしろ質問者の具体的な固定幅が発覚したのは>>233が初。

>>265の現象(また、前スレから言っていた、広告がトップに表示される云々の現象)も
100px固定、もしくはディスプレイ広告のimageサイズの誤差が生じる範囲の縦幅
(自分は親要素(100pxから)500px固定の、横バナーとスクエア広告でズレを確認済み)
だったという可能性がある
0291Name_Not_Found
垢版 |
2018/08/19(日) 20:56:39.27ID:???
>>289
ちなみに広告の親要素(薄紫)60px固定で、最上ins要素のheightが90pxで表示された例
https://i.imgur.com/rwEFw79.jpg
こちらの環境では10回に3回以上は表示されるみたいなので
同じ現象の人もいるかも
(もちろん広告の最大最小設定は外してる)
0292Name_Not_Found
垢版 |
2018/08/19(日) 20:56:58.13ID:???
7です
場合と書いた通り高さ100pxは例えばで、他の高さでも考慮願います
広告画像が欠けたことは一度もなく、常にdiv枠内に表示されています
レスポンシブなので幅可変は説明するまでもないですよね

window幅を約450px、上寄せになった場合のFoxの開発ツールで見た状態です

・大元の=最も外側の=googleコードのinsのボックスモデルは
 margin上下左右全てautoで0px、border/padding共全て0、本体420x100(一例)、
 position:absolute、top/right/left/right全て0
 そのDOMはstyle="height:100px"

・大元のinsの子insのボックスモデルは上と同じ
 そのDOMはstyle="height:100px; width:420px"

むろんstyle=は当方で指定するわけなく広告のスクリプトが設定したものです
広告が変わって画像の幅が変わりますがinsの420pxは変わりません
window幅を変えると別の値になりますが、window幅を変えなければ常に420pxのようです(ここは検証数少なし)

insは420x100で変わらずですが、画像サイズが変わり、広告側ins内で画像を上寄せにしてるようです
子孫insまで設定を変えようとは思わないのでそこは無視でいいです
↑ということはこれ以上やりようがなさそうで納得してきた感じです
0293Name_Not_Found
垢版 |
2018/08/19(日) 21:01:40.96ID:???
すれ違いでした
数十回やってますが今の所広告画像がはみ出たことも一度もありません
0294Name_Not_Found
垢版 |
2018/08/19(日) 21:08:03.79ID:???
>>291
それはすまんかった
もち、子孫insにcss設定してなくてだよな?

でもそれ大問題だな
ってもみなたいてい親要素に高さ指定しないから気がつかないかほったらかしなんだろうな
0295Name_Not_Found
垢版 |
2018/08/19(日) 21:11:55.63ID:???
>子孫insにcss設定してなくてだよな?
もちろん、親を高さ60px固定で、広告に高さ60px以上出るような設定はなし
0296Name_Not_Found
垢版 |
2018/08/19(日) 21:16:44.06ID:???
リロードする度に広告下が上下に動いたりmarginによっては重なったりするってこと?
仕様かなりまずくないか?
0297Name_Not_Found
垢版 |
2018/08/19(日) 21:26:08.21ID:???
ちなみに>>284を画像で説明した方がわかりやすいと思うので
これが何もない状態
広告の親(薄紫)の高さ100px固定
https://i.imgur.com/Cd0dLlb.jpg

これに対し、その高さ以下でレスポンシブ広告が表示され(赤枠、最上ins要素)
さらにセンタリングされたときの例
https://i.imgur.com/JvCm7lr.jpg
で、実際に目に見えるその広告部分(青色)
https://i.imgur.com/6BU9nS3.jpg
実際には目に見えない赤枠を外すと、広告はこうみえる
https://i.imgur.com/o6L3sIZ.jpg

一方で、広告によっては、青色の部分が中途半端な高さになることがある
(今のところ一枚画像タイプの広告で確認)
それがこれ
https://i.imgur.com/vz8t900.jpg
実際に目に見える部分だけみると
https://i.imgur.com/4k5aAuv.jpg

もうおわかりかと思うので端折るが、親高さ100px固定と同じ広告が出た場合
https://i.imgur.com/mWZOgXt.jpg
で、これ https://i.imgur.com/maxIBvL.jpg

もちろん100px固定でなくとも同じ現象がある
こちらでは100pxから500だったか600px固定だったかで確認済み
まずこのあたりを探ってみて>>292、これでなければおそらく環境
0298297
垢版 |
2018/08/19(日) 21:31:20.57ID:???
あ、>>292の下の方に書いてあったかすまん
ということは解決でいいのか
0299Name_Not_Found
垢版 |
2018/08/19(日) 21:40:57.52ID:???
度々7ですが>>293は撤回します
親の高さ60pxは試したことがなく今出ました
それでwindow幅を400pxや450pxにするとけっこうな確率で出ますね

更に以前教えてもらった
#ads > ins { position: absolute;〜}
も与えるとpタグの上の要素にまで上がって重なってしまう場合もあります

となると親の高さは何pxなら大丈夫という確信が取れないので要検討です

画像の上寄せは相変わらず>>297の通り出ますがこれは大した問題ではないように思えてきました
0300Name_Not_Found
垢版 |
2018/08/19(日) 21:56:39.57ID:1HXe1aM8
htmlCSSド素人です
LINE風に画像を表示したいのですがそれだけではなく
左側に画像を横並びにしたり、それぞれ吹き出しの色を変えたりしたいです
○(コメント)
〇〇(コメント)
〇〇○(コメント)
吹き出しから伸びる三角と右側の画像と吹き出しはいらないです
よろしくおねがいします
0301Name_Not_Found
垢版 |
2018/08/19(日) 21:57:07.34ID:???
(1)画像上寄せが起こる → insはセンタリングできているが画像が上寄せなので広告がセンタリングできていないように見える
パターンと
(2)親要素以上のサイズの広告が出る → センタリング以前に位置がおかしくなる
パターン

どこまでウインドウ幅を縮めるのかによるけど
ウインドウ幅を縮められる最小幅を固定(スクリプト無しにできたっけ?)し
広告幅も範囲設定で(2)は攻略できそうだが
0302Name_Not_Found
垢版 |
2018/08/19(日) 22:20:56.28ID:???
今更ですが、当初読んでるはずですが関係ないやで記憶にもありませんでした

https://support.google.com/adsense/answer/3213689?hl=ja
高さが固定または制限されているコンテナには設置しないでください。

メディアクエリのページは読んでいたのですが
@mediaだとサイズ決め打ちになってしまい、いまいちです
幅100%とシンプルかつ画面を最大活用したかったのですが

みなさんお騒がせしました、そしてありがとうございました
0303Name_Not_Found
垢版 |
2018/08/19(日) 22:37:32.16ID:???
>>301
(1)はあきらめましたが、(2)は親の高さ100px以上にしてかつ
overflow: hidden;
を入れるといいようです
確証ないのとwindow幅狭めると広告が消えていきますが

更にmax-〜を組み合わせると進展ありそうな気がします
https://support.google.com/adsense/answer/6307124?hl=ja
(当初から今も見ていたページの方)
0304Name_Not_Found
垢版 |
2018/08/20(月) 14:37:34.19ID:m1CfMfwW
>>300
やりたいことはわかったが
質問はなんなのかね
0305Name_Not_Found
垢版 |
2018/08/20(月) 15:31:18.65ID:???
やりたいことわかったのかすげえ…
0306Name_Not_Found
垢版 |
2018/08/20(月) 16:28:51.98ID:???
質問じゃなくてコード無料で書いてもらおうっていう乞食もきちゃうからこういうスレって難しいよね
0307Name_Not_Found
垢版 |
2018/08/20(月) 18:52:26.23ID:???
余裕ある貴族が恵んでやればいい
恵んであげたくない人はスルーでいいんだよ
0308Name_Not_Found
垢版 |
2018/08/20(月) 18:59:10.26ID:zj/EfJuA
>>304
すいません言葉足らずでした
検索して参考にしたサイトでは
CSSが
.balloon {
width: 100%;
margin: 10px 0;
overflow: hidden;}
.balloon .faceicon {
float: left;
margin-right: -50px;
width: 40px;}
.balloon .faceicon img{
width: 100%;
height: auto;
border-radius: 50%;}
htmlは以下のように書いてありました
<div class="balloon6">
<div class="faceicon">
ここにアイコン画像 <img~>
</div>
ここで画像を横に並べたいのですが
<img~>を並べるだけでは画像が縦に並んでしまうので横に並べる方法が知りたいです
0309Name_Not_Found
垢版 |
2018/08/20(月) 19:13:27.75ID:???
>>308
<div.faceicon>の幅を40pxで固定しているからだな
これとfloatで横に並べるのをやめにして
親要素作ってflexで横並びにすればいいと思うよ
0310Name_Not_Found
垢版 |
2018/08/20(月) 20:24:59.83ID:???
>>302
くどいようで申し訳ないが
googleは高さ固定ダメと言いつつメディアクエリで設定してるとは
結局同じことだと思うが曖昧というかなんなのだろう?極端な話、

width: 100%; height: 100px;



@media screen and (min-width:1px) {
width: 100%; height: 100px;
}

と等価なわけで
%指定がいけないのか、高さ幅共に何px指定しなければいけないのか
100%でも(レンダリング中変にjsで動かしたりしなければ)サイズ算出に問題ない気もするが
だがそんなニュアンスの文は見当たらないような、よくわからん
0311Name_Not_Found
垢版 |
2018/08/20(月) 20:58:35.89ID:CyDbVEPk
html、CSS、画像ファイルで神経衰弱ゲームがつくれるとのことですが、

下記のまとめ項目にまとめたソースコードがあったり、枠内にいろいろなソースコードがあったり、
どこのファイルにどう記述すればよいのかサッパリわかりません。


https://magnets.jp/web_design/6308/#midashi2
0312Name_Not_Found
垢版 |
2018/08/20(月) 21:05:48.55ID:???
>>311
よく読みたまえJSも使ってる
コードはデモページから拾えばいいよ


あとカードをひっくり返すエフェクトは
そのままだとIE11で苦労するから気をつけ…
…と、思ったけどCSS使ってないんかこれ
0313Name_Not_Found
垢版 |
2018/08/20(月) 23:31:01.52ID:???
>>312
まさかbackface-visibilityでハマった奴が俺以外にいたとは
0314Name_Not_Found
垢版 |
2018/08/21(火) 03:30:58.39ID:???
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>神経衰弱</title>
<style>
</style>
</head>

<body>
<ul id="card"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";></script>
<script>
</script>
</body>
</html>

上のファイルに、適当な名前、index.htm とでも付けて、
BOM なしUTF-8 として、適当な名前の、test フォルダへ保存する

<style></style> の間に、CSS をコピペする。
jQuery の読み込みタグの下にある、<script></script> の間に、まとめたJavaScript をコピペする。
必ず、jQueryを上に書いて、先に読み込むこと!

testフォルダの直下に、img フォルダを作る。
そこに、裏向きのカードの画像ファイル、card.png と、
表向きのカードの画像ファイル、card1.png 〜 card10.png を入れる
0315Name_Not_Found
垢版 |
2018/08/21(火) 06:34:56.01ID:???
Ruby, Selenium WebDriver を使って、
5ch のスレを解析して、書き込みから、画像ファイルへのリンクを抜き出して、
<img> へ変換しようと思っていますが、

各画像のサイズがバラバラで、表示される高さを、画面に収まるようにしたいので、
img { height: 550px; }
と設定して、画面の高さの80% ほどに見えますが、

他のPC では、80%にならないと思うので、
他のPCでも同じように、80%ぐらいに表示するには、どうすれば良いでしょうか?
0316Name_Not_Found
垢版 |
2018/08/21(火) 14:20:10.80ID:rZEbS2CO
height: 80%; では駄目な特別な理由がなにかあったりする?
0317315
垢版 |
2018/08/22(水) 00:01:50.28ID:???
高さの100% の基準がわからない。
PC の画面の高さなの?

よくわからないので調べてみます
0319315
垢版 |
2018/08/23(木) 01:18:12.75ID:???
5ch のスレを解析して、書き込みから、画像ファイルへのURL を、あるだけ抜き出すから、
URLの数は決まらない

それらのURLをすべて、<img>に変換して、ドンドン追加していくから、全体の高さも決まらない

ただ画像本来の高さにすると、画像の大きさがバラバラで揃わない
0320Name_Not_Found
垢版 |
2018/08/23(木) 14:31:16.12ID:zFqa5sGT
まず枠になるボックスを固定サイズで置いて
その中に<img>要素を置いて
position:absolute、margin:auto、上下左右:0で中央にして
width/height:autoでmax-width/max-height:100%でどうだろう
0321315
垢版 |
2018/08/23(木) 23:52:16.35ID:???
>枠になるボックスを固定サイズで置いて

img { height: 550px; }
今は、画像を固定サイズにしていますが、枠を固定サイズにしても同じことでしょ?

漏れのPC では、550px で、画面の高さの80% ほどに見えますが、
他のPC やスマホでは、どうなのでしょう?

異なるデバイスでも、そのデバイスの画面の高さの、80%ほどに見えてほしいのです
0323Name_Not_Found
垢版 |
2018/08/24(金) 02:10:55.57ID:???
>>321
そんなあなたにvwとvh

ていうかまず試せよせっかく有用な助言もらってんだから
%の高さの使い方は誰でも通る混乱ポイントだから
こんな文字だけの掲示板であーだこーだ言うよりも
納得いくまで色々試しまくるんだ!
0324Name_Not_Found
垢版 |
2018/08/24(金) 09:17:37.00ID:???
皆試行錯誤してノウハウ溜めていくんだよ
0325315
垢版 |
2018/08/25(土) 10:16:36.25ID:???
>枠になるボックスを固定サイズで置いて

<div class="img_wrapper">
<p></p>
<img>
</div>

<img> は、<div> の子要素にしています。
<p> には、画像のURL を書いています

.img_wrapper { height: 600px; }

ここで、div をpx で書くと、
漏れのPC では、画面の高さの80% ほどに見えますが、
他のPC やスマホでは、どうなのでしょう?

異なるデバイスでも、そのデバイスの画面の高さの、80%ほどに見えてほしいのです
0326315
垢版 |
2018/08/25(土) 10:34:21.12ID:???
vw, vh は、異なるデバイスの、異なる画面の大きさに対する、割合で指定できますね

これを使ってみます!
0328Name_Not_Found
垢版 |
2018/08/25(土) 19:35:02.39ID:???
なに引いてんだよ(´・ω・`)
0330Name_Not_Found
垢版 |
2018/08/25(土) 20:17:09.13ID:???
htmlのタグが、どのcssファイル内でセレクトされているか、逆に、
cssのセレクタが、どのhtmlファイル内のタグをセレクトしているか
が簡単にわかる方法はありませんか・・・?
visual studio code と chromeの検証を使用しています

ファイル数が多かったり、ファイルの内容が多かったりすると、
どのタグがどのcssやjsで指定されているのかを見つけるだけでも一苦労でして・・・

宜しくお願いします。
0331Name_Not_Found
垢版 |
2018/08/25(土) 23:34:22.43ID:???
>>330
よくわからんがおそらく
chromeでF12押してElements
0332Name_Not_Found
垢版 |
2018/08/25(土) 23:37:27.01ID:???
結局>>297で親からはみ出る件は何がいけなかったのだ?
0333Name_Not_Found
垢版 |
2018/08/26(日) 00:04:23.81ID:+6mfaudC
画像(imgタグ)のレスポンシブ対応をしようと思ってます。
で、いろいろ調べたんですが
<picture>を使う方法と<img>に直接srcset属性を入れる方法がある
ということがわかりました。
これはどっちを使えばいいのでしょうか?

自分的には全部<picture>でいいんじゃないかと思うんですが
ttps://parashuto.com/rriver/responsive-web/picture-srcset-use-case
「なんでもかんでも<picture>要素を使えばいいわけじゃない!」
っていう記事に使い分けが書かれてるようなんですが、正直よくわかりません。(情報が古い?)

あと、<picture>で実装した場合
パソコンでブラウザの幅、大きくしたり小さくしたり繰り返してると
同じ画像を何度も読み込んでる気がしますが、これは仕様なんでしょうか?
0334Name_Not_Found
垢版 |
2018/08/26(日) 02:54:03.23ID:???
ヒーローイメージくらいしか使いみちなさそう。そこまで通信量考えるなら画像使うなよと言いたい
0335Name_Not_Found
垢版 |
2018/08/26(日) 05:46:43.60ID:???
>>330
前者はブラウザの開発ツールで

後者はなかなか難しい
0336Name_Not_Found
垢版 |
2018/08/26(日) 06:38:35.03ID:???
>>330
>htmlのタグが、どのcssファイル内でセレクトされているか、

VSCode にそういうプラグインは無いか?
CSS Peek とか?

VSCode - 10 Useful Extensions for Web Development | GTCoding
https://youtu.be/wzreuKDbLyk?t=2m29s

>逆に、 cssのセレクタが、どのhtmlファイル内のタグをセレクトしているか
これは、無数のHTML要素に該当する可能性があるから、難しい

ブラウザのF12 開発者ツールで、見るのが良さそう
0337Name_Not_Found
垢版 |
2018/08/26(日) 06:52:53.18ID:???
>>333
>あと、<picture>で実装した場合
>パソコンでブラウザの幅、大きくしたり小さくしたり繰り返してると
>同じ画像を何度も読み込んでる気がしますが、これは仕様なんでしょうか?

ブラウザがキャッシュするから、同じ画像は、何度も読み込まないと思う

ブラウザのF12 開発者ツールで、読み込んだファイルを確認してみれば?
0338Name_Not_Found
垢版 |
2018/08/26(日) 13:54:00.35ID:XWM1JSh3
>>337
chromeのデブツールで確認したらなんども再読込してた。

<picture>
<source media="(max-width: 762px)" srcset="img_sp.jpg">
<img src="img_pc.jpg" alt="">
</picture>

こんな感じにして762pxを境にブラウザの幅行き来したら
再読込したりしなかったり。条件がよくわからない。
でもhttpステータスは304だから更新はないって判定なんだろうけど
リクエストはしてるのかな?と思って
0339Name_Not_Found
垢版 |
2018/08/26(日) 17:56:43.24ID:???
304なら再読み込みしてないじゃん
cache使ってるでしょ
0340Name_Not_Found
垢版 |
2018/08/26(日) 23:58:37.83ID:???
同一URL なら、キャッシュから読み込む。
キャッシュを使わない、ブラウザはないと思う

だから、ファイルの内容を変えた場合は、ファイル名も変えるようにする。
同一URL だと、キャッシュが使われてしまうから、内容が古いまま
0341Name_Not_Found
垢版 |
2018/08/27(月) 00:46:27.68ID:???
サーバーレスポンスCache-Controlで変えれる
0342Name_Not_Found
垢版 |
2018/08/27(月) 19:41:46.78ID:???
Chromeでデータセーバー有効かつ低速だとJSが無効化されるようになったそうですが、
目次の表示/非表示ってCSSだけで出来ますか?
0343Name_Not_Found
垢版 |
2018/08/27(月) 20:42:00.31ID:???
>>342
出来なくもない
ラジオボタンやチェックボックスのcheckedと
表示非表示を切り替えたいブロックを
セレクタの+で繋げれば


なんか猫も杓子も目次書くようになったな
グーグル様のお達しはやっぱ効力あるな
0345Name_Not_Found
垢版 |
2018/08/28(火) 10:17:55.58ID:???
俺がルールだ的な傲慢さは出てきたよね。
邪悪な企業まであと一歩。
0347Name_Not_Found
垢版 |
2018/08/28(火) 11:51:43.90ID:???
ampとか開発者から見たら筋悪なの分かってたじゃん?
でも経営サイドが踊らされて業務として降ってくる。
センスないことゴリ押しされるとホント迷惑。
0348Name_Not_Found
垢版 |
2018/08/28(火) 15:21:12.15ID:???
CSSでGridLayoutを使っている時にふと疑問に思ったのですが、
例えば日記を更新していく際に、
新しいトピックを一番上のグリッド(マス)持っていくにはどうすれば良いのでしょうか?

https://blog.splout.co.jp/wp-content/uploads/2017/12/grid02.png
こちらの画像で言いますと、
item1が一番新しい記事で、item9が一番古い記事だとしますと、
新たに最新の記事を加えた場合、
元々あったitem1の記事がitem2のマスに移動して、item2にあった記事がitem3のマスに移動して・・・
という風にしたいのですが・・・
0349Name_Not_Found
垢版 |
2018/08/28(火) 15:48:43.28ID:???
CSS変数を使うとかでしょうか・・・?
基本的には、こういうのですとJavaScriptを使うのが普通でしょうか?
0351Name_Not_Found
垢版 |
2018/08/29(水) 00:52:36.84ID:???
メディアクエリの幅指定はスクロールバーを含めた値ですが、
webkit系ブラウザだとそれを含めずに算出するバグがあると以前聞きました。

現在でもこのバグは継続していますか?
0352Name_Not_Found
垢版 |
2018/08/29(水) 02:25:37.10ID:???
逆に誰がバグにしたのか知りたい
0353Name_Not_Found
垢版 |
2018/08/29(水) 11:14:59.48ID:???
>>343
ありがとうございます 作成できました
0354Name_Not_Found
垢版 |
2018/08/29(水) 11:58:04.01ID:???
>>351
blinkも初期にそのバグあったが治ってた
safariは使ってないので知らん
0355Name_Not_Found
垢版 |
2018/08/30(木) 02:24:39.67ID:???
css overflow スクロールバー
css fit-content スクロールバー

で検索して
0356Name_Not_Found
垢版 |
2018/08/31(金) 00:32:22.21ID:???
それってネグレクトじゃね?
児相に通報した方がいいぞ
確信がなくても可能性があるなら通報する義務が国民にはある
そうじゃないと思っててそうだった時が一番大変だしね
0359Name_Not_Found
垢版 |
2018/08/31(金) 23:07:18.11ID:???
ウインドウズもぞろぞろスクロールバーはやめてくれると捗るんだがなあ
0360Name_Not_Found
垢版 |
2018/09/01(土) 01:16:56.00ID:???
レスポンシブで画像以外のコンテンツの表示分けって
どうやって対応してる?
wp_is_mobile();みたいに
ソースレベルでちゃんと出しわけしてるの?
0361Name_Not_Found
垢版 |
2018/09/01(土) 07:50:26.91ID:???
>>360
CSSで表示だけ出し分けることが多いなあ
0362Name_Not_Found
垢版 |
2018/09/02(日) 13:13:44.32ID:???
>>361
ホッしたw
でも冷静に考えたら、ほんの数か所の為にサーバーサイドを必須にしなければいけないのは非効率だよね。
ブラウザに無駄なもの読み込ませているのは確かに気持ち悪いんだけど
0363Name_Not_Found
垢版 |
2018/09/02(日) 17:33:17.95ID:wnLLgn7D
WEBってなんで2018年なってもいまだに
HTML,CSS,JavaScriptとかいう糞言語で描いてるんだろう。
絶対パフォーマンス悪いだろ。
0364Name_Not_Found
垢版 |
2018/09/02(日) 17:43:52.36ID:???
クソ言語だとパフォーマンス悪くなる。

だけど今のウェブを見るとパフォーマンス悪くないので
クソではなかったということさ

事実を受け入れよう
■ このスレッドは過去ログ倉庫に格納されています