２ちゃんねる ■掲示板に戻る■ 全部 1- 最新50    
■ このスレッドは過去ログ倉庫に格納されています

HTML/CSS のどんな質問にも優しく答えるｽﾚ 47

1 ：Name_Not_Found：2021/04/08(木) 08:48:14.74 ID:???.net
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

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

■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 45
https://mevius.5ch.net/test/read.cgi/hp/1601474123/
HTML/CSS のどんな質問にも優しく答えるｽﾚ 46
https://mevius.5ch.net/test/read.cgi/hp/1608967433/

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

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

■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html

2 ：Name_Not_Found：2021/04/08(木) 11:17:00.75 ID:???.net
乙レスポンシブ

3 ：Name_Not_Found：2021/04/08(木) 13:48:41.10 ID:???.net
いちおつ

4 ：Name_Not_Found：2021/04/14(水) 03:54:46.84 ID:???.net
昔流行った、複数画像を連結して1画像にして
positionでずらす方法ってレスポンシブと相性悪いと思うけど仕方ない？
imgならwidth100％でheightも可変だけど、

height固定のずらしだけだと画面一杯には難しいか
計算式とか使うといけるかもしれないけど、手早くレスポンシブするならwidth100%は諦めてfloat:noneするほうが良いのかな

https://jsfiddle.net/mL75vcas/

5 ：Name_Not_Found：2021/04/14(水) 05:43:15.35 ID:???.net
何がしたいのかサッパリ

6 ：Name_Not_Found：2021/04/14(水) 07:50:40.75 ID:???.net
まあ何がしたいのかよくわからないな
floatにCSSスプライトとか、XHTML/CSS2/HTTP1時代のテクニックをなんで今更

7 ：Name_Not_Found：2021/04/14(水) 08:44:09.12 ID:???.net
>>5-6
すまん、昔のサイトをcssだけ触ってレスポンシブ化しないといけないんだが
連結した画像とbackground-positionを多用しているのもあって、
どうすればいいかなと思って

8 ：Name_Not_Found：2021/04/14(水) 10:42:33.72 ID:???.net
結論
CSSだけいじってレスポンシブとか都合の良い改変なんてできません

9 ：Name_Not_Found：2021/04/14(水) 11:48:18.35 ID:???.net
>>6
googleが何十億アクセスもされるトップページで読み込んでるCSSスプライト（今この瞬間も現役）
https://ssl.gstatic.com/gb/images/p2_4b3829c9.png

10 ：Name_Not_Found：2021/04/14(水) 12:06:38.03 ID:???.net
>>7
レスポンシブ化って言うけど、結果的にどうなって欲しいの？
現状でも、画面幅が小さくなると、画面に入りきらない画像が下に繰り下がるようになってるけど
これもある意味、レスポンシブ化が出来てるってことになるんだけど

画像の縦横比と横並びを維持しつつ、画面幅に合わせて縮小したいって事？

11 ：Name_Not_Found：2021/04/14(水) 12:09:42.10 ID:???.net
多分モバイルファーストにってことだろ
スマホで閲覧時に見にくいからスマホに最適化させろとか言われたんじゃね？

12 ：Name_Not_Found：2021/04/14(水) 12:30:00.40 ID:???.net
>>9
小さい大量のアイコンに使うのは、現代の一番標準的な使い方だが
それがどうしたの？

13 ：Name_Not_Found：2021/04/14(水) 12:39:01.44 ID:???.net
リンクされてるほんの3レス前も読まんたわけ

14 ：Name_Not_Found：2021/04/14(水) 20:11:40.55 ID:???.net
>>7
たぶん考えているほど複雑な計算にはならないと思うよ
いくつかのサイトでスプライトやってるけど
そんなに困ったことないし

SP表示の方を%とか使うと詰むから
vwのような、ほぼほぼpxと同等に扱える単位でやるといいと思う

15 ：Name_Not_Found：2021/04/14(水) 21:37:28.89 ID:nKH8k+H4.net
bootstrapは色を変更するとき、自分でクラスを作って指定するんでしょうか？
bootstrapで用意されているものは、primaryみたいな数パターンだけですよね。

