HTML/CSS の質問に優しく答えるスレ 28

HTML/CSS の質問に優� ..

2:Name_Not_Found
17/07/17 01:17:51.43 .net
>>1
乙

3:Name_Not_Found
17/07/17 01:20:03.55 .net
一応前スレの話題ネタも貼っておきます。
634 Name_Not_Found sage 2017/05/27(土) 15:07:18.61 ID:???
ｽﾚﾘﾝｸ(hp板:604番)
>>ちなみにCDNは接続できない地区またはブロックされることもあります。日本でも繋がりにくいときもありますので業務用としてはお薦めできません。
>>606
>> ひでーなこれｗ
ここまでの間違い。バカなのかわざとなのか
晒し上げのネタにちょうどいいやｗ
>>612
>> CDNが接続できないとか何いってんだって感じだなｗ
探せばそういうのあるかもしれんけど、
繋がりにくいとかありえんわ。
そんなに不安ならGoogleのCDNでも使ってりゃいいだろ
>>613
>>そんなことしたら中国からの注文なくなるだろ・・・
やり取り見てわかったことは↓
別スレの604は「 CDNは接続できない地区またはブロックされることもあります。」と可能性を主張したのに対して
>>606 は間違いと主張。
>>612 ありえんわと否定。
決定的と思われる発言がこれ「そんなに不安ならGoogleのCDNでも使ってりゃいいだろ」
やり取りを見ていて、おそらくCDNのデメリットを理解されていない。大規模商用サイトの構築経験がない方だとわかります。
デメリットを熟知されているのであればGoogleのCDNと言う説明レスではなく回避策やフォールバック等の説明をするべき。
以降は調べたのか理解されたようですね。

4:Name_Not_Found
17/07/17 01:22:31.48 .net
>>3
おまえなぁ、、、

5:Name_Not_Found
17/07/17 01:24:13.03 .net
>>3
ローカルール違反ですよ？
> 終わった話を蒸し返すやつはこのスレにくるな！！！

6:Name_Not_Found
17/07/17 01:25:12.30 .net
>>3
スレのルールも守れんのか？

7:Name_Not_Found
17/07/17 01:26:06.26 .net
CDNの話はやめれよ

8:Name_Not_Found
17/07/17 01:28:57.14 .net
CDNの話自体は問題ない。
>>3が消えればいいだけ

9:Name_Not_Found
17/07/17 01:30:21.24 .net
996 Name_Not_Found sage 2017/07/17(月) 01:12:38.59 ID:???
次スレはテンプレにCDNの話題禁止って書いて欲しい。いい加減にしてくれ。

10:Name_Not_Found
17/07/17 01:30:54.11 .net
>>9
ほんこれ。

11:Name_Not_Found
17/07/17 01:34:14.49 .net
>>3
>>8
荒らしの関係者かよ

12:Name_Not_Found
17/07/17 01:38:01.49 .net
なんでCDNの話を禁止するのかわからん

13:Name_Not_Found
17/07/17 01:47:16.16 .net
>>12
結論が出てるのとスレチなのと飽きた

14:Name_Not_Found
17/07/17 01:53:02.38 .net
だからこれからは普通にCDNの話を取り入れる

15:Name_Not_Found
17/07/17 01:53:36.20 .net
普通にスレチだろ

16:Name_Not_Found
17/07/17 01:56:39.99 .net
全世界のインターネット人口の数割はGoogleのCDNが使えないことを理解できましたか？

17:Name_Not_Found
17/07/17 02:12:35.20 .net
GoogleのCDNだけじゃありませんよ。
全世界のインターネット人口の数割はGoogleを使えないのです。
それに対して何か思うことはないのですか？

18:Name_Not_Found
17/07/17 02:21:15.07 .net
何か思うところと言われても、そんなのその国の問題だろ？
知ったこっちゃねーよ。
はなっから相手にしてない。見れるなら見れれば良いし
見れないなら見れないで何もかまわない
その国の言語でサイト作ってるわけじゃないんだから
どっちみち読めないはずだ。

19:Name_Not_Found
17/07/17 02:24:47.02 .net
>>16-18
ローカルルールを守れ

20:Name_Not_Found
17/07/17 02:49:06.05 .net
>>19
ローカルルールを守らないやつに対してのレスは問題ない

21:Name_Not_Found
17/07/17 03:12:37.31 .net
ならおまいも基地外達の仲間だな

22:Name_Not_Found
17/07/17 06:12:54.95 .net
10pxの正方形のマス目を画面上全体に表示させるときに画像や動画以外の方法で書く場合どんな方法がありますか？
できるだけ負荷のかからないやり方を教えてほしいです。

23:Name_Not_Found
17/07/17 08:04:22.81 .net
>>22
すげー気持ち悪いことしようとしてるな
┛のbackgroundを並べれば済むと思うし、それが一番負荷が少ない
それが嫌ならcanvas＋jsとか

24:Name_Not_Found
17/07/17 12:07:41.70 .net
>>22
15年前くらいにyoutubeでhtmlでモナリザの絵（かなりリアル）を描く動画があったけど
そういうやつかな？
テーブルタグのセルに色を付けて描くようだったけど描画はたぶんプログラム組んでたんじゃないかな。
今やるなら<p>タグかなんかをcssでやればいいんじゃね

25:Name_Not_Found
17/07/17 16:45:49.75 .net
前スレ
943 名前：Name_Not_Found[sage] 投稿日：2017/07/16(日) 22:48:18.02 ID:???
pいらなくね
俺ならulにclass(.foo)付けて
.foo li、
.foo a
にcssを割り当てるかな
li内で改行するときpいるだろ

26:Name_Not_Found
17/07/17 16:59:08.11 .net
>>22
画像系なしならテーブルやボックスを並べてボーダーで表示となります。
HTMLとcss以外の方法だとJavaScriptを使い目的を実現する方法もあります。
その場合は専用スレから再度質問してみて下さい。

