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 >>526
このデザインだったら width height100% でいいじゃん
レスポンシブで大きさ変えたらどのみちぼやけるし
大きさを変えないで完全固定するか
ぼやけてもいいかどっちかしか選択肢なんてなくない？ >>526
話の流れがちゃんとわかってないけどこれが質問者なの？
というかこのデザインで max-width が必要になるってどういうこと？
ななめに表示するためにブロック自体に画像の上にのるように
max-width: 60%; margin-left:20% みたいにしたいってのはわかるけど
背景だけ max-width つけたら文字拡大したときに文字だけはみでることになるじゃん サイズレスポンシブなデザインはプログラミングに近いセンスがいるからなー
4Kモニタk時代がきていつまでも幅1000pxとか1200pxとか固定するわけにもいかなくなってきたし >>527
誰？>>509?
↓これおかしくね？このデザインだとリボンはどうみても背景だよね？
> 背景はしょせん背景だからみきれようとどうでもいい
> というよりどうでもいいものを背景にするべき
>>512は違うよ
>>526
いや、最大値は原寸までで、小さくなる分には小さくなるようにしたい。
つまりmax-width:100%
>>530
そうだよ。
>max-width: 60%; margin-left:20% みたいにしたいってのはわかるけど
↑違うし
文字拡大はこの際、対応しなくていいよもう。
最大値は原寸までで、小さくなる分には小さくなるようにしたい。 アンカ間違えた
>>528
>>512は違うよ
>>529
いや、最大値は原寸までで、小さくなる分には小さくなるようにしたい。
つまりmax-width:100% >>531
いうて1000より縮まないようにしとくだけで広がる分には問題ないように作るのはそんな大変じゃないかと
１年ほど前に400px幅の絶対配置で作られたサイトはみたことあるが…
よほど奇抜なデザインしてない限り画像解像度を高めにしておいて
font-size を vw 指定
margin padding や位置指定に px じゃなく rem と % 使う
改行位置に依存したデザインをさける
ぐらいだと思う もうカオスでややこしいから
この質問は終わりでいいや。
cssでできるやついるかどうかをしりたかっただけ。 >>534
それってデザイン画像があまり無いサイトの話だよね。 >文字拡大はこの際、対応しなくていいよもう
だったらブロック自体に画像サイズと同じ max-width をつけておいて背景は contain なり 100% でいいじゃん >>537は優秀そうだな
そもそもの質問は違うんだが、
例の対応方法としては一番共感するわ。
と言う事で終了。 >>532
509=527=537 ぜんぶ同じだが？
>このデザインだとリボンはどうみても背景だよね？
それはデザイン者の意図次第
リボン全体を画面におさめたい＝リボンという形に意味がある＝背景ではない
背景であるなら形や全体図形にこだわるべきではない＝見切れても問題ない画像にすべき
単に文字にかさなってるから背景というわけじゃない
>最大値は原寸までで、小さくなる分には小さくなるようにしたい
これが意味がわからない
要件定義をきっちりしてないとなにをしたいのかわからない
文字と独立に背景だけ縮んだらはみだすわけじゃん
ふつうは body とかに min-width 設定して一定以上ちぢまないようにするものだけど
仮にそうしないで画面縮めたら文字だけ折り返すかはみでるかして
どのみちりぼんから文字の横か縦どちらかがはみでる >>531
そこそこ大手のウェブ制作会社だけどまだpixel指定だよ
サイズレスポンシブ？っていうの？
覚えないとやばいのかな… うちもまだサイズフリーのレスポンシブでくんでくれって案件はきたことないな
ただいわれてみればモニタが４Kなのにいつまでも1000固定で作ってるわけには行かないよな いつも小さいモニターの話しか出てこないけど、
いつか大きいモニターにも対応しなきゃならんくなるのか
そうすると画像はSVG一択なのかな メディアクエリでスマホ版と２パターンデザインするだけじゃあかんのか？
それもただ複数カラム floatとflexをばらして無効にするぐらいしかやってないわ 逆に言うとほとんどがモバイル対応しかやってない今
サイズフリーレスポンシブ４K対応を唄えば仕事取り放題だよ
ノウハウがたまるまではそれなりに技術が必要になるが サイズレスポンシブだと
pixel指定もmax-widhtが必須になる感じか まだそういう求人見たことないな
いまだにスマホ大丈夫ですか？って聞かれる
早くIE11を見放して欲しい ttps://webtan.impress.co.jp/e/2018/04/04/28482
半年ほど前から大画面対応の話はちらほらきくけど
現場レベルだとなかなかすぐに対応かえるってのは難しいんじゃね WindowsServer2016インストールしたら標準ブラウザがEdgeじゃなくてIE11だった 今時、4Kモニターでネット見る人なんて
ゲーマーかこだわりエンジニアかオタクしかいないからなぁ
一般人は8割スマホとタブレット
PCあっても学生は液晶がクソな低価格のノートPCかアップル製品
ご家庭だと10年前のノートとかザラだし もう３〜４万から買えるし次買うなら４Kって人は多いと思うけどな 4Kって解像度だよね？
ならば px 単位のリアルな大きさは変化しないことになるので
特に対応する必要はないんじゃないのか？ 昔からべき論者は自分で知らない出来ないことをべきべき言って批判しかしてこないからな 文字列に下線を引いて、その下に注釈文字列を書き込む方法を教えて下さい
例えば、
あいうえお
--------
いろは
みたいな感じにしたいです。
よろしくお願いします。 いろは のインデントがズレましたがやりたい事はわかると思います。 <style>
.notice {
display: inline-block;
border-bottom: solid 1px black;text-decoration: position: relative;
}
.notice-text {
font-size: 80%;
position: absolute;
display: block;
}
</style>
かきくけこ<span class="notice">あいうえお<span class="notice-text">いろは</span></span>さしすせそ
とか？
<span class="notice" title="いろは">あいうえお</span>
みたいなこともできるけど >>562
ありがとうございます。
ところで、｢いろは｣を"下に配置する"という明示的命令はないのに、positionという言葉だけでなぜ｢いろは｣が下に配置されるんでしょうか？
それと、
｢text-decoration: position: relative;｣という"3連"の表記は初めて見たのでどう理解すればいいのか分からないのですが、
解説しているサイトを教えて頂ければと思います。 >>562
問題がありました
その仕方だと
かきくけこ<span class="notice">あいうえお<span class="notice-text">いろは</span></span>さしすせそ<br />
ああああああああああああああああああああああああ
とすると、｢いろは｣と｢ああああ…｣が重なってしまいます text-decoration:
については無くてもよいと言う事で理解しました。 疑似クラスみたいな感じで特定の文字色や背景色の要素だけを指定する方法ってありますか？ 行頭文字なら指定できるけどそれ以外はjavascriptじゃないと無理じゃないかな
特定の文字にタグをつければできるから
内容が固定なんだったらエディタの replace とかつかえばタグにするのは簡単だけど >>566
line-height あければいいんじゃないの？
というか要件定義をきっちりしてほしい
注釈がはいった場合だけ行間をあけたいのか
常に注釈が入るスペーををあけておくのか >>568
特定の文字色や背景色があるってことは
そこに何かしらの要素があるってことじゃろ？ こういうのってどんくらい気をつけてる？
ttps://sole-color-blog.com/blog/31/
ぶっちゃけ同じ値にしてもズレまくるから、見た目重視にやってるんだが、こだわる人がいて面倒。 >>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
画面全体を覆う要素というのが用意できないかと…
画面の高さと表示してる位置が取れないからなんかもやもやする… ■ このスレッドは過去ログ倉庫に格納されています