16 ：Name_Not_Found：2021/04/14(水) 23:03:47.65 ID:uGyzHRGa.net
カンプでスマホデザインが横幅375px、左右の余白は37px(横幅の約10%）の場合。
ブレイクポイントが768pxの時って、左右の余白って実際のコーディングだとどうなるんでしょうか。
カンプに従ってそのまま37px指定なのか、カンプの横幅のと余白の割合を維持させるようにするのか
画面が768pxの場合はカンプの比率と同じ10%(76pxあたり)にするものなのでしょうか？

17 ：Name_Not_Found：2021/04/14(水) 23:07:09.55 ID:???.net
なら10%でよくねっていう話ですよ

18 ：Name_Not_Found：2021/04/14(水) 23:16:16.91 ID:uGyzHRGa.net
>>17
相対単位で指定した場合、カンプで指定されているpxぴったりにならないこともあるかと思いますが、
そういうケースの時はどういう方針にするかってのはデザイナーやクライアントとの話し合いってことになるんでしょううか。
デザインの横幅以外で見られたときに余白や各コンテンツの幅などの部分は。

19 ：Name_Not_Found：2021/04/15(木) 07:02:17.12 ID:???.net
>>18
そこでvwですよ

20 ：Name_Not_Found：2021/04/15(木) 11:46:55.06 ID:???.net
>>15
bootstrap-4.4.1/scss/_variables.scss で、

$primary: $blue !default;
みたいに、変数を定義してる

そういう所をカスタマイズすれば？
テーマとか

カスタマイズの方法は、文書に載っていないかな？

21 ：Name_Not_Found：2021/04/15(木) 22:15:24.58 ID:sxAkC5Dv.net
フォント変えようと思っても変わらない仕様の時ってありますか？
ebayでフォントをキリッとしたのに変えたいんだけど、説明のhtmlいじってもなぜかフォントが変わらない…

22 ：Name_Not_Found：2021/04/15(木) 22:43:03.09 ID:???.net
すいません。教えてください。
javascriptでtableを出したときに、
文字列を例えばvileのleだけを赤字にするときに(単語の一部を赤字にする)
<span class="">で囲ってやっています。
こういうときってタグはspanでいいでしょうか？
vi<span class="c1-1exam1">le</span>

23 ：Name_Not_Found：2021/04/15(木) 22:43:30.90 ID:1GQyMqZQ.net
ageていませんでした。
すいません。教えてください。
javascriptでtableを出したときに、
文字列を例えばvileのleだけを赤字にするときに(単語の一部を赤字にする)
<span class="">で囲ってやっています。
こういうときってタグはspanでいいでしょうか？
vi<span class="c1-1exam1">le</span>

24 ：Name_Not_Found：2021/04/15(木) 23:46:01.64 ID:???.net
いいよ

25 ：Name_Not_Found：2021/04/15(木) 23:46:10.16 ID:???.net
インラインだしspanでいいんでない？

26 ：Name_Not_Found：2021/04/16(金) 00:23:55.36 ID:???.net
>>21
いんぽーたんと

27 ：Name_Not_Found：2021/04/16(金) 00:25:53.36 ID:???.net
>>16
デザイナーのつくるカンプはあくまで目安
そもそもスマホの機種によって横幅なんて変わるんだから
見た目が同じになれば数値なんてどうでもいいんだよ

28 ：Name_Not_Found：2021/04/16(金) 05:40:57.23 ID:???.net
ピクセルパーフェクトをやれとか時代遅れも甚だしい

29 ：23：2021/04/16(金) 08:47:38.99 ID:Ub+eN8uq.net
>>24-25
ありがとうございます。

別件で下記お願いします。

https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap
グーグルフォントをリンクで指定するときは、
パラメータにdisplay=swapにしておくとフォントブロック期が0秒になるのでしょうか？

このリンクにdisplay=swapが入っていると
「`&display` は不明な実体参照です。」とゲートウェイ　lintで出るのですが
無視でいいでしょうか？

参考
https://laboradian.com/show-text-immediately-using-font-display/
http://www.htmllint.net/html-lint/htmllint.html

30 ：Name_Not_Found：2021/04/16(金) 12:35:55.03 ID:???.net
>>29
属性値も&は&や&と書くのが正しい

31 ：Name_Not_Found：2021/04/16(金) 14:07:45.15 ID:???.net
>>28
そう？
webフォント使えるようになってからは
大して困ることもなくなったと思うけどなあ
目分量でやらなきゃならんことがほとんどない

32 ：Name_Not_Found：2021/04/16(金) 18:24:10.70 ID:???.net
>>29
無視

33 ：Name_Not_Found：2021/04/16(金) 18:39:49.20 ID:???.net
>>30
後ろの&は&amp;ね

34 ：Name_Not_Found：2021/04/16(金) 19:45:11.51 ID:zX3Yhgki.net
bootstrapでカラムにパディングを指定したいんですけど、なぜか反映されません。
mainの箇所にpl-100を指定したんですが、反映されません。

padding-left:100px;という意味ではないんでしょうか？
ただ、デフォルトで左右のパディングは指定されているんですね。bootstrapでは。


<div class="container-fluid bg-warning p-5" style="max-width:1000px;">

<div class="row">
<div class="col text-center bg-primary">ブログタイトル</div>
</div>

<div class="row">
<div class="col-sm-8 text-center bg-primary pl-100" style="border:2px solid gray;">
<div style="border:1px solid black;">
main<br>
main
</div>
</div>
<div class="col-sm-4 text-center bg-success">sidebar</div>
</div>

<div class="row">
footer
</div>
</div>

35 ：Name_Not_Found：2021/04/16(金) 19:51:51.65 ID:???.net
最近てbootstrapからウェブ制作の学習を始める人が多いの？

36 ：Name_Not_Found：2021/04/16(金) 20:04:13.61 ID:zX3Yhgki.net
>>35
cssはある程度出来るんですが、レスポンシブ部分だけ使おうかなと
装飾は自分で作ったほうが楽ですわ

37 ：Name_Not_Found：2021/04/16(金) 20:47:37.84 ID:???.net
bootstrapのcssに.pl-100なんて書いてないよ

38 ：Name_Not_Found：2021/04/16(金) 20:59:19.91 ID:???.net
pl-に0から5だよね

39 ：Name_Not_Found：2021/04/17(土) 01:03:54.08 ID:???.net
そういう細かい調整ができないのがbootstrap

40 ：23：2021/04/17(土) 01:11:28.96 ID:0DcRJVf8.net
>>30
>>32-33

ありがとうございます。
href内は&で正常に動いくのですが、今確認しました。
っということはグーグルフォントの貼り付け用のタグで&になっているのは
lintでエラー出るのでダメですやん。

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">

41 ：Name_Not_Found：2021/04/17(土) 01:12:31.59 ID:0DcRJVf8.net
＆amp;でした
掲示板では勝手に&に変更されるのですね

42 ：Name_Not_Found：2021/04/17(土) 05:23:52.94 ID:jBgdX7wl.net
>>39
細かい調整出来ないからこそ、整うとも言えるんですよね

>>37
pl-5でもなぜか効きませんでした
原因特定の方法はわかりませんか

43 ：Name_Not_Found：2021/04/17(土) 06:22:12.03 ID:???.net
ブラウザのF12 開発者ツールを起動して、スタイルを確認すれば？

JSFiddle などにアップロードして確かめるとか

44 ：Name_Not_Found：2021/04/17(土) 11:59:08.71 ID:???.net
>>42
.pl-?があるのはbootstrap4
5では.ps-?になってる
https://getbootstrap.jp/docs/5.0/migration/

45 ：Name_Not_Found：2021/04/17(土) 14:38:04.67 ID:jBgdX7wl.net
>>44
>>43
どうもです
変わってるんですね
5はまだ記事が少ないみたいでｓ

46 ：Name_Not_Found：2021/04/17(土) 18:43:34.62 ID:jBgdX7wl.net
>>44
まだbootstrap4にしといたほうがいいんでしょうか？

47 ：Name_Not_Found：2021/04/17(土) 19:59:44.75 ID:jBgdX7wl.net
連投すみません。

bootstrapでは以下のようにclassを指定していきますよね。
フォントサイズを変更したい場合、fs-3をfs-5などとすればいいのですが、３箇所すべて置き換えていくのでしょうか？

これが通常のスタイルシートであれば、CSSファイルの編集だけで済みます。bootstrapのこのような点は不便だったりしませんか？
これだとstyle属性に書いていたころと変わらないような。

<div class="badge badge-secondary fs-3">サイドタイトル</div>
<div class="sidebar_innner">インナー</div>
<div class="badge badge-secondary fs-3">サイドタイトル</div>
<div class="sidebar_innner">インナー</div>
<div class="badge badge-secondary fs-3">サイドタイトル</div>
<div class="sidebar_innner">インナー</div>
</div>

48 ：Name_Not_Found：2021/04/18(日) 00:03:30.63 ID:???.net
>>26
誰がEDやねん

49 ：Name_Not_Found：2021/04/18(日) 01:27:03.18 ID:???.net
ライブラリ書き換えたらライブラリの意味ねーだろ

50 ：Name_Not_Found：2021/04/18(日) 01:55:09.51 ID:???.net
<ed>
<dt></dt>
<dt></dt>
<dt></dt>
</ed>

51 ：Name_Not_Found：2021/04/18(日) 05:08:58.57 ID:???.net
>>47
<div class="badge badge-secondary fs-3">サイドタイトル</div>
<div class="sidebar_innner">インナー</div>

みたいに繰り返し使うものを、
card みたいなコンポーネントにして、再利用できないかな？

52 ：Name_Not_Found：2021/04/18(日) 05:52:55.24 ID:LhubqxQ3.net
>>49
では、１つずつ置き換えるのが普通なんですか？
それほど手間ではないですけどね。

53 ：Name_Not_Found：2021/04/18(日) 06:09:24.14 ID:LhubqxQ3.net
>>51
回答どうも。
テンプレにするしかないんですね。

カードというのはなんですか？検索しても出てこなかったです。

54 ：Name_Not_Found：2021/04/18(日) 06:35:37.16 ID:???.net
bootstrapやめてフルスクラッチでやってみろよ
そうしたらbootstrapの意味がわかるから

55 ：Name_Not_Found：2021/04/18(日) 08:39:02.40 ID:???.net
>>53
諦めるの早すぎて草

56 ：Name_Not_Found：2021/04/18(日) 12:32:42.31 ID:???.net
bootstrapの意味…小回りが利かないとかかな

57 ：Name_Not_Found：2021/04/18(日) 14:11:43.89 ID:LhubqxQ3.net
>>55そこまで必要性はないのではないでしょうか？
>>54
フルスクラッチはやってましたが、レスポンシブ部分を使おうかなと

装飾も出来るだけbootstrapにしないと、整わないのでは？

58 ：Name_Not_Found：2021/04/18(日) 19:23:18.40 ID:???.net
>>57
cssはHTMLとデザインを分けるというのはわかると思うけど、
元来はクラス名が文字や余白の大きさを示すものではないんだわ
bootstrapは効率のためそうしているけど、そうなったらbootstrapを使い始めたら意味がわかりながら使いこなせるはず

59 ：Name_Not_Found：2021/04/19(月) 06:21:08.92 ID:jI2dkiGZ.net
>>58
bootstrapではクラス名がそのままCSSの内容を表しますよね
これってデメリットにならないんでしょうか？
これによるメリットがよくわからんのですが

60 ：Name_Not_Found：2021/04/19(月) 06:41:31.66 ID:???.net
>>59
良く気付いたな
昔はNGだったけど、効率よく金儲けするために数を捌くにはメリットがあるってこった。
もう教えることは無くなってしまった、達者でな。

61 ：Name_Not_Found：2021/04/19(月) 07:22:04.82 ID:???.net
本来、クラス名は意味や役割で命名すべきなんだが
フレームワーク側では使う側がどんな意味や役割を与えるかわからんからな

62 ：Name_Not_Found：2021/04/19(月) 08:59:58.24 ID:???.net
>>58,59
20年くらい前から
「右にあるからright」というクラス名を使うべきではない、なぜならスタイルの内容を変えて左にしたら意味不になるからだって論調あるけど

あんまり意味ないと思うよ
クラスもIDもただの識別子でしかないんだから

63 ：Name_Not_Found：2021/04/19(月) 10:11:43.89 ID:???.net
>>62
そんな論陣には
「スタイルを左にするならcssの中を変える阿呆。leftクラスを作ってタグのclass属性を変えろ」
と答えるようにしてる

64 ：Name_Not_Found：2021/04/19(月) 12:22:10.80 ID:???.net
mb10でマージントップ10pxとか、普通に使ってた
ただ、スタイルシートは分かれてたけど

65 ：Name_Not_Found：2021/04/19(月) 12:28:11.61 ID:???.net
>>62
そんな「テレビ買ったらNHK映るから今は持ってなくても料金払えや」みたいな言い分は納得いかんな

66 ：Name_Not_Found：2021/04/19(月) 12:43:15.25 ID:jI2dkiGZ.net
クラス名はつまり変数みたいなもんですよね
bootstrapだと同じ内容の変数を何度も定義してるようなもんじゃないですか？

これのメリットってなんですかね

67 ：Name_Not_Found：2021/04/19(月) 16:17:11.31 ID:???.net
同じ内容の変数を定義する必要がない

68 ：Name_Not_Found：2021/04/19(月) 16:55:04.18 ID:???.net
.right{ froat: right; }

これに文句言ってたおじさんは
当時のCSSのメーリングリストで

.derecho{ froat: right; }
.haki{ froat: right; }
.migi{ froat: right; }

とかはスルーして
破綻してんじゃんって突っ込まれてた思い出

69 ：Name_Not_Found：2021/04/19(月) 17:55:39.70 ID:???.net
bootstrapなんか使ってるからいかんのだよ

70 ：Name_Not_Found：2021/04/19(月) 18:54:34.75 ID:???.net
たしかに
bootstrapを飲んでも飲まれるなとは言ったものだ

71 ：Name_Not_Found：2021/04/19(月) 20:29:45.57 ID:???.net
メリットがわからないうちは使う必要もないだろうしな

72 ：Name_Not_Found：2021/04/19(月) 23:00:37.49 ID:???.net
だからスクラッチでやれっていってんの
フルスクラッチでやってたらぶち当たる問題にたいして
bootstrap便利だなと感じる事ができるようになる
さらに使ってくとbootstrap不便だなってなってBEMの方が楽では？となって
さらにやってると結局自分でルール作る方が楽
に落ち着く

73 ：Name_Not_Found：2021/04/19(月) 23:04:38.78 ID:???.net
フルスクラッチでぶち当たる問題ってなんだ？

74 ：Name_Not_Found：2021/04/19(月) 23:44:56.20 ID:???.net
>>73
「やべぇ、複数クラス組み合わした方が楽かも知んねぇ」ってなる

75 ：Name_Not_Found：2021/04/20(火) 03:06:47.43 ID:???.net
bootstrapがセンス悪いのはその通り
正しい答えはsass（scss）を使うこと

cssはクラス名であって属性名じゃない
bootstrapは属性名になってる
例えばボタンのlargeとか

sassを使うとその属性が名前に抽象化される
bootstrapのセンスの悪さに気づいたら
上級者への仲間入り

76 ：Name_Not_Found：2021/04/20(火) 05:22:31.78 ID:???.net
>>75
なんか次元の違うものを並べて比較されるとムズムズする

77 ：Name_Not_Found：2021/04/20(火) 05:50:49.87 ID:???.net
クラス名を意味や役割で付けると、
名前を考える時間・見返し時間が増える

2つの物を見返して、一致してる事を確かめるのが、人間には難しい。
左右に同じ文書を置いて、内容が一致してるかどうかとか

それでクラス名に、red とか使うようになった。
即座に色がわかるから、イメージしやすい

78 ：Name_Not_Found：2021/04/20(火) 06:01:28.05 ID:???.net
>>77
Back to the 1995やね
サイトのデザインも一周回ってシンプルだし
Netscape Navigatorは天国から喜んでいるだろう

79 ：Name_Not_Found：2021/04/20(火) 07:14:41.78 ID:???.net
>>75
いやbootstrapはsass製のcssフレームワークなんだけど…
まさかそんなことも知らないでそんなトンチンカンなこと言ってるの？

80 ：Name_Not_Found：2021/04/20(火) 07:16:34.30 ID:???.net
プログラミングの世界には難問が２つある。
キャッシュの不活化、名前付け、そしてオフバイワンエラーだ。

81 ：Name_Not_Found：2021/04/20(火) 10:22:06.59 ID:???.net
> それでクラス名に、red とか使うようになった。
> 即座に色がわかるから、イメージしやすい
redで赤といっても原色に限らず赤っぽいとかやや暗い赤とか複数出てくると思うがそういう場合はどう付けるんだ？

82 ：Name_Not_Found：2021/04/20(火) 10:48:07.34 ID:???.net
好きにすればいいんじゃね
クラス名をredとつけたいときは、たいていアラート的なとこだから
なんも考えてないf00だろうと思うけど

83 ：Name_Not_Found：2021/04/20(火) 10:48:47.91 ID:???.net
.red {
color: red;
background: red;
}

84 ：Name_Not_Found：2021/04/20(火) 10:50:09.98 ID:???.net
見えねーだろw

85 ：Name_Not_Found：2021/04/20(火) 11:58:07.80 ID:???.net
>>80
みっつじゃねーか

86 ：Name_Not_Found：2021/04/20(火) 13:45:42.47 ID:O8zbMO7e.net
bootsrapでml-1というクラスを一括変更したい場合、どうすべきなんでしょうか
cssのコアファイルをいじるのはよろしくないし、意味がないんですよね。

87 ：Name_Not_Found：2021/04/20(火) 14:17:55.19 ID:???.net
>>86
bootstrapのクラスは、上書きしたり、調整したりすること前提だぞ
色々と勘違いしている気がする

88 ：Name_Not_Found：2021/04/20(火) 17:18:48.12 ID:???.net
>>85
釣られていて草

89 ：Name_Not_Found：2021/04/20(火) 17:20:50.64 ID:???.net
>>86
君bootstrapやめて、缶詰工場とかで単純作業した方が良いよ
柔軟性が無い馬鹿だから

90 ：Name_Not_Found：2021/04/20(火) 17:43:54.13 ID:???.net
>>86
手っ取り早いのは
自分のCSSで上書きすることよ

んでファイルが増えるのが嫌だったら
Bootstrapのソースのscssファイルとってきて
パーシャルで上書きすれば良いよ

そうすりゃいつでも元に戻せるし

91 ：Name_Not_Found：2021/04/20(火) 19:05:03.69 ID:???.net
>>85
それがオフバイワンエラーだ！
勉強になったなｗ

92 ：Name_Not_Found：2021/04/20(火) 19:17:05.85 ID:???.net
最近はあんまり言わんのかも知れんな
開発ツールも親切だし
開発の仕方、手順も手厚いから
off by oneが個人の手元以外で起こらなくなってるんだろうな

93 ：Name_Not_Found：2021/04/20(火) 21:17:06.24 ID:O8zbMO7e.net
スマホ対応ってbootstrapなくても大丈夫でしょうか？
難しくなければbootstrapやめようかな。

他にメリットあれば教えてや

94 ：Name_Not_Found：2021/04/20(火) 21:52:02.44 ID:???.net
うちはbootstrap使ってないけどモバイルファーストチェック通ってるよ

95 ：Name_Not_Found：2021/04/20(火) 22:43:32.10 ID:???.net
質問です。
CSSを本格的に勉強しようとしています。
（※今まではCMSを使ってCMSの範疇でレイアウト調整していました。）

bootstrapをスタートに始めるべきでしょうか。それとも純粋なcssから勉強を始めるべきでしょうか。
親は「別にbootstrapなくてもwebサイト作れる。勉強するなら純粋なCSSから始めるべき。」
と言いますが、信用してもいいんでしょうか…

96 ：Name_Not_Found：2021/04/20(火) 23:12:56.91 ID:???.net
もっと親を信じてあげて…

97 ：Name_Not_Found：2021/04/20(火) 23:16:20.06 ID:???.net
css分かってた方がいいと思うけど
bootstrap必要になったとき何やればいいか理解しやすいんじゃないかな
あと今TailwindCSSの方が流行ってるらしい

98 ：Name_Not_Found：2021/04/21(水) 01:10:08.64 ID:???.net
そのうち親に反抗してbootstrapに走るから

99 ：Name_Not_Found：2021/04/21(水) 01:11:24.39 ID:???.net
>>93
CSSファイルがシンプルになる

100 ：Name_Not_Found：2021/04/21(水) 01:38:53.70 ID:???.net
bootstrap最大の利点は、世界で一番使われているCSSフレームワークって点なわけで
個人開発だと自分ルールで書いても問題ないから、利点を感じにくいんだよな

101 ：Name_Not_Found：2021/04/21(水) 06:00:57.34 ID:d9bWNTMu.net
>>99
やっぱそのへんの対応って面倒なもんでしょうかね
スマホといっても幅は色々だろうし

目的はスマホ対応と、あと、デザインを整えたいってことですね

102 ：Name_Not_Found：2021/04/21(水) 06:58:16.19 ID:???.net
>>101
俺の管理しているサイトはbootstrap無いおかげで
40000行超えたぞ、別に編集は苦じゃないけどさ

103 ：Name_Not_Found：2021/04/21(水) 07:07:02.26 ID:???.net
>>100
世界でと言うならもう一番じゃないよ。
https://2020.stateofcss.com/
和訳：
https://coliss.com/articles/build-websites/operation/css/the-state-of-css-2020.html

フレームワークは2020年で大きな変動がありました。Tailwind CSSが1位になり、Bootstrapは大きく順位を落としています。

Tailwind CSS: 87%
PureCSS: 71%
Bulma: 61%
Ant Design: 60%
Materialize CSS: 53%
ちなみに、Bootstrapは48%、Foundationは31%です。

104 ：Name_Not_Found：2021/04/21(水) 12:13:16.99 ID:???.net
>>101
そういうのはこの辺チェックしてれば大体わかる

CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ
https://coliss.com/articles/build-websites/operation/css/media-query-cheat-sheet.html

105 ：Name_Not_Found：2021/04/21(水) 14:05:58.30 ID:d9bWNTMu.net
>>102
何にそんなに使うんですかね

106 ：Name_Not_Found：2021/04/21(水) 14:08:15.13 ID:d9bWNTMu.net
>>104
デバイスの幅というのは統一された基準ってのはないんでしょうか？
https://getbootstrap.jp/docs/5.0/layout/grid/
例えばbootstrapのグリッドシステムだと、スマホを想定した幅は576pxになっているようです。

この辺の対応にメリットがあるということですかね。
自分で作るの大変すか？

107 ：Name_Not_Found：2021/04/21(水) 14:20:55.36 ID:???.net
>>103
内容は興味深かったから感謝だけど、それは
アンケートに回答するような意識高い系の開発者達が、2020年時点でどれを使ってるかって集計結果な

例えばjQueryを使ってるかって尋ねられれば、もう使ってないって答える人が多いけど、
世界的にはWebサイトの77%以上で使われてるのと一緒で
Bootstrapは単独で22%あるんだから、tailwindに抜かされる日なんてこないよ
tailwindを愛用している私が言うんだから間違いない

108 ：Name_Not_Found：2021/04/21(水) 14:44:06.79 ID:???.net
Bootstrap は、有名な会社だし、誰かの日本語文書もあるから

Ruby on Rails でも使う人が多い。
フロントを知らないサーバー側の人が、レスポンシブ対応するのに簡単だから

float など、CSS の直書きは難しい。
主に、CSSの素人が使う

109 ：Name_Not_Found：2021/04/21(水) 14:47:23.51 ID:???.net
>>106
今はピクセルパーフェクトってのは無く大体この辺という感じで組めばいい

110 ：Name_Not_Found：2021/04/21(水) 15:16:37.25 ID:???.net
推奨ＮＧワード： Ruby
推奨ＮＧワード： Rails

111 ：Name_Not_Found：2021/04/21(水) 19:15:09.43 ID:???.net
>>109
ついついピクセルパーフェクトになってしまうけど
今風なざっくりデザインだとどこに気をつければならないの？
flexで間隔をブラウザに任せるとか？

112 ：Name_Not_Found：2021/04/22(木) 03:15:34.03 ID:???.net
>>109
なんでそんな面倒なことするのん？
いちいちCSS書くときに「こんなもんかな？」って考えるの無駄な手間かけてまで

113 ：Name_Not_Found：2021/04/22(木) 06:31:07.99 ID:0FtHOxMb.net
>>109
基準は何ピクセルなんでしょうか？
pc版とスマホ版の２つだけでいいんですが、境界線はどこかなーと

これさえ自分でやればbootstrapは必要ないんじゃないですかね

114 ：Name_Not_Found：2021/04/22(木) 06:42:17.36 ID:???.net
>>113
そろそろ自分で調べたら？

115 ：Name_Not_Found：2021/04/22(木) 07:22:24.41 ID:???.net
>>113
ピケセルで考えるのやめた方がいいんでない？

画面幅は100vwなんだよ
スマホ用の大きさの単位は全部vwにすれば
どんな画面幅のスマホでも全部同じになる

116 ：Name_Not_Found：2021/04/22(木) 14:15:34.82 ID:0FtHOxMb.net
>>115
VWというのを調べてみます
でもbootstrap使ったほうが楽ですか？

117 ：Name_Not_Found：2021/04/22(木) 15:13:49.93 ID:???.net
これまでbootstrap使ってきた人には楽だよ。過去の知識通用するもん。
過去のしがらみ全くない新規が今から採用するメリットあるかと言われたらうーん…
素のCSSやって面倒なこと増えてきたらtailwind使って楽するのが覚えること少なくていいと思うけどな。

118 ：Name_Not_Found：2021/04/22(木) 15:13:53.40 ID:???.net
>>116
次元の違うものを並べられても困る

vwってのは単位
%がは親要素の幅を100とした単�位なのに対し
vwは画面の幅を100とした単位なので
スマホみたいに画面幅が変わるデバイスと相性がいい

BootstrapやBulmaてのは、若干暴論だけど
デザインにさほどこだわりのない人が
手軽にそれっぽい見た目を得るためのフレームワーク

勘違いされがちだけどフレームワークは
自分で作れない人を助けてくれるマジックワンドではないよ
あくまで、できる人が楽をするためのツール

119 ：Name_Not_Found：2021/04/22(木) 15:17:52.82 ID:???.net
んでフレームワークてのはCSSに限らず
そのフレームワークが想定しているケースから逸脱すると、むしろ使う方が面倒なことになりがち

使わない理由のひとつとして「デザインがBootstrap臭くなるから」というのが良くあるのはそのため

なので、CSSフレームワークなら
まずCSS自体を習得して、その上で
そのフレームワークの理念を理解して使うのが必須だよ

120 ：Name_Not_Found：2021/04/22(木) 15:20:48.33 ID:06YdjJOf.net
>>115
どのスマホでも同じ表示に描写にしたいならvwよりviewportを500pxとかに固定にしてpxでデザインする方が楽という結論に至ったわ
最初はinitial-scale=1じゃないのに抵抗あったがモバイルフレンドリーテストは普通にクリアできたし気にし過ぎだったかも
initial-scale=1はどんな大きさのスマホでもテキストが見やすいようにってことなんだろうけど日本だとみんな同じような大きさのスマホ使ってるしinitial-scale=1にこだわることはなかったわ

121 ：Name_Not_Found：2021/04/22(木) 15:24:11.05 ID:06YdjJOf.net
width=device-widthとinitial-scale=1のセットだったわ

122 ：Name_Not_Found：2021/04/22(木) 17:05:17.76 ID:???.net
>>120
目から鱗の方法論だわｗｗｗ

123 ：Name_Not_Found：2021/04/22(木) 17:10:06.25 ID:???.net
>>120
サンプル見てみたい

124 ：Name_Not_Found：2021/04/22(木) 21:03:54.60 ID:???.net
device-widthを500にしたら
initial-scaleは機種ごとに計算しなきゃならんのではないか？

125 ：Name_Not_Found：2021/04/22(木) 21:46:04.00 ID:AWIxkNBw.net
meta viewportをwidth=500にするだけ
initial scaleはなくてOK

ちなみにviewportをJavaScriptでスマホのみwidth=500、それ以外はwidth=1000とかにしておくとスマホのブラウザの「PC用サイトを表示」が使えるようになるからユーザー目線でもメリットあると思う

126 ：Name_Not_Found：2021/04/22(木) 22:30:18.46 ID:???.net
vw は、画像などが拡大できない。
小さくて見えない場合に、拡大していっても見えないまま

Line のトップページがそう

どれだけ拡大しても、中央の画像が小さいまま。
画面の8割ぐらいは、画像の外の黒色のまま

見えない・読めないので、ほぼ情報の価値がないページw

127 ：Name_Not_Found：2021/04/22(木) 22:45:23.19 ID:???.net
へぇ、その辺りは詳しくないから勉強になるわ
未だに表示解像度周りの挙動はよくわからん

128 ：Name_Not_Found：2021/04/23(金) 00:04:17.37 ID:???.net
潔くていいなぁ

129 ：Name_Not_Found：2021/04/23(金) 00:10:36.91 ID:???.net
画像はmaxwidthでpx指定とwidthで%指定の併用じゃあかんの？

130 ：Name_Not_Found：2021/04/23(金) 01:09:16.46 ID:???.net
スマホのサイズもう規格つくって固定にしてくれよ…

131 ：Name_Not_Found：2021/04/23(金) 01:14:55.45 ID:???.net
スマホで困ることはほぼないけどな
むしろタブレット対応が辛い

132 ：Name_Not_Found：2021/04/23(金) 01:39:54.88 ID:???.net
タブレットは横900くらいにすれば大体対応だから楽だろ
スマホほど10～20pxの違いの影響なんてないし

133 ：Name_Not_Found：2021/04/23(金) 02:27:47.93 ID:???.net
タブレットは縦持ちと横持ち両方考慮せんといかんしね
スマホだとほぼ縦持ちオンリーと考えて差し支えないと思うけど

134 ：Name_Not_Found：2021/04/23(金) 04:58:40.63 ID:???.net
>>126
拡大ってピンチのこと？
たぶんそれはvw関係ないよ

135 ：Name_Not_Found：2021/04/23(金) 06:54:56.69 ID:YDpw44rm.net
bootstrapなしでレスポンシブつくったほうがいいのかな？
あと、８の倍数がやりやすいらしいねbootstrap

136 ：Name_Not_Found：2021/04/23(金) 07:06:04.50 ID:???.net
>>135
まずはbootstrapでさっくり作って、重くて嫌になったら普通のSCSSに切り替えたら？
ぶっちゃけ何で作るかより、デザインとコンテンツの方が重要だし
そこで悩むのは時間の無駄よ

137 ：Name_Not_Found：2021/04/23(金) 07:07:00.27 ID:???.net
>>135
良いか悪いかは自分で決めることだよ
作る人とサイトの数だけ答えは違う

なんかずっと拘ってるみたいだけど
いいじゃん、とりあえずやってみれば

別にそれで失敗しても特に問題はねえし
ここで質問に答えてる人達に
失敗したことない奴なんて一人もいねえよ

138 ：Name_Not_Found：2021/04/23(金) 07:33:00.13 ID:???.net
>>135
コード書かずにグダグダする奴にろくな奴いない

139 ：Name_Not_Found：2021/04/23(金) 08:02:30.60 ID:???.net
大手でもタブレットとPCで同じ表示にしているの見るにタブレットとPCは分けなくていいんじゃない

140 ：Name_Not_Found：2021/04/23(金) 08:07:14.81 ID:???.net
>>139
うちの客も
タブレットはPC表示ってのが多いな

ただこの辺こだわり出すと
幅のメディアクエリだけでは対応しきれなくなってくることもある

141 ：Name_Not_Found：2021/04/23(金) 11:03:46.20 ID:???.net
>>135
一連のレスを見てると、お前さんはどうもフレームワークというものが
どういうものかをまだよく分かってないように見える

142 ：Name_Not_Found：2021/04/23(金) 17:21:14.85 ID:???.net
いつまで釣り相手するんだよ、入れ食いじゃねーか

143 ：Name_Not_Found：2021/04/24(土) 22:29:47.89 ID:???.net
CSS初学者が体系的にCSSを学習するのに役立つ書籍・サイトなどを教えて下さいm(_ _)m

144 ：Name_Not_Found：2021/04/24(土) 23:23:00.73 ID:???.net
なんでもいいから書籍でHTML/CSSの書き方覚えたりいくつかプロパティ覚えればいいんじゃないかな
良く使われてるようなパーツ作ってみるとかカードやらアコーディオンやらモーダルなど
後はダサくてもいいから自分で配置していくとFlexboxかgridを嫌でも調べながらやる事になるだろうし

145 ：Name_Not_Found：2021/04/25(日) 00:34:29.48 ID:???.net
>>143
https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps

146 ：Name_Not_Found：2021/04/25(日) 00:39:25.13 ID:???.net
スマホでスクロールしたら、上からヘッダーが「ｽｩ」って降りてくるあれは
transition？

147 ：Name_Not_Found：2021/04/25(日) 01:23:47.41 ID:???.net
>>146
JavaScriptである程度スクロールしたらヘッダーにクラス付けてして表示してるpageYOffset使えば簡単
cssでは表示されてない時はposition:fixedでtopをマイナスにしてブラウザ表示の外にしてクラスがついた時にtopを0で出てくる感じ
スムーズに動かしたいなら当然transition

148 ：Name_Not_Found：2021/04/25(日) 03:58:28.70 ID:???.net
>>147
サンクス、やはりどれだけスクロールしたかは
jQueryとかのjs使わないとダメよね。

元のヘッダーをクローンして表示する方法とかあるのね、色々できるんだなぁ

149 ：Name_Not_Found：2021/04/25(日) 04:15:32.75 ID:???.net
>>148
別にjQはいらんよ
初心者にちょうどいい難易度だと思うよ

150 ：Name_Not_Found：2021/04/25(日) 04:51:04.15 ID:???.net
>>149
jsで2つのy位置を比較して、差が基準値以上、以下になったら
cssプロパティを変更したらtransition付なら「ｽｩ」って感じかな、と妄想してみる

151 ：Name_Not_Found：2021/04/25(日) 04:56:34.49 ID:???.net
>>150
scrollTopが設定した閾値を超えているか否かで
要素のクラス付け外し
という関数作っといてonScrollで発火
アニメーションはCSS

てやるのが昔ながらの定番だと思う

152 ：Name_Not_Found：2021/04/25(日) 05:03:33.22 ID:???.net
>>151
ありがとう、感謝です。
しかしこういう常時、値をチェックするようなjsだとブラウザが重くならないのかな
今日日の性能なら無いに等しいぐらい？

153 ：Name_Not_Found：2021/04/25(日) 07:00:37.57 ID:m+Dk3WCt.net
チェックボックスについて教えてください。
チェックボックスA
チェックボックスB
チェックボックスC

チェックボックスAにチェックいた場合、チェックボックスBとCは
チェックできなくすることは可能でしょうか？

154 ：Name_Not_Found：2021/04/25(日) 07:18:21.61 ID:???.net
>>153
チェックボックス ラジオボタンのように
で検索

でも正直なこと言えば、なにその糞UI

155 ：Name_Not_Found：2021/04/25(日) 07:23:16.29 ID:???.net
たし蟹

156 ：Name_Not_Found：2021/04/25(日) 07:27:34.82 ID:m+Dk3WCt.net
ありがとうございます。
表の並び替えがあるのですが、
並び替えのルールをチェックボックスで指定しています。
なので、どれかにチェック入れたら、他はチェック入らなくしたかったです。
でもUIとして使いずらいですかね？
webデザインされる方はどのようにしていますか？

日付順(最新が上)
日付順(最新が下)
逆さ読みでA-Z
逆さ読みでZ-A
A-Z
Z-A

157 ：Name_Not_Found：2021/04/25(日) 07:41:03.82 ID:???.net
それならグレーアウトすれば良いぞ

158 ：143：2021/04/25(日) 09:03:13.63 ID:???.net
>>144-145
ありがとうございます！
そのサイト見ながら自分で色々書いてみます

159 ：Name_Not_Found：2021/04/25(日) 12:28:01.05 ID:???.net
>>152
頻繁に、関数が呼ばれるのが気になるなら、

Lo-dash のdebounce, throttle などで、
何秒に1回しか呼ばれないようにすれば？

0.1秒に1回しか呼ばれないとか、制限を付ける

160 ：Name_Not_Found：2021/04/25(日) 12:33:18.43 ID:???.net
>>152
scrollイベント起きた時だけだから常時ではないしscrollTopの値チェックするだけだからたいした負荷ではない
IE除外できるならintersectionObserver使う方法もあるよ

161 ：Name_Not_Found：2021/04/25(日) 12:42:05.43 ID:???.net
>>156
ラジオボタンかselectの複数行表示じゃダメなんですか？
他のにチェック入らなくしたら他に変えたい時は選択済みのチェック外してからでないと選べない罠

162 ：Name_Not_Found：2021/04/25(日) 12:47:57.43 ID:???.net
今のスマホとかPCのスペックならその程度の処理誤差でしょ
SVGも昔は負荷がとか言われてたけど今は普通にあちこちで使われてるし
そんなもんよりターゲティング系のweb広告の方がよほど負荷かかってると思うよ

163 ：Name_Not_Found：2021/04/25(日) 13:45:11.59 ID:???.net
>>156
HTMLはラジオボタンで作って
見た目だけチェックボックスにすればいいじゃない

164 ：Name_Not_Found：2021/04/25(日) 14:02:24.67 ID:???.net
>>143
コリスをチェックしてれば大体わかるっしょ
SNSでフォローしとけばTLで更新情報は随時流れてくるし

165 ：Name_Not_Found：2021/04/25(日) 15:13:47.65 ID:m+Dk3WCt.net
157
161
163
並び替えは、あくまでオプションなので、選択しなくてもいいため
チェックボタンで、1つチェック入れると他はグレーアウトにします。

ちなみに、趣味でWebサイト作っているため、仕事は関係ないです。
お金稼ぐwebサイトとかでもなく、あくまで趣味です。

166 ：Name_Not_Found：2021/04/25(日) 15:45:04.52 ID:???.net
それなら並び替え無しを選択肢に入れればいいのでは？

167 ：Name_Not_Found：2021/04/25(日) 15:50:31.90 ID:m+Dk3WCt.net
並び替えなしがデフォルトで選択されている感じですね。
これはあまり好みじゃないです。

168 ：Name_Not_Found：2021/04/25(日) 16:11:12.55 ID:???.net
デフォルトも登録順なり何からのソートされたデータになるから
ソート機能つけるなら1個初期値を選択状態にして
ラジオボタンかselectが多いんじゃいかな？
好みのチェックボックス＋グレー処理もjs併用で出来るだろうけどそこに時間を割くほどのメリットがないからその方式はあまり見ない
とはいえ好みがあるならそれを形にする方向でいいんじゃ？
グレーアウトにする方法は、いざ他のソートに切り替えたいって時にどういう動きを想定してる？
毎回チェックボックスを外して新しく選択し直すのか、一度チェック入れると変更不可なのか
どちらも利便性はあまりないと思う

一般的にはどういうのが多いって聞き方をしておいて
好みじゃないですって返答はなんかずれてると思う

169 ：Name_Not_Found：2021/04/25(日) 16:34:10.02 ID:???.net
>>165
であれば、ラジオもチェックも
本来の機能では賄えないので自作が必要

ボタンとなるオブジェクト
・画面上での要素
・[メソッド] チェックされる機能
・[メソッド] チェックはずされる機能

複数のボタンを統括するオブジェクト
・複数のボタンオブジェクトを保持
・[メソッド] ひとつのボタンを渡されたら、その他のチェックを外す機能

この二つを作ってやるのが定番だと思う

ボタンの画面上での要素は何でもいい
inputでもいいし、aやdivで手作りしてもいい
んでchangeやclickイベントを拾って
そのボタンオブジェクトを、統括オブジェクトのメソッドに渡せばいい

170 ：Name_Not_Found：2021/04/25(日) 16:38:27.42 ID:???.net
>>169 つづき
チェック解除機能を忘れてたすまん

ボタンオブジェクトはこう
・画面上での要素の参照
・現在のチェック状態
・[メソッド] チェックされる機能
・[メソッド] チェックはずされる機能

んで要素のchangeかclickイベントで
まず現在のチェック状態を見て
チェックされてたら、外すメソッド発動
チェックされてなかったら、統括オブジェクトのメソッドに自分のオブジェクトを渡す

こんな感じ

171 ：Name_Not_Found：2021/04/25(日) 20:48:10.69 ID:m+Dk3WCt.net
>>168
すいません。
>>169
ありがとうございます。

172 ：Name_Not_Found：2021/04/25(日) 21:11:18.90 ID:???.net
これ、selectで終わる話じゃないの？
なんでcheckboxで実装？

173 ：Name_Not_Found：2021/04/25(日) 21:25:48.64 ID:???.net
そんな詰まらない独自性をやりたがる顧客っているんだよ
下手に忠告すると逆ギレして営業に文句付けてくるから、忠告なんてするもんじゃないんだよな

174 ：Name_Not_Found：2021/04/25(日) 21:35:44.04 ID:???.net
他には複数選択できて、一つ選択するとパタパタパタと矛盾する項目が不活性になるUIはあった
仕様書とテスト項目は丸投げで作るのがめんどかった
提出しても顧客担当者はレビューもしやしねぇ
「あ、これ直してね。悪いけど期日は変えられないから」
(思いだし怒り

175 ：Name_Not_Found：2021/04/26(月) 12:02:02.26 ID:???.net
>>172
UI/UXの観点では
selectは一覧性に欠ける
radioは選択解除ができない
という弱点があるので
それほど間違った要望でもないとは思う

176 ：Name_Not_Found：2021/04/26(月) 12:29:02.72 ID:???.net
UIとしてはタグクラウドの選択みたいなのになるんやな

177 ：Name_Not_Found：2021/04/26(月) 13:36:14.28 ID:???.net
>>143
「HTML5 & CSS3デザイン 現場の新標準ガイド（第2版）」
「CSS設計完全ガイド　～詳細解説＋実践的モジュール集」

あと体系的ではないけども、エビスコムっていう著者（企画制作会社）の書籍が
読みやすくて実際に手を動かしながら学べるのが多くておすすめ
https://ebisu.com/

Kindle Unlimited（月額980円の電子書籍読み放題サブスク）に入れば
エビスコムのコーディング・プラクティスブックっていうシリーズが1～6まで無料で全部読める
他にもWEBデザイン関連の書籍や雑誌バックナンバーも充実してるからコスパは最強

178 ：Name_Not_Found：2021/04/26(月) 19:09:36.58 ID:???.net
HTMLファイルに
<form method='post' action='sample.php'>
<input type='text' name='a'>
<input type='submit' value='送信'>
</form>
とUTF-8で記述して、(sample.phpは独自のPHPファイル名です)
XAMPPのフォルダ内に置き、クロムで開いたら、
送信の部分が文字化けしてしまいました
どう対処したらよいでしょうか？

179 ：Name_Not_Found：2021/04/26(月) 19:38:05.25 ID:???.net
>>178
head内の頭の方に
<meta charset="UTF-8">
を書く

180 ：Name_Not_Found：2021/04/26(月) 20:34:43.21 ID:???.net
<meta charset="UTF-8">は不要
HTML5のエンコーディングはUTF-8と決まってる

181 ：Name_Not_Found：2021/04/26(月) 20:58:08.08 ID:???.net
>>180
HTML ガイドライン - MDN プロジェクト | MDN
https://developer.mozilla.org/ja/docs/MDN/Guidelines/Code_guidelines/HTML#document_language

182 ：Name_Not_Found：2021/04/26(月) 21:21:05.41 ID:???.net
>>180
統一仕様ｲｲﾈ!

183 ：Name_Not_Found：2021/04/26(月) 21:33:58.09 ID:???.net
>>181
まず大前提としてMDNに書いてあることは個人レベルの意見だから
誰もが参考にするべきものではない

そして、翻訳に罠がある
「UTF-8 を使用しないというとても明白な理由がない限りは使用するべきです」
これを見ると、まるでUTF-8を使うならmeta charsetを書けと言っているように見えるが
原文のニュアンス的には単にエンコーディングはUTF-8を使え、他は使うなと言っているに過ぎない

そして脆弱性を持ったIEを利用してる人なんて最早いない
例えば最も著名なiframe+UTF-7の脆弱性は10年前のパッチで塞がれてるし
今のIEに特別に気をつけないといけないような脆弱性は残っていない
（そもそもIEはCSPに殆ど対応していなかったり、
一定の脆弱性は残っているのでcharset云々という話にはならない）

ということはわざわざ指定する必要はないということはアホでも分かる

184 ：Name_Not_Found：2021/04/26(月) 21:37:23.81 ID:???.net
必要性はともかく、>>178を解決する答えにはなってないわな

185 ：Name_Not_Found：2021/04/26(月) 21:38:56.44 ID:???.net
しかしmetaかhttpヘッダにcharset書いてないと実際に化ける事があるわけだが？

186 ：Name_Not_Found：2021/04/26(月) 21:51:38.89 ID:???.net
実際とは？

187 ：Name_Not_Found：2021/04/26(月) 22:11:04.15 ID:???.net
HTML LSだとcharsetにはutf8しか指定できないし
指定しなかったらutf8になるので不要ということだろう
一方HTML4時代のブラウザを相手にするなら必要
とは言えそれなら<meta http-equiv="Content-Type" ......
と書かないといけない

188 ：Name_Not_Found：2021/04/26(月) 22:31:28.09 ID:???.net
VSCode のemmet で、! と入力すると、charset="UTF-8" がある

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>

<body></body>
</html>

189 ：Name_Not_Found：2021/04/26(月) 23:37:52.30 ID:???.net
お題目とか定型文みたいなもんで、無いよりはあった方が良いって程度のもんなんだから
とりあえず書いとけよ

190 ：Name_Not_Found：2021/04/26(月) 23:58:26.03 ID:???.net
無駄なものは省くってコーディングに限らず仕事の基本だと思うし
万が一これが必要な状況と環境になったとして
その環境じゃCSSもJSもそのサイトの機能がまともに機能しない可能性が高いとは思うが

191 ：Name_Not_Found：2021/04/27(火) 00:01:11.82 ID:???.net
>>188
> <meta http-equiv="X-UA-Compatible" content="IE=edge">

これもいらないらしいね

192 ：Name_Not_Found：2021/04/27(火) 00:06:49.46 ID:???.net
無駄かどうかは分からない
HTMLファイルがBOMから始まっておらず、HTTPなどで指定もされない場合は
metaタグで指定する必要がある

193 ：Name_Not_Found：2021/04/27(火) 00:17:27.88 ID:???.net
まぁ、偉そうに要らねぇだの講釈垂れてないで
解決のための現実的な回答してやれや

194 ：Name_Not_Found：2021/04/27(火) 00:22:19.12 ID:???.net
議論を遮ってすまんが

>>178
formタグにaccept-charsetでUTF-8設定すればいいんでね？

195 ：Name_Not_Found：2021/04/27(火) 00:22:34.28 ID:???.net
>>193
これ以上の現実的な回答をするのは現実的に無理だということは分かってるだろう？
質問者が提供する情報が少なすぎるもの
そういうレベルの質問者に対してあれこれ想像して色々な方向性示してもどうせ付いて来れないでしょ？
それこそ「無駄」というもの
とりあえず質問者が>>179試して、だめだったらより詳しい状況とともにそれを報告しないと前に進まないでしょ

196 ：178：2021/04/27(火) 00:40:00.16 ID:???.net
私のために多くのレス数を割いて議論して下さりありがとうございます
meta charset … を入力したらあっさり解消しました
お手数を掛けてすいませんでしたm(_ _)m

197 ：Name_Not_Found：2021/04/27(火) 01:01:29.40 ID:???.net
doctypeの指定によってはブラウザが後方互換モードになるからな。
そうするとhtml4時代の記述が有効に動いたりする。

198 ：Name_Not_Found：2021/04/27(火) 02:59:01.27 ID:???.net
>>196
いいってことよ
誰でも最初は初心者だわ
おまいさんも来年は教える側になるだろう

199 ：Name_Not_Found：2021/04/27(火) 03:39:37.00 ID:???.net
>>195
お前みたいなのは、回答者には向いてないので
別に答えなくていいよ

200 ：Name_Not_Found：2021/04/27(火) 06:47:09.76 ID:???.net
>>199
俺の言ったとおり解決したじゃないか
君はオナニーが好きみたいだけど
それはチラ裏にお願いね

201 ：Name_Not_Found：2021/04/27(火) 06:54:38.57 ID:???.net
>>200
負け惜しみ乙
顔と尻が真っ赤だぜお猿さんww

202 ：Name_Not_Found：2021/04/27(火) 09:29:55.44 ID:???.net
ブーメランおみごと！

203 ：Name_Not_Found：2021/04/27(火) 12:25:41.47 ID:???.net
>>183
>そして脆弱性を持ったIEを利用してる人なんて最早いない

そうやって、ただの願望を
あたかも事実であるかのように書いたりするから
頑張って書いた長文の信頼性も薄まるんだよ

204 ：Name_Not_Found：2021/04/27(火) 12:52:27.35 ID:???.net
そう思うのならどんな脆弱性を持ったIEがどれくらいの割合で使われているのか示してくれ
それともMDNに書いてあることは無条件に一語一句信じてそれ以外は一切受け付けませんってことかな?

205 ：Name_Not_Found：2021/04/27(火) 13:01:43.98 ID:???.net
>>204
1人でもいることを示せばいいのん？
なぜそんな負け戦を挑むの？

206 ：Name_Not_Found：2021/04/27(火) 13:45:36.03 ID:???.net
最近の実装に合わせた最新版HTMLテンプレート、基本構造に使用するすべての要素とその役割も解説
https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html

207 ：Name_Not_Found：2021/04/27(火) 14:07:11.89 ID:???.net
<meta charset="UTF-8">は不要とか言ってたくせに
直後にしっかり解決してて草

208 ：Name_Not_Found：2021/04/27(火) 14:08:35.02 ID:???.net
それな

209 ：Name_Not_Found：2021/04/27(火) 14:13:54.46 ID:???.net
たとえ仕様がどうなっていようが、
昔はIE、今はSafariが無視して勝手な実装するから、仕様ではこうなっているからOKというのは危険な考え。

210 ：Name_Not_Found：2021/04/27(火) 14:20:16.05 ID:???.net
chrome使ってて文字化けするっていう質問者に対して
IEなんて使ってる奴いねーし、charsetなんてｲﾗﾈ
とか言ってたのに、しっかりcharset指定して解決したのを
どう説明するのか興味ある

211 ：Name_Not_Found：2021/04/27(火) 14:46:12.07 ID:???.net
>>206 >>209
仕様だからcharset要らないとか言ってる奴のサイトは
他所で文字化けしまくってる疑惑

212 ：Name_Not_Found：2021/04/27(火) 16:33:12.39 ID:???.net
>>203
https://gs.statcounter.com/browser-market-share
常識

213 ：Name_Not_Found：2021/04/27(火) 18:00:30.09 ID:???.net
IEシェア0.73%もあって利用者が居るって証明にしかなってなくて草

214 ：Name_Not_Found：2021/04/27(火) 18:00:54.91 ID:???.net
>>212
3.32%もいるじゃん

215 ：Name_Not_Found：2021/04/27(火) 18:08:20.65 ID:???.net
デスクトップに絞ったらFirefoxより多いて・・・日本どうなってんだよ
https://gs.statcounter.com/browser-market-share/desktop/japan

216 ：Name_Not_Found：2021/04/27(火) 19:40:11.71 ID:???.net
>>210
逆だと思う
Chrome使ってるのにmetaタグがないと上手く動かないという方が問題
HTTPヘッダで別のエンコード指定してるとか
BOM無しのUTF8を使っててたまたま出だしが悪いか
何れにせよ原因は他にあるからそっちを解決しないと「たまたま上手く」行ってるだけだと思う

217 ：Name_Not_Found：2021/04/27(火) 19:55:40.16 ID:OtETBF1c.net
IEにエンコーディング周りで特異な脆弱性が合ったのってIE7まででしょ
IE8以降でセキュリティパッチ当ててれば大まかな脆弱性は塞がれてる
そりゃCSPに対応してなかったりと根本的にサイトの隙に付け入られる可能性は大きいが、
だからこそそこを気にするのならその前にすべきことが５万と出てくる

例えるなら、昔はノーヘル禿げ頭だったが今は一応簡易ヘルメットを付けてるバイク乗り
そりゃフルフェイスにして欲しいがもう変えたくないというので、こいつ危ないねとなるのは分かる
でもmetaタグを書くのは育毛したら安全になるんじゃねというようなもの
禿げ頭のときならアフロにすれば何倍も安全になるだろうが
ヘルメットをかぶっている今ではそんなの気持ちの問題にしかならない
そういうこと

218 ：Name_Not_Found：2021/04/27(火) 20:15:13.55 ID:???.net
禿げは気持ちの問題ではない
物理的な問題だ

219 ：Name_Not_Found：2021/04/27(火) 20:54:52.57 ID:???.net
確かに
禿は絶対に育毛したほうがいい

220 ：Name_Not_Found：2021/04/27(火) 21:26:28.31 ID:???.net
https://i.imgur.com/5SKF0pd.jpg

221 ：Name_Not_Found：2021/04/27(火) 22:48:56.74 ID:???.net
>>216
>>206にあるcharset無いとsafariでも化けるっていうのに対しては
どういう屁理屈を捏ねてcharset不要っていう主張を正当化するの？

222 ：Name_Not_Found：2021/04/27(火) 22:50:37.16 ID:???.net
結局、御託を垂れ流すだけで、質問者から大した情報も引き出せず
質問者にとって有益な解決方法を、何ら提示出来なかったっていうね
現実に対処出来ない頭でっかちの無能が何か言ってる、って印象しか
残らなかったわ

223 ：質問者：2021/04/27(火) 23:32:45.34 ID:???.net
このままだと何か悪いので、出来る限り私の情報をお伝えしたいと思います

使ってるOSはWindows10です
本に書いてある通りに、前述のHTMLファイル(input.html)を作成しました
htmlヘッダやbodyヘッダなどは書いていません　あれだけです
そのファイルを、xamppフォルダ内のhtdocsフォルダ内に、
1つ新しくフォルダ(phpbook)を作ってそこに置きました
使ったエディタはVSCodeで、UTF-8に設定して記述しました

PHPファイルは、半角数字の1が送られてきたら、echoでメッセージを表示する
という単純なものです　<?PHPで始め、?>で終わります(コードは割愛します)
同じくVSCodeで作成し、上のHTMLファイルと同じフォルダに置きました

そしてChromeで、http://localhost/phpbook/input.htmlと入力し
HTMLファイルを開くと、「送信」の部分が文字化けしてしまったというわけです

224 ：Name_Not_Found：2021/04/28(水) 00:18:20.25 ID:???.net
DOCTYPE宣言すらしてなかったってことなら、勝手にhtml5だと判断した
前提からして間違ってたって話だな

225 ：Name_Not_Found：2021/04/28(水) 00:29:47.64 ID:???.net
>>223
php.iniとか修正した？
「xampp 文字化け」とかで検索してみるといいかも

226 ：Name_Not_Found：2021/04/28(水) 03:27:25.56 ID:AZ2+1CY0.net
やっぱりここの人ってIE対応求められて咽び泣いたりするの？

227 ：Name_Not_Found：2021/04/28(水) 06:23:42.25 ID:???.net
>>215
歴史と文化と国民性の問題

諸説あるけど
俺はそう思ってる

228 ：Name_Not_Found：2021/04/28(水) 07:05:04.31 ID:???.net
実はIEは官公庁や銀行などの一部では使われてる
本来はセキュリティを一番に考えないとダメな職種なのに
ActiveXで作っちゃって、更にリプレースの予算をケチったため

229 ：Name_Not_Found：2021/04/28(水) 07:35:40.89 ID:???.net
IE使ってても外部へのアクセスを適切に遮断していれば、大した問題にもならないけどな
え？どこにでもアクセス出来るって？

230 ：Name_Not_Found：2021/04/28(水) 09:26:15.21 ID:???.net
>>228
実はもクソもついこの間だってコロナ給付金サイトがIE専用で炎上してたろ

231 ：Name_Not_Found：2021/04/28(水) 10:42:47.71 ID:???.net
>>230
炎上したのはまともなセキュリティ教育を受けた一般人は誰も使ってないIEでしか動かない化石ページを作ったからだろ
今は(まともな知性があれば)誰も使ってないという論旨は正しい

232 ：Name_Not_Found：2021/04/28(水) 11:25:17.05 ID:???.net
>>230
当時、既にEdgeからIEを起動するオプションも消えているくらいで、
どうやってIE起動するのかわざわざググった覚えがあるわ

233 ：Name_Not_Found：2021/04/28(水) 12:59:41.40 ID:???.net
超大手サイトですら対応してないどころか明確に利用できないから他のブラウザ使えって表示するブラウザに対応するなんて無駄な労力過ぎる
そんな無駄な労力を誰かが割くから未だに日本ではそれなりにシェアを持ってしまっているわけだがそのコストを他に割く方がよほど有益だわ

234 ：Name_Not_Found：2021/04/28(水) 14:02:30.31 ID:???.net
対応デバイスや対応ブラウザを好きに選べる立場で制作するなら
好きにすればいいだけだし

235 ：Name_Not_Found：2021/04/28(水) 14:53:16.94 ID:???.net
ワンマン社長の某企業のサイト作ってて
社長の奥さんの
「うちのテレビのブラウザで見られないじゃないの」
に対応したことを思い出せば
IEなんて可愛いもんだ

236 ：Name_Not_Found：2021/04/28(水) 15:45:00.46 ID:???.net
あ、でもワンマン社長の話は意外と含蓄あるかも
年寄りはパソコンもスマホも使えない人はおそらく多い
そんな人がネットにアクセスするとしたらテレビのブラウザは重要な選択肢
顧客層がテレビのブラウザを使う層ならば対応するのは理にかなってる

237 ：223：2021/04/28(水) 16:49:24.21 ID:???.net
>>225
手を加えてないです

ありがとうございます

238 ：Name_Not_Found：2021/04/28(水) 21:12:35.12 ID:???.net
テレビじゃ操作しにくいじゃんね、、

しかし今時のテレビは
いざというときさくっとモニター代わりに出来て
いいな

239 ：Name_Not_Found：2021/04/28(水) 21:58:35.24 ID:???.net
NetFrontでも見れないとね

240 ：Name_Not_Found：2021/04/28(水) 22:08:20.73 ID:???.net
<input type="hidden" value="あああ" id="aaa">のように
inputタグのnameは省略して書かなくてもIDで区別すれば問題ないですか？

241 ：Name_Not_Found：2021/04/28(水) 23:42:25.18 ID:???.net
送信formで使うんだったらそういうわけにもいかないと思うけど

242 ：Name_Not_Found：2021/04/28(水) 23:43:55.66 ID:???.net
submitしてもaction先には伝わらなくね

243 ：Name_Not_Found：2021/04/29(木) 03:59:32.14 ID:???.net
学校や図書館においてあるPCも古いの多いからな
あと老人たちは壊れるまで家電は買い換えないから
高齢者の家のPCはいまだにwin98が現役だったり恐ろしいことがある

244 ：Name_Not_Found：2021/04/29(木) 11:19:24.05 ID:???.net
今どき素のsubmitは使わずにfetchやらでやり取りするだろうからnameはもういらないかもね

245 ：Name_Not_Found：2021/04/29(木) 13:59:41.05 ID:???.net
ェェェェエェェェ

246 ：Name_Not_Found：2021/05/01(土) 11:55:02.67 ID:???.net
ol li で○数字が出せるように、li:before で調整しましてそれは上手くいきました。

しかし、ol li の中で一部ul liの箇条書き設定している部分のli にまで　ol li と同じ効果になってしまいます。

どうやったら入れ子状態になっているul liだけ別に指定すれば良いでしょうか？

247 ：Name_Not_Found：2021/05/01(土) 12:07:11.34 ID:???.net
>>246
ol > li
ul > li
ol ul > li

248 ：246：2021/05/01(土) 12:07:23.64 ID:???.net
自己解決できました

249 ：Name_Not_Found：2021/05/01(土) 15:20:21.88 ID:???.net
classをつけろーー！

250 ：Name_Not_Found：2021/05/10(月) 06:03:37.76 ID:???.net
ハンバーガーを押すと、ページが少し暗くなって横からニュッと出てきて、暗くなった部分を押すと解除したことになるけど、

あれってcss的には100vw 100vh、opacity0.8みたいなのを重ねて、
その上にメニューのdivを用意して横に動かしているの？

251 ：Name_Not_Found：2021/05/10(月) 07:32:50.00 ID:???.net
>>250
まあそんな感じ
出方が違うだけで
ライトボックス的なやつとやってることは変わらん

252 ：Name_Not_Found：2021/05/10(月) 10:10:42.06 ID:???.net
>>251
ライトボックス懐かしい
あれと同じものと言われても作れと言われてもできぬ・・・

253 ：Name_Not_Found：2021/05/10(月) 10:52:10.53 ID:???.net
>>250
dialogタグでええんちゃいます

254 ：Name_Not_Found：2021/05/10(月) 15:28:44.31 ID:???.net
>>252
どこまで多機能にするかにもよるけど
わりと脱初心者向けな気もするけどね

おっちゃんも若造の頃
何個もあれこれ試行錯誤して作った思い出

255 ：Name_Not_Found：2021/05/10(月) 16:59:32.30 ID:???.net
自分はfancy box派だった

256 ：Name_Not_Found：2021/05/10(月) 17:03:23.93 ID:???.net
固定のHTMLを表示するだけなら簡単
ライブラリダウンロードしてくるより楽

257 ：Name_Not_Found：2021/05/10(月) 18:44:50.81 ID:???.net
>>253
safariがNG

258 ：Name_Not_Found：2021/05/10(月) 20:02:29.49 ID:???.net
ローディング画面って使用頻度少ないですか？
試しに作ってみてるけど皆はアニメーションストックしてあったりします？

259 ：Name_Not_Found：2021/05/10(月) 20:14:24.21 ID:???.net
利用者目線で
むちゃくちゃ腹が立つ
途中で閉じる

260 ：Name_Not_Found：2021/05/10(月) 20:58:16.64 ID:???.net
ローディングってサイト作成業者のオナだわな
クライアントからすればカッケーってことになるけど、邪魔以外の何者でもない

261 ：Name_Not_Found：2021/05/10(月) 21:10:28.99 ID:???.net
そんなの作るくらいならサイト軽くしろや！って事ですか
自分もユーザー視点じゃ邪魔だとは思うので
一応実装は出来る程度の知識でいいですかね

262 ：Name_Not_Found：2021/05/10(月) 22:03:46.10 ID:???.net
>>258
演出としての場合は少ないなあ
本当にうまくいけばそれなりの効果はあるんだろうけど

逆に、APIの返りとか画像のロード待ちであることが
ユーザに伝わらないと困るケースでは
絶対必要だと思ってる

んで過去に作ったのは纏めてあるけど
使いまわすことはあまりなくて
都度都度作ってる気もする

263 ：Name_Not_Found：2021/05/10(月) 22:49:17.18 ID:???.net
>>262
ありがとうございます
ここなんかは演出っぽいですよね
https://supercub-anime.com/

とりあえず3Dでアニメーションするのを書くのが苦手なので試しにいくつか作ってみたいと思います

264 ：Name_Not_Found：2021/05/11(火) 00:33:36.27 ID:???.net
このてのアニメのオフィシャルサイトの
動画を先に表示させるの
なんかのテンプレかってくらいどこも同じことする
うっとおしいことこの上ない
あれ喜んでる人間っているのか？

265 ：Name_Not_Found：2021/05/11(火) 00:34:47.31 ID:???.net
アニメとか映画のサイトって
中身ないくせに重いのばっかりだよな
見るやつほとんどいないからだろうけど

266 ：Name_Not_Found：2021/05/11(火) 14:57:33.46 ID:???.net
>>264
代理店

267 ：Name_Not_Found：2021/05/12(水) 04:05:59.68 ID:???.net
興味ある人が見るためのサイトだし問題ないんじゃないか？

268 ：Name_Not_Found：2021/05/14(金) 23:48:03.94 ID:???.net
PCサイトをレスポンシブに変えることはできるんだけど、
htmlとcssを新規で作る時って、PCファーストとスマホファーストって難易度はどっちが高い？
そもそもスマホファーストの定義ってPCで見た時に横幅いっぱいに広がること？

横幅変えた時に動的に変わるのって％だと思うけど、かなり難しそう
ブレイクポイントは580pxぐらいの1つにする予定です

269 ：Name_Not_Found：2021/05/15(土) 00:20:37.57 ID:???.net
難易度というより、面倒臭い度ならスマホ

%だけじゃなくvwとかも勉強しといた方がいいよ

270 ：Name_Not_Found：2021/05/15(土) 01:19:26.45 ID:???.net
>>268
動的に変えるという幻想は早く捨てるんだ
スマホの画面はどの機種もみんな幅100vwなんだ

271 ：Name_Not_Found：2021/05/15(土) 01:26:07.45 ID:???.net
>>270
スマホは大丈夫なんだけど、
PCやタブレット、スマホ横だと幅がバラバラだから難しそうだな・・
50vw, 25vwとかで区切りはいいけど、ピクセルパーフェクトばっかりやってきたので
余白とかの扱い方が不慣れです。
やっぱ幅960pxぐらいでdiv.container作った方が製作はやりやすいのかなと

272 ：Name_Not_Found：2021/05/15(土) 03:00:01.97 ID:???.net
1stビューで横幅いっぱい写真の場合
写真のサイズもネックになってくるから
PCの方がめんどい

273 ：Name_Not_Found：2021/05/15(土) 04:02:30.31 ID:???.net
>>271
単位全部vwでいいじゃない
どんなタブレットで見ても同じ見た目

274 ：Name_Not_Found：2021/05/15(土) 05:17:26.33 ID:???.net
PCでvw効かないブラウザってある？
ネットスケープナビゲーターぐらい？

275 ：Name_Not_Found：2021/05/15(土) 07:59:36.57 ID:???.net
単位全部vmって横幅100px固定でデザインするのと数値一緒じゃね？
ならもっと横幅大きくとってpxでやった方がデザインしやすいし小数点減るだろう

276 ：Name_Not_Found：2021/05/15(土) 09:02:24.61 ID:???.net
>>271
今の時代にピクセルパーフェクトという概念は捨てるんだ

277 ：Name_Not_Found：2021/05/15(土) 09:05:33.48 ID:???.net
>>271
このアプリ使うと視覚的にわかりやすくなって作りやすいぞ

Responsively App
https://responsively.app/

278 ：Name_Not_Found：2021/05/15(土) 11:42:27.09 ID:???.net
PCサイト全盛のときもそうだったけど結局リキッドデザインではなく固定幅デザインに行き着くんだな
vmでデザインするってのはその流れなんだろう
となるとピクセルパーフェクトの時代が来ているとも言える
デバイスの多様化でPCサイトのときほど厳格ではないにしてもね
作る方からしたら面倒な話ではある

279 ：Name_Not_Found：2021/05/15(土) 12:26:43.81 ID:???.net
vmってなに
vminとvmaxの総称みたいなもの？

280 ：Name_Not_Found：2021/05/15(土) 15:42:31.15 ID:???.net
ここで聞いていいもんかわかりませんが、
.htaccessファイル自体のキャッシュを強制的に、またはキャッシュ期限を設ける方法ってあるのでしょうか？

いまはブラウザ側で強制的にクリアしてる状態ですが、
なにか訪問者側のブラウザに残っているhtaccessを更新させる方法があれば教えていただけると助かります。

よろしくお願いします

281 ：Name_Not_Found：2021/05/15(土) 15:44:01.96 ID:???.net
ブラウザが側で強制的にというのは、手動でスーパーリロードをしてるという事です。

282 ：Name_Not_Found：2021/05/15(土) 16:08:12.98 ID:???.net
>>280
htaccessによってブラウザキャッシュを制御するって話じゃなくて？
ブラウザにhtaccessは保存されないし、htaccess自体はサーバーを制御するファイルで
ブラウザで自由に更新できたりはしないよ？

.htaccess（ブラウザキャッシュ高速化・無効化）制御による表示速度UP
ttps://lpeg.info/html/htaccess_cache.html

283 ：Name_Not_Found：2021/05/15(土) 19:42:35.53 ID:???.net
>>282
そうなんですね！

一応コンテンツ内の画像やスクリプトなどはキャッシュさせたりするためにhtaccessに書いて設定してます。

ただhtaccessであれこれ設定したり、リダイレクトのルールとかいじってると、
設定が合ってるハズなのに挙動がおかしくなって効かなくなったりするんです
そういう時ブラウザのキャッシュをクリアすると直るので設定が残ってるのかと思ってました

ありがとう御座いました！

284 ：Name_Not_Found：2021/05/15(土) 23:33:37.78 ID:Hoyqnjsg.net
質問があります。
以下のデザインカンプでコーディングの練習をしています
https://xd.adobe.com/spec/5ad2e100-1381-4ec0-5e45-2ec7bb5f66a2-2ce3/grid/

↓コーディングサンプル
https://shptomoya.github.io/shiro/

デザインカンプでは、ページの「Concept」や「Work」のページに対する左右の余白は160pxとなっています。
ただ、コーディングサンプルだと、左右の余白は160px以上あるように見えます。

「Concept」や「Work」自体の横幅は960pxとなっていますが、こういったデザインの場合、
コーディングはデザインの左右の余白よりも横幅のほうに合わせてレイアウトするものなのでしょうか？

コーディングする場合、以下の二つが考えられると思いますが、どちらが正しいのでしょうか？
①max-widthを960pxに指定し、左右の余白は気にせず中央寄せにする（コーディングサンプルと同じ？）
②横幅960pxの指定はせずに、相対単位で160px付近になるように左右の余白を指定（この場合、「Concept」や「Work」は横幅960pxにならずに横に広がりすぎる？）

285 ：Name_Not_Found：2021/05/16(日) 00:06:37.82 ID:???.net
このデザインカンプ見て余白をpx指定して本体のwidthがautoとか
普通は考えないんじゃね？

286 ：Name_Not_Found：2021/05/16(日) 00:09:59.61 ID:???.net
なんかすごいな、人のデザインカンプ見てたら
コードで書ける気、全然しないわ・・

287 ：Name_Not_Found：2021/05/16(日) 00:18:19.74 ID:???.net
画面横1280pxの時両端に160pxの余白があるだけでしょう
重要なのはコンテンツ表示する960pxの方
当り前にブラウザ広げたら余白は増えますサンプルもそうなっている

288 ：Name_Not_Found：2021/05/16(日) 03:46:05.05 ID:???.net
デザイン還付ってなんや・・・

289 ：Name_Not_Found：2021/05/16(日) 03:55:11.75 ID:???.net
カンプの見方の問題だな
んなの素人にはわからんだろ

この場合は中のコンテンツ幅が
960pxって指定あるならそれがメイン
んで中央寄せ
一番上の花の背景写真
中間の所々にあるグレー背景と
一番下の花の背景写真が
ブラウザがどんなに横に広がってもMAXになるように
って解釈

仕事の場合だいたいはコーディングする前に
デザイナーから指定あるか指定ないなら聞くかするもんなので
まーわからなくても気にすんな

290 ：Name_Not_Found：2021/05/16(日) 04:22:28.02 ID:???.net
>>268
レスポンシブ対応なら、Bootstrap を使えば？

>>280
Ruby on Rails では、ファイル名に、MD5 みたいなハッシュ値を付ける。
ファイルを変更したら、ハッシュ値も変わり、ファイル名も変わるので、
ちゃんと更新後のファイルがダウンロードされる

ファイルの内容が変更されているのに、ファイル名が同じだと、
古いキャッシュの方が使われるから、ダメ

ファイル名が同じ場合は、常にダウンロードさせるような設定があったように思う

291 ：Name_Not_Found：2021/05/16(日) 04:44:22.57 ID:???.net
レイルズのコード書けない
レイルズ布教厨ってこんなところにも出没するんだ

292 ：Name_Not_Found：2021/05/16(日) 05:13:52.29 ID:???.net
cssで間延びされたぼやけた背景画像がどうも好きになれない
解像度多めの画像用意しとけYo!

293 ：Name_Not_Found：2021/05/16(日) 14:59:32.74 ID:???.net
<input type="file">について質問させてください

①画像Aを選択
②画像Aを差し替えようと再度INPUTボタンを押す
③思い留まり画像を選択せずに、キャンセルでファイル選択画面を閉じる

と上記のような操作をした場合も
input内の①で選択した画像データがリセットされるようです
この動きは仕様でしょうか？

また、③の操作を行っても画像Aを保持したい場合は
①のタイミングで別途用意したinput等へデータを仮置する対応で相違ないでしょうか？

294 ：Name_Not_Found：2021/05/16(日) 15:01:38.47 ID:kQzDm+jz.net
>>293です
すみません、ID表示操作ミスりました

295 ：Name_Not_Found：2021/05/16(日) 16:33:07.01 ID:???.net
float: left　で浮かせたコンテンツを解除させるクリアフィックスの下のコードは、別にどこに記載しても良いんですよね？


.clearfix::after {
content: " ";
display: block;
clear: both;
}

296 ：Name_Not_Found：2021/05/16(日) 16:47:46.09 ID:???.net
floatさせるコンテンツの親やぞ

297 ：Name_Not_Found：2021/05/16(日) 18:16:45.72 ID:???.net
>>293
前者は気にしたことなかったけど
後者は出来ないんじゃないか？
File API使ってやるのが手っ取り早いと思う

298 ：Name_Not_Found：2021/05/16(日) 18:17:40.67 ID:???.net
とりあえず全てのタグに class="clearfix" をつけて叱られた良い想い出

299 ：Name_Not_Found：2021/05/16(日) 19:43:13.02 ID:???.net
<ul>タグの中の<li>のコンテンツを横並びにしたい時は
昔→float: left;
今→display: flex;

で良いですか？

300 ：Name_Not_Found：2021/05/16(日) 19:52:34.67 ID:???.net
好きな方を使えばいい

301 ：Name_Not_Found：2021/05/16(日) 20:00:08.57 ID:???.net
選択肢が多いと迷うのはわかるけど今は恵まれているかと思うの

302 ：Name_Not_Found：2021/05/16(日) 20:34:13.64 ID:???.net
かなりマシになりましたがタイピングミスが多いです（汗
タグやプロパティはエディターでわかるけどダブルクォーテーションを片方忘れてたり
集中力を上げるしか無いですか？慣れると減りますか？

303 ：Name_Not_Found：2021/05/16(日) 20:37:24.07 ID:???.net
エディターで補完してくれるよVScodeとかAtomとか

304 ：Name_Not_Found：2021/05/16(日) 20:52:25.98 ID:???.net
>>293
2 の「再度INPUTボタンを押す」という状態がよく分からない

画像A を、1度でも確定させましたか？
単なる仮入力なら、むしろそれが保存・表示されると面倒

ユーザーからすると、取り消した処理なのに、
Aが保存されてしまったかもと思って、Aを削除する処理を探さないといけなくなる

単にキャンセルできないのは、面倒。
キャンセルしたいのに、保存されてしまったかも知れない、という事を考えるのが面倒

空白に戻らないのが、トラブルになる

305 ：Name_Not_Found：2021/05/16(日) 23:05:38.09 ID:???.net
>>302
クォートやカッコの類は
閉じてから中身を書くってのが割と昔からある定番

306 ：293：2021/05/16(日) 23:49:14.23 ID:kQzDm+jz.net
>>297,304
言われて確かに！と腑に落ちました、リセット機能がないと困りますね

今実装したいのがファイル選択後に画像をそのままアップロードではなく
画像トリミング(cropper.js)→プレビュー→アップロードと一部加工する関係で
画像再選択をキャンセルしても画像データが一部残るのが基本(取消ボタン必須)になっており、その認識が抜けてました

現時点でキャンセル時に消えて困るのが参照元の画像名のみなので
そこだけ仮置で対応するようにしてみます
助言ありがとうございました

307 ：Name_Not_Found：2021/05/17(月) 02:14:20.96 ID:???.net
>>299
display: inline-blockもある

308 ：Name_Not_Found：2021/05/17(月) 11:57:21.36 ID:???.net
inline-blockでやる時は
コードの</li>と<li>の間に
改行やインデントが挟まらないように気をつけよ

309 ：Name_Not_Found：2021/05/17(月) 18:08:13.44 ID:???.net
canvasに表示されている画像それぞれにリンクを貼るにはどうやればいいんですか？

310 ：Name_Not_Found：2021/05/17(月) 21:48:13.29 ID:???.net
canvas要素でclickイベントを拾って
event.clientX/Yでクリックされた座標拾って
そこに対象となるオブジェクトがあれば
window.openでリンク

311 ：Name_Not_Found：2021/05/18(火) 00:18:18.66 ID:???.net
canvasってなに？

312 ：Name_Not_Found：2021/05/18(火) 02:52:27.68 ID:???.net
JSで中身描ける<img>みたいなもの

313 ：Name_Not_Found：2021/05/18(火) 03:00:06.33 ID:???.net
>>277
ごめん、検査入院してた。
亀レスだけど本当にありがてぇ、使いこなせるとは思わないけど、
実行してびっくりした、インパクトすごいなこれ。

>>278
時代はぐるぐる回ってるよな、そんな感じする

314 ：Name_Not_Found：2021/05/18(火) 07:52:09.29 ID:???.net
>>309
<div><a href="url"></a></div>を重ねるとかは？

315 ：Name_Not_Found：2021/05/20(木) 07:23:09.99 ID:???.net
超朗報！
マイクロソフトが Internet Explorer 11 の提供終了を発表！
2022年6月15日公式サポートを終了

316 ：Name_Not_Found：2021/05/20(木) 08:41:20.64 ID:???.net
あと1年の辛抱か

317 ：Name_Not_Found：2021/05/20(木) 09:11:12.12 ID:???.net
何度目のサポート終了なんだよ…

318 ：Name_Not_Found：2021/05/20(木) 10:42:31.42 ID:???.net
2週に1度ウイルス感染する客が、
IE11使うのをやめてくれないわ

319 ：Name_Not_Found：2021/05/22(土) 21:18:46.02 ID:???.net
ホームページの特定の領域だけ可視化するようにすることはできますか？
例えばホームページの座標(100,100)幅300高さ200の領域にある
部分だけを見えるようにしてそれ以外は隠すということです

320 ：Name_Not_Found：2021/05/22(土) 21:35:43.29 ID:???.net
できるけどdevツールとかで解除されるで

321 ：Name_Not_Found：2021/05/22(土) 22:59:52.09 ID:???.net
body{width:300px;height:200px;position:fixed;left:100px;top:1000px;overflow:scroll;}
令和にやることではない

322 ：Name_Not_Found：2021/05/23(日) 00:15:27.71 ID:???.net
質問にあたって目的の開示って大事よな。
もしかしてintro.jsみたいなことやりたいのかもしれん。

323 ：Name_Not_Found：2021/05/23(日) 03:54:11.63 ID:???.net
IEの次はSafariが目の敵にされそう

324 ：Name_Not_Found：2021/05/23(日) 05:27:05.78 ID:???.net
<input type="text" style="position:absolute; transform:translate(200px, 200px)">

こんな感じにtranslateを当てた入力欄で、テキスト選択しながら左の欄外までドラッグすると範囲選択が途切れるのって何か対処法ありますか？
バグっぽい挙動なのにニッチ過ぎるのかググっても提議すら出て来ないです

325 ：Name_Not_Found：2021/05/23(日) 05:41:46.66 ID:???.net
SafariつかってるやつはIEの次くらいに少ないし
windows使ってる奴らみたいにIEで見えるようにしろやってゴネる民度ではないので

326 ：Name_Not_Found：2021/05/23(日) 06:09:22.77 ID:???.net
iphoneガン無視かーい

327 ：Name_Not_Found：2021/05/23(日) 06:15:09.96 ID:???.net
iPhoneのSafariはPCと違って
仕様はほぼChromeとかわらんし
表示が崩れたり動かないとかないから
独自な変な仕様もないし

328 ：Name_Not_Found：2021/05/23(日) 07:32:24.15 ID:gYMuX4hH.net
質問です。

不正請求をしない整骨院を運営したいのですが、まっとうに運営すると健康保険の取扱いは完全に無いに等しいです。

健康保険の取扱いは原因の明らかな外傷性の骨折、脱臼、打撲、捻挫、挫傷（肉離れ）と、厚労省保険局医療課からの通知により限定されております。

しかしながら、はっきり事実を言うと大半の整骨院の健康保険請求が不正です。
これは会計検査院、保険者機能を推進する会（柔整問題研究会）、保険医協会等々の調査により立証されている事実です。

更に言うと柔道整複療養費の算定基準（医師で言うところの保険点数）は初診は別として1部位10割で610円です。仮に本当にケガにしか健康保険を使って請求していなかったとしても真面目に請求すると1部位10割610円の単価にしかなりません。

そんな単価では当然経営できないので3箇所4箇所5箇所とケガをしたことにして保険請求をするという行為が長年蔓延してきました。

極めて特殊な仕組みで一般人に分かり難い、政治絡み、昔は数が少なく目立たなかったということもあり、今まではお目こぼし的な側面が強かったのですが
近年のSNS社会の広がりで一般人の人にも仕組みが認知されつつあり、社会的なコンプライアンス意識の風潮も相まって、今ではあらゆる関連業界から袋叩きにあっています。

どうすれば整骨院（接骨院）で不正請求をせずに経営できますか？

329 ：Name_Not_Found：2021/05/23(日) 07:32:57.10 ID:gYMuX4hH.net
柔道整復師の不正請求にNO！

接骨院や整骨院での柔道整復師による施術を受ける場合、
※健康保険が使えるのは「骨折、脱臼、打撲、ねんざ」といった【ケガ】に限られていますが、
実際はさまざまな不正請求の実態が確認されています。

http://www.tosyoku.org/jusei_seikyu/
（動画あり）

330 ：Name_Not_Found：2021/05/23(日) 07:33:33.15 ID:gYMuX4hH.net
不正請求のやり方一覧
https://seikotsuin-keiei.com/trouble/356/
https://note.com/ig1992/n/n85773880b547
http://www.jiko110.com/topics/seikotuin.htm

331 ：Name_Not_Found：2021/05/23(日) 08:34:41.80 ID:???.net
<table style="width:400px;height:300px">の上にクリック用のdivで作った四角形を重ねて
複数置きたいんだけどtableからハミ出ないようにしたい。
１つ１つdivがtableからハミでないように座標や幅を調節するのはめんどくさいので
自動的にdivの端がtableから出ないやり方あったら教えてください

332 ：Name_Not_Found：2021/05/23(日) 10:39:28.90 ID:???.net
>>331
relativeとabsoluteでは無理？

333 ：Name_Not_Found：2021/05/23(日) 12:40:16.45 ID:???.net
>>332
それやってもだめでした。
もっと何やりたいかわかりやすく言うと
tableの上にランダムな位置にposition absoluteでdiv四角形を複数配置したくてそれはできたんだけど
divの四角形がtableからはみ出た部分だけカットされるようにしたいってことです

334 ：Name_Not_Found：2021/05/23(日) 13:30:00.41 ID:???.net
>>333
はみ出し要素のカットだけでいいなら overflow: hidden;
tdではなくtable自体の大枠が対象範囲の場合は
親要素に上記と合わせて display: inline-block; position: relative; でどうだろ？

はみ出し自体を防ぎたい場合は
大枠と浮き要素の大きさによっては多少レスポンシブの調整必要だけど
topとleftとtransform: translate(-XX%, -XX%);で%指定

335 ：Name_Not_Found：2021/05/23(日) 14:29:00.70 ID:???.net
>>327
どっちかっつーと逆じゃね？
iOSではChromeの中身がWebKitだからではなかろか

336 ：Name_Not_Found：2021/05/23(日) 14:43:56.42 ID:???.net
>>323
もうしてる

337 ：Name_Not_Found：2021/05/23(日) 21:43:48.56 ID:???.net
>>334
できました
ありがとう

338 ：３３７：2021/05/25(火) 00:23:00.65 ID:???.net
table内の上にあるdivのはみ出しを表示しないのはできたけど
canvasの上にあるdivはできませんでした。どうすればいいんですか？

<canvas width="400" height="300" style="border:Solid 10px #0000ff;overflow:hidden">
<div style="width:100px;height:500px;background:#ff0000;display:inline-block;position:relative;left:0px;top:0px"></div>
</canvas>

339 ：Name_Not_Found：2021/05/25(火) 15:35:59.20 ID:8KlsBycD.net
cssについて分からない事があるので質問させて下さい。
text-alignプロパティが適用されません。
初心者なので、どこが間違っているのか分からず
困っています。
一応こんな感じです。
（htmlファイル)https://d.kuku.lu/e54460461
(cssファイル)https://d.kuku.lu/b57628569
宜しくお願いします。

340 ：Name_Not_Found：2021/05/25(火) 15:45:02.79 ID:???.net
コードを画像にしてどうする・・・
ここにコード張って左上のセーブボタン押した後のURLを教えて
https://jsfiddle.net/

341 ：Name_Not_Found：2021/05/25(火) 16:39:44.21 ID:???.net
inlineというオチだったらどうしよう

342 ：Name_Not_Found：2021/05/25(火) 17:23:27.46 ID:???.net
>>339
text-alignの上のline-height行の最後のセミコロンが抜けてる

343 ：>>339：2021/05/26(水) 01:46:28.75 ID:fFtqp+v/.net
https://jsfiddle.net/32my7a5L/#&togetherjs=MEEb9Ovf2N

344 ：Name_Not_Found：2021/05/26(水) 02:44:27.35 ID:???.net
>>338
overflowを設定するのは親要素だよ
canvasの親要素が無いか、サイズが異なる場合は親となるdivを追加してoverflowとrelativeを設定
その子要素にcanvasとdivを同列で置いてみて

345 ：Name_Not_Found：2021/05/26(水) 04:27:45.69 ID:???.net
>>343
タグやCSSの括弧が閉じられてなかったり、セミコロンが抜けてたり、全角が混在してたり
とりあえずjsfiddle上でエラーが出てる部分を修正しよう

346 ：Name_Not_Found：2021/05/27(木) 12:43:51.87 ID:???.net
>>344
できました
ありがとう＾＾

347 ：Name_Not_Found：2021/05/27(木) 19:51:55.80 ID:ZvpBhBTv.net
レスポンシブデザインについて教えて下さい。
レスポンシブデザインでスマホ表示させる場合、画像も縮小されますが、縮小の場合は劣化しないのでしょうか？
画像処理ソフトで縮小しているわけではなく、スケーリングであれば無劣化なのでしょうか？

348 ：Name_Not_Found：2021/05/27(木) 20:00:42.65 ID:ZvpBhBTv.net
すみません
追加の質問です

コンテナをmargin autoにするとなぜ可変になるのでしょうか？
コンテナにwidth 1000pxを設定しているにも関わらずです。

349 ：Name_Not_Found：2021/05/27(木) 21:06:30.48 ID:ZvpBhBTv.net
https://www.aizulab.com/blog/css-flexbox-liquid-layout/
flex:1;とはどういう意味ですか？
ラッパーにdisplay:flex;を指定し、中の子要素１つ目に100px,もう1つにflex:1;を指定します
そうすると固定と可変になるのですが、1の意味がよくわからない
2にしても結果が変わらない

350 ：Name_Not_Found：2021/05/27(木) 22:37:11.02 ID:???.net
>>348
ならんやろ

351 ：Name_Not_Found：2021/05/27(木) 23:44:35.20 ID:???.net
>>349
そのリンク先に詳細解説してるリンクあるんだから、それぐらい読もう

flex - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex

352 ：Name_Not_Found：2021/05/28(金) 02:49:47.34 ID:???.net
htmlにyoutube動画を埋め込むには<body>の中にyoutubeの埋め込みコードをコピペするだけですか？
youtube動画の<iframe>から</iframe>をコピペして貼り付けても再生されません。
試しにバリデーションしてみると、「<IFRAME> に不明な属性 `ALLOW` が指定されています。」と出ます。
これは、どの様に修正すれば良いのでしょうか？
*jsfiddle上では何故か上手く機能します。
https://jsfiddle.net/p12onafk/1/

353 ：Name_Not_Found：2021/05/28(金) 13:08:18.47 ID:7ES5/F9i.net
>>351
読んでますけど、よくわからなかったです

354 ：Name_Not_Found：2021/05/28(金) 13:18:23.69 ID:???.net
>>352
埋め込み制限でfile:// urlからだとだめな動画なんじゃない？

355 ：Name_Not_Found：2021/05/28(金) 14:19:59.50 ID:???.net
>>353
ほんとぉ？

356 ：>>352：2021/05/28(金) 18:18:40.06 ID:???.net
>>354
色々試したのです、埋め込める動画と埋め込めない動画がある様です。
何でそうなっているのかは分かりませんが、埋め込めない動画を埋め込む事は可能なのでしょうか？

357 ：Name_Not_Found：2021/05/28(金) 18:58:07.56 ID:???.net
どうせローカルで再生しようとしてるんだろ？

358 ：Name_Not_Found：2021/05/28(金) 19:09:30.54 ID:???.net
ブラウザでローカルファイルを開いても、そこに埋め込んだYouTube動画は再生できない
埋め込み制限された動画は、YouTubeの「共有」で埋め込み用のタグは生成されないし
埋め込めても再生は出来ないので諦めましょう

359 ：>>352：2021/05/28(金) 20:14:07.37 ID:qbo5IHhf.net
>>357
ローカルファイルを埋め込む場合は<video>を使うんですよね？
それは出来ました。
>>358
そうですか、分かりました。

360 ：Name_Not_Found：2021/05/28(金) 20:24:49.10 ID:7ES5/F9i.net
>>355
i understand now about it.thank you african guy.

361 ：Name_Not_Found：2021/05/28(金) 20:41:32.81 ID:???.net
>>360
Good job.
I surprised that Even yellow fool monkey like you can understand it.

362 ：Name_Not_Found：2021/05/29(土) 14:58:25.50 ID:???.net
VSCode の拡張機能、open in browser では、ローカルファイル・アクセスだから、CORS 制限あり
file:///C:/Users/Owner/Documents/test.htm

一方、Live Server では、サーバーを立てているから、CORS にならない
http://127.0.0.1:5500/test.htm

同様に、コマンドプロンプト・PowerShell から、
1-liner で、Ruby で作られた遅いウェブサーバー、WEBrick を起動すると、
ruby -run -e httpd . -p 8080

これも、サーバー経由だから、CORS にならない
http://localhost:8080/test.htm

Ruby on Rails では、Node.js のwebpack-dev-server を使っている

363 ：Name_Not_Found：2021/05/29(土) 15:25:37.82 ID:???.net
>>353
これでも嫁

Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
ttps://parashuto.com/rriver/development/how-flex-item-width-is-calculated

364 ：Name_Not_Found：2021/05/30(日) 12:30:10.76 ID:wal/WiYr.net
https://developer.mozilla.org/ja/docs/Web/CSS/:empty#browser_compatibility
ブラウザーの互換性の箇所に書かれている数字はなんでしょうか？
chrome 1となっていますが、最初のバージョンから対応しているという意味になりますでしょうかな(´・ω

365 ：Name_Not_Found：2021/05/30(日) 14:06:51.93 ID:???.net
イエス

366 ：Name_Not_Found：2021/05/30(日) 19:36:50.20 ID:wal/WiYr.net
>>364
arigatou

367 ：Name_Not_Found：2021/05/31(月) 18:43:33.04 ID:qQ6wXCDd.net
http://newpuru.doorblog.jp/
このサイトのフィードってjavascriptのみで構築されているんでしょうか？
だってlivedoorブログのドメインなので、phpは使えないはずですす

368 ：Name_Not_Found：2021/05/31(月) 19:18:23.03 ID:???.net
今、書籍を見ながら仮のウェブページを作っています。
レスポンシブに対応させるべく、viewportの設定ををしています。
head内に下記のmeta タグを追加しましょうと書いてますが、head内ならどこに書いても構わないですか？

<meta name="viewport" content="width=device-width, initial-scale=1">

369 ：Name_Not_Found：2021/05/31(月) 19:35:44.02 ID:???.net
聞く前に手を動かせ、困ってから質問しろ

と、俺もここでよく言われたわ

370 ：Name_Not_Found：2021/05/31(月) 19:42:28.65 ID:???.net
>>368
構わんし
なんならinitial-scaleもいらん気もする
少なくとも自分は書かん

371 ：Name_Not_Found：2021/05/31(月) 19:44:35.71 ID:???.net
>>368
できるだけ早めに読み込まれるように、なるべく上の方に書け

372 ：368：2021/05/31(月) 19:50:09.49 ID:???.net
>>370
>>371
ありがとうございます

373 ：Name_Not_Found：2021/05/31(月) 19:56:27.03 ID:???.net
>>372
これでも嫁

最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
ttps://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html

374 ：Name_Not_Found：2021/06/01(火) 02:33:55.18 ID:???.net
そういやinitial-scaleとか書かなくなったなぁ

375 ：Name_Not_Found：2021/06/02(水) 02:22:52.89 ID:u9GtWXB2.net
html、cssの基本的な事は大体理解しました。
しょぼいhpくらいなら作れるようになりました。
そこで、もっとカッコいいhpを作りたいのですが、どの様な本を参考にしたら良いか
量が多すぎて分かりません。
お勧めの参考書があったら教えて下さい。

376 ：Name_Not_Found：2021/06/02(水) 03:30:32.51 ID:???.net
<section>
　<h2>
　　<div class="contentes">

<section>
　<div class="contentes">
　　<h2>

この2つ、いつも書き方が迷うんだけど
div.contentsってあったほうが良いの？

377 ：Name_Not_Found：2021/06/02(水) 03:32:29.16 ID:???.net
h2にdivは入れられません

378 ：Name_Not_Found：2021/06/02(水) 04:12:15.24 ID:???.net
え？まじで・・・
たしかに前者でいつもやってきたけど、
section枠の中にdiv枠作って・・見出し、ってのができないのか

379 ：Name_Not_Found：2021/06/02(水) 05:48:06.38 ID:???.net
contentsな

380 ：Name_Not_Found：2021/06/02(水) 06:47:47.41 ID:???.net
>>376
タグを閉じないのか？

381 ：Name_Not_Found：2021/06/02(水) 06:51:02.64 ID:???.net
>>375
まずどういうサイトを作りたいのか、プランを煮詰める

今ある知識で可能な範囲でサイトを組む

今ある知識ではできないことを洗い出す

自分に足りないことを調べる、勉強する

382 ：Name_Not_Found：2021/06/02(水) 08:34:42.65 ID:???.net
>>380
いや、あくまで出だしの差を書いただけだからタグは当然閉じるよ

383 ：Name_Not_Found：2021/06/02(水) 09:02:24.35 ID:???.net
displayとpositionが難しいでしゅ

384 ：Name_Not_Found：2021/06/02(水) 09:03:19.33 ID:???.net
>>376
div先だと文句言われるぞ

385 ：Name_Not_Found：2021/06/02(水) 09:43:43.46 ID:???.net
>>378
いやだから
h2の中にdivは入れられない
divの中にh2は入れられる
h2の中にdiv入れても表示はされるけどコードとして間違ってる
そういう時はh2の中にspan入れてdisplayをblockにするンだわ

386 ：Name_Not_Found：2021/06/02(水) 10:24:51.94 ID:???.net
htmlとcssの用語、タグの意味を体系的に図解してあるサイトはありますか？

ちなみに自分はプログラマで、htmlはいじりだしてから20年くらいになりますが、
今風のサイトを自分で作れるようになりたいんです。

387 ：Name_Not_Found：2021/06/02(水) 11:35:19.75 ID:cpLdM8tk.net
メインカラムとサイドバーの余白の指定ってどうしてますか？
pcとスマホのレスポンシブを考えた場合、margin-right:16px;みたいな、ピクシェルでの指定はしないほうがいいのでしょうか？
スタンダードを教えて下さい。

388 ：Name_Not_Found：2021/06/02(水) 11:47:53.71 ID:???.net
>>368
VSCode で、! と入力すると、emmet が働いて、以下のように展開される

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body></body>
</html>

389 ：Name_Not_Found：2021/06/02(水) 11:56:34.14 ID:cpLdM8tk.net
>>387
例えば自分は8の倍数ルールでデザインしているのですが、
この場合、余白をピクセル指定をしないと8の倍数とはならないわけですよね。

390 ：Name_Not_Found：2021/06/02(水) 13:20:47.00 ID:???.net
>>386
MDN

HTML
https://developer.mozilla.org/ja/docs/Web/HTML

CSS
https://developer.mozilla.org/ja/docs/Web/CSS

391 ：Name_Not_Found：2021/06/02(水) 14:11:46.77 ID:???.net
よく考えたら高解像度モニタが普及してきてブラウザ表示領域を縦長
例えば1280x1600にして使ってるような人もいると思うんだけど
この手の人を考えて書くことあります？
トップページを100vwx100vhで決め打ちしちゃうとき困ることもあると思うんだけど

392 ：Name_Not_Found：2021/06/02(水) 14:35:49.87 ID:???.net
>>391
無視してる

393 ：Name_Not_Found：2021/06/02(水) 15:08:34.83 ID:???.net
ガン無視だな

394 ：Name_Not_Found：2021/06/02(水) 15:13:20.21 ID:mMs5M0FT.net
質問させていただきます。
HTMLでできるのかJavaScriptでできるのか分からないのですが
webサイト上の新しいリンクをクリックした時にGoogle Chrome指定で開くことってできますか？

395 ：Name_Not_Found：2021/06/02(水) 16:46:43.89 ID:???.net
>>392
>>393
ガン無視了解です
ありがとうございました

396 ：Name_Not_Found：2021/06/02(水) 17:23:19.21 ID:cpLdM8tk.net
marginのpx指定というのは使わないでサイトを構築したほうがいいのでしょうか？

397 ：Name_Not_Found：2021/06/02(水) 18:00:40.58 ID:???.net
8の倍数だのpx指定だの、便利かどうか慣れてるかどうかなんて人それぞれだから
個人サイトだったら好きにしろ

398 ：Name_Not_Found：2021/06/02(水) 18:06:12.61 ID:+UhZwpA/.net
Swiperに関しての質問でも大丈夫でしょうか?
他スレありますか?

399 ：Name_Not_Found：2021/06/02(水) 20:53:24.13 ID:???.net
>>398
内容によるけど、スクリプトに関してなら他にも色々

Webサイト制作初心者用質問スレ part252
https://mevius.5ch.net/test/read.cgi/hp/1595561376/
+ JavaScript の質問用スレッド vol.121 +
https://mevius.5ch.net/test/read.cgi/hp/1410603104/
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/

400 ：Name_Not_Found：2021/06/03(木) 21:10:57.22 ID:???.net
class="hero"
って何の名残？google的には現代でも意味があるクラス名？

401 ：Name_Not_Found：2021/06/03(木) 21:15:47.26 ID:???.net
>>400
Bootstrapがで始めた頃
キービジュアルになるような大きなバナーにheroってクラス名がついてたのを真似したのの名残り

今のBootstrapでは使われてない

402 ：Name_Not_Found：2021/06/03(木) 21:16:43.25 ID:???.net
あとクラス名なんてGoogle先生にはなんの意味もない

403 ：Name_Not_Found：2021/06/03(木) 23:03:57.48 ID:???.net
>>401
そうなんだ、ありがとう
テンプレートに使うクラス名の付け方って難しいわ・・
1語、2語とか、これで本当にいいのか悩んでしまう

404 ：Name_Not_Found：2021/06/03(木) 23:20:59.73 ID:???.net
>>400
メインビジュアルの別名をヒーローイメージという

405 ：Name_Not_Found：2021/06/03(木) 23:59:44.42 ID:???.net
hogehoge
foo

406 ：Name_Not_Found：2021/06/04(金) 10:06:49.01 ID:lbnE/1sX.net
スマホ、iPhoneの背景全画面のcssがうまく行かず悩んでいます。
リロードするとうまくいくのですが
初回は必ずbackgroundcolorの色が下部の足りない部分に出てきてしまいます。

407 ：Name_Not_Found：2021/06/04(金) 17:52:29.57 ID:???.net
文字だけじゃわからないか、一眼レフで状況がわかる様子のモニターを撮影してアップロードして

408 ：406：2021/06/04(金) 18:22:43.16 ID:lbnE/1sX.net
サイトのURL貼ってもいいですか？

409 ：Name_Not_Found：2021/06/04(金) 18:23:32.09 ID:???.net
>>406
100vhじゃいかんの？
実際には初期ビューより少し長くなっちゃうけど

410 ：Name_Not_Found：2021/06/04(金) 18:23:49.75 ID:???.net
>>408
かもん

411 ：406：2021/06/04(金) 19:44:54.20 ID:lbnE/1sX.net
https://shirakedo.com/news.html
https://shirakedo.com/discography.html
のiPhoneXRサファリでみた時のページになります。
スクロールすると下部が黒（background）になります。
リロードすると治ります。
height:100vh;したりといろいろいじってしまい
スッキリしないコードになってる気もしますが・・・

412 ：Name_Not_Found：2021/06/04(金) 19:52:14.30 ID:???.net
下部ってナビゲーションバーのこと？これ半透明の黒でいいんじゃないの
background: rgba(0, 0, 0, 0.85);　指定されてるけど

413 ：406：2021/06/04(金) 19:57:08.32 ID:lbnE/1sX.net
>>412
newsページでいくと
.news {
background: url(../img/news-vertically.jpg) #000 no-repeat center center ;
ほにゃらら
｝
の#000が画面をスクロールするときに表示されてしまいます。
分かりづらいので＃FFFに変更しておきますね。

414 ：Name_Not_Found：2021/06/04(金) 20:04:05.67 ID:???.net
>>411
これは？

CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック

ttps://coliss.com/articles/build-websites/operation/css/css-fix-for-100vh-in-ios.html

415 ：406：2021/06/04(金) 20:08:27.09 ID:lbnE/1sX.net
>>414
解決しました！ありがとうございます！
本当にありがとうございます！

416 ：406：2021/06/04(金) 20:18:14.98 ID:lbnE/1sX.net
すみません、解決してないっぽいです。

417 ：Name_Not_Found：2021/06/04(金) 20:24:59.91 ID:???.net
ああ～自分iPhone持ってないから借りて見たらこういう事か
iPhone8のsafariで見ると背景の高さを内の要素が超えてる事になってるね
firefoxだと大丈夫だ

418 ：406：2021/06/04(金) 21:08:33.98 ID:lbnE/1sX.net
>>417
アンドロイドもあるのですがfirefoxとchromeでは大丈夫でした。
iPhoneのサファリのみ表示がおかしくなります。

419 ：Name_Not_Found：2021/06/04(金) 21:22:12.89 ID:???.net
safariはねー
いろいろあるよねー
ユーザー多いから無視できないという(´･ω･`)

420 ：Name_Not_Found：2021/06/04(金) 21:26:03.23 ID:???.net
>>418
iOS Safariでbackground-attachment:fixedが効かない不具合
https://shanabrian.com/web/html-css-js-technics/css-ios-safari-bug-background-attachement-fixed.php

421 ：Name_Not_Found：2021/06/04(金) 23:26:57.20 ID:???.net
background-attachment:fixedはiOS SafariどころかMacOSのほうでも
ずっと未対応なだけであって、別に不具合ではない
Appleがクソなことにかわりはないけどね

https://caniuse.com/mdn-css_properties_background-attachment_fixed

422 ：Name_Not_Found：2021/06/05(土) 00:42:55.15 ID:???.net
うわーん、pタグのmargin-bottomとその下のh2のmargin-topが重なってしまう・・・
どうすれば良いの？

423 ：Name_Not_Found：2021/06/05(土) 01:17:36.63 ID:???.net
>>422
とりあえず「CSS margin 相殺」で検索

424 ：Name_Not_Found：2021/06/05(土) 02:05:01.03 ID:???.net
padding

425 ：Name_Not_Found：2021/06/05(土) 09:07:12.56 ID:???.net
ありがとう、理解できた。
透明なhr挟んでも良いのか。

統一性を持たせようとしても、チマチマ修正して破綻しそう

426 ：Name_Not_Found：2021/06/05(土) 22:33:15.24 ID:???.net
>>411
iPhoneで見てるだけなのでコードは読んでないのだけど
背景用にdiv.bgを用意して

position: fixed;
height: 100;
background-size: cover;

とするのはどうだろう
Safariに限らずbackground-attachment: fixedは昔みたいに機能しなくなってきてるから
自分はもう使わなくなってる

427 ：Name_Not_Found：2021/06/05(土) 22:34:41.00 ID:???.net
>>425
だからみんな
マージンは片方だけ使うようになっていくのだと思う

428 ：Name_Not_Found：2021/06/06(日) 03:38:20.30 ID:???.net
>>423
やっぱ初心者はマージンの相殺で躓くよなｗ

429 ：Name_Not_Found：2021/06/06(日) 04:36:03.74 ID:???.net
上だけ使う派？
下だけ使う派？

でも、結局その親タグのpaddingの世話になるかしないとダメよね
俺は上だけ派

430 ：Name_Not_Found：2021/06/06(日) 13:04:15.91 ID:???.net
上が無難だと思ってる
＋使って、何かと自分の間って書くことが多いな

431 ：Name_Not_Found：2021/06/06(日) 13:05:07.81 ID:???.net
>>428
あとマージンの飛び出しも
この仕様は誰が得するのかいまだにわからん

432 ：Name_Not_Found：2021/06/06(日) 16:15:47.47 ID:???.net
>>431
初期設定の段階での敢えてそうしたのか漏れなのか
でも今更仕様変更されたら阿鼻叫喚になる図しか見えない

433 ：Name_Not_Found：2021/06/06(日) 18:50:48.69 ID:+MtbuAp7.net
上から写真、テキストのカードリストを横に3つ並べるデザインがあって、スマホサイズにした時カラムで縦に並ぶようにしたんだけど横幅が100%にならずに小さく真ん中に縦方向に並んでしまう……なんでだろう？？

434 ：Name_Not_Found：2021/06/06(日) 19:24:53.54 ID:???.net
formタグの要素の順番は変わってもいいですか？
<form action='foo.php' method='post'> …
と
<form method='post' action='foo.php'> …
などで

435 ：Name_Not_Found：2021/06/06(日) 21:14:06.81 ID:???.net
>>429
何に対するマージンなのかを考えるとたいてい左と上になるな

436 ：Name_Not_Found：2021/06/07(月) 01:10:01.96 ID:???.net
マージンの相殺はほんと意味わからん仕様よな
どういう理論やねん

437 ：Name_Not_Found：2021/06/07(月) 05:41:10.27 ID:???.net
先輩ワイ、div内のpaddingと中にあるタグのmarginの使い分けを聞かれ沈黙

その後、咄嗟に「これは宗教だから好きにしてok」と返答したわ

438 ：Name_Not_Found：2021/06/07(月) 07:18:54.22 ID:???.net
そいえば昔（10年くらい前）
paddingはなるべく使うな
なるべくmarginでどうにかしろ
ってルールの仕事があったわ
理由聞いとけばよかった

439 ：Name_Not_Found：2021/06/07(月) 09:35:02.91 ID:???.net
でもpaddingあるほうが、見出しの背景色には便利じゃ無い？

440 ：406：2021/06/07(月) 18:40:00.46 ID:iZ97Rio5.net
みなさんありがとうございます。

>>426
おっしゃるとおりbackground-attachment: fixedはあまりうまく動かないようですね。
とりあえず
display:block;
でしのぐことにしました。

441 ：Name_Not_Found：2021/06/07(月) 23:55:16.02 ID:???.net
>>438
あーそういう指導するサイトもあった
あれなんなんだろうな
box-sizing概念ない時代だからな

442 ：Name_Not_Found：2021/06/08(火) 00:09:12.50 ID:???.net
今現役の人に聞きたいのですがfloatって使いますか？

443 ：Name_Not_Found：2021/06/08(火) 00:14:55.26 ID:???.net
そりゃflexより使いやすいときあるからな
箱に並べるだけがfloatじゃ無いし

444 ：Name_Not_Found：2021/06/08(火) 00:23:28.95 ID:???.net
ありがとうございます。
今勉強中でfloatは現場ではもう使わないと聞いたので不安になって質問させてもらいました。

445 ：Name_Not_Found：2021/06/08(火) 00:49:43.02 ID:???.net
たまにfloatも使うというルールにするより
使わないというルールにしているのは良いと思うよ
そんなに気にしないで良い

今の子は良いな、float知らなくても食べていけるんだから(食べられるとは言ってない)

446 ：Name_Not_Found：2021/06/08(火) 01:21:40.44 ID:???.net
>>442
必要なら

447 ：Name_Not_Found：2021/06/08(火) 01:23:58.43 ID:???.net
floatの本来の使い方の回り込みは
float使わにゃならんし

レイアウト目的で使うのか？という質問なら
ほぼないんじゃない？
flexとgridで大体なんとかなるじゃろ
俺らが20年間ずっと欲しいと思ってきた機能の集大成だし

448 ：Name_Not_Found：2021/06/08(火) 01:53:01.67 ID:???.net
20年片手間にやってきたけど、grid知らねぇ・・・

449 ：Name_Not_Found：2021/06/08(火) 03:23:55.97 ID:???.net
IEさえ駆逐されればgridの時代がやってくる

450 ：Name_Not_Found：2021/06/08(火) 03:24:29.51 ID:???.net
>>448
20年やってたならあれだ
昔懐かしいテーブルレイアウトみたいな感じよ

451 ：Name_Not_Found：2021/06/08(火) 03:33:58.55 ID:???.net
> 俺らが20年間ずっと欲しいと思ってきた機能の集大成だし
そういう声が多いからflexが作られたのだ

452 ：Name_Not_Found：2021/06/08(火) 05:38:59.18 ID:???.net
>>450
なにぃ、1pxのspacer.gifはもういらねぇってのかい？

453 ：Name_Not_Found：2021/06/08(火) 05:52:44.80 ID:???.net
>>452
うむ
今はtdのheightで空間を空けるのがナウい

454 ：Name_Not_Found：2021/06/08(火) 08:11:17.29 ID:???.net
float の用途は新聞とか本でみかける、テキストに写真や図表を入れるレイアウトが本分だよな
今どきそんなレイアウトをWebで使うことはほぼないけど

455 ：Name_Not_Found：2021/06/08(火) 09:05:04.57 ID:???.net
PCビューではそのやり方はまだまだ使うけど、
もしかして俺が知らないだけ？

それをレスポンシブでwidth:100%にして文の上か下に画像が来るようにしているわ

456 ：Name_Not_Found：2021/06/08(火) 09:12:10.26 ID:???.net
599px以下はレスポンシブでスマホ用、それ以外はwidth:960px用のPC用という扱いだけど、
これだとタブレットの縦が、一部の幅になってしまう。
width=deviceなんとかの影響だと思うけど、このタブレットの時はwidth=960pxみたいなのってmetaタグにできる？
wordpressのheader用phpだけど、ifとかいる？javascriptとかでするの？

457 ：Name_Not_Found：2021/06/08(火) 11:35:31.66 ID:???.net
Word Press のスレで聞けば？

458 ：Name_Not_Found：2021/06/08(火) 11:41:55.26 ID:???.net
>>448
そのレベルの古参ならgridはめちゃフィットするはず

当時のテーブルレイアウトであれこれやって
バッドノウハウとして腐れてた経験が
今になって活きる

459 ：Name_Not_Found：2021/06/08(火) 11:56:24.83 ID:???.net
この世界は定期的に勉強してないとどんどん変わるから浦島太郎よｗ
10年後のWEB界隈はどうなってるのか想像もつかない

460 ：Name_Not_Found：2021/06/08(火) 12:17:30.65 ID:???.net
最近はスマホの普及によるレスポンシブ対応で進化早いように思えたけどここから先はそんなに変わらないんじゃないかな
レイアウトで言えばもう印刷物並みのデザインができるようになったからね
動画を組み込める分だけ印刷物を超えたかもしれない
今はもうCWVとかそういう改善に目を向けられているように思う

461 ：Name_Not_Found：2021/06/08(火) 12:21:59.71 ID:???.net
10年後からのレス
と、10年前の私もそう思ってました

462 ：Name_Not_Found：2021/06/08(火) 13:39:26.97 ID:???.net
そういや最近、コンテナクエリってのも出てきたな

CSS コンテナクエリの基礎知識と便利な使い方を解説 | コリス
https://coliss.com/articles/build-websites/operation/css/about-css-container-queries.html

463 ：Name_Not_Found：2021/06/09(水) 03:54:42.62 ID:???.net
10年後はまたFLASHサイトの復興だよ

464 ：Name_Not_Found：2021/06/09(水) 11:11:35.26 ID:???.net
>>462
@containerは割と前からあるんだけど
これだけでは、今求められているレスポンシブは賄えないので
@mediaと併用することになる

んで併用すると結構複雑になる
変動するものが2つあることになるんで

なのでレスポンシブよりも
pcのカードレイアウトで1行の数を変えるリキッド
みたいな局所的な使い方にしかならない気がする

と、だいぶ前に調査しとけって言われた時に書いた

465 ：Name_Not_Found：2021/06/09(水) 14:19:52.29 ID:???.net
なんか当たり前の事しか言ってないような･･･

466 ：Name_Not_Found：2021/06/09(水) 18:55:19.96 ID:???.net
結局あってもコーダーとって便利じゃないと使われない

467 ：Name_Not_Found：2021/06/10(木) 12:10:09.27 ID:???.net
これ見るとedgeでもposition stickyがtableのtr要素、thead要素に使えるように見えるんだけど上手くいかない
https://caniuse.com/css-sticky

chrome、safari、firefoxでは大丈夫だった
edgeでも出来てる方いますか？

468 ：Name_Not_Found：2021/06/10(木) 12:31:24.24 ID:???.net
edgeをchromiumにアップデートしてないんじゃね

469 ：Name_Not_Found：2021/06/10(木) 12:41:39.13 ID:???.net
最新版にアップデートして91になってます

470 ：Name_Not_Found：2021/06/10(木) 15:42:41.58 ID:???.net
試してみたけど、確かに動作しないね
まぁ、trとtheadの下のthとかtdで指定しちゃえば特に困らんけども

471 ：Name_Not_Found：2021/06/10(木) 17:06:27.38 ID:???.net
ありがとうございます
theadで対応できると複数行でもposition stickyを使いやすくなるので心待ちにしているんですが92まで待ってみます

472 ：Name_Not_Found：2021/06/11(金) 01:05:30.79 ID:???.net
edgeとIEを窓から捨てよう

473 ：Name_Not_Found：2021/06/11(金) 01:22:49.04 ID:???.net
新しいedgeいいぞ
俺は好き

474 ：Name_Not_Found：2021/06/11(金) 01:51:25.17 ID:???.net
浮気者！ひどい！Chromeが一番だって言ってたじゃない

475 ：Name_Not_Found：2021/06/11(金) 07:00:30.79 ID:???.net
edgeはchromeと変わらないいい子

476 ：Name_Not_Found：2021/06/11(金) 11:57:44.12 ID:???.net
>>470
まじかよ
クロミウムエンジン信用して最近edgeの検証してなかったわ

477 ：Name_Not_Found：2021/06/11(金) 14:31:31.26 ID:???.net
>>476
検証用にどうぞ
https://jsfiddle.net/yoshabn4/

478 ：Name_Not_Found：2021/06/11(金) 14:36:57.13 ID:???.net
おおー
chromium派生だめじゃねEdge・Vivaldi・Opera全部引っ付かない
Chromium９２とFirefox89はok

479 ：Name_Not_Found：2021/06/11(金) 22:31:04.60 ID:W7JN7NTA.net
ブラウザーの拡大率に関係無く、文字を常に同じ大きさで表示出来ますか？
例えば25%の縮小表示でも400%の拡大表示でも、
液晶ディスプレイの画面に高さ30ピクセルで文字を表示するなどです。

480 ：Name_Not_Found：2021/06/11(金) 22:32:30.97 ID:???.net
>>479
ユーザーの設定を制御しようとするな

481 ：Name_Not_Found：2021/06/11(金) 23:40:58.22 ID:W7JN7NTA.net
>>480
やり方を教えろ

482 ：Name_Not_Found：2021/06/12(土) 00:23:43.01 ID:???.net
>>479
出来ない

483 ：Name_Not_Found：2021/06/12(土) 00:34:21.84 ID:???.net
>>481
document.widthとか色んなハックが生まれては対策されて使えなくなっていく
ユーザーの意図したブラウザコントロールを無視するというのは発想としてはウインドウストームとかブラウザクラッシャーに近いものだからだ

484 ：Name_Not_Found：2021/06/12(土) 00:39:44.22 ID:???.net
>>481
できるけどお前のようなバカには無理

485 ：Name_Not_Found：2021/06/12(土) 03:02:27.68 ID:???.net
>>481
　 　 　 　　　　　　　｢￣ ｀ヽ､ 　　＿_＿_＿_
　 　 　 　　　　　　　Ｌ -‐ '´ ￣ ｀ヽ- ､　　　〉
　　　　　　　　　　／ 　 　 　　　　　　ヽ＼ /
　　　　　　　　／/ 　/ 　/ 　 　 　ヽヽ　ヽ〈
　 　　　　　　ヽ､レ! {　 ﾑ-t ﾊ　li ､ i　i　　}ﾄ､
　　　　　　　　　ﾊＮ |　lヽ八l ヽｊﾊVヽ､ｉ j/ l　!
　 　　　　　　　/ﾊ. ｌ ヽｋ=＝　,　r= ､ﾉﾙｌ　lＬ」
　　　　　　　　ヽN､ﾊ ｌ　 　┌‐┐ 　 ﾞl ﾉl　l
　 　　　　　　　　　ヽﾄjヽ､　ヽ_ノ 　 ノ//ﾚ′
　　　　r７７７７７７７７７tﾉ｀ ｰ　r ´ﾌ/′
　　　ｊ´ﾆゝ 　　　　　　　ｌ|ヽ 　_/｀＼
　 　〈　‐　知ってるが　ｌﾄ、　/ 　 〃ゝ、
　 　〈､ﾈ.. 　　　　　　 　.ｌＦ Ｖ=＝"／ ｲl.
　　　ト |お前の態度が とニヽ二／　　ｌ
　　　ヽ.|l　　　　 　 　　〈ｰ- 　 !　｀ヽ. 　 ｌ
　 　 　 |l気に入らない ｌﾄﾆ､_ﾉ 　 　 ヾ、!
　 　 　 |l_＿_＿_＿_＿__ｌ| 　　＼ 　　　ソ

486 ：Name_Not_Found：2021/06/12(土) 03:09:16.24 ID:???.net
>>485
まだそのAAを拝めるなんて

487 ：Name_Not_Found：2021/06/15(火) 21:22:26.26 ID:???.net
よく、大きめのモーダルを表示させる際に「背景固定をして、モーダルの中を直接スクロールさせる」というのを見掛けるのですが、
背景を固定にしつつ、モーダルの中ではなく、Box自体を上下にスクロールさせるやり方とかってありませんか？
普通にやろうとするとやはり背景まで動いてしまいます・・・

488 ：Name_Not_Found：2021/06/15(火) 21:54:34.04 ID:???.net
背景(モーダル以外)をfixed(固定)にして
モーダルをrelative等で前面表示にするといいんじゃないかな？

iOS対応時の調整で手間取った覚えがあるけどごめん、そこは覚えてない

489 ：Name_Not_Found：2021/06/15(火) 22:01:58.50 ID:???.net
>>487
コードまで書くのは面倒なんでググって欲しいんだけど

1. まず今のscrollTopを測っておいて
2. bodyをposition: fixedにして固定しちゃって
3. 1で測った値ぶん上にズラす

ってするのがわりとスタンダード

490 ：Name_Not_Found：2021/06/15(火) 22:24:11.50 ID:???.net
>>488
>>489
ありがとう。この場合、モーダルは当然fixedやabsoluteにしちゃうと固定されちゃうよね？
モーダルの方はrelativeとかになんのかなぁ？

491 ：Name_Not_Found：2021/06/15(火) 22:56:28.93 ID:???.net
モーダルってなんや・・・

492 ：Name_Not_Found：2021/06/15(火) 23:22:31.41 ID:???.net
>>491
jsのアラートみたいに同一html内で表示するウインドウもどき
cssによるデザインの適用ができるのでデザインを凝れる

>>490
yes

493 ：Name_Not_Found：2021/06/15(火) 23:50:19.86 ID:???.net
>>490
その辺は
どうとでもできるライブラリ使おうよ

自分の使い方では
jQありならMagnific-popupで満足してる
なしだと手作りしたやつ使いまわしてる

494 ：Name_Not_Found：2021/06/16(水) 00:11:08.39 ID:???.net
dialogタグ使えっていう

495 ：Name_Not_Found：2021/06/16(水) 00:37:41.15 ID:???.net
でもfirefoxがサポートしてないからなぁ

496 ：Name_Not_Found：2021/06/16(水) 01:43:46.85 ID:???.net
>>492
ありがと、昨日alert使ったとこだわ
それでもクライアントは喜んでたけど、赤文字できないの？とは言ってたから
モーダルならできるよね

497 ：Name_Not_Found：2021/06/16(水) 15:40:29.43 ID:tlorbVcv.net
floatは用途次第ではまだ使えるというカキコがあったのですが、現役の皆様にとってflexboxとgridってどういう印象ですか？
floatは古い！まだまだ使えるけどこれからはflexboxだ！gridだ！という声を聞いたことがあって震え上がってます…。

498 ：Name_Not_Found：2021/06/16(水) 15:49:25.50 ID:???.net
flexを使えないのはまずい

499 ：Name_Not_Found：2021/06/16(水) 17:28:06.87 ID:???.net
flexの方が各要素の収縮等を調整したりレスポンシブ対応での再配置等での自由度が大きい
gridは変則的な配置もできるので同じく自由度があがるイメージ

flexはプロパティ一覧を見つつできるぐらいにはなっとくといいよ
gridはジェネレーター使えば簡単
覚えて損はない

500 ：Name_Not_Found：2021/06/16(水) 18:16:19.47 ID:???.net
flexはチートシート印刷してトイレに貼っておけ

501 ：Name_Not_Found：2021/06/16(水) 18:21:21.51 ID:???.net
>>497
古いとか新しいとかいう価値基準で見てない

古くからやってるおっちゃん達は
それが本来の使い方ではないことを理解した上で
tableを使ったり、floatを使ったりしてきたわけよ
そうするしかなかったから

それがあるから
ボックスを縦横に並べるために作られたflexと
テーブルレイアウトを昇華させたgridは
ボックスを並べるというシーンで普通に使うべきものだよね

という感じ

502 ：Name_Not_Found：2021/06/16(水) 23:18:30.81 ID:???.net
仕事でやってる場合
あらゆるブラウザ対応を迫られるわけよ
そこでIEではgridは使えません
ちょっと前までだとflexも使えません
だからfloatを使う以外の選択がなかった
ただそれだけ

503 ：Name_Not_Found：2021/06/16(水) 23:52:12.22 ID:???.net
JSはいいよな。最新の文法で書いてもBabel一発で古い仕様のコードに変換してくれるんだから。
なんでCSSにはそういうツール出てこないの。

504 ：Name_Not_Found：2021/06/17(木) 00:23:31.56 ID:???.net
gridってIEで使えなかったのか
通りででウチで使う人いないわけだ…

505 ：Name_Not_Found：2021/06/17(木) 00:24:57.98 ID:???.net
>>503
バベルもそこまで
何でもかんでも面倒見てくれるわけではないんだが
それはさておき

JSで書いてるのは式と文なんで翻訳しやすい
一方CSSはただパラメータと値を書いてるだけなんで
それにどんな意味があんのか、あんまりよくわかんないんだよ

506 ：Name_Not_Found：2021/06/17(木) 00:48:00.78 ID:dOgYlocM.net
>>499
ありがとうございます！flexもgridも勉強していきます
>>500
それやります！w
>>501
従来のレイアウトはプロパティ本来の用途から外れた裏技だったんですね…
>>502
IEがWeb製作のおじゃま虫みたいですね…昔はIE一強の時代があったみたいですが…

507 ：Name_Not_Found：2021/06/17(木) 00:53:38.60 ID:???.net
flexはある程度使えるけどgridは全く分からんわ

508 ：Name_Not_Found：2021/06/17(木) 01:01:46.69 ID:???.net
>>506
何か勘違いをしている
IEが邪魔なのは出た時から今日まで変わらんぞ

509 ：Name_Not_Found：2021/06/17(木) 01:05:55.05 ID:dOgYlocM.net
>>508
そうだったんですか！？
あいつはダメな子やったんですね…。

510 ：Name_Not_Found：2021/06/17(木) 01:08:41.60 ID:???.net
>>507
CSSで書くテーブルレイアウトみたいなもん
超簡単

grid-layout:
'box1 box2 box3' 10px
'box1 box4 box4' 20px/
100px 200px 300px;

みたいに書くだけ
上の例だとbox1がrowspan=2
box4がcolspan=2になってる感じ

511 ：Name_Not_Found：2021/06/17(木) 01:18:14.67 ID:???.net
>>509
90年台からのNetscapeとIEのシェア争いで
双方独自拡張満載となったブラウザは
HTML/CSSを正しくレンダリングできず
我々は正しくないHTML/CSSを書かざるを得なかった

00年台になり札束暴力でIEに軍配が上がった後
Netscapeの残党が最後っ屁で
現在のように正しくHTMLとCSSをレンダリングする
Geckoエンジンを作り上げた

正しいHTML/CSSを書ける我々の歓喜は
ウェブ標準ムーブメントとなり
現在のHTMLコーディングスタイルの礎となった

とはいえ、依然としてIEは存在しているので
IEのために特別な配慮をするという苦行を
我々は20年に渡り行っているのである

512 ：Name_Not_Found：2021/06/17(木) 01:26:36.69 ID:dOgYlocM.net
>>511
たしかNetscapeはMozillaの前身でしたよね
彼の最後っ屁がMozillaも作ってWeb標準を作ったってことなんですね～
知りませんでした！そういうネットの歴史すごく楽しいです

そうなるとIEが異端ですね…
IEくんのために特別なコード書くのめんどくさい…

513 ：Name_Not_Found：2021/06/17(木) 01:30:09.06 ID:???.net
>>510
grid-layoutって何？
grid-templateじゃなくて？

514 ：Name_Not_Found：2021/06/17(木) 01:31:06.72 ID:???.net
>>513
本当にごめんなさい
寝っ転がってスマホで書いてたら普通に間違えた

515 ：Name_Not_Found：2021/06/17(木) 01:32:12.32 ID:???.net
>>514
大丈夫
誰にでも間違いはある

516 ：Name_Not_Found：2021/06/17(木) 03:48:36.14 ID:???.net
>>510
jsfiddleで書いてくれー
いまいち雰囲気がつかめん

517 ：Name_Not_Found：2021/06/17(木) 08:42:13.05 ID:???.net
span使わん人？

518 ：Name_Not_Found：2021/06/17(木) 10:51:12.50 ID:???.net
急にspanどうした

519 ：Name_Not_Found：2021/06/17(木) 14:07:21.36 ID:dOgYlocM.net
こんなの見つけました～学習にどうぞ

flexboxを学べるゲーム「Flexbox Froggy」
https://flexboxfroggy.com/#ja
Gridを学べるゲーム「Grid Garden」
https://cssgridgarden.com/#ja

520 ：Name_Not_Found：2021/06/17(木) 14:37:01.07 ID:???.net
>>516
横からだけど暇だから書いてみた。>>510だと高さが低すぎたから伸ばした。
https://jsfiddle.net/9b0nt2gk/

521 ：Name_Not_Found：2021/06/17(木) 14:41:55.75 ID:???.net
あと、gridはこういうの使えば便利
https://grid.layoutit.com/?id=U08eGxh

522 ：Name_Not_Found：2021/06/17(木) 20:05:51.64 ID:???.net
>>520
ありがてぇ

.container { width: 600px; ← わかる

grid-template: "box1 box2 box3" 100px "box1 box4 box4" 200px / 100px 200px 300px;
　　　∧∧
　　（　･ω･）・・・なんやこれ
　 ＿|　⊃／(＿＿_　
／　└-(＿＿＿_／
￣￣￣￣￣￣￣

　 ＜⌒／ヽ-、_＿_
／＜_/＿＿＿＿／

523 ：Name_Not_Found：2021/06/17(木) 21:14:23.16 ID:???.net
>>522
内容的には>>521の中身と同じだから、眺めてれば何となく分かるはず

524 ：Name_Not_Found：2021/06/17(木) 23:12:53.48 ID:???.net
>>510
rowspanなついwww

525 ：Name_Not_Found：2021/06/18(金) 08:27:40.87 ID:???.net
rowspanは今でもtableで表作る時に使うでしょ
今は別の方法が主流なん？

526 ：Name_Not_Found：2021/06/18(金) 10:52:00.21 ID:???.net
colspanは昨日使ったけど、rowspanはここ数年使ってないなー

527 ：Name_Not_Found：2021/06/18(金) 11:21:19.34 ID:???.net
そんなん
単に縦にセルが繋がる表を書く機会の有無だけじゃないか

528 ：Name_Not_Found：2021/06/18(金) 12:18:51.81 ID:???.net
縦に繋げたいときは面倒だからdiv使っちゃってるなあ
レスポンシブでレイアウト変えるのもしやすいし

529 ：Name_Not_Found：2021/06/18(金) 15:22:39.06 ID:???.net
みんなdisplay:table;で表組みしたりする？

530 ：Name_Not_Found：2021/06/18(金) 16:18:16.39 ID:???.net
>>529
SPの時に組み替えなきゃならん時はする
擬似テーブル化するmixinも作ってあるし
それでハマらない時はgrid使ってる

531 ：Name_Not_Found：2021/06/20(日) 14:37:16.87 ID:???.net
cssの原典ってどこにあるの？

532 ：Name_Not_Found：2021/06/20(日) 14:56:41.85 ID:???.net
インドの山奥

533 ：Name_Not_Found：2021/06/20(日) 15:17:39.23 ID:???.net
石板かな？

534 ：Name_Not_Found：2021/06/20(日) 19:12:43.94 ID:???.net
w3cみたいなのが大元？

535 ：Name_Not_Found：2021/06/20(日) 19:33:55.42 ID:???.net
20年以上前にすでにHTML内に書く形であったからなぁ
源流を辿ればインドの山奥か、やはり

536 ：Name_Not_Found：2021/06/20(日) 19:36:45.46 ID:???.net
チッ
自分で調べらあ
今はリファレンスはmdnのサイト見てる

537 ：Name_Not_Found：2021/06/20(日) 20:15:58.45 ID:???.net
>>536
何がチッじゃチンカス

538 ：Name_Not_Found：2021/06/20(日) 20:24:31.40 ID:???.net
w3c見れねーな

539 ：Name_Not_Found：2021/06/21(月) 04:29:42.32 ID:???.net
>>534
もう数年前からHTMLやCSSは
W3Cのものではなくなってるよ

540 ：Name_Not_Found：2021/06/21(月) 04:50:05.16 ID:???.net
えっそうなの
誰にNTRたん？

541 ：Name_Not_Found：2021/06/21(月) 04:54:02.55 ID:???.net
>>540
WHATWG
要するにAppleとGoogleとMozilla

542 ：Name_Not_Found：2021/06/21(月) 04:59:17.33 ID:???.net
ネスケの元に戻ったのならNTRというより元サヤか？

543 ：Name_Not_Found：2021/06/21(月) 05:12:33.43 ID:???.net
>>542
違う

HTMLはティム・バーナーズ・リーが作ったもので
その後、彼が組織したW3Cがメンテしてた

Netscapeは
NCSAでMosaic作ったアンドリーセンに
シリコングラフィス創業メンバーのクラークが
ウェブブラウザで天下取ろうぜ！って持ちかけて作った会社

544 ：Name_Not_Found：2021/06/21(月) 05:48:48.52 ID:???.net
1989年に誕生したHTMLをW3Cは
1999年のHTML4までバージョンアップさせた

さらにXMLを開発し、これこそウェブの未来だと
2000年からXHTMLに移行し、HTMLは

しかしブラウザベンダーが望む未来は
文書フォーマットではなく、ウェブアプリケーションプラットフォームだった

そこでGoogle、Apple、MozillaはW3Cに対し開発協力を申し出るが、拒否されたため
WHATWGを組織して自分たちでHTMLを作ることにした

2007年ごろ、WHATWGで作られた最初のHTMLは
Web Application 1.0と命名されるが、WHATWG内部ではHTML5と呼称されていた

2008年からW3CはWHATWGと共同歩調をとることを受け入れ
XHTMLを凍結、時期バージョンはHTML5と決めた

が、非営利組織であるW3Cの開発速度はとても遅く
WHATWGには耐えられるものではなかった

2010年Apple、Google、Mozillaは先行してブラウザにWeb Application 1.0を実装
2011年にはHTML Living Standardとして公開した

W3CがHTML5を勧告するのはこの3年後なのだが
2010年頃にHTML5というワードがバズってたのはこのため

2014年にW3Cから勧告されたHTML5は不出来で
またHTMLに対する考え方の違いにWHATWGは不満を募らせていく

2016年にW3Cから勧告されたHTML5.1に対し
WHATWGは不満を爆発させ、口汚く罵り、W3Cに三行半を叩きつけ、完全に決別することになる

2017年にW3CはHTML5.2を勧告して抵抗するも
両者の溝は埋まることはなかった

2019年、ついにW3CはHTMLの策定を終了し
今後はWHATWGに委ねることを宣言

移行、HTML5.3を勧告することがあっても
HTML LSのコピー（フォークではない）になると決まった

いまここ

545 ：Name_Not_Found：2021/06/21(月) 05:50:43.08 ID:???.net
ごめん脱字

誤：2000年からXHTMLに移行し、HTMLは
正：2000年からXHTMLに移行し、HTMLは凍結

546 ：Name_Not_Found：2021/06/21(月) 06:11:48.00 ID:???.net
おつかれ

547 ：Name_Not_Found：2021/06/21(月) 06:20:10.87 ID:???.net
分かりやすかったサンクス
質問者じゃないけど

548 ：Name_Not_Found：2021/06/21(月) 10:20:41.87 ID:???.net
>>544
＞WHATWGは不満を爆発させ、口汚く罵り、W3Cに三行半を叩きつけ、完全に決別することになる

なんかここだけすげーな
何が気に入らなかったんだろう

549 ：Name_Not_Found：2021/06/21(月) 10:44:24.30 ID:???.net
>>548
ブラウザベンダーとしてのGoogle、Apple、Mozillaはプラットフォーマー
魅力的なアプリを俺らがたくさん作って、それを使う人が増えることで利益になる

だから高機能なHTML5を実装したブラウザをリリースすることがメインで
その仕様の策定は後回しで良い、とは言わんまでも、随時行っていければ良いわけ

一方W3Cは
私たちが仕様を勧告します、ベンダーはそれに従いなさい、という団体で
非営利なので時間に追われることがない

策定することが第一なので、HTML5策定するのに6年かかったくらい遅いのよ

そんで2年かかった5.1も全然機能が少なくて
「W3CのHTML5.1は欠陥フォーク。開発者はHTML LSのみを見よ」
と公言するに至った

550 ：Name_Not_Found：2021/06/21(月) 13:02:45.19 ID:???.net
こっちでも話題になってた

551 ：Name_Not_Found：2021/06/21(月) 13:05:42.31 ID:???.net
どっちだよ

552 ：Name_Not_Found：2021/06/21(月) 15:46:27.87 ID:???.net
varidateはどうしたらいいのん

553 ：Name_Not_Found：2021/06/21(月) 16:06:50.73 ID:???.net
>>552
HTML Conformance Checkers ? WHATWG
https://whatwg.org/validator/
The W3C Markup Validation Service
https://validator.w3.org/

554 ：Name_Not_Found：2021/06/21(月) 18:16:28.85 ID:???.net
急にTwitterのトレンドになってたのなんで

555 ：Name_Not_Found：2021/06/21(月) 18:40:43.07 ID:???.net
この記事が話題になってるっぽい？

どうしてHTML5が廃止されたのか | フューチャー技術ブログ
https://future-architect.github.io/articles/20210621a/

556 ：Name_Not_Found：2021/06/21(月) 19:12:14.51 ID:???.net
>>549
なるほど、公務員のトロ臭さと、民間の行動力か

557 ：Name_Not_Found：2021/06/21(月) 20:28:52.14 ID:???.net
>>553
とんくすこ

558 ：Name_Not_Found：2021/06/21(月) 21:06:30.21 ID:???.net
これから何を信じればいいのさ！

559 ：Name_Not_Found：2021/06/21(月) 21:07:35.06 ID:???.net
まぁどうせおれらはIEというクソブラウザの奴隷なので
5だろうとLSだろうと関係ないんだ

560 ：Name_Not_Found：2021/06/22(火) 09:57:18.40 ID:???.net
ieはそろそろ切ってるとこも多くね
それよりも、webpを背景にできるかどうか@supportsで区切ろうと思ったら
ios12がクソな挙動で困り中
こいつ読めないクセに通しちゃう

561 ：Name_Not_Found：2021/06/22(火) 11:10:31.97 ID:???.net
うちも代理店仕事が主だけど
昨年後半からIE切ってよし増えてきた

自分が今担当してる案件では
鉄道会社と運送会社に
完全にIEが起動しなくなるまで待ってくれと言われてるだけかも

562 ：Name_Not_Found：2021/06/22(火) 18:15:22.49 ID:???.net
Web系に転職したくて勉強してたんだけどHTML5が廃止されるってことは今後どうすればいいんですか？
このままHTML5で勉強続けてていいんです？

563 ：Name_Not_Found：2021/06/22(火) 18:21:48.73 ID:???.net
どんなことでも勉強してて損は無し

564 ：Name_Not_Found：2021/06/22(火) 18:45:49.87 ID:???.net
HTML Living StandardがHTML5に代わる新標準ってことだけど
W3Cとか古い本で勉強してるのでなければ、そのまま続けても
大して問題は無い

565 ：Name_Not_Found：2021/06/22(火) 20:38:42.52 ID:???.net
>>562
今までW3CのHTML5.2の仕様書
https://www.w3.org/TR/html52/
を隅々まで読み込んで勉強していたのであれば
ちょいちょい違うところあるので
HTML LSの仕様書
https://momdo.github.io/html/
を読み直す必要があるけど

違うでしょ？
HTMLやCSSを、機能機能ごとに単体で
いろんなサイトや本で調べて試す
みたいなやり方してたでしょ？

であれば、それはほぼHTML LSに準拠してるから
なんの問題もないよ

566 ：Name_Not_Found：2021/06/22(火) 20:54:04.45 ID:???.net
>>556
W3CがWHATWGを受け入れて
これからWeb Application 1.0をベースにHTML5を策定していきますよ、となったキックオフが

W3C「これは大変な作業になるだろう」
WHA「頑張ろうぜ」
W3C「10年はかかりそうだ」
WHA「ははは、ナイスジョーク！」
W3C「ん？」
WHA「ん？」

だからな

567 ：Name_Not_Found：2021/06/22(火) 22:52:48.62 ID:???.net
現行のブラウザでちゃんと表示されれば何だっていいんだよ

568 ：Name_Not_Found：2021/06/22(火) 22:56:25.36 ID:???.net
iPhoneのEdgeとかいうゴミがモダンブラウザの仲間入りしたから仲良くしてやってくれ

569 ：Name_Not_Found：2021/06/22(火) 23:48:45.38 ID:???.net
動けばどっちだってええねん

570 ：Name_Not_Found：2021/06/23(水) 00:02:35.31 ID:???.net
>>568
地雷の予感しかしない(´･ω･`)

571 ：Name_Not_Found：2021/06/23(水) 02:05:38.60 ID:???.net
>>570
iOSのブラウザは
どれも中身WebKitだからなんも変わらん、はず

572 ：Name_Not_Found：2021/06/23(水) 06:15:20.44 ID:???.net
>>566
WHATWGダッサｗ
結局13年かかっとるやんけｗ

573 ：Name_Not_Found：2021/06/23(水) 09:39:04.74 ID:???.net
国語力って大切なんだなと思いました

574 ：Name_Not_Found：2021/06/23(水) 10:12:45.62 ID:???.net
太郎「ジョン、web業界でどの言語をマスターすればメシが食える？php, node.js, vue.js, perl？」
ジョン「日本語」

575 ：Name_Not_Found：2021/06/23(水) 18:05:06.06 ID:AUunbQTn.net
かなり初心者的な質問ですが、cssの頭にhtml{～}、*{～}って記述すると思うのですが、htmlと＊の違いって何ですか？
どちらも、全てのタグに影響を与えるのでしょうか？
例えば、margin: 0px autoと記述する時htmlの方に記述するのか？、それとも*の方に記述するのか？
どちらが正しいのでしょうか？
宜しくお願いします。

576 ：Name_Not_Found：2021/06/23(水) 19:47:43.03 ID:???.net
>>575
プロパティは親要素から子孫要素へ継承されるものと、継承されないものがあるので
htmlの場合は全てのタグに影響を与えるわけじゃないけど、*だと全てのタグが対象なので
*で指定したプロパティはhtmlを含む全てのタグに影響がある

継承 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/inheritance

marginは非継承プロパティなので、全てのタグに値を指定したい場合、htmlと*のどちらかと
言われれば*ということになる
また、非継承プロパティであっても、特定の子要素で親要素の値を取得したい場合は
子要素のプロパティの値にinheritを指定すれば、親要素の値を取得することが可能

inherit - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/inherit

577 ：Name_Not_Found：2021/06/23(水) 21:48:12.36 ID:???.net
非継承プロパティなんてあるのか・・・

578 ：Name_Not_Found：2021/06/23(水) 21:56:36.06 ID:???.net
テキスト関係以外はほとんど非継承

579 ：Name_Not_Found：2021/06/24(木) 01:38:58.37 ID:???.net
余白は継承してたら大変だろ

580 ：Name_Not_Found：2021/06/24(木) 02:55:32.17 ID:???.net
足しカニ

581 ：Name_Not_Found：2021/06/24(木) 17:16:32.80 ID:???.net
久々に見たら非営利団体と営利団体の話してわくわくしてる
そういうの大好き

582 ：Name_Not_Found：2021/06/24(木) 19:17:28.07 ID:6a/ZLzCt.net
恐らくほんとに初歩的すぎる質問で申し訳ないんだけど
フォントサイズと比例してテキストが下にズレちゃうんだけどなんでこうなっちゃうんだべ

見出しが下にずれまくって
1冊ですべて身につくHTML＆CSSって本の
204ページから進まなくなっちゃった……

583 ：Name_Not_Found：2021/06/24(木) 19:43:06.42 ID:???.net
どういう状態なのか分からんから説明しようがないぞ
具体例をどうぞ
https://jsfiddle.net/

しかしmanaって人はどうなんだろtwitterで少し名前知れてるっぽいけど

584 ：Name_Not_Found：2021/06/24(木) 19:53:09.91 ID:???.net
>>582
出版社の正誤表は確認した？

585 ：Name_Not_Found：2021/06/24(木) 19:53:35.54 ID:???.net
tableタグはデフォルトだと線が引かれないので、
<table border="1">
上記のようにしたらVSCodeでborderの部分が赤く表示されてしまったのですが
これって警告か何かでしょうか？
この書き方はするべきではないですかね？

586 ：Name_Not_Found：2021/06/24(木) 19:54:37.44 ID:???.net
>>582
その本持ってないから例が分からないけど
見本とフォントの種類は同じ？

587 ：Name_Not_Found：2021/06/24(木) 20:00:41.50 ID:???.net
>>585
tableタグのborder属性は、一応各種ブラウザで動作はするが古いので
最近では非推奨属性になってる
代替としてCSSのborderプロパティの使用が推奨されてる

<table>: 表要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

588 ：Name_Not_Found：2021/06/24(木) 20:14:23.73 ID:???.net
>>582
line-heightについては理解している？

589 ：>>582：2021/06/24(木) 21:13:35.79 ID:???.net
うおおお、みんなレスありがとうこんなに優しいんだね
そして>>588見てためしにline-height 0px書いてみたら正常に動いた……
理解はしてない……

付属のコードコピペしてるのにこんなの書いてなかったんだが？？？

590 ：Name_Not_Found：2021/06/24(木) 21:36:56.01 ID:???.net
>>589
font-sizeは文字の大きさ

line-heightは行の高さ
大雑把に言うと
ブラウザの文字をドラッグして選択した時に
後ろに色がつくでしょ
その高さが行の高さ

591 ：585：2021/06/24(木) 22:26:19.91 ID:???.net
>>587
分かりました
リンク先まで書いていただきありがとうございます

592 ：Name_Not_Found：2021/06/24(木) 22:37:08.24 ID:???.net
>>591
いいってことよ

593 ：Name_Not_Found：2021/06/24(木) 23:22:48.56 ID:???.net
改行した時悲鳴が聞こえそう

594 ：Name_Not_Found：2021/06/24(木) 23:43:38.74 ID:???.net
>>589
もしline-height:0;が無くてもサンプルデータが正常に動作するなら
その方法は根本的な問題解決になってないんじゃね？

595 ：Name_Not_Found：2021/06/25(金) 00:30:51.34 ID:???.net
ギャー

596 ：Name_Not_Found：2021/06/25(金) 11:36:32.16 ID:sZqGNd/Y.net
初心者です
ulで囲むと中身のリストが字下げ？というか、そこだけ右にずれてしまうのですが正常な動きですか？cssで中黒を消してもそのままです
左に寄ってて欲しい時はどうしたらいいでしょうか

それから、リストにする理由がいまいちわかりません
pでよくね？って気持ちです

597 ：Name_Not_Found：2021/06/25(金) 12:06:31.35 ID:???.net
>>596
デフォルトCSSでマージンとパディングが
ulとliにそれぞれついてるから
それを自分のCSSで消してください

ブラウザの開発ツールを使うと
マージンやパディング、ボーダーなどがどのように設定されているかわかるので
これ以降、必ず使うようにしてください

598 ：Name_Not_Found：2021/06/25(金) 13:18:11.33 ID:???.net
あああああ、なんか最初に書いてあったリセットCSSってやつかな……やってなかったです……
ありがとうございます！

599 ：Name_Not_Found：2021/06/26(土) 02:54:22.88 ID:???.net
テスト

600 ：Name_Not_Found：2021/06/26(土) 02:56:36.14 ID:???.net
戻るボタンを作りたいと思うのですが、
1. <input type="button" onClick="history.back()" value="戻る">
2. <button type="button" onclick="history.back()">戻る</button>
この2つの書き方では何か違いがあるのでしょうか？

601 ：Name_Not_Found：2021/06/26(土) 03:06:55.61 ID:???.net
挙動は同じ、見た目は違う

602 ：Name_Not_Found：2021/06/26(土) 03:07:54.44 ID:???.net
inputには閉じタグがない
自由にスタイリングするならbuttonタグで作ろう

603 ：Name_Not_Found：2021/06/26(土) 06:02:19.60 ID:???.net
初心者ですまんが
閉じタグのないinputはスタイルシートが効かないとか？

604 ：Name_Not_Found：2021/06/26(土) 06:32:40.04 ID:???.net
>>603
効かないと言うことはないはず
inputは空要素で閉じタグは不要なので、あっても無視されるんじゃないかな

605 ：Name_Not_Found：2021/06/26(土) 11:51:23.05 ID:???.net
>>603
効かないことはないんどけど、たとえば

▶︎Back

みたいにアイコンつけたいときとか
inputは:beforeが使えないじゃん？

そんな意味でbutton好きな層は
一定数いると思う

606 ：Name_Not_Found：2021/06/26(土) 11:55:01.32 ID:???.net
>>604
inputは空要素なのではなく
img、hr、audio、videoなんかと同じく
置換要素

開始タグと終了タグに囲まれた内容が表示されるのではなく
何かと置き換わるんですな

607 ：Name_Not_Found：2021/06/26(土) 12:14:22.87 ID:???.net
>>603
ボタン内テキストの一部の色だけ変えたいとか装飾にこだわりたい時はbuttonを使ってる
inputで表現できる時は1行でかけてシンプルなのでinputを使ってる

608 ：Name_Not_Found：2021/06/26(土) 12:23:07.10 ID:???.net
プロゲートでレスポンシブデザインのとこやってるんだけど
これVScodeとかで書くようになったらどうやってスマホ画面のビュー見ればいいんだぜ？

609 ：Name_Not_Found：2021/06/26(土) 12:28:00.50 ID:???.net
>>608
どうやってるのかわからんけど

多くの人はブラウザの開発ツールで
スマホサイズにして見てると思うよ

iOSとiPhoneだったら
実機の中身をSafariの開発ツールで見る
なんてこともあるかもしれない

610 ：Name_Not_Found：2021/06/26(土) 13:28:11.86 ID:???.net
>>606
空要素は子孫ノードを持たないことを意味するから間違いではないかなと
そして調べてみて驚いたんだが「置換要素になることもある」だそうな

https://developer.mozilla.org/ja/docs/Web/CSS/Replaced_element

611 ：Name_Not_Found：2021/06/26(土) 13:37:25.34 ID:???.net
>>610
なるほど！
勉強になりました

612 ：600：2021/06/26(土) 17:05:52.24 ID:???.net
遅くなってしまいましたが
皆さん回答ありがとうございました

613 ：Name_Not_Found：2021/06/26(土) 20:34:09.48 ID:???.net
色々サイトを見ていてdisplay:tableがあって「ﾌｧｯ、なんやこれ」と思って
縦方向にdivがあったんやが、flexの縦方向とどう違うの？

614 ：Name_Not_Found：2021/06/26(土) 21:32:51.03 ID:???.net
ついでにdisplay:blockも縦方向に並ぶからtable, blockの使い分けがわからんです

615 ：Name_Not_Found：2021/06/26(土) 21:35:57.88 ID:???.net
結果だけ見たらパッと見は同じだけど、flexは縦方向が詰まったら
特に指定が無ければ、自動的に改行しちゃうってのはある

616 ：Name_Not_Found：2021/06/26(土) 21:38:05.79 ID:???.net
目的に合った意味を持つタグやプロパティを使うか
目的に合った挙動をするタグやプロパティを使うか

基本的には、なるべく前者の考え方で選択するってのが正しい

617 ：Name_Not_Found：2021/06/27(日) 20:02:03.50 ID:???.net
HTML/CSSの次に勉強するのは何がいいですか？

618 ：Name_Not_Found：2021/06/27(日) 20:02:34.34 ID:???.net
webデザイナー志望で。

619 ：Name_Not_Found：2021/06/27(日) 20:13:34.40 ID:???.net
ECMAscript

620 ：Name_Not_Found：2021/06/28(月) 03:05:55.25 ID:???.net
ハンバーガーで少しでもアニメ要素をつけるならcssだけでは無理？
ul {display:block} に transitionはダメなのね。

621 ：Name_Not_Found：2021/06/28(月) 05:37:52.22 ID:???.net
アニメの程度にもよるけど、ハンバーガーをタップして横とか上からヌルッとメニューが
出てくる程度の事なら、HTMLとCSSだけで出来るよ

transitionは一応、全ての要素に適用可能なので、当然ulでも動作する

transition - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/transition

622 ：Name_Not_Found：2021/06/28(月) 07:20:33.75 ID:???.net
ぬるって出てくるということは
マイナスの場所にあってpositionとtransitionを使うような感じ？

623 ：Name_Not_Found：2021/06/28(月) 07:33:12.83 ID:???.net
そんな感じ
ハンバーガーをlabelで括って、隠しcheckboxのON/OFFで
スタイルを切り替え

624 ：Name_Not_Found：2021/06/28(月) 07:45:46.98 ID:???.net
あかん、labelの見えないcheckboxって苦手な奴や・・・

625 ：Name_Not_Found：2021/06/28(月) 08:12:41.94 ID:???.net
単純なのだと、こんな感じ
https://jsfiddle.net/pruwvjk0/

626 ：Name_Not_Found：2021/06/28(月) 12:19:39.02 ID:???.net
メディアクエリが一部だけ適応されないんだけどどんな原因が考えられますか？
*で指定しても適応されるとことされないところがある

627 ：Name_Not_Found：2021/06/28(月) 12:43:48.83 ID:???.net
cssセレクタ　優先順位
でぐぐって出てくるあたりとか

628 ：Name_Not_Found：2021/06/29(火) 00:46:09.20 ID:???.net
コード書くときに pre と code で囲うようにしたいのですが、
そこに至るまでの親要素のインデントまで再現されてしまうようです。
この場合コードだけ左端までインデント削るのって正しい処理なのでしょうか？

629 ：Name_Not_Found：2021/06/29(火) 01:57:57.24 ID:???.net
>>628
そもそもインデントしなければならないなんてルールはないですしお寿司

630 ：Name_Not_Found：2021/06/29(火) 02:49:37.43 ID:???.net
優先順位の計算いまだによくわからん

631 ：Name_Not_Found：2021/06/29(火) 02:53:58.91 ID:???.net
https://specificity.keegan.st/
これで一発や

632 ：Name_Not_Found：2021/06/29(火) 04:03:22.25 ID:???.net
id 10点と聞いたのは昔の話なのか

633 ：Name_Not_Found：2021/06/29(火) 04:33:34.59 ID:???.net
idとimportantの戦い

634 ：Name_Not_Found：2021/06/29(火) 23:32:30.27 ID:???.net
そしてスパゲティの出来上がり

635 ：Name_Not_Found：2021/06/29(火) 23:58:54.52 ID:???.net
importantを使う必要が出てきたら負け

636 ：Name_Not_Found：2021/06/30(水) 00:34:20.16 ID:???.net
aタグに使うわ

637 ：Name_Not_Found：2021/06/30(水) 01:34:29.81 ID:???.net
>>633
edとimportentsとの戦いが始まっているのですが

638 ：Name_Not_Found：2021/06/30(水) 01:49:56.26 ID:???.net
>>637
それは優先順位同じ

639 ：Name_Not_Found：2021/06/30(水) 02:26:10.72 ID:???.net
>>625
ありがとう、今全力で理解しようと思っていて
マイナス％まではわかるんだけど、「＋」や「～」のセレクタの接続詞で大きなものを扱うのが
すごく苦手意識が出る・・・

div class="container"に文字などをたくさん入れても縦スクロールしないのは仕様？

640 ：Name_Not_Found：2021/06/30(水) 03:23:51.16 ID:???.net
>>639
+と~は、まぁMDNとか読んで、何となくイメージ出来れば大した話じゃないから頑張って

containerが縦スクロールしないのはbodyタグにoverflow: hidden;が指定されていて
はみ出した分は非表示になるから
なので、そこをoverflow-x: hidden;と書き換えて、x方向のはみ出しだけ非表示にすれば
y方向のはみ出した部分は表示されるようになって、縦スクロール出来るようになる

但し、そうすると.containerの背景画像の下側が切れるので、.container内にある
height: 100vh;をmin-height: 100vh;に書き換えておくと、切れない

641 ：Name_Not_Found：2021/06/30(水) 21:36:33.72 ID:???.net
>>629
そうだったんですね。
見やすさとしてインデントが必要なので、ちょっと不格好ですが pre のところだけ
インデント無しにします。

642 ：Name_Not_Found：2021/07/01(木) 05:21:01.34 ID:???.net
PCの時はpタグの中のbrは機能させて、
レスポンシブの時はbrは無視するようなことってできる？

レスポンシブ時に改行を多用されると、ガタガタするのよね

643 ：Name_Not_Found：2021/07/01(木) 06:18:06.14 ID:???.net
メディアクエリでbrにdisplay: none;を指定

644 ：Name_Not_Found：2021/07/01(木) 06:20:28.74 ID:???.net
>>643
まじか、改行にもdisplay:none効くのか・・・たまげたなぁ
今、手が離せないから後でやってみる、ありがとう

645 ：Name_Not_Found：2021/07/01(木) 06:56:23.93 ID:???.net
>>643
今やってみた、すげぇ。
あんた何者なんだよ・・・

646 ：Name_Not_Found：2021/07/01(木) 09:07:04.29 ID:???.net
なんかかわいいな

647 ：Name_Not_Found：2021/07/01(木) 09:11:41.88 ID:???.net
常識やぞ

648 ：Name_Not_Found：2021/07/01(木) 10:02:30.33 ID:???.net
>>643
いやいや、そんなことあるわけねぇだろ・・・と思ったら革命じゃねぇか。
もしかしてW3C関係者？

649 ：Name_Not_Found：2021/07/01(木) 10:19:23.98 ID:???.net
ちょっと寒いです

650 ：Name_Not_Found：2021/07/01(木) 14:32:39.49 ID:???.net
>>648
次はW3Cがずっと前から形骸なことを
>>544読んで学んでください

651 ：Name_Not_Found：2021/07/01(木) 21:54:23.10 ID:PDhDPRpe.net
今やっている教材
position: absolute;
top: 50%;
left: 50%;
で親要素の真ん中に持ってきてるんだけど

その下にいる
transform: translate(-50%, -30%);
ってのはなんなんだ

translateの意味もググったし、挙動的にどうやらこれのおかげで画面幅縮めたときでも真ん中に来てくれるってのはわかったんだけど
理解力なさすぎてどういう理屈でそうなるのかわからん…

652 ：Name_Not_Found：2021/07/01(木) 22:16:43.30 ID:???.net
>>651
https://webdesignday.jp/inspiration/technique/css/3733/#positionabsolute_transform
この図を見てわからなかったらたぶん何を見てもわからん

653 ：Name_Not_Found：2021/07/01(木) 22:25:08.30 ID:???.net
へぇ、横レスだけど参考になったわ
親と自分に適用されるものが違うのね

654 ：Name_Not_Found：2021/07/01(木) 22:55:56.02 ID:PDhDPRpe.net
>>652
わー、ごめん
左右中央揃えは親要素のtext-align: center;でやってた……
でもわざわざありがとう大変勉強になる

>>651は
.txt{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -30%);
}
って具合に子供要素の中に全部あるんや

655 ：Name_Not_Found：2021/07/01(木) 23:07:50.32 ID:FImXC3Jx.net
transformでテキストを拡大するとchromeでは綺麗に見えますがFirefoxなどは滲んでしまいます。
chromeと同じようにテキストを綺麗に拡大させる方法ってないですか？
物理的なサイズを変えたくないためtransform以外(font-size等)の操作は避けたく…

656 ：Name_Not_Found：2021/07/01(木) 23:43:05.66 ID:???.net
>>654
いや親要素はrelative以外いらん
子要素にabsolute topとleft 50% translate (-50%,-50%)だよ
その教材ほんとに30%って書いてあるの？なんかおかしいと思うよ

657 ：Name_Not_Found：2021/07/01(木) 23:43:50.63 ID:???.net
まあ最近はめんどくさいから上下中央寄せはflexでやりがち

658 ：Name_Not_Found：2021/07/01(木) 23:47:29.50 ID:???.net
>>655
とりあえず、コレでも試してみ
https://myscreate.com/transform-bugs/

659 ：Name_Not_Found：2021/07/02(金) 00:15:10.54 ID:xahEmbY4.net
gridの中の1つの要素をdisplay:flexにしたら
そのflex内の複数の要素が横幅が均等に縮小されないんです(デフォルトのnowrapのままなのに)。
どうやればその複数の要素が均等に縮小されますでしょうか？

660 ：Name_Not_Found：2021/07/02(金) 00:18:11.25 ID:/BE9Mg1z.net
>>658
ありがとうございます
粗方試しましたが改善しませんでした

661 ：Name_Not_Found：2021/07/02(金) 00:26:07.27 ID:???.net
>>659
flex-shlinkとかいじってみ

662 ：Name_Not_Found：2021/07/02(金) 00:28:12.30 ID:???.net
transform概念がない前ってどうやって中央寄せしてたん？

663 ：Name_Not_Found：2021/07/02(金) 00:33:42.03 ID:???.net
>>662
TRBLメソッドとか　ネガティブマージンとか

664 ：Name_Not_Found：2021/07/02(金) 01:28:17.37 ID:???.net
>>660
滲むって、どの程度なの？
どれだけ拡大してるの？

665 ：Name_Not_Found：2021/07/02(金) 02:45:21.47 ID:???.net
>>663
脳みそがウニってる時は上下paddingで挟んで
しれっと提出
とか

666 ：Name_Not_Found：2021/07/02(金) 04:20:48.57 ID:???.net
table td {border: 1px solid #000}
に特定の列の左右ボーダーを消すって難しいな・・
神エクセルみたいなセルでレイアウトするのやめてあげて

667 ：Name_Not_Found：2021/07/02(金) 05:01:19.94 ID:???.net
tdにnth-childかnth-of-typeで範囲指定して
border-leftとborder-rightをnoneにすればいいんでない？

668 ：Name_Not_Found：2021/07/02(金) 11:20:33.06 ID:???.net
>>666
nthを使うか
素直に全てのtrとth、tdにクラスつけるのが楽

669 ：Name_Not_Found：2021/07/02(金) 11:58:39.93 ID:???.net
最近はcolgroupとか使わんのか

670 ：Name_Not_Found：2021/07/02(金) 12:42:41.11 ID:/BE9Mg1z.net
>>664
70pxほどから、画面全体を覆い隠すくらいまで拡大します。倍率250倍程ですw

671 ：Name_Not_Found：2021/07/02(金) 13:50:36.00 ID:???.net
上げると荒れるなら元のフォントサイズを上げておいて縮小して納めておけばいいやろ

672 ：Name_Not_Found：2021/07/02(金) 14:15:47.84 ID:WENACUmt.net
どうしてbodyにfont-weightsしても全部の文字に反映されないんだぜ？

673 ：Name_Not_Found：2021/07/02(金) 14:49:39.62 ID:???.net
svgでやりゃいいんでない

674 ：Name_Not_Found：2021/07/02(金) 16:47:16.46 ID:???.net
>>672
font-weightじゃないからじゃね？

675 ：Name_Not_Found：2021/07/02(金) 17:19:39.65 ID:/BE9Mg1z.net
運用上の都合(テキストが変わる、レスポンシブで改行位置調整する等)と調整の楽さを選んでFirefoxは妥協することにしました

>>673
一応試してみたところtext要素で綺麗に表示されることが確認できました。ありがとうございました。
別の拡大する機会に使ってみようと思います。

676 ：Name_Not_Found：2021/07/02(金) 17:43:27.37 ID:???.net
>>669
colgroupじゃ子孫要素でもないtdに指定されたborderは消せないからなぁ

677 ：Name_Not_Found：2021/07/03(土) 01:12:33.43 ID:???.net
>>667-668
ありがとう、nth-childにborder-right, leftをnoneにしたわ
でも!importantつけないとだめなのね

table td {border: 1px solid #000}
table td:nth-child(1) {border-right: none}

だと上が優先されるものなの？計算式がわからんかった

678 ：Name_Not_Found：2021/07/03(土) 01:30:17.61 ID:???.net
それだと疑似クラスnth-childの分だけ、下の方が優先度が高くなるから
本来なら!importantは要らないはず

679 ：Name_Not_Found：2021/07/03(土) 01:55:30.46 ID:???.net
そうなんだよなぁ、でもimpotantつけないと
消えなかったのが不思議なんだわな
開発ツールで見ると
疑似クラスが無い方が上に来てるのよね

680 ：Name_Not_Found：2021/07/03(土) 02:05:56.19 ID:???.net
border-collapseは collapse、separate のどちら？
collapseだと分かりづらいけど
隣接しているnth-child(2)のleftのボーダー拾ってるって事でもないよね？

681 ：Name_Not_Found：2021/07/03(土) 02:48:13.18 ID:???.net
collapseね。
で、いまわかったスマン。

こいつがいたわｗ
table tbody tr:nth-child(2n+1) td{background-color: #f5f5f5;}
table tbody td:nth-child(1)
table tbody td

手前(tr)に疑似属性がいるから優先されちゃうのは仕方無いよね
交互の背景するのはあったほうがいいと思うし

682 ：Name_Not_Found：2021/07/03(土) 03:21:23.86 ID:???.net
tdのセレクタにもtr挟めばええやん
あとそういう親セレクタきっちり書いていくやり方するならとっととsass使うべき

683 ：Name_Not_Found：2021/07/03(土) 08:38:25.67 ID:P1bmUlir.net
もはやHTNLと同じ構造じゃないと不安にすらなる
いらんとわかっていても
tbodyまで書いちゃう

684 ：Name_Not_Found：2021/07/04(日) 01:02:50.79 ID:???.net
tbodyとか知らない子ですね…

685 ：Name_Not_Found：2021/07/04(日) 01:04:04.69 ID:???.net
んな面倒なことしないで
動かない時はセレクタ全部書く
これで解決しない場合は優先順位がなんかある
いんぽーたんと！
でええねん

686 ：Name_Not_Found：2021/07/04(日) 01:14:05.55 ID:???.net
>>682
ええやんって言い方やめてもらえますか

687 ：Name_Not_Found：2021/07/04(日) 01:14:24.56 ID:???.net
>>685
標準語使ってください、お願いします

688 ：Name_Not_Found：2021/07/04(日) 01:15:44.43 ID:???.net
なんでやねん

689 ：Name_Not_Found：2021/07/04(日) 01:56:57.38 ID:???.net
>>686-687
ワレ、なんやねん
クチから手ぇ突っ込んで肋骨カランコロン言わせたろか

690 ：Name_Not_Found：2021/07/04(日) 02:00:32.02 ID:???.net
WordPressの勉強中の者です
トップページのヘッダー画像はスライドショーで色々と変えられるのですが
スライドショーで変わる画像上のキャッチコピーのテキストをランダムで表示させたいです
画像にキャッチコピーのテキストを載せた画像を作成すれば簡単ですが
文字だけをスライドショーのように変わるようにするにはどうすれば良いでしょうか？
PHPなのかJavaScriptなのかサンプルのようなものがあれば教えてください

691 ：Name_Not_Found：2021/07/04(日) 02:04:06.68 ID:???.net
スレ違い

692 ：Name_Not_Found：2021/07/04(日) 03:00:14.57 ID:???.net
画像が入ってるタグにbeforeかafterつけてそこにcontentsにテキスト入れてpositionをabsoluteつけて位置調整すればいいんじゃね

693 ：Name_Not_Found：2021/07/04(日) 03:00:41.11 ID:???.net
我ながらてにをはがおかしい(´･ω･`)

694 ：Name_Not_Found：2021/07/04(日) 03:20:08.67 ID:???.net
CSS Slideshow text
https://codepen.io/nucliweb/pen/ymedj

695 ：Name_Not_Found：2021/07/04(日) 03:22:29.61 ID:???.net
cssがjsに浸食していってるな

696 ：Name_Not_Found：2021/07/04(日) 03:44:03.84 ID:???.net
>>691-695
有難うございます
いただいたヒントを調べると色々でてきました
CSSって動的なことも指定できるんですね・・

697 ：Name_Not_Found：2021/07/04(日) 22:25:08.58 ID:???.net
Word Press のスレで聞いてください！

漏れらは、スライドショー単独なら分かるけど、
それが、Word Pressに当てはめて使えるかどうか、分からないから

698 ：Name_Not_Found：2021/07/05(月) 07:40:20.26 ID:???.net
よくあるheaderの左上にロゴ、右に2つぐらい端に寄ってるレイアウト
floatのleft, rightを使えばできるけど、
flexならどうやるの？
flexは左上詰めで流し込みながら間は気にしない、というやり方はやってきたけど、
左右に分かれるって全然わからん・・・

699 ：Name_Not_Found：2021/07/05(月) 08:26:12.68 ID:???.net
space-between

700 ：Name_Not_Found：2021/07/05(月) 09:35:40.46 ID:???.net
>>699
サンクス
space-betweenだと
●　 　 □□
な感じだと
<div>●</div><div>□□</div>
なグループにしないとダメよね？

701 ：Name_Not_Found：2021/07/05(月) 10:01:29.59 ID:sHd+73f3.net
●にmargin-right:auto;か一つ目の□にmargin-left:auto;でいけそう

702 ：Name_Not_Found：2021/07/05(月) 14:00:37.67 ID:???.net
>>698
とりあえず、これ読んでみ

フレックスコンテナー内のアイテムの配置 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

703 ：Name_Not_Found：2021/07/05(月) 19:28:28.35 ID:???.net
Google Fontを必要な文字だけ使う方法で

<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap&text=Hellow World” rel="stylesheet">
上記のように「Hellow World」と入力した文字だけ使う場合に
以下のように被ってる文字だけ無くしたいのですが
Hellow World
↓
Helow Wrd
ないか良い方法ありませんか

704 ：Name_Not_Found：2021/07/05(月) 20:12:38.49 ID:???.net
「Hello World」以外にはGoogle Fontが適用されないようにしたいって話？

705 ：Name_Not_Found：2021/07/05(月) 20:19:13.15 ID:???.net
>>704さん
そうです
「text=」で同じ文字を設定しても良いのかもしれないですが、できる限りスッキリさせたくて。

706 ：Name_Not_Found：2021/07/05(月) 20:32:56.98 ID:UZzXwHtB.net
>>703
uniqが使える言語で
その部分を吐き出せばいいんでね？

707 ：Name_Not_Found：2021/07/05(月) 20:44:48.74 ID:???.net
横だけどGoogleFontsって特定の単語だけに適用ってできるんだね
要所要所にclass名付けて適用させてたわ

708 ：Name_Not_Found：2021/07/05(月) 20:47:23.59 ID:UZzXwHtB.net
まじで？？
そんなことできんの？？？

709 ：Name_Not_Found：2021/07/05(月) 20:51:21.09 ID:???.net
できるよ
text= の後に使う文字だけ羅列していく

710 ：Name_Not_Found：2021/07/05(月) 20:59:35.91 ID:???.net
>>703
被りは削っておｋって記事見つけたよ
実際に試してみたけど大丈夫そうだった

711 ：Name_Not_Found：2021/07/05(月) 21:19:43.17 ID:???.net
>>706
そういう能力がさっぱりなのです

>>710
ありがとうございます
修正が来た際はいちいち削るの止めます

712 ：Name_Not_Found：2021/07/05(月) 21:25:47.95 ID:UZzXwHtB.net
>>711
むしろtext=で指定した文字だけの書体セットをサーバ側が用意して
それをダウンロードするシステムなんだから
文字が被ってても何も変わらないんじゃない？

何もしなくていいんじゃないかと

713 ：Name_Not_Found：2021/07/05(月) 21:54:21.21 ID:???.net
もっと簡単なやり方はないものかな
読み込み時の速度にどれぐらい変化があるのか悩ましいけど一応下記でできたよ

phpの変数へテキストを格納
preg_split等で1文字ずつに細切れにした配列へ格納
array_uniqueで重複した配列を削除
implodeで配列を一行テキストに変換


軽量化気になってGoogleFonts関連の表示確認試してみたけど地味にめんどいね
PCに該当フォントが入ってたら登録漏れているのに気づきにくい
どうやって管理してるんだろ？

714 ：Name_Not_Found：2021/07/05(月) 21:56:50.27 ID:sHd+73f3.net
なんでそんな面倒くさいことしなきゃならんのだ

715 ：Name_Not_Found：2021/07/05(月) 22:08:41.55 ID:???.net
Google Font適用させたい文字列だけspanで括って
そこだけfont-family指定するんじゃダメなの？

716 ：Name_Not_Found：2021/07/05(月) 22:47:47.31 ID:???.net
あ、そういう話じゃないのか

717 ：Name_Not_Found：2021/07/06(火) 00:21:06.87 ID:???.net
>>709
マジカ！708じゃないけどありがとう

718 ：Name_Not_Found：2021/07/06(火) 09:28:13.08 ID:0Gg57PzU.net
>>709
いやそれは
使いたい文字だけのフォントセットをダウンロードする方法でしょう

要所要所にclassつけて適用させなくてもいいってこととは関係ないじゃん

719 ：Name_Not_Found：2021/07/06(火) 09:35:58.76 ID:???.net
もちろんclassでfont-familyは変えないと
日本語webフォントを複数利用してた時はやってた
見出しだけフォント変えたい時とか
日本語フォント複数だとどれくらい重たくなるのか知らんけど

720 ：Name_Not_Found：2021/07/06(火) 19:29:53.85 ID:???.net
>>713
文字被りしてた方がマシな手間ですね
速度計る方法わからんからなんとも言えないですが…

721 ：Name_Not_Found：2021/07/06(火) 19:32:21.35 ID:JlTllEmH.net
>>720
被ると何か問題あるの？
まさかtext=abccと書いたら
4文字分になると思ってないか？

722 ：Name_Not_Found：2021/07/06(火) 22:48:09.17 ID:???.net
text=Hellow Worldでもtext=Helow Wrdでも全く同じスタイルシート帰ってくるんだから高々数バイトのための無駄な努力だね

723 ：Name_Not_Found：2021/07/07(水) 00:19:46.43 ID:???.net
というか、本来はtext=以降は単語じゃなく文字の羅列でいいし
単語間のスペースすら要らないんだけどな

でも体感できるぐらい軽量化するなら、せめてMB単位じゃないと
ただの自己満だわな

724 ：Name_Not_Found：2021/07/07(水) 03:15:07.52 ID:vM38ZguT.net
>>723
いやいや
その羅列に変換しようと
謎の頑張りを見せた質問が>>703

んで、そんなことする必要がないよ
って話をしていたところ

725 ：Name_Not_Found：2021/07/07(水) 03:21:16.14 ID:???.net
text=を使用してた時はuniqからsortでキレイに並べてたな、80文字くらい
単なる自己満足で意味はないw

726 ：Name_Not_Found：2021/07/07(水) 03:27:12.41 ID:???.net
>>722
わざと間違えてるのかよくわからんボケだな

727 ：Name_Not_Found：2021/07/07(水) 03:28:46.31 ID:???.net
>>725
sortまでしちゃうところに自己満足が感じられていいな

728 ：Name_Not_Found：2021/07/07(水) 09:39:59.36 ID:???.net
Bootstrapのフォームで

[　　　]人

という入力項目を作りたいと思います。

<input type="text" class="form-control">
<label>人</label>

として、どうすれば横並びにできるのでしょうか？

729 ：Name_Not_Found：2021/07/07(水) 09:48:26.75 ID:???.net
uniqって何？
えらい人教えて

730 ：Name_Not_Found：2021/07/07(水) 09:52:56.53 ID:???.net
一意

731 ：Name_Not_Found：2021/07/07(水) 09:59:41.57 ID:???.net
昔先輩に「テスト用にランダムなユニークID作ってくれ」と言われて
manko, chinko, unkoとかたくさん組み合わせて作ったら
「頼んだことに対して間違ってはないけど、やり直してくれる？」と言われたわ

732 ：Name_Not_Found：2021/07/07(水) 10:27:32.85 ID:???.net
CWVで高得点出そうとすると色々試したくなるのは分かる
これで得点上がるようならクライアントにアピールできるしな

textが省略なしのHello Worldだったとしてもwebフォント側ではダブり文字を削除する処理はするだろうし単なる文字数減以上の効果はあるだろう
まあ体感できるかと言われると微妙だが得点が変わらないかどうかはやってみないと分からん

733 ：Name_Not_Found：2021/07/07(水) 10:55:45.60 ID:???.net
>>732
話題になってはいるけど
影響度は大きくはないみたいね

でっていうになりそうで怖い

734 ：Name_Not_Found：2021/07/07(水) 10:56:43.80 ID:???.net
>>728
何もしなけりゃ横並びだろう
両者ともインラインだし

735 ：Name_Not_Found：2021/07/07(水) 16:42:57.65 ID:???.net
>>728
というか、それじゃlabelが効かないから
inputをlabelの中に入れよう

736 ：Name_Not_Found：2021/07/07(水) 18:01:29.63 ID:???.net
forを使おう

737 ：Name_Not_Found：2021/07/07(水) 18:16:31.22 ID:???.net
>>735
意味がわかりました。ありがとうございます。

738 ：Name_Not_Found：2021/07/07(水) 18:51:12.76 ID:xmfJ5MwR.net
Edgeでローカルフォルダのリンクを開く時に
Edge内でなくIE11みたいにWindowsのエクスプローラー画面で開くにはどうすれば良いですか？

739 ：Name_Not_Found：2021/07/07(水) 19:49:53.84 ID:???.net
>>738
Edgeで「設定＞既定のブラウザー＞『IEモードでサイトの再読み込みを許可』をON→再起動」
ローカルファイルをEdgeで開いて「メニュー＞その他のツール＞IEモードで再度読み込む」

740 ：Name_Not_Found：2021/07/07(水) 20:13:22.74 ID:???.net
>>732
是非試してくださいな！
結果待ってますわ

741 ：Name_Not_Found：2021/07/08(木) 20:54:48.52 ID:???.net
上からsection並べていって、ページによっては
margin-bottom: 30pxを付けるときがたまにあるんだけど、

1. わざわざ空のsection class="bottomSpacer" なるものを設けるか、
2. よくあるcssに mb30{margin-bottom: 30px}を使うか
3. インラインで書く

迷うわ、mb30とかの羅列されたものを見ると使わないスタイル羅列するのもなぁと思ったけど、
複数クラスにも慣れてきた今、それもありなのかなと

742 ：Name_Not_Found：2021/07/08(木) 23:01:54.28 ID:???.net
>>741
羅列しなきゃ良いじゃん

コスパの問題もあるんだけど
必要な要素に必要なスタイルを書くのが基本だよ

羅列するのはその基本から外れて
CSSが膨れることより、逐一スタイルを書く手間を省く方を取った結果のひとつでしかない

743 ：Name_Not_Found：2021/07/08(木) 23:12:36.59 ID:???.net
sassで@extendつかえばいいんじゃね

744 ：Name_Not_Found：2021/07/08(木) 23:14:48.41 ID:ljOqcmZQ.net
モジュールの基本設定からスタイル微調整したい時の話をしてるんでしょ？

745 ：Name_Not_Found：2021/07/08(木) 23:20:12.00 ID:???.net
という事は2って事で
偶にあるならmb30ってクラス作ってそれを使う方が自然だと思うのだけど

746 ：Name_Not_Found：2021/07/08(木) 23:24:11.99 ID:ljOqcmZQ.net
数字決め打ちにしちゃうとレスポンシブのときカオスになるしmb～みたいな汎用クラスはあんまり使いたくないな

747 ：Name_Not_Found：2021/07/09(金) 01:06:18.86 ID:???.net
【HTML】Bootstrapの基本「マージン」と「パディング」
https://design-studio-f.com/blog/bootstrap-utilities-spacing/

748 ：Name_Not_Found：2021/07/09(金) 01:17:07.65 ID:???.net
>>747
ど素人のためのmarginとpaddingだよな

749 ：Name_Not_Found：2021/07/09(金) 22:43:14.00 ID:???.net
>>747
この手のルール覚えてないといけないのが面倒なんだよ

750 ：Name_Not_Found：2021/07/09(金) 22:50:02.78 ID:???.net
左右をx、上下をyと略すのはゾゾっとしたわ

751 ：Name_Not_Found：2021/07/09(金) 23:15:52.99 ID:???.net
margin-inline、margin-blockに移管せえよ

752 ：Name_Not_Found：2021/07/10(土) 00:46:33.39 ID:???.net
>>750
なんで？
逆の方が変じゃね？

753 ：Name_Not_Found：2021/07/10(土) 00:52:49.69 ID:???.net
理系以外にはx軸y軸は通用しない

754 ：Name_Not_Found：2021/07/10(土) 01:16:21.38 ID:???.net
>>752
アスペで草

755 ：Name_Not_Found：2021/07/10(土) 01:30:17.00 ID:???.net
理系だけってほど幅は狭く無い気がするが
デザイナーや3Dモデラーは縁があるだろうし

756 ：Name_Not_Found：2021/07/10(土) 01:32:16.24 ID:???.net
>>754
意地悪しないでよw
x,yだと何がいかんの？

overflow-xとかevent.offsetXもゾッとしちゃうのん？

757 ：Name_Not_Found：2021/07/10(土) 01:33:07.51 ID:???.net
それだけでなく
translate等もXYZで縁があるだろ

758 ：Name_Not_Found：2021/07/10(土) 04:42:32.79 ID:???.net
svgでも出てくるし

759 ：Name_Not_Found：2021/07/10(土) 12:53:49.61 ID:???.net
なんでゾッとしてるのか、教えてほしい

760 ：Name_Not_Found：2021/07/10(土) 13:02:43.15 ID:???.net
xやyの字形が苦手、とか
w
x
y
て書くとやらしいから、とか、、

761 ：Name_Not_Found：2021/07/10(土) 13:05:02.36 ID:???.net
小学生かよ

762 ：Name_Not_Found：2021/07/10(土) 16:17:42.86 ID:???.net
あー、数学が全く出来なかったんだろう
x, y は数学を思い出すので恐怖心を覚えるとみた

763 ：Name_Not_Found：2021/07/10(土) 16:25:35.25 ID:???.net
中学のグラフでx軸y軸って出てくるんだよなぁ

764 ：Name_Not_Found：2021/07/11(日) 23:14:22.97 ID:???.net
UDPストリーム表示に付いて教えてください。

カメラ映像をVLCプレイヤーのストリーミング（udp://@192.168.12.123:1234）にて表示できています。

小学生が持参するiPadでも見させたいので、HTLMにて記載していますが表示しません。

<html>
<head>
<title>HTML5 Live Streaming Test</title>
</head>
<body>
<video width="640" height="400" controls="controls" src="udp://@192.168.12.123:1234">
</video>
</body>
</html>

videoはUDPストリームに未対応でしょうか？
他に方法が有れば教えて下さい。

765 ：Name_Not_Found：2021/07/11(日) 23:27:10.62 ID:???.net
>>764
ブラウザではUDPはサポートされてない、はず
なのでQuicTransportを経由する必要がある
https://sbfl.net/blog/2020/07/31/web-transport-introduction/

けどそれをしたところで
たぶんブラウザの設定も必要になっちゃうので
キッズのiPadでどうにかなるとは思えんな

766 ：Name_Not_Found：2021/07/11(日) 23:46:37.21 ID:???.net
ストリーミングだと色々面倒だよなぁ
自分ならお手軽にYouTubeの限定公開しちゃうわ

767 ：Name_Not_Found：2021/07/12(月) 03:16:44.07 ID:???.net
>>763
俺はプログラムの座標指定で覚えた

768 ：Name_Not_Found：2021/07/12(月) 06:00:04.03 ID:???.net
英単語-x
英単語-y はわかる

mx, my, px, pyは略し方が短くしすぎて、別の単語になってるし、ということを言いたかったんじゃないかなと

769 ：Name_Not_Found：2021/07/12(月) 06:02:13.39 ID:???.net
それは確かに気持ち悪い

770 ：Name_Not_Found：2021/07/12(月) 06:32:34.77 ID:???.net
ブートストラップにメールエクスチェンジャ、わたし、ピクセル、Pythonが含まれている・・・

771 ：Name_Not_Found：2021/07/12(月) 13:04:49.01 ID:???.net
>>764
iOSのブラウザはHLSしか対応してないはずだからVLCだけでお手軽配信というわけにはいかないかと

772 ：Name_Not_Found：2021/07/12(月) 17:11:49.56 ID:hGsOnYNL.net
https://jsfiddle.net/rL8dh53w/
横並びのために親要素にflex、日付・サブテキストを下付きにするために子要素にもflexを指定して上のようなレイアウトを組んだのですが、この状態でテキスト部分を上揃えにするにはどうしたらよいでしょうか？

意図せず左右の要素間でテキストが中央揃えになってしまって困っています。

773 ：Name_Not_Found：2021/07/12(月) 17:38:00.25 ID:???.net
CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
https://coliss.com/articles/build-websites/operation/css/position-fixed-centering-new-way.html

774 ：Name_Not_Found：2021/07/12(月) 17:38:01.46 ID:kX2S80Ar.net
パソコンで見ると横に広がってたり左右のマージンが取って無かったりと
レスポンシブ未対応のサイトが増えてるんですが、Web制作時に要件に入ってないものなのですか？

コンテンツによってはスマホやタブレットよりパソコンでの閲覧が多いサイトも有ると思うのですが、（特に企業）
レイアウトがガタガタだと商売に支障をきたしそうなものですが

775 ：Name_Not_Found：2021/07/12(月) 18:23:00.50 ID:???.net
いや現在の閲覧率はスマホ9に大してデスクトップが1の割合だ

776 ：Name_Not_Found：2021/07/12(月) 18:30:43.63 ID:???.net
>>772
こういう感じにしたいってこと？
https://jsfiddle.net/hu6r0sxd/

777 ：Name_Not_Found：2021/07/12(月) 18:34:51.32 ID:hGsOnYNL.net
>>776
そうです
やっぱdiv1個追加するしかなさそうですよね
ありがとうございます

778 ：Name_Not_Found：2021/07/12(月) 18:39:51.26 ID:???.net
不思議な書式だなぁと思ったらscssか
いずれ自分もcssなんて使いにくいとか言ってるんだろうか・・

779 ：Name_Not_Found：2021/07/12(月) 19:31:41.59 ID:???.net
俺もタブレット基準でパソコン捨ててるな

昔ながらのPC閲覧の感覚でウィンドウの下に固定サイズ広告出すような無料サイト、早くなくならんなか

780 ：Name_Not_Found：2021/07/12(月) 20:07:26.65 ID:???.net
タブレットってタブレット用に見れるよりPC用そのまま見れる方が需要あるような気がする
個人用のPCは持ってないけどPC用見たいとかそんな需要なんかね
大手でもPC用をタブレットで見せてるよな

781 ：Name_Not_Found：2021/07/12(月) 21:01:24.36 ID:???.net
みんな普段、メディアクエリでレスポンシブ化する時って
PCベースで作ってメディアクエリでモバイル対応させてる？
それともモバイルベースで作ってPC対応させてる？

782 ：Name_Not_Found：2021/07/12(月) 21:26:58.42 ID:???.net
どっちもだめ
開発ツールで自由に幅変更できるでしょ
中途半端から極端な幅まで定期的にランダムに変化させながら開発する
おかしくなったときに手遅れになる前に気づける

783 ：Name_Not_Found：2021/07/12(月) 21:46:38.96 ID:???.net
そういう話じゃないだろ･･･

784 ：Name_Not_Found：2021/07/12(月) 22:11:51.49 ID:???.net
そういう話でしょ
実際いろんなWeb閲覧デバイスのファクターはくっきり別れてるわけじゃないんだから
具体的なもので試すのは本当に最後だけにして開発中や最初は
あえて「何物でもない」環境を再現して抽象的に進めるのがコツだよ

785 ：Name_Not_Found：2021/07/12(月) 22:13:41.60 ID:???.net
指定がなければPCベースで作ってる

786 ：Name_Not_Found：2021/07/12(月) 22:14:39.98 ID:???.net
PC作ってからモバイルファーストにしてPCのレイアウトに収束するようにしてる

787 ：Name_Not_Found：2021/07/12(月) 22:25:49.85 ID:???.net
>>781
デザインがどっちの発想で作られてるかに準じる

788 ：Name_Not_Found：2021/07/12(月) 22:26:55.81 ID:???.net
そもそもモバイルにはノートPCなども含まれる。
モバイルファーストとはレイアウトの話というよりは、
通信やバッテリーへの気配りをするということを勘違いしてはいけない。

789 ：Name_Not_Found：2021/07/12(月) 22:26:59.63 ID:???.net
>>786
モバイルファーストって本来は読み込み順とか優先順位じゃなくて
デザイン段階からの設計思想の話だったんだけどなー

790 ：Name_Not_Found：2021/07/12(月) 22:31:49.50 ID:???.net
今でもそう思われてるでしょ
"デザイン"と表面的なレイアウトの区別が分からない人以外は

791 ：Name_Not_Found：2021/07/12(月) 22:31:59.27 ID:???.net
>>786
わしこれ

792 ：Name_Not_Found：2021/07/12(月) 23:09:56.22 ID:???.net
ん？CSSの書き方の話じゃないの？

793 ：Name_Not_Found：2021/07/12(月) 23:33:25.26 ID:???.net
>>788
通信量とかの配慮はPCモバイル問わずにCWV対策してれば自然とクリアしてるでしょ

794 ：Name_Not_Found：2021/07/12(月) 23:36:39.01 ID:???.net
モバイルファーストで作るとPC用にしたときに間延びすること多くて
PC用作ってからモバイルファースト意識しながらモバイル用作ってる

795 ：Name_Not_Found：2021/07/13(火) 00:54:25.51 ID:???.net
>>773
新しい…だと？

796 ：Name_Not_Found：2021/07/13(火) 02:19:30.21 ID:???.net
insetとか知らんかったゎ

797 ：Name_Not_Found：2021/07/13(火) 02:58:37.77 ID:???.net
>>784
ごめん。そういう話じゃなかった。

開発手順はともかく、結果的に出来たモノは、どちらがメインになってて、どちらをメディアクエリ使って
調整してるのかな？って。
もちろんデザインとかCSSの書き方とかケースバイケースで、メディアクエリ使わないってこともあるだろうし
メディアクエリでの調整が最小限になるように書くとかってこともあるだろうけど、メディアクエリを使う場合とか
使わざるを得ない場合とかに、PCとモバイル、どちらがメディアクエリで調整される対象にしてることが
多いのか？という単純な興味で質問しました。


といっても、ここで多寡を判断できるものでもないですが、色々と参考になりました。
答えてくださった皆さん、ありがとうございました。

798 ：Name_Not_Found：2021/07/13(火) 06:16:39.10 ID:???.net
>>778
SASS なら、ネストで書ける

ul {
display: flex;
> li { border: 1px solid #000; }
}

出力
ul {
display: flex;
}

ul > li {
border: 1px solid #000;
}

799 ：Name_Not_Found：2021/07/13(火) 11:40:18.66 ID:???.net
>>797
必ずメディアクエリ両方同時に書いて
共通な部分だけ外に出す方式

極論すれば
同じものを変形させてる意識がない

800 ：Name_Not_Found：2021/07/13(火) 11:41:16.41 ID:???.net
>>778
使い出したらすぐに
SASSなしで生CSS書けない軟弱な体になるよ( ；∀；)

801 ：Name_Not_Found：2021/07/13(火) 12:54:01.21 ID:???.net
dart sassのuseやforwardの使い方がいまいちぴんと来ない
node sassのimportが使い勝手良すぎると思うんだがなんで廃止になるんだろうっ

802 ：Name_Not_Found：2021/07/13(火) 13:38:01.76 ID:???.net
>>801
ネームスペースとスコープの概念がもたらされるので
数あるパーシャルファイル毎に
あれ？この変数名使ったっけ？
と考えなくて良くなるんだよ

ほんで@forwardは多段インポートしたとき用

803 ：Name_Not_Found：2021/07/13(火) 18:38:35.83 ID:???.net
>>802
レスありがとう
以前ネットで検索して読んだりしたけど良く理解できないんだなあ
使って理解していくしかないですね

804 ：Name_Not_Found：2021/07/13(火) 19:46:32.08 ID:???.net
>>793
量もそうだけどどちらかといえば不安定さを
SW使って吸収してるかってことを言いたかった

805 ：Name_Not_Found：2021/07/13(火) 20:53:46.35 ID:???.net
imgに入れる画像の解像度は全て72や92に統一しておいた方が良いのでしょうか？
ブラウザはpixelサイズで認識するとのことで解像度は関係ないみたいですが
とはいっても一応は揃えておくものですか？

806 ：Name_Not_Found：2021/07/13(火) 22:06:12.55 ID:???.net
72に揃えないと無意味にサイズがでかいゴミ画像ができあがるぞ

807 ：Name_Not_Found：2021/07/13(火) 22:10:18.03 ID:???.net
ん？解像度が違ってもピクセルで取り扱われるのでは？

808 ：Name_Not_Found：2021/07/13(火) 22:17:48.04 ID:???.net
>>807
ファイルサイズだぞ

809 ：Name_Not_Found：2021/07/13(火) 22:20:20.19 ID:???.net
retinaとかの高解像度ディスプレイで問題無く表示されるんなら
いいんじゃない？

810 ：Name_Not_Found：2021/07/13(火) 22:25:39.36 ID:???.net
レティーナは画像に埋め込まれたdpi参照しない定期

811 ：Name_Not_Found：2021/07/13(火) 22:41:36.92 ID:???.net
って思うじゃん？

812 ：Name_Not_Found：2021/07/13(火) 23:31:58.27 ID:???.net
どっちやねん

813 ：Name_Not_Found：2021/07/13(火) 23:47:33.70 ID:???.net
統一するとか考える前に
先ずは見た目な

814 ：Name_Not_Found：2021/07/14(水) 00:24:26.06 ID:???.net
IE不対応、はい解散

815 ：Name_Not_Found：2021/07/14(水) 00:26:39.61 ID:???.net
実際92と72の画像つくって表示させてみりゃわかるだろ

816 ：Name_Not_Found：2021/07/14(水) 00:27:34.00 ID:???.net
今時ほとんど2倍サイズよな

817 ：Name_Not_Found：2021/07/14(水) 01:48:38.10 ID:???.net
解像度関係ないものだと思ってたわ
92dpiと72dpiの同一px数の画像を作って見比べるって事？
レティーナ持ってないので確認できそうにないな

818 ：Name_Not_Found：2021/07/14(水) 02:10:29.00 ID:???.net
ブラウザが画像解像度を解釈できないのにRetinaなら高解像度で表示されるわけないだろ

819 ：Name_Not_Found：2021/07/14(水) 02:35:14.45 ID:???.net
解像度よりピクセル数気にしろ

820 ：Name_Not_Found：2021/07/14(水) 02:57:07.41 ID:???.net
印刷ではなくweb媒体のみでも解像度が影響するって言ってる人は
単位がmmなどのpx以外に設定している想定って事でおｋ？
>>806とか

821 ：Name_Not_Found：2021/07/14(水) 03:07:34.73 ID:???.net
>>820
俺が言ったのはファイルサイズだっつってんだろアホなのか

822 ：Name_Not_Found：2021/07/14(水) 03:09:45.18 ID:???.net
画像サイズがなぜかpxででかくなるんならそれこそスマホ用とかに使えることになるだろ
死ねカス

823 ：Name_Not_Found：2021/07/14(水) 03:22:00.34 ID:???.net
>>805
というか画像はtinyPNGとかでいいから最適化しよう
解像度72dpi以外は破棄されて72になるから

824 ：Name_Not_Found：2021/07/14(水) 03:27:55.31 ID:???.net
webpとやらはどうなの？
ファイルサイズは小さいと言えど
googleから誉められたい専用の形式？

825 ：Name_Not_Found：2021/07/14(水) 03:30:39.67 ID:???.net
でかい画像使うときはwebpにし始めたよ
次世代フォーマット戦争が終わったので一種類ならやってみるかなって感じ
googleのスピードインサイトは小さい画像だとwebpにしても大して圧縮されないのを無視してとにかく次世代フォーマットにしろとか言ってくるが

826 ：Name_Not_Found：2021/07/14(水) 03:53:51.09 ID:???.net
>>824
ieとios14未満が死に絶えるの待ってる

827 ：Name_Not_Found：2021/07/14(水) 06:24:04.15 ID:???.net
なるほど、pdfが息絶えるのを待ってるmicrosoftのxpsみたいなものか

828 ：Name_Not_Found：2021/07/14(水) 14:43:56.99 ID:???.net
時代はavifっしょ

829 ：Name_Not_Found：2021/07/14(水) 23:10:36.40 ID:???.net
webpはweb向けにいい感じ
容量小さいしノイズ少ないし透明化できる

830 ：Name_Not_Found：2021/07/14(水) 23:11:46.98 ID:???.net
>>818
メディアクエリでコントロールできるで。
https://developer.mozilla.org/ja/docs/Web/CSS/@media/resolution

831 ：Name_Not_Found：2021/07/15(木) 01:17:53.13 ID:???.net
jpeg2000のことも思い出してあげてください

832 ：Name_Not_Found：2021/07/15(木) 02:52:37.84 ID:???.net
>>831
アイツはもう死んだ！

833 ：Name_Not_Found：2021/07/15(木) 02:54:25.01 ID:???.net
>>830
やってみた？

834 ：Name_Not_Found：2021/07/15(木) 23:25:23.94 ID:???.net
estee lauder anrcadeのサイトすげーなこれ・・・
canvas使てこんな自由にできるんか

835 ：Name_Not_Found：2021/07/16(金) 00:13:48.75 ID:0LXeFZq/.net
全部動画にしてドラッグで再生位置変えたら簡単だなと思った
実装者は

836 ：Name_Not_Found：2021/07/16(金) 00:30:57.46 ID:???.net
あれこれやれば作れそうって考えつくだけで凄いわ
自分はどういう事をやったら実装できるのか分からないから凄いとしか思えなかった
自分が出来る範囲なんて子供レベルなんだと

837 ：Name_Not_Found：2021/07/16(金) 05:35:39.01 ID:???.net
ちゃんと要件細かく落とし込まれてたら
どういう事をやったら実装できるのかは分かるでしょ
実現したいことからこの完成図を想像できる人は貴重だが

838 ：Name_Not_Found：2021/07/17(土) 18:50:44.70 ID:???.net
test

839 ：Name_Not_Found：2021/07/18(日) 21:13:17.21 ID:???.net
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="./test.png">
<div>てすとてすとてすとてすとてすとてすと</div>
</td>
</tr>
</table>

このようなテーブルがあって
divで囲まれているてすと・・・てすとの幅がtest.pngの幅より大きい場合は
tdの幅を広げないで折り返して表示させるにはどうやればいいんですか？
任意の画像が入るので画像の幅は固定値設定は無理です

840 ：８３９：2021/07/18(日) 21:16:08.36 ID:???.net
tdの幅は常に画像と同じ幅になるようにってことです

841 ：Name_Not_Found：2021/07/18(日) 22:24:09.01 ID:???.net
>>839
td {
width: min-content;
}

842 ：Name_Not_Found：2021/07/18(日) 23:07:40.44 ID:???.net
>>841
それでやったけど
て
す
と
のように縦書きになってしまいました。

843 ：Name_Not_Found：2021/07/18(日) 23:10:35.83 ID:???.net
>>842
それ、画像貼ってないんじゃね？

844 ：Name_Not_Found：2021/07/19(月) 00:08:48.74 ID:???.net
>>843
間違えてdivにwidth: min-content;つけちゃって今度はtdにつけたら
横画書きになったけどテキストが画像の幅を超えてしまって折り返ししませんでした。
画像は幅100pxです。

845 ：Name_Not_Found：2021/07/19(月) 00:13:29.78 ID:???.net
ブラウザによってmin-contentはテーブル等では動かなかったりするから
>>841にdisplay: block; か inline-block; を追加するといいかも

846 ：Name_Not_Found：2021/07/19(月) 00:22:07.32 ID:???.net
というか、imgに対してdivが説明文ってことなら、table使わないか
tdの中をfigureタグとfigcaptionタグ使った方がいいかも

<figure>
<img src="test.png">
<figcaption>てすとてすとてすとてすとてすとてすと</figcaption>
</figure>

figure {
width: min-content;
}

847 ：Name_Not_Found：2021/07/19(月) 00:27:50.30 ID:TTjBkYYP.net
min-contentが使えないブラウザ向けに、 ↑のHTMLソースに対してfigureをdisplay:table;width:100px;にすれば同じ表現になるんじゃないかね
100pxはミニマムの数値に変更すればおk

848 ：８３９：2021/07/19(月) 12:17:23.02 ID:???.net
自己解決しました
tdのwidthを0pxにしたら画像の幅までtdの幅が自動で伸びて
テキストも折り返し表示されるようになりました

849 ：Name_Not_Found：2021/07/19(月) 16:42:09.45 ID:???.net
>>848
それedgeだとはみ出すよ

850 ：Name_Not_Found：2021/07/19(月) 20:54:36.47 ID:???.net
そこまでカッチリ決めたかったらCanvas使お
HTMLは柔軟な表示を許すから価値がある

851 ：Name_Not_Found：2021/07/19(月) 20:59:38.93 ID:???.net
>>849
edge,chrome,IEでためしたけどテキストはみ出なかったよ
半角英数字の長い文字列だとはみ出ちゃうけど

852 ：Name_Not_Found：2021/07/19(月) 21:00:53.55 ID:TTjBkYYP.net
それはword-breakで解決できると思う

853 ：Name_Not_Found：2021/07/19(月) 21:09:29.78 ID:???.net
>>850
canvasだと個々の画像やテキストにリンクを貼ったりフェードインとか
するのが手間かかるから避けたい

854 ：Name_Not_Found：2021/07/19(月) 21:22:06.23 ID:???.net
>>851
マジで？
https://jsfiddle.net/dz0n6bw4/

855 ：Name_Not_Found：2021/07/19(月) 21:55:53.06 ID:???.net
>>854
IE：はみ出ない
firefox：はみ出ない
chrome：はみ出ない
edge：はみ出る
safari（iPhone）：はみ出る

856 ：Name_Not_Found：2021/07/19(月) 23:06:13.51 ID:???.net
おかしいな今見たらedgeだとはみ出てた

857 ：Name_Not_Found：2021/07/19(月) 23:28:56.22 ID:???.net
edgeで画像がはみ出てなかった理由が分かった
隣にtdを３つ作ってそれぞれに画像とテキストを入れてたので
最初のテキストがはみ出ないようになっていたけど
td３つ削除したらはみ出ていた

858 ：Name_Not_Found：2021/07/19(月) 23:59:38.88 ID:???.net
>>857
なるほど

質問者ではないけど、そうなるとtdをwidth:0とmin-content以外の方法って何だろ？
IE対応考えなきゃ、CSSだけでいくらでもやりようはあるんだけど

859 ：Name_Not_Found：2021/07/20(火) 10:04:56.27 ID:???.net
テーブル使わず他の方法でやれば？ｗ

860 ：Name_Not_Found：2021/07/20(火) 10:43:20.85 ID:+6Rtwbxw.net
>>847の方法でEdgeでも問題なかったけどtableタグ使った時と何が違うのかわからん

861 ：Name_Not_Found：2021/07/20(火) 15:53:16.58 ID:???.net
画像幅に合わせて、親要素をwidth: 100px固定にはしたくない
って条件だからな

862 ：Name_Not_Found：2021/07/20(火) 16:19:33.04 ID:???.net
>>860
見た目が同じでも、もしimgと下のdivに画像と説明文の関係があるなら
figureとfigcaption使う方が、より適切ってだけだよ
何ならテーブルセル1つだけで表組してないんだから、table使う意味なんて
があるのか？っていう話でもあるよね
見た目が同じでいいなら、table使わないでdivだけでもいいわけだし

863 ：Name_Not_Found：2021/07/20(火) 16:53:49.45 ID:+6Rtwbxw.net
>>862
いや、タグの役割的な意味でなく、
CSSでdisplay:tableにしたやり方では崩れないのにtableタグで崩れる違いはなんだろうって意味です

864 ：Name_Not_Found：2021/07/20(火) 16:54:53.67 ID:+6Rtwbxw.net
>>861
そのためのdisplay:tableでしょ？
100pxはあくまでミニマム値で中の要素がそれより大きければ自動的に広がるよ

865 ：Name_Not_Found：2021/07/20(火) 17:53:03.81 ID:???.net
>>864
そういうことか
失礼しました

試してみたけどedgeはdisplay:tableにしてwidth:0だとはみ出るけど、width:100pxじゃなく
width:1pxでもはみ出ないね
結局、edgeの場合はwidth:0だとセルとして存在しないって認識されるから、はみ出て
width:1pxでもセルとして存在するなら、子要素のwidthに合わせて伸張するってことなのかな？
しかも、display:tableにしておかないと伸張しないっていう
というか、tableだから伸張するってことなんだろうけど
ということは、全ブラウザ対応の場合はwidth:0じゃなくwidht:1px以上の幅を指定するってのが
正解なのかも？
https://jsfiddle.net/au43v86n/

866 ：Name_Not_Found：2021/07/20(火) 23:14:24.36 ID:???.net
>>853
当たり判定があるパスは
別の裏Canvasにも描画するようにしておく
パスごとに色を変えておけば
ある特定のポイントがどのパスを指しているかが簡単に取れる

アニメーションは色々方法があるけど
例えばWebAnimationAPIが使える
これはView層がDOMのときは直接適応して使えるし、
DOMと分離してタイムライン管理と値の計算だけをやってもらうこともできるので
View層がCanvasでも使える

もちろんそのへんフレームワークとかを作ってもいいけど
自力で書いてもこのくらい１日で作れるよ

867 ：Name_Not_Found：2021/07/20(火) 23:18:42.41 ID:???.net
えー、1日もかかるとか嫌だよ

868 ：Name_Not_Found：2021/07/20(火) 23:39:19.11 ID:???.net
>>862
figureとfigcaptionはIEだとはみ出たと思った

869 ：Name_Not_Found：2021/07/20(火) 23:59:44.67 ID:???.net
>>868
CSSでどこに何をどう設定して？

870 ：Name_Not_Found：2021/07/21(水) 04:08:11.28 ID:???.net
よくあるページの一番上にあるコーポレートカラーの横一文字バーってどのタグを使うのがベスト？
headerタグのnavより上の部分だけど、
sectionなのか、divでheight指定してbackground-colorとかデザインのためだけに何を使えば良いの？

871 ：Name_Not_Found：2021/07/21(水) 07:52:19.51 ID:???.net
>>870
なんでも良いんじゃない？
自分はheaderを使うことがほとんどだけど

872 ：Name_Not_Found：2021/07/21(水) 09:00:12.37 ID:???.net
headerの中に空divで作ってみた

873 ：Name_Not_Found：2021/07/21(水) 09:30:57.12 ID:???.net
>>870
凝ったグラデとかじゃなきゃborder-topじゃね
それか::before

874 ：Name_Not_Found：2021/07/21(水) 09:56:46.48 ID:???.net
>>870
htmlタグでもbodyタグでもいいんでない

875 ：Name_Not_Found：2021/07/22(木) 02:21:32.21 ID:???.net
グラデが使えない時代は画像でやってた

876 ：Name_Not_Found：2021/07/22(木) 02:52:48.26 ID:???.net
>>871-874
ありがとう、いろいろ試してみます

877 ：Name_Not_Found：2021/07/22(木) 11:33:12.52 ID:???.net
横一文字バーってどんなのか教えてほしいです気になって仕方ない

878 ：Name_Not_Found：2021/07/22(木) 13:31:36.24 ID:???.net
横一文字を「よこ　いちもじ」って読んでしまって暫く頭を傾げたけど
「よこいちもんじ」って読むと想像しやすい

fixedにした追尾ナビ等の上に付けたボーダーの事じゃね？

879 ：Name_Not_Found：2021/07/22(木) 15:07:34.16 ID:???.net
おおーこういうのかな？？
https://www.bk.mufg.jp/

880 ：Name_Not_Found：2021/07/22(木) 15:09:23.32 ID:???.net
ボーダーにしか見えん

881 ：Name_Not_Found：2021/07/22(木) 16:13:10.27 ID:???.net
livedoor blogの一番上みたいなやつじゃないの？
こんな感じの
ttp://blog.livedoor.jp/mikaiketsujiken/

882 ：Name_Not_Found：2021/07/22(木) 18:35:13.86 ID:???.net
870です、そういうのです。
文字は入っていない一番上にあるものです

883 ：Name_Not_Found：2021/07/23(金) 12:30:40.20 ID:???.net
1年程離れてたんだが最近の流行りが分からんくなったので何でもいいから教えてくれ

ちょいちょい耳にした程度で把握してるのここまで
環境　vscode scss
ベンダープレフィックスつけるのやめた IE対応やめた
display: grid使うの結構見かける

一昔前はボタンマウスオンすると透明度が上がる効果が多かったが、最近は左から右に背景色が動くアニメーション多いなど

この程度しか把握しとらんの

884 ：Name_Not_Found：2021/07/23(金) 13:10:05.70 ID:???.net
プレフィクスつけるのはやめたらいかんで
まだ必要なプロパティはある

885 ：Name_Not_Found：2021/07/23(金) 13:39:05.82 ID:???.net
うちはもう書かんな。PostCSSとAutoprefixerで十分じゃね？

886 ：Name_Not_Found：2021/07/23(金) 14:16:00.51 ID:???.net
autoprefixerでプレフィクスつけてるじゃん
まさかscss内にプレフィクス書いてたのか

887 ：Name_Not_Found：2021/07/23(金) 14:24:13.99 ID:???.net
node sass非推奨になってdart sass推奨@import使えなくなってかわりに@useや@forwordに

888 ：Name_Not_Found：2021/07/23(金) 18:39:55.11 ID:???.net
>>866
canvasって幅は固定値しか使えないので％指定使えないしstyleで幅指定すると
拡大されたりするので使えん

889 ：Name_Not_Found：2021/07/23(金) 21:58:50.03 ID:???.net
>>888
描画のタイミングでキャンバスがどのくらい拡大されてるかを求めてばいいだけ
描画するオブジェクトの位置や幅が絶対的な物なら拡大分掛ければいいだけだし、
％指定も取得したキャンバスの幅に対して求めればいいだけだから
全然手間かからずそれは実現できるよ

890 ：Name_Not_Found：2021/07/24(土) 10:24:05.66 ID:???.net
>>885
PostCSSでググったらこれが書いてあって心理を読まれてたｗ
・次のCSS？
・またSassみたいなやつ作ったのか
・もうSassで終わりにしようぜ（覚えるの辛い）

891 ：Name_Not_Found：2021/07/24(土) 10:29:18.68 ID:???.net
誰か今っぽいサイト教えてくれんかの？
結構LP系は昔のコテコテのまんまのが多いな

キャンペーン系は結構目新しいデザインや技術使うが、期間おいて後から見ると酷く劣化してるのが多い。
自社更新にでも切り替えるのだろうか。

上場したての新興企業やスタートアップ企業のWEBサイトは結構参考になる事多いが急いで作った感も感じる

892 ：Name_Not_Found：2021/07/24(土) 10:56:23.54 ID:???.net
>>890
scssの変換もやろうと思えばできるだろうけど、SASSの代わりというより
併用する使い方の方が多いんじゃないかな。

893 ：Name_Not_Found：2021/07/24(土) 16:49:36.05 ID:???.net
今っぽいサイトっつっても、デザインに関しては1年やそこらで
そんなに大きく変わらん気も
技術的に新しいものやトレンドなんかは、とりあえずこのスレでも
紹介されてる某サイトでも購読しとけばいいよ

894 ：Name_Not_Found：2021/07/24(土) 18:12:53.59 ID:???.net
親戚が亡くなってこの葬儀場のサイト見ておいて
って見たら1ページものだったわ
スマホで100ページ分の縦ぐらいあって
リンクは全てページ内
こういうのが流行っているのか手抜きなのか雑多というかカオスというか

895 ：Name_Not_Found：2021/07/24(土) 18:50:02.87 ID:???.net
>>891
キャンペーン系は初期しか金出ないから
運用フェイズになると
代理店も制作会社も適当になる、みたいな

896 ：Name_Not_Found：2021/07/24(土) 19:24:41.40 ID:???.net
>>894
PCメインでスマホ意識してない古いサイトを、とりあえず無理矢理
レスポンシブ化だけして、一応スマホでも見られるようにしてみました
みたいな感じだったりして

897 ：Name_Not_Found：2021/07/24(土) 19:31:09.42 ID:???.net
継ぎ足し続けた秘伝のタレになってたりして

898 ：Name_Not_Found：2021/07/25(日) 00:50:21.82 ID:???.net
1ページいくらの制作会社に持ち込んだんじゃねえの
その結果1ページ内に盛り込んだかランサーズあたりの素人に依頼したか

899 ：Name_Not_Found：2021/07/25(日) 19:54:08.84 ID:???.net
１ページいくらで引き受けますよ！って言ってそんな仕事持ち込まれたら地獄やん

900 ：Name_Not_Found：2021/07/25(日) 21:04:02.48 ID:???.net
せめて全ページの容量じゃないとなぁ

901 ：Name_Not_Found：2021/07/25(日) 23:38:48.84 ID:???.net
>>883
Ruby on Rails 6 では、Webpacker, Sprockets を使う。
SCSS もCSS へ変換できるし、Autoprefixer も使える

VSCode なら、拡張機能のLive Sass Compiler とか

Autoprefixer も、webpack, gulp, npm scripts などで使えるのでは？

902 ：Name_Not_Found：2021/07/26(月) 00:09:48.68 ID:???.net
>>901
あ、Rubyは遠慮しておきます

903 ：Name_Not_Found：2021/07/26(月) 02:00:16.85 ID:???.net
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Using_images
var img = new Image(); // 新たな img 要素を作成
img.src = 'myImage.png'; // ソースのパスを設定

jsでこんな感じで事前に画像を読ませてsetTimeoutで既存のimgのsrcを書き換えているサイトがあるんですが
(ネットワークモニタで事前に読んでいるのを確認)
greasemonkey上で新たな画像を読んだ時点でそのパスを取得する方法ってありますか？
読み込ませる部分はfunctionとなっていてimgのオブジェクトにはスコープ的に見えないと思います。

904 ：Name_Not_Found：2021/07/26(月) 02:06:39.27 ID:???.net
こっちで質問した方が早いかも？

+ JavaScript の質問用スレッド vol.121 +
https://mevius.5ch.net/test/read.cgi/hp/1410603104/

905 ：Name_Not_Found：2021/07/26(月) 03:29:55.33 ID:???.net
>>903
手の届かない変数に触るのは無理ぽん

906 ：Name_Not_Found：2021/07/26(月) 04:09:03.64 ID:???.net
ありがとうございます。
ネットワークログにはあったのでDOM以外のこの辺からとる方法があったらいいなと思い質問しました。
諦めます。

907 ：Name_Not_Found：2021/07/26(月) 18:20:43.46 ID:???.net
width:800、overflow:hiddenのdivの中に画像があって
left:-200で画像の座標を左にずらすとする
このとき画像の隠れた部分をこのdivの中の右側に表示するというのは
cssでできたらどうやればいいんですか？

908 ：Name_Not_Found：2021/07/26(月) 19:13:07.63 ID:???.net
overflowかけるなよ

909 ：Name_Not_Found：2021/07/26(月) 19:34:22.70 ID:laM2sIOz.net
left消せばいいんじゃ

910 ：Name_Not_Found：2021/07/26(月) 20:19:45.05 ID:???.net
divの幅が分かってるなら、leftにdivの幅分の値を入れれば？

911 ：Name_Not_Found：2021/07/26(月) 20:28:51.89 ID:???.net
>>901
ありがちょ
Live Sass Compiler つこてるわ

912 ：Name_Not_Found：2021/07/26(月) 20:46:57.37 ID:???.net
やってみたけどなんかズレてるかな
同じ画像並べて親要素にoverflow: hiddenでtransformでずらす
divの幅と画像の幅が同じなら自然になるかね
https://jsfiddle.net/vyLx45t8/1/

913 ：Name_Not_Found：2021/07/26(月) 21:05:39.43 ID:???.net
なんだ、そういう話か

>>912
それにimgのwidthを.boxの幅の300pxにすればよさげ

914 ：Name_Not_Found：2021/07/26(月) 21:09:26.06 ID:???.net
>>913
質問者じゃないから間違っているかも
こういう質問かなと思って

915 ：Name_Not_Found：2021/07/26(月) 21:26:47.72 ID:???.net
>>914
きっとそういう話なんじゃない？

見た目が同じでいいならbackgroundに高さ合わせで画像表示させて
positionを左にズラしてX方向にリピートさせてもいいかも
https://jsfiddle.net/cuqf7tm6/

916 ：Name_Not_Found：2021/07/26(月) 21:32:20.58 ID:???.net
remって使えそうでいざって時にダメだな
パーツを切り出して他のサイトに使いまわしたいときなどに一気に死ぬ

917 ：９０７：2021/07/26(月) 21:40:42.61 ID:???.net
質問誤解されているみたいだけど
３色の１枚の画像を例にすると左側の隠れた部分を右側に出したいっていうのはこういうことです
なのでoverflow:hiddenは必要です
同じ画像を２枚用意して表示するしかないのかな？

918 ：Name_Not_Found：2021/07/26(月) 21:42:20.78 ID:C0mxTbpt.net
あれ？お絵描きで説明したけど消えてた。

919 ：Name_Not_Found：2021/07/26(月) 21:43:34.08 ID:???.net
　
https://o.5ch.net/1ua0w.png

920 ：Name_Not_Found：2021/07/26(月) 21:49:26.80 ID:???.net
つまりどういうこと？

921 ：Name_Not_Found：2021/07/26(月) 21:51:16.32 ID:???.net
こういう感じです
https://o.5ch.net/1ua14.png

922 ：Name_Not_Found：2021/07/26(月) 21:51:40.17 ID:???.net
絵を見る前にエスパーするとCSSでは無理
強引にbackgroundだけでにすればやってやれない事はないけど

923 ：Name_Not_Found：2021/07/26(月) 22:15:54.61 ID:???.net
画像見られないんだが

924 ：Name_Not_Found：2021/07/26(月) 22:57:58.15 ID:???.net
marqueeタグ使えば出来そうｗ

925 ：Name_Not_Found：2021/07/26(月) 22:59:50.31 ID:???.net
>>923
PCのchromeだけど画像見れるよ

926 ：Name_Not_Found：2021/07/26(月) 23:01:44.69 ID:???.net
「marquee html」でググると検索結果の
約 35,700,000 件 （0.44 秒）
の部分がカタカタ動いててワロタｗ
Google粋だな

927 ：Name_Not_Found：2021/07/26(月) 23:02:58.78 ID:???.net
>>925
あ、見れたわ
めんごめんご

928 ：Name_Not_Found：2021/07/26(月) 23:31:07.33 ID:???.net
>>921
右端に画像を置くためのボックスを.image
それをラップするボックスを.wrapとする

<div class="wrap">
<div class="image">
<img>

んで基準幅をたとえば1000px
画像を100px四方
外に50pxはみ出てるとすると

.wrap{
position: relative;
width: 100%;
}

.image{
position: absolute;
right: 0;
top: 0;
width: calc(50px + (100% - 1000px) / 2);
height: 100px;
overfrow: hidden;
}

img{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
}

みたいな感じ
右端でやるときはimgをabsoluteにする必要はないんだけど、左端でやるときは右に寄せないと上手くいかないので必要になる

929 ：Name_Not_Found：2021/07/26(月) 23:31:37.14 ID:???.net
↑をスマホで書く荒業はわりとしんどかった

930 ：Name_Not_Found：2021/07/27(火) 01:29:32.87 ID:???.net
んー、何か違う気が

931 ：Name_Not_Found：2021/07/27(火) 01:31:25.45 ID:???.net
すまんこ

932 ：Name_Not_Found：2021/07/27(火) 01:41:20.52 ID:???.net
backgroundに同じ画像を指定するのはダメなの？
https://jsfiddle.net/2qe9bgkz/

933 ：Name_Not_Found：2021/07/27(火) 02:15:31.83 ID:???.net
画像加工するか

真ん中に一要素、beforeとafterで両隣にimg。
それをz-indexで後ろでどうだろう

934 ：Name_Not_Found：2021/07/27(火) 02:19:21.22 ID:???.net
あ、真ん中の要素が前か
まぁ要するに重ねてみればどうかね

935 ：Name_Not_Found：2021/07/27(火) 03:16:26.18 ID:???.net
コレでもイケる
https://jsfiddle.net/sru21vkj/

936 ：Name_Not_Found：2021/07/27(火) 09:22:10.86 ID:???.net
img要素以外はダメです
やりなおしてくれますか

937 ：Name_Not_Found：2021/07/27(火) 09:40:15.49 ID:???.net
ダメです、やり直しはしません

938 ：Name_Not_Found：2021/07/27(火) 09:56:10.94 ID:???.net
だったら同じimg二つ置いて左右に振り分けりゃいいだけだろ
https://jsfiddle.net/xzhb7054/

939 ：Name_Not_Found：2021/07/27(火) 11:38:13.01 ID:???.net
>>938
怒ってる・・？

940 ：Name_Not_Found：2021/07/27(火) 11:53:03.98 ID:???.net
>>939
怒ってはいない

941 ：Name_Not_Found：2021/07/27(火) 12:48:49.92 ID:???.net
でもなんかちょっとイライラしてるよね・・？

942 ：Name_Not_Found：2021/07/27(火) 12:53:43.57 ID:c9A6YROI.net
感情でソースを書いてはいけない

943 ：Name_Not_Found：2021/07/27(火) 14:46:50.88 ID:???.net
やっぱり怒ってるじゃん

944 ：Name_Not_Found：2021/07/27(火) 15:12:17.89 ID:???.net
>>943
No No No
怒ってないよミキコ
わたし全然怒ってなぁ～いよ
ミキコ smile again?

945 ：Name_Not_Found：2021/07/27(火) 16:26:31.42 ID:???.net
>>944
ほらやっぱり怒ってる！いっつもそう！

946 ：Name_Not_Found：2021/07/27(火) 17:13:09.49 ID:???.net
滑ってるぞ

947 ：Name_Not_Found：2021/07/27(火) 18:29:35.19 ID:???.net
寒いなぁ
面白いと思ってるこのクソ寒さよ

948 ：Name_Not_Found：2021/07/27(火) 19:34:24.41 ID:???.net
面白い

949 ：Name_Not_Found：2021/07/27(火) 19:41:28.79 ID:???.net
>>948
キモ

950 ：Name_Not_Found：2021/07/27(火) 21:48:48.39 ID:???.net
>>949
キモ寒いってまじ？

951 ：Name_Not_Found：2021/07/27(火) 22:22:34.78 ID:iakL12Hf.net
testoshiteii?

952 ：Name_Not_Found：2021/07/28(水) 12:24:43.16 ID:???.net
なんかカッコイイ感じで使えそうなアニメーションない？

953 ：Name_Not_Found：2021/07/28(水) 13:18:32.01 ID:???.net
ない

954 ：Name_Not_Found：2021/07/28(水) 14:40:25.69 ID:???.net
>>952
もうちょっと条件出そう

955 ：Name_Not_Found：2021/07/28(水) 15:24:15.26 ID:???.net
>>954
画像にマウスオンした時の効果で
めっちゃ使いやすいの頼みます

956 ：Name_Not_Found：2021/07/28(水) 16:37:06.84 ID:???.net
>>955
簡単なのだと、こういうやつ？
https://codepen.io/nxworld/pen/ZYNOBZ

957 ：Name_Not_Found：2021/07/28(水) 16:46:22.58 ID:???.net
>>956
そそ
さっき丁度自分もそのサイト見てたわｗ
ありがと

958 ：Name_Not_Found：2021/07/28(水) 16:48:27.93 ID:???.net
IE意識しなくなって良くなったから何でもし放題になって
今まで除外してたプロパティも覚えなおさなあかんから余計大変になった感もあるなｗ

959 ：Name_Not_Found：2021/07/28(水) 16:56:58.83 ID:???.net
なんか最近結局こういうの見てると
https://evering.jp/

昔のflash全盛みたいになってきたと思わん？

こういうのが発展、競い合っていって、最後は映画のプロモーションみたいな映像クリエーターの仕事みたいなサイトになっていったよな？
んでAppleの流れをぶっ壊してシンプルイズベストみたいな感じでflash廃れて簡素なサイトが主流になったばっかだったじゃん。
この流れ繰り返しそうだな。
クリエイターへの要求がエスカレートしてくからまあそれでいいんだが

960 ：Name_Not_Found：2021/07/28(水) 17:15:34.71 ID:???.net
こういうのも。
https://homunculus.jp/

961 ：Name_Not_Found：2021/07/28(水) 19:08:27.01 ID:???.net
たしかにもうflashサイトだわな、ウザ度がmaxだわ。
逆にデジタルネイティブ世代には新鮮でスゲーみたいな感じになるんだろうか

962 ：Name_Not_Found：2021/07/28(水) 19:23:59.48 ID:???.net
そういうのもだけどiPhone12のページも腹立つ
スクロールしても下行かないでアニメーションするやつ
https://www.apple.com/jp/iphone-12/

963 ：Name_Not_Found：2021/07/28(水) 20:04:10.61 ID:???.net
>>957
こういうのは？

Hover Effect Ideas
https://tympanus.net/Development/HoverEffectIdeas/

964 ：Name_Not_Found：2021/07/28(水) 20:23:17.59 ID:V+qn84Bm.net
mix-blend-modeについておしえてちょ

https://codepen.io/dddi/pen/oNWqNEe

hoge2の重なってる部分の文字色をhoge1同様に白色にしたいんだが、どうしたらいっすか？

965 ：Name_Not_Found：2021/07/28(水) 20:25:42.55 ID:???.net
>>963
おお、いいねぇ！！
あんがと！！まさにこういう情報を交換したかったわ
Sarahとか好きだわ

966 ：Name_Not_Found：2021/07/28(水) 20:32:40.36 ID:???.net
>>962
見る分にはいいけどやりたくねぇ...

967 ：Name_Not_Found：2021/07/28(水) 23:44:54.36 ID:???.net
そこまでいくと
ソースみてもどうやってつくるのかさっぱりわからんわ…
jsとcanvasとか使ってるのはわかるんだけど

968 ：Name_Not_Found：2021/07/28(水) 23:59:57.57 ID:???.net
最終的に行きつくのは、TVのCMとか映画のプロモみたいなクオリティで
結局そうなるとガチレベルの映像制作のスキルが無いと太刀打ちできないんだわな

水の液体が手の形に変化して指にリングがハマるとかこんなの映像制作もできなきゃ無理ぽ

969 ：Name_Not_Found：2021/07/29(木) 00:03:46.08 ID:???.net
そんでそのうち効果音とか音楽流し始めるから
シンセサイザーで音作ったり簡単な曲作れってなるぞｗ（JASRACめんどくさいからオリジナルになる）

970 ：Name_Not_Found：2021/07/29(木) 00:09:07.46 ID:???.net
>>969
もう音楽流れてる・・・
https://www.esteelauderanrcade.com/en-us/

971 ：Name_Not_Found：2021/07/29(木) 00:30:43.19 ID:???.net
>>970
すごすぎワロタｗ　ご多分に漏れずボタンクリック時の効果音もある
もうflash後期レベルやん　歴史は繰り返すなー
また誰か止めてくれないともう俺の立場なくなるわｗ

972 ：Name_Not_Found：2021/07/29(木) 00:43:58.21 ID:???.net
よくわかんねえよ化粧品のサイトなのにミニゲームいくつか用意されてるしさなにこれ

973 ：Name_Not_Found：2021/07/29(木) 01:12:17.50 ID:???.net
googleロゴ押したらRPGできるからなぁ

974 ：Name_Not_Found：2021/07/29(木) 03:59:45.51 ID:???.net
フラッシュ時代もここまで凝ったのは
エンジニアによろしくコースだけど
今こんなのコーダーがやらんといけないの？

975 ：Name_Not_Found：2021/07/29(木) 04:07:27.69 ID:???.net
リッチなサイトってgoogleのスコアクソ低そう

976 ：Name_Not_Found：2021/07/29(木) 06:37:28.39 ID:???.net
>>968
うち親会社がCM屋なので
映像をインタラクティブにする相談結構くるわ

俺らが本能的にこれは無理だとか
これは大変そうとか考えて
最初から検討もしないようなアイディアが
遠慮無く来るからなかなか楽しい

977 ：Name_Not_Found：2021/07/29(木) 07:32:06.43 ID:???.net
flash全盛時代と違って今はyoutubeとかで動画見ること増えたしリッチな表現をwebでやるより動画でいいじゃんとは思うけどな

リッチな表現ってユーザー側に学習コストあるじゃん
よほど大手で有名商品扱ってるようなところじゃないと見るのも面倒くさがられそう
時間単位あたりの得られる情報量が減るのはデメリットよね

978 ：Name_Not_Found：2021/07/29(木) 09:20:48.31 ID:???.net
でもなんかおしゃれなんだよ

979 ：Name_Not_Found：2021/07/29(木) 09:49:56.56 ID:???.net
>>978
ユーザー「おっも。離脱」

980 ：Name_Not_Found：2021/07/29(木) 10:12:48.45 ID:???.net
ユーザ「なんじゃこれ、スワイプ離脱～(3秒)」

981 ：Name_Not_Found：2021/07/29(木) 10:33:06.14 ID:???.net
5Gが主流になって重くなくなったら価値観どうなるん？

982 ：Name_Not_Found：2021/07/29(木) 10:35:47.07 ID:???.net
>>978
恐らくこのレベル作れるなら普通のサイト作ってもかなりイケてる感じになるだろうな
ブランディング用の営業用サイトとしても使えるし、予算も高いだろうから作れるに越したことないわ

983 ：Name_Not_Found：2021/07/29(木) 10:59:32.85 ID:???.net
動きがあるとおっとは思うけど冷静に見るとそれおしゃれな動画埋め込みと画像でよくない？ってこともあるしなあ
でも新鮮さがあるうちは話題性があっていいかもしれない
動きのあるサイトばかりになると話題性が薄れてコストに対してリターンが厳しくなりそう

984 ：Name_Not_Found：2021/07/29(木) 11:01:22.37 ID:???.net
でもユーザー置いてけぼりっていう

985 ：Name_Not_Found：2021/07/29(木) 11:34:53.64 ID:???.net
エゴだよそれは！
広告屋の発想だな、ユーザーのことを考えないんだ！

986 ：Name_Not_Found：2021/07/29(木) 12:41:37.42 ID:???.net
>>980
離脱しないでスレ立てよろ

987 ：Name_Not_Found：2021/07/29(木) 12:43:39.66 ID:???.net
<div style="width:90%;height:300px;border:Solid 1px #0000ff">
　　　<div style="width:100%;height:100%;boder:Solid 20px #ff0000">
　　　</div>
</div>

外枠から内枠の線がはみ出てしまいますが
内枠の幅に合わせて外枠の幅が伸びるようにするにはどうすればいいですか？
外枠はtableにした方がいいんですかね？

988 ：Name_Not_Found：2021/07/29(木) 13:26:50.57 ID:???.net
boderになっとるぞ
box-sizingの話け？

989 ：Name_Not_Found：2021/07/29(木) 13:36:08.28 ID:???.net
>>964について感想求む

990 ：Name_Not_Found：2021/07/29(木) 14:40:18.26 ID:???.net
>>989
同じ要素をコピーして重ねて色を変える

991 ：Name_Not_Found：2021/07/29(木) 18:12:57.25 ID:???.net
幅500pxのテーブルでセル１を200pxセル２を300pxにする場合
tableにstyle="width:500px"を書かなくてもいいですか？
<table>
<tr>
<td style="width:200px">aaa</td>
<td style="width:300px">bbb</td>
</tr>
</table>

992 ：Name_Not_Found：2021/07/29(木) 18:47:26.63 ID:???.net
>>986
ぉぅ、980踏んだら立てるのか。
ということで立てたぞ

HTML/CSS のどんな質問にも優しく答えるｽﾚ 48
https://mevius.5ch.net/test/read.cgi/hp/1627551978/

993 ：Name_Not_Found：2021/07/29(木) 18:54:15.45 ID:???.net
>>987
子のdivにbox-sizing: border-box;

994 ：Name_Not_Found：2021/07/29(木) 19:02:15.94 ID:???.net
>>991
書かなくてもいいけど、それだけじゃtableの実際の幅は500pxにはならない

995 ：Name_Not_Found：2021/07/29(木) 21:35:25.81 ID:???.net
tableなんて全部cssで制御しないとレスポンシブ無理だろ

996 ：Name_Not_Found：2021/07/29(木) 22:30:43.13 ID:???.net
うめ

997 ：Name_Not_Found：2021/07/29(木) 23:01:20.57 ID:???.net
うめ

998 ：Name_Not_Found：2021/07/29(木) 23:18:05.34 ID:???.net
梅

999 ：Name_Not_Found：2021/07/30(金) 01:25:18.53 ID:???.net
999もろとこか

1000 ：Name_Not_Found：2021/07/30(金) 01:27:39.27 ID:???.net
質問いいですか？

1001 ：2ch.net投稿限界：Over 1000 Thread
2ch.netからのレス数が1000に到達しました。

総レス数 1001
245 KB
掲示板に戻る 全部 前100 次100 最新50
read.cgi ver.24052200