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

**Name_Not_Found** · 2021/04/08(木) 08:48:14.74

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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

**Name_Not_Found** · 2021/04/08(木) 11:17:00.75

乙レスポンシブ

**Name_Not_Found** · 2021/04/08(木) 13:48:41.10

いちおつ

**Name_Not_Found** · 2021/04/14(水) 03:54:46.84

昔流行った、複数画像を連結して1画像にして
positionでずらす方法ってレスポンシブと相性悪いと思うけど仕方ない？
imgならwidth100％でheightも可変だけど、

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

https://jsfiddle.net/mL75vcas/

**Name_Not_Found** · 2021/04/14(水) 05:43:15.35

何がしたいのかサッパリ

**Name_Not_Found** · 2021/04/14(水) 07:50:40.75

まあ何がしたいのかよくわからないな
floatにCSSスプライトとか、XHTML/CSS2/HTTP1時代のテクニックをなんで今更

**Name_Not_Found** · 2021/04/14(水) 08:44:09.12

>>5-6
すまん、昔のサイトをcssだけ触ってレスポンシブ化しないといけないんだが
連結した画像とbackground-positionを多用しているのもあって、
どうすればいいかなと思って

**Name_Not_Found** · 2021/04/14(水) 10:42:33.72

結論
CSSだけいじってレスポンシブとか都合の良い改変なんてできません

**Name_Not_Found** · 2021/04/14(水) 11:48:18.35

>>6
googleが何十億アクセスもされるトップページで読み込んでるCSSスプライト（今この瞬間も現役）
https://ssl.gstatic.com/gb/images/p2_4b3829c9.png

**Name_Not_Found** · 2021/04/14(水) 12:06:38.03

>>7
レスポンシブ化って言うけど、結果的にどうなって欲しいの？
現状でも、画面幅が小さくなると、画面に入りきらない画像が下に繰り下がるようになってるけど
これもある意味、レスポンシブ化が出来てるってことになるんだけど

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

**Name_Not_Found** · 2021/04/14(水) 12:09:42.10

多分モバイルファーストにってことだろ
スマホで閲覧時に見にくいからスマホに最適化させろとか言われたんじゃね？

**Name_Not_Found** · 2021/04/14(水) 12:30:00.40

>>9
小さい大量のアイコンに使うのは、現代の一番標準的な使い方だが
それがどうしたの？

**Name_Not_Found** · 2021/04/14(水) 12:39:01.44

リンクされてるほんの3レス前も読まんたわけ

**Name_Not_Found** · 2021/04/14(水) 20:11:40.55

>>7
たぶん考えているほど複雑な計算にはならないと思うよ
いくつかのサイトでスプライトやってるけど
そんなに困ったことないし

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

**Name_Not_Found** · 2021/04/14(水) 21:37:28.89

bootstrapは色を変更するとき、自分でクラスを作って指定するんでしょうか？
bootstrapで用意されているものは、primaryみたいな数パターンだけですよね。

**Name_Not_Found** · 2021/04/14(水) 23:03:47.65

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

**Name_Not_Found** · 2021/04/14(水) 23:07:09.55

なら10%でよくねっていう話ですよ

**Name_Not_Found** · 2021/04/14(水) 23:16:16.91

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

**Name_Not_Found** · 2021/04/15(木) 07:02:17.12

>>18
そこでvwですよ

**Name_Not_Found** · 2021/04/15(木) 11:46:55.06

>>15
bootstrap-4.4.1/scss/_variables.scss で、

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

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

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

**Name_Not_Found** · 2021/04/15(木) 22:15:24.58

フォント変えようと思っても変わらない仕様の時ってありますか？
ebayでフォントをキリッとしたのに変えたいんだけど、説明のhtmlいじってもなぜかフォントが変わらない…

**Name_Not_Found** · 2021/04/15(木) 22:43:03.09

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

**Name_Not_Found** · 2021/04/15(木) 22:43:30.90

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

**Name_Not_Found** · 2021/04/15(木) 23:46:01.64

いいよ

**Name_Not_Found** · 2021/04/15(木) 23:46:10.16

インラインだしspanでいいんでない？

**Name_Not_Found** · 2021/04/16(金) 00:23:55.36

>>21
いんぽーたんと

**Name_Not_Found** · 2021/04/16(金) 00:25:53.36

