>>699
> レスポンシブはiOS、Androidは当然だが、同時にPCサイトの
> クロスブラウジングはキープしなければならない。（スマホとPCはユーザー層は別だから）
> だから、レスポンシブだからIE9以上でいいというのは理屈的におかしい。

はぁ？ お前レスポンシブとリキッドレイアウトをごちゃ混ぜにしてるんじゃね？

IE8を使うのはPCに限られ、そのPCの解像度（正確にはデバイスの
物理的なサイズといったほうがいいか）はスマホより大きい。

だからリキッドレイアウトにさえしておけば、レスポンシブデザインに
おける最大サイズ用一つだけで十分。（つまりメディアクエリを使わない）
（金が無限にあるのなら、例外的なデバイスにも対応すれば？）

それに加え、小さいサイズ用に追加でメディアクエリを書いて
デザインすればいい。それでクロスブラウザになる。


で、俺が言ってるのはそのレスポンシブ対応をJavaScriptで対応するとか馬鹿げてる。
CSSのメディアクエリを使って対応するのが適切だ。
その適切な選択ができるためにも、jQueryを使うようなプログラマなら
CSSは必須技術だって話をしているわけだが、わかってるか？

>>699
> CSSでメニューにdisplay:none;をかけるのが、SEO的にもJSオフ環境的にもどうかというのもあるし、

お前何の話してるのさ？

SEOで考えればJavaScriptは使わないほうがいい。
というのが一般的な答えだが。

SEO的にもJavaScriptオフ環境的にもって話であれば、
それこそJavaScriptを使わずに作るのがいいってことになるだろ。


プログラマだからってHTMLとCSSの勉強が不要なわけじゃなく、
JavaScriptオフ環境も考え、JavaScriptでなんでもやろうとするのではなく、
可能であればHTMLとCSSだけで作れる方がいい。
だからHTMLとCSSはウェブプログラマにとって必須知識だ。
これは俺がずっと言っていることそのものだぞ。

>>700
> IEは無視ですか？

無視して良い環境であれば無視しますよ？

無視していいのにあえて古いIEに対応する必要はありませんね。

もしかしてCSS使えないから、JavaScriptでやるんですか？

>>699
> フロントエンドはこっちの得意分野だがこっちの土俵で平気かい？

おそらくお前の負けだろうなｗ

個人的にSEOとか言い出す人は
技術者じゃなくてSEO業者だと思ってるｗ

技術的な根拠もなく、あれがいい、これはだめと言ってるだけ。
見てるのは検索エンジンだけで、ユーザーの事を何も考えていない。

>>701
あなたは恐らく、実務でレスポンシブでIE8以下を対応した事ないでしょ？
メディアクエリによる記述が存在するだけでIE8以下にどういう影響を与えるかをわかっていない。

下記も実務レベルではありえない。
＞だからリキッドレイアウトにさえしておけば、レスポンシブデザインに
＞おける最大サイズ用一つだけで十分。

フォントサイズや画像の指定（src振り分け）はPCと同じで良いわけがない。
（PC用に作った画像をスマホではただ縮小して完了なんて大手企業には通用しないぞ）
メディアクエリかjsでの振り分けが必ず必要。

jQueryを使うようなプログラマならCSSは必須技術だって話は同意。

議論には勝たなきゃならないって強迫観念は一種の病気じゃないかと思う

>>706
> あなたは恐らく、実務でレスポンシブでIE8以下を対応した事ないでしょ？

だから、お前、なんのデバイスでIE8を使ってるんだ？
俺が対象したことがあるのは最低でも14インチぐらいのディスプレイだぞ。

レスポンシブ対応における一番大きなブレークポイントを超えた
超えたサイズでしかIE8を使っていない。

IE8以下のレスポンシブ対応ってお前何やってるのさ？

> メディアクエリによる記述が存在するだけでIE8以下にどういう影響を与えるかをわかっていない。
メディアクエリの記述はIE8以下には全く影響を与えない。
書いてないのと同じ。

お前、馬鹿なんじゃないのか？って思ってきてるからなｗ

> フォントサイズや画像の指定（src振り分け）はPCと同じで良いわけがない。

は？ 何を言ってるんだ？ 今してるのはIEの話だろ。
IEが動くスマホなんかないのでIE用=PC用として考えていい。

スマホはメディアクエリを使ってスマホ用に置き換えるだけの話。
メディアクエリに対応していないならば、PC用が表示されるだけだ。

IEに関してはむしろ今後積極的に無視できれば無視すべき存在

そうでなければサポート切れＯＳを使い続ける人が一向に減らないし
新ブラウザEdgeと旧ブラウザとの互換性で結局自分たちの首を絞めることになる

>>702
「JavaScriptを使わずに作る」
現実離れしすぎ。　そんなサイトがあるなら具体的にURL教えて。

初期状態で見た目上非表示にしておきたいコンテンツをCSSのdisplay:none;にしてしまったら、
どういう事かわかるでしょ？

>>703
IE無視していい環境かどうかもわからないのに、いきなり無視した記述はどうなの？

