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/07/20(火) 23:18:42.41

えー、1日もかかるとか嫌だよ

**Name_Not_Found** · 2021/07/20(火) 23:39:19.11

>>862
figureとfigcaptionはIEだとはみ出たと思った

**Name_Not_Found** · 2021/07/20(火) 23:59:44.67

>>868
CSSでどこに何をどう設定して？

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

よくあるページの一番上にあるコーポレートカラーの横一文字バーってどのタグを使うのがベスト？
headerタグのnavより上の部分だけど、
sectionなのか、divでheight指定してbackground-colorとかデザインのためだけに何を使えば良いの？

**Name_Not_Found** · 2021/07/21(水) 07:52:19.51

>>870
なんでも良いんじゃない？
自分はheaderを使うことがほとんどだけど

**Name_Not_Found** · 2021/07/21(水) 09:00:12.37

headerの中に空divで作ってみた

**Name_Not_Found** · 2021/07/21(水) 09:30:57.12

>>870
凝ったグラデとかじゃなきゃborder-topじゃね
それか::before

**Name_Not_Found** · 2021/07/21(水) 09:56:46.48

>>870
htmlタグでもbodyタグでもいいんでない

**Name_Not_Found** · 2021/07/22(木) 02:21:32.21

グラデが使えない時代は画像でやってた

**Name_Not_Found** · 2021/07/22(木) 02:52:48.26

>>871-874
ありがとう、いろいろ試してみます

**Name_Not_Found** · 2021/07/22(木) 11:33:12.52

横一文字バーってどんなのか教えてほしいです気になって仕方ない

**Name_Not_Found** · 2021/07/22(木) 13:31:36.24

横一文字を「よこ　いちもじ」って読んでしまって暫く頭を傾げたけど
「よこいちもんじ」って読むと想像しやすい

fixedにした追尾ナビ等の上に付けたボーダーの事じゃね？

**Name_Not_Found** · 2021/07/22(木) 15:07:34.16

おおーこういうのかな？？
https://www.bk.mufg.jp/

**Name_Not_Found** · 2021/07/22(木) 15:09:23.32

ボーダーにしか見えん

**Name_Not_Found** · 2021/07/22(木) 16:13:10.27

livedoor blogの一番上みたいなやつじゃないの？
こんな感じの
ttp://blog.livedoor.jp/mikaiketsujiken/

**Name_Not_Found** · 2021/07/22(木) 18:35:13.86

870です、そういうのです。
文字は入っていない一番上にあるものです

**Name_Not_Found** · 2021/07/23(金) 12:30:40.20

1年程離れてたんだが最近の流行りが分からんくなったので何でもいいから教えてくれ

ちょいちょい耳にした程度で把握してるのここまで
環境　vscode scss
ベンダープレフィックスつけるのやめた IE対応やめた
display: grid使うの結構見かける

一昔前はボタンマウスオンすると透明度が上がる効果が多かったが、最近は左から右に背景色が動くアニメーション多いなど

この程度しか把握しとらんの

**Name_Not_Found** · 2021/07/23(金) 13:10:05.70

プレフィクスつけるのはやめたらいかんで
まだ必要なプロパティはある

**Name_Not_Found** · 2021/07/23(金) 13:39:05.82

うちはもう書かんな。PostCSSとAutoprefixerで十分じゃね？

**Name_Not_Found** · 2021/07/23(金) 14:16:00.51

autoprefixerでプレフィクスつけてるじゃん
まさかscss内にプレフィクス書いてたのか

**Name_Not_Found** · 2021/07/23(金) 14:24:13.99

node sass非推奨になってdart sass推奨@import使えなくなってかわりに@useや@forwordに

**Name_Not_Found** · 2021/07/23(金) 18:39:55.11

>>866
canvasって幅は固定値しか使えないので％指定使えないしstyleで幅指定すると
拡大されたりするので使えん

**Name_Not_Found** · 2021/07/23(金) 21:58:50.03

>>888
描画のタイミングでキャンバスがどのくらい拡大されてるかを求めてばいいだけ
描画するオブジェクトの位置や幅が絶対的な物なら拡大分掛ければいいだけだし、
％指定も取得したキャンバスの幅に対して求めればいいだけだから
全然手間かからずそれは実現できるよ

**Name_Not_Found** · 2021/07/24(土) 10:24:05.66

>>885
PostCSSでググったらこれが書いてあって心理を読まれてたｗ
・次のCSS？
・またSassみたいなやつ作ったのか
・もうSassで終わりにしようぜ（覚えるの辛い）