>>16
デザイナーのつくるカンプはあくまで目安
そもそもスマホの機種によって横幅なんて変わるんだから
見た目が同じになれば数値なんてどうでもいいんだよ

**Name_Not_Found** · 2021/04/16(金) 05:40:57.23

ピクセルパーフェクトをやれとか時代遅れも甚だしい

23 · 2021/04/16(金) 08:47:38.99

>>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

**Name_Not_Found** · 2021/04/16(金) 12:35:55.03

>>29
属性値も&は&や&と書くのが正しい

**Name_Not_Found** · 2021/04/16(金) 14:07:45.15

>>28
そう？
webフォント使えるようになってからは
大して困ることもなくなったと思うけどなあ
目分量でやらなきゃならんことがほとんどない

**Name_Not_Found** · 2021/04/16(金) 18:24:10.70

>>29
無視

**Name_Not_Found** · 2021/04/16(金) 18:39:49.20

>>30
後ろの&は&ね

**Name_Not_Found** · 2021/04/16(金) 19:45:11.51

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>

**Name_Not_Found** · 2021/04/16(金) 19:51:51.65

最近てbootstrapからウェブ制作の学習を始める人が多いの？

**Name_Not_Found** · 2021/04/16(金) 20:04:13.61

>>35
cssはある程度出来るんですが、レスポンシブ部分だけ使おうかなと
装飾は自分で作ったほうが楽ですわ

**Name_Not_Found** · 2021/04/16(金) 20:47:37.84

bootstrapのcssに.pl-100なんて書いてないよ

**Name_Not_Found** · 2021/04/16(金) 20:59:19.91

pl-に0から5だよね

**Name_Not_Found** · 2021/04/17(土) 01:03:54.08

そういう細かい調整ができないのがbootstrap

23 · 2021/04/17(土) 01:11:28.96

>>30
>>32-33

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

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

**Name_Not_Found** · 2021/04/17(土) 01:12:31.59

＆amp;でした
掲示板では勝手に&に変更されるのですね

**Name_Not_Found** · 2021/04/17(土) 05:23:52.94

>>39
細かい調整出来ないからこそ、整うとも言えるんですよね

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

**Name_Not_Found** · 2021/04/17(土) 06:22:12.03

ブラウザのF12 開発者ツールを起動して、スタイルを確認すれば？

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

**Name_Not_Found** · 2021/04/17(土) 11:59:08.71

>>42
.pl-?があるのはbootstrap4
5では.ps-?になってる
https://getbootstrap.jp/docs/5.0/migration/

**Name_Not_Found** · 2021/04/17(土) 14:38:04.67

>>44
>>43
どうもです
変わってるんですね
5はまだ記事が少ないみたいでｓ

**Name_Not_Found** · 2021/04/17(土) 18:43:34.62

>>44
まだbootstrap4にしといたほうがいいんでしょうか？

**Name_Not_Found** · 2021/04/17(土) 19:59:44.75

連投すみません。

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>

**Name_Not_Found** · 2021/04/18(日) 00:03:30.63

>>26
誰がEDやねん

**Name_Not_Found** · 2021/04/18(日) 01:27:03.18

ライブラリ書き換えたらライブラリの意味ねーだろ

**Name_Not_Found** · 2021/04/18(日) 01:55:09.51

**Name_Not_Found** · 2021/04/18(日) 05:08:58.57

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

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

**Name_Not_Found** · 2021/04/18(日) 05:52:55.24

>>49
では、１つずつ置き換えるのが普通なんですか？
それほど手間ではないですけどね。

**Name_Not_Found** · 2021/04/18(日) 06:09:24.14

>>51
回答どうも。
テンプレにするしかないんですね。

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

**Name_Not_Found** · 2021/04/18(日) 06:35:37.16

bootstrapやめてフルスクラッチでやってみろよ
そうしたらbootstrapの意味がわかるから

**Name_Not_Found** · 2021/04/18(日) 08:39:02.40

>>53
諦めるの早すぎて草

**Name_Not_Found** · 2021/04/18(日) 12:32:42.31

bootstrapの意味…小回りが利かないとかかな

**Name_Not_Found** · 2021/04/18(日) 14:11:43.89

>>55そこまで必要性はないのではないでしょうか？
>>54
フルスクラッチはやってましたが、レスポンシブ部分を使おうかなと

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

**Name_Not_Found** · 2021/04/18(日) 19:23:18.40

