HTML/CSS のどんな質問にも優しく答えるスレ 35

1Name_Not_Found2018/12/10(月) 23:34:18.61ID:Xy1kPhq4
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

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

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

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

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

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

■関連スレ
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

2Name_Not_Found2018/12/11(火) 00:18:47.40ID:???
っていうか

3Name_Not_Found2018/12/11(火) 00:21:57.75ID:???
</li>
など省略してもいい終了タグはどれを省略しますか。全部?一部?
省略しない方が分かりやすいタグ一覧とかありますか?

4Name_Not_Found2018/12/11(火) 00:30:22.69ID:???
省略しない派

5Name_Not_Found2018/12/11(火) 00:38:30.54ID:???
>>3
省略しない。自動保管してくれるし、省略しても見にくくなるだけでメリットないし

6Name_Not_Found2018/12/11(火) 00:47:29.21ID:???
省略は絶対しない
百害あって一利なし

7Name_Not_Found2018/12/11(火) 06:27:07.78ID:???
997 名前:Name_Not_Found[sage] 投稿日:2018/12/10(月) 23:57:00.01 ID:???
確かにHTML4で実際H1を使うとなるとどうなるかわからんな
sectionタグもないわけだし

998 名前:Name_Not_Found[sage] 投稿日:2018/12/10(月) 23:57:27.14 ID:???
↑H1複数を使うと

8Name_Not_Found2018/12/11(火) 06:28:52.79ID:???
>>7
え?なんかなるの?
H2が複数あるのと何も変わらないんだけど

変わる要素なんかなにかあるのか?

例えば複数の論文を1ページに全部表示した
程度の話でしょう?

9Name_Not_Found2018/12/11(火) 06:30:15.77ID:???
992 返信:Name_Not_Found[sage] 投稿日:2018/12/10(月) 22:53:45.63 ID:???
>>989
全部テーブルで作ってた時代とか透過gifのスペーサーとかしってる?
そういうやつにも文句いってたんだよね?

10Name_Not_Found2018/12/11(火) 06:32:24.73ID:???
>>9
ネスケ4でCSSを使うと高確率で落ちる時代とか知ってる?

テーブルや透過gifでしか実現出来ない時代には、文句言うわけ無いでしょw
その時代であってもh1は複数使えたし、それでvalidだし
テーブルや透過gifを使っても、validなんだよ。

validなのに文句言うわけないよね?

もちろんCSSで出来るようになった時代には、CSSを使えって文句言ったけど?

11Name_Not_Found2018/12/11(火) 06:38:49.67ID:???
あれ?もしかして、テーブルや透過gifが、
HTML的にはvalidってあることに気づいてないのかなw
恥ずかしいね。その程度の知識で反論しちゃったんだw

12Name_Not_Found2018/12/11(火) 07:10:01.96ID:???
live2chのスレッド一覧はCSSカスタムできないんでしょうか

13Name_Not_Found2018/12/11(火) 09:37:05.17ID:???
>>12
大昔使ってたけど、まだあったのかアレ
live2chスレで聞いた方が良いと思う

14Name_Not_Found2018/12/11(火) 11:02:46.91ID:???
>>3
img、br、inputあたりは書かんね
あとmetaとlink

15Name_Not_Found2018/12/11(火) 11:11:20.15ID:???
>>3
</li>は省略する
省略すると、li要素の間のスペース問題無くなって楽
でもそれ以外は特に省略しない。
エディタで補完されるのでわざわざ消す事はしない

後は>>14と同じ

16Name_Not_Found2018/12/11(火) 11:23:29.49ID:???
>li要素の間のスペース問題

改行しなけりゃいいじゃない

17Name_Not_Found2018/12/11(火) 11:46:37.57ID:???
>>15
その対処法、定期的に書く奴いるよな
display: inline系指定したとき限定だし、li要素に限定する意味も分かんない(div要素/dt要素だって再現するのに)

あと、スペース問題いうなら、コピペしたときに行末に余計な半角スペースが入る問題にも注目してくれよ

18Name_Not_Found2018/12/11(火) 11:51:40.70ID:???
>>11
あれ?もしかして全部divでつくってvalidだから!っていってるアホ?www
テーブルで作ってるのにvalid云々の話持ち出してる時点でお門違いなんだよ
お前のほうが恥ずかしいわwww

19Name_Not_Found2018/12/11(火) 11:55:18.91ID:???
>>11
お前の理論だとh1にページ内の全テキストまとめて書いてあってもvalidだから許される!ってことだからな?その程度の仕事しかしてないのばれちゃったね

20Name_Not_Found2018/12/11(火) 11:57:09.22ID:???
>>3
開始タグごと省略する事はあるが、開始タグがあって終了タグを省略はしない
基本、HTML5以降を使うので、空要素は / で閉じてる

21Name_Not_Found2018/12/11(火) 12:07:44.63ID:???
>>18
> テーブルで作ってるのにvalid云々の話持ち出してる時点でお門違いなんだよ

validの話は複数のh1の話でしょう?

そこにテーブルの話を持ち出してくる時点でお門違いなんだよ
これは誰に言うべき言葉ですか?

22Name_Not_Found2018/12/11(火) 12:10:08.69ID:???
>>19
> お前の理論だとh1にページ内の全テキストまとめて書いてあってもvalidだから許される!

お前の理屈だと、aタグにページ内の全テキストまとめて書いたら許されないから、
aは使ってはだめだ!って言うことになるよw

俺はただ、h1を複数使ってもいいと言ってるだけ

お前は、全テキストまとめて書いたら許されないから
h1とかaとか使うなと言ってる。屁理屈もいいところだ

23Name_Not_Found2018/12/11(火) 12:14:10.59ID:???
>>20
> 基本、HTML5以降を使うので、空要素は / で閉じてる
空要素を/で閉じるのはXHTML(XML)の決まりでHTMLでは/で閉じない

/で閉じるように書いても無視されて、/で閉じるという効力はないので
空要素以外を/で閉じることが出来ないし、
逆に<br></br>と書いても空要素<br />と同じ意味にはならない

24Name_Not_Found2018/12/11(火) 12:15:57.03ID:???
>>10
最初にかったのが発売されたばっかりのpowerMac9500だったからネスケ4ももちろん知ってるけどだからなに?

25Name_Not_Found2018/12/11(火) 12:17:11.77ID:???
>>24
だから〜のあとは>>10の中に書いてある

26Name_Not_Found2018/12/11(火) 12:17:28.34ID:???
>>22
国語の成績低すぎるw

27Name_Not_Found2018/12/11(火) 12:21:30.67ID:???
はっきりさせとこうか。
HTML5では「要素を/で閉じることは出来ない」

HTML5では、タグ毎に空要素 or 空要素ではない or 終了タグが省略可能
と決まっている

brは空要素と決まっているから、<br>と書くのがHTML5では正しい。
ただしXHTMLとの互換性のため <br/> という書き方も許容された

くり返し言うが、この書き方に空要素という意味はない。
<br/>と書いても<br>と同じであるという意味になってる

28Name_Not_Found2018/12/11(火) 12:21:46.59ID:???
>>26
反論しろよw

29Name_Not_Found2018/12/11(火) 12:24:55.78ID:???
>>3
> </li>
> など省略してもいい終了タグはどれを省略しますか。全部?一部?

一部だな。ブロックとして書きたいか、一行で書きたいかで使い分ける

具体的言うと、liの中が短く一行で余裕を持って収まる場合には一行で書く

<ul

30Name_Not_Found2018/12/11(火) 12:26:54.44ID:???
途中で書き込んでしまった

>>3
> </li>
> など省略してもいい終了タグはどれを省略しますか。全部?一部?
一部だな。ブロックとして書きたいか、一行で書きたいかで使い分ける

具体的言うと、<li>の中が短く一行で余裕を持って収まる場合には一行で書く

<ul>
 <li>りんご
 <li>みかん
 <li>ばなな
</ul>

みたいに。もし<li>の中が長く、一行で確実に一行で終わらない場合は
<li>の後ろに改行を入れて複数行で書く

<ul>
 <li>
    いろんな長いメッセージやいろんなタグ
    いろんな長いメッセージやいろんなタグ
    いろんな長いメッセージやいろんなタグ
 </li>
</ul>

31Name_Not_Found2018/12/11(火) 12:30:20.95ID:???
>>30のような書き方はHAMLを見て、そういう書き方でも
わかりやすいんだからわざわざ</li>必須というルールを
作ることに意味はないなと思ったから

ちなみにHAMLではこのように書く

https://qiita.com/pecomeri/items/ffa45f3a6adc04a7f7fd

%ul
 %li リスト1
 %li リスト2
 %li リスト3


このような書き方をすることで短く書く・・・が独自の文法になるぐらいなら
HTMLの範囲内で省略できるところを省略して短く書いたほうがいいだろう

32Name_Not_Found2018/12/11(火) 12:35:43.84ID:???
>>28
aタグには意味がないから極論全部入っててもいいでしょ?html5ではブロック要素の外囲ってもokなんだし
h1は見出しって意味があるから全文入ってたら明らかにおかしいでしょ

validは単にタグの形に間違いがあるかどうかなだけでタグの意味に対する使い方には関係ないからvalidを持ち出してくるのはおかしいっていってんの

33Name_Not_Found2018/12/11(火) 12:39:45.11ID:???
> h1は見出しって意味があるから全文入ってたら明らかにおかしいでしょ

そうだね。俺はh1に全文入れるなんて一言も言ってないけどね。
h1に全文入れるとか言い出した馬鹿に言ってねw

で、h1は複数使って良い。そんだけ

34Name_Not_Found2018/12/11(火) 12:43:14.99ID:???
>>32
> validを持ち出してくるのはおかしいっていってんの

validか否か以外に、複数のh1がだめな理由なんて思いつかないからな

どこぞの馬鹿が、タグの中に全部入れられるから
だめなんだって理由ならaだって同じだしぃ〜?(笑)

だめな理由がなければ、いいってことだよねw

35Name_Not_Found2018/12/11(火) 12:44:04.66ID:ALU2P7Qf
>>32
validであること以外に
なんら強制される義理はないですしおすし

36Name_Not_Found2018/12/11(火) 12:48:21.65ID:???
h1複数でどう解釈されようとも、外部リンクぶっさすだけで帳消しになった時代の話だろ
今更何をワイワイやってるんだ

37Name_Not_Found2018/12/11(火) 12:50:47.97ID:???
>>33
>>34
>>35
もうちょっとまとめてからかいて

38Name_Not_Found2018/12/11(火) 12:50:59.83ID:???
しらねw h1複数は昔から今もずっと許容されている状態で
SEO業者だけが、なんの根拠もなくh1は一つじゃなきゃだめなんだって言っていたのが
Googleに否定され、それを持ち出してきても、なお受け入れられないのは
いままで、正しいことをしてきた(つもり)というプライドでもあるんだろ
客に嘘を言っていたことになるしな

39Name_Not_Found2018/12/11(火) 12:51:36.28ID:???
>>37
複数h1を使うことは、昔から今までずっと問題がない

40Name_Not_Found2018/12/11(火) 13:15:45.86ID:???
この辺のスレが作られたころ
http://mevius.2ch.net/test/read.cgi/hp/1187492274/
http://mevius.2ch.net/test/read.cgi/hp/1127409018/
http://mevius.2ch.net/test/read.cgi/hp/1125430395/

それまでのテーブルレイアウトに反発するかのように「ウェブ標準」が標榜され
ストリクトなHTML+CSSでのコーディングがウェブ制作界隈で流行った

彼らの中から、Validであること以上にセマンティクスを重要視する一派が現れ
ストリクト教だの、ストリクト原理主義だと呼ばれた
<h1>1個しか認めないマンの彼は、この一派の末裔なんだろう

ソースは元教徒だった俺

41Name_Not_Found2018/12/11(火) 13:23:03.31ID:???
セマンティクス(意味)を重視するなら
なおのことh1複数を認めなきゃいけない

例えば1ページに論文を複数表示するとき、
意味的にh1であるならば、表示がどうであれh1はh1であるべきだからだ
1ページに複数表示したから、それぞれの論文の1レベル下げますなんておかしいだろ

42Name_Not_Found2018/12/11(火) 13:31:07.03ID:???
>>41
例えが変だよ
それを複数掲載するような内容が最も重要な内容だろう

<h1>xxについての論文集約</h1>
<h2>論文A</h2>
<h2>論文B</h2>
<h2>論文C</h2>

例え集約するような内容が無い場合でも、何かに添ったh1があるはず

<h1>山田の論文一覧</h1>
<h2>論文A</h2>
<h2>論文B</h2>
<h2>論文C</h2>

でなければ全く意味のない、論文を雑多に並べただけというページになる

<h1>論文A</h1>
<h1>論文B</h1>
<h1>論文C</h1>

もちろん何の意味もないページであるなら、それはそれでh1複数はアリだと思うけど・・・
その場合見出しじゃなく<li>になるんじゃないの

43Name_Not_Found2018/12/11(火) 13:37:21.21ID:???
>>42
> それを複数掲載するような内容が最も重要な内容だろう

なんで最も重要なものが複数あったらだめなんだ?

1ページに重要なのは一つだけ
これはSEO業者が作ったルールに過ぎない

読む人にとってなにか困ることでもあるか?
それともまたSEOガーSEOガーか?

44Name_Not_Found2018/12/11(火) 14:06:43.45ID:???
>>43
別に複数あってもいいんだけど、ページ構成がどうしても想像できない
もし可能ならそのページか、実際のhtml構成、つまりどんなページでどんなh1を設定したかを教えて欲しい

>「最も」
>もっとも
>【最も・尤も】 《副》何よりも一番。他に比べ第一に。?「この病気の―多い地方は」

通常「最も」と言えば一つだし、そういう感覚の人は多いと思う

あるカテゴリに属する物の方向性が違う場合は複数存在するとは思う
最も好きな食べ物がラーメンと寿司、決められない><

にしてもこの場合のページ構成はh1は「好きな料理」になり、
h2にラーメンと寿司が来る

一体どういうページなのかが分からない
実際のページ構成を教えて貰えれば皆納得すると思う

今までの流れを見て「ページを想像できない」というのが正直な感想なんだわ
もちろん俺はh1一個しか使わないし、それで何も不自由を感じていない。

45Name_Not_Found2018/12/11(火) 14:07:10.53ID:???
>>43
頭が固いというか日本語が不自由というか…ほんと典型的な[ついていけないおっさん思考]だなお前さんは

46Name_Not_Found2018/12/11(火) 14:07:25.60ID:???
日本語が怪しくなってきた
多分昼寝する

47Name_Not_Found2018/12/11(火) 14:11:46.75ID:???
最も重要なものが複数あってもvalidだ!
なぜならvalidであることが最も重要だからだ!
とかいいだすんだろどうせ

48Name_Not_Found2018/12/11(火) 14:54:55.38ID:???
one of the bestの訳し方問題を思い出した

49Name_Not_Found2018/12/11(火) 15:08:34.80ID:???
>>47
実際に言ってるのは、h1が複数あるのはvalidだ!
でも俺の定義だとinvalidだ!
なぜなら俺が使い方を思いつかないからだ!
って言ってるんだけどなw

50Name_Not_Found2018/12/11(火) 15:14:45.30ID:???
使い方が思いつかないなら使わなければいいじゃん

でもh1を複数使いたい(使い方を思いついている人)が
使うことになんの問題もないよって話

51Name_Not_Found2018/12/11(火) 15:26:26.25ID:???
俺には想像すら出来ないので、参考にしたいってだけだよ
どうしてどういうhtmlなのか教えてくれないのだろう
不思議だ

52Name_Not_Found2018/12/11(火) 15:27:36.63ID:???

53Name_Not_Found2018/12/11(火) 15:39:48.46ID:???
>>52
これはhtml5の話だね
アウトライン毎にh1から始める事ができるのは、見出しレベル下げてるのと同じだから問題が無い
https://cdn.tutsplus.com/webdesign/uploads/2013/11/html5markup.png
これで言うとheaderのh1が最も重要で、
articleの中のh1はページ全体から見れば実質h2と同じって事
articleが何回出てきてもh1使えるし、asideの中にh1があっても良い

そうではなく、上に出てるのはhtml4の話で、
アウトラインもロクに無かった時代にh1を複数書いても問題なかったらしい
どんなページを作っていたかを知りたいだけよ

54Name_Not_Found2018/12/11(火) 15:39:56.02ID:???
そもそもsection、aside、articleというものが出来た理由の一つは
ドキュメントの中で複数のh1を使ったときに、
セクションを正しく解釈することが難しいからなんだが。

広告の中にもh1はあるだろうが、それはページのドキュメントの本筋の
アウトラインとは分離されている。h1じゃなくてh2を使えばいいという反論も無意味だよな
広告の最初の見出しがh2だとしても本筋のh2の一つになるわけではない

「セクションが出来たから複数のh1が使えるようになった」のではない
複数のh1を使ったときの問題を解決するためにセクションが出来たんだよ

最初に複数のh1を使うという需要があることを示してる

55Name_Not_Found2018/12/11(火) 15:42:09.83ID:???
>>53
> これはhtml5の話だね

昔から複数のh1を使いたいという需要があって、
それがHTML5で解決したという話

articleやasideがなくても、やりたいことは同じなわけで
articleやasideがないぞ!というHTML4の欠点であって
複数のh1を使いたいはずがない。ということにはならない

56Name_Not_Found2018/12/11(火) 15:46:13.95ID:???
んで、昔からやりたかった複数のh1だが、
HTML5で複数のh1を使っても、コンピュータは正しく
アウトラインを理解できるようになった。

だが、section、aside、articleって目に見えないだろ?
CSSで装飾すれば見えるけど、それを言ったらdivで代用することも出来る

じゃあ、一体誰が、アウトラインを理解できなくて困ったのか?
それはコンピュータ(検索エンジン)の話なんだよ。
つまり、SEOガー、SEOガーの話でしかなくなる。

SEO抜きに話をすると、昔から複数のh1は許容されていたし、
人間は(section、aside、articleがある今と比べて)何も困らない

57Name_Not_Found2018/12/11(火) 15:48:50.39ID:???
ん?ということはアウトライン無しでh1使っていたってこと?
当時風に書くとこんな感じ?

<body>
 <div id="header">
  <h1>xxx</h1>
 </div>
 <div id="contents">
  <div id="ronbun1">
   <h1>論文1</h1>
   <p>論文1の概要</p>
   <h2>論文1の詳細</h2>
   <p>論文1の詳細内容</p>
  </div>
  <div id="ronbun2">
   <h1>論文2</h1>
   <p>論文2の概要</p>
   <h2>論文2の詳細</h2>
   <p>論文2の詳細内容</p>
  </div>
 </div>
</body>

58Name_Not_Found2018/12/11(火) 15:49:08.60ID:???
h1使っていたってこと?

h1複数使っていたってこと?

59Name_Not_Found2018/12/11(火) 15:50:45.82ID:???
>>56
謎が解けたわ、ありがとう

60Name_Not_Found2018/12/11(火) 15:58:08.01ID:???
>>57
リンク先に書いてあることまんまだなw

まあ、その程度ならh1で区切ればいいだけだから
アウトラインは解釈可能なんだよな
だから当時は複数のh1を使っても、section、aside、articleなどは
必要ないと考えられていたのかもしれない

問題はネストが入る場合。例えば論文1の中に別の論文が引用される場合とか。
これはどのレベルのヘッダを使おうが間違いになる。


>>57のような形で複数のh1を使う場合は、アウトラインは正しく生成できていたが
ネストするような場合は、正しく生成できなかった。
だからHTML5でsection、aside、articleができて、今まで正しく
解釈出来なかったタイプのアウトラインでh1を複数使っても扱えるようになった。

もっとも解釈っていうのはコンピュータによる解釈の話で
文章からコンテキストを解釈できる人間にとってはさほど意味がないけどね

これでh1を複数使いたいというパターンが昔からあるということは理解できたね?

61Name_Not_Found2018/12/11(火) 16:14:18.82ID:???
他の話題プリーズ

62Name_Not_Found2018/12/11(火) 16:18:01.35ID:???
>>60
そこまでSEO犠牲にするとは思わなかった
順位はともかく検索結果の表示も何もかも犠牲にするとは予想外だったわ
理解はしたけどドン引きだ

63Name_Not_Found2018/12/11(火) 16:31:44.88ID:???
>>61 OK

<h1>年末年始に食べたいものリスト</h1>

<h2>年末編</h2>
<ul>
 <li>お鍋(海鮮系、お肉系)</li>
 <li>おさしみ</li>
 <li>蕎麦</li>
 <li>みかん</li>
</ul>

<h2>年始編</h2>
<ul>
 <li>おせち</li>
 <li>お餅(お雑煮、焼き)</li>
 <li>とろろ</li>
</ul>

補完してください!><

64Name_Not_Found2018/12/11(火) 16:39:41.22ID:???
>>62
昔から全コンテンツを1ページに表示するか、章ごとに分けて表示するか
選べるサイトあるだろ。印刷するなら1ページに全部表示されていたほうが楽だし

そういった場合に、h1は複数書いてはいけませーんとか、
オレオレルールを作るなって話をしてる

