済まぬ前スレからなのだが
*************************************
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
元となる色情報が分からないと出しようがなくね？ >>11
できないっつってんだろ
諦めて白いオブジェクトを作れ IE11が死んだ今、尖ったサイトでなければ
--webkitみたいなブラウザ依存は使わなくても良い？
>>18
モノによるとしか
んで自分で気にしなくても
browserslistrcにお任せするのが
楽で安全だと思ってる >>15
だからその元となる色の範囲をしりたいんだってばさ。
a＋b＝白
白＝X+Yが成り立つXは何色であり、その範囲は色相環のどこからどこまでかという事。
色の基礎知識無いと意味不明かもしれんぞ 今週のテーマ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買ってもらったら
起動速度は気にならなくなって
じゃあこのままでいいかなと メインはBrackets
vscodeに移行しようとは思うんだがHTMLとCSSメインだとBracketsのライブビューが使いやすすぎる
Atomは開発終了しちゃったし、Bracketsもサポート終了しちゃうけど
かろうじて機能拡張なんかが更新し続けてくれれば･･･と思いつつ
VSCode使ってるけど、久しぶりにAtom起動しようとしたら動かなくて
再インスコしたｗ
Sublime TextがまだMac見捨ててないので使ってる
ありがてぇ
>>55
Twitterアイコンをどこかからかダウンロードしてきて
自分のTwitterページのURLコピーして
<a href="URL"><img src="アイコン画像のパス"></a>
でOK リンク先の通りの方法でコピペして
書き換えりゃいいだけなんだけどなぁ
imgの下にdrop-shadowをつけて、そのdrop-shadowだけをlotateする方法ってありますか？
imgは固定して、drop-shadowだけ傾けたいです。
>>59
疑似要素で同じサイズのオブジェクトを背面に作ってそっちを変形する 質問者が意図した回答じゃないと思うけどかっこいいなそれ
画像を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;
>>99
たぶん、君は「カエル display flex」で検索すると幸せになると思う
やってみ、俺もそれで育った >>101
transform、transition、animationあたりも頼む さっきprogateのHTML/CSSコース終わらせてとりあえずホームページ作ってみてるんだけど、CSSで文字のサイズとか余白とかいじるのって感覚というか慣れしかない感じ？
プレビュー見ながらちまちまいじってみてるんだけどみんなこうやってるのかな
デザインに従うんだから慣れも何もなくね
コーディングしながらデザインしようとしてるなら2年早い
>>104
なるほど、簡単なHPだからなんとなく書きながら考えてたけど一旦別に見た目考えてから書くことにします。
感謝。 一般的な制作会社の制作フローは、
デザイナーがillustratorやphotoshopでデザインを画像で作成して
それをコーダーがhtml/css等でWEBし、
最後にバックエンドエンジニアなんかがサーバーサイドのプログラムやDB回りを連携させる感じ
自分Windowsで書いててChromeでプレビューしてるんですけど、
スマホとかMacとか、Safari、Edge、Firefoxだったらとかっていうのはレスポンシブ対応以上にコーディングでやることってない感じですか？
古いandroidが一番厄介
それと画面が狭いスマホのopera
IEはもうやらね
スマホは実機が手元にあるなら実際に開いて動作は見た方いいよ
ほとんど同じだけどAndoroidとiOSそれぞれ特有の挙動があったりするから
PCと同じ表示がされなくてたまに苦しめられる
>>100
それで縦の中央揃えはできたけど
align-items:bottomとやっても下揃えはできませんでしたが
下揃えはどうやるんですか？ >>108
safariはだいぶやばいぞ
ベンダープレフィクスつけときゃいいだろとナメてるとハゲる デベロッパーツールのエミュレータとか便利だけど、あまり信用しちゃいけない
スマホはせめてsafariだけでも実機確認しとかないと危ない
cssの質問があります。
同じセレクタが何度も出てくるのと、同じプロパティと値ならセレクタ何度も出ていいので
まとめてしまうのはどちらが良いのでしょうか？
エディタのリント？ってのだと、何度も同じセレクタが出てくるのが駄目そうです…
①
h2,
p {
color: red;
}
h2 {
...
}
p {
...
}
②
h2 {
color: red;
...
}
p {
color: red;
...
}
