HTML/CSS のどんな質問にも優しく答えるスレ 34
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 33
http://mevius.5ch.net/test/read.cgi/hp/1531279252/
■関連スレ
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 >>575
なんか不毛だな…
最初からブラウザでデザインするような拡張機能ねーかな… >>575
>同じ値にしてもズレまくるから、見た目重視にやってる
↑全く持ってその通り。
数値が当てにならない。結局見ながら何度も修正するハメになる line-heightの挙動に理解がないデザイナーはわりといる HTMLの出力として、各行に行番号を表示させる方法について説明しているサイトを教えて下さい。
ググっても殆どは｢HTMLソース編集中に｣行番号を表示させる事ばかりが載っているので、私の望みではないです。
細部の仕様については使いながら考えていきたいと思っています。 >>580
code-prettifyとかsyntax-highlighterとか
そのへんの話かな？ >>575
最近はnoto使うことが多いから
デザインカンプ通りの数値でほぼ大丈夫だな
トラッキング→letter-spacingの変換はsassのmixinでやってる >>581
行番号の表示スタイルとしてはそれなんですが、それも結局はソースコードを読者に見せるための行番号表示であって、
私の望むところとしては、普通の文章に行番号をつけて読者に見せたいんです >>583
普通の文章だと横幅によって行番号は変わる。
文章の中で○行を参照してくださいとか
書かないと約束できるか？ prism.js というものがソースコードをプログラマー読者向けに書けるようにしてくれるみたいですが、
これが｢結果として出てくる普通のHTML文章｣に適応できたらいいんですがね >>583
こういうのが嫌なら自分で作るしかねえんじゃね？
需要ねえし
そのブロックのline-heightに合わせて
左に行番号をじゃーっと羅列すりゃあいい
やり方はJSスレで聞いておくれ >>584
そんなことを書くバカはいちいち相手にしない
社内でまともに相手にしようとしてるヤツがいたらやめろと言うレベル
んなもんまともに対応するのが当然と思われたらかなわんわ >>588
これ、正確に数えられるんか？
ざっとしか見てないけど、1emの幅を測ってボックスの高さ超えるまで足してるみたいだけど うーーん、やっぱお前ら程度の頭には入門書を越える内容となると途端に何の有益な回答も得られないか…
せいぜい<div>,<span>,float,margin,paddingレベルの｢初級ワード｣を駆使して入門者に教えた気分に浸っとけｗｗｗ Bulmaってフレームワーク使ってみたい
HTMLもJSも知識なくても頑張って勉強したら使えるかな <div style="display:none">
はインラインといいますが、
以下2つの呼び方ってありますか？
<link rel="stylesheet" type="text/css" href="foo.css" media="all">
<style type="text/css">
div {
display:none;
}
</style> あるかないかを聞いています。
あってるかあってないかではありません。 >>596-598
ID出し忘れました、すいません
>>595への回答、よろしくお願いします >>595
一般的には外部css、内部cssって呼ぶ ボックス内のテキストに1文字ずつ<span>をつける
↓
ひとつずつoffsetTopを見ていって、数値が変わったら行が変わった位置になる
↓
行番号の要素を追加
↓
window.onresizeで上記をもう一度
これでどうだろう？ 重くなりそうだな
そんな押し付けがましくやることなのか 質問させてください
HTMLのdialogタグでモーダルウィンドウを表示したところ、ウィンドウが画面の左に寄せて表示されてしまいました
特にそういった設定はしておらず、調べてもどうもデフォルトで真ん中になっているようで良い情報がなかったのですが、どこか怪しいところとか、確認すべき箇所ってありますか？
ブラウザはChromeです >>606
dialog {
display: block;
margin: 0 auto;
}
多分親要素がtext-align:leftか何かを設定している >>604
俺ならwrapperと左に兄弟要素作って
見出しに使い、親要素のheight＝元のボックスのheightってのをやってみるかな
なんにしろめんどくさいけど >>607
ありがとうございます
後で試してみます
新しいタグは当たり前ですが情報少ないですね…かなり便利そうなので普及してほしい フロントは専門外なので勉強のためにここを
のぞいてるんだけど、そんなタグがあるなんて
初めて知った
へー。 >>607
display: blockを指定するとダイアログの下の表示がずれてしまいましたが、
margin: 0 autoだけでもきちんと中央に表示されたので解決しました
早い回答ありがとうございました margin: autoはblockにしか効かないんじゃなかったか・・・？ レスポンシブで、スマホの時はヘッダ（ナビ）とフッタ固定にしてるんだけど
背景を画面全体で一枚置いてるだけなので、スクロールすると文字が被っちゃう
固定部分に重なった文字だけ色を背景画像に近づける、もしくはコンテンツだけを固定部分に重ならないようにスクロールできるようにすることは可能ですか？
できればCSSとタグだけで実装できるなら嬉しい…
手打ちだけで使えるならJavaScriptもがんばってみま
>>613
中心部分にpaddingを付けて、paddingの上にヘッダ・フッタを乗せるようにする
中心の部分にpadding漬けにくかったら、body要素にでもpadding付けて後はヘッダ・フッタのtopなどで調節すればok
cssだけで行ける ちょっとしたモーダルウィンドウを画面中央にするのってcssだけじゃ無理なのかなあ
cssだけでてきたら素敵なんだけどなあ checkedで表示切り替え
display:block
position:fixed
flex（ほか何でもいいけど）で中央揃え
本気出せばこの辺で行ける ちょっとしたモーダルなら
margin上下左右ゼロではダメかね？ flexとかmarginだと親要素の中央じゃない？
画面(ウィンドウ)より縦長のページで画面中央にしたい
bodyのheightがウィンドウの高さより高いからbodyの中央にしても画面外に行くんだよね サイズ決まってるならcalc
決まってないなら
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
とか 画面全体を覆う要素を用意してモーダルを包み、flexとalign-items:centerとか
汎用性低い？ エスパーにそこそこ自信あったが
>>613の意味がわからなかった
何がどこの何と被るのか、主語が無いのはこういう奴のあるあるパターンなんだが、
今回はだめだたわ >>623
calcでどう位置をだせばいいの？
>>625
それだと画面の外に出るね
例えば1920x1080のモニタで高さ2000pxのページの一番上を表示してる時にそれすると画面の下の方に見切れるよね
>>626
画面全体を覆う要素というのが用意できないかと…
画面の高さと表示してる位置が取れないからなんかもやもやする… モーダルウィンドウをなにでどう表示したときの話をしてるんだ？
625のやり方ではみ出るってのがよくわからなう >>628
109vw * 100vhの要素にflexで入れればいけるんじゃ 親要素より子要素の高さがあるときalign-itemsの挙動ってどうなるっけ >>628
画面中央であってページ全体の中央じゃないでしょ？
だったら100vw100vhのdivをfix,flexの縦横centerにして中にdivおけばいけるでしょ >>618
作ったよ
pushって要素をクリックすればウィンドウっぽいものが出るようになっている
http://jsfiddle.net/cLty4hpg/2/ >>627
z-indexのことかと思ったけど614を読んでもよくわからなかった >>634
以前、cssのdisplayプロパティには表示/非表示を切り替える役割（jQueryでいう.show()/.hide()）と
インライン/ブロックなどのレイアウトを切り替える役割の2種類があって
表示/非表示を汎用クラスで使用する場合、無理があるって言ったら
このスレで意味不明とか言ってスゲーバカにされたわ。
言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
汎用クラスにする場合、出来ないっつー事だったんだがな
バカにされた意味が未だにわからん。 > 以前、cssのdisplayプロパティには表示/非表示を切り替える役割（jQueryでいう.show()/.hide()）と
> インライン/ブロックなどのレイアウトを切り替える役割の2種類があって
・インラインで表示
・ブロックで表示
・表示しない（インラインでもブロックでもない）
の1種類しか役割はない
「表示しない」もレイアウトの一つ
> 表示/非表示を汎用クラスで使用する場合、無理があるって言ったら
> このスレで意味不明とか言ってスゲーバカにされたわ。
何が言いたいのかわからん。意味不明と言われても当然だろう
> 言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
> 汎用クラスにする場合、出来ないっつー事だったんだがな
何が出来ないのかさっぱりわからない。日本語がおかしい >>636
>>636が正しいと思うよ。
表示非表示に関しては、そもそもがcssの欠陥だと思う
class="show block"や、class="show flex"みたいにするか。めちゃくちゃかっこ悪いけど
汎用classにするならwrapperをdisplay:inlineにすると影響が少ないのかな
そもそも論を言うとここはやはりjQueryに任せるべきか > class="show block"や、class="show flex"みたいにするか。めちゃくちゃかっこ悪いけど
意味不明。show blockがあるってことは、その反対
「ブロックで表示しない」や「flexで表示しない」があるってことか？
それは一体どういう意味だ？
表示しないのであれば、そこになにもないで当然だろう
そこにもの（ブロック等）があるが見えないだけっていうのならvisibilityがある
displayは物自体がなくなるのだから、それはブロックでもflexでもない > 言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
> 汎用クラスにする場合、出来ないっつー事だったんだがな
.onっていう汎用クラス使ってるじゃん visibilityは使い勝手悪くない？
何かバグも合ったはずだけど忘れた 使い勝手？
visibilityを使ってこんな裏技考えてみましたとかやる気か？
そこに物はあるが見えなくしたいってときに使うだけだろ >>639
なんで汎用クラスにしたら全部が全部汎用クラスでの運用になるん？ >>639
>そもそもがcssの欠陥
その欠陥は認知されていて、過去に box-suppress とかいう表示切り替え専用のプロパティが提案されたこともあった
なので現状では、元のスタイルを display:none で上書きする専用のclass（その class を外せば flex や giid など何であれ、元のdisplayに復帰する）か、hidden属性で対処するしかない（それで十分とも言えるので box-suppressはお蔵入りになったのかもしれん） >>645
ありがとう！
歴史に詳しい人がいるとうまくまとまるね >>645
提案されて却下ってことは、みんなが欠点に気づいていないってことじゃなくて、
それは欠点ではないと結論が出たってことなんだよ >>645
> なので現状では、元のスタイルを display:none で上書きする専用のclass（その class を外せば flex や giid など何であれ、元のdisplayに復帰する）か、hidden属性で対処するしかない
対処するしか無いんじゃなくて、そのやり方がCSSの正しいやり方ってことだよ
他の属性だってみんなそのやり方なんだから 1つだけわかった
たぶん、意味不明とか反論している人は、使用場面に遭遇した事ないんだわ
以前に動的サイトをロクに作った事無い奴に、その手法は動的では使えないよって
言っても最初全く通じなかったのと同じだわ
わかる人だけは何人か反応してるからもういいわ 汎用クラス .on があったとして
表示させるためのプロパティがdisplay:blockだったとすると
flexでレイアウトしていた要素は非表示から表示時にflex状態で復帰できないとか
display:noneで非表示してしまうと再表示時に再度コンテンツの読み込み直しになるとか
そういうところが不便ってことじゃなくて？ やっぱおまえら
unsetは使わんの？IEで使えないから >>649
使用場面に遭遇したことがあるというのなら、
その使用場面を言えば？
それが出来ないから意味不明って指摘に反論できないんだろ。
自分が悪いのに他人のせいにするな >>651
ずっと前から欲しかった機能だわこれ
存在を知らなかった >>650
そういう事。だからラッパーに頼るしかなくなる
>>651
IEでバグるから回避して以来、ずっと忘れてた・・・
今って問題なく使えるの？ > そういう事。だからラッパーに頼るしかなくなる
えぇ？それが理由ならお前の勘違いってことじゃん
ラッパーなんかいらないし
<div class="dialog on">ダイアログ</div>
.dialog { display: none; }
.dialog.on { display: block; }
クラス名は階層にしなくても繋げられるんですよ？ >>658
.dialog.on { display: block; }
これがblockかflexかinlineかわからないよねって話してるの .red { color: red } と書いたらだめな理由知ってる？
クラス名 = 見た目 になってるからだめ
クラス名で一律に見た目が決定されたらだめなんだよ
同じ理由で .on { display: block } というのもだめ
.on というのは見た目ではなくて状態を表す言葉。
.on という状態でどういう見た目になるかは
そのコンポーネント次第 >>659
display: blockって書いてあるんだからblockじゃん？
flexならdisplay: flex、inlineならdisplay: inline って書くんだよ
CSSの勉強をしよう！ 未だに全て物のはインライン要素かブロック要素のどちらかに分類されるって
思ってるのかな？
HTML5でそういう分類は廃止されたんだが
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements >>661
それがonという汎用classで使いまわせないって話 >>657
やっぱアカンか、ありがとう
IEいつまで独自仕様なんだろう >>663
> それがonという汎用classで使いまわせないって話
あー、やっぱりだｗ 良くない使い方をしている
汎用classで使いまわしたらだめ
だ・め
理由は>>660にも書いたとおり
長くやってる人ならわかってると思うんだけど、
クラス名の使い方には二通りある
一つはコンポーネントを表すクラス名
もう一つは状態を表すクラス名
状態を表すクラス名は、見た目と紐づけてはいけない
つまり.onという汎用classで使い回すなんてことはやってはいけない。
ある状態でどういう見た目になるかはコンポーネント次第。
だから、.dialog.on { 見た目 } にコンポーネントと紐づけて使う
.on { 見た目 } のような使い方をしてはいけない >>664
そう、offは出来る
display:none !important
で必ず非表示になるからそれは問題ないんだ >>667
!importantを使うのも下手の証拠 >>666
＞状態を表すクラス名は、見た目と紐づけてはいけない
＞つまり.onという汎用classで使い回すなんてことはやってはいけない。
では、理由をどうぞ
>>668
100%消したいんだからimportantを付ける事に何の問題があるの？ >>669
> では、理由をどうぞ
だから>>660に書いたって言ってるだろうが 良くないと言われているから何も考えずに従っているだけだろう
bootstrap等のフレームワークは
＞状態を表すクラス名は、見た目と紐づけてはいけない
紐づけまくっているが、どう問題があるんだ？
フレームワークだからいいとか言うなよ > 良くないと言われているから何も考えずに従っているだけだろう
> bootstrap等のフレームワークは
> ＞状態を表すクラス名は、見た目と紐づけてはいけない
> 紐づけまくっているが、どう問題があるんだ？
紐づけていない。状態を表すクラスは必ずコンポーネントと組み合わせて使われている .赤 { color: 赤 } と .表示 { 表示 } は
どちらも同じ間抜けな使い方だってことに気づいてないんだよな
初心者やで 非表示にしたい時に
.off{
display:none !important;
}
つければいいだけじゃん >>674
だからいい加減
赤 { color: 赤 } とか .表示 { 表示 } は
.非表示 { 非表示 } みたいな使い方はやめろ ■ このスレッドは過去ログ倉庫に格納されています