jQueryで3～5行くらいで済むことが、
CSSでは困難を極める例はたくさん今手元に持ってるぞ。
具体的に例題出そうか？　

>>704
ずっと平行線で終わると断言できる。

>>705
技術者ではない人間がこんなサイトみてないだろうし、あなたに絡もうともしないでしょ。
SEO業者はクソに同意だが順位は無視できない。

>>710
> 「JavaScriptを使わずに作る」
> 現実離れしすぎ。　そんなサイトがあるなら具体的にURL教えて。

そんなこと言っていない。
JavaScriptを使わずに、HTMLとCSSで作れるならば
そうするべきだって言ってるだけ。

> 初期状態で見た目上非表示にしておきたいコンテンツをCSSのdisplay:none;にしてしまったら、
> どういう事かわかるでしょ？

CSSが有効なら初期状態非表示になるけど？ｗ

>>708
試しに、W3CとSEOを意識した記述で↓答えてみて。

imgタグ（altはhoge）の横幅をPCでもスマホでもコンテンツの最大幅に合せるようにする。
※IE8対応

>>710
> IE無視していい環境かどうかもわからないのに、いきなり無視した記述はどうなの？

無視して良い環境を前提にしているから問題ない。

古い環境が必要なら、古い環境用につくればいいのよ？
どちらでもいい場合はCSSを使うべきだって言ってるんだから。

> jQueryで3～5行くらいで済むことが、
> CSSでは困難を極める例はたくさん今手元に持ってるぞ。
俺も知っているから別にどうでもいい。

それよりも重要なのは、処理効率の良さやバグの少なさ。
コードで書くのは命令型、CSSは宣言型。
コードはすぐに複雑になるのだから、なるべくコードはないほうがいい。
これからのためにもjQueryに依存しないほうがいい。

>>712
質問に条件が足りないな。

画像のサイズはどうする？ コンテンツの最大幅が可変の時、

その最大幅に応じて画像サイズも変化させるのか？
つまりコンテンツの幅が、153ピクセルの時
ピッタリ153ピクセルの画像にしないといけないのか？
それともブラウザにリサイズをまかせていいのか？

これはJavaScriptを使って作った場合でも同じ話だと思うが。

あと面倒くさいから、ヒント書いておくわ。
ちょっと読んできてからにしてくれ。

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

もう一つヒント

<div id="contents">
<img src="～.png">
</div>

#contents {
width: 200px;
background-color: gray;
}
img { width: 100% }

ここまで書けば、追加の条件を
後出しであーだーこーだ言ってくれるだろうｗ

> > 初期状態で見た目上非表示にしておきたいコンテンツをCSSのdisplay:none;にしてしまったら、
> > どういう事かわかるでしょ？
>
> CSSが有効なら初期状態非表示になるけど？ｗ

回答が意地悪だったから追加しておこう。

本当に言いたいことが何かはわからんが、
どちらにしろやり方は二つある

cssファイルをJavaScriptが有効なときだけ読み込むか、
modernizrのようにhtml要素のclassにJavaScriptが
有効なときだけjsというクラスをつける。

あとはCSSで自由にやれる。

CSSを理解していないとこういう発想は生まれない。
だからjQueryを使うようなプログラマはCSSの知識は必須。

>>714
画像のサイズは当然だが画像実寸の等倍までを最大とする。
下限は不要。

>>718
すでにヒントという形で答えは書いた。
あとは足りない条件の追加よろｗ

> imgタグ（altはhoge）の横幅をPCでもスマホでもコンテンツの最大幅に合せるようにする。
> ※IE8対応

なお、IE8はPC版のみの対応でよい。
（だってIE8が動くスマホなんて無いものｗ）

>>717
そんな面倒な事を本当に実装しているの？？
display:none;を.hide()にする
それだけじゃん？

>>719
画像実寸が最大値にならないよ。↓

<div id="contents">
<img src="">
</div>

<style>
#contents {
width: 500px;
background-color: gray;
}
img { width: 100%; }
</style>

> 画像実寸が最大値

意味不明ｗ

>>721
> そんな面倒な事を本当に実装しているの？？
> display:none;を.hide()にする

全然面倒じゃないけど？ これだけ。
<script>document.body.className += " js";</script>

（HTML要素の参照方法調べるのが面倒かつbody要素でも
同等のことができるんでサンプルまで）

これだけですべての箇所がCSSで対応可能になる。
こんなことも出来ないんじゃプログラマとしての技術も未熟だろうねｗ

>>723
例えば、下記画像の実寸は213pxだが、
設置時に実寸より引き延ばされて画像が荒れている状態（213px以上で表示）というのは、
デザイン品質上、一般的に許されないんだよ。

>>725
じゃあ大きくすればいいだけじゃね？ｗ

>>724
なるほどね～。

だが、俺はhide()でやるわｗ

>>726
いや、それでいいならそれでいいがｗ
いや、それでいいや

それとも1ピクセルの違い毎に
画像を用意しろって話かなぁｗ