適切な理由があれば、h1は複数使用して構わない

65Name_Not_Found2018/12/11(火) 16:48:36.36ID:???
<main>
<header>
<h1>年末年始に食べたいものリスト</h1>
</header>
<article>
<h2>年末編</h2>
<ul>
<li>お鍋(海鮮系、お肉系)</li>
<li>おさしみ</li>
<li>蕎麦</li>
<li>みかん</li>
</ul>
</article>
<article>
<h2>年始編</h2>
<ul>
<li>おせち</li>
<li>お餅(お雑煮、焼き)</li>
<li>とろろ</li>
<li>みかん</li>
</ul>
</article>
</main>

66Name_Not_Found2018/12/11(火) 16:58:16.29ID:???
補完ってこういうことじゃないの?

<h2>年末編</h2>
<ul>
 <li>お鍋(海鮮系、お肉系)
  <ul>
   <li>鱈</li>
   <li>カニ</li>
   <li>牡蠣</li>
  </ul>
 </li>
 <li>おさしみ</li>
 <li>蕎麦</li>
 <li>みかん</li>
 <li>日本酒</li>
</ul>

<h2>年始編</h2>
<ul>
 <li>おせち</li>
 <li>お餅(お雑煮、焼き)</li>
 <li>とろろ</li>
</ul>

67Name_Not_Found2018/12/11(火) 17:22:44.41ID:???
SEOガーうぜぇけどそれいじょうにvalidダーもうぜぇからどっかいけよ

68Name_Not_Found2018/12/11(火) 17:27:45.42ID:???
<h1>年末年始に食べたいものリスト</h1>

<h2>年末編</h2>
<ul>
 <li>お鍋(海鮮系、お肉系)
  <ul>
   <li>鱈</li>
   <li>カニ</li>
   <li>牡蠣</li>
  </ul>
 </li>
 <li>おさしみ</li>
 <li>蕎麦</li>
 <li>みかん</li>
 <li>日本酒</li>
</ul>

<h2>年始編</h2>
<ul>
 <li>おせち
  <ul>
   <li>昆布巻</li>
   <li>黒豆</li>
   <li>栗きんとん</li>
  </ul>
 </li>
 <li>お餅(お雑煮、焼き)</li>
 <li>とろろ</li>
</ul>


なぜとろろ

69Name_Not_Found2018/12/11(火) 18:10:05.40ID:???
>>65
<main>
<header>
<h1>年末年始に食べたいものリスト</h1>
</header>
<article>
<h1>年末編</h1>
<ul>
<li>お鍋(海鮮系、お肉系)</li>
<li>おさしみ</li>
<li>蕎麦</li>
<li>みかん</li>
</ul>
</article>
<article>
<h1>年始編</h1>
<ul>
<li>おせち</li>
<li>お餅(お雑煮、焼き)</li>
<li>とろろ</li>
<li>みかん</li>
</ul>
</article>
</main>

70Name_Not_Found2018/12/11(火) 19:18:19.29ID:???
>>23
> 空要素を/で閉じるのはXHTML(XML)の決まりでHTMLでは/で閉じない
HTML5では、XHTMLからの移行に配慮して、空要素を/で閉じても良いことになっている
これは逆にHTML5からXHTML5に移行する時にも使えるので、/で閉じている

71Name_Not_Found2018/12/11(火) 19:29:20.54ID:???
>>70
XHTMLの未来なんてあるのかなあ
ティムたんが血涙流して捨てたのに

72Name_Not_Found2018/12/11(火) 19:36:43.41ID:???
>>31
Hamlは改行とインデントを強制するから、あの仕様なのであって、HTMLにそのまま適用して良しとするのはおかしいと思うぞ。
Hamlでは、下記のように変換される。

%ul
 %liりんご
 %liバナナ

 ↓

<ul>
 <li>りんご</li>
 <li>バナナ</li>
</ul>

つまり、終了タグを省略したHTMLと等価ではない。
改行が終了タグと代わりとなるから、終了タグを省略出来るだけだ。

<ul>
 <li>りんご
 <li>バナナ
</ul>

73Name_Not_Found2018/12/11(火) 19:40:07.21ID:???
>>70
> HTML5では、XHTMLからの移行に配慮して、空要素を/で閉じても良いことになっている
> これは逆にHTML5からXHTML5に移行する時にも使えるので、/で閉じている

違う。「閉じてない」
空要素はそもそも開くものでもないし、閉じる必要もないし、閉じることも出来ない
例えば、<br> はこれ単体で完結してる。これを閉じる<br></br>は間違い

そもそもHTMLは昔から未知の属性は無視されるという仕様だった
<br asdfa bsgadf baf> というのは<br>タグの使い方として間違いではあるが、
未知の属性だから無視されるだけで、<br>タグとして使える
同じように <br /> も未知の/という属性があるだけで昔から使えた。

これを未知の属性ではなく「意味はないけど、互換性のために書いても良い」としたのがHTML5
閉じるという効果はないけど、書いても仕様違反にはならなくしただけ

74Name_Not_Found2018/12/11(火) 19:41:13.25ID:???
<br />の/って属性扱いだったのか

75Name_Not_Found2018/12/11(火) 19:42:06.39ID:???
>>72
的外れだな。liのためだけにHAMLを覚えるよりも、liの終了タグは省略できると覚えるほうが楽
あとは省略して書くと楽だよって話なだけ

76Name_Not_Found2018/12/11(火) 19:44:17.66ID:???
みなさんが使ってきて、使わなくなったライブラリやフレームワーク、
使わなくなった理由を教えて頂けますか

77Name_Not_Found2018/12/11(火) 19:46:56.02ID:???
smarty:
単純に古い。悪くは無いんだけどねぇ

jQuerymobile:
FWとは思えないめんどくささ

78Name_Not_Found2018/12/11(火) 19:47:08.43ID:???
>>74
> <br />の/って属性扱いだったのか
HTML4以前の古いブラウザではまさにそのとおりに解釈される。
HTML4では仕様上未定義もしくは違反だが、そういったミスがあっても動くように作られてる。
HTML5の仕様っていうのは、現実のブラウザの挙動を考慮した上で作られてる。

だからXHTMLでは <br/> とbrと/の間にスペースを入れなくても許されるが
HTML5では、昔のブラウザの挙動に合わせてスペースを入れて
(スラッシュを入れるならば)<br />と書くことが推奨されてる。

もちろんXHTMLとの互換性を考慮しないならば、<br> でよい
そしてHTML5ではタグを閉じるという効果はない。

79Name_Not_Found2018/12/11(火) 19:49:14.06ID:???
>>76
Prototype、jQueryの方が優れていたから
backbone、なんか知らんけど死んだw
Angular1、互換性のないAngular2に変わりやがった

jQueryだけだよ。こんなに長く使えるライブラリは

80Name_Not_Found2018/12/11(火) 19:50:31.54ID:???
あぁそういやPrototypeも使ってたな。jQueryに完全に呑まれた
競合無ければもう少し長生きしたかも

81Name_Not_Found2018/12/11(火) 20:05:15.09ID:???
pug使っとけ

82Name_Not_Found2018/12/11(火) 21:09:10.84ID:???
pugはいいよねー
閉じなくてよいだけでこんなに楽になるとは

83Name_Not_Found2018/12/11(火) 21:13:56.57ID:???
でも属性を書くととたんに面倒になる

84Name_Not_Found2018/12/11(火) 21:14:14.86ID:???
面倒というか、普通にHTMLで書いたのと大差ない

85Name_Not_Found2018/12/11(火) 21:54:04.38ID:???
.mywife {
face: beautiful;
height: 168cm;
three-size: 90cm 55cm 95cm;
personality: good;
}

あと何か設定しといた方がいいことある?

86Name_Not_Found2018/12/11(火) 21:57:58.68ID:???
なんでもいいんじゃね?
どちらにしろリアル嫁がそうなるわけじゃないんだから

87Name_Not_Found2018/12/11(火) 21:58:56.30ID:???
なんでクラスなんだよID使うぐらいの心意気見せろよ

88Name_Not_Found2018/12/11(火) 22:53:34.18ID:???
いやあちこちにたくさん付与することになるんで。