27:Name_Not_Found
17/07/17 19:07:36.65 .net
前スレ終わってしまったので再度
ul > li > p {…}
div > div > p {…}
など、idやclassつけるは別にして相関関係の>や+は速度面などの点であったほうがいいのでしょうか？
DOM構造の変更はありません

28:Name_Not_Found
17/07/17 19:33:57.44 .net
インデントをスペース4つでやったら問題起きますか？他の言語と共用のIDE使ってるんで自動的に4つでインデントされるんです

29:Name_Not_Found
17/07/17 19:44:21.19 .net
>>27
セレクタは子孫から調べる
ul > li > p {…}
の場合、まず
ｐ
を全部探す
その次に
li
を探し、
li>p
とする
メモリはほんの少し抑えられるけど、ほとんど変わらないはず。一度テストしてみて
>>28
問題は起きない。スペース4つが送信され、表示上は半角スペース一個になるだけ
速度や通信量面では圧縮もあるし、差は無いと考えていい
つまり考えなくていい
個人的にはスペース二個の方が見やすいと思うけど、そこは好みかね

30:Name_Not_Found
17/07/17 21:09:36.15 .net
22の者です。
>>26
少し重くなるみたいですがdiv使ってできました。
ありがとうございました。

31:Name_Not_Found
17/07/17 23:12:31.46 .net
>>28
今どき言語ごとにインデント設定できないIDEとかゴミだから捨てた方がいい
ただのエディタのsublimeですら設定できるのに

32:Name_Not_Found
17/07/17 23:16:51.42 .net
>>29
>セレクタは子孫から調べる
でだいぶ違うのか疑問でした。ありがとうございます。

33:Name_Not_Found
17/07/18 01:41:59.34 .net
なんでdiv使うかｗ
ソースが膨らむ飾りだからこそ、文字数の少ない<p>を勧めたのに・・

34:Name_Not_Found
17/07/18 02:08:06.59 .net
>>33
文字数が少ないという理由で使うタグを決めるな
divもしくはspanがこの場合は適切だ

35:Name_Not_Found
17/07/18 03:09:16.65 .net
JavaScriptの提案したりpタグだったり珍獣脳過ぎだろ

36:Name_Not_Found
17/07/18 08:12:27.56 .net
>>33
なんでもいい、と思って進めると大抵よくないことが起きる
そんなしょーもないところこそ謎の手抜きじゃなく、キッチリしておいたほうがいい
強いて言えば、ファイルが数GBになるような場合に「手抜き」として採用していい手段

37:Name_Not_Found
17/07/18 11:24:09.16 .net
>>34,>>36
海外のサイト見てみい
アイコンには<i>タグ使用したりもしてるで

38:Name_Not_Found
17/07/18 14:12:13.67 .net
だめだこりゃ

39:Name_Not_Found
17/07/18 18:53:09.43 .net
>>37
i要素はhtml5にある
URLﾘﾝｸ(www.html5.jp)
＞i 要素は、代替音声や気分など、質が異なるテキストだと示す形
まさにアイコンの事で何も間違っていない

40:Name_Not_Found
17/07/18 20:36:24.37 .net
屁理屈ばかり言う人や間違いを認められない人って使えないよな

41:Name_Not_Found
17/07/18 20:54:54.43 .net
>>33
レイアウト、動的理由、いくらでも使う理由はあるが.。。。

42:Name_Not_Found
17/07/18 20:56:24.52 .net
>>35
誰のこと？

43:Name_Not_Found
17/07/18 21:25:46.18 .net
>>33=>>37？
俺の勘違いならいいがHTMLのファイルサイズを少なくする目的でpやiタグ使えということ？
まさかそんなことないよな
たかが知れてるそんなことでメンテ性やSEOを捨てるなんてありえないからな
各タグは各用途に応じて使う、までは前提としていいかな？

44:Name_Not_Found
17/07/18 21:27:11.35 .net
>>43
アホ相手にするのは時間とスレの無駄だからやめてちょんまげ

45:Name_Not_Found
17/07/18 21:45:06.39 .net
>>26は別人だが、不自然にHTMLを書き換えてdiv並べるよりjsの選択肢の提案は十分あり
画面上とはおそらくwindow内を指しているのだろうが、divだとスクロールした下をどこまで並べればいいかということもある
その点、また負荷や好みはあとは本人次第
・・・という文を書いたが>>44さんの意向でもういいや

46:Name_Not_Found
17/07/18 22:50:43.53 .net
>>42
ここはHTMLとCSSのスレであってJavaScriptの質問スレではない。
それを考えれば容易に特定できる。

47:Name_Not_Found
17/07/18 22:58:20.23 .net
>>43
適切な日本語を使いましょう。
言い訳してることは理解できるけど文章がおかしいです。

48:Name_Not_Found
17/07/18 23:42:27.52 .net
>>47
全然おかしくない
多少濁点省略してるのが君の脳内で処理できてないだけ
というか2chでいちいち細かい

49:Name_Not_Found
17/07/18 23:48:11.83 .net
>>46
誰？に対してその回答は変だな
22→26のことならCSSよりJavaScriptの方が無難だから１つの提案として添えただけだろう
スレを回答者もわかってるからこそ誘導しているしCSSでも答えている

50:Name_Not_Found
17/07/18 23:49:08.95 .net
>>47
はっきりしてるのは、今回の例で<p>を
使うのは明らかに間違いだってこと
その前提はOK？

51:Name_Not_Found
17/07/18 23:49:37.04 .net
>>49
JavaScriptの話題をするやつは全員敵だ

52:Name_Not_Found
17/07/18 23:54:17.35 .net
>>50
今回の例てどれだよ
あおそらくわかるがその前提がずれてると今後かみあわなくなるからアンカで示してくれ
>>51
ようは知らないからと