何がいいたいのかわからないよね
PC版用とブレークポイント毎に
一つ用意すればいいだけでは？

>>727
> だが、俺はhide()でやるわｗ

そんなことやると、HTMLが複雑になると、
非表示するために大量のコードが必要になるぞ。
見た目の制御はCSSに統一した方がいい。

どうしても議論で人を負かしたいんだ！

３０分ぐらい外で散歩でもしてきてゆっくりと深呼吸してこいよ

>>731
さっき飯買いに外に行ってきたぞｗ
30分はかかってないかもしれんが

>>729
もう今となってはどうでもよくなってきてしまったんだが、
実寸までは親要素に合わせ可変し、実寸以上に親要素が大きくなった場合は
実寸までのサイズでとどまる。
答えなくてもいいよ。問題の出し方が悪かったから。

>>730
大量のコード？
セレクタが少しだけ面倒になるだけでは？
どんなケースだろうか

>>733
> 実寸までは親要素に合わせ可変し、実寸以上に親要素が大きくなった場合は
> 実寸までのサイズでとどまる。

max-widthでも使えばいいだけじゃね？
CSSでこんなことができるなんて知らなかった。
って言いたそうｗ

だからウェブプログラマならCSSの勉強をしろとだね


> 大量のコード？
> セレクタが少しだけ面倒になるだけでは？

JavaScriptで見た目を変えようとすると、
そのうちあちこちにコードが増えるんだって
将来の話。

>>734
＞max-widthでも使えばいいだけじゃね？
つIE8

>JavaScriptで見た目を変えようとすると、
>そのうちあちこちにコードが増えるんだって
>将来の話。
そうなのか。

> ＞max-widthでも使えばいいだけじゃね？
> つIE8
つ対応

http://developer.mozilla.org/ja/docs/Web/CSS/max-width
Internet Explorer
基本サポート
7.0

>>736
後だし条件で恐縮だが
それぞれの大きさの画像の最大値をmax-widthで可変にしたいが
1つ1つの画像の実寸サイズはいちいち数値で指定したくない。
※img{width:100%;}と同じような書き方

jQueryであればそれぞれの画像の横幅を取得し、
その値をそれぞれの画像のmax-widthにするという内容

>>737
これか？

画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合 [イメージ,幅]
http://tips.nishishi.com/css/image-max-width.html

>>738
それだ。
でIE8ねｗ

max-widthはIE8対応してるな。

>>740
ところがどっこい、
>>738の記述をしてIE8で確認してみるといい。

つまりやったことなかったということだね？

>>741
だからなに？

お前が言ったjQueryでmax-widthを
指定するっていうのも結局CSSで制御しているわけだけだし

俺ならビルド時に画像の幅を指定するかな。
そうすればJavaScriptいらなくなって軽くなるしな。

適切な技術を使い分けようぜ？ｗ

これで解決するんじゃねーの？
いちいちお前の仕事をやる必要ねーけｄ－なｗ

http://design-spice.com/2011/09/22/responsive-web-desig/

Flexible Images

画像もウインドウサイズに合わせて可変するようにします。
img{
max-width: 100%;
height: auto;
width /***/:auto;　/*IE8のみ適用*/
}
IE8ではmax-widthで横幅しか縮小されないバグがあります。
対策としてはimgタグのwidth属性を記述しないか、
IE8にはwidth:autoを指定します。

>>742
jsだけでもcssだけでもダイナミックプロパティでもできる。
但しCSSだけだとクソ記述が入るから微妙。

画像の幅を指定するというのは
imgのwidth属性にピクセルで数値を入れるという事？
それだとそもそも可変にならなくなるよ。

>>743
もう調べなくても回答しなくてもいいｗ

俺のクソ仕事つーか、
レスポンシブのIE8をちゃんとやってきてるなら
そのバグくらい知っているハズだったからな。

プログラム詳しいのもわかったし、
webプログラマーがCSS覚えるべきってのも同意だし、
これ以上は特にないよｗ

>>710
> 初期状態で見た目上非表示にしておきたいコンテンツをCSSのdisplay:none;にしてしまったら、
> どういう事かわかるでしょ？
初めから display:none にする必要は全くない
JavaScript で [aria-hidden=true] を加えればいい
あるいは、document.styleSheets を書き換えても良い

>>746
いや、
CSSでやれるとこはCSSでやるつーからdisplay:none;使うのかと思ったわけで、
jsでやるならそれこそhide()でいいんじゃないの？

aria-hidden=trueなんて初めて聞いたよ。サンキュー

>>747
JS無効で初期表示display:noneが上手く動かないという意味だと理解したから反論したのだが

>>748
そうか。きっとそうだな。もう何がなんだか・・orz

くそ、だまされた。

これで動くじゃないか。
モダンIE使ってIE8で動かしてみたが
これで動くな。

738 自分：Name_Not_Found[sage] 投稿日：2015/09/27(日) 22:16:35.98 ID:???
>>737
これか？

画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合 [イメージ,幅]
http://tips.nishishi.com/css/image-max-width.html