>>57
cssはHTMLとデザインを分けるというのはわかると思うけど、
元来はクラス名が文字や余白の大きさを示すものではないんだわ
bootstrapは効率のためそうしているけど、そうなったらbootstrapを使い始めたら意味がわかりながら使いこなせるはず

**Name_Not_Found** · 2021/04/19(月) 06:21:08.92

>>58
bootstrapではクラス名がそのままCSSの内容を表しますよね
これってデメリットにならないんでしょうか？
これによるメリットがよくわからんのですが

**Name_Not_Found** · 2021/04/19(月) 06:41:31.66

>>59
良く気付いたな
昔はNGだったけど、効率よく金儲けするために数を捌くにはメリットがあるってこった。
もう教えることは無くなってしまった、達者でな。

**Name_Not_Found** · 2021/04/19(月) 07:22:04.82

本来、クラス名は意味や役割で命名すべきなんだが
フレームワーク側では使う側がどんな意味や役割を与えるかわからんからな

**Name_Not_Found** · 2021/04/19(月) 08:59:58.24

>>58,59
20年くらい前から
「右にあるからright」というクラス名を使うべきではない、なぜならスタイルの内容を変えて左にしたら意味不になるからだって論調あるけど

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

**Name_Not_Found** · 2021/04/19(月) 10:11:43.89

>>62
そんな論陣には
「スタイルを左にするならcssの中を変える阿呆。leftクラスを作ってタグのclass属性を変えろ」
と答えるようにしてる

**Name_Not_Found** · 2021/04/19(月) 12:22:10.80

mb10でマージントップ10pxとか、普通に使ってた
ただ、スタイルシートは分かれてたけど

**Name_Not_Found** · 2021/04/19(月) 12:28:11.61

>>62
そんな「テレビ買ったらNHK映るから今は持ってなくても料金払えや」みたいな言い分は納得いかんな

**Name_Not_Found** · 2021/04/19(月) 12:43:15.25

クラス名はつまり変数みたいなもんですよね
bootstrapだと同じ内容の変数を何度も定義してるようなもんじゃないですか？

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

**Name_Not_Found** · 2021/04/19(月) 16:17:11.31

同じ内容の変数を定義する必要がない

**Name_Not_Found** · 2021/04/19(月) 16:55:04.18

.right{ froat: right; }

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

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

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

**Name_Not_Found** · 2021/04/19(月) 17:55:39.70

bootstrapなんか使ってるからいかんのだよ

**Name_Not_Found** · 2021/04/19(月) 18:54:34.75

たしかに
bootstrapを飲んでも飲まれるなとは言ったものだ

**Name_Not_Found** · 2021/04/19(月) 20:29:45.57

メリットがわからないうちは使う必要もないだろうしな

**Name_Not_Found** · 2021/04/19(月) 23:00:37.49

だからスクラッチでやれっていってんの
フルスクラッチでやってたらぶち当たる問題にたいして
bootstrap便利だなと感じる事ができるようになる
さらに使ってくとbootstrap不便だなってなってBEMの方が楽では？となって
さらにやってると結局自分でルール作る方が楽
に落ち着く

**Name_Not_Found** · 2021/04/19(月) 23:04:38.78

フルスクラッチでぶち当たる問題ってなんだ？

**Name_Not_Found** · 2021/04/19(月) 23:44:56.20

>>73
「やべぇ、複数クラス組み合わした方が楽かも知んねぇ」ってなる

**Name_Not_Found** · 2021/04/20(火) 03:06:47.43

bootstrapがセンス悪いのはその通り
正しい答えはsass（scss）を使うこと

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

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

**Name_Not_Found** · 2021/04/20(火) 05:22:31.78

>>75
なんか次元の違うものを並べて比較されるとムズムズする

**Name_Not_Found** · 2021/04/20(火) 05:50:49.87

クラス名を意味や役割で付けると、
名前を考える時間・見返し時間が増える

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

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

**Name_Not_Found** · 2021/04/20(火) 06:01:28.05

>>77
Back to the 1995やね
サイトのデザインも一周回ってシンプルだし
Netscape Navigatorは天国から喜んでいるだろう

**Name_Not_Found** · 2021/04/20(火) 07:14:41.78

>>75
いやbootstrapはsass製のcssフレームワークなんだけど…
まさかそんなことも知らないでそんなトンチンカンなこと言ってるの？