**Name_Not_Found** · 2021/07/24(土) 10:29:18.68

誰か今っぽいサイト教えてくれんかの？
結構LP系は昔のコテコテのまんまのが多いな

キャンペーン系は結構目新しいデザインや技術使うが、期間おいて後から見ると酷く劣化してるのが多い。
自社更新にでも切り替えるのだろうか。

上場したての新興企業やスタートアップ企業のWEBサイトは結構参考になる事多いが急いで作った感も感じる

**Name_Not_Found** · 2021/07/24(土) 10:56:23.54

>>890
scssの変換もやろうと思えばできるだろうけど、SASSの代わりというより
併用する使い方の方が多いんじゃないかな。

**Name_Not_Found** · 2021/07/24(土) 16:49:36.05

今っぽいサイトっつっても、デザインに関しては1年やそこらで
そんなに大きく変わらん気も
技術的に新しいものやトレンドなんかは、とりあえずこのスレでも
紹介されてる某サイトでも購読しとけばいいよ

**Name_Not_Found** · 2021/07/24(土) 18:12:53.59

親戚が亡くなってこの葬儀場のサイト見ておいて
って見たら1ページものだったわ
スマホで100ページ分の縦ぐらいあって
リンクは全てページ内
こういうのが流行っているのか手抜きなのか雑多というかカオスというか

**Name_Not_Found** · 2021/07/24(土) 18:50:02.87

>>891
キャンペーン系は初期しか金出ないから
運用フェイズになると
代理店も制作会社も適当になる、みたいな

**Name_Not_Found** · 2021/07/24(土) 19:24:41.40

>>894
PCメインでスマホ意識してない古いサイトを、とりあえず無理矢理
レスポンシブ化だけして、一応スマホでも見られるようにしてみました
みたいな感じだったりして

**Name_Not_Found** · 2021/07/24(土) 19:31:09.42

継ぎ足し続けた秘伝のタレになってたりして

**Name_Not_Found** · 2021/07/25(日) 00:50:21.82

1ページいくらの制作会社に持ち込んだんじゃねえの
その結果1ページ内に盛り込んだかランサーズあたりの素人に依頼したか

**Name_Not_Found** · 2021/07/25(日) 19:54:08.84

１ページいくらで引き受けますよ！って言ってそんな仕事持ち込まれたら地獄やん

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

せめて全ページの容量じゃないとなぁ

**Name_Not_Found** · 2021/07/25(日) 23:38:48.84

>>883
Ruby on Rails 6 では、Webpacker, Sprockets を使う。
SCSS もCSS へ変換できるし、Autoprefixer も使える

VSCode なら、拡張機能のLive Sass Compiler とか

Autoprefixer も、webpack, gulp, npm scripts などで使えるのでは？

**Name_Not_Found** · 2021/07/26(月) 00:09:48.68

>>901
あ、Rubyは遠慮しておきます

**Name_Not_Found** · 2021/07/26(月) 02:00:16.85

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のオブジェクトにはスコープ的に見えないと思います。

**Name_Not_Found** · 2021/07/26(月) 02:06:39.27

こっちで質問した方が早いかも？

+ JavaScript の質問用スレッド vol.121 +
https://mevius.5ch.net/test/read.cgi/hp/1410603104/

**Name_Not_Found** · 2021/07/26(月) 03:29:55.33

>>903
手の届かない変数に触るのは無理ぽん

**Name_Not_Found** · 2021/07/26(月) 04:09:03.64

ありがとうございます。
ネットワークログにはあったのでDOM以外のこの辺からとる方法があったらいいなと思い質問しました。
諦めます。

**Name_Not_Found** · 2021/07/26(月) 18:20:43.46

width:800、overflow:hiddenのdivの中に画像があって
left:-200で画像の座標を左にずらすとする
このとき画像の隠れた部分をこのdivの中の右側に表示するというのは
cssでできたらどうやればいいんですか？

**Name_Not_Found** · 2021/07/26(月) 19:13:07.63

overflowかけるなよ

**Name_Not_Found** · 2021/07/26(月) 19:34:22.70

left消せばいいんじゃ

**Name_Not_Found** · 2021/07/26(月) 20:19:45.05

divの幅が分かってるなら、leftにdivの幅分の値を入れれば？

**Name_Not_Found** · 2021/07/26(月) 20:28:51.89

>>901
ありがちょ
Live Sass Compiler つこてるわ