53:Name_Not_Found
17/07/18 23:57:01.08 .net
jsでやるべきことを無理やりDOM変えたり無理やりCSSだけでやろうとするほうがおかしい
提案くらいは別にいいだろよ

54:Name_Not_Found
17/07/19 00:09:58.90 .net
図星で顔真っ赤状態？

55:Name_Not_Found
17/07/19 00:11:20.54 .net
>>50
なんで？

56:Name_Not_Found
17/07/19 00:17:26.11 .net
>>52
↓こいつが間違いってこと
33 名前：Name_Not_Found[sage] 投稿日：2017/07/18(火) 01:41:59.34 ID:???
なんでdiv使うかｗ
ソースが膨らむ飾りだからこそ、文字数の少ない<p>を勧めたのに・・

57:Name_Not_Found
17/07/19 00:17:53.55 .net
>>55
pを使う理由がおかしいから

58:Name_Not_Found
17/07/19 00:19:17.15 .net
pはテキスト用として認識しているから？

59:Name_Not_Found
17/07/19 00:21:00.93 .net
テキスト用じゃない。
pはparagraphの略

60:Name_Not_Found
17/07/19 00:23:03.65 .net
>>57
だからなんでおかしいのかを聞いてるのだよ
その中に文を入れてるのだからむしろ段落として正しいだろに
それともliの中に入れてることがおかしいと？

61:Name_Not_Found
17/07/19 00:23:50.01 .net
>>60
pの中に文を入れるってどこの話？
今回は全くわからんからアンカで示してくれ

62:Name_Not_Found
17/07/19 00:26:25.64 .net
>>61
>>27
しかないがな
他にどれがある？

63:Name_Not_Found
17/07/19 00:28:11.53 .net
＞今回の例で<p>を使うのは明らかに間違い
どれ？なぜ？
はっきりせいやｗ

64:Name_Not_Found
17/07/19 00:30:26.76 .net
>>22 この人が主。
10pxの正方形のます目。
指定は画像や動画以外の方法。
出来る限り負荷を減らしたい。
>>23 htmlやCSSを使った方法を一つも提案していない。
>>24 htmlやCSSを使った方法を提案している。
>>26 htmlやCSSを使った方法で提案している。
>>30 主から26の方法で解決したとレス。

65:Name_Not_Found
17/07/19 00:31:12.40 .net
>>63
え？書いてあるじゃん
もしかして自分の都合の悪い例は見えない人？
話しにならんな。

66:Name_Not_Found
17/07/19 00:32:25.03 .net
>>62
> しかないがな
それじゃないだろ？
なんで>>33が見えないの？
都合が悪いから？

67:Name_Not_Found
17/07/19 00:32:50.91 .net
>>64
23が珍獣脳ってこと？

68:Name_Not_Found
17/07/19 00:34:36.92 .net
はぁぁぁぁぁぁぁぁぁぁぁ
>>27の話に決まってるだろ！！！！！！
お前らみんなばぁーーーかかか！

69:Name_Not_Found
17/07/19 00:35:09.98 .net
>>27の話なんか誰もしてない
バカはお前。恥ずかしいからってごまかすな

70:Name_Not_Found
17/07/19 00:36:22.17 .net
また日本語に不自由してる基地外がわいてるのかよ・・
ホントわかりやすいな

71:Name_Not_Found
17/07/19 00:36:43.47 .net
>>68
珍説すぎてワロタ

72:Name_Not_Found
17/07/19 00:37:10.90 .net
一人のマヌケが>>27の話だと勘違いしていたってこと？
はい、みなさん、かいさんｗｗｗ

73:Name_Not_Found
17/07/19 00:38:45.74 .net
>>64
23は0点
24と25は100点
結果的にこれなんだよね。

74:Name_Not_Found
17/07/19 00:39:12.86 .net
いや流れは>>27からだろ
というか一部のやつ”今回”とか曖昧にしないでアンカつけろよ

75:Name_Not_Found
17/07/19 00:40:58.66 .net
あ、74だけど68は別人ね

76:Name_Not_Found
17/07/19 00:41:51.54 .net
>>74
ついてるじゃん？
本当にお前、都合の悪いレスは見えないんだね？

77:Name_Not_Found
17/07/19 00:42:38.17 .net
>>75
別人なら別人でいいが、お前が>>27の話だと
勘違いしているマヌケであることに違いはないよ？

78:Name_Not_Found
17/07/19 00:43:01.02 .net
煽りはやめとけ間違いを指摘するだけにしておけ。

79:Name_Not_Found
17/07/19 00:43:31.02 .net
どうみても>>22の話です。
22 名前：Name_Not_Found[sage] 投稿日：2017/07/17(月) 06:12:54.95 ID:???
> 10pxの正方形のマス目を画面上全体に表示させるときに画像や動画以外の方法で書く場合どんな方法がありますか？
> できるだけ負荷のかからないやり方を教えてほしいです。
30 名前：Name_Not_Found[sage] 投稿日：2017/07/17(月) 21:09:36.15 ID:???
> 22の者です。
>
> >>26
> 少し重くなるみたいですがdiv使ってできました。
> ありがとうございました。
33 名前：Name_Not_Found[sage] 投稿日：2017/07/18(火) 01:41:59.34 ID:???
> なんでdiv使うかｗ
> ソースが膨らむ飾りだからこそ、文字数の少ない<p>を勧めたのに・・

80:Name_Not_Found
17/07/19 00:44:09.02 .net
>>78
揚げ足とり
間違いを認めない人
日本語に不自由してる人
またいつものはじまったか・・

81:Name_Not_Found
17/07/19 00:44:57.50 .net
間違いを素直に認められないやつは
煽るしかないわなｗ