**Name_Not_Found** · 2021/04/20(火) 07:16:34.30

プログラミングの世界には難問が２つある。
キャッシュの不活化、名前付け、そしてオフバイワンエラーだ。

**Name_Not_Found** · 2021/04/20(火) 10:22:06.59

> それでクラス名に、red とか使うようになった。
> 即座に色がわかるから、イメージしやすい
redで赤といっても原色に限らず赤っぽいとかやや暗い赤とか複数出てくると思うがそういう場合はどう付けるんだ？

**Name_Not_Found** · 2021/04/20(火) 10:48:07.34

好きにすればいいんじゃね
クラス名をredとつけたいときは、たいていアラート的なとこだから
なんも考えてないf00だろうと思うけど

**Name_Not_Found** · 2021/04/20(火) 10:48:47.91

.red {
color: red;
background: red;
}

**Name_Not_Found** · 2021/04/20(火) 10:50:09.98

見えねーだろw

**Name_Not_Found** · 2021/04/20(火) 11:58:07.80

>>80
みっつじゃねーか

**Name_Not_Found** · 2021/04/20(火) 13:45:42.47

bootsrapでml-1というクラスを一括変更したい場合、どうすべきなんでしょうか
cssのコアファイルをいじるのはよろしくないし、意味がないんですよね。

**Name_Not_Found** · 2021/04/20(火) 14:17:55.19

>>86
bootstrapのクラスは、上書きしたり、調整したりすること前提だぞ
色々と勘違いしている気がする

**Name_Not_Found** · 2021/04/20(火) 17:18:48.12

>>85
釣られていて草

**Name_Not_Found** · 2021/04/20(火) 17:20:50.64

>>86
君bootstrapやめて、缶詰工場とかで単純作業した方が良いよ
柔軟性が無い馬鹿だから

**Name_Not_Found** · 2021/04/20(火) 17:43:54.13

>>86
手っ取り早いのは
自分のCSSで上書きすることよ

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

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

**Name_Not_Found** · 2021/04/20(火) 19:05:03.69

>>85
それがオフバイワンエラーだ！
勉強になったなｗ

**Name_Not_Found** · 2021/04/20(火) 19:17:05.85

最近はあんまり言わんのかも知れんな
開発ツールも親切だし
開発の仕方、手順も手厚いから
off by oneが個人の手元以外で起こらなくなってるんだろうな

**Name_Not_Found** · 2021/04/20(火) 21:17:06.24

スマホ対応ってbootstrapなくても大丈夫でしょうか？
難しくなければbootstrapやめようかな。

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

**Name_Not_Found** · 2021/04/20(火) 21:52:02.44

うちはbootstrap使ってないけどモバイルファーストチェック通ってるよ

**Name_Not_Found** · 2021/04/20(火) 22:43:32.10

質問です。
CSSを本格的に勉強しようとしています。
（※今まではCMSを使ってCMSの範疇でレイアウト調整していました。）

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

**Name_Not_Found** · 2021/04/20(火) 23:12:56.91

もっと親を信じてあげて…

**Name_Not_Found** · 2021/04/20(火) 23:16:20.06

css分かってた方がいいと思うけど
bootstrap必要になったとき何やればいいか理解しやすいんじゃないかな
あと今TailwindCSSの方が流行ってるらしい

**Name_Not_Found** · 2021/04/21(水) 01:10:08.64

そのうち親に反抗してbootstrapに走るから

**Name_Not_Found** · 2021/04/21(水) 01:11:24.39

>>93
CSSファイルがシンプルになる

**Name_Not_Found** · 2021/04/21(水) 01:38:53.70

bootstrap最大の利点は、世界で一番使われているCSSフレームワークって点なわけで
個人開発だと自分ルールで書いても問題ないから、利点を感じにくいんだよな

**Name_Not_Found** · 2021/04/21(水) 06:00:57.34

>>99
やっぱそのへんの対応って面倒なもんでしょうかね
スマホといっても幅は色々だろうし

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

**Name_Not_Found** · 2021/04/21(水) 06:58:16.19

>>101
俺の管理しているサイトはbootstrap無いおかげで
40000行超えたぞ、別に編集は苦じゃないけどさ

**Name_Not_Found** · 2021/04/21(水) 07:07:02.26

>>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%です。