89Name_Not_Found2018/12/12(水) 00:29:09.92ID:???
>>86
えっ…ならないの?(´・ω:;.:...

90Name_Not_Found2018/12/12(水) 00:29:42.22ID:???
今季の俺の嫁は○○とか
最短で1クールごとに変わるからな

91Name_Not_Found2018/12/12(水) 00:42:13.68ID:???
>>85
bust: 82cm;

92Name_Not_Found2018/12/12(水) 08:28:38.64ID:???
>>86
辛辣で笑った

93Name_Not_Found2018/12/12(水) 09:11:06.10ID:???
>>73
俺は「HTMLパーサーが閉じていると認識するか」の話はしていない
「仕様として <tag /> が認められている」という話をしている
それぐらい文脈で理解して欲しいのだが

94Name_Not_Found2018/12/12(水) 09:14:31.56ID:???
>>75
的外れというなら、Hamlを例に出した>>31が間違い
終了タグを省略出来る理由を全く考慮せず、文法を見て真似しているだけなんだからな

95Name_Not_Found2018/12/12(水) 11:25:28.27ID:???
Pugとかsassとかやりてえですが導入するまでの環境構築でつまづいています。
いろんなインストしたくないのでcodekit+compassにpug対応させるまで待っていようかと思っていますが
参考までに皆さんの環境良かったら教えていただけませんか?
いまのところsubrime3でhtml+cssぺちぺと手打ちしてるものです

96Name_Not_Found2018/12/12(水) 12:17:24.48ID:???
sassはvscodeでlivesass入れるのがオススメ
vscodeいいよ、昔ほど重くないしsublimeより補間しっかりしてる

97Name_Not_Found2018/12/12(水) 12:42:40.46ID:???
静的サイトジェネレータを使っている人いる?
いろいろあるようだけど、使っている人の使用感とか、お勧めレビューを聞きたい
Hamlやmarkdownとは違うんだよね?

98Name_Not_Found2018/12/12(水) 13:15:40.46ID:???
静的サイトジェネレータはその構成パーツとして基本的に何らかのテンプレートエンジン採用してるぞ。
Pugでもejsでもhandlebarでもmarkdownでも好きに選べるやつもある。

99Name_Not_Found2018/12/12(水) 17:04:25.69ID:2oCe/z4Q
タイトル:どいつもこいつも
死ねよマジで

タイトル:どいつもこいつも
死ねよマジで

こうしたいんだけどどうすればいいですか?

100Name_Not_Found2018/12/12(水) 17:05:33.11ID:2oCe/z4Q
タイトル:どいつもこいつも
死ねよマジで

タイトル:どいつもこいつも
空白空白死ねよマジで

こうしたいんだけどどうすればいいですか?

101Name_Not_Found2018/12/12(水) 17:27:30.33ID:???
>>100
<p>タイトル:どいつもこいつも<br>死ねよマジで</p>
<p>タイトル:どいつもこいつも<br>&nbsp;空白空白死ねよマジで</p>
<style>
p {
margin-bottom: 1em;
}
</style>

102Name_Not_Found2018/12/12(水) 19:20:06.64ID:???
>>98
ありがと、好きなテンプレートエンジンを使えるのね
実際の使用感を聞きたいな

103Name_Not_Found2018/12/12(水) 19:46:36.78ID:???
>>99
padding-left: 1em;
text-indent: -1em;

104Name_Not_Found2018/12/12(水) 20:19:07.92ID:???
>>102
俺はhandlebarsやmustashが好き。
Pugやslmみたいな省略して書けるんです系のは嫌い。

105Name_Not_Found2018/12/13(木) 01:39:01.75ID:???
>>73
>同じように <br /> も未知の/という属性

/ は属性とは認識されないはず

>>56
>つまり、SEOガー、SEOガーの話
section、aside、article などは、
SEO ではなく accessibility の話じゃないのかな?

106Name_Not_Found2018/12/13(木) 02:13:40.21ID:???
>>104
好きと嫌いの理由は何だろう?

107Name_Not_Found2018/12/13(木) 02:35:45.13ID:???
>>105
section、aside、article などで
アクセシビリティがどのように変わるというの?

108Name_Not_Found2018/12/13(木) 09:36:27.26ID:???
>>105
SEOガーいってるやつは負けて荒らすために書いてるだけだから

109Name_Not_Found2018/12/14(金) 04:50:13.49ID:???
>>107
公式な取り決めとして
<main>やら<nav>やらの意味が定義されると
マシンリーダブルになるんさ

従来のHTMLは
語や句をマークアップする要素は沢山あったんだけど
ブロックについては<form>くらいしか意味のあるものがなくて
セクションを明示するものは全くなかった

だから、たとえばプログラムで
ナビやら広告やらではなく本文部分にアクセスしたい
なんて時に、とても難儀してた

これがHTML5で定義されたセクショニング系要素があると
<nav>や<aside>は本編ではない、<main>が本編、とわかっているので
大変アクセスしやすくなったわけですな


そういう観点でアクセシビリティに大いに寄与している

110Name_Not_Found2018/12/14(金) 05:38:04.23ID:???
>>109
マシンリーダブルとアクセシビリティにはなんの関係もないですよね

111Name_Not_Found2018/12/14(金) 06:42:45.30ID:???
>>110
アクセシビリティってのは
ドキュメント内の要素へのアクセス出来やすさ具合のことよ

要素内のコンテンツを得るための障壁がいかに低いか、だけでなく
要素自体へどれだけ到達しやすいか、も重要なファクターなわけよ

112Name_Not_Found2018/12/14(金) 08:11:20.58ID:???
>>110
https://waic.jp/docs/WCAG20/Overview.html#glossary
ユーザエージェントのアクセスしやすさもアクセシビリティに含まれる

113Name_Not_Found2018/12/14(金) 12:29:12.74ID:hwmv3PxE
国語 : 50点
算数 : 70点

みたいな表を作るとき、HTMLの要素はなにが適してますか?
自分の知識では

&lt;ul&gt;
&lt;li&gt;&lt;label&gt;国語&lt;/label&gt;&lt;label&gt;:&lt;/label&gt;&lt;p&gt;50点&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;label&gt;算数&lt;/label&gt;&lt;label&gt;:&lt;/label&gt;&lt;p&gt;70点&lt;/p&gt;&lt;/li&gt;

とかなんですがlabelでもpでもなんか違う気がしてまして……

114Name_Not_Found2018/12/14(金) 12:30:12.82ID:hwmv3PxE
ふつうに書き直しました

<ul>
<li><label>国語</label><label>:</label><p>50点</p></li>
<li><label>算数</label><label>:</label><p>70点</p></li>

115Name_Not_Found2018/12/14(金) 12:37:51.66ID:???
tableじゃない?

116Name_Not_Found2018/12/14(金) 12:42:11.77ID:???
>>115
ありがとうございます
table調べてみます

117Name_Not_Found2018/12/14(金) 14:06:26.75ID:???
>>116
dl

118Name_Not_Found2018/12/14(金) 14:25:08.21ID:???
tableを知らない世代が出てきたか。
かつてのHTMLはtableだらけだったんだよ。

119Name_Not_Found2018/12/14(金) 15:06:41.06ID:???
>>118
バカにしすぎ

120Name_Not_Found2018/12/14(金) 19:14:05.19ID:???
tableはあえて使ってないからよく知らん

121Name_Not_Found2018/12/14(金) 19:25:26.57ID:???
表組表現が相応しい場所にはガンガンつかってこ

122Name_Not_Found2018/12/14(金) 21:45:43.67ID:???
>>118
バカすぎ

123Name_Not_Found2018/12/14(金) 21:47:32.35ID:???
>>116
tableはやめとけwww
そんなことしたら恥ずかしすぎるぞwww
どう考えてもdl

124Name_Not_Found2018/12/14(金) 21:56:04.37ID:???
>>123
tableでもdlでもおかしくないと思うがな

125Name_Not_Found2018/12/15(土) 00:18:28.29ID:???
dl好きなやつ一定数いるよなあ
dtとddをセットにして括る要素がないから使いづらいと思うんだが

126Name_Not_Found2018/12/15(土) 09:29:29.49ID:???
>>125
いや基本文章なんてタイトルと本文だろ?
それの繰り返しでhを下げていってhほどでもないものはdlになるわけだから増えるのが当たり前

127Name_Not_Found2018/12/15(土) 23:19:18.87ID:???
なるほど
ddやliになんでも詰め込んじゃう派か

128Name_Not_Found2018/12/15(土) 23:58:37.33ID:1XubQe4g
headerとかh1とか邪魔だったんで、display:noneしちゃったんですけど、seo的にやばかったりします?

129Name_Not_Found2018/12/16(日) 00:15:47.25ID:???
>>113は「表を作る」とはっきり書いているので、<table>が適切なのだろうな

130Name_Not_Found2018/12/16(日) 01:16:39.10ID:???
>>128
いいえ。SEOなんて嘘、まやかしです。
そんなものありません。HTMLの書き方で変わることなんてありません

131Name_Not_Found2018/12/16(日) 13:51:40.96ID:???
>>127
また国語勉強しないといけない人?
リストであればいれるでしょ
どうして「なんでも」になるの?

132Name_Not_Found2018/12/16(日) 14:00:18.39ID:???
表(英語でtable)を入れようとしているから

133Name_Not_Found2018/12/17(月) 12:16:27.79ID:???
>>125
別に一対一じゃなくていいぞ
dl
 dt
 dd
 dd

でも可能
でもこういう場合は普通hになるけどね

>>128
h1を消すと検索結果の表示が変わる
それでいいなら別に問題はない

134Name_Not_Found2018/12/17(月) 18:20:16.74ID:???
>>131
>>126を読むと、dtをhnと同等に扱うというよに見受けられるから、じゃね?

俺もたまに、なんで<article>にしないで頑なにdtとddなのかなー
と思うのに出くわす
横からすんませんでした

135Name_Not_Found2018/12/18(火) 15:00:32.49ID:M6QISECE
海外では最近どこもflexboxのサイトばっかだな
3、4個のカラム横並びにして、でかい写真でごまかす
同じようなデザイン
俺はそういう軟弱なデザインは使わない
htmlにtableでデザイン
cssもいらない
cssは不幸にしかならないよ

サイト作成の依頼募集してます

136Name_Not_Found2018/12/18(火) 15:12:01.80ID:???
日本語ってvertical-align:centerを設定してもアルファベットに比べて上よりになってしまいますが、
ここって調節してますか?
https://html5experts.jp/takazudo/13592/

137Name_Not_Found2018/12/18(火) 15:33:34.02ID:???
>>133
1対1じゃないところこそが
dtとddをくくってくれる要素がないことが不便なんじゃね?
tableのtrにあたる要素があれば便利なんだけど

138Name_Not_Found2018/12/18(火) 15:34:18.25ID:???
<html>
Hello World
</html>

これだけありゃあ十分やろ

139Name_Not_Found2018/12/18(火) 15:36:19.87ID:???
え?なくて区別できるんだからいらんだろ

140Name_Not_Found2018/12/19(水) 00:31:05.51ID:???
dtに続くddを拾うのに
次のdtが現れるか親dlが終わるまでnextSiblingを1つずつ見てかなきゃならん
ということじゃね?

141Name_Not_Found2018/12/19(水) 00:32:44.88ID:???
次の</tr>を見る必要があるのと、何の違いがあるというのか

142Name_Not_Found2018/12/19(水) 00:33:58.50ID:???
このスレの範疇で言えば
tableでは tr:first-child って書けるけど
dlではそれが出来ない、的な

143Name_Not_Found2018/12/19(水) 00:35:58.94ID:???
>>141
いやいや
trがあるから、thとtdのセットはいちいち数えなくても、trの子要素として拾えるのよ

dlにはtrに当たる要素がないからそれが出来ないって話

144Name_Not_Found2018/12/19(水) 00:47:53.29ID:???
dl
 dt
 dd
dl
 dt
 dd

別にこういう風に繰り返しても良いんだぞ

145Name_Not_Found2018/12/19(水) 11:23:45.94ID:???
それだと1つ目と2つ目のdlがセットであることを以下略

146Name_Not_Found2018/12/19(水) 13:46:09.01ID:???
インプットとラベルを一々二要素に分けたくない  という質問です


<input type="checkbox" id="labelX">sample</input>
<label for="labelX">ラベル</label>

こうすることで文字列「ラベル」をクリックすることにより、「sample」のチェックボックスをオンオフの切り替えが出来ます。
でも、一々こうやって2つの要素を作成しid, for属性を対応させるというのが煩わしいのですが、
1要素だけで「文字列をクリックすることによってオンオフの切り替え」をしたいです。

つまり、「sample」文字列をクリックするだけで「sample」のチェックボックスのオンオフを切り替えられるようにしたいです。
しかも1要素だけで。

147Name_Not_Found2018/12/19(水) 13:48:55.76ID:???
別の言い方をすると、


<input type="checkbox" style="display:none">click</input>

これだけだと「click」をクリックしてもオンオフの切り替えが出来ませんが、これをオンオフの切り替えが出来るようにしたいです。
1要素で。

148Name_Not_Found2018/12/19(水) 13:53:47.92ID:???
動き回ってる こういうのJSなの?
http://www.jojodesign.jp/

149Name_Not_Found2018/12/19(水) 13:56:29.01ID:???

150Name_Not_Found2018/12/19(水) 13:58:36.48ID:G0Sj8YET
>>146
ちょっと変わった書き方だな
こうする人が多いと思う

forを使う場合

<input id="hoge">
<label for="hoge">ここをクリックしてもOK</label>

forを使わない場合

<label>
<input id="hoge">ここをクリックしてもOK
</label>

前者のほうがCSS的な意味で都合が良い場合が多い、と個人的には思う

151>>1472018/12/19(水) 13:59:15.59ID:???
>>147の要望通りではなかったのですが、

<label><input type="checkbox">sample</input></label>

では、「sample」をクリックするだけでチェックボックスのオンオフ切り替えが出来ますが、
こうすると、cssでinput:checked に対するスタイルの設定が効きません。
なぜでしょうか…

152Name_Not_Found2018/12/19(水) 13:59:37.56ID:G0Sj8YET
>>146
すまん>>150のforを使わない場合の方は
<input>のidはいらなかった

153Name_Not_Found2018/12/19(水) 14:01:05.44ID:G0Sj8YET
>>151
input:checkedはあくまでinput要素に対するスタイル

inputは置換インライン要素なので、中身はない
<input>文字列</input>

と書いたところで、文字列はinput要素の中身となるわけじゃない

154Name_Not_Found2018/12/19(水) 14:03:46.13ID:G0Sj8YET
置換インライン要素ってのは
要素の形成するボックスの中身が何かに置き換えられる要素のこと
主にimg、input、select、video、audioなどのこと

inputは形成するボックスの中身がUI部品に置き換わってる感じ

155>>1472018/12/19(水) 14:05:00.54ID:???
>>153
なるほど

では、

<label><input type="checkbox" />sample</label>

とすることによって、css側で「子要素のinputがcheckedになっているような親要素labelに対するスタイルの設定」というモノをすれば良いのでしょうか
でも、そんな設定って出来るんですかね

156>>1472018/12/19(水) 14:12:17.12ID:???
例えば、

<label><input type="checkbox" />sample</label>

これに対して、「sample」をクリックしたら背景を赤にするというのはCSSだけでは無理ですか?

157>>1472018/12/19(水) 14:12:50.85ID:???
で、再度クリックすると元に戻す

158Name_Not_Found2018/12/19(水) 14:18:50.85ID:???
>>147
appearance: none;
使えばinputも好きにレイアウト出来るよ
http://www.dcom-web.co.jp/technology/css3_togglebutton/

labelも不要

159Name_Not_Found2018/12/19(水) 14:38:12.64ID:G0Sj8YET
>>156
親は無理なんじゃないかなあ
CSSをごにょごにょしたら出来るのかも知れんけど

input[type="checkbox"]の親のクラスをトグルするJS書いちゃった方が早い気がする

160Name_Not_Found2018/12/19(水) 14:54:36.66ID:???
cssで親は触れないゾ

161Name_Not_Found2018/12/19(水) 14:55:25.87ID:???
> input[type="checkbox"]の親のクラスをトグルするJS書いちゃった方が早い気がする

こういうのがjQueryが得意なことなんだよな。
Reactやvueじゃ面倒になる

162Name_Not_Found2018/12/19(水) 15:05:21.23ID:G0Sj8YET
>>161
そんなに変わんなくね?

要素アクセスして
changeイベント拾って
parentのclassname変えるだけじゃん?

163Name_Not_Found2018/12/19(水) 15:12:54.55ID:???
>>162
それを100個作ることを考えてみ。

jQueryだとHTMLはそのままで良くて、
ほんの数行(たぶん3行)書くだけで終わり

Reactやvueを使うとHTMLがガラリと変わってしまい
100個分コードを書かないといけなくなる

164Name_Not_Found2018/12/19(水) 15:20:23.41ID:???
>>163
100個分のコード書くわけねーだろカス

165Name_Not_Found2018/12/19(水) 15:29:27.07ID:???
>親のクラスをトグルする
こんな漢字か
http://jsfiddle.net/d50mhLkw/

なんだろう、なんか微妙。何かが違う気がする。垢抜けない

166Name_Not_Found2018/12/19(水) 15:31:02.86ID:???
>>164
そう?ならHTMLを書いたから(100個は多いので20個にした)
これをわずかの修正(可能な限りHTML、CSSを修正せずに)で実現してみて
https://jsfiddle.net/s1Lqwp8m/

ちなみにjQuery版、HTML、CSSは全く修正せずに、3行JavaScriptコードを追加しただけ
https://jsfiddle.net/Lnh2ac74/

167Name_Not_Found2018/12/19(水) 15:47:58.22ID:???
ReactなんかはJavaScriptを使ってコンポーネントを作って
そのコンポーネントをHTMLで使うという感じ
(といってもHTMLで直接使えないのでJSXとJavaScriptコードの中に書く)

jQueryはHTMLとCSSでコンポーネントを作って
そのコンポーネントにJavaScriptで動きを追加するという感じ

168Name_Not_Found2018/12/19(水) 16:19:17.93ID:???
>>166
お前バカだからそんなしょーもないレベルのただのテスト環境で勝ち誇ってるってわかってねえんだろ

169>>1472018/12/19(水) 16:22:48.27ID:???
私のレスに色々知恵を絞って貰ってありがとうございます。

170Name_Not_Found2018/12/19(水) 17:07:31.73ID:???
>>163
なんか勘違いしているよ

このくらいのことはむしろ
jQueryがあってもなくても大して変わらないタイプのコードだと思う
querySelectorが使えなかった頃なら
Sizzleの使えるjQに若干アドバンテージがあったかも知れんけど

171Name_Not_Found2018/12/19(水) 19:38:55.77ID:???
>>156
まだ:hasが使えるブラウザは無いのでcssだけでやりたいなら素直にforを使うしかない

172Name_Not_Found2018/12/19(水) 19:54:52.69ID:???
僕、bootstrapを覚えます

173Name_Not_Found2018/12/19(水) 21:02:46.53ID:???
この程度ならinputの後ろのテキストをspanで囲って兄弟セレクタで色々やるだろ普通

174Name_Not_Found2018/12/19(水) 21:39:37.19ID:???
>>173
やらない
なんで標準機能を使わないの

175Name_Not_Found2018/12/19(水) 21:46:57.27ID:???
>>174
は?なんの話してんの?
標準機能ってなに?

176Name_Not_Found2018/12/19(水) 22:16:44.03ID:???
>>173
兄弟セレクタなら誰でもできるんじゃね?
質問はlabelをinputの親要素にした時の話だよ

177Name_Not_Found2018/12/19(水) 22:21:11.56ID:???
label:has(input)

178Name_Not_Found2018/12/19(水) 23:17:21.81ID:???
今ってキャッシュさせたくないときってどうするのがいいの?
設定してたの全部旧式になっちゃったみたい

179Name_Not_Found2018/12/19(水) 23:26:18.98ID:???
<label><input type="checkbox"><span>sample</span></label>
input:checked + span { background-color: red; }
こうすればいいって事か

180Name_Not_Found2018/12/19(水) 23:32:52.02ID:QYl2QVIC
>>166
俺は164ではないけどこんな感じかなん?
jqueryのソースをほぼ展開しただけみたいな

document.querySelectorAll('input[type="checkbox"]').forEach((e) =>{
e.addEventListener("click", function (e) {e.currentTarget.parentNode.classList.toggle("checked")})
});

181Name_Not_Found2018/12/20(木) 00:20:00.84ID:???
>>180
jQuery版に比べて動的に増減した場合には対応できないって問題点があるね
あと要素の数だけクロージャーが生成されるのでリソースの無駄とか
querySelectorAllの要素にforEachが使えない場合があるとか
作り込みが甘い

182Name_Not_Found2018/12/20(木) 00:26:08.26ID:???
>>166
jQuery分の数万行足し忘れてるぞww

183Name_Not_Found2018/12/20(木) 00:32:32.01ID:???
ブラウザのコード数百万行に比べれば
無視できるレベル

184Name_Not_Found2018/12/20(木) 01:00:35.88ID:???
document.addEventListener("click", e => {
const t = e.target;
if (t.nodeName === "INPUT" && t.type === "checkbox") {
t.parentNode.classList.toggle("checked");
}
});
実際にはclickイベント拾うのは並べてある要素でいいし
inputに同じclass与えておいてそっちで判定した方がいいと思うけど

185Name_Not_Found2018/12/20(木) 01:09:27.58ID:???
まあ作りどうこうはともかく

>>163
> 100個分コードを書かないといけなくなる

は「そんなこたーないんじゃね」ってことだね

186Name_Not_Found2018/12/20(木) 01:18:16.39ID:???
> は「そんなこたーないんじゃね」ってことだね

いや、反論まだ出てないんだが・・・

四の五の言わずに>>166に対してreactのコードを書けと
vueでもいいんやで

187Name_Not_Found2018/12/20(木) 07:40:28.99ID:???
誰もjQが劣ってるとかいってるわけじゃないんだから
優位性を語るのは他所でやってくれんかね

188Name_Not_Found2018/12/20(木) 07:45:18.79ID:???
優位性じゃなくて適材適所だな
誰もゲーム作るのにjQueryを使えとか言ってない

ウェブの大半を占めるウェブサイトはが、これからもアプリ開発なんかするわけもなく、
ウェブサイトとして欲しい機能はこれからも対して変わらないのだから
jQueryが適切という話しかしてない

189Name_Not_Found2018/12/20(木) 07:54:10.45ID:???
わかった
よくわかったから、もう自由に書いていいから

次からコテつけるかID出してお願い
全部保存して家宝にするから

190Name_Not_Found2018/12/20(木) 08:02:43.79ID:???
言われなくても自由に書いてる
IDつけるかどうかも俺の自由だ

191Name_Not_Found2018/12/20(木) 10:57:58.82ID:???
>>189
こんな時は完全無視した方がいいよ

192Name_Not_Found2018/12/20(木) 12:28:50.84ID:???
>>189
こんな時は完全無視した方がいいよ

193Name_Not_Found2018/12/20(木) 12:48:19.24ID:???
>>176
>>179これじゃだめなの?

194Name_Not_Found2018/12/20(木) 13:03:33.22ID:???
>>193
よほどでなければ良い悪いは無い
別に>>179でも良い
俺は>>158

195Name_Not_Found2018/12/20(木) 16:57:41.95ID:???
>>190
空気読めよNGするって言ってんだよ
公共の場では他人に配慮しろよ学校で習っただろ

196Name_Not_Found2018/12/20(木) 19:12:05.36ID:???
>>195
一つ一つNGにすればいいのでは?
俺が気を使う必要はないよね

197Name_Not_Found2018/12/20(木) 19:35:16.66ID:???
>>196
苦しんで死ね

198Name_Not_Found2018/12/20(木) 21:13:05.17ID:???
>>194
いい悪いじゃなくて標準機能ってなんだよって

199Name_Not_Found2018/12/22(土) 03:05:29.52ID:9YhHEmfN
IME(日本語入力ソフト)が変換前文字列の下に出すアンダーライン(横線)って、色とか変えられるんでしたっけ?
text-decoration-colorはダメっぽかったです
黒線のままだと、黒背景のとき困るなと思い…

キャレット(縦線)の色はcaret-colorで変えられるんですが、これで一緒にアンダーラインの色まで変わったりはしないようです…

200Name_Not_Found2018/12/22(土) 10:03:26.88ID:???
>>199
PCならすぐ下に候補でるから困ら無いと思うけど
OS依存だと思う

201Name_Not_Found2018/12/22(土) 17:20:01.18ID:???
devtoolのメッセージにstyleを適用させるのってどうやればいいんでしょうか?
https://i.imgur.com/39E08hB.png

202Name_Not_Found2018/12/22(土) 17:38:01.33ID:???
>>201
%c

203Name_Not_Found2018/12/22(土) 17:43:07.95ID:???
>>201
途中で書き込んじゃった
%c を文字に入れて、第2引数にスタイルを書く
例えばこんなの
console.log('%cabcde', 'background-color: #f00');

2041992018/12/22(土) 17:55:09.13ID:???
>>200
え、ダッと一気に文打って終わりでいいならいいですけど
推敲というか、戻って文章の途中を削除してそこに新たに文字を入れる場合とかけっこう見づらくならないですか?
とりあえずWindowsのChromeにだけ対応できればいいんですが

黒背景ということは文字には色がついているわけですから、フォーカスされたtextarea自体に
textarea:focus { text-decoration: underline; }
と設定し、変換前文字列の下だけは黒線が出る(つまり線が消えたように見える)という逆のやり方で一旦対処します…

205Name_Not_Found2018/12/22(土) 17:59:18.27ID:???
>>202-203
そういうのがあったんですね、ありがとうございます
ちょっとおもしろい

206Name_Not_Found2018/12/22(土) 19:20:24.30ID:???
センタリングの際の
text-align:center と margin: 0 auto
の使い分けがわからない。

207Name_Not_Found2018/12/22(土) 19:27:44.42ID:???
>>206
text-align:center インライン要素が中央揃えになる
margin: 0 auto その要素自体が中央揃え。block要素のみ

text-align:centerは猛烈にダサくなるので使わないほうが良い
基本的にmargin: 0 autoで良い

208Name_Not_Found2018/12/22(土) 19:34:37.35ID:???
cssで親要素の端から端まで往復するアニメーションを作ってみようと思ったのですが、うまくいきません
どのようにすれば良いでしょうか
http://jsfiddle.net/564sbkn2/5/

209Name_Not_Found2018/12/22(土) 20:43:24.31ID:???
calc内の演算子は前後にスペースが必要です

210Name_Not_Found2018/12/22(土) 21:41:46.70ID:???
>>209
ありがとうございます、うまく動きました!
http://jsfiddle.net/564sbkn2/8/

あと、CSSでthisみたいなのは使えないんでしょうか?
右端を親要素の右端に合わせる時、widthは決め打ちするしか無いのでしょうか

.span4 {
width: 20px;
}

@keyframes span4 {
0% {left: 0%;}
100% {left: calc(100% - 20px);}
}

以下のような感じで記述できると有り難いのですが
100% {left: calc(100% - this.width);}

211Name_Not_Found2018/12/22(土) 21:46:04.61ID:???
right

212Name_Not_Found2018/12/22(土) 21:51:48.67ID:???
right 0%

213Name_Not_Found2018/12/22(土) 21:58:16.96ID:???
>>211-212
rightにするとこうなるんです
http://jsfiddle.net/564sbkn2/9/

214Name_Not_Found2018/12/22(土) 22:14:21.68ID:???
>>210
100% {left: 100%; transform:translateX(-100%);}

215Name_Not_Found2018/12/22(土) 22:38:45.23ID:???
>>214
ありがとうございます!!!
やっと完成しました!!!
http://jsfiddle.net/564sbkn2/10/

216Name_Not_Found2018/12/22(土) 23:12:35.79ID:???
ここの人らはgulp使ってる?
なんかオススメのプラグインあったらおせーて

217Name_Not_Found2018/12/23(日) 01:48:07.46ID:???
すいません質問お願いします
【Google検索結果で「ページがモバイル フレンドリーではありません。」を表示させない方法】

PCのみで、スマホサイトがないのですが、ヘッダーに下記ソースを記述しても特に問題ありませんか?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ttps://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ja
PCのみのサイトなので「ページがモバイル フレンドリーではありません。」とGoogle検索結果に表示されているのですが、
この表示を消したいのです。

ttp://kino-interior.com
このサイトはスマホサイトがありませんが、<meta name="viewport"~の記述があります。
Google検索結果では「ページがモバイル フレンドリーではありません。」が表示されていません。
この表示を無くす方法を知りたいのですが、手法をご存知の方おられますか?

218Name_Not_Found2018/12/23(日) 02:14:16.69ID:???
訂正。
Googleでログインした場合のみ表示されますが、その話とは別に
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これを入れても入れなくても特に問題ないですか?

219Name_Not_Found2018/12/23(日) 03:13:03.14ID:???
>>217-218
・まず、スマホ対応のために以下のコードを入れるのは正しい
<meta name="viewport" content="width=device-width, initial-scale=1.0">

・これを入れても入れなくても特に問題ないですか?
入れないとめちゃくちゃ見づらい
俺は問題があると思うが、100%PCからしか見ないサイトなら問題はない

・Google検索結果
表示順位は下がる

入れない理由はさっぱり分からないが、
モバイルには見せたくない等の理由があるならまぁいいんじゃないかな

220Name_Not_Found2018/12/23(日) 09:27:16.21ID:???
>>217
PCのみでスマホ用がないんならモバイルフレンドリーじゃないんだからその通りだろ
逆にモバイルフレンドリーである(モバイルフレンドリーではないの表示がない)ならスマホ用がある

>Google検索結果では「ページがモバイル フレンドリーではありません。」が表示されていません。

そのサイトはお前のサイトか?
それなら人に聞く必要なくない?
お前のサイトじゃないなら表示されないのは当たり前
その表示はサイト所有者にしか表示されないからな

221Name_Not_Found2018/12/23(日) 10:27:58.84ID:???
bootstrap使うためには結局jqueryとcss HTMLの知識が必要じゃないですか?

222Name_Not_Found2018/12/23(日) 10:52:28.55ID:???
>>221
native bootstrapもあるからjQueryはなくてよい
htmlとcssなんて中学生でもできるんだからそれくらいやれ
キミが小学生なら今からがんばろう

223Name_Not_Found2018/12/23(日) 12:43:32.16ID:???
<html>と<body>、この2つの間にインデントは付けますか?付けませんか?

224Name_Not_Found2018/12/23(日) 12:57:00.28ID:???
>>223
付ける時も付けないと時もある

225Name_Not_Found2018/12/23(日) 13:23:35.36ID:???
>>224
なるほど、ありがとうございます
どういう時に使い分けてますか?

226Name_Not_Found2018/12/23(日) 13:41:50.62ID:???
>>225
適当

227Name_Not_Found2018/12/23(日) 13:55:41.17ID:???
>>226
なんと。
ありがとうございました

228Name_Not_Found2018/12/23(日) 13:58:14.48ID:???
MSのブラウザー「Edge」が刷新されても、かくして「IE」は生き残る
https://wired.jp/2018/12/12/microsoft-edge-browser-chromium-internet-explorer/

Edgeもう無くていいんじゃないの

229Name_Not_Found2018/12/23(日) 14:19:29.01ID:???
>>220
IE残って欲しいの?
そうならないようにEdgeが必要なんでしょう
誰もがChromeをインストールするわけじゃないんだから

230Name_Not_Found2018/12/23(日) 14:29:49.51ID:???
IEからの移行でEdgeが流行ればもう少しこの界隈は救われるかと思ったけど、移行失敗でEdgeという要素が増えただけ

231Name_Not_Found2018/12/23(日) 14:41:56.43ID:???
それを成功させるためにChromiumベースにするんだろう
OS標準で最新ブラウザを搭載するのは
ユーザーにとっても重要なことだし

ビジネス的にリターンが見込めないならば
開発コストを減らす方が重要
せっかくOSSとして落ちてるんだからバンバン利用しなきゃ

232Name_Not_Found2018/12/23(日) 15:18:17.66ID:YJsVCDMO
>>220
いや、だから下に訂正って書いてるじゃねーか
ちゃんと読んでからレスつけろアホ

233Name_Not_Found2018/12/23(日) 20:49:13.54ID:???
>>222
HTML CSSはやってるんだけど暗記科目過ぎて全く覚えられん 特にCSSの要素多すぎ

234Name_Not_Found2018/12/23(日) 22:54:41.98ID:???
>>233
全然多くない
普通に暗記できるレベル
九九以下

235Name_Not_Found2018/12/23(日) 22:58:02.67ID:???
そもそも大半使わんからな
アニメーション関係はややこしいけど使う時にどうせもう一回調べ直す

236Name_Not_Found2018/12/23(日) 23:09:05.83ID:???
そもそも誰も全部暗記なんてしてないぞ

237Name_Not_Found2018/12/23(日) 23:35:24.03ID:???
7の段とか覚えにくいしな

238Name_Not_Found2018/12/24(月) 04:37:52.89ID:zatn5f3z
cssは覚えるもんじゃないよ
気づいたら覚えてる
九九と一緒、気づいたら60の段くらいまで言えるようになってる

239Name_Not_Found2018/12/24(月) 06:01:40.35ID:???
60の段って、ロレロレミロレレとかいうの?

240Name_Not_Found2018/12/24(月) 10:55:10.84ID:???
レロレロレロレロ

241Name_Not_Found2018/12/24(月) 15:38:21.91ID:???
回レ回レ回レ回レ

242Name_Not_Found2018/12/24(月) 20:28:04.00ID:zatn5f3z
ゆとり以降のガキって、マジで1桁の九九しか覚えないらしいな
26×31とかの問題でたら、もしかしてひっ算とかすんのか?
非効率

243Name_Not_Found2018/12/24(月) 20:34:56.32ID:???
ゆとりはインド式かけ算を習わないのか?
親に聞いてもインド式カレー?とか言ってたし

244Name_Not_Found2018/12/24(月) 20:59:52.12ID:???
きも

245Name_Not_Found2018/12/24(月) 23:01:21.50ID:???
カレーよりうんこがすき

246Name_Not_Found2018/12/25(火) 11:22:05.47ID:???
少なくとも戦後の日本の学校で
9x9以降を覚えさせる教育はしてないな

中学受験が過熱してた90年前後は
3.14の段と、11〜19までの平方数は覚えてただろうけど

247Name_Not_Found2018/12/25(火) 12:31:36.99ID:???
今の時代なら15x15(FF)覚えさせればどうだろう?
奴隷化がスムーズですよ経団連さん

248Name_Not_Found2018/12/25(火) 15:31:49.66ID:???
そんなの覚えてなくてもお前奴隷じゃん

249Name_Not_Found2018/12/25(火) 15:32:20.17ID:???
ジジイは帰れな

250Name_Not_Found2018/12/25(火) 15:38:57.51ID:???
>>249
ゆとりって言われるだけだからあまり年寄り扱いしないほうがいいぞ
ゆ・と・り♪

251Name_Not_Found2018/12/25(火) 16:10:37.75ID:f+Iah4KT
今の若者ってゆとりじゃないらしいな
この間、2ちゃんで大学生を、最近のゆとりは〜とか言ってバカにしたら、おじさん逆に叩かれちゃった

252Name_Not_Found2018/12/25(火) 16:23:38.42ID:???
>>250
加齢臭プンプンでワロタwwwwww
こんなスレに書き込む前に頭部のお手入れからしろよな^^

253Name_Not_Found2018/12/25(火) 16:29:49.86ID:???
>>252
ゆとり

254Name_Not_Found2018/12/25(火) 16:31:04.91ID:???
cssで属性指定してn番目、ということは可能でしょうか?
nth-of-typeは要素のn番目しか指定できないようです
jsでなんとかするしか無いでしょうか

255Name_Not_Found2018/12/25(火) 16:31:53.51ID:???
ゆとり世代は20代後半ぐらいだからな
それより下のことをゆとりと言うのはまじでおっさんかじじいだけだね

256Name_Not_Found2018/12/25(火) 16:34:03.17ID:???
>>254
[foo="var"]:nth-child(n)

257Name_Not_Found2018/12/25(火) 16:38:52.52ID:???
>>250
そういやお前いい加減結婚したの?
ゆとりの俺の子供はもう小学生だよ?
まだ童貞つらいてるの?

258Name_Not_Found2018/12/25(火) 16:40:58.13ID:???
>>256
ダメでした
記述間違ってますか?
http://jsfiddle.net/sjpemn83/1/

[class="osaka"]:nth-child(2){
background: red;
}

259Name_Not_Found2018/12/25(火) 16:48:24.28ID:???
ゆとりじゃなくて無能か、ゴメンな

>>256
はNG

>>258
[class="osaka"]:nth-of-type(4){
background: black;
}

260Name_Not_Found2018/12/25(火) 16:51:16.79ID:???
>>259
ありがとうございます、うまく動きました

261Name_Not_Found2018/12/25(火) 16:54:43.85ID:???
でも何でclass指定だと要素扱いのような挙動になるのでしょうか
仕様ですか

262Name_Not_Found2018/12/25(火) 17:07:08.42ID:???
仕様
擬似クラスは要素に指定するもの

263Name_Not_Found2018/12/25(火) 17:12:47.64ID:???
<!DOCTYPE html>
で書き始めた場合、ブラウザはhtmlのバージョン幾つで解釈するのでしょうか
常に最新でしょうか、それともそれっぽい感じで解釈してくれるのでしょうか

264Name_Not_Found2018/12/25(火) 17:52:37.88ID:???
5

265Name_Not_Found2018/12/25(火) 18:03:41.15ID:???
>>263
ブラウザのバージョンによる。
例えばIE6だとHTML5に対応してないから
5で解釈するわけがない

266Name_Not_Found2018/12/25(火) 18:26:14.18ID:???
>>265
ie6ってそんなにいるんですか?

267Name_Not_Found2018/12/25(火) 18:28:56.26ID:???
>>266
Chromiumユーザーよりかは多いぐらいだよ

で、それが今の話となにか関係あるの?

268Name_Not_Found2018/12/25(火) 18:34:41.09ID:???
嘘乙。

269Name_Not_Found2018/12/25(火) 18:41:58.15ID:???
ちなみに現在のChromiumのシェアは0.15%。
バージョン明記されてないから全バージョン合わせてこれなんだろう
https://netmarketshare.com/browser-market-share.aspx?id=browsersDesktopVersions

270Name_Not_Found2018/12/25(火) 18:42:16.00ID:???
>>264
5.0、5.1どちらでしょうか?

>265
自分のサイトですが、IEのバージョンと割合です
11 93%
9 3%
10 1.4%
8 1.15%
7 0.29%
6 0.01%
5 0.00%
ガラケー以下です、考慮しなくて良さそうです

>>267
>Chromiumユーザーよりかは多いぐらいだよ
google analyticsでChromiumかどうかは、
どこで判別するのでしょうか

>で、それが今の話となにか関係あるの?
多数のユーザーに不満がない環境を提供したいために質問しています
0.01%のための環境構築は不要でしょう

271Name_Not_Found2018/12/25(火) 18:47:11.28ID:???
> 自分のサイトですが

おま環だろ

272Name_Not_Found2018/12/25(火) 18:54:55.26ID:???
>>270-271
そんなもん

PCサイト
11 94.74%
9 3.06%
8 1.02%
10 0.98%
7 0.2%
6 0.01%
5は無し

スマホゲーサイト
11 75.81%
9 15.04%
8 8.85%
10 0.29%
5-7無し

まぁIE6を引き合いに出すのは無いわ

273Name_Not_Found2018/12/25(火) 19:01:18.70ID:???
>>267
バーカ

274Name_Not_Found2018/12/25(火) 19:17:10.31ID:???
昔からたいていのブラウザはhtmlのバージョン厳密にチェックしてたわけじゃなく対応してるタグであればその通りに表示してたわけだし
<!DOCTYPE html>はhtml5以降という意味より標準モードを担保する役目の方が強い気がする

275Name_Not_Found2018/12/25(火) 19:17:24.56ID:???
>>272
だから、おま環だろ

276Name_Not_Found2018/12/25(火) 19:32:55.81ID:???
思った以上に脱IE進んでたのね
IEは全部捨てて良いという結論に達したわ
ちなみにIE自体は全体の8%

11.0 95.0984559%
8.0 2.5499363%
9.0 1.4591302%
10.0 0.7224819%
7.0 0.1133305%
6.0 0.0424989%
7.0b 0.0141663%

277Name_Not_Found2018/12/25(火) 19:37:57.27ID:???
https://netmarketshare.com/browser-market-share.aspx

1. Chrome 63.60
--- IE以下全部切り捨て --
2. Internet Explorer 11.19%
3. Firefox 10.00%
4. Edge 4.34%
5. Safari 3.82%
6. Opera 1.57%

278Name_Not_Found2018/12/25(火) 20:26:54.42ID:7gK+LTg6
サイトごとにちゃんとアクセス解析して調べないとね
BtoBのサイトと、BtoCのサイトではブラウザの割合もまた変わってくるし

279Name_Not_Found2018/12/25(火) 20:27:51.39ID:???
>>267
ダッサwwww

280Name_Not_Found2018/12/25(火) 20:31:00.61ID:???
>>279のおかげで思い出した

HTMLのバージョンが何と解釈されるかって話に
IE6のシェアがどう関係あるの?

281Name_Not_Found2018/12/25(火) 21:15:06.54ID:???
>>265
>例えばIE6だとHTML5に対応してないから
>5で解釈するわけがない

0.0x%の特殊なユーザー環境を前提に回答するアホがいたから話がややこしくなった

282Name_Not_Found2018/12/26(水) 00:58:26.02ID:???
>>281
IE8もHTML5対応していない

283Name_Not_Found2018/12/26(水) 10:11:02.79ID:???
IE8は今でも企業内の多くのシステムで必須ブラウザとして使われているからなあ

284Name_Not_Found2018/12/26(水) 12:09:11.07ID:???
それは関係ない
無視していい

285Name_Not_Found2018/12/26(水) 12:12:04.54ID:???
わらった

286Name_Not_Found2018/12/26(水) 13:37:28.51ID:???
>>283
多くって何%くらいなん?

287Name_Not_Found2018/12/26(水) 15:47:40.07ID:???
ページ全体で基底となる文字サイズや行間などフォント関連の初期設定は
html{}とbody{}どちらに定義するのが適切ですか?

288Name_Not_Found2018/12/26(水) 15:52:52.11ID:???
どっちでもいい

289Name_Not_Found2018/12/26(水) 16:03:32.98ID:???
>>287
実質どっちでも同じだけど、htmlに当てる方が理に叶っている
https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css

290Name_Not_Found2018/12/26(水) 16:04:13.16ID:???
こっちはbodyにアテてるのか
どっちでも良さそう
https://meyerweb.com/eric/tools/css/reset/

2912872018/12/26(水) 16:09:43.12ID:???
reboot.cssはどちらかというとbese系変数がbodyに当てられてるようですが・・
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss

292Name_Not_Found2018/12/26(水) 16:25:20.95ID:???
htmlで一旦sans-serifにリセットした直後にbodyで改めてフォント指定するのって深い意味あるの?
やってる事が分かりやすいっていう可読性の話だろうか

293Name_Not_Found2018/12/26(水) 16:28:07.06ID:???
んなこたーない
多分htmlで指定していることを忘れている

294Name_Not_Found2018/12/26(水) 16:33:31.25ID:???
>>293
いや、そっちの方がないだろw

295Name_Not_Found2018/12/26(水) 16:47:11.49ID:???
わからん

// 2. Change the default font family in all browsers.
って書いてるけど、古いブラウザのバグ対策か何かに見えなくもない

296Name_Not_Found2018/12/26(水) 16:48:46.29ID:???
bodyでフォント指定忘れた場合iphoneが明朝になる対策
と、思う

297Name_Not_Found2018/12/26(水) 16:58:37.18ID:???
Bootstrapは日本人にやさしいな

298Name_Not_Found2018/12/26(水) 17:07:47.71ID:???
人の数だけ理想のノーマライズがあるから、結局のところReset.cssが一番重宝する

299Name_Not_Found2018/12/26(水) 17:21:37.62ID:???
そもそもhtmlに書くプロパティ ってほとんど無いと思う
見た目を変えるためのスタイルならbodyから継承させるのが筋じゃね

300Name_Not_Found2018/12/26(水) 17:32:55.92ID:???
dodyでwidth決めて背景付けたい時ぐらいか

301Name_Not_Found2018/12/26(水) 17:38:11.88ID:jUjb3YhO
この↓ページの
https://www.deviantart.com/rikitza/gallery/
メインの画像?だけが表示されてるフレームのURLを知りたいんですが
可能ですか?
上部のコンテンツ名やら作家名、左側の"Gallery Folders"
とか以外の部分です。

302Name_Not_Found2018/12/26(水) 17:47:26.54ID:???
>>301
フレーム使ってないよ

303Name_Not_Found2018/12/26(水) 17:47:41.28ID:???
宣伝か
そうでなければスレ違いの予感

304Name_Not_Found2018/12/26(水) 17:48:09.99ID:eJT/YAS5
>>301
右クリック

305Name_Not_Found2018/12/26(水) 21:08:48.38ID:???
昨日の話題だけど、
IE6と7はほとんど中国人
アダルトサイトには余裕で1%以上くる

306Name_Not_Found2018/12/26(水) 22:07:13.39ID:???
現在無職の30半ば(男)です
転職活動中ですが時間があるので、
htmlを勉強しようかと思っています
そこで質問ですが私の年齢からhtmlの勉強をするのは難しいでしょうか
PCはネットが不自由なく出来て、エクセルでメジャーな関数は使えるレベルの初級者です
ちなみに、これを仕事にするつもりはありませんが趣味でwebサービスを作りたいなと思ってみたり

※手帳は持っていませんが高次脳機能障害を患っています
ロジカルに考えることが苦手で記憶力も低下しています

307Name_Not_Found2018/12/26(水) 22:22:21.39ID:???
このスレで高次脳機能障害なんて文字列に遭遇するとは
お互い頑張ろう

308Name_Not_Found2018/12/26(水) 22:27:54.36ID:???
>>307
私の障害だと勉強は難しいでしょうか

309Name_Not_Found2018/12/26(水) 22:51:51.72ID:???
やってみもしないうちはなにもわからない

310Name_Not_Found2018/12/26(水) 23:11:58.30ID:???
>>309
そうですよね
なんかありがとうございます
オススメのテキスト及びサイトはありますか

311Name_Not_Found2018/12/26(水) 23:19:14.99ID:???
>>306
真面目な話、年齢的には全然問題ない
30代後半から始めて仕事としてやってるやつも周りに結構いる
だけど、障害の種類や程度にもよるけど高次脳機能障害となると難しいかと
htmlするなら当然cssも必要になってくるけど、cssにはロジカルな思考がいる
「このスタイルでこうなる」とか「ここは親からこのスタイルが適用されてるからこれが必要」とか考えて作る
頭の中で完成形を構築しながら書いたりもする
高次脳機能障害だとそういう認知機能が必要なことは苦労すると思う
でもまあ仕事ではなく趣味としてするならまずはやってみたらいいんじゃないかな
リハビリにもなるだろうし

312Name_Not_Found2018/12/26(水) 23:31:03.94ID:???
>>311
レスありがとうございます
よろしければどう勉強をすればよいか教えて頂けますか

313Name_Not_Found2018/12/26(水) 23:32:43.38ID:???
無職で暇ならHTMLとCSSに加えてPHP or Rubyを勉強すれば
並レベル以上のアフィリエイターにすぐなれるよ

314Name_Not_Found2018/12/26(水) 23:52:50.19ID:???
>>313
ほー
大変そうだけどやってみますわ

315Name_Not_Found2018/12/27(木) 00:27:53.74ID:???
>>306
まず手帳を取得しないと話にならない。手帳がなければ健常者だ
で、htmlだけだとその辺の事務員でもカタテマに出来る
wordpressを覚えると良い

316Name_Not_Found2018/12/27(木) 00:45:22.09ID:???
>>315
手帳なら身体障害者手帳1級は持ってるよ
ワードプレスか
そっちの方がメリットあるんかね

317Name_Not_Found2018/12/27(木) 01:03:34.33ID:???
ワイくらいの熟練者になると脳内から直接コードを書き換えたりできるようになる
まあがんばれ

318Name_Not_Found2018/12/27(木) 01:12:49.38ID:???
どうやって勉強すればええんすかね

319Name_Not_Found2018/12/27(木) 01:16:08.95ID:???
まずは筋トレからや

320Name_Not_Found2018/12/27(木) 01:26:04.91ID:???
bodyにcss当てるとAMP配信でエラーになるからやめとけ

321Name_Not_Found2018/12/27(木) 05:47:56.10ID:???
どうやって勉強するの?ってのは間違い
まず目的を作る
そのために調べたり学習する
勉強方法は様々だから決まった形はない

322Name_Not_Found2018/12/27(木) 10:05:29.78ID:???
>>312
本とかは多種多様で人によって合う合わないがあるからこれがいいとは薦めにくい
いろんなサイトを見て、これいいなと思ったところを再現してみたらどうかな
もちろん動的に出力してるのは無視して見えてるまんまを再現する
こういうレイアウトにするにはどうしたらいいのか、とかを調べて作ってみる
答え(というか見本)は見てるサイトのソース
比較的簡単なレイアウトから少しずつ難しいのに挑戦していけばいい

323Name_Not_Found2018/12/27(木) 13:30:41.88ID:???
>>318
「入門」とか「hello world」ってつけてググればいくらでもサイトがあるから

324Name_Not_Found2018/12/27(木) 13:59:44.81ID:???
>>306
障害はわからんけど、その年で勉強開始して就職目指してる俺がいるから大丈夫だろ。

まだ無職だけど…。

325Name_Not_Found2018/12/27(木) 14:16:05.92ID:CcSR7aM6
就職はね…
何が出来るか、ではなく
何が出来ないか、が問題になるから

326Name_Not_Found2018/12/27(木) 16:31:00.23ID:???
ここぞとばかりに上から目線w

327Name_Not_Found2018/12/27(木) 17:29:01.28ID:???
なんにもできないけど一応生活はできてる

328Name_Not_Found2018/12/27(木) 17:52:15.07ID:???
カノニカルとカニノカラって似てるよね

329Name_Not_Found2018/12/27(木) 18:11:07.11ID:???
あーカニ食べたいなー

330Name_Not_Found2018/12/27(木) 18:25:41.86ID:???
CSSカスタムプロパティ利用時のIE11対策のひとつとして
var関数を使わないバージョンを併記する方法がありますが
この書き方って現時点で何かメリットありますか?
開発過程ではなく最終的に書き出すCSSに両方記述される場合の話です

331Name_Not_Found2018/12/27(木) 19:25:15.63ID:???
IE11対策なのだからIE11で動くことじゃね?そういうときデメリット聞かないか普通

332Name_Not_Found2018/12/27(木) 19:35:00.18ID:???
a要素の中にdisplay:blockを入れると
opacityが効かなくなりました

どうもa要素からblock要素がはみ出ているようなのですが、
これは何故でしょうか?
また、解決方法はありますか?
http://jsfiddle.net/5pz3dhcj/

333Name_Not_Found2018/12/27(木) 19:56:56.34ID:???
素直にaもdisplay: blockにしたら?
firefoxは効いてるからchromeのバグじゃね?

334Name_Not_Found2018/12/27(木) 20:09:31.47ID:???
>>331
いや、変数部分を残す意味が全く無さそうだと思ったんで

335Name_Not_Found2018/12/27(木) 20:15:12.93ID:???
a要素はデフォではinlineだから
セマンティック的に問題なくても、書き方としては間違い

336Name_Not_Found2018/12/27(木) 20:57:23.80ID:???
>>330
> 開発過程ではなく最終的に書き出すCSSに両方記述される場合の話です

書き出すってビルドする話?
var関数ってPostCSSのことかな?

普段Sass使ってるからPostCSSは詳しくないけど、
ビルドしたらIE11対応のコードも
出力する設定とかあるんじゃないの?

ソースコード自体はvar関数だけ書けば良くて
書き出すCSSには両方記述される

337Name_Not_Found2018/12/27(木) 21:04:32.09ID:???
>>335
いつの時代だよ

338Name_Not_Found2018/12/27(木) 21:17:55.36ID:???
インライン要素とブロック要素の概念自体がなくなったと思ってる人多いよね

339Name_Not_Found2018/12/27(木) 21:21:31.34ID:???
例えばこのサイトとか、HTML5で置き換えられたとか書いてあるし
信用できるの?このサイト

https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements

> ブロックレベル要素とインライン要素という区分は、
> HTML 4.01 までの仕様で使用されていました。
> HTML5 ではこの二つの区分が、より複雑なコンテンツカテゴリの
> 組み合わせに置き換えられました。

340Name_Not_Found2018/12/27(木) 21:23:06.18ID:???
ここもなくなるとか書いてあるし。ひどい間違いだね。

http://www.htmq.com/html5/007.shtml

> HTML4.01では要素は大きくブロックレベル要素と
> インライン要素のいずれかに分類されていますが、
> HTML5ではブロックレベル要素とインライン要素の分類は無くなります。

341Name_Not_Found2018/12/27(木) 21:31:25.19ID:???
>>338
何が言いたいのか知らんが、HTMLからはインライン要素、ブロック要素というものはなくなった。

インラインとブロックの違いは見た目の違いであり、色などと同じように
CSSのdisplayプロパティで指定するものというふうに定義が変わった。
名前をつけるならば、インラインスタイルとかブロックスタイルというべきだろう。

すべての要素はデフォルトのスタイルを持っているが、
CSSのdisplayプロパティで、inlineやblock、さらにはnoneや
tableなどのスタイルに自由に変更できるものとされた。
だから「インラインスタイルのdiv要素」というのもおかしな表現ではない

342Name_Not_Found2018/12/27(木) 21:35:21.71ID:???
>>335
> a要素はデフォではinlineだから
> セマンティック的に問題なくても、書き方としては間違い

inlineなのはCSSの話で、セマンティック(HTML)とは無関係
HTMLではa要素の中に特定のタグが入れられるかどうかでしか決まっておらず

a要素の中にspanを入れることは可能。(spanのdisplayがinlineでもblockでも関係ない)

343Name_Not_Found2018/12/27(木) 21:37:49.59ID:???
display:inlineの中にdisplay:blockを入れた時の挙動は
インライン要素にブロック要素を入れた時の挙動と変わってないけどな

344Name_Not_Found2018/12/27(木) 21:40:57.70ID:???
>>339-340
間違ってないよね?

345Name_Not_Found2018/12/27(木) 21:52:04.31ID:???
>>343
そりゃあ、CSSの仕様だから変わらなくて当然

346Name_Not_Found2018/12/27(木) 21:57:02.00ID:???
>>332
どっちが正しいのか知らないがバグかな
IE11, Edge, Firefox, Chromeの中でChromeだけがおかしかった。

aやhoverは関係なく、display:inline の中に、display:blockを入れた時
内側の要素のopacityが反応しなくなる(親要素のスタイル継承しなくなる)

http://jsfiddle.net/2sax6tfr/

回避策としては、内側の要素に、opacity:inheritをつければ親要素
(元々の例ではa要素)のスタイルを継承させることができた

347Name_Not_Found2018/12/27(木) 21:58:38.25ID:???
補足

> 内側の要素のopacityが反応しなくなる(親要素のスタイル継承しなくなる)
colorなどは親要素のスタイルを継承している。

348Name_Not_Found2018/12/27(木) 22:24:40.30ID:???
たまにjsfiddle側の仕様で変になる時あるから素のHTMLで試してみたら

349Name_Not_Found2018/12/27(木) 23:14:08.46ID:???
inlineにblock入れるのはCSSのルールとして正常なの?

350Name_Not_Found2018/12/27(木) 23:16:51.90ID:???
CSSでどうやってinlineにblockを入れるっていうんだよw

こういう書き方でも想定してんのか?

.class1 {
 display:inline;
 .class2 {
  display:block;
 }
}

351Name_Not_Found2018/12/27(木) 23:18:39.82ID:WN9MC+A6
ここでの質問するべき内容か迷ったのですが
linuxとwindowsからgoogleで確認したときlinuxのときだけ
置という字がくずれます
ブラウザのgoolgeは両方更新おり文字コードはutf-8で書いています
HTML/CSSのほうの原因を疑うべきでしょうか?

352Name_Not_Found2018/12/27(木) 23:24:01.15ID:???
>>353
え?フォントに?

353Name_Not_Found2018/12/27(木) 23:26:41.29ID:???
HTML/CSSは何も悪くないだろw

354Name_Not_Found2018/12/27(木) 23:31:56.79ID:???

355Name_Not_Found2018/12/27(木) 23:37:50.45ID:???
>>349-350
要素のコンテンツモデルはHTML規定
>>343はレンダリングの話なので、CSS規定
違いを勉強し直せ

356Name_Not_Found2018/12/27(木) 23:39:39.47ID:WN9MC+A6
>>354
つまり、崩れてなくて違う書体の置が表示されてたのか
設定がどこかで変わっているということか?

357Name_Not_Found2018/12/27(木) 23:44:21.66ID:???
>>343は意味不明じゃね?

HTML5では
display:inlineにした要素のことさしてインライン要素
display:blockにした要素のことをさしてブロック要素
と言ってるのだから

display:inlineの中にdisplay:blockを入れた時の挙動は
= インライン要素の中にブロック要素を入れた時の挙動は
インライン要素にブロック要素を入れた時の挙動と変わってないけどな

と当たり前のことを言ってる。


順番が前後するが、
HTML4の時の特定の種類の要素のことを
インライン要素、ブロック要素と呼ぶ概念はなくなっている
すべての要素はインラインにもブロックにも出来る。

358Name_Not_Found2018/12/27(木) 23:46:18.55ID:???
もうちょっと察してほしかったけど、まぁいいっか

359Name_Not_Found2018/12/27(木) 23:49:42.36ID:???
そういうの社会では通用しないぞ
上司にもそう言うの?ww

360Name_Not_Found2018/12/27(木) 23:55:33.01ID:???
社会だと、え?刺してほしかったの?ぐさぁって言われるからなw

361Name_Not_Found2018/12/28(金) 00:17:50.37ID:???
IEがスタンダードを受け入れれば、人類とインターネットの関係はもっと捗ると思うの

362Name_Not_Found2018/12/28(金) 00:20:32.58ID:???
それぐらいIEは重要なの

363Name_Not_Found2018/12/28(金) 00:25:02.40ID:???
順調にシェア下げてんじゃん

364Name_Not_Found2018/12/28(金) 00:26:01.58ID:???
っていうかもうaの中にdivも入れられるからな?いつの時代の話してんのおまえら

365Name_Not_Found2018/12/28(金) 00:30:33.92ID:???
元から誰もそんな話してないよ

366Name_Not_Found2018/12/28(金) 00:38:49.46ID:???
>>357
> HTML5では
> display:inlineにした要素のことさしてインライン要素
> display:blockにした要素のことをさしてブロック要素
> と言ってるのだから
そんな定義ないぞ

367Name_Not_Found2018/12/28(金) 00:44:30.46ID:???
>>366
そりゃないよw
HTML5ではインライン要素やブロック要素というのは廃止された
ただ「インラインにした要素」のことをインライン要素と呼んでいる所があるってだけ
定義じゃなくてたんなる呼称

368Name_Not_Found2018/12/28(金) 00:45:27.69ID:???
>>367
それはCSSを理解してない輩が勝手にそう呼んでるだけだろ

369Name_Not_Found2018/12/28(金) 00:46:18.84ID:???
>>367
それと「HTML5で言ってる」なんていうなよ

370Name_Not_Found2018/12/28(金) 07:58:00.15ID:???
inlineの中にblockが現れたら
そこでinline側のボックスは強制終了するんじゃなかったっけ?

371Name_Not_Found2018/12/28(金) 11:02:16.38ID:???
>>370
終了はせず、ブロックは2つの行ボックスに挟まれる

例えばインラインボックスに指定したボーダーは
ブロックで途切れるが、後続の行ボックスにまた現れる

>>357
厳密には、インライン要素というよりインラインボックス(要素が生成するボックスがインラインになる)

372Name_Not_Found2018/12/28(金) 11:27:41.18ID:???
>>311の実感は俺の知る範囲とも一致するな。

373Name_Not_Found2018/12/28(金) 11:49:28.63ID:???
>>371
そうね
そして、インラインボックスはCSSの用語なので、HTML4やHTML5を取り上げるのは間違い

374Name_Not_Found2018/12/28(金) 12:31:44.82ID:???
結局みんな曖昧な認識だったって事でおk?

375Name_Not_Found2018/12/28(金) 12:55:41.65ID:???
>>374
曖昧というより知った風な事いって俺スゲーしてるだけの白痴

376Name_Not_Found2018/12/28(金) 13:06:07.67ID:???
>>371
ああそうかそうだった
pの中にブロックが現れるとそこで終わるのと勘違いしてた

ところで、↓この、空のpが作られるのって仕様でしたっけ?
http://jsfiddle.net/muf1vg7L/

377Name_Not_Found2018/12/28(金) 15:35:09.60ID:???
HTML5は正しくないHTMLを与えられた時
どのように解釈するのかも決まってるんでしょ?

378Name_Not_Found2018/12/28(金) 16:33:04.52ID:???
>>332
です。勉強してきました

○結論 chromeのバグ
・inlineの中にblockを置くと、blockの前後でinline要素が分かれて匿名ブロックボックスに包含される
・opacityは継承されないが、子要素全体に及ぶ。
・更にposition:absoluteを付けた場合。opacityも付くが、前面のa要素が背景まで貫通する
この動作が合ってるかどうかは不明
http://jsfiddle.net/r4g8qm23/1/
・borderとかbackgroundを持ち出すとどんどんややこしくなってきたので、chromeのバグって事で。

○そもそもはと言うと、記述が間違っていたが、意図通りに動いていたのが始まり
そもそも論で言うと>>333さんが最も正しい。
aの中のimgに対してdisplay:block;margin:0 autoを設定し、
「a要素の親要素の中央」に来る事で問題ないと思ってしまった
※この動き自体は完全にcssの仕様通り
aをdisplay:blockにしてmargin:0 autoだけで済んでいた

○mozilla.orgについて
知識付けてから読むと、翻訳ミスも結構ありました。色々と修正しています。

379Name_Not_Found2018/12/28(金) 16:33:19.54ID:???
>>339-340,344 サイト内容は合っています。ブロックレベル要素、インライン要素は無くなりました。英語版は信用できますが、日本語版は翻訳が普通に間違っていjます。
>>346 chromeが間違っています。継承では無く、スタイルが適用されなくなる、といったほうが正しいかも
>>349 CSS3にそのルールはありません。入れて良いかどうかはコンテンツカテゴリで決まります。CSS2時代は不明です
>>357,367 aかimg、i(アイコン)をインラインにする時に使いますね。インライン=display:inline。インライン要素と言われてもニュアンスは伝わります。ボックス要素というのは使わないです
>>376 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
解釈の順番はこんな感じ
・元html
<p>foo<div>bar</div>baz</p>
・pの中にdivは不可(フレージングコンテンツのみ)。pはdivの前で終了、p終了タグを一個追加
<p>foo</p><div>bar</div>baz</p>
・pの終了タグが最後に余っているからp開始タグを一個追加
<p>foo</p><div>bar</div>baz<p></p>

3803442018/12/29(土) 10:37:01.41ID:???
>>379
> 英語版は信用できますが、日本語版は翻訳が普通に間違っています。
>>339-340にレスしてるけど、http://www.htmq.com/html5/007.shtmlにも英語版があるの?
少なくとも、>>339の引用文に間違いはないと思うけど、具体的にどこの翻訳が間違ってる?

381Name_Not_Found2018/12/29(土) 10:49:40.57ID:???
だーかーらー、HTML5ではインライン要素とか
ブロック要素はなくなりました。で終わりだろ。
馬鹿だけだよ。まだあるとか言ってるのは

382Name_Not_Found2018/12/29(土) 11:04:24.32ID:???
人は見たいものしか見ない。
彼らは永遠になくなったインライン要素とブロック要素を追い求めるのだww

383Name_Not_Found2018/12/29(土) 11:11:52.21ID:???
>>381
「ブロックレベル要素」ね
彼らはdisplay:blockばかりに目が向いてるけど、table要素はdisplay:tableでHTML4.01ではブロックレベル要素だった
なので、「ブロックレベル要素(HTML4)=ブロックボックス(CSS)」は明らかに間違い

384Name_Not_Found2018/12/29(土) 11:20:39.98ID:???
>>379
> インライン=display:inline。インライン要素と言われてもニュアンスは伝わります。ボックス要素というのは使わないです

伝わる/伝わらないの問題ではなく、その表現をする人は大抵HTML/CSSのルールをごちゃまぜに覚えてる

<span style="display:inline"><span style="display:block">block</span></span>

「インライン要素の子にブロックレベル要素は持てないので、上のHTMLは文法違反です。」とドヤ顔でいいかねない

385Name_Not_Found2018/12/29(土) 11:53:52.45ID:???
>>380
書き直してる内に変になりました、すいません
英語版はmozillaの事です
日本語版はみんな好き勝手書いてるのでかなり注意した方がよいですね

386Name_Not_Found2018/12/29(土) 12:24:34.03ID:???
× 日本語版はみんな好き勝手書いてる
○ お前が好き勝手直さないのがいけない

387Name_Not_Found2018/12/29(土) 12:54:16.48ID:???
いつまで続くの?

388Name_Not_Found2018/12/29(土) 13:09:53.66ID:???
>>385
「みんな好き勝手書いてる」という具体的な部分を書けない時点であなたの情報が無価値なのでは
MDN日本語は完全に英語版と動機が取れてないので、古いバージョンの情報がそのまま残っている事はある
で、日本語訳の誤植は個人的にはあった気が記憶がないが、そんなに多いか?
どちらかというと、原文のMDN英語版でも仕様を明確に説明しきれてない事があるので、細かい記述まで気にするレベルならMDNを読むのを止めて仕様書を読んだ方が良い

3893442018/12/29(土) 13:24:44.02ID:???

390Name_Not_Found2018/12/29(土) 13:31:10.22ID:???
言う必要はない。間違いが多いが真なら、
そのページも間違いがある

391Name_Not_Found2018/12/29(土) 13:52:26.11ID:???
>>390
偽なら「翻訳」には間違いがない事になる
何も言わなかったのと同等のゴミ情報

392Name_Not_Found2018/12/29(土) 14:08:36.69ID:???
>>389
そのページは間違ってないよ

3933442018/12/29(土) 14:16:23.68ID:???
>>392
じゃあ、>>379の「日本語版は翻訳が普通に間違っています」はどういう意味?

394Name_Not_Found2018/12/29(土) 14:27:02.08ID:???
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements
> 使用法
> ブロックレベル要素は <body> 要素内にのみ現れます。

これは間違い
HTML4-01 Strictではbody要素直下にはブロックレベル要素しか置けない規定があったが、ブロックレベル要素は他の場所にも置けた
また、Traditionalを宣言すれば、body要素直下にインライン要素を置くことが出来た
では、翻訳ミスかといえばそうではなく、原文(英語)から元々、この記述だった
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

結論「MDNは英語/日本語ともに間違い。仕様書を読みましょう。」

3953942018/12/29(土) 14:32:47.59ID:???
> ブロックレベル要素は <body> 要素内にのみ現れます。

よくよく読むと、要素内だから<body>の子孫要素であっても良いのか
>>394は忘れてくれ

396Name_Not_Found2018/12/29(土) 14:54:11.78ID:???
>>394
他のページが間違ってるってことだけど

3973942018/12/29(土) 15:08:45.99ID:???
>>396
何のことだ?

398Name_Not_Found2018/12/29(土) 15:10:52.55ID:???
あえていうなら、HTML5で追加されたarticle,main,nav...etc要素がブロックレベル要素に分類されているのが違和感あるな
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/sgml/dtd.html#block
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements
「although "block-level" is not technically defined for elements that are new in HTML5」と書いてはあるけど、このページだけ読む初心者には見分けがつかないので意味をなさない(実質、MDNのオレオレ定義だし)
こういう誤った分類が残っているから「article要素はブロックレベル要素だから...」と語る初心者が後を絶たない

399Name_Not_Found2018/12/29(土) 15:19:31.12ID:???
>>397
ごめん、レス番間違えたわ
>>396>>393アテネ

400Name_Not_Found2018/12/29(土) 15:49:13.21ID:???
>>396,399
「どこが間違ってるの?」と何度聞いてもはぐらかしてばかりだね
「他のページ」のURLとか間違っている記述を聞いても答えないんだろうし、君の中では「MDN英語版が正しくて日本語版が正しい」のだろうね、」としかいえないわ

401Name_Not_Found2018/12/29(土) 16:00:21.90ID:???
言葉足らずで誤解を広げる>>379が他人の質問によって後出し情報を追加していく様はJSスレのそれに近いな
「日本語勉強しろ」な人が多すぎでないか

402Name_Not_Found2018/12/29(土) 17:33:44.02ID:???
延々と間違いを責め合うんじゃなく
みんなで勉強していけばいいじゃん
有意義なスレにしようぜブラザー供

403Name_Not_Found2018/12/29(土) 17:37:18.28ID:???
年末に争わなくてもねぇ

404Name_Not_Found2018/12/29(土) 17:56:44.38ID:???
>>398
>article要素はブロックレベル要素だから…

「 article要素はブラウザ環境では HTML UAスタイルシートでブロックレベルにされているから…」
の略記なんです、
という解釈もできなくはないので、まったく誤りというわけでもないがな

405Name_Not_Found2018/12/30(日) 08:32:57.06ID:???
bootstrap3 と 4
の普及率ってどのくらいなの?
大体の人がブラウザにキャッシュされてると考えていい?

406Name_Not_Found2018/12/30(日) 09:53:35.86ID:???
>>404
スタイルシートで指定するのはブロックレベルではない

407Name_Not_Found2018/12/30(日) 10:02:54.52ID:???
>>405
https://coliss.com/articles/build-websites/operation/work/frontend-tooling-survey-2018.html
3と4をあわせた数字で、2018年で3割
かなり微妙だけどまぁキャッシュされてる前提でもいいんじゃないか

俺はキャッシュのためには使いたくないけど

408Name_Not_Found2018/12/30(日) 13:31:59.77ID:???
div>ul>liのような構造で
liをクリックしたら内包しているul(コンテナ)を閉じる
ということをcssだけでやるにはどうしたらいい?
JSで値を書き換えるのはできるんだけどcssだけでできないかなと

409Name_Not_Found2018/12/30(日) 13:58:50.00ID:???
ラジオボックス

410Name_Not_Found2018/12/30(日) 13:59:15.07ID:???
>>408
inputを使う
css アコーディオン とかでぐぐると例が出てくる
https://saruwakakun.com/html-css/reference/accordion

そういやこういうcssだけでjsみたいに見せる技術ってなんか名前無いんかね

411Name_Not_Found2018/12/30(日) 14:20:29.22ID:???
detailやsummaryがedgeやieで使えないから
こういうめんどくさいことになってるのかねえ

412Name_Not_Found2018/12/30(日) 15:10:47.95ID:???
>>410-411
ありがとう
アコーデオンで調べてみます

413Name_Not_Found2018/12/30(日) 17:44:26.95ID:???
俺はCSS芸と呼ぶ

414Name_Not_Found2018/12/30(日) 20:48:37.46ID:???
アコーディオンを実現するためにjs回避したところで他で使いたくなるんだから、そこまで凝らなきゃいけないケースってそんなにあるかなぁ
実装例としては面白いけども

415Name_Not_Found2018/12/30(日) 20:56:05.22ID:???
>>410
名前つけるほど、大層なことはしてない
疑似クラスで制御してるだけ

416Name_Not_Found2018/12/30(日) 21:42:28.42ID:???
↓のコードで2カラムのリンク集合体的なものを作るとき、
.buttonの幅(それぞれ50%)やボタン同士のmarginは.listと.buttonどっちに持たせた方がいいの?
.button自身のデザインは完成してて、liの中いっぱいに広がるという条件で

<ul class="container">
<li class="list"><a class="button">link1</a>
<li class="list"><a class="button">link2</a>
<li class="list"><a class="button">link3</a>
....省略
<li class="list"><a class="button">link20</a>
</ul>

417Name_Not_Found2018/12/30(日) 22:02:28.07ID:???
>>416
http://jsfiddle.net/h49z7o6u/2/
考え方は、どこをクリック出来るようにすると使いやすいかを中心に考える
まずはaはliと同じサイズにする事が基本
すると、liにpaddingは付けられない、と言った等が見えてくる

418Name_Not_Found2018/12/30(日) 22:36:56.64ID:???
>>417
なるほど、サンクス。

419Name_Not_Found2018/12/31(月) 13:05:57.43ID:???
>>379
>>376だけど
遅くなりましたがありがとー
良いお年をー

420Name_Not_Found2018/12/31(月) 13:32:39.10ID:???
遅えよクソが

421Name_Not_Found2018/12/31(月) 13:33:19.32ID:???
年末まで殺気立つとかどんなつまらない人生送ってるの・・・

422Name_Not_Found2018/12/31(月) 13:39:11.94ID:???
>>407
遅くなりましたサンクス

423Name_Not_Found2018/12/31(月) 14:00:49.85ID:???
>>421
お礼言われるの楽しみにワクワクしてたのに散々待たされたんだぞ
その気持ちがお前にわかるのかよ

424Name_Not_Found2018/12/31(月) 14:15:09.77ID:???
>>423
そんな小さいことにこだわらないから

425Name_Not_Found2018/12/31(月) 14:21:49.99ID:???
>>423
>>376だけど
せめて文体似せるくらいはしようよw

426Name_Not_Found2018/12/31(月) 14:25:48.92ID:???
>>423
ってか>>379は俺なんだけど
嘘ばっかり付いてると朝鮮人と思われるよ
もうちょっとちゃんとしよう

427Name_Not_Found2018/12/31(月) 14:42:09.21ID:???
>376と>379が短時間で続けてレスしたと

428Name_Not_Found2018/12/31(月) 14:59:26.68ID:e24FWT4H
>>427
俺が>>376だけど違うよー
俺そんなに詳しくない

429Name_Not_Found2018/12/31(月) 15:33:59.79ID:???
>>426
>>379だけど
めんどくさいことにしかならないので、止めてくれ

430Name_Not_Found2018/12/31(月) 15:38:25.57ID:e24FWT4H
ID出せない奴はチキン!

431Name_Not_Found2018/12/31(月) 15:43:16.60ID:OD9Mhaqb
um

432Name_Not_Found2018/12/31(月) 15:58:01.29ID:5KQc/S9U
IDにhrefが入ってたらエロ画像貼る

433Name_Not_Found2018/12/31(月) 16:31:03.33ID:IdwCOiTz
>>432
俺のIDでもいいか

434Name_Not_Found2018/12/31(月) 18:41:35.50ID:???
https://www.alpha-mail.jp/support/server_info/ns/v2.html
アルファメールってphp4.3なの??

435Name_Not_Found2018/12/31(月) 20:32:50.20ID:???
>>434
客で使ってるとこあったけどその時7.1だったぞ
変えられるはず

436Name_Not_Found2018/12/31(月) 21:18:06.05ID:???
>>435
ありがとう
連絡来てどうにかしてくれって言われたわ
さすがにwpも動かんとか死ぬと思った

まぁ来年やな、良い音塩!

437Name_Not_Found2019/01/01(火) 04:24:38.44ID:???
>>436
アルファメール…
事前に確認とって開発開始したのに
納品直前になってPHP4しか動かせないとか言われ、蔵の○塚の営業担当にぶち切れた記憶が蘇ったわ

結局4で動くようにデグレを強要されるハメに。

その当時ですらさすがに4はないだろ…と思ったもんだが…鯖によっては変えられないかもよ…
それ以来、大○の関わるサービスには近寄らないようにしてる

438Name_Not_Found2019/01/01(火) 10:14:09.26ID:???
>>437
・・・えw

新年早々ヤバイ案件かよ〜〜
転送で対処するかな、さすがにphp4はどうにもできんわ

439Name_Not_Found2019/01/01(火) 13:54:51.20ID:???
なんでこのスレで聞いたの?

440Name_Not_Found2019/01/02(水) 20:10:12.16ID:???
プレミアに契約かえないとphpは4だよ

441Name_Not_Found2019/01/03(木) 00:07:32.77ID:???
別のページ見たら普通に7と5だった
しょーもな

442Name_Not_Found2019/01/03(木) 01:28:36.21ID:???
PHPのバージョンはなんでもいい
3とか4でも変わりない
そう、HTMLならね

443Name_Not_Found2019/01/03(木) 01:46:56.23ID:???
https://codepen.io/infologicmation/pen/KbZoqK
先輩方よろしくお願いします

ちなみにここで使われているMathJaxは見た目上の問題を分かりやすく示すために使われているだけであって、
MathJaxはなんの関係も無いです。

444Name_Not_Found2019/01/03(木) 07:43:24.68ID:???
アルファメールはphp4
プラチナも4
プレミアが5.4と7.0(どっちもセキュリティサポート終了)

アルファメールは絶対に使うな

445Name_Not_Found2019/01/03(木) 07:52:48.15ID:???
>>443
こんなところでjsもabsoluteも使わない方が良い
https://codepen.io/anon/pen/EGoOzb

446Name_Not_Found2019/01/03(木) 08:11:51.20ID:???
>>445
ありがとうございます。
しかし、リスト表記時の「・」はどうしても残しておかなければなりません

447Name_Not_Found2019/01/03(木) 08:34:31.87ID:???
>>446
前も同じ質問してなかった?
https://codepen.io/anon/pen/WLdLZo

クソコードだけど仕様がクソだから勘弁してくれ

448Name_Not_Found2019/01/03(木) 08:49:23.30ID:???
さすがにそれはその場しのぎすぎてちょっと実用に耐えないです

449Name_Not_Found2019/01/03(木) 08:50:50.76ID:???
li要素でflexプロパティを使用しても、li要素の点「・」が消えなければいいのですがね…

450Name_Not_Found2019/01/03(木) 09:07:06.52ID:???
うお、できたwww
すげー時間の無駄だったwww

spanとp両方に
display: list-item;
漬けてるから好きな方外してくれ

あと、(1)とか文字の位置は
text-indent: -100px;
で調節すればok
https://codepen.io/anon/pen/RExEdW

451Name_Not_Found2019/01/03(木) 10:53:58.50ID:???
>>450
ありがとうございます。
ベストではないですが、現状ではそれがベターなのでそれで使わさせて貰います

452Name_Not_Found2019/01/03(木) 10:55:15.89ID:???
>>451
これがベストだよwww

453Name_Not_Found2019/01/03(木) 11:43:49.72ID:???
自分が考えついた物はベスト
人に教えてもらったいい物はベター
人に教えてもらった物はクソ
これがしったか初心者クオリティ

454Name_Not_Found2019/01/03(木) 11:58:41.25ID:???
ではベストではない点について言わせて貰いますと
>>450で見た目上、生成されている「・」はliの「・」ではなく、span.insert_stringに対して生成されたlist-itemによる「・」であって
これは本筋ではないと感じました。(HTML上の論理的な構造が変わっている)

僕の中でのベストとしては、HTML内の構造はそのままで、(javascriptで?)insert_stringを適切に移動”だけ”させて、>>450みたいにしたものだったのですが。

455Name_Not_Found2019/01/03(木) 11:58:45.03ID:???
次の方どうぞー

456Name_Not_Found2019/01/03(木) 12:04:52.00ID:???
>>453
ありがとう!和んだわ

457Name_Not_Found2019/01/03(木) 15:29:13.50ID:???
リストマーカーってあんまりそのまま使わなくなっちゃったなー

458Name_Not_Found2019/01/03(木) 15:36:18.04ID:???
使うとしても一旦消してbeforeで中黒付けるかな
ブラウザでどう表示されるか分からんのは怖い

459Name_Not_Found2019/01/03(木) 21:51:25.51ID:???
>>458
俺もそれだなあ

list-style周りがあまり発展しないのは
やっぱ使う奴が少ないからなんだろうか

460Name_Not_Found2019/01/03(木) 22:08:25.16ID:???
>>459
だろうね
そもそもモバイル化に伴って、リスト自体が少なくなったと思う
ulやolはあんまり使わない。メニューぐらいかな?メニューだと絶対にlist-styleは使わない
あとは何かの手続き順序とか、ランキングの表でもあればolを使うかもしれない
とにかくlist-styleは使い勝手が悪い

461Name_Not_Found2019/01/04(金) 00:07:52.25ID:???
画面に直接マッキーで点入れたいとこに打てばいんじゃね?
俺って天才かよ

462Name_Not_Found2019/01/04(金) 00:16:50.21ID:???
>>461
fixedやろ、それは考えてフフッってしてやめた
わざわざ言うもんじゃないんだ

463Name_Not_Found2019/01/04(金) 00:44:20.67ID:c0sgFhpu
箇条書きは甘え

464Name_Not_Found2019/01/04(金) 12:25:57.51ID:???
ブログで数学の証明を書いてますので箇条書きは使いまくりですね

465Name_Not_Found2019/01/05(土) 00:31:24.08ID:???
隣接セレクタが効きません。なんでだめなんだ...?

// HTML ------------------------
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>


// CSS ------------------------
.menu li + .menu li {
margin-top: 10px;
}

466Name_Not_Found2019/01/05(土) 00:35:49.13ID:???
.menu li + li

467Name_Not_Found2019/01/05(土) 00:41:16.73ID:???
>>466
それでいいのか...!有難う有難う感謝です

468Name_Not_Found2019/01/06(日) 00:11:51.87ID:OgZAvs+d
Twitterウィジェットのtweetswindが使えなくなってしまったので、新しくfeedwindを使って表示させたいのですが、うまくできません

iframeタグでtweetswindを使っていたので、feedwindでiframe用のコードを取得してコピペしたのですが、元のページが文字化けしてしまいます。元のページはUTF-8です

469Name_Not_Found2019/01/06(日) 00:40:38.28ID:???
いろんなとこにコピペしてそうな質問だな

470Name_Not_Found2019/01/06(日) 00:58:03.50ID:???
答えてやりなよw

>>468
「iframe 文字コード」で検索すれば色々でてくる
文字コードは実物みないと解決策がわからん

471Name_Not_Found2019/01/06(日) 15:07:34.63ID:???
質問です。
たまに画面がグチャってるサイトってありますけど、
こういうのは意図的に、ワザとこうなってるのですか?
http://www.flower-record.com
それとも特定の別ブラウザで見ると、綺麗にレイアウトしてるものなのですか?
自分だけこう見えるってこと?
なぜこうなるのか、意味が分りません

472Name_Not_Found2019/01/06(日) 15:54:04.93ID:???
>>471
IE11だとまともに見える(デザインセンスは酷いけど)
まぁ、あまり気にしなくていいと思うよ。知り合いなら教えてあげたほうが良いかも

473Name_Not_Found2019/01/06(日) 18:11:00.38ID:???
<thead>の子でthの代わりにtd使ってもいい?

474Name_Not_Found2019/01/06(日) 18:17:12.90ID:???
いいよ

475Name_Not_Found2019/01/06(日) 18:27:27.66ID:???
thead,tbody,tfootとth,tdの区別というか意味を理解できてないのかな
thead,tbody,tfootはテーブル全体のヘッダ、本文、フッタでth,tdは各項目のヘッダ、値だからそれによる制約はない

476Name_Not_Found2019/01/06(日) 18:50:36.32ID:???
こういう構造ってHTML的にOKですか?
二つのリンクはスタイルで間隔開けるんで、ユーザビリティは問題ないです

<p>
<a>Aへのリンク</a>
<a>Bへのリンク</a>
</p>

477Name_Not_Found2019/01/06(日) 18:58:05.52ID:???
何一つ問題はない

478Name_Not_Found2019/01/06(日) 19:18:17.71ID:97FTmIUs
フロントの自動化って何使ってる?

Gulp?webpack?npm script?

479Name_Not_Found2019/01/06(日) 19:30:23.51ID:???
>>476
そもそもどこに問題があるかもと思ったのか

480Name_Not_Found2019/01/06(日) 19:55:25.68ID:???
しつもんです。
あなたにとってhtmlってなんですか?

481Name_Not_Found2019/01/06(日) 19:55:50.15ID:???
愛・・・かな

482Name_Not_Found2019/01/06(日) 21:40:33.93ID:???
>>478
webpack

483Name_Not_Found2019/01/06(日) 21:58:03.07ID:???
>>478
Gulpだなあ

484Name_Not_Found2019/01/06(日) 23:46:56.87ID:???
そのアンケート意味あんの?

485Name_Not_Found2019/01/07(月) 02:19:34.71ID:???
>>478
普通に調べれば出てくる
https://qiita.com/rana_kualu/items/8dc3f93a7176d9a0f05d

npm scriptsが一番多い

486Name_Not_Found2019/01/07(月) 14:45:45.75ID:???
flex-wrap:wrapで幅が決まってないアイテムが複数行になった時に
コンテナの右側がガタガタになるのを綺麗に見せるテクってありませんか?

こんなのです
https://jsfiddle.net/uwaoyqc6/

487Name_Not_Found2019/01/07(月) 16:03:20.11ID:???
気合いかな

488Name_Not_Found2019/01/07(月) 16:05:45.60ID:???
>>486
justify-content: space-between;
入れるとか

4894862019/01/07(月) 17:03:41.44ID:???
flex-grow:1でいけました・・・
これ行ごとに効くんですね
知りませんでした

490Name_Not_Found2019/01/07(月) 21:53:14.87ID:???
お前ら試されて負けたのかw

491Name_Not_Found2019/01/07(月) 22:42:34.20ID:???
ページ全体の<h1>より上にある<section>や<article>ってどういう扱いなの?
HTML5 Outlinerでは意図したアウトラインになるから、位置は関係なし?

492Name_Not_Found2019/01/07(月) 22:52:13.80ID:???
変なアウトラインになっている

493Name_Not_Found2019/01/07(月) 23:07:23.62ID:???
>>492
なってないよ
デフォのコードの下2行を入れ替えても結果同じ

494Name_Not_Found2019/01/08(火) 20:49:16.98ID:???
ふーん

495Name_Not_Found2019/01/09(水) 05:08:06.96ID:???
https://codepen.io/infologicmation/pen/KbZoqK

先日「連番リストの先頭文字の高さ位置を揃えたい」として質問したものです。
ここの方のアイデアを用いて実装をしていたのですが、問題が起きました。

上記サンプルで言う所の(iii)項目のリスト構造がおかしくなっています。
display : flex の効果が内側の方のリスト<ul>にも影響してしまっているようです。


親要素のflex の効果を、第1子要素(?)のみに適応させていたらよかったものが、第2子要素以降にも適応されたせいで
<ul>がブロック要素であることが解除されて、インライン要素になったことで、おかしくなったみたいです。

496Name_Not_Found2019/01/09(水) 05:45:20.74ID:???
JS側の問題

497Name_Not_Found2019/01/09(水) 07:47:21.59ID:???
要するに、現在の問題は、

<ul>
<li style="display:flex;align-items:center;">test:
<ul>
<li>a</li>
</ul>
</li>
</ul>

こう書いた時に、内側の<ul>までflexの効果が効いて、内側の<ul>の"改行・字下げ"効果が消えてしまっていることです。

498Name_Not_Found2019/01/09(水) 07:53:40.74ID:???
簡単に言うとこう言うことです



<ul>
<li style="display:flex;align-items:center;"><span style="display:list-item;text-indent:-40px;">A</span>←このAの表示位置はここでよいが、
<ul style="display:block;">
<li>ここの&lt;ul&gt;までflexが効いて欲しくない</li>
</ul>
</li>
</ul>

499Name_Not_Found2019/01/09(水) 08:45:33.00ID:???
何かあっけないぐらいに自己解決できてしまいました

CSSで

display: inline-block;
text-indent: -70px;
text-align: center;

これだけで十分だったんですね

500Name_Not_Found2019/01/09(水) 09:54:18.03ID:???
https://codepen.io/infologicmation/pen/KbZoqK

やっぱりまだ問題が解決しませんでした。

(3)の「折り畳み要素」をクリックすると、要素が展開されて「ここがその中身」と表示されます
しかし、その時先頭文字である「(3)」の表示位置が勝手に移動されてしまいます。
原因は、details要素を「display:inline-block;」としているからです。
しかし、これを取り除いてしまうと、今度は、(details要素がブロック要素であるため)「(3)」と「折り畳み要素」の表示位置の関係がズレてしまいます。


二律背反の状況になってしまいました。
どうしたらいいですか?

501Name_Not_Found2019/01/09(水) 10:11:42.50ID:???
何度もレスしてしまいましたが

details.det{
display:inline-block;
vertical-align: top;
}

のようにvertical-alignを追記するといけました。

502Name_Not_Found2019/01/09(水) 10:21:29.00ID:???
HTML,CSSって複雑化していくほどに、「アッチが立てば、こっちが立たず」っていう状況の連鎖なんですね
Javaのオブジェクト指向やデザインパターンみたいに、HTML+CSSもそういうのってあるんですかね

503Name_Not_Found2019/01/09(水) 10:27:12.89ID:???
なんなん

504Name_Not_Found2019/01/09(水) 10:39:32.94ID:???
マルチクラスって時点でHTMLのタグはSRP違反

505Name_Not_Found2019/01/09(水) 13:22:40.57ID:???
srpてどこの馬の骨?

506Name_Not_Found2019/01/09(水) 14:11:33.77ID:???

507Name_Not_Found2019/01/09(水) 14:48:26.33ID:???
>>506
グロ
ブラクラ

508Name_Not_Found2019/01/09(水) 15:16:43.65ID:???
>>502
そもそもプログラムとそうでないものを同等に扱おう
って考えが間違ってんじゃねえか?

509Name_Not_Found2019/01/10(木) 16:45:14.10ID:???
もしかしてこのスレって、プログラムは一切知らずにHTML、CSSだけしか知らない奴っていんのかな

510Name_Not_Found2019/01/10(木) 16:49:59.42ID:???
だからなに?
プログラムできるのが偉いのか?

511Name_Not_Found2019/01/10(木) 16:53:36.18ID:???
>>510
ワロタwww

512Name_Not_Found2019/01/10(木) 17:08:09.88ID:???
横に長いコードをインデント入れて整理してたら1ページ2000行を超えてしまったんですが
行数が多いほど読み込みに時間がかかるとか、そういう事ありますか?

513Name_Not_Found2019/01/10(木) 17:29:23.93ID:???
>>509
呼んだ?

514Name_Not_Found2019/01/10(木) 17:38:09.53ID:???
プログラマーみたいな底辺奴隷にだけはなりたくないな

515Name_Not_Found2019/01/10(木) 17:40:47.60ID:???
…むかつくがたしかに日本においては90%くらいは底辺奴隷に身をやつしていると認めざるを得ない…

516Name_Not_Found2019/01/10(木) 17:43:35.28ID:???
プログラミングなんて小学生でもできるものだからな

517Name_Not_Found2019/01/10(木) 17:59:34.25ID:???
野球なんて小学生でもできるものだからな

518Name_Not_Found2019/01/10(木) 18:00:26.56ID:???
おれが小学生の時はそんなもんなかったからな
石を打ち欠いたり磨いたりしてたのはなんとなく覚えてる

519Name_Not_Found2019/01/10(木) 18:31:52.05ID:???
囲碁なんて小学生でもできるものだからな

520Name_Not_Found2019/01/10(木) 18:37:59.71ID:???
一年坊は対局なんてはえーんだよって言われて
先輩に打ち欠いた碁石を砥石で研がされていたのはいい思い出

521Name_Not_Found2019/01/10(木) 20:32:33.05ID:???
>>509
いちゃいかんのか?

522Name_Not_Found2019/01/10(木) 20:55:26.29ID:???
俺みたいなフロントもバックもやってる孤高のエンジニアからすれば
ものすごく次元の低い喧嘩だな

523Name_Not_Found2019/01/10(木) 21:29:10.31ID:???
>>512
処理内容やサーバの性能次第としか答えようがない

524Name_Not_Found2019/01/10(木) 21:54:11.44ID:???
CSSgrid って良いの?

525Name_Not_Found2019/01/10(木) 22:08:25.71ID:???
>>523
HTML部分のファイルサイズはあまり関係がないという事ですか?

526Name_Not_Found2019/01/10(木) 22:25:02.43ID:???
>>522
お前の次元が低いからフロントもバックもやるんだろ
そんなもの土方にやらせる仕事
お前は他人を使う能力がないから自分が働かないと何もできない
本当に優れた人間は自分が何もしなくても他人が勝手に仕事をこなしてくれることだからな

527Name_Not_Found2019/01/10(木) 22:41:08.19ID:???
自分より優れた人に雇われた事ないからわからん
すまん理解してあげられなくて

528Name_Not_Found2019/01/10(木) 23:26:15.42ID:???
>>525
2000行なら2000回\nが入るってことだ

529Name_Not_Found2019/01/10(木) 23:27:01.16ID:???
>>526
他力本願かよw

530Name_Not_Found2019/01/10(木) 23:44:57.50ID:???
わからない人の質問にわかる人が答える
それだけのことなのに
なんで上だの下だのと順位をつけたがるのか

531Name_Not_Found2019/01/10(木) 23:46:53.46ID:???
余裕ないんだろw

532Name_Not_Found2019/01/11(金) 02:03:12.68ID:???
>>512
改行1つに1バイト、スペースやタブ1つに1バイト
2000行なので改行で2KB、それプラススペース・タブ分が無駄に転送量増える
まあ気にすることないけど、気になるならgzipすればいい
ってか最近はgzipするのが当たり前になってきてるから、これを期にしてみれば

>>524
いいけどIEやEdgeでは工夫が必要
Flexboxでさくっといかない時に使ってる

533Name_Not_Found2019/01/11(金) 06:44:46.10ID:???
こういう疑問や不安て
こんだけネットが速くなってもやっぱ経験するんだな
なんかほっこりした

534Name_Not_Found2019/01/11(金) 09:28:30.26ID:???
>>530
現実世界で底辺だから、せめてネット上だけでも上に上がった気になりたい
そういう惨めな生物なのだ

535Name_Not_Found2019/01/11(金) 13:40:21.00ID:???
Viewのプレゼンテーションまでは裏方の仕事だから
末端のHTMLだけで全体の読み込みスピードに影響させる方が難しい
JSは最適化すべきだけどね

536Name_Not_Found2019/01/11(金) 13:58:01.65ID:???
スピード求めてたみた
htmlにscript要素でjs、style要素でcss書いたら爆速になった
切り分けるのが正義って言い出したのは誰だ

537Name_Not_Found2019/01/11(金) 13:59:09.38ID:???
と書いた瞬間に答えが出た
昔はそもそも回線速度が遅かったので、
個々のファイルを分けて読み込むロスは気にならなかったのだろう

538Name_Not_Found2019/01/11(金) 14:33:57.45ID:VcHct3vr
こんにちは。
PCのChromeでテキスト選択できないサイトがあったので、詳細設定でこのドメインのjavascriptを無効にして、さらにUser CSSというアドオンもインストールしたのですが、まだテキスト選択できません。
ソースを見たら本文は普通にHTML記述されているのですが、どのようにしたらテキスト選択できるようになるでしょうか?
ご教示お願いいたします。
http://nicomo.org/

539Name_Not_Found2019/01/11(金) 14:44:57.57ID:ei6Gl27F
<head>内でuser-select:noneされてるから
ユーザーCSSで値をautoに上書き

540Name_Not_Found2019/01/11(金) 14:46:21.31ID:???
開発者ツールのコンソールに以下を打ち込んで出てきたテキストをコピー
jQuery("body").text()

541Name_Not_Found2019/01/11(金) 15:11:11.30ID:???
>>536
リクエスト数減らすのはわりと基本なきがするがなあ
90年台から変わらず

542Name_Not_Found2019/01/11(金) 15:25:26.98ID:???
>>536
> htmlにscript要素でjs、style要素でcss書いたら爆速になった
> 切り分けるのが正義って言い出したのは誰だ

えとな、今の上級層はな。
切り分けて作成して、ビルドツールを使って埋め込むんや
切り分けるのは今も正義なんだよ

543Name_Not_Found2019/01/11(金) 15:31:23.24ID:???
切り分けの解釈統一したら?

544Name_Not_Found2019/01/11(金) 15:31:57.00ID:???
>>536
http2試してみたのか?

545Name_Not_Found2019/01/11(金) 16:40:07.30ID:???
>>541
前からそうだったんですね、すいません

>>542
そうですよね
その辺りってFWでは標準で実装されているのでしょうか?
wordpressしか知らないのですが、標準テーマはjsもcssファイルもガッツリ分かれています

>>544
利用中のvalueserverは非対応とのことでした
残念です、使ってみたい

546Name_Not_Found2019/01/11(金) 16:40:12.14ID:???
ユーザがイラッとしないくらいならええのよ

547Name_Not_Found2019/01/11(金) 16:41:46.42ID:???
>>546
確かにそうですね
速度や最適化は、何か良くない魔力がありますね

548Name_Not_Found2019/01/11(金) 17:03:42.54ID:???
圧倒的大多数のサイトで、SNS関連のボタンって不要だよね
大手でなければ需要ないのに、そういうの固定されてる方がイラッとする

549Name_Not_Found2019/01/11(金) 17:16:34.58ID:???
バズる可能性もあるから、外すに外せないんだよ
俺はあれのおかげで当たったし、否定は出来ないな

550Name_Not_Found2019/01/11(金) 22:06:36.04ID:???
多国籍軍に!
勝利をおさめるために!
今!
我々にできることを!

コーーーーーディンンング!!!

551Name_Not_Found2019/01/11(金) 22:19:57.53ID:???
検索フォームのマークアップで下のみたいなコードを時々見るけど、
DL要素の使い方として正しいの?

<dl>
<dt>Search</dt>
<dd><input type="search"></dd>
</dl>

552Name_Not_Found2019/01/11(金) 23:01:20.02ID:???
SNSボタン外したい。外せば爆速。だけど外せない。

553Name_Not_Found2019/01/11(金) 23:46:19.46ID:???
>>551
間違っている
dd inputに探したいものが100%入るなら正しいかもしれないが、
入らないので間違っている

>>552
bodyの終了直前にでも置いてみては?
少しは変わると思う

554Name_Not_Found2019/01/12(土) 00:25:00.70ID:???
>>553
type="search"は探したいキーワードを入れる場所だから合ってるんじゃね?
その文字列を探してるか探してないかはビジターの脳内での話だし

555Name_Not_Found2019/01/12(土) 01:11:47.56ID:???
>>550
なついなw
「食事は1日1食コーディングしながら食え」とか「病院往く暇あるならコーディングしろ」とかあったな

556Name_Not_Found2019/01/13(日) 22:15:55.85ID:???
A、B、C(文章)をインラインブロックで横並び、
レスポンシブで、横幅によって縦並びになるやうにしたい
内容が複数行になる場合、文字列を最終行で揃えたい
縦並びになった時、Cの下だけに余白1em分を入れたい(A、Bの下は余白なし)

なんかうまいこと実装可能?

5575562019/01/13(日) 22:20:24.09ID:???
A、B、Cのかたまりをいくつか並べたいんだけど、
横並びになってる時はABCと次のABCの間に余白入れたいんですじゃ

さっきから頑張ってるけど、複数行の要素が入るとCだけ最終行で揃わなかったりしてうまくいかない

558Name_Not_Found2019/01/13(日) 22:48:17.94ID:???
そんなの説明しとるサイトたくさんあるだろ

559Name_Not_Found2019/01/13(日) 23:30:24.33ID:???
無職のおっさんなんだけど、
時間があるからhtmlの勉強をしたい
ドットインストールやプロゲートでも
学習をする上で問題はないかな?

560Name_Not_Found2019/01/13(日) 23:40:12.80ID:???
ないよ。とっととやれ。

561Name_Not_Found2019/01/14(月) 01:21:49.77ID:???
>>556
出来る。が、今日は眠たいので明日
htmlはここにでも書いておいて
http://jsfiddle.net/

とりあえず、使うのはインラインブロックじゃなくflex

562Name_Not_Found2019/01/14(月) 01:30:04.80ID:???
こんなん当たり前にやってることだからちょっとググれば大量に出てくるのに

563Name_Not_Found2019/01/14(月) 05:05:28.67ID:???
>>561
めんどうだしわからないから正解書いといてくれると助かるんだが?

564Name_Not_Found2019/01/14(月) 09:51:43.98ID:???
>>563
うん、俺も面倒なんだ。だから書けって言ったんだ
後は自分で頑張って
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

565Name_Not_Found2019/01/14(月) 12:28:14.32ID:???
ごちゃごちゃ言わずにとっとと教えろよ
このスレはどんな質問にも答えるんだろ

566Name_Not_Found2019/01/14(月) 13:24:40.45ID:???
夏だなぁ

567Name_Not_Found2019/01/14(月) 16:48:57.27ID:???
冬ですが

568Name_Not_Found2019/01/14(月) 17:13:02.07ID:???
>>565
じゃあ答えてやる、もとのソースがわからないから書いといてね←これも質問なんだからちゃんと答えろよ?

569Name_Not_Found2019/01/14(月) 18:16:03.96ID:???
>>556
Cではなく親ブロックの下に1emの余白を取ればいい

5705562019/01/14(月) 22:43:38.55ID:???
>>569
おおおマジだ!なんで気づかなかったんだろう
サンクス

他の人たちもあざっした!
お仕事行ってたから上の何人かはワイじゃないやで

571Name_Not_Found2019/01/15(火) 00:46:34.34ID:???
知ってる

572Name_Not_Found2019/01/15(火) 02:11:31.53ID:???
誰もお前だとか思ってねえよwww
自意識過剰だろwww

573Name_Not_Found2019/01/15(火) 03:57:28.74ID:l5FVGt7b
>>570
本人証明するために次からid出しておけよな

574Name_Not_Found2019/01/15(火) 04:05:21.98ID:???
やなこった

575Name_Not_Found2019/01/15(火) 07:32:49.36ID:???
肉体を失ったから自意識しかねえんじゃw
過剰なくらいでちょうどいいんやで

576Name_Not_Found2019/01/15(火) 09:53:27.23ID:l5FVGt7b
id出さなければ、いくらでもやり直すことが出来るんやで

577Name_Not_Found2019/01/15(火) 12:01:20.14ID:???
解答者の質が上がれば考えるわ

578Name_Not_Found2019/01/15(火) 12:12:30.89ID:0DhwgDzg
preタグの先頭に空白が何個かあっても
<pre>_____文字列1
________文字列2
</per>
表示すると除去されてしまいます。
でも、途中にある空白(文字列2の前にある)は、除去されません。
そう言う仕様ですか?

579Name_Not_Found2019/01/15(火) 14:19:39.00ID:???
>>578
再現しない、typoをどうにかしろ
http://jsfiddle.net/ncg4wspx/

580Name_Not_Found2019/01/15(火) 14:24:09.20ID:???
HTML に直接書いても、勝手に除去されない

たぶん、JavaScript か何かの、trim か何かで、
先頭・末尾の連続した空白類が、除去されているのだろう

581Name_Not_Found2019/01/15(火) 14:32:56.50ID:???
半角スペースは一個にまとめられる
それこそperタグにでもなっているんじゃないか

582Name_Not_Found2019/01/15(火) 14:39:00.77ID:???
>>577
質の低い質問にはそれなりの回答しかつかない

583Name_Not_Found2019/01/15(火) 14:52:12.54ID:???
実際、まともな回答してもスルーして、丸投げコードの回答が感謝されるだけ
最も、解決済でもスルーしているきらいがあるがな
(忘れたころにレスしてる奴は巡回中に思い出しただけ)

584Name_Not_Found2019/01/15(火) 17:55:36.55ID:???
質問です

:hover{ ... }
というふうに書いた時に、最前面の要素にだけスタイルが適用されるようにする方法ってないんでしょうか?
これを書いただけだと、小さい要素にホバーしただけでその背景(親)のノードもすべて...が適用されてしまいます

585Name_Not_Found2019/01/15(火) 18:28:50.42ID:???
>>584
全称セレクタ状態だから、classなりidで適用範囲を制限しろ
(こんな質問ばっかかよ…)

586Name_Not_Found2019/01/15(火) 18:40:06.97ID:???
ええ疑似要素って要素書かなくても機能したの!?
ずっと知らなかったわ
:hover{
color: red !important;
}

確かにhoverで全部redになった
ってか疑似要素を単独で使う場面ってある?

587Name_Not_Found2019/01/15(火) 18:45:02.85ID:???
>>586
:hoverはどう見ても疑似クラスだろ
何で疑似要素になるんだ?

> ってか疑似要素を単独で使う場面ってある?
疑似クラスなら発想次第であるんじゃないのか
:checkedあたりは扱いやすそうだが

588Name_Not_Found2019/01/15(火) 18:48:23.08ID:???
「適当にコードを書いてみたら、動きませんでした。基礎勉強? 何それ美味しいの?」な質問が多過ぎ
根本が分かってないから、「〜だと思うんですが」が大抵間違っていてgdgd

589Name_Not_Found2019/01/15(火) 18:56:20.83ID:???
>>587
すまん、疑似要素のコード書いてて混ざった
確かに:checkedは使えそう

590Name_Not_Found2019/01/15(火) 18:57:31.05ID:???
:hover{ ... }をa:hover{ ... }
と脳内変換して読んでてずっと意味がわからなかった
まさか質問が本当にそのままだなんて・・・怖い・・・

591Name_Not_Found2019/01/15(火) 19:20:03.47ID:???
中級者が偉そうにできるスレって少ないから
質問者も察してあげて

592Name_Not_Found2019/01/15(火) 19:27:46.65ID:???
基本を勉強していれば絶対しないような質問だろ

593Name_Not_Found2019/01/15(火) 19:32:56.73ID:???
基本て何から勉強したらいい?
アルファベット?

594Name_Not_Found2019/01/15(火) 19:35:09.19ID:???
HTML/CSSのチュートリアルサイトを一から読んだら?

595Name_Not_Found2019/01/15(火) 19:38:49.74ID:???

596Name_Not_Found2019/01/15(火) 19:54:33.84ID:???
リファレンス出して終わる質問多いけど、出しても「難しくて分かりません」でスルーされるのが目に見えているという
地道な勉強が嫌いでてっとり早く済まそうとする人が多いよね

597Name_Not_Found2019/01/15(火) 20:14:08.51ID:???
>>593
勉強の仕方の勉強じゃね?
小中高で習うことだが

598Name_Not_Found2019/01/15(火) 20:14:42.22ID:???
プロになっても学ぶべき事はたくさんある

599Name_Not_Found2019/01/15(火) 21:38:45.21ID:???
>>597
一応大卒だけどいまだにそれ分かんない

600Name_Not_Found2019/01/15(火) 22:00:47.50ID:???
>>585
いや適用範囲を制限したくはなくて、全要素のhover時のスタイルを指定したいんです。見たまんまです。
ただし、要素が重なってる時に最前面=最子孫要素だけに適用させたいんです
hoverだけの需要でしょうがそれを指定する方法はないんでしょうか

601Name_Not_Found2019/01/15(火) 22:05:50.67ID:???
>>600
条件は初めに全部書け
JavaScriptでやれ

602Name_Not_Found2019/01/15(火) 22:18:29.74ID:???
俺でもマウントとれるレベルのやついないかなあ

初級者質問スレ巡回

お、これいけるな!

こんなこともわからないのかよwwwちょっとは勉強しろよwww

毎日この繰り返しです

603Name_Not_Found2019/01/15(火) 23:10:08.93ID:???
ある程度レベルが上がるとマウントなんて取ろうと思わない
カブトムシに相撲でケンカ売らないだろう、それと同じ

604Name_Not_Found2019/01/15(火) 23:20:20.84ID:???
こんなに伸びてて説得力ないっすよ解答者様方ww

605Name_Not_Found2019/01/15(火) 23:21:00.22ID:???
これマウントか?
口は悪いが、回答してるような

606Name_Not_Found2019/01/15(火) 23:31:07.66ID:???
>>602-604がマウント君だったという落ち

607Name_Not_Found2019/01/15(火) 23:40:13.43ID:???
みんな必死過ぎ

608Name_Not_Found2019/01/16(水) 04:03:59.76ID:???
>>599
学校で教えてる勉強の仕方は主に

・雑多な情報から要点を見抜く
・データや原理を整理して限られた時間で覚える
・求められる解答を理解して過不足なく正確に答える

この3つ
俺らのお仕事に当てはめると

・無数の解説サイトから有用なものを見抜く
・日々増える言語、メソッド、アプリを空き時間で覚える
・書くべきコードを理解、エラーなくデプロイ、事故なくランニング

こんな感じ
もしくは

・客や営業の妄言から要点をエスパー
・ツールを駆使して情報を整理共有、打ち合わせ用に要点は記憶
・客の満足するサイトを作るが、予算以上には働かない

609Name_Not_Found2019/01/16(水) 07:16:19.11ID:???
>>600
>最前面=最子孫要素だけに
こういう指定方法は、有るかな?
条件が難しすぎる

それら全部に、特定のクラスを付ければ?

610Name_Not_Found2019/01/16(水) 07:28:52.10ID:???
>>600
ない
あと一番深い要素が最前面とは限らん

611Name_Not_Found2019/01/16(水) 13:13:15.53ID:???
リンゴ出してきて「ねぇ早くミカンにしてよ?え?できないのwww?レベル低ww」とか言ってる質問者だからなぁ

612Name_Not_Found2019/01/16(水) 13:24:36.11ID:???
え?まだ続けるの??

613Name_Not_Found2019/01/18(金) 02:09:40.88ID:???
スマホで縦長になるページの下の方にあるナビゲーションゾーンに
ページ内のどこからでも1タップで飛ばす仕組みを作りたいんだけど
何か良い方法ない?

614Name_Not_Found2019/01/18(金) 02:24:20.36ID:???
>>613
position: fixedなボタン表示しといてonclickでナビゲーションゾーンの要素にscrollIntoView()すれば?

615Name_Not_Found2019/01/18(金) 13:40:11.29ID:???
飛ばすだけなら<a href="#navi">で十分じゃね

616Name_Not_Found2019/01/18(金) 14:39:11.36ID:???
scrollInToViewって
ホイホイお勧めできる程度には実装広まりました?

617Name_Not_Found2019/01/18(金) 17:39:07.64ID:???
>>616
93.45%
https://caniuse.com/#feat=scrollintoview

引数で簡単にトランジション時間設定できるしブラウザヒストリ変わらないしいいんじゃないかな

618Name_Not_Found2019/01/18(金) 17:42:25.20ID:???
すいません誰か教えてください。

ページ内リンクにジャンプするのではなくて、ページ内リンク部分のテキストを ボックスかなんかで表示するということはできないでしょうか。
例えば5ch掲示板のように >>1 にマウスをかざしたら>>1さんのテキストが表示されるみたいにしたいのです。
これはjsとかの領域になるのでしょうか。
マウスホバーとかツリービューとかでググりましたがいまいちわかりませんでした。ヒントワードだけでも教えてくださればありがたいです。

619Name_Not_Found2019/01/18(金) 18:31:26.44ID:???
ヒントワード:js

620Name_Not_Found2019/01/18(金) 18:37:03.66ID:???
>>617
IEは11でもオプション使えないから騙されるなよ
あと時間は指定できないから騙されるなよ

621Name_Not_Found2019/01/18(金) 18:41:12.15ID:???
IEはいいよもう…

622Name_Not_Found2019/01/18(金) 19:14:08.34ID:???
対応してるっていっても機能のほとんどが制限されるから、そこまで使い道ないよ

623Name_Not_Found2019/01/18(金) 19:53:52.71ID:???
WEBデザイナーを副業にすれば月5万は稼げるとプログラミングスクールで言われたんだけどマジ?

624Name_Not_Found2019/01/18(金) 20:05:57.78ID:???
まじめに副業すれば、何やってもそれくらい稼げるだろ

625Name_Not_Found2019/01/18(金) 20:15:34.07ID:???
>>618
ツールチップと言う
けどこれモバイル対応できないから、あんまり頑張っても仕方ない部分ではある

>>623
営業努力次第でかなり上下する

626Name_Not_Found2019/01/18(金) 21:09:34.37ID:HglWwYqY
>>619
ありがとうございます!

>>625
ありがとうございます!
まさに求めていたものです。

627Name_Not_Found2019/01/18(金) 21:55:32.86ID:???
下記のようなhtmlのページが何個もある場合で、
全てのhtmlのヘッダーやフッターをちょっと変更したい時に更新が大変なのですが
cssみたいに1つのヘッダーを読み込むみたいなことはできるのでしょうか?

■ ヘッダー (ここを更新したい)
□ 本文1
□ 本文2
■ フッター

628Name_Not_Found2019/01/18(金) 22:42:36.02ID:???
js

629Name_Not_Found2019/01/18(金) 22:47:01.17ID:Xm++tQ0K
質問です
CSSの大きさの単位でvhを使ったときの最大値を決めたいんですが
@mediaで切り分けるしかないですかね

幅・高さはmax-widthやmax-heightでいいんですが
その他のプロパティは

630Name_Not_Found2019/01/18(金) 23:10:40.57ID:???
>>627
サーバーサイド言語でやればよい

>>629
そゆこと
max-vhとかほしいよな

6316292019/01/18(金) 23:17:00.14ID:Xm++tQ0K
>>630
やっぱそうかー
すべてのプロパティにmax-とmin-ほしいですねー

632Name_Not_Found2019/01/18(金) 23:23:17.44ID:???
>>627
phpで別ファイルを読み込む
htmlで別ファイルを読み込む方法もあるけど、避けたほうが良い。理由は忘れた
この際だしwordpressでも入れて見たらいいかもね

633Name_Not_Found2019/01/18(金) 23:35:02.98ID:???
>>617
ありがとー

634Name_Not_Found2019/01/19(土) 00:35:47.84ID:???
>>627
htmlとcssのみだとできないんでないかな
俺はejsを使ってる

635Name_Not_Found2019/01/19(土) 00:36:41.66ID:???
あー
おすすめは絶対しないけど
iframeでできないこともないか?

636Name_Not_Found2019/01/19(土) 00:49:29.77ID:???
PHPはデフォでインストールされてるだろうからSmartyでも使えばいいんじゃね

637Name_Not_Found2019/01/19(土) 09:12:02.10ID:???
>>627
htmlからヘッダー部分切り出して別ファイル(header.htmlとか)にして、元あったとこ(index.htmlとか)は
<?php include 'header.html'; ?>
とする
そして .htaccess に

<FilesMatch "\.html$">
AddType application/x-httpd-php .html
</FilesMatch>

を追加する
これで実現できる

638Name_Not_Found2019/01/19(土) 16:00:49.72ID:???
SCSS でも、main.scss に、_a.scss など、各コンポーネントのパーシャルファイルを読み込む

HTML, JavaScript でも、フレームワークを使うと同じ。
各コンポーネント別に作って、index.html, bundle.js みたいなファイルに読み込む

各コンポーネントごと、別々に作って、後でまとめるようにする

>>618
スマホでは無理だけど、ツールチップみたいなイベントで、
jQuery などで、内容を取得するのかも?

639Name_Not_Found2019/01/19(土) 22:46:35.70ID:???
便利なものがたくさんあるんだから使えばいいのに

640Name_Not_Found2019/01/19(土) 22:51:55.72ID:???
便利といって使いまくると跡でな・・・

641Name_Not_Found2019/01/20(日) 18:37:28.34ID:???
画像遅延ロード系のスクリプト使う時、src属性書いてますか?

642Name_Not_Found2019/01/20(日) 22:46:54.44ID:???
>>641
書かないのでは

643Name_Not_Found2019/01/20(日) 22:52:08.22ID:???
読み込み中orダミーの画像指定しないとaltに書いた文字列が丸見え

644Name_Not_Found2019/01/21(月) 09:16:41.31ID:???
見せるためのaltだろう
何も恥じることはない

645Name_Not_Found2019/01/21(月) 10:52:19.30ID:???
初歩的な質問ですがサイトを作る場合に
一から手打ちorDreamweaverで作るのか
どっかからコードを丸々コピーしてきて中身を入れ替えるのか
どっちが一般的なのでしょうか?

646Name_Not_Found2019/01/21(月) 10:55:53.07ID:???
>>645
個人で作るなら、今はwordpress等のCMSでテンプレート入れてサクサク作って終わり
コードなんて打たない

もうちょっとこだわりがあるならテンプレート自体を作る
業者の場合は色々分かれる

647Name_Not_Found2019/01/21(月) 11:01:03.26ID:???
>>646
えー
つまり自分ではデザインしない人の方が多いということ?
どっかでそれ数えてるもの?

648Name_Not_Found2019/01/21(月) 11:07:49.89ID:???
>>646
派遣コーダーの仕事としてはどうでしょうか?
会社によって違うかもしれませんが、コーダーの仕事と言えばデザイナーがデザインしたものをスライスで切ってDivに当てはめていくみたいのが未だに一般的でしょうか?
テンプレートとは枠組みの事ですか?
つまらない質問でスミマセン。

649Name_Not_Found2019/01/21(月) 11:20:30.15ID:???
>>647
サイトの割合は以前どこかで見た
もう一回探してみたけど、ソース出てこなかった。許して
・テンプレートそのまま使ってる人が多い
・テンプレートを使ったサイトを量産している人が多い
のどちらかだろうなぁ、と考えていたのは覚えている

製作者に占める割合は分からない
これは個人を含めると計測は出来ないだろう

>>648
派遣先による
wordpressのテンプレートに画像ポンポン当てはめてハイ終わり、10万円、ってとこもあれば
一からデザイン細かく作って50〜100万円ってとこもある

俺がよくやるのは
・全体デザインをデザイナーと考える。テキストや画像の位置をざっくり
・使う画像はデザイナーが決める。よっぽど変だったら「それ何か変じゃね?」と言って作り直してもらう
・後はパーッとコーディングして終わり
ちなみにdivはもう殆ど使わないよ。section、dl、ulが多い

650Name_Not_Found2019/01/21(月) 11:23:36.11ID:???
>>649
ありがとうございます
わかりやすいです
それとやっぱりwordpressも覚えといた方が良さそうですね
しかしdivがもう古いとはショック…

651Name_Not_Found2019/01/21(月) 11:34:13.69ID:???
>>650
いやいや
新しいとか古いとかいう問題じゃねえよ
個人の意見に振り回されちゃいかんw

652Name_Not_Found2019/01/21(月) 12:27:16.88ID:???
>>650
> divがもう古い

Google「えっ?」
Amazon「えっ?」
Apple「えっ?」

653Name_Not_Found2019/01/21(月) 12:46:02.47ID:???
>>650
divが古いとは言ってないんだが・・・

「セマンティック」とか言われてるんだけど、
単になんでもかんでもdivで囲むんじゃなく、
適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている

<ul>はさすがに使っていると思うけど、他にもヘッダーは<header>、グローバルメニューは<nav>などが推奨される

これにより、ちゃんとセマンティックを意識してコーディングしているサイトは検索結果に表示されやすくなる・・・
というはずだったんだけど、ぶっちゃけdivで全部書いても全然変わらんわ。ハハハ

まぁ人間が見た時に見やすい、チームの開発が楽になるという利点はあるので、使いこなせないとマズイ

>>652
googleは何で書いても関係ないからな
全部divと知った時は驚いたけど
amazonとappleはコンテンツが最強すぎる

654Name_Not_Found2019/01/21(月) 12:56:06.74ID:AXKOrJd2
Googleは後方互換性重視で、新しい技術だけを使う事には拘ってないのでは
MSと同じ
Appleとは対照的

655Name_Not_Found2019/01/21(月) 12:58:18.19ID:???
>>654
そんなレベルじゃない
数年前はリストすら
<div class="li">
としていた
セマンティックは全く考えてない、というか考える必要がない

656Name_Not_Found2019/01/21(月) 13:12:58.11ID:???
みなさん、セマンティックって言葉知ってますか?
ちゃんと意識しましょう!!

657Name_Not_Found2019/01/21(月) 13:18:29.96ID:???
         ______ 
       ,;i|||||||||||||||||||||||||||||||ii;、         _/
     /||||||||||||||||||||||||||||||||||||||ii;、        \
  / ̄ ̄\||||||||||||||||||||||||||||||||||||ii;゙ヽ,      /
'" ̄ヽ     ヽ!!||||||||||||||||  ||||||||||!!"ヘ     <  セマンティックageるよ
ヽ          ゙!!!||||||||||||  |||||||!!   iヽ── /
|||l            ゙゙ヽ、ll,,‐''''""     | ヽ|||||||||セマンティックageるよ
|||l     ____   ゙l   __   \|||||||||  
||!'    /ヽ、     o゙>┴<"o   /\   |'" ̄| ホントの勇気 見せてくれたら
\  /  |ミミヽ──‐'"ノ≡- ゙'──''彡| |、 |   |
   ̄|    |ミミミ/" ̄ 、,,/|l ̄"'''ヽ彡|| |、/   / セマンティックageるよ
 ヽ、l|    |ミミミ|  |、────フヽ |彡l| |/  /_
  \/|l    |ミミミ| \_/ ̄ ̄フ_/  |彡|l/    ̄/ セマンティックageるよ
  \ ノ   l|ミミミ|  \二二、_/  |彡|      フ  
    ̄\  l|ミミミ|    ̄ ̄ ̄  |メ/       \トキメク胸に キラキラ光った
    | \ ヽ\ミヽ    ̄ ̄"'  |/        /
    /  \ヽ、ヾ''''ヽ、_____//       /_夢をageるよ
  /  ヽ ゙ヽ─、──────'/|         ̄/
. /       ゙\ \     / / \__
   ───'''" ̄ ̄ ゙゙̄ヽ、__,,/,-'''" ̄   ゙''─

658Name_Not_Found2019/01/21(月) 13:30:51.52ID:???
>>657
同じネタ考えてたw

659Name_Not_Found2019/01/21(月) 13:40:08.38ID:???
>>655
どこの平行世界だよ

660Name_Not_Found2019/01/21(月) 14:06:20.52ID:Zkk84aM7
そもそもデザインが先にあるから、そんな理想論言ってられないのが現実

661Name_Not_Found2019/01/21(月) 14:24:24.82ID:???
>>653
>適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている

なんか15年くらい前が懐かしくなるなw

662Name_Not_Found2019/01/21(月) 14:28:12.22ID:???
>>661
本質的なことは昔から変わってないからな
基礎をわかってるやつが一番強い

663Name_Not_Found2019/01/21(月) 14:31:42.35ID:???
んで最近のグーグルはHTMLなんて大して重要視してないんじゃないか?
要素ぜんぶ<div>と<a>だけでも
<body>の中空っぽでJSで中身書き出すページでも
なんなら1枚画像びたーんって貼っただけのページでもちゃんと読んでくれるし

664Name_Not_Found2019/01/21(月) 14:36:00.78ID:???
それは解析力の話

665Name_Not_Found2019/01/21(月) 14:56:15.45ID:???
SEOもセマンティック()も完璧なサイトが見てみたい

666Name_Not_Found2019/01/21(月) 15:04:31.23ID:???
>>665
すっごいマイナーなことについて書けばいいんだよ!

667Name_Not_Found2019/01/21(月) 15:35:59.29ID:???
>>665
SEO会社はさすがにちゃんとしてる
:https://www.plan-b.co.jp/

と思ったらdivにhref属性があるんだけど何だこれ?

668Name_Not_Found2019/01/21(月) 15:37:49.77ID:???
>>663
altも無い画像だけのサイトって検索結果に出てくる?

669Name_Not_Found2019/01/21(月) 15:51:59.11ID:???
メニューアイコンがアニメーションで
≡ → ×
+ → ×
になるサイト多すぎて見てて恥ずかしい

670Name_Not_Found2019/01/21(月) 15:53:55.19ID:???
>>651-653
もうあんまり使わないタグなのかと思いました
いまでも使ってますよね
dlとかulとかをよく使うというのは、いわゆる下に流れていくようなサイトが多いという事でしょうか?
divで囲うような配置でないような

671Name_Not_Found2019/01/21(月) 15:54:00.03ID:???
>>669
なんで?

672Name_Not_Found2019/01/21(月) 15:55:39.20ID:???
>>671
マネすることしか出来ないんだなーって思う

673Name_Not_Found2019/01/21(月) 16:22:26.86ID:???
君のオリジナルの技術見せてよ

674Name_Not_Found2019/01/21(月) 17:01:14.89ID:???
>>672
× マネ
○ 一般的

奇抜な物を使うとユーザーが使い方分からないんだよ
個人的には、ハンバーガーメニューですらまだ奇抜な内だと思う

675Name_Not_Found2019/01/21(月) 17:06:50.36ID:???
>>670
divはデザイン的に使わざるを得ない時に、最終的に使うってレベル

>dlとかulとかをよく使うというのは、いわゆる下に流れていくようなサイトが多いという事でしょうか?
そう、今はモバイルが7割ぐらいのアクセスなので、モバイル中心に作る
divなんて基本的に使い所が無い
「モバイルファースト」とかで検索すると良い

676Name_Not_Found2019/01/21(月) 17:28:18.82ID:???
なんでulとdlはモバイル向けなの??
それこそセマンティックでもなんでもないじゃん

677Name_Not_Found2019/01/21(月) 17:31:25.51ID:???
>>676
モバイル向けなんて言ってない
単純に使う機会が多いってだけ
引用が多いサイトならblockquoteを多用することになるんじゃないか

678Name_Not_Found2019/01/21(月) 17:54:49.00ID:???
誰かセマンティックなお手本サイト見せてよー

679Name_Not_Found2019/01/21(月) 18:00:56.24ID:???
>>675
モバイルと関係なくね?
単に自分は要素少なくても問題のない簡素なデザインばかりしている、っつー話でしょ
別にそれが悪いとは言わんが

680Name_Not_Found2019/01/21(月) 18:14:35.26ID:???
divとハンバーガーが悪だと思い始めたら、ひとつ上のコーダーになれるんやでw

681Name_Not_Found2019/01/21(月) 18:33:02.55ID:???
なんたら脂肪酸は悪

682Name_Not_Found2019/01/21(月) 18:36:22.82ID:???
>>680
あっはい、茶化すなら君が上に上がるためのコーダーの指標をどうぞ

683Name_Not_Found2019/01/21(月) 18:44:09.85ID:???
>>682
強いて言えば、<strong>愛</strong>っすかね

684Name_Not_Found2019/01/21(月) 18:47:59.35ID:???
お前ら何でそんなに攻撃的なの?

685Name_Not_Found2019/01/21(月) 18:59:25.37ID:???
おまえらがいくらがんばっても
結局はコンテンツの中身と被リンクだから

686Name_Not_Found2019/01/21(月) 19:11:54.47ID:???
時々でいいからmarqueeの事も思い出してあげてください

687Name_Not_Found2019/01/21(月) 19:13:57.06ID:???
>>685
そうそう
フロントの要素やらなんやらは本当に意味がない
これ否定する奴は一回全部divでサイト作ってみれば良い

688Name_Not_Found2019/01/21(月) 19:46:00.78ID:???
誰もspanについては言及してない件

689Name_Not_Found2019/01/21(月) 19:51:42.30ID:???
>>668
文字化してインデックスしてくれるやつ、類似画像検索では引っかかるやつ、まったく読んでくれないやつ
それぞれあるみたい
試してみてるページそんなに多くないんで何をどうすればよいのかはわからんすまん

690Name_Not_Found2019/01/21(月) 19:54:25.59ID:???
>>688
divとspan、意味のなさならdivが包括しているので

>>689
前例があれば、ちょっと聞いてみたかったってだけだよ
実際にやることはほとんど無いと思うからね
すごく役に立ったので大丈夫、本当にありがとう

691Name_Not_Found2019/01/21(月) 20:05:58.42ID:???
divは汎用的なブロック要素って意味がある
存在する意味がないみたいな認識なら、勉強不足じゃないかなぁ

692Name_Not_Found2019/01/21(月) 20:15:33.49ID:???
何この糞つまらない流れ……

693Name_Not_Found2019/01/21(月) 20:33:54.94ID:???
htmlのサイズは極力小さくするよう努力した方がいいのでしょうか?

694Name_Not_Found2019/01/21(月) 20:39:17.73ID:yS824t/A
>>693
とくには

大アクセスされるようになって
伝送料金を節約したい、とかそういう理由があるなら考えてもいいと思うけど

695Name_Not_Found2019/01/21(月) 20:59:37.65ID:???
まあでも、サイズが増える→移動中にクソ格安回線で見てる大量のザコ乞食の読み込み時間が延びる→離脱率少し上がる
だから大したことないとは言え確実に離脱率は上がる。

696Name_Not_Found2019/01/21(月) 21:29:04.63ID:???
ツールで処理する程度の手間でよいと思う

697Name_Not_Found2019/01/21(月) 22:15:28.60ID:???
サーバーサイドで華麗に最適化した努力を
糞みたいなJSを埋め込んで邪魔をするフロント

698Name_Not_Found2019/01/21(月) 22:52:07.63ID:???
やっぱこのスレの奴らはダメだな
バカばっかりだ
俺が取り締まってやらないとな

699Name_Not_Found2019/01/21(月) 23:14:27.19ID:???
>>693
小さくするというより、見やすくすると良い
変にテクニカルにするのではなく、まとめたほうが見やすいところはまとめておけば良い

700Name_Not_Found2019/01/21(月) 23:14:52.27ID:???
全板でワッチョイ強制導入らしい
アホ共が浮き彫りになって面白そうだwww

701Name_Not_Found2019/01/22(火) 00:36:01.33ID:???
今までの書き込みにも出るんだったら死ねるな・・・

702Name_Not_Found2019/01/22(火) 00:37:30.36ID:???
それでたら面白いだろうな
阿鼻叫喚だろうけど、是非やってほしい

703Name_Not_Found2019/01/22(火) 00:41:24.39ID:???
どこ情報?

704Name_Not_Found2019/01/22(火) 09:56:58.47ID:QYIhIs9P
translateZと言うのはZ方向に移動するそうですが、
Z方向に移動しても変化が確認出来ないのではないですか?
translateXやtranslateYなら動きが分るのですが。

705Name_Not_Found2019/01/22(火) 11:13:09.07ID:???
>>704
absoluteで重ね合わせたときなどに、どの要素が一番前に来るかを調整できる
ほとんど使わんけどね

706Name_Not_Found2019/01/22(火) 11:17:55.41ID:???
>>704
そうでもない
言葉で説明するのも難しいけど
xyzとrotateの値を合わせて変えてみるとわかりやすいと思う
要はmatrixだ

707Name_Not_Found2019/01/22(火) 11:58:44.70ID:???
>>704
まず705は嘘だからスルーしてね
translateZは奥行きを変化させるんだけど視点がデフォルトのままだとそれ単体ではほぼわからない
translateZの違う要素をいくつか並べて、併せて perspective(500px) を入れてみて

708Name_Not_Found2019/01/22(火) 12:13:22.23ID:0X4Nr5Q5
>>704
適当に書いたからあれだが
こうするとZの意味がわかるじゃろう
http://jsfiddle.net/2utysx4e/

709Name_Not_Found2019/01/22(火) 12:23:44.78ID:???
お前らろくに言葉で説明もできんのか・・・

>>704
(3次元空間の)Z軸の移動は
遠くのものは小さくなるという効果がある

>>705
CSSの重ね合わせは重なりの順番だけで
2次元空間なのでちょっと違う

710Name_Not_Found2019/01/22(火) 13:01:13.75ID:???
>>701
他の板に導入されたときは、導入前に立てられたスレは対象外だった
よって、おまえの醜態は晒されずに済むだろう

711Name_Not_Found2019/01/22(火) 13:03:00.21ID:QYIhIs9P
>>708
凄いですね。
translateZの意味が分かりました。
ありがとうございました。

712Name_Not_Found2019/01/22(火) 16:48:29.44ID:???
>>649
すみません、これは社内にテンプレートがいくつかあって
それを利用して作成しているという事ですか?

713Name_Not_Found2019/01/22(火) 19:02:41.58ID:???
いまだにfloatコーディングなんだけど
flexとgridどっち覚えたらいいですか?
このスレだとflex使ってる人が多いみたいだけど
gridの方が欠点があんまりないってのを他のサイトで見たもので...

714Name_Not_Found2019/01/22(火) 19:07:59.30ID:???
>>712
要するに作らないでテンプレ売りしてるだけの似非ってことだよ

715Name_Not_Found2019/01/22(火) 19:14:00.51ID:0X4Nr5Q5
>>713
両方
別にfloatがいかんてこともないよ
適材適所だ



とんとfloat書かなくなったけど

716Name_Not_Found2019/01/22(火) 19:19:41.91ID:???
>>713
flex
gridは対応ブラウザが絶妙で怖い。会社のページには使わない方が良いと思う
スマホゲーのサイトならgridでもいいかもね

717Name_Not_Found2019/01/22(火) 20:04:16.00ID:???
>>710
ふぅ助かった

718Name_Not_Found2019/01/22(火) 20:16:36.46ID:???
>>717
毎回同じとは限らないんだよなぁ・・・

719Name_Not_Found2019/01/22(火) 20:39:00.66ID:???
つーかほんとに導入されるのかな
だとしたら嬉しいかもしれん

720Name_Not_Found2019/01/22(火) 20:40:39.96ID:???
>>715
>>716
ありがとう!
floatはまだ使っててもいい感じですね
しかしながら、flex、gridのお勉強も必要みたいなんで
ぼちぼちflexからやりたいと思います。
数年に一度コーディングの流れ変わるのなんとかなんないかしら=3

721Name_Not_Found2019/01/22(火) 20:50:02.48ID:0X4Nr5Q5
>>720
それは放置して貯めてるからだw

新しい機能やプロパティを
へ〜こういうのができるのね〜程度に
たまーに追ってれば大丈夫だよ

722Name_Not_Found2019/01/22(火) 21:27:05.41ID:???
floatはレスポンシブでめんどくさい
はっきり言って書いててアホらしくなる

723Name_Not_Found2019/01/22(火) 21:37:03.09ID:???
絶対にPC使ってる人しか見ないようなサイトでも
レスポンシブデザインにしたほうが無難でしょうか?

724Name_Not_Found2019/01/22(火) 21:48:45.19ID:???
上であったhtmlのサイズについて思ったけど
ソースに改行を入れないってのは少しでも効果あるのかな
brとかじゃなくソース自体の改行コード

725Name_Not_Found2019/01/22(火) 22:04:05.74ID:???
0.000001秒速くなるよ

726Name_Not_Found2019/01/22(火) 22:13:55.83ID:???
>>723
もちろんそっちの方が無難
慣れたらそもそもそんなに手間じゃない
横並びの要素をwidth100%にして縦並びに買えるだけ
迷う時間の方がもったいない

727Name_Not_Found2019/01/22(火) 22:40:52.11ID:???
>>724
ちゃちゃっと計算してみたらいい
文字コードUTF-8・改行コードLFで10,000行のHTMLを書いたとして
改行文字の量は

10,000B = 0.08Mb

ドコモが測った泥LTEの実行速度の中央値が190Mbpsだそうなので
https://www.nttdocomo.co.jp/support/area/effective_speed/

0.08 ÷ 190 ≒ 0.00042秒

改行コードがCR+LFだったとしても0.00084秒
気にするほどのもんでもなかろう

728Name_Not_Found2019/01/22(火) 22:50:00.05ID:???
>>725
結構いい線行ってて笑った

729Name_Not_Found2019/01/22(火) 23:10:36.53ID:???
AAって最近表示崩れまくるしPC以外だとCSSでどうにかしようとしても崩れる気がする
そこで画像化してサイトに並べようと思うんだけど画像だらけのページって
googleさんからどういう評価受けるんだろう?

730Name_Not_Found2019/01/22(火) 23:12:23.20ID:0X4Nr5Q5
>>729
べつに

731Name_Not_Found2019/01/22(火) 23:13:05.92ID:0X4Nr5Q5
途中で投稿してしまった

>>729
べつにどうってことない
インスタグラムのページとかだって普通にヒットするじゃろ?

732Name_Not_Found2019/01/22(火) 23:14:18.75ID:???
>>727
圧縮が入るので更に減る

733Name_Not_Found2019/01/22(火) 23:18:14.93ID:???
>>729
もうAAは限界かな
一行AAはともかく、複数行はもうスマホでガタガタだ

734Name_Not_Found2019/01/22(火) 23:22:00.92ID:???
画像で見て初めて「えっAAってこう見えてるのが正常なの?」ってなるよね

735Name_Not_Found2019/01/22(火) 23:38:27.75ID:???
AA書体をウェブフォント化して
font-familyに当てても駄目かね?

736Name_Not_Found2019/01/22(火) 23:41:24.93ID:???
>>727
>>724がまともなやつならインデントも取ってるだろうしもっと膨らむぞ

737Name_Not_Found2019/01/22(火) 23:51:18.40ID:???
>>736
インデントも削ってみよう

10,000行で、平均4段のインデント(スペース4)があったとして
160,000B = 1.28Mb
0.96 ÷ 190 ≒ 0.00674秒

まあこれも誤差ですな

738Name_Not_Found2019/01/22(火) 23:51:53.39ID:???
間違えた
1.28 ÷ 190 ≒ 0.00674秒

739Name_Not_Found2019/01/23(水) 00:06:22.49ID:???
そんなに減らしたきゃミニファイすりゃいいだけ

740Name_Not_Found2019/01/23(水) 00:12:23.90ID:???
urlの記述って一向に進化しないよね

741Name_Not_Found2019/01/23(水) 00:14:16.49ID:???
そういやipも
255.255.0.1
なら
ff.ff.0.1
で行けるんじゃねって思ったけどディレクトリあるからあかんな

742Name_Not_Found2019/01/23(水) 00:44:28.72ID:???
ルーティングからビューの出力が始まるまでの時間の方が圧倒的に長い訳で

743Name_Not_Found2019/01/23(水) 00:47:09.47ID:???
昔は画像がスクロールするごとに読み込まれるjqなんとかを喜んで使ってたけど
今だと余計な機能なんですかね?

744Name_Not_Found2019/01/23(水) 00:48:52.14ID:6y7r5Jzd
>>743
そうでもない
特にモバイル利用が増えたんで
見られるかどうかわからん画面のはるか下方の画像をロードするのは
ユーザにとってもサーバ側にとっても、そんなにいいことない

745Name_Not_Found2019/01/23(水) 01:16:30.85ID:???
その辺はスマホブラウザが自動的にやってくれるようになったよ

新着レスの表示
レスを投稿する