HTML/CSS のどんな質問にも優しく答えるｽﾚ 39 ﾐｯｸﾐｸ
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 38
https://mevius.5ch.net/test/read.cgi/hp/1555113111/
■関連スレ
Webサイト制作初心者用質問スレ part250
https://mevius.5ch.net/test/read.cgi/hp/1546055063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html コーダーやデザイナーからしたら
フラッシュ死んでくれてありがとうだけどな ウルトラ初心者なんだが
リンクの左に▶︎みたいな記号をつけたいんだけど、擬似なんとかで対応可能？ >>711
申し訳ありませんでした
疑似なんとかで対応可能です fontタグやsmallタグは廃止になったらしいけど使ってみたらまだ普通に使えたのはどうして？ >>704みたいなのはガチデザイナーで
独自の世界観とかセンスがないと無理だよな
なんちゃってデザイナーや「私デザインもできますが？」的なコーダーがテキトウにパクって真似できるようなものじゃない
flash全盛期にいたこういうクリエイター達は今何やってんだろ >>714
smallは廃止じゃないよ。
わかってる人はコピーライトを括ったりで普通に使う。 なんかsectionとかarticleとか使ってる人ってあんまいないのな んなわけない。
最近のサイトやWPはみんな使ってる 質問します
今ある課題をやってるんですけど
それちょっと古いやつなんですね
そしてその課題の見本を見たらwebページの区画分けにボーダーラインが引いてあるんです
どうもその課題はいわゆる「tableレイアウト」を使用してるようです
で、俺はtableレイアウトは使いたくないと思っています
そこで質問なのですがflexboxやgridレイアウトを使って区画分けで格子状のボーダーラインを
引くにはどのような手法を使えばいいでしょうか？ 自己解決しました
普通にborderを引くというのでいいみたいです >>715
普通にウェブ作ってますよ
全盛期もフラッシュだけやってたわけじゃなかったし
あと恐ろしいことに
今でもフルフラッシュのサイトを１件メンテナンスしてるよ、毎月
客担当者とディレクターと俺以外、誰が見てるのか…と思いながら更新してるよ！ >>719
最近の課題でテーブルタグっおかしいよ。大学？ >>721
消滅しても誰も気が付かない状況ならメンテしてる「フリ」をしとけば良いのでは?
flashはマルウェアの配布経路としても見放されてしまったほど廃れ切った >>722
タグを見たわけじゃないです
見本の画像があってその通りに実装するという課題です
それ見たら区画ごとにラインで区切られててどうもtableでやってるっぽいと思いました >>722
見本の画像はwebブラウザのスクリーンショットで大元にはhtmlとcssのファイルが存在してると
思うのですがそれは見ていないという事です >>725
gridじゃなかろか
レイアウトの考え方自体はtableでやってたのとそんなに変わらん >>727
課題が作られたのが2012年辺りですのでgridではないですね
それは置いておいてgridで格子状にボーダーラインを引く方法ってやっぱり
borderを使うんですよね？
borderで綺麗な格子状の線を引く方法ってどうやるんですか？
tableならtable-collapseを使って隣り合ったボーダーラインを重複させないで
表示できるのですが >>728
間違えました
border-collapseでした
tableでしか使えないという >>728
昔ながらのＬ字型ボーダーじゃ駄目かね？
最初の行と最後の列だけ上と右にもつけて >>730
ありがとうございます
それは検索したら出てきました
上手くも行きました
ただw
その方法は近代的なweb制作としてどうなんでしょうか？w
ちょっとコードが若干奇形になるような >>731
どこからが近代的だと思ってるのかわからんが
:first-childと:last-childが当たり前に使える今は特に困ることもなかろう
以前はHTMLにクラス書いたりしたもんだが >>732
そうですね
L字型で上手く行ったのでこれでいいのかなと思います
俺としては「グリッドラインの表示」「スタイリング」という機能があればなと
思い質問しました もうすぐ小学生がプログラミング授業の宿題について
ここに質問にくる時代がくるのかもな 親戚の中学生に教えたことがある
久々にemmetもsassもないメモ帳で書いたらわたわたしてしまったｗ 昔、複数人チャットで遊んでたら小学生に囲まれて
学校のジャージの肩の線の本数の話題になったが、
なんとかついていったわ。
しかしジャニーズの話題になってもう無理だと思った。
ネットは既に小学生の溜まり場ができつつある。 いや、このスレもみんな小学生しかいないでしょ？
中学生以上のおじさんは出ていけよ 俺もアメブロ書いてたの胎児だったな
今思うと超恥ずかしい あ？おまえ何小だよ
東小の田中君知ってんのかよ
俺いつも遊んでんだからな 10年前くらいの事なんだが、知り合いの子供（小学生）が
自分達で掲示板作成したよって親に言ってるらしく
それはすごいcgiとか使ったのかなとか思って見たらFC2のレンタル掲示板だった。。
まあ素人からしたら小学生でも掲示板作れるんだって思ってるんだろうなあ >>741
20年前はそこそこの大人が
自作掲示板つってKentWebのコード置いただけだったりしたからセーフ 小学校いくのだりーわ
先生のITレベルが原始人以下で話にならん
AI導入はよ >>739
それは恥ずいな
その辺は基本、胎児になる前に終わらせておかないと グリッドガイドで画像をたくさん表示させてるんだけど、左側に白い線がでる
解決策ある？ 大きさが決め打ちではなく可変で
端数が合わずに隙間が出来ちゃう
というのであれば
ボックスより画像をすこーし大きくしてはみ出させるとか firefoxアドオンでページの背景色を変更したいのですが、どの部分のCSSを変更したらいいんでしょうか。
CSSにも優先順位があるようで、最も優先される部分を変更すればいいかもと思うんですg。 >>754
どのアドオンでどのページのどの部分の背景のどのどのg。 >>725
グリッドレイアウトだと推測。新しいから今なら儲かるかも？ 960ピクセルで60ぐらいで分けているやつだっけ？
グリッドなんとかって結局何のためのものだったの？
レスポンシブデザインをグリッドレイアウトで作るってやつ？
2019年の流行って最低何種類くらいのレスポンシブに分けるのがおすすめ？
3個ぐらい？(〜360, 361〜960, 961〜)
何個も分けるのは大変よね。 >>756
アドオンは自作しているのです
firefoxのdark readerのような背景色を変更するアドオンを作りたいのですが、すべてのページにおいて背景を変更したいです。
すべてを上書きできるようなCSSはないですかね。 >>760
*{background-color: #000; !important}
とか
body{background-color: #000; !important}
とかやれば背景は変更できる可能性高いけど
firefoxのdark readerってそんな単純な仕組みじゃないでしょ。
背景の色変えたら文字の色も変えないと読めなくなるよ コロンの位置間違えた
*{background-color: #000 !important:}
とか
body{background-color: #000 !important;}
が正しい >>762
もちろん文字の色も変更しますが、単純にhtmlタグにstyle属性を使用して、important指定しただけでは、機能しないこともあるんですよね。 >>764
横からだけど、セレクタの優先度を高めて全てを確実に上書きたいたい場合は *:not(#a):not(#aa) のように意味の無いnot(中身をIDにすると効率がいい)を何個かくっつけるといいよ
darkreader使った方が楽だし見やすいと思うけど... >>765
さらに横からですまんですが
理由知りたい！教えて！ >>764
ググればスグ分かると思うけど...
CSSセレクタの優先順位の計算方法 - Qiita
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666
例えば下記ルールの両方に合致する要素に対して実際に適用される(発現する)スタイルは1)になる
これは1)のセレクタの優先度が高いことによる(クラス指定よりID指定の方が優先度が高い)
1) #aa .link
2) .aa .link >>767
すまぬ優先度はわかってる
意味のないnotがわからなかったっす 「対象を絞り込まずに」優先度を上げる手段ってことだよ さらにさらに横からで混乱させたいんだけど
importantってインポテンツって読み方であってますかね >>764
style属性よりもスタイルシートの構造セレクタの方が強いよ >>770
あー
notでもid含んでればってことなのね！なるほど
ところで>>767の点数計算ってなんかおかしくないですか？ アドオンでheaderの最後ににスタイルシート埋め込んだりしてる？ あるオブジェクトのCSSを取得したいのですが、想像ではbackground-colorが出力されるかなと思ったんですが、よくわからない羅列が出てきます。
使い方間違っていますか？
https://ideone.com/0W4Api
２ｃｈってコード貼れないんですね >>772
style属性が１０００点となっていますが、これにimportantが一番強いのでは？構造セレクタってなんですか？
調べても出てきません。 >>776
「CSSを取得したい」とあるけど、対象要素に適用されている全てのスタイルを取得したいの?
それとも対象要素の「style属性」を取得したいの? >>776
getComputedStyleはそのエレメントに直に指定したスタイルやcssに記述したものだけではなく適用されるすべてのCSSプロパティが返ります
background-colorがほしいならget_element.backgroundColor
直に指定したのだけ取りたいならelement.style.backgroundColor >>778
対象のCSSですね
idを指定しているもののCSSですね
>>779
どうも、出来ました 想像なんですが、どのCSSが優先されるかなかなか判断がつかないからこそ、背景を指定している部分を見つけて、そこを書き換えるわけですよね？
例えば一番強い権限のCSS設定があったとしても、おそらくページ管理者の設定したものが優先されるなんてことが起こるかもしれません。
javascriptの領域になっちゃいますが、背景色が指定されている部分をすべて見つけ出して、上書きするというのが方法として考えられるんでしょうか？
dark readerのgithub読もうと試みましたが、難しくてわからないです
概念だけでも知りたいです > 例えば一番強い権限のCSS設定があったとしても、おそらくページ管理者の設定したものが優先されるなんてことが起こるかもしれません。
？？？ >>781
dark reader
これ単に、色の値をFFから引いた数値にしてるだけじゃないの アドオンでやってるならユーザーCSSを書いてしまえば良いんでない？ >>767
なんで今さら間違ってる記事なんか持ってくるんですか？
な ん で 今 さ ら 間 違 っ て る 記 事 な ん か 持 っ て く る ん で す か ？
バツとしてそれ書いた人に記事消させなさい ビギナー僕は詳細に指定しているのが優先順位高いかと思ってたけど違うのかな？ どこが間違ってるのか教えて欲しい
優先順位なんてまず問題にならないから、気にしなくなったわ >>787
なんで、元の記事を見ればわかることを聞くんですか？
ほんとうにばかばかりですね >>788
読んでも分からなかったから普通に教えて欲しい
ID、style属性使わなきゃまず大丈夫だから、cssの重みは全然勉強してないんだ >>785
やっぱそうだよね
この点数計算って20年前からあるけど
なんかおかしいよね
https://jsfiddle.net/5re1dwyu/ >>767
探したらW3Cに同じ内容があったわ
https://www.w3.org/TR/CSS1/#cascading-order
調べれば分かるんだろうけど、得るものが少なすぎるｗ
知ってる人いたらcssの詳細度の計算方法教えてくれ〜 >>792
なぜ今更、Level1なのか…
Level4は>>791 わかりやすいの拾ってきた！
A = ID
B = クラス
C = 要素
(A, B, C)と考えて辞書比較する
なのでID100+クラス10+要素の計算は間違い
まずAで比較
Aが同点ならB
Bも同点ならC
という計算
とここまで書いてリロードしたら( ；∀；) repeating-linear-gradientについて教えてください
白黒の斜線を1px単位で刻みたいんですが、その際はどちらの書き方が正しいのでしょうか？
(135deg,white,white 1px,black 1px,black 2px)
(135deg,white,white 1px,black 2px,black 3px) >>795
background:repeating-linear-gradient(135deg,white ,white 1px,black 1px,black 2px)
目が細かすぎるから荒くしたほうがいい >>795
background:repeating-linear-gradient(135deg,white 0px 1px,black 1px 2px)
こういう書き方もある >>782
結局、こちらから指定しても、管理者のほうが強いものを設定しているかもしれない
一番強いやつはなんでしょうか >>799
htmlに直書きかjsが強いんじゃないかな？ その一番強いやつを管理者が設定していたら、そちらのほうが強くなるんですかね
だから、上書きではなく、書換でなければいけないと？ サイトの管理者です
外部から書き換えても強さは同じなんですかね
ただ、確実にこれが一番強いというものがなさそうだから設定箇所の書き換えが確実ということですか？ >>801
置換してもJSでフレームワーク制御されている場合
またすぐ上書きされるかもしれないし
ShadowDOMなどで隠蔽されてるかもしれないので
サイト個別に臨機応変に対応するくらいの気持ちがないと無理 jsで<html>に#saikyoを設定
元のcssをfooとすると、後のcssを全部#saikyo fooにすれば全部書き換え可能 >>804
諦めます
dakr readerのソース読める能力もないので(´;ω;｀) ■ このスレッドは過去ログ倉庫に格納されています