**Name_Not_Found** · 2021/04/21(水) 12:13:16.99

>>101
そういうのはこの辺チェックしてれば大体わかる

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

**Name_Not_Found** · 2021/04/21(水) 14:05:58.30

>>102
何にそんなに使うんですかね

**Name_Not_Found** · 2021/04/21(水) 14:08:15.13

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

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

**Name_Not_Found** · 2021/04/21(水) 14:20:55.36

>>103
内容は興味深かったから感謝だけど、それは
アンケートに回答するような意識高い系の開発者達が、2020年時点でどれを使ってるかって集計結果な

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

**Name_Not_Found** · 2021/04/21(水) 14:44:06.79

Bootstrap は、有名な会社だし、誰かの日本語文書もあるから

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

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

**Name_Not_Found** · 2021/04/21(水) 14:47:23.51

>>106
今はピクセルパーフェクトってのは無く大体この辺という感じで組めばいい

**Name_Not_Found** · 2021/04/21(水) 15:16:37.25

推奨ＮＧワード： Ruby
推奨ＮＧワード： Rails

**Name_Not_Found** · 2021/04/21(水) 19:15:09.43

>>109
ついついピクセルパーフェクトになってしまうけど
今風なざっくりデザインだとどこに気をつければならないの？
flexで間隔をブラウザに任せるとか？

**Name_Not_Found** · 2021/04/22(木) 03:15:34.03

>>109
なんでそんな面倒なことするのん？
いちいちCSS書くときに「こんなもんかな？」って考えるの無駄な手間かけてまで

**Name_Not_Found** · 2021/04/22(木) 06:31:07.99

>>109
基準は何ピクセルなんでしょうか？
pc版とスマホ版の２つだけでいいんですが、境界線はどこかなーと

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

**Name_Not_Found** · 2021/04/22(木) 06:42:17.36

>>113
そろそろ自分で調べたら？

**Name_Not_Found** · 2021/04/22(木) 07:22:24.41

>>113
ピケセルで考えるのやめた方がいいんでない？

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

**Name_Not_Found** · 2021/04/22(木) 14:15:34.82

>>115
VWというのを調べてみます
でもbootstrap使ったほうが楽ですか？

**Name_Not_Found** · 2021/04/22(木) 15:13:49.93

これまでbootstrap使ってきた人には楽だよ。過去の知識通用するもん。
過去のしがらみ全くない新規が今から採用するメリットあるかと言われたらうーん…
素のCSSやって面倒なこと増えてきたらtailwind使って楽するのが覚えること少なくていいと思うけどな。

**Name_Not_Found** · 2021/04/22(木) 15:13:53.40

>>116
次元の違うものを並べられても困る

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

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

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

**Name_Not_Found** · 2021/04/22(木) 15:17:52.82

んでフレームワークてのはCSSに限らず
そのフレームワークが想定しているケースから逸脱すると、むしろ使う方が面倒なことになりがち

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

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

**Name_Not_Found** · 2021/04/22(木) 15:20:48.33

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

**Name_Not_Found** · 2021/04/22(木) 15:24:11.05

width=device-widthとinitial-scale=1のセットだったわ

**Name_Not_Found** · 2021/04/22(木) 17:05:17.76

>>120
目から鱗の方法論だわｗｗｗ

**Name_Not_Found** · 2021/04/22(木) 17:10:06.25

>>120
サンプル見てみたい

**Name_Not_Found** · 2021/04/22(木) 21:03:54.60

device-widthを500にしたら
initial-scaleは機種ごとに計算しなきゃならんのではないか？

**Name_Not_Found** · 2021/04/22(木) 21:46:04.00

meta viewportをwidth=500にするだけ
initial scaleはなくてOK

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

**Name_Not_Found** · 2021/04/22(木) 22:30:18.46

vw は、画像などが拡大できない。
小さくて見えない場合に、拡大していっても見えないまま

Line のトップページがそう

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

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

**Name_Not_Found** · 2021/04/22(木) 22:45:23.19

へぇ、その辺りは詳しくないから勉強になるわ
未だに表示解像度周りの挙動はよくわからん

**Name_Not_Found** · 2021/04/23(金) 00:04:17.37

潔くていいなぁ

**Name_Not_Found** · 2021/04/23(金) 00:10:36.91

画像はmaxwidthでpx指定とwidthで%指定の併用じゃあかんの？

