HTML/CSS の質問に優� ..
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。
だいたいネガティブマージンなんて普通よほどでないとやらんぞ。
210:Name_Not_Found
17/07/24 23:24:41.50 .net
わかってるなら例を挙げられるわな
どうぞこちらで
URLﾘﾝｸ(jsfiddle.net)
211:Name_Not_Found
17/07/24 23:39:28.14 .net
自演うざい
212:Name_Not_Found
17/07/25 00:01:42.06 .net
俺も最初はネガティブマージンきめえって思ってたけどnthでやるよりスピード速いからネガティブマージンで揃えるようにしたわ
213:Name_Not_Found
17/07/25 00:11:31.66 .net
ネガティブマージンはキモいんじゃなくて
バッドノウハウなんだよ
CSSの機能不足でやりたいことが素直に
できない場合の逃げ道。
だから、ちっネガティブマージン使わないと
できないのかよCSS糞だな。という意識は持ってないといけない
214:Name_Not_Found
17/07/25 00:25:35.46 .net
>>213
誰が決めたの？
215:Name_Not_Found
17/07/25 00:35:18.97 .net
URLﾘﾝｸ(www.w3.org)
Negative values for margin properties are allowed, but there may be implementation-specific limits.
216:Name_Not_Found
17/07/25 00:38:53.88 .net
w3cの言ってることなら形骸だな、よし
217:Name_Not_Found
17/07/25 01:22:18.63 .net
>>205
218:Name_Not_Found
17/07/25 01:37:53.76 .net
>>213には同意
CSS3の草案段階までは実際にネガティブマージンで対応しているサイトも多かった。
ハックみたいな後ろめたさは常にあったな。
219:Name_Not_Found
17/07/25 01:41:53.52 .net
ネガマージンは確かIE6では効かなくて
IE7ではzoom:1を入れることによって効いたり効かなかったりの記憶がある。
IEが正式に認めていないから正攻法ではないというイメージだった
220:Name_Not_Found
17/07/25 18:51:48.45 .net
>>206
なぜ出ないと言い切れるかな
省略して書いてるかもしれないし、今後変更あるかもしれないし
中規模以上複数になると見通しが悪くなりがち
上で書いてる人がいる通りネガティブマージンはいわば苦肉の策だよ
使わないで済むなら使わないにこしたことない
221:Name_Not_Found
17/07/25 19:11:56.00 .net
まあ何事も正しい理解が一番の近道だよね
例えばマージンひとつとっても、どのような仕様のもので
各ブラウザがどのように実装しているのかって正しく理解していれば
マイナス値を与えることで何が起こるのか、起こらないのかも判断できる
「そう言われてるから」「なんとなく悪そうだから」って理由で
一概に使う使わないを決めるのが一番クソダサイよね
222:Name_Not_Found
17/07/25 21:08:21.58 .net
>>218
同じく同意
ともあれ質問のタイル割り程度で使うには残念
ああこの人こうやるんだ、と思ってしまう
223:Name_Not_Found
17/07/25 21:19:03.21 .net
>>221
良さそうだからとか悪そうだからではなくて、
一般論として「新しい技術ができると今までよりも簡単に実装できるようになる」
という前提がある。
ネガティブマージンというだけなら単にマージンがマイナスってだけだが、
何かを実装しようとする時、例えば上下の中央の位置にブロックを寄せるなど
要望としては簡単のように見えるものを、ネガティブマージンを使って複雑に実装して
どうにか実現できる。という状況が悪い。
本来は、よくある要望であれば、それを一発で実装するための機能がCSSで標準化されないといけない
それをネガティブマージンつかえばできるんだぜー（どや）という考え方がダメということ
本来は簡単に作れるようにするべきことを、ネガティブマージンを使って逃げるから
バッドノウハウと言われる。CSSにこんな機能が足りないと声を大にして言わなければいけない。
224:Name_Not_Found
17/07/25 21:32:20.37 .net
>>223
自分が腑に落ちないことを「複雑だ」って一括りにしちゃうのもクソダサイよね
例えばある要素のマージンに負の値を設定したときに何が起こるのかって正しく理解できてれば
問題が起こるなら使わない、問題ないなら使うって判断が出来るもの
自分はそうならないように頑張ろうと思います
225:Name_Not_Found
17/07/25 21:48:54.21 .net
>>224
人の話聞けよｗ
> ネガティブマージンというだけなら単にマージンがマイナスってだけだが、
マージンに負の値を入れた時の動作なんて分かってんの。
そんなの簡単すぎるだろｗ
もっと上のレイヤーの話だ。あるデザインを作ろうとした時、
それをシンプルに実装できるようにCSSはあるべきだって話をしてる。
頑張って実装するもんじゃないんだよ。
それはCSSに機能が足りないとはっきり言わないといけない。
226:Name_Not_Found
17/07/25 21:55:25.55 .net
>>225
なんでシンプルじゃないの？
負の値を受け付けるプロパティに負の値を与えることが
227:Name_Not_Found
17/07/25 21:56:13.24 .net
borderの角丸で例えれば理解できるかな？
昔CSS2の頃はborder-radiusがなかった。
もちろんなくても頑張れば実装できるが、
それはCSSの機能不足だと言わなければいけない点だった
それと同じこと
228:Name_Not_Found
17/07/25 21:59:01.29 .net
>>227
未定義と不足は関係ないじゃん
left: -10px;
transform: translateX(-10px);
margin-left: -10px;
この中でなんでマージンだけがシンプルじゃないの？
仕様に外れるようなこと無くない？
229:Name_Not_Found
17/07/25 21:59:18.12 .net
>>226
あるデザインを作るのが難しい！必殺技ネガティブマージンだ！
これを利用すれば難しいデザインでも実装できるんやで（どや！）
という時の話
そもそもの命題として「実装が難しいデザイン」の話なので
複雑であるという前提。そこに議論の余地はないよｗ
複雑なデザインが合った時、ネガティブマージンを使って実装るんじゃなくて
そのデザインを実装しやすい機能がCSSには必要
230:Name_Not_Found
17/07/25 22:00:33.49 .net
>>228
うん。
だからお前はネガティブマージンを理解する段階の話しかしてない。
俺はネガティブマージンを利用して実装する複雑なデザインの話をしてる。
（当然ネガティブマージンは理解してる）
噛み合わないはずだよねｗ
231:Name_Not_Found
17/07/25 23:19:33.39 .net
>>223
横だが、話している事はごもっとも
しかし実際問題としてCSSの仕様がクソだろうがなんだろうが
目の前のデザインを一刻も早くクソCSSで対応しなくてはならないのが現実だった
デザイナーや営業にそんな事を言っても理解されるわけもなく
裏技でも何でもいいから駆使してシレっと対応できるやつが早く家に帰れる世界
どれだけ手法を知っているか、どれだけ情報持っているかという部分ではドヤっていいんじゃない？
まあ今の時代にネガティブマージンでドヤってたら完全にアホだｗ
232:Name_Not_Found
17/07/25 23:25:37.34 .net
CSSが使えない環境（楽天のメルマガとか）で
コンテンツ毎に角丸の枠線付けるとか最悪だったわ
こういうのとか、IEが絶対的な基準であった事とかを知らない世代が
そろそろ増えてくる頃だ
今はクローム基準でIEのバージョンすら確認しないだろうな
233:Name_Not_Found
17/07/25 23:52:38.88 .net
>>230
違う違う
なんで負のマージンだけ複雑なのかな？って聞いています
マージンだけでないのなら他に何があるのかも知りたいです
A. 複雑であるかないかの閾値は何で
B. その理由はどこにあって
C. 誰が決めているのかも知りたいです
もし個人の感想であるなら、なぜそれを質問スレで書くのかも知りたい
というHTML/CSSの質問です
優しく教えてください
234:Name_Not_Found
17/07/25 23:54:07.05 .net
>>233
> なんで負のマージンだけ複雑なのかな？って聞いています
だからその答はすでに答えてる。
負のマージン自体は簡単。
複雑なデザインをネガティブマージンを使って実装するのが
バッドノウハウだと言ってる
235:Name_Not_Found
17/07/25 23:57:50.31 .net
>>234
デザインが複雑であるかどうかの閾値は？
と意地悪な横槍を入れて見るw
236:Name_Not_Found
17/07/26 00:06:08.95 .net
>>235
複数のプロパティを組み合わせて
一つのものを作る的なのは全部複雑かな
例えば複数行に対応したellipsisとかね
URLﾘﾝｸ(klutche.org)
それに対するCSSのあるべき姿は
（ -webkit-）line-clamp を標準化しろということ
標準化してるけどブラウザ対応がまだなだけだっけ？
237:Name_Not_Found
17/07/26 00:09:23.17 .net
>>236
やっぱ個人の感想じゃん…
238:Name_Not_Found
17/07/26 00:22:22.62 .net
>>237
個人の考えの話で個人の考えを言うなって
いうのは意味が無いと思うが？
お前は自分の考えを持ってないの？
世の中誰かが問題だって考えて（＝個人の考え）
それを直していくというのに？
それって単に言われたことだけしかできない人間だよね。
239:Name_Not_Found
17/07/26 00:29:15.68 .net
横レスだけどそういう主張の場ではないっつー話なんじゃね？
もうやめなよ
240:Name_Not_Found
17/07/26 00:41:55.21 .net
>>239
> 横レスだけどそういう主張の場ではないっつー話なんじゃね？
それは本人に聞かないとわからないね。
でも言えないんじゃないかな？
だってここ個人の意見をいうことは禁止されてないしね
241:Name_Not_Found
17/07/26 00:46:36.35 .net
>>238
よく言った！その通り！
俺はお前を支持するぞ！
お前の書き込みは見逃したくないから
コテハンつけるかID出してくれ頼む
242:Name_Not_Found
17/07/26 00:47:19.83 .net
↓こういう条件のデザインを再現しようとしたとき
・コンテナ幅600px
・カードは1行あたり3個並べる
・カード間のマージンは20px
・コンテナ端とカード間に余白はない
お前ら的にはこれが最強でOKか？
.container {
width: 600px;
margin: auto;
.list {
display: flex;
flex-wrap: wrap;
width: calc(100% + 20px);
transform: translateX(-10px);
.item {
width: calc((100% - 60px) / 3);
margin: 10px;
background-color: #ccc;
}
}
}
243:Name_Not_Found
17/07/26 00:47:55.81 .net
>>241
俺コテハン無視する派なんで
付けないし相手のコテハンも気にしない
244:Name_Not_Found
17/07/26 00:53:08.14 .net
>>242
そういや昔はそれネガティブマージン使ってやっていたなぁ。
カード間のマージンを入れつつ、コンテナ端とカードの間の余白をなくすために。
今はcalcが使えるなら、ネガティブマージン必要なくなったのか
245:Name_Not_Found
17/07/26 01:24:47.30 sD70SVcl.net
>>244
しーっ
246:Name_Not_Found
17/07/26 01:33:38.91 .net
>>245
ごめんなコテハン付けて無くてｗ
247:Name_Not_Found
17/07/26 13:07:22.22 .net
>>243
この幸せもんめ！
248:Name_Not_Found
17/07/26 16:01:48.23 .net
>>243
気づいてなくてワロタ
249:Name_Not_Found
17/07/26 16:50:14.19 .net
なんでそんな想像力豊かにバグがー他に影響がーって言えるのに似たようなスタイルで1列が3つの時4つの時～が想像できないの？
nthじゃ列数かわったら対応できないだろ
あとcalcはサファリのちょっと古いの対応してないから仕事じゃ使えないだろ
その点ネガティブマージンなら手を加えずに列数を変えられるよ？
中規模以上のサイト～っていうならそれこそ流用範囲が広いほうが楽でしょ
250:Name_Not_Found
17/07/26 17:07:24.92 .net
>>249
calc使えないほど古いSafariまで気にするなんて優しい
俺いつもアクセスログ見せて
Chrome、Firefox、Safariはみんな勝手に最新になるから古いのはもういいよね！
カバーするならお金頂戴！って言っちゃうわ
251:Name_Not_Found
17/07/26 17:45:26.34 ajPIrm/I.net
本来スクリプト系かもしれませんが、
切り分けの判断に迷ったのでここで質問させてください。
ページをスクロールさせるとメニュー（コマンド）UIが追随してくるデザインのページがあるのですが、
ブラウザ設定およびアドオンWebDeveloperのスクリプトoffにしても表示が消えません。
スクリーンショットの邪魔になっているので表示させない方法ありますでしょうか。
252:Name_Not_Found
17/07/26 18:45:38.07 .net
>>251
それはほぼJS関係ないから
デベロッパーツールでDOMから消しちゃうもよし
CSSからposition: fixedを消すもよし
デベロッパーツールの出し方はchromeなら右クリ→検証
他のブラウザも似たようなもん
253:Name_Not_Found
17/07/26 18:50:29.25 .net
いやー仕事してると先方の担当がMac使っててosがちょっと古いなんてこと多々あるよ。
そうすると最新版のサファリは入らない。
ブラウザシェアなんて関係なく先方が確認できるかどうかだよ
いちいちブラウザシェアはこうなんで～って伝えてたら話こじれるわ
254:Name_Not_Found
17/07/26 18:52:39.86 .net
>>249
実務でcalc使えないとか老害でしょ
255:Name_Not_Found
17/07/26 18:56:30.51 .net
>>253
-webkitつけても？
そこまで古いとcalcどころかflexやtransformまで動かないでしょ、やばない？
256:Name_Not_Found
17/07/26 19:14:22.97 .net
>>253
言いたいことはわかる
けどSafariでcalcが使えないっつーことはSafari5、OSX10.5
当時の他ブラウザはIE7、Firefox1.5、Chromeはリリース前
OSバージョンで7つ、10年前のOS使ってる人がいないとは思わんけど希少だろう
そこまでサポートするのはやっぱり優しい
257:Name_Not_Found
17/07/26 19:40:30.75 ajPIrm/I.net
>>252
できました、ありがとうございます！
258:Name_Not_Found
17/07/26 20:20:52.46 .net
>>249
>nthじゃ列数かわったら対応できないだろ
対応はできるが書き換えが必要と言いたいのかな
少なくとも質問の件は固定だからな
259:Name_Not_Found
17/07/26 21:13:11.55 .net
話がズレてるがSafariとか古いブラウザ対応とか
必要ならやるしかないのよ
そうじゃなくて古いSafariがcalcに対応していないのはなぜか？
それは標準化対応できていなかったってことじゃないんだよ。
当時はまだCSSのcalcが存在しなかった。
話が戻ってきたね？ そう昔のCSSは機能不足だってこと。
機能不足だからネガティブマージンとかハックまがいのテクニックを
使うしかなかったが、calcできて楽になったろ？
使いにくいものは使いにくいとはっきり言って
CSSの進化を促さないといけない
260:Name_Not_Found
17/07/26 21:19:29.87 .net
>>259
もういい、もう休め…
そういうのはこんな質問スレじゃなくて
WGに参加してやればいいんだよ
261:Name_Not_Found
17/07/26 21:19:58.45 .net
calc便利だがそれは制作側の都合でたいていのクライアントましてユーザーからは見えない話
デメリットの説明は必須だから対応ブラウザを取るケースが多い
案件ごとに好きに選べばよろし
262:Name_Not_Found
17/07/26 21:24:06.54 .net
>>260
最後にレスするのは俺だｗ
263:Name_Not_Found
17/07/26 22:32:42.20 .net
ｽﾚﾘﾝｸ(news板)
現時点で最強のブラウザになったということ？
264:Name_Not_Found
17/07/26 23:28:32.00 1wEkcjTM.net
googleの検索結果の説明が変になってしまったので、何とかしたいと思います
タイトル、URLは問題ありません
しかし説明文が
「おかけ間違いの無いようにお願いします／住所／営業時間…」
と電話番号の注意書きが最初に来るようになってしまいました（電話番号はその注意書きの前に記載しています）
”おかけ間違いの無いようにお願いします”の部分をどのようにすれば、検索結果に表示されにくくなるでしょうか？
strongなどで強調ができるのは分かったのですが、逆が分かりませんでした
265:Name_Not_Found
17/07/27 00:41:43.81 .net
>>259
老害w
266:Name_Not_Found
17/07/27 03:27:28.99 .net
>>264
総本山の説明を見るといいかも
URLﾘﾝｸ(support.google.com)
267:Name_Not_Found
17/07/27 07:29:15.99 5qBadt2H.net
>>266
ありがとうございます、そちらは既に実行しております…
268:Name_Not_Found
17/07/27 07:45:44.65 .net
calc実務で使ってる奴はios6以下とAndroid4系は切り捨ててんの？
それでクラの検証通るのは羨ましいわ
楽な仕事ばっかやってんだなぁ
269:Name_Not_Found
17/07/27 08:51:02.91 .net
>>268
何言ってんだよ、営業に頑張らせてんだよ
営業に対してはこっちからも数字示して突き上げて、それを切り捨てれば利益倍になるって言ってある
んなアホらしいことやっとれんわ
270:Name_Not_Found
17/07/27 09:47:13.62 .net
>>268
もう休めよおじいちゃん
271:Name_Not_Found
17/07/27 13:39:09.65 .net
>>268
正しくはandroid4.3以下とiOS5以下な
calc使えないブラウザってflexまで使えないし、うちでは別予算貰えない場合は完全に切り捨ててるよ、非効率的だし。
272:Name_Not_Found
17/07/27 14:42:26.82 .net
うちもiOS5は別料金だなー
iOS大国の日本でもシェア0.05%切ってるしね
代わりといっちゃなんだけど
404とかと一緒に「あんたのUA古すぎんよ」的な表示出すページサービスしてる
273:Name_Not_Found
17/07/27 15:56:56.47 .net
大手企業や公共機関、お国関係がクラだと爺さん婆さんまで想定しているから
古いIEやandroidまで完全対応させられるんだよな
最初からフォーマットが用意されていて逃げられないんだよ
274:Name_Not_Found
17/07/27 16:28:53.16 .net
コーディングしながら、なんちゃってデザインをその場で作っているような人には
大手蔵の仕事なんてわかるまい
色覚バリアフリーなど障害者を想定したユニバーサルデザイン、
コーディングやブラウザ対応も当然ガイドラインでガチガチなルールで固められている
275:Name_Not_Found
17/07/27 17:06:21.79 .net
>>273
某鉄道が古いブラウザ切りつつあるから
インフラ系も時間の問題のような気もする
276:Name_Not_Found
17/07/27 19:56:34.70 .net
>>269
calcにしただけで倍になるのか、すげーな
277:Name_Not_Found
17/07/27 20:53:20.92 .net
タイル割り程度でネガティブマージンは使わないが
段組みの左（メイン）可変幅＋右（サイド）固定幅で使ってる
当時IE9対応必須だったし今更直す必要ないし
ちなみにこの方法で２段３段可変固定全ての組み合わせができる
278:Name_Not_Found
17/07/27 22:37:53.11 .net
CSS3が標準化されても
まだまだごにょごにょしなきゃ対応できないケースあるよな
状況に応じて何でも使える頭の柔らかさと引き出しの多さが重要よ
可読性、拡張性、汎用性、修正、更新のしやすさなど
重要になる要素は案件ごとに大きく変わるはずだから
SEOがとか構造化がとか教科書どおりとかさ
所詮それらも1つの要素でしかないのよ
279:Name_Not_Found
17/07/27 22:48:04.03 .net
>>274
そういうサイトに興味あるから見てみたいな
ちなみにどこ？
280:Name_Not_Found
17/07/27 23:10:06.02 .net
>>274
サイトのガイドラインとかコーディングルールとか
そんなの絶対守れないじゃん！みたいなことまでみっしり細かく書きまくってるの、よくあるよね
初めてサイトとそれを見たときに、既に形骸化しちゃってるのとか
>>279
某衣料系メーカーのサイトガイドラインなんか
印刷したらこのタイプのファイル2冊ぶん超えて驚愕した
URLﾘﾝｸ(i.imgur.com)
281:Name_Not_Found
17/07/28 00:05:54.40 .net
他人の土俵で相撲取るようなもんだよな
昔からあるような国民が使う重要なサイトは規制も多くて下手にリニューアルできないからか
古臭いデザインのまま放置されてたりする
過去たくさんの営業マンがアタックしてことごとく沈没したのだろうか
282:Name_Not_Found
17/07/28 00:14:40.95 .net
>>281
官公庁系は純粋に予算の問題だと思うけどなー
広報予算潤沢なところは広告代理店がっつり入っててバンバンリニューアルするし
283:Name_Not_Found
17/07/28 00:58:44.02 .net
>>281
そりゃそうだ
何か問題あったらどう責任取るの？に対抗できない
284:Name_Not_Found
17/07/28 03:35:22.57 .net
>>272
そのページうちも作ってるわー
レガシーブラウザにも対応するならプラス工数20～40%なんだけど
最初は対応しないで、しばらく運用して
レガシーブラウザでのアクセスが無視できないほど多かったら
そのとき改めてお代頂いて改修するってパターンをよく提案する
営業も割引してる感があって話しやすいと言ってた
実際に改修に至る割合は少ない
285:Name_Not_Found
17/07/28 09:36:46.94 .net
>>284
昔だとIEにのみ対応して、その他のブラウザは
対応しないのパターンだね
286:Name_Not_Found
17/07/28 09:48:02.09 .net
>>284
そういう情報って計測タグ入れれば取得できるものなのかな？
プロジェクトの進め方としてはとても良いね
287:Name_Not_Found
17/07/28 11:28:17.08 .net
やっと本職っぽいレスが増えてきな
実務といいつつ煽ってるだけの奴は所詮趣味サイトが実務だったってことかなw
288:Name_Not_Found
17/07/28 13:42:59.71 .net
本職だがIEは11以外を対応するときは割り増し料金だわ
289:Name_Not_Found
17/07/28 14:46:40.89 .net
もうIE6なんて検証環境がないよな
290:Name_Not_Found
17/07/28 15:00:54.18 .net
クロスプラットフォームの検証ツールにまだ残ってるだろ
291:Name_Not_Found
17/07/28 17:42:46.53 .net
ついさいきんイントラ用だけどie6やったよ
win7にXPmodeいれて検証したわ
292:Name_Not_Found
17/07/28 19:23:06.32 .net
>>289
>>290
やっぱ実機ほしいよね
うちは幾つかはVMだけど一通り用意して
リモートデスクトップで譲り合いながら使ってる
293:Name_Not_Found
17/07/28 22:49:58.06 .net
楽天でスマホページにiframeを埋めると
勝手に150ｐｘ高さがついてしまいます。
iframeの内容は、ドロップダウンメニューのhtmlなので高さを指定したくありません。
高さが勝手につくと言いましたが、150pxがどこに記述してあるかもわからず
heightをautoに指定しても、やはり150pxのままです。
どうにかして高さを無効化する方法ないでしょうか？
294:Name_Not_Found
17/07/28 23:26:21.15 .net
iframeを止める
インラインでcssを記述
cssで!importantでも付けて記述
なんとでもなる気がするが
295:Name_Not_Found
17/07/28 23:35:24.92 .net
>>293
どうなってるのか知りたい要素の上で右クリ→「検証」を選ぶと開発ツールが開く
左側がHTML、右側がスタイルで、右クリした要素が選択されてる状態になってる
たいてい知りたい要素の子孫要素が選ばれちゃってるから
適当に辿ってその<iframe>を探して選べば
その150pxがどのスタイルシートの何行目に書いてあるか、とか
自分で書いたスタイルはなぜ有効になっていないのか、とかわかる
次ページ最新レス表示スレッドの検索類似スレ一覧話題のニュースおまかせリスト▼オプションを表示暇つぶし2ch
2490日前に更新/251 KB
担当:undef