HTML/CSS のどんな質問にも優しく答えるｽﾚ 48
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 47
https://mevius.5ch.net/test/read.cgi/hp/1617839294/
■関連スレ
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 済まぬ前スレからなのだが
*************************************
mix-blend-modeについておしえてちょ
https://codepen.io/dddi/pen/oNWqNEe
hoge2の重なってる部分の文字色をhoge1同様に白色にしたいんだが、どうしたらいっすか？
*************************************
ひょっとして普通にやっても白には出来ないって事？
hoge1にできてhoge2では無理な理由をおしえてちょ >>3
フォトショでおなじようにオブジェクト作って試してみれば >>4
フォトショだとmix-blend-mode: difference;は「差の絶対値」でいいんかな？
背景色に対して文字色に補色指定するとhoge1は無彩色の白（#fff）で
hoge2は有彩色のピンク（#ff33ff）になる意味が分からん。
逆に文字色が無彩色の白（#fff）になるようにするには背景色はどういう色相までが白なのかとか考えてまうわ
結論：よくわかんね つかこれからのデザインで
背景色に重なってる部分の色を自動的に白色にしたいって普通に必要になるだろ？
なんでみんなこの内容に乗り気じゃないんだｗ
後で絶対やらされるぞ やったことあるけど自動はまだ無理だぞ
文字なら同じ内容を二つ重ねたりする必要がある そもそも「特定の色にしたい」はmix-brend-modeの仕事じゃない
clip-pathとかでがんばれ mix-blend-modeの差の絶対値じゃ特定の色じゃないと
白抜きは無理だろうなぁ >>10
その特定の色の基準が分からん
具体的にどこからどの範囲までの色？ おまいらうだうだ言ってないでサンプル作って見せてくれよｗ >>11
範囲っていうか、差の絶対値だから、白抜きなら背景色と文字色の
絶対値の差が#ffffffになればいいってことでしょ？
https://jsfiddle.net/pnkut9v5/ >>11
元となる色情報が分からないと出しようがなくね？ >>11
できないっつってんだろ
諦めて白いオブジェクトを作れ IE11が死んだ今、尖ったサイトでなければ
--webkitみたいなブラウザ依存は使わなくても良い？ >>18
モノによるとしか
んで自分で気にしなくても
browserslistrcにお任せするのが
楽で安全だと思ってる >>15
だからその元となる色の範囲をしりたいんだってばさ。
a＋b＝白
白＝X+Yが成り立つXは何色であり、その範囲は色相環のどこからどこまでかという事。
色の基礎知識無いと意味不明かもしれんぞ >>17
>>13ができてるじゃねーかよ
偉そうに 今週のテーマmix-blend-mode
こういう機会でもないとこんなマイナーなの仕組み理解とか試さんし忘れるから
いい機会やん mix-blend-modeのdifference（差の絶対値）の計算は
例えば背景が#ff00ffで文字が#00ff00だったら、RGBはそれぞれ
分かりやすく書くと
R→|0xff - 0x00| = 0xff
G→|0x00 - 0xff| = 0xff
B→|0xff - 0x00| = 0xff
になるから、背景と文字が重なる部分は#ffffffの白抜きになる
絶対値が必ず0xffになるのは、背景か文字のいずれかが
0x00と0xffになる組み合わせしかない
よって、差の絶対値で白抜きに出来る色は8通りかな？
で、更にそこから色を変えたければ、>>3の親要素にfilterかけて
好きな色に変えればいい みなさんnext.jsとかnuxt.js業務で使ってます？ >>24
完璧な回答ありがとう
正直、ここまで有能な人がこのスレにいるとは思わなかったｗ
ググればわかるような内容ではないもんな >>31
あのさ・・いい大人なんだしさ、
試しにあんたがうざいと感じた理由は何かを3つ上げてみて。
もしかしたら原因は自分にあるんじゃねーの？ >>3,12,30が同一人物ならうざく感じる気持ちはわかる
同一人物かどうかは分からんけどね >>33
同一人物だよ。つまり俺。
具体的にどこを直してほしいのか指摘するならまだしもひと言「お前うざい」って言われて
学校のいじめもこんな感じで始まるんだろうな。 mixというように色と色の計算なのだから
元の色を調整してでも白にしたいなどというケースは無いことがわからない
できない、任意の色にしたいという場合はこのプロパティを使えという助言は無視
仕切る
人を見下している
自覚がない >>29
どうもありがとう
静的サイトジェネレーターって言われてる物を理解したいvue.jsからnuxt.jsでいいのかな
具体的にどいう言う事が出来るのか分からんから調べまくらないと >>30
>>24だけど、差の絶対値の計算方法はググれば出てくる
他のモードも調べてみるといい
filterで狙った色を出す方法は色々あるだろうけど、filter用ジェネレーターと
カラーピッカー使うと便利かも
但し、filterはIEでは動かないので、IE対応したければ別の方法で
あと、質問者は質問者らしい態度で、嘘でもいいから全回答者にへりくだる
ぐらいの勢いで対応しておく方が、懇切丁寧な良い回答が得られやすいと思う >>36
すいませんでした。
あなたの回答が正解ですよね
ありがとうございました。
もう消えます。 >>37
誤解を恐れずに大雑把に言うと
Vueがフロントエンドを作るためのライブラリとすれば
NuxtはVueありきでサイトを作るためのフレームワーク
HTMLファイルがページの数ぶん存在する普通のサイトにすることも
SPAとすることも出来る
ひとつのvueファイルにHTMLもJSもCSSも書いちゃう
Vueのお作法に慣れると
わりと病みつきになる >>40
世の中VSCodeなのは分かってはいるけど
Atom使い続けてる… vscode
去年まではSublimeText3を使ってた レスポンシブのSPで
・タイトル
・テキスト1
・画像
・テキスト2
の並びを
PCで
左カラム
・タイトル
・テキスト1
・テキスト2
右カラム
・画像
にする方法ってposition: absoluteで画像を飛ばす以外によい方法ありますでしょうか？ やっぱVSCode多いんだね
自分もそうだけどｗ
>>43
実は今日はじめて触ったｗ
今日から覚えていきます >>42
ウェブアプリが作りたいわけではないけどnuxt.jsで静的ウェブサイト作ってみたいなあ
vue.jsから徐々にやっていこうかな
おれもAtom使ってたけどやっぱ起動が重いからVScodeに移ったわ >>49
以前iMac5K使ってて
Atomの起動遅いなーVSCodeにしようかなー
と思ってたんだけど
リモートワークになってMBP16買ってもらったら
起動速度は気にならなくなって
じゃあこのままでいいかなと 本人消えたのでメモ代わりに書いておくけど、ちょっと気になったので>>8をやってみた
https://jsfiddle.net/cujy1egz/
mix-blend-modeでやるよりも、clip-path使う方がシャギー出ないし、狙った色を
出しやすいね
これだと白抜きというより、白抜きに見える白抜き風の方法だけども メインはBrackets
vscodeに移行しようとは思うんだがHTMLとCSSメインだとBracketsのライブビューが使いやすすぎる Atomは開発終了しちゃったし、Bracketsもサポート終了しちゃうけど
かろうじて機能拡張なんかが更新し続けてくれれば･･･と思いつつ
VSCode使ってるけど、久しぶりにAtom起動しようとしたら動かなくて
再インスコしたｗ Sublime TextがまだMac見捨ててないので使ってる
ありがてぇ すいません、完全に初心者です。
fc2ブログに自分のツイッターアカウントページに飛ぶTwitterアイコンを追加したいんですが、どうすればいいでしょうか？
https://about.twitter.com/ja/resources/buttons#tweet
ここからできるみたいなんですけど、よくわからないです...
https://twitter.com/5chan_nel (5ch newer account) >>55
Twitterアイコンをどこかからかダウンロードしてきて
自分のTwitterページのURLコピーして
<a href="URL"><img src="アイコン画像のパス"></a>
でOK リンク先の通りの方法でコピペして
書き換えりゃいいだけなんだけどなぁ imgの下にdrop-shadowをつけて、そのdrop-shadowだけをlotateする方法ってありますか？
imgは固定して、drop-shadowだけ傾けたいです。 >>59
疑似要素で同じサイズのオブジェクトを背面に作ってそっちを変形する 同じ大きさのdiv作って影つけて回転って方法もあるけど
疑似要素の方がスマートかもね
https://jsfiddle.net/u960gsj8/ drop-shadowだから透過png使ってこいう影を少し回したいんじゃないの？
https://jsfiddle.net/wfaue8ho/ 質問者が意図した回答じゃないと思うけどかっこいいなそれ 画像を2枚かさねるなら最初からそういう画像作るのはあかんのか >>64
はー、もうphotoshopもいらねーな、こりゃ >>66 のimg:last-childのwidthとheightは必要無かったね
filterのbrightnessの数値を上げれば、contrastも要らない
htmlにimg2枚置きじゃなく、疑似要素でやろうと思ったけど
ちょっと上手く行かなかった >>66
IEだとfilter使えない問題があるから
2枚用意するのも悪くはないけど、だったら
それらを1枚にまとめてもいいかもね サイトを立ち上げてるんですが参考サイトのhtmlをデロッパツールで見ると
<header id>
<div id>
<div class>
</header>
</div>
</div>
となってます。<header id>と<div id>は理解できるんですが何でdiv classも挟む必要があるんでしょうか？
idはリンク属性を含む要素なので理解できますが、同じdiv id要素にclassをつける意味が分かりません。
SEOの問題でしょうか？ 基本はclassで優先順位を上げたいものをidで分けるんですね、!importantがseoを考えると非推奨なのでidを使ってみます。
使いすぎると読み込みの優先順位で不具合が起こる危険もあると書いてありましたので気を付けます。
<header>
<div id>
<div class>
</div>
</div>
</header>でした、すみません >>73
優先順位というよりclassは複数に設定できてidはできない、って考えた方がいいよ
優先順位あを基準としてidつけてたら
似たようなスタイルの設定でも複数同じ記述を書かなきゃいけなくなるし
最終的にimportant使いまくりになりそう classはほとんどCSS用、idはほとんどJavaScript用という感じがする 新しく入った会社のやり方がデザインは外注、コーディングは社内って感じで自分はコーディングやってるけど、
毎回スマホ用のデザインカンプが画面幅600〜700pxで作られてるんですが、これって業界内では普通？
PC用デザインとほぼ変わらんじゃんflexで5列横並びになってる要素とかどうすんのよ2列でさえ厳しいのに、みたいな部分がかなり多い
あと少し前までは画面幅最低320pxまではちゃんと崩れないようにする意識でいたんですが、
最近だともう最低375pxまで出来てればいい感じなんですかね？ スマホ用は二倍サイズで作るのが定説
iPhoneメインに320時代なら640、375時代になった今は750で作る
今だとだいたい750で作るのが普通
600〜700とかふわっとした数字では作らん つーか、会社でやってるなら
ここで質問しないで先輩に聞けよ
なんで画像サイズがそれなのか、320は足切りしていいのかとか
会社でフォーマット決まってんだろ >>78
広告系ではカンプの幅は750が多いな
んでコーディングするとき、スマホは全部vwにする >>83
カンプってのは、実際にサーバにあげてスマホなどから確認をするの？
紙に打ち出したものではなくて？ >>84
気にする客には
ブラウザで見られるようにしてあげることもあるけど
たいていはJPEGでダンプしたやつを
PC見るだけじゃないかなあ、特に代理店は
XDでプレビュー用のを作るのも
2年前は少し流行りかけたけど
今はもうあまりやらなくなってきたね なるほどそういうことかありがとう
前の会社では「ここは●px、ここは●pxにしてください」みたいに
値指定してるデータを元にしか作ってなかったから知らんかった
幅750pxのものもあったかもしれないけど、688pxみたいなやけに中途半端なモノもあったのは覚えてる
外注先デザイナーが複数いるっぽいから、人によって厳密な指定具合が違うのかもしれないし
会社も制作会社じゃないから詳しい人もそこまで気にしてる人も社内にいないかも
retina想定で750pxのカンプを基にコーディングする際は
要素の横幅とかをpx指定する場合は1/2で考えればいいってことですかね？
カンプ上で左右marginが20pxだったら、コーディングする際のmarginは10px、みたいな >>86
ピクセルで考えてない
文字サイズも含めて大きさの単位は全部vw
他の業界は知らんけど、自分のところは
スマホの大きさによってオブジェクト間の空きが変わったり、1行の文字数が変わったりするのは
許されんとは言わんまでも、NGくらう率が高いので
全部同じ見た目にしたいから
sassの関数で
@function vw($px: 0, $ww: 750){
@return ($px / $ww * 100)+vw;
}
ての作って
カンプから拾ったピクセル数をvwに変換してる
コーディングの際にあれこれ考えるのも無駄だし
これが一番早くて面倒がないと思ってる
ただ、あくまでSP表示の時の話で
PCの時は普通にpx <div style="border:Solid 1px #0000ff">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
これを横並びにするにはどうやったらいいですか？ またはdisplay:grid
両方勉強してどっちが適するか判断するのがベスト display: inline-block;
ってのもあるで >>89
どうもできました。
でもまた問題が
bbbを縦中央揃えにできないんですがどうやればいいんですか？
<div style="width:350ph;height:500px;display:flex">
<div style="width:300px;height:100%;background:#00ff00">aaa</div>
<div style="width:50px;height:100%;background:#00ffff;vertical-align:middle">bbb</div>
</div> bbbのdivにdisplay:flexとalign-items: center; ■ このスレッドは過去ログ倉庫に格納されています