82:Name_Not_Found
17/07/19 00:45:09.24 .net
>>74
どうみても>>22の話
>>27が>>29で終わってるのは最低限のスキルがあれば誰でも分かる
これで>>27の話と思ってるなら単純に無知としか言いようがない

83:Name_Not_Found
17/07/19 00:45:51.04 .net
うるせぇぇぇぇぇｌ
>>27の話に決まってるだろ！！！！！！
お前らみんなばぁーーーかかか！

84:Name_Not_Found
17/07/19 00:46:37.78 .net
>>22は>>30で終わっとるじゃん

85:Name_Not_Found
17/07/19 00:47:41.69 .net
ここまであほうな奴はいないと思う。
またjQueryスゲーの自作自演がはじまったんじゃね？

86:Name_Not_Found
17/07/19 00:48:40.16 .net
>>84
話は終わってるのに、divじゃなくてp使えとか
明らかな間違いを言い出した>>33がいるって流れ

87:Name_Not_Found
17/07/19 00:48:49.08 .net
>>76
ついてないのあるぞ
>>50とか

88:Name_Not_Found
17/07/19 00:49:33.73 .net
>>85
図星ならいつも通りの骨髄反射レスがあるはず

89:Name_Not_Found
17/07/19 00:49:57.88 .net
>>86
うむ、ともあれ>>33が間違いってのは全員一致だろう

90:Name_Not_Found
17/07/19 00:50:25.80 .net
>>85
jQueryの流れにしてもいいけど
今は>>74をおちょくる流れだろ
遊ばせろやｗ

91:Name_Not_Found
17/07/19 00:51:51.32 .net
>>88
つまり今日の流れは脊髄反射レスには見えないってことだなｗ
俺もうまくレスできるようになったもんだｗ

92:Name_Not_Found
17/07/19 00:52:39.36 .net
>>87
だからあんたの目には、ついてないレスしか見えないんでしょう？

93:Name_Not_Found
17/07/19 00:53:54.70 .net
>>89
全員一致だけど、本人は自演でも疑ってるんじゃないかねぇ

94:Name_Not_Found
17/07/19 00:56:19.75 .net
一人が複数の人を演じるのは自演って言うと思うけど
複数の人が一人（マヌケ）を演じるのは何ていうんだろう？

95:Name_Not_Found
17/07/19 00:58:20.84 .net
いや、複数の人が一人（マヌケ）を演じている場合、
その演じている人がマヌケ以外の書き込みをしている場合は、
一人が複数の人（自分とマヌケ）を演じてることになるから
これも自演か。なるほどなるほど

96:Name_Not_Found
17/07/19 00:59:22.75 .net
アンカつけないとツリー表示したとき抜けるんだよな

97:Name_Not_Found
17/07/19 01:01:26.57 .net
>>96
それは２ちゃんねるの機能じゃなくて
その人が使ってるビューワーのせいなので
しったこっちゃない。

98:Name_Not_Found
17/07/19 01:04:14.39 .net
見たら>>25もあるな
これ前スレからの流れでその変形再質問が>>27

99:Name_Not_Found
17/07/19 01:05:06.38 .net
だから>>27の話はしてない
いい加減諦めろや

100:Name_Not_Found
17/07/19 01:05:47.51 .net
>>97
いやアンカはある意味マナーでもあるぞ
雑談スレはいいが特にこういうスレは

101:Name_Not_Found
17/07/19 01:06:43.19 .net
マナーはルールではない

102:Name_Not_Found
17/07/19 01:07:08.39 .net
そろそろjQueryの話に戻すか

103: ◆Fht0Cjf8mE
17/07/19 01:07:57.13 .net
すいません、前スレから解決していないのでお願いします…

ヘッダをposition:fixedにし、他複数のcssを設定しています
URLﾘﾝｸ(jsfiddle.net)
しかし、ページ内アンカと組み合わせると、main要素のmarginが消えてしまいました
URLﾘﾝｸ(www.gazo.cc)
何が悪いのか調べてみると、
document.getElementsByTagName('html')[0].offsetTop
document.getElementsByTagName('body')[0].offsetTop
が0、
document.getElementsByTagName('main')[0].offsetTop
は100になっています
（しかし、main要素は一番上に張り付いているように見えます）
色々試した結果、
・bodyのheightの100%を付け外しすると、marginがもとに戻る
ということが分かりました
marginが消える理由がどうしてもわかりません
これはどういう状況なのでしょうか
CSSはこのプラグインの一部です
slidebars
URLﾘﾝｸ(www.adchsm.com)
jsでmarginを付けなおしたりしましたが、うまく行きません
何か良い解決方法があれば、お願いします
念のためトリップを付けておきます
htmlファイルもアップロードしておきました。ご利用下さい。
URLﾘﾝｸ(www.dotup.org)

104:Name_Not_Found
17/07/19 01:13:22.60 .net
>>103
mainのmargin消えてね～じゃん。
mainのmargin増やしたり減らしたりしてみろ。

105:Name_Not_Found
17/07/19 01:16:47.29 .net
idなしなので揉めてる内容が良くわからないですな。
今来た物事からしたら揚げ足とりと間違いを認めない屑が顔真っ赤にしていると言う認識でok？

106:Name_Not_Found
17/07/19 01:22:08.30 .net
>>97
専ブラ使ってないの？

107:Name_Not_Found
17/07/19 01:22:56.20 .net
>>104
これが元の状態です
URLﾘﾝｸ(fast-uploader.com)
左がアンカーを踏み、右がmarginを増やした状態です
URLﾘﾝｸ(fast-uploader.com)
position-topがマイナスになっているように見えますが、それもありません

108: ◆Fht0Cjf8mE
17/07/19 01:24:37.14 .net
ブラウザが認識しているのは確かにmargin:100pxですが、どう見てもついているように見えません
なぜでしょうか…