**Name_Not_Found** · 2021/04/23(金) 01:09:16.46

スマホのサイズもう規格つくって固定にしてくれよ…

**Name_Not_Found** · 2021/04/23(金) 01:14:55.45

スマホで困ることはほぼないけどな
むしろタブレット対応が辛い

**Name_Not_Found** · 2021/04/23(金) 01:39:54.88

タブレットは横900くらいにすれば大体対応だから楽だろ
スマホほど10～20pxの違いの影響なんてないし

**Name_Not_Found** · 2021/04/23(金) 02:27:47.93

タブレットは縦持ちと横持ち両方考慮せんといかんしね
スマホだとほぼ縦持ちオンリーと考えて差し支えないと思うけど

**Name_Not_Found** · 2021/04/23(金) 04:58:40.63

>>126
拡大ってピンチのこと？
たぶんそれはvw関係ないよ

**Name_Not_Found** · 2021/04/23(金) 06:54:56.69

bootstrapなしでレスポンシブつくったほうがいいのかな？
あと、８の倍数がやりやすいらしいねbootstrap

**Name_Not_Found** · 2021/04/23(金) 07:06:04.50

>>135
まずはbootstrapでさっくり作って、重くて嫌になったら普通のSCSSに切り替えたら？
ぶっちゃけ何で作るかより、デザインとコンテンツの方が重要だし
そこで悩むのは時間の無駄よ

**Name_Not_Found** · 2021/04/23(金) 07:07:00.27

>>135
良いか悪いかは自分で決めることだよ
作る人とサイトの数だけ答えは違う

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

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

**Name_Not_Found** · 2021/04/23(金) 07:33:00.13

>>135
コード書かずにグダグダする奴にろくな奴いない

**Name_Not_Found** · 2021/04/23(金) 08:02:30.60

大手でもタブレットとPCで同じ表示にしているの見るにタブレットとPCは分けなくていいんじゃない

**Name_Not_Found** · 2021/04/23(金) 08:07:14.81

>>139
うちの客も
タブレットはPC表示ってのが多いな

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

**Name_Not_Found** · 2021/04/23(金) 11:03:46.20

>>135
一連のレスを見てると、お前さんはどうもフレームワークというものが
どういうものかをまだよく分かってないように見える

**Name_Not_Found** · 2021/04/23(金) 17:21:14.85

いつまで釣り相手するんだよ、入れ食いじゃねーか

**Name_Not_Found** · 2021/04/24(土) 22:29:47.89

CSS初学者が体系的にCSSを学習するのに役立つ書籍・サイトなどを教えて下さいm(_ _)m

**Name_Not_Found** · 2021/04/24(土) 23:23:00.73

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

**Name_Not_Found** · 2021/04/25(日) 00:34:29.48

>>143
https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps

**Name_Not_Found** · 2021/04/25(日) 00:39:25.13

スマホでスクロールしたら、上からヘッダーが「ｽｩ」って降りてくるあれは
transition？

**Name_Not_Found** · 2021/04/25(日) 01:23:47.41

>>146
JavaScriptである程度スクロールしたらヘッダーにクラス付けてして表示してるpageYOffset使えば簡単
cssでは表示されてない時はposition:fixedでtopをマイナスにしてブラウザ表示の外にしてクラスがついた時にtopを0で出てくる感じ
スムーズに動かしたいなら当然transition

**Name_Not_Found** · 2021/04/25(日) 03:58:28.70

>>147
サンクス、やはりどれだけスクロールしたかは
jQueryとかのjs使わないとダメよね。

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

**Name_Not_Found** · 2021/04/25(日) 04:15:32.75

>>148
別にjQはいらんよ
初心者にちょうどいい難易度だと思うよ

**Name_Not_Found** · 2021/04/25(日) 04:51:04.15

>>149
jsで2つのy位置を比較して、差が基準値以上、以下になったら
cssプロパティを変更したらtransition付なら「ｽｩ」って感じかな、と妄想してみる

**Name_Not_Found** · 2021/04/25(日) 04:56:34.49

>>150
scrollTopが設定した閾値を超えているか否かで
要素のクラス付け外し
という関数作っといてonScrollで発火
アニメーションはCSS

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

**Name_Not_Found** · 2021/04/25(日) 05:03:33.22