**Name_Not_Found** · 2021/07/26(月) 20:46:57.37

やってみたけどなんかズレてるかな
同じ画像並べて親要素にoverflow: hiddenでtransformでずらす
divの幅と画像の幅が同じなら自然になるかね
https://jsfiddle.net/vyLx45t8/1/

**Name_Not_Found** · 2021/07/26(月) 21:05:39.43

なんだ、そういう話か

>>912
それにimgのwidthを.boxの幅の300pxにすればよさげ

**Name_Not_Found** · 2021/07/26(月) 21:09:26.06

>>913
質問者じゃないから間違っているかも
こういう質問かなと思って

**Name_Not_Found** · 2021/07/26(月) 21:26:47.72

>>914
きっとそういう話なんじゃない？

見た目が同じでいいならbackgroundに高さ合わせで画像表示させて
positionを左にズラしてX方向にリピートさせてもいいかも
https://jsfiddle.net/cuqf7tm6/

**Name_Not_Found** · 2021/07/26(月) 21:32:20.58

remって使えそうでいざって時にダメだな
パーツを切り出して他のサイトに使いまわしたいときなどに一気に死ぬ

**９０７** · 2021/07/26(月) 21:40:42.61

質問誤解されているみたいだけど
３色の１枚の画像を例にすると左側の隠れた部分を右側に出したいっていうのはこういうことです
なのでoverflow:hiddenは必要です
同じ画像を２枚用意して表示するしかないのかな？

**Name_Not_Found** · 2021/07/26(月) 21:42:20.78

あれ？お絵描きで説明したけど消えてた。

**Name_Not_Found** · 2021/07/26(月) 21:43:34.08

**Name_Not_Found** · 2021/07/26(月) 21:49:26.80

つまりどういうこと？

**Name_Not_Found** · 2021/07/26(月) 21:51:16.32

こういう感じです

**Name_Not_Found** · 2021/07/26(月) 21:51:40.17

絵を見る前にエスパーするとCSSでは無理
強引にbackgroundだけでにすればやってやれない事はないけど

**Name_Not_Found** · 2021/07/26(月) 22:15:54.61

画像見られないんだが

**Name_Not_Found** · 2021/07/26(月) 22:57:58.15

marqueeタグ使えば出来そうｗ

**Name_Not_Found** · 2021/07/26(月) 22:59:50.31

>>923
PCのchromeだけど画像見れるよ

**Name_Not_Found** · 2021/07/26(月) 23:01:44.69

「marquee html」でググると検索結果の
約 35,700,000 件（0.44 秒）
の部分がカタカタ動いててワロタｗ
Google粋だな

**Name_Not_Found** · 2021/07/26(月) 23:02:58.78

>>925
あ、見れたわ
めんごめんご

**Name_Not_Found** · 2021/07/26(月) 23:31:07.33

>>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にする必要はないんだけど、左端でやるときは右に寄せないと上手くいかないので必要になる

**Name_Not_Found** · 2021/07/26(月) 23:31:37.14

↑をスマホで書く荒業はわりとしんどかった

**Name_Not_Found** · 2021/07/27(火) 01:29:32.87

んー、何か違う気が

**Name_Not_Found** · 2021/07/27(火) 01:31:25.45

すまんこ

**Name_Not_Found** · 2021/07/27(火) 01:41:20.52

backgroundに同じ画像を指定するのはダメなの？
https://jsfiddle.net/2qe9bgkz/

**Name_Not_Found** · 2021/07/27(火) 02:15:31.83

画像加工するか

真ん中に一要素、beforeとafterで両隣にimg。
それをz-indexで後ろでどうだろう

**Name_Not_Found** · 2021/07/27(火) 02:19:21.22

あ、真ん中の要素が前か
まぁ要するに重ねてみればどうかね

**Name_Not_Found** · 2021/07/27(火) 03:16:26.18

コレでもイケる
https://jsfiddle.net/sru21vkj/

**Name_Not_Found** · 2021/07/27(火) 09:22:10.86

img要素以外はダメです
やりなおしてくれますか

**Name_Not_Found** · 2021/07/27(火) 09:40:15.49

ダメです、やり直しはしません

**Name_Not_Found** · 2021/07/27(火) 09:56:10.94

だったら同じimg二つ置いて左右に振り分けりゃいいだけだろ
https://jsfiddle.net/xzhb7054/

**Name_Not_Found** · 2021/07/27(火) 11:38:13.01

>>938
怒ってる・・？

