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 ライセンスは金払えばいいだろw
他は、まあおっしゃる通り
vscodeはどんどん良くなっていくな、手離せなくなってきた >>475
ttps://teratail.com/questions/114413 >>476
vscodeでsublimeのctrl+,に相当するのってなんかある？(タグ領域の選択的なやつ) いい加減ツールスレいけよ
質問がない間はいいが質問流してまで雑談続けるバカは何なんだ >>479
そういうのは荒れるし自分も流してるじゃん俺もな。 bpm って何か理解してないままコーディングしている >>473
Atom使ってる人多いね
。Sublimeは有料だからでは？ >>485
レスポンシブにするには、相対的なサイズ指定がよろしくない？ 誰かが作ったフォントサイズ関数使うと想像以上にフォントサイズが小さくなる >>473
atomはgithub謹製なのがでかい
あとsublimeが軽いがまだ不安定だった頃だったし リセットCSS は自作するもの？ ノーマライズとか無駄にでかいよな。 reboot.cssやnormalize.cssを削って作る。 テーブルの初歩的な質問ですがすみません。
下記で<tr>要素を縦並びにしたいのですが、横に繋がってしまいます指摘お願いします。
<table border="1" cellspacing="0" cellpadding="0"; id="dailytable">
<tbody>
<tr><td class="hour" rowspan="2"><br></td><td colspan="2" class="timetable">aaa</td>
<td rowspan="2" class="hour"><br></td>
</tr>
<tr><td class="station"><span class="station-name"><a href="#" target="_blank">a</a>
</span></td><td class="station"><span class="station-name"><a href="#" target="_blank">b</a></span></td>
</tr>
<!--一つ目の縦につなげたい要素--!>
<tr><td rowspan="12" class="hour">6</td><td rowspan="12" class="program">
<div class="time">06:00-07:00</div><div class="title"><a href="">a</a></div>
<div class="actress">a</div></td><td rowspan="12" class="program"><div class="time">06:00-07:00</div><div class="title">
<a href="">aa</a></div><div class="actress">a</div></td><td rowspan="12" class="hour">6</td>
</tr>
下記に続く↓ 493の続き
<!--2つ目の縦に繋げたい要素--!>
<tr><td rowspan="12" class="hour">6</td>
<td rowspan="12" class="program"> <div class="time">06:00-07:00</div>
<div class="title"><a href="">a</a></div>
<div class="actress">a</div></td><td rowspan="12" class="program"><div class="time">06:00-07:00</div>
<div class="title"><a href="">aa</a></div><div class="actress">a</div></td><td rowspan="12" class="hour">6</td>
</tr>
</tbody>
</table>
宜しくお願いします。 画像で見るとこのような感じです
https://i.imgur.com/Njb8qox.jpg
二つ目の<tr>要素を縦に繋げたいです
宜しくお願いします DWの質問スレが無いんだがどこで聞いたらいい？
マルチカーソルで複数個所を同時に編集する際、
Cｔｒｌ＋pのようなタグで括るショートカットが効かないんだが、
複数個所を選択して一括でタグで括る方法ないかな（手で打たないで） >>489
最近はめっきりReboot.cssだな >>496
確かに謎だね
HTMLはあってるようにみえる
rowspan だけの行ってダメだったりするのかな…
ちなみにrowspan=12は何のためにつけてるの？
高さを指定したいならCSSにまかせてrowspanなしにすれば縦に並ぶけど 俺もreboot.cssだな。だけどどれでもたいした違いはないだろう。 >>496
tdがすべてrowspan="12"なのでtr12行単位で横に並ぶ
表示が1行のうちは頭位置揃ってるけど２行以上になると階段状になるのでどういうことか理解しやすいかと
あと、tableのid前のセミコロンが余計
コメント閉じは --!> ではなく --> VSCode などの構文解析できるエディタを使えば、
コメントになったかどうかは、色が変わるから、すぐわかる すいません。
サイトにランダムで飛べるページを作ろうと思いまして、色々と質問していたところ
.entry-title-link
要素が無いから飛べないと言われました。そもそもこの.entry-title-link要素とは何なのでしょうか？ 「entry-title がありません」「entry-title css」「entry-title wordpress」で検索！
wordpress のスレで聞けば？ background-imageで画像のサイズをmax-widthにしたい場合、どうしたらいいの？ auto contain cover px % しか無理だね 背景を max-width したい場合ってのがよくわからん
背景はしょせん背景だからみきれようとどうでもいい
というよりどうでもいいものを背景にするべき
画像を画面内でみせたいなら img にするべき 文字セット って10個ぐらいフォント並んでるのがあるが、あんなに必要か？ >>509
べきw
実務やったことないなら口出すなよ >>509
自分がデザインしたわけじゃないんだがね。
わかりやすいのだとこういうのとか
https://hp-seed.jp/useful/img/pixta_30140996_M.jpg
100%だと実際のピクセルより引き伸ばされてボヤけるからダメ。
imgをz-indexで重ねるのはいいけど本来の用途と違う気がする（altとかどうすんねん） >>512
質問者の俺が言ったと思われたら嫌だから
穏便な口調でおねがします >>514
ぜんぜん関係ないけど、こういうレスって初めて見た気がする
匿名掲示板なんだから、これは自分じゃない、ってことはよくありそうだけどね
ただ、いくら何でも質問者がこんなレスはしないと思うよ width:100% max-width:1200px
みたいな指定が多い Webフォントって使ってる？
自分のサイトで試しにGoogleフォントの日本語使って問題ないっぽいけど客のに使うのはちゅうちょする >>512
じゃあ答えてやれば？
実際無理なものは無理
それはCSSが不便なんじゃなくそうするべきではないからそういう機能がついてないだけ >>518
Notosansjapaneseを常用してる >>521
うちもNoto。
検証して見る限り、重いっても誤差かなと思うけど、みんな使ってるか気になった 日本語Webフォントはサブセットで使ってる
そうすればくそ小さくなるから気にせず使える
あとはNoto Sansなら使ってるサイト多いからキャッシュ使われる確率高い FontAwesomeなどのアイコンは使わないことにしている。あれは重いよね。 「Noto Sans Japanese」の不要なものは削除して必要なものだけ読み込む方法【Webフォント高速化】
https://haniwaman.com/noto-sans-japanese/ >>520
そうするべきじゃないと言われても、実際の現場ではこういう対応が必要なデザインが上ってきてるわけでして、、
それとこの1例でも別に完全否定するようなデザインではないと思うんだが。（自分ならレスポンシブでこんなのしないけど）
https://hp-seed.jp/useful/img/pixta_30140996_M.jpg
とてもとてもありふれたものじゃん？
css3になる前だったらこれら文字とリボンそのまま画像にするのが一般的な対応だったわけだが
css3を駆使すればテキストと背景でなんとかできそうな気がして聞いてみたわけだが
まあ、無理という事でOKだね だから img つかえって言ってんの
backgroud-image では無理なだけでデザインが無理とはいってない >>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/
ぶっちゃけ同じ値にしてもズレまくるから、見た目重視にやってるんだが、こだわる人がいて面倒。 ■ このスレッドは過去ログ倉庫に格納されています