>>151
ありがとう、感謝です。
しかしこういう常時、値をチェックするようなjsだとブラウザが重くならないのかな
今日日の性能なら無いに等しいぐらい？

**Name_Not_Found** · 2021/04/25(日) 07:00:37.57

チェックボックスについて教えてください。
チェックボックスA
チェックボックスB
チェックボックスC

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

**Name_Not_Found** · 2021/04/25(日) 07:18:21.61

>>153
チェックボックスラジオボタンのように
で検索

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

**Name_Not_Found** · 2021/04/25(日) 07:23:16.29

たし蟹

**Name_Not_Found** · 2021/04/25(日) 07:27:34.82

ありがとうございます。
表の並び替えがあるのですが、
並び替えのルールをチェックボックスで指定しています。
なので、どれかにチェック入れたら、他はチェック入らなくしたかったです。
でもUIとして使いずらいですかね？
webデザインされる方はどのようにしていますか？

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

**Name_Not_Found** · 2021/04/25(日) 07:41:03.82

それならグレーアウトすれば良いぞ

**143** · 2021/04/25(日) 09:03:13.63

>>144-145
ありがとうございます！
そのサイト見ながら自分で色々書いてみます

**Name_Not_Found** · 2021/04/25(日) 12:28:01.05

>>152
頻繁に、関数が呼ばれるのが気になるなら、

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

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

**Name_Not_Found** · 2021/04/25(日) 12:33:18.43

>>152
scrollイベント起きた時だけだから常時ではないしscrollTopの値チェックするだけだからたいした負荷ではない
IE除外できるならintersectionObserver使う方法もあるよ

**Name_Not_Found** · 2021/04/25(日) 12:42:05.43

>>156
ラジオボタンかselectの複数行表示じゃダメなんですか？
他のにチェック入らなくしたら他に変えたい時は選択済みのチェック外してからでないと選べない罠

**Name_Not_Found** · 2021/04/25(日) 12:47:57.43

今のスマホとかPCのスペックならその程度の処理誤差でしょ
SVGも昔は負荷がとか言われてたけど今は普通にあちこちで使われてるし
そんなもんよりターゲティング系のweb広告の方がよほど負荷かかってると思うよ

**Name_Not_Found** · 2021/04/25(日) 13:45:11.59

>>156
HTMLはラジオボタンで作って
見た目だけチェックボックスにすればいいじゃない

**Name_Not_Found** · 2021/04/25(日) 14:02:24.67

>>143
コリスをチェックしてれば大体わかるっしょ
SNSでフォローしとけばTLで更新情報は随時流れてくるし

**Name_Not_Found** · 2021/04/25(日) 15:13:47.65

157
161
163
並び替えは、あくまでオプションなので、選択しなくてもいいため
チェックボタンで、1つチェック入れると他はグレーアウトにします。

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

**Name_Not_Found** · 2021/04/25(日) 15:45:04.52

それなら並び替え無しを選択肢に入れればいいのでは？

**Name_Not_Found** · 2021/04/25(日) 15:50:31.90

並び替えなしがデフォルトで選択されている感じですね。
これはあまり好みじゃないです。

**Name_Not_Found** · 2021/04/25(日) 16:11:12.55

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

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

**Name_Not_Found** · 2021/04/25(日) 16:34:10.02

>>165
であれば、ラジオもチェックも
本来の機能では賄えないので自作が必要

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

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

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

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

**Name_Not_Found** · 2021/04/25(日) 16:38:27.42

>>169 つづき
チェック解除機能を忘れてたすまん

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

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

こんな感じ

**Name_Not_Found** · 2021/04/25(日) 20:48:10.69

>>168
すいません。
>>169
ありがとうございます。

**Name_Not_Found** · 2021/04/25(日) 21:11:18.90

これ、selectで終わる話じゃないの？
なんでcheckboxで実装？

**Name_Not_Found** · 2021/04/25(日) 21:25:48.64

そんな詰まらない独自性をやりたがる顧客っているんだよ
下手に忠告すると逆ギレして営業に文句付けてくるから、忠告なんてするもんじゃないんだよな

**Name_Not_Found** · 2021/04/25(日) 21:35:44.04

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

**Name_Not_Found** · 2021/04/26(月) 12:02:02.26

>>172
UI/UXの観点では
selectは一覧性に欠ける
radioは選択解除ができない
という弱点があるので
それほど間違った要望でもないとは思う