109:Name_Not_Found
17/07/19 01:28:33.22 .net
jsfiddleだからじゃね？

110:Name_Not_Found
17/07/19 01:29:05.89 .net
>>105
重要な間違いを指摘するのは
揚げ足取りとは言わんで？

111: ◆Fht0Cjf8mE
17/07/19 01:30:07.53 .net
>>109
ローカルでも同じ現象が起きています
URLﾘﾝｸ(www.dotup.org)

112:Name_Not_Found
17/07/19 03:26:37.52 .net
>>23
問題外じゃね？

113:Name_Not_Found
17/07/19 03:27:46.12 .net
>>103
html,body の overflow:hiddenをコメントアウトしてみ
そしたらスクロールバーが２つ表示されるはず。
一つは、htmlだかbodyだかのスクロールバー
もう一つは、mainのスクロールバー
その２つのスクロールバーを見ながら、
mainをスクロールしたときとhtml,bodyをスクロールした時何がどう動くか？
そしてリンクをクリックした時、何がスクロールしているか？に
注目すればわかると思う。
まあ答を書くと、
1. overflow:hiddenにしたときhtml,bodyをスクロールすることはできない。
2. リンクをクリックすると、html,bodyがスクロールしている（が、1.により動かすことはできない）
ということだな。
この話は良いとしてjQueryの話しようZE！

114:Name_Not_Found
17/07/19 03:55:02.91 .net
>>112
既に終わったことだ。

115:Name_Not_Found
17/07/19 17:46:16.17 .net
>>112
ここはhtmlとcssの質問スレ

116:Name_Not_Found
17/07/19 17:54:03.94 .net
何このスレ・・・・
やっぱりみんなストレスたまってんのかな
ただでさえこだわりの強そうな集団だし

117: ◆Fht0Cjf8mE
17/07/19 18:42:41.00 .net
>>113
うおおおおおおおおお神！神！神！
ありがとうございました、やっと理解できました
marginがなくなってるとばかり思い込んでいて、ドツボにはまっていました
本当にありがとうございました、

118:Name_Not_Found
17/07/19 21:25:14.94 .net
質問スレでIDなしやアンカなしが混乱の元
誰もがいちいち最初から読むわけではないからな
アンカなしは直前（か近く）に対してとしてしまうことがある

119:Name_Not_Found
17/07/19 23:10:22.75 .net
>>117
紛らわしいのは、アンカーでhtmlかbodyがスクロールして
その後にcssのheight:100%、overflow:hiddenが発動して
scrollTopやoffsetTopが0に変わってしまうところやね。
見かけ上スクロールしてないように見えてしまう

120:Name_Not_Found
17/07/20 22:03:42.82.net
<li>が数不確定で幾つかあり、高さ設定はせずブラウザまかせです。
例えば<li>の２番目と３番目を入れ替えるにはどうしたらいいでしょうか？

121:Name_Not_Found
17/07/20 22:15:42.31.net
2番目の<li>を選んで、CTRL+X
3番目に移動して、CTRL+V

122: ◆Fht0Cjf8mE
17/07/20 22:46:23.60.net
>>120
冗談抜きで>>121、もしくはjs
何がしたいのかさっぱり分からん

123:Name_Not_Found
17/07/21 00:28:29.81.net
>>122
orderでいいだろ

124:Name_Not_Found
17/07/21 21:20:34.95 .net
HTMLはいじれないのです。CSSでお願いします。

125:Name_Not_Found
17/07/21 21:21:07.89 .net
>>24と>>33は俺なんだが、自分のカキコが火種で荒れててワロタｗ
格子模様にマークアップもクソもあるか。
そんな所divにしようがpにしようがSEOの影響なんて皆無だぞ。
まあ文字数制限なんて考える必要もない環境かもしれないがな。
また荒れそうだw
>>120
DOMレベルから順番変更するならinsertAfter();だな

126:Name_Not_Found
17/07/21 21:23:32.79 .net
>>125
そもそもSEOが眉唾ものだから
正しい要素を使えってだけの話。

127:Name_Not_Found
17/07/21 21:25:34.52 .net
ちなみに、文字数制限が厳しいところなら圧縮かけるので
divをpに置き換えた所でどんなに文書が大きくても
10バイト程度の差しか生まれない

128:Name_Not_Found
17/07/21 21:31:42.81 l/gIsoSL.net
PHPでDBから抽出したデータをリスト表示したいんだけど
こういう書き方って一般的？お前らが現場で見ても怒らない？

<table border='1'>
<tr><th>id</th><th>name</th></tr>
<?php
foreach($rows as $row){
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo htmlspecialchars($row['name'],ENT_QUOTES,'UTF-8'); ?></td>
</tr>
<?php
}
?>
</table>

129:Name_Not_Found
17/07/21 21:33:37.16 .net
>>127
昔div厨っていう言葉があってだなｗ
装飾、入れ子、構造と意味を持たない要素とブロックレベル要素になんでもかんでも
divの入れ子だらけのサイトを作るやつはソースが見にくすぎるから敬遠されたもんだ。
まあいまはsectionとか色々できたから良いが・・

130:Name_Not_Found
17/07/21 21:37:11.36 .net
>>129
だから今は意味がない（デザイン目的の）
要素だからdiv使うって言ってんの
sectionでも代わりにはならん

131:Name_Not_Found
17/07/21 21:42:24.48 .net
div厨の何が駄目かって、divを使うべきじゃない所に
divを使うのがダメなわけで、
正確には、正しくない要素の使い方をしているのが
ダメだって言われてるわけ。
だから段落でもないものにpを使うのは、
div厨と何も変わらんのだよ

132:Name_Not_Found
17/07/21 21:50:24.68 .net
>>131
日本語の使い方がへんです。