**Name_Not_Found** · 2021/07/27(火) 11:53:03.98

>>939
怒ってはいない

**Name_Not_Found** · 2021/07/27(火) 12:48:49.92

でもなんかちょっとイライラしてるよね・・？

**Name_Not_Found** · 2021/07/27(火) 12:53:43.57

感情でソースを書いてはいけない

**Name_Not_Found** · 2021/07/27(火) 14:46:50.88

やっぱり怒ってるじゃん

**Name_Not_Found** · 2021/07/27(火) 15:12:17.89

>>943
No No No
怒ってないよミキコ
わたし全然怒ってなぁ～いよ
ミキコ smile again?

**Name_Not_Found** · 2021/07/27(火) 16:26:31.42

>>944
ほらやっぱり怒ってる！いっつもそう！

**Name_Not_Found** · 2021/07/27(火) 17:13:09.49

滑ってるぞ

**Name_Not_Found** · 2021/07/27(火) 18:29:35.19

寒いなぁ
面白いと思ってるこのクソ寒さよ

**Name_Not_Found** · 2021/07/27(火) 19:34:24.41

面白い

**Name_Not_Found** · 2021/07/27(火) 19:41:28.79

>>948
キモ

**Name_Not_Found** · 2021/07/27(火) 21:48:48.39

>>949
キモ寒いってまじ？

**Name_Not_Found** · 2021/07/27(火) 22:22:34.78

testoshiteii?

**Name_Not_Found** · 2021/07/28(水) 12:24:43.16

なんかカッコイイ感じで使えそうなアニメーションない？

**Name_Not_Found** · 2021/07/28(水) 13:18:32.01

ない

**Name_Not_Found** · 2021/07/28(水) 14:40:25.69

>>952
もうちょっと条件出そう

**Name_Not_Found** · 2021/07/28(水) 15:24:15.26

>>954
画像にマウスオンした時の効果で
めっちゃ使いやすいの頼みます

**Name_Not_Found** · 2021/07/28(水) 16:37:06.84

>>955
簡単なのだと、こういうやつ？
https://codepen.io/nxworld/pen/ZYNOBZ

**Name_Not_Found** · 2021/07/28(水) 16:46:22.58

>>956
そそ
さっき丁度自分もそのサイト見てたわｗ
ありがと

**Name_Not_Found** · 2021/07/28(水) 16:48:27.93

IE意識しなくなって良くなったから何でもし放題になって
今まで除外してたプロパティも覚えなおさなあかんから余計大変になった感もあるなｗ

**Name_Not_Found** · 2021/07/28(水) 16:56:58.83

なんか最近結局こういうの見てると
https://evering.jp/

昔のflash全盛みたいになってきたと思わん？

こういうのが発展、競い合っていって、最後は映画のプロモーションみたいな映像クリエーターの仕事みたいなサイトになっていったよな？
んでAppleの流れをぶっ壊してシンプルイズベストみたいな感じでflash廃れて簡素なサイトが主流になったばっかだったじゃん。
この流れ繰り返しそうだな。
クリエイターへの要求がエスカレートしてくからまあそれでいいんだが

**Name_Not_Found** · 2021/07/28(水) 17:15:34.71

こういうのも。
https://homunculus.jp/

**Name_Not_Found** · 2021/07/28(水) 19:08:27.01

たしかにもうflashサイトだわな、ウザ度がmaxだわ。
逆にデジタルネイティブ世代には新鮮でスゲーみたいな感じになるんだろうか

**Name_Not_Found** · 2021/07/28(水) 19:23:59.48

そういうのもだけどiPhone12のページも腹立つ
スクロールしても下行かないでアニメーションするやつ
https://www.apple.com/jp/iphone-12/

**Name_Not_Found** · 2021/07/28(水) 20:04:10.61

>>957
こういうのは？

Hover Effect Ideas
https://tympanus.net/Development/HoverEffectIdeas/

**Name_Not_Found** · 2021/07/28(水) 20:23:17.59

mix-blend-modeについておしえてちょ

https://codepen.io/dddi/pen/oNWqNEe

hoge2の重なってる部分の文字色をhoge1同様に白色にしたいんだが、どうしたらいっすか？

**Name_Not_Found** · 2021/07/28(水) 20:25:42.55

>>963
おお、いいねぇ！！
あんがと！！まさにこういう情報を交換したかったわ
Sarahとか好きだわ

**Name_Not_Found** · 2021/07/28(水) 20:32:40.36

>>962
見る分にはいいけどやりたくねぇ...