**Name_Not_Found** · 2021/04/26(月) 12:29:02.72

UIとしてはタグクラウドの選択みたいなのになるんやな

**Name_Not_Found** · 2021/04/26(月) 13:36:14.28

>>143
「HTML5 & CSS3デザイン現場の新標準ガイド（第2版）」
「CSS設計完全ガイド　～詳細解説＋実践的モジュール集」

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

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

**Name_Not_Found** · 2021/04/26(月) 19:09:36.58

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

**Name_Not_Found** · 2021/04/26(月) 19:38:05.25

>>178
head内の頭の方に
<meta charset="UTF-8">
を書く

**Name_Not_Found** · 2021/04/26(月) 20:34:43.21

**Name_Not_Found** · 2021/04/26(月) 20:58:08.08

>>180
HTML ガイドライン - MDN プロジェクト | MDN
https://developer.mozilla.org/ja/docs/MDN/Guidelines/Code_guidelines/HTML#document_language

**Name_Not_Found** · 2021/04/26(月) 21:21:05.41

>>180
統一仕様ｲｲﾈ!

**Name_Not_Found** · 2021/04/26(月) 21:33:58.09

>>181
まず大前提としてMDNに書いてあることは個人レベルの意見だから
誰もが参考にするべきものではない

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

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

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

**Name_Not_Found** · 2021/04/26(月) 21:37:23.81

必要性はともかく、>>178を解決する答えにはなってないわな

**Name_Not_Found** · 2021/04/26(月) 21:38:56.44

しかしmetaかhttpヘッダにcharset書いてないと実際に化ける事があるわけだが？

**Name_Not_Found** · 2021/04/26(月) 21:51:38.89

実際とは？

**Name_Not_Found** · 2021/04/26(月) 22:11:04.15

HTML LSだとcharsetにはutf8しか指定できないし
指定しなかったらutf8になるので不要ということだろう
一方HTML4時代のブラウザを相手にするなら必要
とは言えそれなら<meta http-equiv="Content-Type" ......
と書かないといけない

**Name_Not_Found** · 2021/04/26(月) 22:31:28.09

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>

**Name_Not_Found** · 2021/04/26(月) 23:37:52.30

お題目とか定型文みたいなもんで、無いよりはあった方が良いって程度のもんなんだから
とりあえず書いとけよ

**Name_Not_Found** · 2021/04/26(月) 23:58:26.03

無駄なものは省くってコーディングに限らず仕事の基本だと思うし
万が一これが必要な状況と環境になったとして
その環境じゃCSSもJSもそのサイトの機能がまともに機能しない可能性が高いとは思うが

**Name_Not_Found** · 2021/04/27(火) 00:01:11.82

>>188
> <meta http-equiv="X-UA-Compatible" content="IE=edge">

これもいらないらしいね

**Name_Not_Found** · 2021/04/27(火) 00:06:49.46

無駄かどうかは分からない
HTMLファイルがBOMから始まっておらず、HTTPなどで指定もされない場合は
metaタグで指定する必要がある

**Name_Not_Found** · 2021/04/27(火) 00:17:27.88

まぁ、偉そうに要らねぇだの講釈垂れてないで
解決のための現実的な回答してやれや

**Name_Not_Found** · 2021/04/27(火) 00:22:19.12

議論を遮ってすまんが

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

**Name_Not_Found** · 2021/04/27(火) 00:22:34.28

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

**178** · 2021/04/27(火) 00:40:00.16

私のために多くのレス数を割いて議論して下さりありがとうございます
meta charset … を入力したらあっさり解消しました
お手数を掛けてすいませんでしたm(_ _)m

**Name_Not_Found** · 2021/04/27(火) 01:01:29.40

doctypeの指定によってはブラウザが後方互換モードになるからな。
そうするとhtml4時代の記述が有効に動いたりする。

**Name_Not_Found** · 2021/04/27(火) 02:59:01.27

>>196
いいってことよ
誰でも最初は初心者だわ
おまいさんも来年は教える側になるだろう

**Name_Not_Found** · 2021/04/27(火) 03:39:37.00

>>195
お前みたいなのは、回答者には向いてないので
別に答えなくていいよ

**Name_Not_Found** · 2021/04/27(火) 06:47:09.76

>>199
俺の言ったとおり解決したじゃないか
君はオナニーが好きみたいだけど
それはチラ裏にお願いね