133:Name_Not_Found
17/07/21 21:51:01.77 .net
>>131
例えば小さなブロック内で背景を3段階のレイヤーで装飾する際に
<li><div><div><div>要素1</div></div></div></li>
<li><div><div><div>要素2</div></div></div></li>
<li><div><div><div>要素3</div></div></div></li>
こんな風にかいちゃうわけ？
自分ならこうするが。
<li><div><p><span>要素1</span></p></div></li>
.
.

134:Name_Not_Found
17/07/21 22:03:16.93 .net
>>139
おまえ馬鹿なのか？
中に書くテキストが何かによって使う要素は変わるって
話をしているのに「要素1」とかいう何の手がかりもない
テキストを書いたって判断できるわけ無いだろ。
段落テキストなのかタイトルテキストなのか、
それによって使う要素は変わる

135:Name_Not_Found
17/07/21 22:10:04.54 .net
>>133
あのな、最初はデザインのことなんか、
考えないで作れ
<li><p>段落テキスト</p></li>

これ以外でデザインのためだけに
何かを入れるならdivかspanしかない。
divかspanの使い分けかたは
URLﾘﾝｸ(developer.mozilla.org)
> <div> 要素がブロックレベル要素の汎用コンテナであるのに対し、
> <span> はインラインレベル要素の為の汎用コンテナの役割を果たします。

136:Name_Not_Found
17/07/21 22:20:52.67 .net
リストは普通箇条書きに使うものだから
段落ってあまりないよね？

137:Name_Not_Found
17/07/21 22:22:58.12 .net
>>125
SEOはliのことだろう
あと蒸し返さなくていいから

138:Name_Not_Found
17/07/21 22:24:37.56 .net
>>136
それはその通り。
でもまあ無くはない。
どちらにしろ言いたいことは、
デザインを抜かした状態で、文章の意味から適切な要素を決めるのだから
デザインの有無でdivやspan以外を変えることはありえないんだよ。

139:Name_Not_Found
17/07/21 22:25:14.18 .net
>>137
SEOは詐欺だからそんなもので使う要素を決めてはいけない

140:Name_Not_Found
17/07/21 22:29:04.42 .net
>>134
liで括っているだろ？リストだよ。
みかん、りんご、バナナ
>>135
デザイン見て構造考えるのは普通だろ。
複雑なデザインカンプをコーディングしたことないってのがよくわかる。
そういう状況に陥った事ないからイメージできないだけだと思うぞ。
>>133はどうすんだ？
背景の3重装飾構造。つまり背景なんだからブロックレベルにするか？
それが4重5重だたらどうする？

141:Name_Not_Found
17/07/21 22:30:09.22 .net
>>139
そんなことは誰も言ってないが

142:Name_Not_Found
17/07/21 22:31:14.15 .net
>>140
> デザイン見て構造考えるのは普通だろ。
普通じゃねぇよｗ
あー、反論は良いや、
どこのサイト見て勉強した？
それ書いてみ。どこでデザイン（見た目）見て
構造考えるべきって書いてあるサイト

143:Name_Not_Found
17/07/21 22:33:01.54 .net
先ず最初に
<li>テキスト</li>
か
<li>
<p>テキスト</p>
<p>テキスト</p>
</li>
でもってデザイン上必要なら<div>や<span>

144:Name_Not_Found
17/07/21 22:33:44.40 .net
>>140
> 背景の3重装飾構造。つまり背景なんだからブロックレベルにするか？
ブロックに対して背景を割り当てたいならdivだろうし
インラインテキストに対して背景を割り当てたいならspanだろ

145:133,140
17/07/21 22:34:14.45 .net
議論しても無駄な気がしてきた。
恐らくHTMLからいきなりコーディングして後から簡易デザインするような
ブログみたいなサイトしかやったことないような人に感じてきた。

146:Name_Not_Found
17/07/21 22:36:33.27 .net
>>134
だよな
自分ならこうするが言われてもはあ、そうですかとしか言いようがない

147:Name_Not_Found
17/07/21 22:37:18.73 .net
>>145
自爆してるぞお前ｗ
デザインからいきなりHTML作ってるだろ？

148:Name_Not_Found
17/07/21 22:38:59.22 .net
いまどきまだいるんだな？
見た目からHTMLを書き出すやつって。
見た目はCSSって習わなかったのか？
どうしても不可能なときだけdivやspanを使うんだよ
デザインはCSSを使うのだから、デザインからHTMLを作ることはない
文章が最初にあってそれを構造化する形でHTMLは書くんだよ

149:Name_Not_Found
17/07/21 22:40:15.61 .net
>>142
残念ながらこっちは全て実務からの経験だ。本職ね。

150:Name_Not_Found
17/07/21 22:42:18.41 .net
クソ会社が多い中、本職と言われても
それで何を証明しようとしているのかわからん

151:145,149
17/07/21 22:43:00.76 .net
おまえらのレベルが良く分かった。
まあ専業プログラマーやコーダーなんてそんなもんだ。
何を言ってもわからないと思う。イメージができないだろうから。

152:Name_Not_Found
17/07/21 22:44:00.98 .net
いや、本職だぞ！やっと手に入れた正社員なんだぞ！
仕事でやってる俺のほうが実力上に決まってるだろ！
みたいな感じか？
井の中の蛙っていうか、相手も本職だと思わんのかね？
ずっと無職だったのか知らんが、本職は希少な立場じゃないぞ？

153:Name_Not_Found
17/07/21 22:45:01.52 .net
まあ予想通りの展開だなｗ
だからどこで（サイト or 本）で勉強したのか聞いたのにｗ
まあ独学かくそサイトだろうな。

154:151
17/07/21 22:45:20.15 .net
>>152
文脈から判断できないところもコーダーあるあるだな。
言いたかったのは教科書や机上理論ではなく全て仕事の実務で経験してきた手法という事。

