Q&A
状況によります。この質問内容だと「問題･課題が含まれていない質問」と取れると思われます。
#質問
heightに固定値は指定しない方が良いらしいのですが、指定しても良い場合はどのような場合でしょうか？
「heightに固定値を指定しないほうが良い理由」として理解しているのは、例えば、以下のようなケースで対応しづらいからだと解釈しています。
- 例えば、
.content内のテキストコンテンツが動的で文章量が増減したりする場合、文字量が多いと、.contentに指定した高さを超えて、テキストが突き破ってしまうことがある - 例えば、
.content内の画像サイズが動的な場合、画像の高さが.contentに指定した高さを超えて、画像が突き破ってしまうことがある - リリース時は一行で収まることを想定していた横並びのリストであったが、その後の仕様変更でリストが一行におさらまらずに折り返され２行になり、元々高さが指定されていた親要素の縦幅を突き破ってしまう
まず、heightに固定値を入れないほうが良いとされる背景としては、このような理解であってますでしょうか？
逆にどういう場合であれば、heightを固定値で指定しても良いとか、やむを得ないとかってありますでしょうか？
自分が思いつくのは以下のようなケースです。
position: fixedで固定するヘッダーの場合、その後続の要素がヘッダーの高さ分、Y軸方向の位置をbodyの基準点からスペースを開ける必要があると思うので、縦スペースの量を確定するために、ヘッダーの高さを固定値で指定しておく必要がある。（※ JSで動的にヘッダーの高さをレンダリング後に取得することも可能ではあると思いますが、、、）- 単なる装飾用途で背景画像を持つような要素。こういうのは高さ固定でも良さそう。
上記のような考え方はあってますでしょうか？
また、他にもheightに固定値を与えるのがOKなケースがあれば教えて頂きたいです。
追記
困っている理由を記載しないといけないというご指摘を受けましたので、追記いたします。
困っている理由
独学なため、自分は質問文に記載したような解釈で合っているか、また、漏れがないかが分からず困っている。考え方を理解して今後の制作、開発に活かしたい。
「逆にどういう場合であれば、heightを固定値で指定しても良いとか、やむを得ないとかってありますでしょうか？」や「他にもheightに固定値を与えるのがOKなケースがあれば教えて頂きたいです。」とありますように、「こういう状況の場合はこうですよ」みたいなアドバイス、ご意見を頂きたいという投稿になります。なので、状況次第であることは前提で、どういう状況だとどーなのかをご意見頂きたいというものになります。よろしくお願いいたします。
知ってどうするのでしょうか。興味本位での質問なら間違いなく前述の
「問題･課題が含まれていない質問」となります。
「heightに固定値を入れないほうが良いとされる背景としては、このような理解であってますでしょうか？」や「上記のような考え方はあってますでしょうか？」など、理解があっているかどうかも明確に質問していると思うのですが。。。「知ってどうするのでしょうか。」← えっ、、、。知ってどうするまで質問文に明示しないといけない感じですか？？？
teratail利用する前にヘルプ読まれませんでした？
teratailは技術に興味のある人達が集まって、質問と回答を通してお互いに知識や情報を交換・共有する場所です。
プログラミングをする中で起きた解決できない課題について本当に困っている人をサポートすること、また、価値のあるコンテンツを世の中に残し届ける事を目的としています。
とありますし、
問題・課題が含まれていない質問
teratailは困っている人の質問を解決するサービスです。そのため、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
何か困っている理由があり、最適解を見つける為の知見を得たい場合は、その理由や何が知りたいのかを明確に記述してください。
とも書いてあります。この質問は明確に解決出来ない議題が有るわけでないので、私は理由を聞きました。
えっと、なんで興味本位で質問していて、困っていないという前提なのでしょうか。。。「漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿」には該当しないですよね。。。まー、やり取りも無駄なのでこれ以上返信するつもりはなく、切り上げますね。ご意見ありがとうございました。
では今何に困っていてこの質問をしたのでしょうか。困っていないのなら間違いなく「漠然とした興味から票を募るような質問」に該当します。何か理由があれば追記なさってください。納得できる内容なら
私は低評価を外すつもりです。
少なくとも過去の回答を得ている質問をクローズもしない人はいずれ見限られると思いますよ。
> 納得できる内容
困っている理由に納得できるものと出来ないものが貴方の中に存在するのであれば、まずは、納得できる基準を明確にしてください。
例を挙げるなら自分の技術勉強の一環として何かしらWebサイトを作っているなど明確な目標が有って、
それにheightに固定値を与えたい要素があるが、自分が調べた限りでは「固定値は指定しない方が良い」と記述がある(これも指定しない方が良いというソースなんかは記載してください。)とかならまぁ納得しますかね。自分の業務で使う内容とかなら私は少なくとも納得しません。厚意で成り立ってるQAサイトで
自分の仕事を無償で手伝わせたりするのは普通に考えればおかしいことは分かると思います。
この内容とは関係ないですがかなり前に回答ついているのに何かしら見られたのでしょうか？
合っているか合っていないかは別として自分の質問に時間を割いて貰った以上
何かしらレスポンスを返すのが人として道理だと思いますが。
質問の背景に技術勉強があるのか仕事があるのかが、困っている理由として認められる基準なのですか？それが基準なのであれば、「自分は質問文にある通り、このような解釈なのですが合っているか、また、漏れがないか、独学なので分からず困ってます」って書けばOKということでしょうか？ ちなみに仕事で困ってる質問なのであれば、あなたの過去の質問のように「〜がエラー出ていて動きません。このエラーの潰し方教えて下さい」みたいな内容になったり、「〜の要件を満たす方法がわかりません、教えてください」みたいな内容になると思いますよ。あなたはここで、仕事の質問してるんですか？仕事の質問をしていないというのであれば、毎回、証明しないとですね＾＾；
> 何かしらレスポンスを返すのが人として道理だと思いますが。
こちらはおっしゃるとおりです。私が悪いです。評価ボタンだけ一旦は押しておりましたが、まだ、頂いた回答をもとにコードをいろいろ書いて試すことが出来ていないため返答出来ていないです。確認出来次第、返答するつもりです。
まぁ自分の過去質問に関しては何を言っても言い訳になるので長くは書きませんが、
その時は自分も「ヘルプを読まずに利用している愚かな質問者」であっただけです。
質問者さんは「困っている理由に納得できるものと出来ないものが貴方の中に存在するのであれば、まずは、納得できる基準を明確にして」と仰ったので自分の基準を表したまでです。
teratailの全ユーザーの基準という訳ではありませんので。
質問者との入れ違いだったため指摘内容一部削除
もうレス済みですよ
@質問者さん
入れ違いです。コメント書いている間に投稿されていたので修正しておきます。
困っている理由も追記しました。こんな指摘されたの初めてです。
＠質問者さん
一応理由が追記されたので低評価を私は外しましたので。
他の低評価を付けている方は存じません。
私の過去回答から高評価外したの気づいてますよ。
別にスコアに興味ないので外そうが構いませんけどね。
> 私の過去回答から高評価外したの気づいてますよ。
はい、なんで高評価つけていたのか不明な回答だったので取り消しました。
@K_3578
ブロック機能がないようなので、今後、私の質問へのリアクションはご遠慮お願いいたします。あなたが質問への追記修正をしなくても、他の方がひつようであれば、修正依頼などは出して下さりますので問題ないです。
回答1件
0
ベストアンサー
とりあえず、overflowプロパティを設定したいなら、heightを指定することになると思います。
overflow の効果を得るには、ブロックレベルコンテナーに高さ (height または max-height) を設定するか、 white-space を nowrap に設定することが必要です。
overflow - CSS: カスケーディングスタイルシート | MDN
ただ、これは同語反復です。通常は、高さ固定にしたいからoverflowを設定したいはずで、overflowを設定したいから高さ固定にするということはないでしょう。
また、ビューポート一杯にしたい要素はheight: 100vhにしますし、親要素いっぱいにしたい場合はheight: 100%にします。
相対的な単位ですが、別の高さ固定を参照しているわけで、高さ固定の一種と言えます。
つまり、結論としては「デザイン上、高さ固定にしたい要素は高さ固定にしてよい」ということになります。
これまた同語反復っぽいですが、つまりは、コーディングの問題ではなくてデザインの問題である、ということです。
投稿2021/03/19 07:21
総合スコア36149
いつも回答ありがとうございます。確かに高さ固定でoverflowでscrollbar表示させたいようなケースは、高さ指定は必要ですね。
ちなみに、自分の質問文に書いてあるような、高さを固定するのは良くないとされる理由の理解は合ってそうでしょうか？また、自分の質問文に書いてあるような、高さ固定が許容されるケースの理解はあってそうでしょうか？
それと、こちらの質問に回答していただいているpadding-topの件ですが、padding-topの値はヘッダーの高さになると思うので、ヘッダーの高さを固定値で指定するということになるということで合ってそうでしょうか？https://teratail.com/questions/328712#
なんといいますか、「デザインの意図として高さ成り行きにしているレイアウトに、コーディングで高さを固定してはいけない」ということだと思います。ですので「デザインの意図として高さ固定にしているレイアウトは高さ固定にすべき」だと考えています。
カンプに「60px」と指定されているなら高さを成り行きにしてはいけないし、lorem ipsum で埋まっているボックスを安易に高さ固定にしてはいけない、ということではないかと。
意図がないならば、高さを固定にしてはいけない、と言うべきでしょうか。
現実としては、デザイナとのコミュニケーションの問題だったり、コーダーのセンスの問題だったりするのではないかな、と思います。
基本的には高さが可変なデザインの場合は、高さ固定にしない。リリース後、高さが変わり得るかどうかも、デザイナーやPdMなどに応相談。とはいえ、実装上の都合上、高さを固定しないと実現出来ないような場合で、かつ、リリース時点のデザインで高さ固定でも問題ないような場合は、高さ固定って感じですかね。(そういう場合であっても、JSで動的に高さを後から参照すれば、CSS側で高さ指定しないでも大丈夫ではありますが）
私は素人なので、デザインについて深い部分で理解が及んでいないと思いますが、そういうことなのではないかと思います。
例に挙がっている固定配置のヘッダでも、ユーザーが使っているフォントによってはお手上げだったりしますから、ターゲットとなるデバイス以外は妥協するしかない場面もあるんでしょうね。
> 例に挙がっている固定配置のヘッダでも、ユーザーが使っているフォントによってはお手上げだったりします
なるほど。エッジケースを考えると、ユーザー環境のフォントによってそういうことも起こりえますね。
あなたの回答
tips
プレビュー
