HTML/CSS のどんな質問にも優しく答えるスレ 35
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 34
http://mevius.5ch.net/test/read.cgi/hp/1538966757/
■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>764
Stylusの人もPostCSSの人もいるんじゃ >>771
mixinで解決しました！ありがとうございます チームでの開発に支障なければ、個人の環境なんて何でもおｋでしょ https://jsfiddle.net/p4h5o3gk/
このコードは、どのブラウザでも黄色が正方形、青の幅が10pxで見えてますか？ >>776
「どのブラウザ」ってーとIE6やガラケーなども含まれる
まぁ9割ぐらいの人はその見え方で見えていると思うから、大きな問題はないと思う >>775
優しく答えるスレでイキってる無職さんw >>765
そのテンプレートをmixinにして
extends的に使うといいよ 今では海外では、SASS の使用率が100% だから、日本でも避けて通れない
>>765
>$BGColor: blue;…
変数を属性名にできるか？
普通は、変数は値に使うもの。
background: $BGColor
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
本当は、この本に書いてあるように、MindBEMding による、CSS の構造化が良い。
Block__Element--Modifier (BEM) >>782
var(--hoge)知らないの？ｗｗｗｗｗ >>782
この読点の打ち方は例のキチガイ
おまえ前にもここに来て発作起こしてたよな？早く病院もどったら >>782
>変数を属性名にできるか？
インターポレーションて知らんか？
変数はなんにでも使えるよー
$selector: '.foo .bar. .baz';
$property: 'background-color';
$value: '#ff0000';
#{$selector} {
#{$property}: $value;
}
こんな感じで
一部に使うことも出来るよー
$number: 1;
$prop: 'color';
.hoge-#{$number}{
background-#{$prop}: rgba(red, 0.5);
}
あと
>海外では、SASS の使用率が100% だから
盛るな盛るなｗ
海外意識しすぎ、大して変わんねーよ
どんな人外魔境だと思ってんだｗ ちょい間違えた
こう
$number: 1;
$prop: color;
.hoge-#{$number}{
background-#{$prop}: rgba(red, 0.5);
}
クォートいらんかった 単なるテンプレートじゃん。
sassはテンプレート機能も提供してますよって言ってるだけ。くだらない。
単なるテンプレートというのは、
$prop: corer;
.hoge-1 {
background-#{$prop}: rgba(red, 0.5);
}
こう書いたら、
単に置換して
.hoge-1 {
background-corer: rgba(red, 0.5);
}
こうなるんだろってこと。
background-corerのエラーを検出するのは別の機能だろ。
インテリジェンスの欠片もないくだらない機能。
やっぱ許容できるのはPostCSSくらいだな。 corerみたいなタイポはエディタ側のlintの方がいいよ colorとcorerは、エディタに任せっきりだとありえる間違いなんだろうか？
個人的には絶対に間違わないんだけど >>788はタイプミスじゃなくて、エラーを検知しないよって事でしょ
おまえらの理解力の無さが一気に露呈されたな >>765ですがこんな感じでとりあえず解決しました
皆さんありがとうございました
[_theme_black.scss]
@import "./color-template";
$MAIN_BACKGROUND: #202225;
$MAIN_BORDER: #2f3136;...
body.black {
@include template_main(
$MAIN_BACKGROUND,
$MAIN_BORDER,...
)...
}
[_color-template.scss]
@mixin template_main(
$MAIN_BACKGROUND: white,
$MAIN_BORDER: gray,...
) {
.main {
background: $MAIN_BACKGROUND;
border-color: $MAIN_BORDER;...
}...
} な、なんでエラー検知の話になってんの(´・ω・｀)
変数がプロパティ名に使えるかどうかの話だった気が… >>797だと変数のスコープがグローバルになって
2つ目以降のテーマを作った時に競合してしまったので{}の中に入れました
[_theme_black.scss]
@import "./color-template";
body.black {
$MAIN_BACKGROUND: #202225;
$MAIN_BORDER: #2f3136;...
@include template_main(
$MAIN_BACKGROUND,
$MAIN_BORDER,...
)...
} stylus のが高機能なのにはやらないな…なんでだろ 一方sassって名前はcssの派生感ある
その内jade→pugみたいに名前変わるかもね >>801
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
この本では、_variables.scss に変数をまとめて定義して、
main.scss に、他のパーシャルファイルよりも前に読み込む
色違いは、MindBEMding では、Block__Element--Modifier (BEM) のModifier >>812
その本まちがいだらけなんでしょw宣伝しても逆効果だよww こんなに、コンポーネント毎に、SCSS ファイルを作って、構造化して本は滅多にない。
SCSS ファイルのフォルダ・ファイル数も、10ぐらいある
クラス名も、MindBEMding で、Block__Element--Modifier (BEM) の方式を使って、
名前が被らないようにしている
漏れは、こういうプロジェクトを構造化する、本を求めていた！ BEMの命名規則自体は論理的にはとても美しいけど、文法で構造化されていないものを命名規則だけで補おうという手法だからツールの補助が得られないんだよね…
BEMセントリックな編集ツールがあったら欲しい？
もうあるのかなぁ >>815
本よりもこいつがキチガイ過ぎてマジウザいわ糖質丸出しじゃねーか BEMとか大げさすぎるんだよな
超大規模ウェブサイトでも作る場合のやつだろ
クラス名のルールはこれだけでいいよ
1. prefix-component ・・・ コンポーネント名
2. prefix-component-parts ・・・コンポーネント内のパーツ名
3. prefix-state-name ・・・ 必ず1. or 2.と組み合わせて使う
prefix-は省略可能。他のフレームワークなどと区別したいときに使用する https://i.imgur.com/jZIPe5A.jpg
このdivクラス名とかってつける法則というか決まりとかってあるんですか？ ワードプレスのスタイル適用についてはまっています。
サイトの見出しが「AAAA」で<h1>タグで囲まれています。
こんな感じです。
<h1 class="site-title"><a href="https://know-how-tree.com/"; rel="home">AAAA</a></h1>
記事の中のh1タグにのみスタイルを適用したいです。
適用したいのは、具体的には「BBB」だけです。
<h1>BBBB</h1>
Custom CSSに
h1
{
color:blue;
}
としたところ、「AAAA」にも適用されてしまっており困っています。
notを使って制御出来る様なのですがちょっと分かりません＞＜。。。詳しい人教えてくださいｍ（＿）ｍ SCSSで変数を利用して
$PATH: "/root/sub";
@import $PATH+"/file.scss"
こんな事は出来ますか？
その結果、
@import "/root/sub/file.scss"
を実行したいのですがダメでした。 >>829
どんなやり方でも良いので
どうにか出来ませんかね？ >>820
Block__Element--Modifier
BEM が、2つの_, - を使うのは、その中で、1つの_, - も使えるようにするため >>833
いちいち833 782とか書かなくても読点でわかるからさーキチガイ インターポレーションは、
>>785-786
に書いてある 現場で役立つ実践Sass（3）変数を使いこなす
https://blogs.adobe.com/japan/web-practical-sass-03-using-variables/
インターポレーション（ #{} ）を使って、@import する例が、ここに載っている
ひょっとしたら、ローカルファイルの書き方が違うのかな？
「sass import local file」で検索して！ >>837
情報ありがとうございます。
url()なら上手く行くのですが
ローカルファイルはダメみたいですね。 普通、SASS のimport は、./, ../ で始まる、相対パス
@import "/root/sub/file.scss"
これは、/ で始まる絶対パスだから、そういう機能があるかどうか？ >>839
ああ、別に相対バスでも良いのです。
やりたいのは変数を使ってパスを
指定したいだけなのですが。
ローカルファイルでは無理そうですね。 url()とfile:///で絶対パスで参照できないかな >>828
あらかじめ可変部と固定部の文字列くっつけてからimportでもダメですか？ >>843
具体的にどんなふうに書けば良いですか？ なんだ、偉そうにしてるくせにsassって大したことないんですね。 大したことないってどういう事？
sass使うと大幅な工数削減になるんだけど でも無理なんですよね？
出来たらここの工数も削減できたのになぁ…あーあ 単純に相対パスにすればいいだけでは？
どういう理由で工数削減できないのか書いて Sassが回る前にnodeで外から置き換えちゃえば？ SCSSでパスをどうにかするって考えたことなかった 大野みうはなぜ販売しているノウハウで自分のサイトを上位表示させないのですか？ ゲームなんてさ、
頂点計算
面計算
基本シェーディング計算
複数の複雑なライティング計算
複雑な各種シェーダー計算
階層アニメーション
アニメーションブレンディング
スキンウエイト
マッピング計算
各ゲームAI
コリジョン計算
物理演算
ラグドール計算
各種判定処理
他にも多くの計算があり、なおかつ上記計算はフィールドやたくさんのキャラクター、膨大なエフェクトにも適用され
最終的に複数の画面エフェクト系、zバッファを使った画像の重ね合わせ、
オクルージョン計算や鏡面反射など重めの処理も入っている
ゲームではこれらを60分の1フレームで計算できるのに、たかだかhtmlごときのレンダリングに何で重くなることがあるんだよ？
ブラウザエンジン作ってる連中は無能だろ >>853
ゲームは汎用プラットフォームじゃなくていくらでも最適化やチューニングができるからそら速くできるよ
規格を守って互換性にも配慮しなきゃいけないブラウザとは束縛する条件が違いすぎる ゲームの処理速度の向上はGPUの進化のお陰
ブラウザの処理はまずはテキスト処理だからCPU中心
計算量だけで比較すな ブラウザは通信も最適化できない
ゲームと違って自前のサーバばかりじゃないからな 相対パス指定なら理解できる。
普通は、プロジェクトフォルダ以下になるから
でも、絶対パス指定だと、プロジェクトフォルダ外を指定する可能性もあるから、やっかい
そりゃ、相対パスでも、
../../../
みたいに、ドンドン上へ遡っていけば、プロジェクトフォルダ外になってしまうけど >>854-856はぜんぶワイのレスなのだけど、
ゲームの技術推し派もブラウザ擁護派も、ツッコミや補足をおくれよ
10年くらい現場離れてるから最先端事情に疎いんだわ >>853
cssアニメーションも普通に60fps出るでしょ cssの重なりについて教えてください
tdの背景が赤でその上にピンクの星を背景に重ねたいですがうまくいきません
親要素{
background:red;
position:relative;
}
親要素:before{
content:"★";
color:pink;
position:absolute;
z-index:1;
}
親要素の背景の赤→ピンクの★→親要素の文字という順番で重ねたいのですがどうすればいいでしょうか？
z-index:-1にするとbefore:が表示されません(´；ω；`) >>858
ここの連中はhtmlごときにヒーヒー言ってるレベルだからゲーム技術聞いてもまったくわからんのだよ
>>853のあげた技術のほとんどを理解できてないし言葉すら知らないカスしかいないから 試してないけど
親要素 {
background: red;
position: relative;
z-index: 1;
}
親要素:before {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
z-index: 0;
}
親要素:after {
content: "★";
position: absolute;
top: 0;
left: 0;
color: pink;
z-index: 0;
} >>858
言うてもウェブは基本的には20年前から変わらず
スクリプト言語でシングルスレッド
部分的な進歩はあるんだけど
なので普通のゲームのようなプログラムと比較すること自体が
あんまりコンピュータのことわかってないんじゃないかな？
って感じはする Webの技術ってほんとたいしたことないよな
Googleがいくら頑張ってもゲームレベルのようにPCの性能を最大限活かせる超高度な技術は一切ない >>865
さすがに韓国人呼ばわりは酷い
プログラム覚えたての中学生なんだからそこまで言ってやるな >>867
おい無能
>>853の一つでも理解してプログラミングしたことあるのか？ ■ このスレッドは過去ログ倉庫に格納されています