155:Name_Not_Found
17/07/21 22:48:32.32 .net
>>154
仕事の実務っていうのは仕事してりゃ誰でも経験詰めるんだよ
自分から行動を起こさないと手に入れられない
教科書や机上理論をお前は知らんのだろ？
片手落ちじゃん。
こっちは机上も実務も両方とも知ってると言うのに

156:Name_Not_Found
17/07/21 22:50:47.33 .net
>>155
どのサイト見た？何の本読んだ？なんて普通聞かない。
受験生かよｗ
常に色々見てるから。

157:Name_Not_Found
17/07/21 22:52:07.15 .net
いつまで続けんだ、クソくだらねえ

158:Name_Not_Found
17/07/21 22:55:14.66 .net
>>156
なんで普通聞かないと思ってるんだ？
色々見てるとか、みてね～から言えないんだろｗ

159:Name_Not_Found
17/07/21 22:56:20.55 .net
うるせー、おれは本職なんだぞ！

160:Name_Not_Found
17/07/21 22:57:25.23 .net
まああれだな。
勉強しないで独学でやってきたやつは
このようにだめことをいうんだぞっていう
いい例になったよ

161:Name_Not_Found
17/07/21 23:00:47.24 .net
俺的にはこれがカルチャー的な意味で
ショックだったわｗ
> 残念ながらこっちは全て実務からの経験だ。本職ね。
こんなこと堂々といえるやつがいるんだな。
4月に入社したばかりの新人かね？

162:Name_Not_Found
17/07/21 23:03:16.73 .net
俺含む一部の第三者もちょこっと割り込む上に、IDないからわかりづらい
やり合ってる本人らはいいかもしれんがｗ

163:Name_Not_Found
17/07/21 23:12:23.44 .net
>>162
結果だけ受け取れば良いよ。
つまりそいつは誰も擁護しなかっただろ？ってこと

164:Name_Not_Found
17/07/21 23:13:42.11 .net
>>133の最後の行はおかしいな
背景を3段階のレイヤーでということは３つ同じ目的だろ？
同じ目的なのに違うタグ使うとは普通有り得ない
指摘してる人がいるように４重ならどうするのか
<p>はあくまで段落、<div><span>で３重囲いしたほうが自然

165:Name_Not_Found
17/07/21 23:21:01.62 .net
本職の言うことが聞けないのか？

166:164
17/07/21 23:23:43.21 .net
>>165
俺に？

167:Name_Not_Found
17/07/22 00:06:46.48 .net
みんな落ち着けよ
<美女>男<美女>

168:Name_Not_Found
17/07/22 00:38:00.82 .net
>>165
本職にもピンきりありますから…
匿名掲示板で権威を主張したいなら
自分がどれほど偉いのかって証明できるソースがないと無理ポン

169:Name_Not_Found
17/07/22 00:39:43.00 .net
便所の落書きで何言ってるんだこいつw

170:Name_Not_Found
17/07/22 01:37:22.78 .net
HTML5 Doctor Resources
URLﾘﾝｸ(html5doctor.com)
div, span については、
これの日本語のフローチャートを参照

171:Name_Not_Found
17/07/22 09:18:39.10 .net
■■■
■■■
■■
と980のエリアに横320のBOXがあって左右のBOXは各左と右のマージンを0に(親要素の左右幅にフィット)、その他のマージンは10pxにしたい場合どんなテクニックがありますか？
今はflexで簡単にとおもいきや結局フロートと変わらず親要素にマイナスマージンを指定しています

172:Name_Not_Found
17/07/22 16:37:56.40 .net
ドリームウィーバーでホームページカタログのサイズをまとめて変更したいのですが、置換で画像のサイズ値を置き換えると画像が表示されなくなります
問題として何が考えられるでしょうか

173:Name_Not_Found
17/07/22 18:23:11.71 .net
>>172
操作ミス

174:Name_Not_Found
17/07/22 18:58:50.07 .net
融通の利かなそうなマニュアル頭ばっかりだな
柔軟な発想持てよ
web制作会社に就職できないぞ

175:Name_Not_Found
17/07/22 20:03:41.39 .net
>>172
dwの使い方なら専用スレあるんじゃないのか？

176:Name_Not_Found
17/07/22 21:34:07.97 .net
>>174
融通が利くとはこのことですか？
<li><div><p><span>要素1</span></p></div></li>

177:Name_Not_Found
17/07/22 23:29:54.84 .net
>>148
机上の空論だな
つまりお前の言う手法はデザインカンプを見ないで
原稿の状態だけでHTMLの構造化、コーディングはできる言っているんだぞ？
普通はな、デザインが出来上ってからコーディングや文書構造を考えるんだよ
デザインカンプ見てから、リスト部分であればliタグで括るかとか
表組みであればtableを使用するかなどレスポンシブも考慮した上でな
まあ理解できないだろうけど

178:Name_Not_Found
17/07/22 23:32:07.22 .net
>>176
appleの公式サイトのグローバルナビがliの中にどうしてspanを使うか考えてみろ

179:Name_Not_Found
17/07/22 23:34:24.16 .net
教科書がとか教わるとか学ぶとか言っているヒヨッコ共は
世の中のサイトのソースを見る習慣を付ける事を勧めるよ
技術は人に教えてもらうものではない

180:Name_Not_Found
17/07/22 23:59:57.04 .net
>>177
いや、普通にできるだろ？
誰もdivやspanを使うことを否定なんかしてないんだから
お前はできないんだろ？
そこから技術力に大きな差があるって気づけよ

181:Name_Not_Found
17/07/23 00:05:18.41 .net
それにデザインカンプ見てから作るってのもおかしい話だよな？
デザインカンプは作るものだろ？
まるで他人からこれ作って言われて
ただ単にそのHTMLを書いているだけの人みたいだ。

182:Name_Not_Found
17/07/23 00:19:15.33 .net
>>179
世の中のサイトのソースなんて普通に見てるよｗ
お前がやってること全てやってる + 教科書などで勉強してる。

