勝利をおさめるために！
今！
我々にできることを！
コーーーーーディンンング！！！
HTML/CSS のどんな質問にも優しく答えるスレ 35
レス数が1000を超えています。これ以上書き込みはできません。
勝利をおさめるために！
今！
我々にできることを！
コーーーーーディンンング！！！
DL要素の使い方として正しいの？
<dl>
<dt>Search</dt>
<dd><input type="search"></dd>
</dl>
間違っている
dd inputに探したいものが100%入るなら正しいかもしれないが、
入らないので間違っている
>>552
bodyの終了直前にでも置いてみては？
少しは変わると思う
type="search"は探したいキーワードを入れる場所だから合ってるんじゃね？
その文字列を探してるか探してないかはビジターの脳内での話だし
なついなｗ
「食事は1日1食コーディングしながら食え」とか「病院往く暇あるならコーディングしろ」とかあったな
レスポンシブで、横幅によって縦並びになるやうにしたい
内容が複数行になる場合、文字列を最終行で揃えたい
縦並びになった時、Cの下だけに余白1em分を入れたい（A、Bの下は余白なし）
なんかうまいこと実装可能？
横並びになってる時はABCと次のABCの間に余白入れたいんですじゃ
さっきから頑張ってるけど、複数行の要素が入るとCだけ最終行で揃わなかったりしてうまくいかない
時間があるからhtmlの勉強をしたい
ドットインストールやプロゲートでも
学習をする上で問題はないかな？
出来る。が、今日は眠たいので明日
htmlはここにでも書いておいて
http://jsfiddle.net/
とりあえず、使うのはインラインブロックじゃなくflex
めんどうだしわからないから正解書いといてくれると助かるんだが？
うん、俺も面倒なんだ。だから書けって言ったんだ
後は自分で頑張って
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
このスレはどんな質問にも答えるんだろ
じゃあ答えてやる、もとのソースがわからないから書いといてね←これも質問なんだからちゃんと答えろよ？
Cではなく親ブロックの下に1emの余白を取ればいい
おおおマジだ！なんで気づかなかったんだろう
サンクス
他の人たちもあざっした！
お仕事行ってたから上の何人かはワイじゃないやで
自意識過剰だろｗｗｗ
本人証明するために次からid出しておけよな
過剰なくらいでちょうどいいんやで
＜pre＞_____文字列１
________文字列２
＜/per＞
表示すると除去されてしまいます。
でも、途中にある空白（文字列２の前にある）は、除去されません。
そう言う仕様ですか？
再現しない、typoをどうにかしろ
http://jsfiddle.net/ncg4wspx/
たぶん、JavaScript か何かの、trim か何かで、
先頭・末尾の連続した空白類が、除去されているのだろう
それこそperタグにでもなっているんじゃないか
質の低い質問にはそれなりの回答しかつかない
最も、解決済でもスルーしているきらいがあるがな
(忘れたころにレスしてる奴は巡回中に思い出しただけ)
:hover{ ... }
というふうに書いた時に、最前面の要素にだけスタイルが適用されるようにする方法ってないんでしょうか？
これを書いただけだと、小さい要素にホバーしただけでその背景（親）のノードもすべて...が適用されてしまいます
全称セレクタ状態だから、classなりidで適用範囲を制限しろ
(こんな質問ばっかかよ…)
ずっと知らなかったわ
:hover{
color: red !important;
}
確かにhoverで全部redになった
ってか疑似要素を単独で使う場面ってある？
:hoverはどう見ても疑似クラスだろ
何で疑似要素になるんだ？
> ってか疑似要素を単独で使う場面ってある？
疑似クラスなら発想次第であるんじゃないのか
:checkedあたりは扱いやすそうだが
根本が分かってないから、「〜だと思うんですが」が大抵間違っていてgdgd
すまん、疑似要素のコード書いてて混ざった
確かに:checkedは使えそう
と脳内変換して読んでてずっと意味がわからなかった
まさか質問が本当にそのままだなんて・・・怖い・・・
質問者も察してあげて
アルファベット？
https://developer.mozilla.org/ja/docs/Web/CSS
地道な勉強が嫌いでてっとり早く済まそうとする人が多いよね
勉強の仕方の勉強じゃね？
小中高で習うことだが
一応大卒だけどいまだにそれ分かんない
いや適用範囲を制限したくはなくて、全要素のhover時のスタイルを指定したいんです。見たまんまです。
ただし、要素が重なってる時に最前面＝最子孫要素だけに適用させたいんです
hoverだけの需要でしょうがそれを指定する方法はないんでしょうか
条件は初めに全部書け
JavaScriptでやれ
↓
初級者質問スレ巡回
↓
お、これいけるな！
↓
こんなこともわからないのかよｗｗｗちょっとは勉強しろよｗｗｗ
毎日この繰り返しです
カブトムシに相撲でケンカ売らないだろう、それと同じ
口は悪いが、回答してるような
学校で教えてる勉強の仕方は主に
・雑多な情報から要点を見抜く
・データや原理を整理して限られた時間で覚える
・求められる解答を理解して過不足なく正確に答える
この３つ
俺らのお仕事に当てはめると
・無数の解説サイトから有用なものを見抜く
・日々増える言語、メソッド、アプリを空き時間で覚える
・書くべきコードを理解、エラーなくデプロイ、事故なくランニング
こんな感じ
もしくは
・客や営業の妄言から要点をエスパー
・ツールを駆使して情報を整理共有、打ち合わせ用に要点は記憶
・客の満足するサイトを作るが、予算以上には働かない
>最前面＝最子孫要素だけに
こういう指定方法は、有るかな？
条件が難しすぎる
それら全部に、特定のクラスを付ければ？
ない
あと一番深い要素が最前面とは限らん
ページ内のどこからでも１タップで飛ばす仕組みを作りたいんだけど
何か良い方法ない？
position: fixedなボタン表示しといてonclickでナビゲーションゾーンの要素にscrollIntoView()すれば？
ホイホイお勧めできる程度には実装広まりました？
93.45%
https://caniuse.com/#feat=scrollintoview
引数で簡単にトランジション時間設定できるしブラウザヒストリ変わらないしいいんじゃないかな
ページ内リンクにジャンプするのではなくて、ページ内リンク部分のテキストを ボックスかなんかで表示するということはできないでしょうか。
例えば5ch掲示板のように >>1 にマウスをかざしたら＞＞1さんのテキストが表示されるみたいにしたいのです。
これはjsとかの領域になるのでしょうか。
マウスホバーとかツリービューとかでググりましたがいまいちわかりませんでした。ヒントワードだけでも教えてくださればありがたいです。
IEは11でもオプション使えないから騙されるなよ
あと時間は指定できないから騙されるなよ
ツールチップと言う
けどこれモバイル対応できないから、あんまり頑張っても仕方ない部分ではある
>>623
営業努力次第でかなり上下する
ありがとうございます！
>>625
ありがとうございます！
まさに求めていたものです。
全てのhtmlのヘッダーやフッターをちょっと変更したい時に更新が大変なのですが
cssみたいに１つのヘッダーを読み込むみたいなことはできるのでしょうか？
■ ヘッダー （ここを更新したい）
□ 本文1
□ 本文2
■ フッター
CSSの大きさの単位でvhを使ったときの最大値を決めたいんですが
@mediaで切り分けるしかないですかね
幅・高さはmax-widthやmax-heightでいいんですが
その他のプロパティは
サーバーサイド言語でやればよい
>>629
そゆこと
max-vhとかほしいよな
やっぱそうかー
すべてのプロパティにmax-とmin-ほしいですねー
phpで別ファイルを読み込む
htmlで別ファイルを読み込む方法もあるけど、避けたほうが良い。理由は忘れた
この際だしwordpressでも入れて見たらいいかもね
ありがとー
htmlとcssのみだとできないんでないかな
俺はejsを使ってる
おすすめは絶対しないけど
iframeでできないこともないか?
htmlからヘッダー部分切り出して別ファイル(header.htmlとか)にして、元あったとこ(index.htmlとか)は
<?php include 'header.html'; ?>
とする
そして .htaccess に
<FilesMatch "\.html$">
AddType application/x-httpd-php .html
</FilesMatch>
を追加する
これで実現できる
HTML, JavaScript でも、フレームワークを使うと同じ。
各コンポーネント別に作って、index.html, bundle.js みたいなファイルに読み込む
各コンポーネントごと、別々に作って、後でまとめるようにする
>>618
スマホでは無理だけど、ツールチップみたいなイベントで、
jQuery などで、内容を取得するのかも？
書かないのでは
何も恥じることはない
一から手打ちorDreamweaverで作るのか
どっかからコードを丸々コピーしてきて中身を入れ替えるのか
どっちが一般的なのでしょうか？
個人で作るなら、今はwordpress等のCMSでテンプレート入れてサクサク作って終わり
コードなんて打たない
もうちょっとこだわりがあるならテンプレート自体を作る
業者の場合は色々分かれる
えー
つまり自分ではデザインしない人の方が多いということ？
どっかでそれ数えてるもの？
派遣コーダーの仕事としてはどうでしょうか？
会社によって違うかもしれませんが、コーダーの仕事と言えばデザイナーがデザインしたものをスライスで切ってDivに当てはめていくみたいのが未だに一般的でしょうか？
テンプレートとは枠組みの事ですか？
つまらない質問でスミマセン。
サイトの割合は以前どこかで見た
もう一回探してみたけど、ソース出てこなかった。許して
・テンプレートそのまま使ってる人が多い
・テンプレートを使ったサイトを量産している人が多い
のどちらかだろうなぁ、と考えていたのは覚えている
製作者に占める割合は分からない
これは個人を含めると計測は出来ないだろう
>>648
派遣先による
wordpressのテンプレートに画像ポンポン当てはめてハイ終わり、10万円、ってとこもあれば
一からデザイン細かく作って50〜100万円ってとこもある
俺がよくやるのは
・全体デザインをデザイナーと考える。テキストや画像の位置をざっくり
・使う画像はデザイナーが決める。よっぽど変だったら「それ何か変じゃね？」と言って作り直してもらう
・後はパーッとコーディングして終わり
ちなみにdivはもう殆ど使わないよ。section、dl、ulが多い
ありがとうございます
わかりやすいです
それとやっぱりwordpressも覚えといた方が良さそうですね
しかしdivがもう古いとはショック…
いやいや
新しいとか古いとかいう問題じゃねえよ
個人の意見に振り回されちゃいかんw
> divがもう古い
Google「えっ？」
Amazon「えっ？」
Apple「えっ？」
divが古いとは言ってないんだが・・・
「セマンティック」とか言われてるんだけど、
単になんでもかんでもdivで囲むんじゃなく、
適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている
<ul>はさすがに使っていると思うけど、他にもヘッダーは<header>、グローバルメニューは<nav>などが推奨される
これにより、ちゃんとセマンティックを意識してコーディングしているサイトは検索結果に表示されやすくなる・・・
というはずだったんだけど、ぶっちゃけdivで全部書いても全然変わらんわ。ﾊﾊﾊ
まぁ人間が見た時に見やすい、チームの開発が楽になるという利点はあるので、使いこなせないとマズイ
>>652
googleは何で書いても関係ないからな
全部divと知った時は驚いたけど
amazonとappleはコンテンツが最強すぎる
MSと同じ
Appleとは対照的
そんなレベルじゃない
数年前はリストすら
<div class="li">
としていた
セマンティックは全く考えてない、というか考える必要がない
ちゃんと意識しましょう！！
,;i|||||||||||||||||||||||||||||||ii;､ ＿／
／||||||||||||||||||||||||||||||||||||||ii;､ ＼
／￣￣＼||||||||||||||||||||||||||||||||||||ii;ﾞヽ, ／
'"￣ヽ ヽ!!|||||||||||||||| ||||||||||!!"ﾍ ＜ セマンティックageるよ
ヽ ﾞ!!!|||||||||||| |||||||!! iヽ── /
|||ｌ ﾞﾞヽ､ｌｌ,,‐''''"" | ヽ|||||||||セマンティックageるよ
|||ｌ ＿＿＿＿ ﾞｌ ＿＿ ＼|||||||||
||!' ／ヽ､ oﾞ＞┴＜"o /＼ |'"￣| ホントの勇気 見せてくれたら
＼ ／ |ミﾐヽ──‐'"ﾉ≡- ﾞ'──''彡| |､ | |
￣| |ミミミ／"￣ ､,,／|ｌ￣"'''ヽ彡|| |､/ / セマンティックageるよ
ヽ､ｌ| |ミミミ| |､────ﾌヽ |彡ｌ| |/ ／＿
＼/|ｌ |ミミミ| ＼_/￣￣ﾌ_/ |彡|ｌ/ ￣／ セマンティックageるよ
＼ ﾉ ｌ|ミミミ| ＼二二､_/ |彡| ﾌ
￣＼ ｌ|ミミミ| ￣￣￣ |ﾒ/ ＼トキメク胸に キラキラ光った
| ＼ ヽ＼ミヽ ￣￣"' |/ /
/ ＼ヽ､ヽﾞ''''ヽ､＿＿＿＿_／/ ／＿夢をageるよ
／ ヽ ﾞヽ─､──────'/| ￣／
. ／ ﾞ＼ ＼ / / ＼＿＿
───'''"￣￣￣ﾞﾞヽ､__,,/,-'''"￣ ﾞ''─
同じネタ考えてたｗ
どこの平行世界だよ
>適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている
なんか15年くらい前が懐かしくなるなｗ
本質的なことは昔から変わってないからな
基礎をわかってるやつが一番強い
要素ぜんぶ<div>と<a>だけでも
<body>の中空っぽでJSで中身書き出すページでも
なんなら1枚画像びたーんって貼っただけのページでもちゃんと読んでくれるし
すっごいマイナーなことについて書けばいいんだよ！
SEO会社はさすがにちゃんとしてる
:https://www.plan-b.co.jp/
と思ったらdivにhref属性があるんだけど何だこれ？
altも無い画像だけのサイトって検索結果に出てくる？
≡ → ×
+ → ×
になるサイト多すぎて見てて恥ずかしい
もうあんまり使わないタグなのかと思いました
いまでも使ってますよね
dlとかulとかをよく使うというのは、いわゆる下に流れていくようなサイトが多いという事でしょうか？
divで囲うような配置でないような
なんで？
マネすることしか出来ないんだなーって思う
× マネ
○ 一般的
奇抜な物を使うとユーザーが使い方分からないんだよ
個人的には、ハンバーガーメニューですらまだ奇抜な内だと思う
divはデザイン的に使わざるを得ない時に、最終的に使うってレベル
＞dlとかulとかをよく使うというのは、いわゆる下に流れていくようなサイトが多いという事でしょうか？
そう、今はモバイルが7割ぐらいのアクセスなので、モバイル中心に作る
divなんて基本的に使い所が無い
「モバイルファースト」とかで検索すると良い
それこそセマンティックでもなんでもないじゃん
モバイル向けなんて言ってない
単純に使う機会が多いってだけ
引用が多いサイトならblockquoteを多用することになるんじゃないか
モバイルと関係なくね？
単に自分は要素少なくても問題のない簡素なデザインばかりしている、っつー話でしょ
別にそれが悪いとは言わんが
あっはい、茶化すなら君が上に上がるためのコーダーの指標をどうぞ
強いて言えば、<strong>愛</strong>っすかね
結局はコンテンツの中身と被リンクだから
そうそう
フロントの要素やらなんやらは本当に意味がない
これ否定する奴は一回全部divでサイト作ってみれば良い
文字化してインデックスしてくれるやつ、類似画像検索では引っかかるやつ、まったく読んでくれないやつ
それぞれあるみたい
試してみてるページそんなに多くないんで何をどうすればよいのかはわからんすまん
divとspan、意味のなさならdivが包括しているので
>>689
前例があれば、ちょっと聞いてみたかったってだけだよ
実際にやることはほとんど無いと思うからね
すごく役に立ったので大丈夫、本当にありがとう
存在する意味がないみたいな認識なら、勉強不足じゃないかなぁ
とくには
大アクセスされるようになって
伝送料金を節約したい、とかそういう理由があるなら考えてもいいと思うけど
だから大したことないとは言え確実に離脱率は上がる。
糞みたいなJSを埋め込んで邪魔をするフロント
バカばっかりだ
俺が取り締まってやらないとな
小さくするというより、見やすくすると良い
変にテクニカルにするのではなく、まとめたほうが見やすいところはまとめておけば良い
アホ共が浮き彫りになって面白そうだｗｗｗ
阿鼻叫喚だろうけど、是非やってほしい
Z方向に移動しても変化が確認出来ないのではないですか？
translateXやtranslateYなら動きが分るのですが。
absoluteで重ね合わせたときなどに、どの要素が一番前に来るかを調整できる
ほとんど使わんけどね
そうでもない
言葉で説明するのも難しいけど
xyzとrotateの値を合わせて変えてみるとわかりやすいと思う
要はmatrixだ
まず705は嘘だからスルーしてね
translateZは奥行きを変化させるんだけど視点がデフォルトのままだとそれ単体ではほぼわからない
translateZの違う要素をいくつか並べて、併せて perspective(500px) を入れてみて
適当に書いたからあれだが
こうするとZの意味がわかるじゃろう
http://jsfiddle.net/2utysx4e/
>>704
（3次元空間の）Z軸の移動は
遠くのものは小さくなるという効果がある
>>705
CSSの重ね合わせは重なりの順番だけで
2次元空間なのでちょっと違う
他の板に導入されたときは、導入前に立てられたスレは対象外だった
よって、おまえの醜態は晒されずに済むだろう
凄いですね。
translateZの意味が分かりました。
ありがとうございました。
すみません、これは社内にテンプレートがいくつかあって
それを利用して作成しているという事ですか？
flexとgridどっち覚えたらいいですか？
このスレだとflex使ってる人が多いみたいだけど
gridの方が欠点があんまりないってのを他のサイトで見たもので...
要するに作らないでテンプレ売りしてるだけの似非ってことだよ
両方
別にfloatがいかんてこともないよ
適材適所だ
とんとfloat書かなくなったけど
flex
gridは対応ブラウザが絶妙で怖い。会社のページには使わない方が良いと思う
スマホゲーのサイトならgridでもいいかもね
ふぅ助かった
毎回同じとは限らないんだよなぁ・・・
だとしたら嬉しいかもしれん
>>716
ありがとう！
floatはまだ使っててもいい感じですね
しかしながら、flex、gridのお勉強も必要みたいなんで
ぼちぼちflexからやりたいと思います。
数年に一度コーディングの流れ変わるのなんとかなんないかしら=3
それは放置して貯めてるからだｗ
新しい機能やプロパティを
へ〜こういうのができるのね〜程度に
たまーに追ってれば大丈夫だよ
はっきり言って書いててアホらしくなる
レスポンシブデザインにしたほうが無難でしょうか？
ソースに改行を入れないってのは少しでも効果あるのかな
brとかじゃなくソース自体の改行コード
もちろんそっちの方が無難
慣れたらそもそもそんなに手間じゃない
横並びの要素をwidth100%にして縦並びに買えるだけ
迷う時間の方がもったいない
ちゃちゃっと計算してみたらいい
文字コードUTF-8・改行コードLFで10,000行のHTMLを書いたとして
改行文字の量は
10,000B ＝ 0.08Mb
ドコモが測った泥LTEの実行速度の中央値が190Mbpsだそうなので
https://www.nttdocomo.co.jp/support/area/effective_speed/
0.08 ÷ 190 ≒ 0.00042秒
改行コードがCR+LFだったとしても0.00084秒
気にするほどのもんでもなかろう
結構いい線行ってて笑った
そこで画像化してサイトに並べようと思うんだけど画像だらけのページって
googleさんからどういう評価受けるんだろう？
べつに
>>729
べつにどうってことない
インスタグラムのページとかだって普通にヒットするじゃろ？
圧縮が入るので更に減る
もうAAは限界かな
一行AAはともかく、複数行はもうスマホでガタガタだ
font-familyに当てても駄目かね？
>>724がまともなやつならインデントも取ってるだろうしもっと膨らむぞ
インデントも削ってみよう
10,000行で、平均4段のインデント（スペース4）があったとして
160,000B ＝ 1.28Mb
0.96 ÷ 190 ≒ 0.00674秒
まあこれも誤差ですな
1.28 ÷ 190 ≒ 0.00674秒
255.255.0.1
なら
ff.ff.0.1
で行けるんじゃねって思ったけどディレクトリあるからあかんな
今だと余計な機能なんですかね？
そうでもない
特にモバイル利用が増えたんで
見られるかどうかわからん画面のはるか下方の画像をロードするのは
ユーザにとってもサーバ側にとっても、そんなにいいことない
レンタルサーバーで独自SSL化するとアドレスがhttpsになると思うんだけど
独自SSL化した後にも外部からhttpのアドレスでも表示される？
他サイトみるとhttpのリンク踏んでもhttpsのサイトにしっかり表示されてるんだけど。
どうぞ
.htaccess に追記してください
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
あ
</div>
たぶん、DOM に、改行・コメントなどの要素も入るだろ？
要素は「改行・あ・改行」
だから配信前に、ミニファイ必須！
http://rosie.5ch.net/test/read.cgi/liveplus/1547953440/l50
ありがとうございます。
これ追記しないでhttps化するとhttpのリンク踏んだ場合は表示されないのですか？
まぁねぇ
htmlを大幅に改良したマークダウンってのがあるけど、もっと流行るかと思ったけどサッパリだ
もともと英語圏のもんだからねえ
連続する改行とスペースは1つのスペースとみなすってのはわりと合理的なのかもしれん
サーバーの設定による
403になる場合やそのままhttpで表示される場合やhttpsにリダイレクトされる(>>748をサーバー側でしてくれる)場合など
Firefoxでは動いてたのにChromeじゃ動かなくてびっくりしました
職場で急にエロ動画が！てことができちゃうので
ってか最初から音出すのはやめてくれ〜
最近どんなうざい広告があるのかわかんなくなってきた…
スマホとかはそうもいかんじゃろ
今はSass使わずcssとかあり得ないし
↓↓のような3つのファイルがあって
1.[ _template.scss ] テンプレート
%template {
.main {
background: $BGColor;…
}
}
2.[ _theme-red.scss ] カラーテーマ
$BGColor: red;…
3.[ _theme-blue.scss ] カラーテーマ
$BGColor: blue;…
↓↓のようにcssを出力したいのですが
.theme-red {
.main {
background: red;…
}
}
.theme-blue {
.main {
background: blue;…
}
}
Sassの機能を使って実現できますでしょうか
目的は後にJSでclassを切り替えて全体の色を変えることなのですが…
for
でできるんじゃね
知らんけど（鼻ほじ）
どこの平行世界だよ
あぁお前一人しかいない世界かww
変数とmixin使えばいいんじゃね
Stylusの人もPostCSSの人もいるんじゃ
mixinで解決しました！ありがとうございます
このコードは、どのブラウザでも黄色が正方形、青の幅が10pxで見えてますか？
「どのブラウザ」ってーとIE6やガラケーなども含まれる
まぁ9割ぐらいの人はその見え方で見えていると思うから、大きな問題はないと思う
優しく答えるスレでイキってる無職さんw
そのテンプレートをmixinにして
extends的に使うといいよ
こういうのうざいわあ
>>765
>$BGColor: blue;…
変数を属性名にできるか？
普通は、変数は値に使うもの。
background: $BGColor
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
本当は、この本に書いてあるように、MindBEMding による、CSS の構造化が良い。
Block__Element--Modifier (BEM)
var(--hoge)知らないの？ｗｗｗｗｗ
この読点の打ち方は例のキチガイ
おまえ前にもここに来て発作起こしてたよな？早く病院もどったら
>変数を属性名にできるか？
インターポレーションて知らんか？
変数はなんにでも使えるよー
$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くらいだな。
素人丸出しやね
個人的には絶対に間違わないんだけど
おまえらの理解力の無さが一気に露呈されたな
皆さんありがとうございました
[_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;...
}...
}
変数がプロパティ名に使えるかどうかの話だった気が…
よかた
2つ目以降のテーマを作った時に競合してしまったので{}の中に入れました
[_theme_black.scss]
@import "./color-template";
body.black {
$MAIN_BACKGROUND: #202225;
$MAIN_BORDER: #2f3136;...
@include template_main(
$MAIN_BACKGROUND,
$MAIN_BORDER,...
)...
}
カッコよすぎ
その内jade→pugみたいに名前変わるかもね
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
この本では、_variables.scss に変数をまとめて定義して、
main.scss に、他のパーシャルファイルよりも前に読み込む
色違いは、MindBEMding では、Block__Element--Modifier (BEM) のModifier
その本まちがいだらけなんでしょw宣伝しても逆効果だよww
SCSS ファイルのフォルダ・ファイル数も、10ぐらいある
クラス名も、MindBEMding で、Block__Element--Modifier (BEM) の方式を使って、
名前が被らないようにしている
漏れは、こういうプロジェクトを構造化する、本を求めていた！
BEMセントリックな編集ツールがあったら欲しい？
もうあるのかなぁ
本よりもこいつがキチガイ過ぎてマジウザいわ糖質丸出しじゃねーか
超大規模ウェブサイトでも作る場合のやつだろ
クラス名のルールはこれだけでいいよ
1. prefix-component ・・・ コンポーネント名
2. prefix-component-parts ・・・コンポーネント内のパーツ名
3. prefix-state-name ・・・ 必ず1. or 2.と組み合わせて使う
prefix-は省略可能。他のフレームワークなどと区別したいときに使用する
このdivクラス名とかってつける法則というか決まりとかってあるんですか？
だから今その話をしてるんだろうが
https://pawelgrzybek.com/bem-with-emmet/
https://pawelgrzybek.com/photos/2015-10-17-3.gif
emmet用
他もあるかもしれないけど見つからなかった
流行ってないっぽい
サイトの見出しが「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を使って制御出来る様なのですがちょっと分かりません＞＜。。。詳しい人教えてくださいｍ（＿）ｍ
できました。
よくやった！！
$PATH: "/root/sub";
@import $PATH+"/file.scss"
こんな事は出来ますか？
その結果、
@import "/root/sub/file.scss"
を実行したいのですがダメでした。
http://rosie.5ch.net/test/read.cgi/liveplus/1548470408/l50
どんなやり方でも良いので
どうにか出来ませんかね？
インターポレーションでも無理ですか？
Block__Element--Modifier
BEM が、2つの_, - を使うのは、その中で、1つの_, - も使えるようにするため
importではエラーしました。
いちいち833 782とか書かなくても読点でわかるからさーキチガイ
>>785-786
に書いてある
https://blogs.adobe.com/japan/web-practical-sass-03-using-variables/
インターポレーション（ #{} ）を使って、@import する例が、ここに載っている
ひょっとしたら、ローカルファイルの書き方が違うのかな？
「sass import local file」で検索して！
情報ありがとうございます。
url()なら上手く行くのですが
ローカルファイルはダメみたいですね。
@import "/root/sub/file.scss"
これは、/ で始まる絶対パスだから、そういう機能があるかどうか？
ああ、別に相対バスでも良いのです。
やりたいのは変数を使ってパスを
指定したいだけなのですが。
ローカルファイルでは無理そうですね。
あらかじめ可変部と固定部の文字列くっつけてからimportでもダメですか？
具体的にどんなふうに書けば良いですか？
今のところ無理だってさ
https://stackoverflow.com/questions/37568179/import-path-using-variable-sass
https://github.com/sass/sass/issues/279
sass使うと大幅な工数削減になるんだけど
出来たらここの工数も削減できたのになぁ…あーあ
どういう理由で工数削減できないのか書いて
頂点計算
面計算
基本シェーディング計算
複数の複雑なライティング計算
複雑な各種シェーダー計算
階層アニメーション
アニメーションブレンディング
スキンウエイト
マッピング計算
各ゲームAI
コリジョン計算
物理演算
ラグドール計算
各種判定処理
他にも多くの計算があり、なおかつ上記計算はフィールドやたくさんのキャラクター、膨大なエフェクトにも適用され
最終的に複数の画面エフェクト系、zバッファを使った画像の重ね合わせ、
オクルージョン計算や鏡面反射など重めの処理も入っている
ゲームではこれらを60分の1フレームで計算できるのに、たかだかhtmlごときのレンダリングに何で重くなることがあるんだよ？
ブラウザエンジン作ってる連中は無能だろ
ゲームは汎用プラットフォームじゃなくていくらでも最適化やチューニングができるからそら速くできるよ
規格を守って互換性にも配慮しなきゃいけないブラウザとは束縛する条件が違いすぎる
ブラウザの処理はまずはテキスト処理だからCPU中心
計算量だけで比較すな
ゲームと違って自前のサーバばかりじゃないからな
普通は、プロジェクトフォルダ以下になるから
でも、絶対パス指定だと、プロジェクトフォルダ外を指定する可能性もあるから、やっかい
そりゃ、相対パスでも、
../../../
みたいに、ドンドン上へ遡っていけば、プロジェクトフォルダ外になってしまうけど
ゲームの技術推し派もブラウザ擁護派も、ツッコミや補足をおくれよ
10年くらい現場離れてるから最先端事情に疎いんだわ
cssアニメーションも普通に60fps出るでしょ
tdの背景が赤でその上にピンクの星を背景に重ねたいですがうまくいきません
親要素{
background:red;
position:relative;
}
親要素:before{
content:"★";
color:pink;
position:absolute;
z-index:1;
}
親要素の背景の赤→ピンクの★→親要素の文字という順番で重ねたいのですがどうすればいいでしょうか？
z-index:-1にするとbefore:が表示されません(´；ω；`)
ここの連中は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;
}
言うてもウェブは基本的には20年前から変わらず
スクリプト言語でシングルスレッド
部分的な進歩はあるんだけど
なので普通のゲームのようなプログラムと比較すること自体が
あんまりコンピュータのことわかってないんじゃないかな？
って感じはする
Googleがいくら頑張ってもゲームレベルのようにPCの性能を最大限活かせる超高度な技術は一切ない
日本語が怪しいけど、韓国の方？
そういう反応がほんと気持ち悪い
さすがに韓国人呼ばわりは酷い
プログラム覚えたての中学生なんだからそこまで言ってやるな
おい無能
>>853の一つでも理解してプログラミングしたことあるのか？
こんだけ普及してると厳しいか？
答えれねえバカがwwwwww
あぁごめん>>853については使った事ないわ
学生ならゲームプログラミングはマジでやめといた方がいいぞ
労働量に対して給料が安すぎる
趣味でフリゲ作ってるぐらいなら別にいいけどね
2chでも大昔からあるね
名前は聞いたことがない
時代はマルチプラットフォームなWebTechなんだよ
アプリでよくね？じゃなくてWebでよくね？の時代になりつつある
乗り遅れちゃだめよ
はい
なにが「もう」なのかはわからんが
マジ？
WPAとかやってる？
それをいうならPWAでしょ
ionicフレームワークを使えばAngularベースで
Webページ、PWA、Androidネイティブアプリ、iOSネイティブアプリの開発ができる
同じ言語、同じソースで開発できて細かくUIの装飾が設定できて融通が利くWebTechがこれからは重宝されるよ
すまん、PWAだった
ionic知らなかったわ、これすげぇな
React Nativeよりマシなの？
なーんもやってないわ
https://i.imgur.com/AWevlib.png
片っ端から試してみりゃいいじゃない
お金がかかるわけでもねえし
知ったかする前に検索しろよ。
react ってついてるからって引っ張られてんじゃねーぞ
は？
iPhone、Androidのネイティブアプリ生成するんだから関係あるだろ
あんまり向いてない？
webと関係ないってんだが。スレタイ読めるか？幼稚園児。
大方本当にwebview使ったハイブリッドフレームワークと勘違いしててそれを指摘されて恥ずかしくなって誤魔化してるんだろう。
ミジメｗ
ふうにしました。
＜span style="color:white; border-radius: 8px; border: 1px solid black; background-color: green;"＞✔＜/span＞
いちおうアイコンぽく表示出来たのですが、縦長の楕円になります。
これをまんまるにして本物のアイコンぽくしたいのですが、どうやればよいでしょうか？
１文字を横に引き延ばすなどは出来ますか？
width設定で広がるかなあと思ったのですが出来ませんでした。
display: inline-block;
辺りで
http://jsfiddle.net/4wfupyg8/
後はwebfontを使ってみるとか。重いけど
https://fontawesome.com/icons/check-square?style=regular
border-radius: 50%;指定で丸くなる
transform: scale( 1.2 , 1 );みたいにすればいいと思う
あーそれでいいのか、今までpx決め打ちシてたわ
http://jsfiddle.net/4wfupyg8/1/
>>899
>>900
>>901
ありがとうございました。物凄いテクニックが
あるんですね。感心しました。
https://jsfiddle.net/bbee7/5Lsvgzc9/
iphoneで見たら微妙だな
pxでカッチリあわせてもズレやがるブラウザがいる
指南サイトだとwidthとheightが0のボックスにborderの3辺をtransparentにするってのばっかりなんだけど
content:"▲"をtransform:rotateで横にするのってなんか問題あるの？
テキストにするとそれが読み上げ対象外、つまり
area-hidden=”true”
を付けなきゃならんかったり、
各ブラウザで▲がどういう風に表示されるかを考えなきゃならんかったりで色々めんどい
どっちにしろ要素が必要なら、borderだけで済む方が楽
https://www.fileformat.info/info/unicode/char/25b6/index.htm
実体参照： ▶
コピペ： ▶
うおっ
初めて知った
（ ´∀｀）
俺も最近これ使うこと多いわー
pugとsassのテンプレで変数化してる
htmlも、bodyも省略してるけど、
なんの害があるの？
るべきですか？
スマホでも崩れないようにしたいです。
よーく目を凝らしてもう一度>>6をみてください
心の目をしかと見開いて
百害あって一利なし（ドヤァ
と書いてありますね？
そうつまりこれは、百害あって云々と言いたかっただけなのであって
実際の害の有無とは関係ないし、なんなら言葉自体に意味もないのです
ありがとうございます。
害がないなら、タイプミスのも含めてソースコードは短い方がいいですよね。
これこそ意味のないレスだな
>>918
そんなところタイプミスするならもう辞めろ
笑ったｗ
確かにそれは言える
そんなミスはしないが、
納品するときソースが短いとキレイに見えるだろ？
「閉じタグが無いからちゃんとつけろ」等、無駄なクレームに発展する恐れがある
それなら最初から付けておいた方が良い
・・・って思ったら>>917で出てるじゃん
まぁこの辺の線引が自分で出来ないなら、変なことはできるだけ避けたほうが無難だよ、としか言えない
thead「どうせ、最初のヘッダ行のスタイルのために私を使うだけなんでしょ！」
やべえ笑い過ぎて腹痛いｗｗｗｗｗ
ソースが冗長だと汚く見えるだけ
テクニカルに短くしても印象は変わらない
>>923
すいません
>>924
labelは使うよ
終了タグがないとクレームをつけてきた蔵はいないが、
勝手に古いホームページビルダーか何かで弄って、XHTMLにされたことはある。
あまりムキになって反論するものではないが、
マークアップを推敲や校正するときって、
文章のほうに中心で、タグは関係ない人のほうが多い。
行間が、
</p>
<p>
ってなってるより
<p>
だけのほうが読みやすい。
マークアップは最小文字数のほうが読む人に優しい。
だからidやclassもできるだけ振らず、不要なdivも減らすようにしている。
bodyがあるのに、div id=”container”なんて読み難くなるだけ。
余談だが、色の指定はblackとか、darkredとかの色名で指定している。
プロしか分からない数字の羅列を美しいと思う人は少ないだろう。
釣り針でかいよ
なんか20年前にタイムスリップした気分
> 「閉じタグが無いからちゃんとつけろ」等、無駄なクレームに発展する恐れがある
> それなら最初から付けておいた方が良い
不要な閉じタグを入れるなってクレームが来ることもあるよ
どっちもどっち
プロしかわからない数字の羅列w
そもそもおまえ素人じゃんwww
俺は終了タグが不要だって指摘されたことはないなあ
伝送量減らすため色々削ってってお願いされたことは一度あったけど
＞色の指定はblackとか、darkredとかの色名で指定している。
コードのためにサイトの品質落とすとか、最悪すぎるわ・・・
$color_blue2: #003699; // スタンダードな濃さの青
$color_blue4: #C0D9E0; // 背景に使うかなり薄い青
：
みたいなのをSASSの変数集に作っておいて
使うときに「あれ？どれだっけ？」ってなっちゃうことがよくある…
ttps://marketplace.visualstudio.com/items?itemName=Nkzq.sass-variables-helper
それはわからなくなる
$blue-darkest: darken($blue-base: blue, 10%);
$blue-darker: darken($blue-base: blue, 5%);
$blue-lighter: lighten($blue-base, 5%);
$blue-lightest: lighten($blue-base, 10%);
$blue-base: blue;
$blue-darkest: darken($blue-blue, 10%);
$blue-darker: darken($blue-blue, 5%);
$blue-lighter: lighten($blue-base, 5%);
$blue-lightest: lighten($blue-base, 10%);
$blue-darkest-of-the-darkests: darken($blue-blue, 30%);
$blue-second-darkest: darken($blue-blue, 25%);
$blue-third-darkest: darken($blue-blue, 20%);
$blue-darkest: darken($blue-blue, 15%);
$blue-much-darker: darken($blue-blue, 10%);
$blue-darker: darken($blue-blue, 5%);
$blue-lighter: lighten($blue-base, 5%);
$blue-much-lighter: lighten($blue-base, 10%);
$blue-lightest: lighten($blue-base, 15%);
$blue-third-lightest: lighten($blue-base, 20%);
$blue-second-lightest: lighten($blue-base, 25%);
$blue-lightest-of-the-lightests: lighten($blue-base, 30%);
いくらでも増やせるから問題ない。
正しくはマッチベター。
ｗｗｗ
上の表はヘッダーを青で他は色指定してないですが2つ目の表（下）を貼ると上の表が崩れてしまいます。
https://i.imgur.com/rJ4jqPQ.jpg
ソース貼って
https://i.imgur.com/D1z5dMI.jpg
https://i.imgur.com/9u4kJoL.jpg
https://i.imgur.com/ifjU1xD.jpg
https://i.imgur.com/HwOzN79.jpg
https://i.imgur.com/38vLWnv.jpg
https://i.imgur.com/PGx9o1w.jpg
https://i.imgur.com/cdENnMu.jpg
これって今も使ってるの？
入りきらないならjsfiddleとか使ってよばか
htmlタグごと2つ連ねてるのか
それが原因だろうね
無知ですみません、詳しくお願いします。HTMLソースのどこかを修正すれば治る問題ですか？
それとも書き出し自体が間違ってますか？
xmlだと<br />になる
html5でも使えるけど使う理由はない
たぶん君ほど微妙な色加減に頼ったデザインはしていない。
プロって何だ？
コーディングで料金とってる人って意味なら、オレもプロだが？
入稿してきた記者にも色がの想像がつくように色名で指定している。
プロコーダーと、簡単なマークアップだけの記者と、クラと、
総合的にみて、バランスのいいところでルール作りをするのが仕事だと思う。
書き出すまえに2つ並べて書き出せるなら
そうしたほうがいい
こいつの日本語が不安定で草
朝鮮人かな
まぁそのアフリカ人みたいな配色で蔵が納得してるならいいんじゃね？
俺だったら気持ち悪くて仕方ないけど
いや、やっぱりダメだ
俺の目に入る可能性があるんだからお前はもうちょっとデザインセンス磨いてくれ
クソダササイト作って金もらえればそれでいいって、プロ意識の欠片もない。コジキと変わらん
具体的な反論をしてほしい。
わたしが朝鮮人かどうかなど関係ない。
むしろレッテル貼りこそ日本人離れしている。
このサイト開いた時の「高野山」ってどういう手法を使ってるんですか？
君はたぶん立派なウェブデザイナーなんだろうけど、
ユーザーのモニタなんてそこまでシビアに調整されていない。
だったらこの５ちゃんのサイト見てみろ。
気持ち悪くならないか？
日本最高ランクのPV数を誇るサイトと
お前クソサイトを比べるな
中身も歴史も違いすぎるんだよ
どれだけ烏滸がましいんだ
おまえはデザインのことを言ってるのか、
アクセスのことを言ってるのか？
喧嘩するつもりでここにいるわけじゃないが、
程度の低い反論はやめてほしい。
SVG
ソースみたら和む
プロってなんだっておまえがプロって言い出したんだろ？
そもそも入稿時に記者がCSSみるんかよww
そういうの強迫観念って言うんですよ読点さん
https://mevius.5ch.net/test/read.cgi/hp/1548865336/
乙。こ、これはユーザーの視線移動なんだから変なかんちがいしないでよね！
ありがとう
使わないけど、意外と読みやすくなる
https://www.technologyreview.jp/s/122607/giving-algorithms-a-sense-of-uncertainty-could-make-them-more-ethical
ところでこれ、開発ツールには表示されないのか
このpathはどうやって作るんですか？
イラレとかinkscapeとか
コンパイラがどのへんでエラってるか吐くでしょ
あとテキストエディタもカッコの対応くらいは
コンパイラはkoala使ってて昔から指してる行が見当違いで…
テキストエディタも今Node.jsのパスが直せなくて使えない状態…
問題の箇所が分かっても直せないような気がする
最後時間があったからlinter入れてみたけど使い方が分からなかった
node.jsも使えるようにしたから月曜からは大丈夫…
お返事ありがとう
先に環境治せｗそれはさて置き、そうなったらもう、昔ながらのデバッグ方法でいこう
コード半分削ってコンパイルを繰り返して
エラー消えたときに削ったところが問題箇所だ
よかた
これにこりたら、次から閉じカッコは先に書くように(｀・ω・´)
人が作っためちゃくちゃなSCSSだったから焦ってた
1000なら安心して寝る
新しいスレッドを立ててください。
life time: 52日 19時間 39分 30秒
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php
レス数が1000を超えています。これ以上書き込みはできません。
ニュース
- 【サッカー】U-23日本代表、UAE代表に完封勝ちで2連勝！日韓戦を前に決勝トーナメント進出を決める [久太郎★]
- 【滋賀】いなり寿司を万引きしたとして誤認逮捕され、82時間拘束された女性、涙ながらに苦しい胸の内を明かす… ★3 [Hitzeschleier★]
- 【理研】日本人の祖先は「縄文系」「関西系」「東北系」の３系統か、ゲノム分析で従来の説「縄文と弥生」に疑問 ★2 [樽悶★]
- ロシア出身YouTuber、経済的困窮で「国ガチャ失敗」？嘆く日本人を一喝「給料13万？自分のせいやん」日本を「大当たり」とする理由は [muffin★]
- 築地市場跡地に5万人規模スタジアム建設へ 事業者は三井不動産など ★２ [ぐれ★]
- 大谷翔平を〝見誤った〟北村弁護士が謝罪「大嘘つきにだまされた自分を恥じております」 [muffin★]
- 【悲報】だが、ビーガニズムに対する反発がアンチヴィーガンなんだよね
- 【実況】博衣こよりがえちえちplate up🧪★5
- 【実況】博衣こよりがえちえちplate up🧪★4
- 【実況】博衣こよりがえちえちplate up🧪★6
- 長谷川亮太 ちばけんま 唐澤貴洋 無能弁護士【チンフェ生誕31周年】
- お前ら今何色のパンツ履いてるの