183:Name_Not_Found
17/07/23 11:11:53.11 .net
教科書とか言ってる時点でたかが知れてるなｗ
DWかSublimeあたり使って、不要になった大量のベンダープレフィックス付けながらドヤ顔で生のcss書いてfloatレイアウトしてそう。
>>171
それは俺も散々探したけど無理
URLﾘﾝｸ(stackoverflow.com)
jsで制御するしか方法はないけどjsで制御するのはスマートじゃないので結局親にマイナスマージン付けるしか無いね。

184:Name_Not_Found
17/07/23 11:20:33.03 .net
>>171
一応補足、要素数が固定の場合なら疑似要素や空要素作って要素数を調整する方法がある。
無理なのは要素数が不特定の場合ね。

185:Name_Not_Found
17/07/23 12:28:09.45 .net
>>178
話の流れが読めてないようだな
つか133擁護はもう諦めろ
決着はついてる

186:Name_Not_Found
17/07/23 12:42:02.83 .net
>>183
> DWかSublimeあたり使って、不要になった大量のベンダープレフィックス付けながらドヤ顔で生のcss書いてfloatレイアウトしてそう。
例が具体的だなｗ
まるでお前がよく知る環境は
そうなんですって言ってるようだｗ

187:Name_Not_Found
17/07/23 13:10:48.44 .net
>>171
全てにmargin-bottom: 10px
それをfloatで並べた後
○○:nth-of-type(3n+2) {
margin-left: 10px;
margin-right: 10px;
}

188:Name_Not_Found
17/07/23 16:38:02.91 .net
>>183
そしてバージョン管理はファイル名の末尾に_20170723までがセット

189:Name_Not_Found
17/07/23 18:12:12.36 mTAsIzTK.net
>>183
浅いなｗ

190:Name_Not_Found
17/07/24 01:11:38.91 .net
優しく答えるスレ…？

191:Name_Not_Found
17/07/24 02:44:05.90 .net
>>171です
結局昔と変わらずなんですね
左右フィットしたカードレイアウトなんて一番出てくるケースなのでそろそろなにか対応プロパティ作ってくれてもよさそうなのに

192:Name_Not_Found
17/07/24 07:11:36.53 .net
>>173 >>175
遅くなりましたがありがとうございます
ソフトのことならソフトのスレで質問するのがベターですね、失礼しました

193:Name_Not_Found
17/07/24 14:08:58.52 .net
>>191
その手の要望はnthとcalcでだいたい解決してるじゃん？
それに対するショートカットが欲しいなら
自分でmixin作るなりすればいいのよ

194:Name_Not_Found
17/07/24 14:15:12.42 .net
nthはスマートじゃない
calcは無関係

195:Name_Not_Found
17/07/24 14:19:48.95 .net
クソワロタ
浅いって言われたこと根に持つなよｗｗｗ

196:Name_Not_Found
17/07/24 16:51:44.14 .net
>>183
まずは日本語を正しく使えよ

197:Name_Not_Found
17/07/24 17:05:50.81 .net
実際お前らって今どきのタスクランナーやメタ言語、ちゃんとしたIDEバリバリ使ってるの？

198:Name_Not_Found
17/07/24 17:20:06.63 .net
>>197
タスクランナーは使うね
やっぱ楽だし

199:Name_Not_Found
17/07/24 17:21:30.68 .net
ああ、使うけど場合による
外注先がそういうの出来ませんて時や
こっちで作って納品後、客もいじるような案件では使わないこともある

200:Name_Not_Found
17/07/24 21:13:49.04 .net
>>191
flexとか使えば別の方法があるかもな
ただ俺はブラウザ対応を広く取るたちで事足りてることをわざわざ狭めるのは好まないのだよ
nth使ったその手のことはCSSの基本の解説サイトや書籍にたいてい出てる
少なくとも他にも影響が出かねないネガマージンよりましだと思うがな
答えて損したわ

201:Name_Not_Found
17/07/24 22:15:56.44 .net
>>181
ふむ。やはりそうだな
小さい規模のサイトや好き勝手にコーディングしながらデザインを考えて
都合に合わせてデザイン変更できるような自分用のサイトみたいなのしかやったことないんだろ？
経験が浅いから分業や制約のイメージが付かないんだよ

202:Name_Not_Found
17/07/24 22:17:29.53 .net
ホント浅いよな。

203:201
17/07/24 22:24:35.68 .net
>>181
試しにさ、大手企業へ原稿もらってから納品するまでのフローを言ってみて
クライアント・代理店・ディレクター・制作というメンバーを意識して
それとどこの間で戻しが発生するかなども

204:201
17/07/24 22:29:16.44 .net
それと制作内でのフローも
デザイナー、フロントエンド、バックエンドのフロー
どのタイミングでクラに報告するかなど

205:Name_Not_Found
17/07/24 22:31:45.02 .net
「き・・教科書にか・・書いてない・・」
必死でネットで調べそうｗ

206:Name_Not_Found
17/07/24 22:32:39.02 .net
>>200
損も特もないだろ…
そもそも最初からflexでやってるってかいてあるしべつにネガティブマージンで影響なんてでないだろ？
むしろバグるブラウザがあるならそれこそnthに対応してるかすら怪しいけど

207:Name_Not_Found
17/07/24 22:41:38.73 .net
>影響なんてでないだろ？
え！
>バグるブラウザ
対応と・・・

208:Name_Not_Found
17/07/24 23:18:45.78 .net
>>207
わからないなら煽るなよ無知

209:Name_Not_Found
17/07/24 23:22:49.31 .net
見た感じ
わかってるから>>207の書き込み。
わかってないは>>206。
だいたいネガティブマージンなんて普通よほどでないとやらんぞ。

次ページ