X
HTML/CSS のどんな質問にも優しく答えるスレ 34
■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2018/10/08(月) 11:45:57.53ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。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
0429Name_Not_Found
垢版 |
2018/11/10(土) 19:57:52.56ID:???
absoluteは親をたどって最初にstatic以外の要素を基準にして位置が決定される
特定の親要素の中にabsoluteで配置したい場合はその親要素にrelativeを指定する
relativeをどこにもつけないとbodyを基準にした相対配置になる
0430Name_Not_Found
垢版 |
2018/11/10(土) 20:17:26.75ID:EHwUXFqT
>>429
そうなんですか！
それは知らなかったです。
ありがとうございました。
0431Name_Not_Found
垢版 |
2018/11/10(土) 21:15:51.32ID:???
>>428
有難うございます
一回用意しとけばコピペで済む話なんで、可能なら*ではなくリセットかけるタグをそれぞれ書いた方が良い。ということですね

どっかからコピペして使うことにします
0432Name_Not_Found
垢版 |
2018/11/10(土) 21:18:24.22ID:???
ぜんぜん違うけどまあいいや
実際に仕事で動作環境指定されてはじめて問題になることで最初に覚えることじゃないし好きにしていいよ
0433415
垢版 |
2018/11/10(土) 22:34:52.84ID:???
皆さんの知恵を拝借し、なんとかできました
助かりました
ありがとうございました
0435Name_Not_Found
垢版 |
2018/11/10(土) 23:27:37.51ID:???
可能だとは思うけどめんどうくさそう
0436Name_Not_Found
垢版 |
2018/11/10(土) 23:28:45.91ID:???
GIF用意して背景画像にするのが楽なんじゃないの
0437Name_Not_Found
垢版 |
2018/11/11(日) 04:42:18.48ID:???
cssのanimation keyframe使えば可能だと思う
0438Name_Not_Found
垢版 |
2018/11/11(日) 14:38:00.68ID:???
google fontsってローカルに保存してつかえますか？
0440Name_Not_Found
垢版 |
2018/11/11(日) 21:48:32.82ID:???
htmlとcssだけでニコニコのコメントみたいに横方向に流すことってできますか？
0443Name_Not_Found
垢版 |
2018/11/11(日) 22:15:37.02ID:???
ttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations
文字列がブラウザーのウィンドウを横切る
0444Name_Not_Found
垢版 |
2018/11/11(日) 22:35:11.07ID:???
>>443
ありがとうございます

横に動くたびに文字が細かく動くのがちょっと気持ち悪いですね
0445Name_Not_Found
垢版 |
2018/11/12(月) 19:22:53.82ID:???
要素の高さが足りないと背景で指定している画像が
見切れてしまいますが、それを自動的に防ぐ方法ありますか？

<style>
.hoge{
background: url("https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";) no-repeat 0 0;
background-color: #ddd;
}
</style>
<div class="hoge">
ここのdivの高さを背景画像の高さに応じて自動的に変化するようにしたい
できればmin-heightのように最低値として
</div>
0446Name_Not_Found
垢版 |
2018/11/12(月) 19:36:54.95ID:???
img要素にするのが一番簡単じゃないの
0447Name_Not_Found
垢版 |
2018/11/12(月) 19:38:28.02ID:???
>>446
そうですよね...
img要素って縦横比も自動的に保つし
何気に素晴らしい
0448Name_Not_Found
垢版 |
2018/11/12(月) 19:55:53.37ID:???
imgが素晴らしいってよりbgは用途が違うからなぁ
0449Name_Not_Found
垢版 |
2018/11/12(月) 20:53:56.95ID:???
少なくとも背景画像サイズをCSSで認識する方法はないので background-image では無理
img を使うしかない
0450Name_Not_Found
垢版 |
2018/11/13(火) 13:19:41.72ID:???
compassで幅・高さ測って
要素の縦横比を合わせる
ってことはちょくちょくする
0452Name_Not_Found
垢版 |
2018/11/13(火) 19:47:48.50ID:qy0X8zKf
javascriptで、要素の高さとかを合わせるようにしてるんだけど、描写後に変更するから画面が少しちらつく。

どうしたらええやろか…
Hiddenして、要素の高さ合わせた後にhidden解除したらいけると思ったけどダメだった…
0453Name_Not_Found
垢版 |
2018/11/13(火) 20:43:00.17ID:???
>>452
最近よくあるやつ
ページ遷移する度にloadingの画面になってアイコンを数秒見せてごまかすやつは？
0454Name_Not_Found
垢版 |
2018/11/13(火) 21:27:58.87ID:???
>>453
loading画面の要件がないので使えない。
あくまで普通に開くことが必要…

まぁ俺が気になったから直したいだけなんだが…
0455Name_Not_Found
垢版 |
2018/11/14(水) 00:23:44.09ID:???
wordファイルから効率良くきれいなhtml用のソースを作成する方法ないかな？
インラインスタイルが邪魔で削除したいが、変な所で改行されてたり微妙に正規表現で上手く消せない・・・
0456455
垢版 |
2018/11/14(水) 00:25:41.74ID:???
DreamweaverCCで画面切り替えると検索窓がいちいち消えるのなんとかならないのだろうか
入力しておいた文字が消えるし、常に表示しておきたい
0457Name_Not_Found
垢版 |
2018/11/14(水) 00:44:32.70ID:???
>>456
それよりマルチ画面対応を先にしろと
0458Name_Not_Found
垢版 |
2018/11/14(水) 02:00:23.18ID:PBwVpdkn
ライブとコードの画面をマルチにできる様に？
あれ謎よね 一番最初に実装しなきゃならんでしょあんなの
DWあんまり使ってないから良いけど
0459Name_Not_Found
垢版 |
2018/11/14(水) 02:06:03.42ID:???
ChromeでDevTool開けば似たようなもんだろ。
0460Name_Not_Found
垢版 |
2018/11/14(水) 04:10:00.54ID:+5SfBosb
Dreamweaver結構使ってるんやね

慣れなくて速攻使うのやめたわ…
0461Name_Not_Found
垢版 |
2018/11/14(水) 08:33:40.76ID:???
あどべの技術力じゃ無理なのじゃ
0462Name_Not_Found
垢版 |
2018/11/14(水) 08:46:12.43ID:???
逆にDW以外だとみんななに使ってるのか知りたい
JSPが編集できるとうれしいんだけど
0464Name_Not_Found
垢版 |
2018/11/14(水) 10:04:14.85ID:???
>>458
ちがう
ファイルをマルチ画面(分割画面)でひらけるようにだ。
なんでわざわざ別ファイル開いてウィンドウ吸着解除して手でならべなかなゃならんのだ？
お前の関連ファイルタブは飾りか？っておもうわ
ライブとかどうでもいい。
0466Name_Not_Found
垢版 |
2018/11/14(水) 10:17:50.81ID:???
>>463
いいという話は聞くけど、DWから乗り換えろといったら反発されるんでは
0467Name_Not_Found
垢版 |
2018/11/14(水) 10:26:53.40ID:???
エディタなんてなんでもよくてDwテンプレートの代わりに何使うかでしょ
0468Name_Not_Found
垢版 |
2018/11/14(水) 11:06:34.69ID:???
画面の一部に blur 効果の窓をつけたいんだけど
背景画像が固定じゃないとつけられない？
すでに表示してるページの上にぼかし窓のせたいんだけど

ttps://hacknote.jp/archives/2470/
とかいくつかサイトみてると背景と同じ画像を設定するってあるので
普通のページ要素をぼかすのは無理なのかな
0470Name_Not_Found
垢版 |
2018/11/14(水) 13:07:57.10ID:???
>>468
blurは要素をぼかし窓にするものではなく設定した要素自体がぼける
blurした要素に背景がなければ下がくっきり見える
sectionにblurしたところでsectionの中身がぼけるだけ
くっきりした背景(body)の上にぼけた文字(section)が載ってる状態になる
section:beforeにしてもそいつに背景がないと意味をなさない
透明をぼけさせても透明だからね
なので下に見える背景画像と同じ背景画像を設定してそいつをぼけさせると一見ぼかし窓っぽく見えるという騙しテクニック
0471Name_Not_Found
垢版 |
2018/11/14(水) 18:51:03.65ID:???
Brackets使ってるがDWよりマシとはいえもっさりしてるから乗り換え検討中
0472Name_Not_Found
垢版 |
2018/11/14(水) 19:11:47.16ID:???
さくさく動いて快適なのはsublimeだな
0473Name_Not_Found
垢版 |
2018/11/14(水) 19:19:18.51ID:???
atomモッサリなのにvscodeに次いで二番手、sublimeはサクサクなのになんで廃れたんだ？
0474Name_Not_Found
垢版 |
2018/11/14(水) 19:58:42.92ID:???
vscodeが軽くなって一択になったわ
他のエディタでできることだいたいできる
sublimeは軽いし見た目も良いエディタだけどライセンス催促とコード補完の弱さとサイドバーの使いづらさで捨てた
0475Name_Not_Found
垢版 |
2018/11/14(水) 21:26:08.02ID:???
>>470
となると固定画像以外の文字や動画含むドキュメント自体にblur窓をつけるのは無理なんですね
ありがとうございました
0476Name_Not_Found
垢版 |
2018/11/14(水) 21:30:57.55ID:???
ライセンスは金払えばいいだろw
他は、まあおっしゃる通り
vscodeはどんどん良くなっていくな、手離せなくなってきた
0478Name_Not_Found
垢版 |
2018/11/14(水) 22:16:27.12ID:???
>>476
vscodeでsublimeのctrl+,に相当するのってなんかある？(タグ領域の選択的なやつ)
0479Name_Not_Found
垢版 |
2018/11/14(水) 22:20:24.60ID:???
いい加減ツールスレいけよ
質問がない間はいいが質問流してまで雑談続けるバカは何なんだ
0480Name_Not_Found
垢版 |
2018/11/14(水) 22:25:24.81ID:???
>>479
そういうのは荒れるし自分も流してるじゃん俺もな。
0481Name_Not_Found
垢版 |
2018/11/14(水) 23:13:37.99ID:???
bpm　って何か理解してないままコーディングしている
0483Name_Not_Found
垢版 |
2018/11/15(木) 08:01:32.04ID:???
>>473
Atom使ってる人多いね
。Sublimeは有料だからでは？
0484Name_Not_Found
垢版 |
2018/11/15(木) 08:02:43.90ID:???
サイズ指定はpxを極力さけたほうがいいよな
0486Name_Not_Found
垢版 |
2018/11/15(木) 09:47:58.64ID:???
>>485
レスポンシブにするには、相対的なサイズ指定がよろしくない？
0487Name_Not_Found
垢版 |
2018/11/15(木) 11:03:51.56ID:???
誰かが作ったフォントサイズ関数使うと想像以上にフォントサイズが小さくなる
0488Name_Not_Found
垢版 |
2018/11/15(木) 12:55:52.87ID:???
>>473
atomはgithub謹製なのがでかい
あとsublimeが軽いがまだ不安定だった頃だったし
0489Name_Not_Found
垢版 |
2018/11/15(木) 13:33:03.42ID:???
リセットCSS　は自作するもの？　ノーマライズとか無駄にでかいよな。
0490Name_Not_Found
垢版 |
2018/11/15(木) 13:58:17.67ID:???
じゃあ自作すればいいんじゃね
0493Name_Not_Found
垢版 |
2018/11/15(木) 16:04:07.45ID:???
reboot.cssやnormalize.cssを削って作る。
0494Name_Not_Found
垢版 |
2018/11/15(木) 17:17:03.68ID:5kh5dpTO
テーブルの初歩的な質問ですがすみません。
下記で<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>

下記に続く↓
0495Name_Not_Found
垢版 |
2018/11/15(木) 17:18:33.96ID:???
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>

宜しくお願いします。
0496494
垢版 |
2018/11/15(木) 17:22:23.35ID:???
画像で見るとこのような感じです
https://i.imgur.com/Njb8qox.jpg
二つ目の<tr>要素を縦に繋げたいです
宜しくお願いします
0497Name_Not_Found
垢版 |
2018/11/15(木) 17:57:06.53ID:???
DWの質問スレが無いんだがどこで聞いたらいい？

マルチカーソルで複数個所を同時に編集する際、
Cｔｒｌ＋pのようなタグで括るショートカットが効かないんだが、
複数個所を選択して一括でタグで括る方法ないかな（手で打たないで）
0498Name_Not_Found
垢版 |
2018/11/15(木) 19:25:45.14ID:???
ここではないことは確か
0500Name_Not_Found
垢版 |
2018/11/16(金) 09:52:25.89ID:???
>>496
確かに謎だね
HTMLはあってるようにみえる
rowspan だけの行ってダメだったりするのかな…
ちなみにrowspan=12は何のためにつけてるの？
高さを指定したいならCSSにまかせてrowspanなしにすれば縦に並ぶけど
0501Name_Not_Found
垢版 |
2018/11/16(金) 11:49:18.69ID:???
俺もreboot.cssだな。だけどどれでもたいした違いはないだろう。
0502Name_Not_Found
垢版 |
2018/11/16(金) 12:52:38.00ID:???
>>496
tdがすべてrowspan="12"なのでtr12行単位で横に並ぶ
表示が1行のうちは頭位置揃ってるけど２行以上になると階段状になるのでどういうことか理解しやすいかと

あと、tableのid前のセミコロンが余計
コメント閉じは --!> ではなく -->
0503Name_Not_Found
垢版 |
2018/11/17(土) 00:35:22.14ID:???
VSCode などの構文解析できるエディタを使えば、

コメントになったかどうかは、色が変わるから、すぐわかる
0504Name_Not_Found
垢版 |
2018/11/17(土) 04:19:28.86ID:Cp+G4Otv
すいません。
サイトにランダムで飛べるページを作ろうと思いまして、色々と質問していたところ
.entry-title-link
要素が無いから飛べないと言われました。そもそもこの.entry-title-link要素とは何なのでしょうか？
0505Name_Not_Found
垢版 |
2018/11/17(土) 05:34:46.86ID:???
質問していたやつに聞け
0506Name_Not_Found
垢版 |
2018/11/17(土) 07:52:10.27ID:???
「entry-title がありません」「entry-title css」「entry-title wordpress」で検索！

wordpress のスレで聞けば？
0507Name_Not_Found
垢版 |
2018/11/17(土) 11:15:43.24ID:???
background-imageで画像のサイズをmax-widthにしたい場合、どうしたらいいの？
0508Name_Not_Found
垢版 |
2018/11/17(土) 12:03:29.18ID:???
auto contain cover px % しか無理だね
0509Name_Not_Found
垢版 |
2018/11/17(土) 12:06:03.24ID:???
背景を max-width したい場合ってのがよくわからん
背景はしょせん背景だからみきれようとどうでもいい
というよりどうでもいいものを背景にするべき

画像を画面内でみせたいなら img にするべき
0510Name_Not_Found
垢版 |
2018/11/17(土) 13:10:55.22ID:???
文字セット　って10個ぐらいフォント並んでるのがあるが、あんなに必要か？
0511Name_Not_Found
垢版 |
2018/11/17(土) 18:36:28.92ID:???
デバイスフォント使い分けかな
0512Name_Not_Found
垢版 |
2018/11/17(土) 20:01:10.99ID:???
>>509
べきw
実務やったことないなら口出すなよ
0513Name_Not_Found
垢版 |
2018/11/17(土) 20:38:12.90ID:???
>>509
自分がデザインしたわけじゃないんだがね。
わかりやすいのだとこういうのとか
https://hp-seed.jp/useful/img/pixta_30140996_M.jpg
100%だと実際のピクセルより引き伸ばされてボヤけるからダメ。
imgをz-indexで重ねるのはいいけど本来の用途と違う気がする（altとかどうすんねん）
0514Name_Not_Found
垢版 |
2018/11/17(土) 20:39:03.31ID:???
>>512
質問者の俺が言ったと思われたら嫌だから
穏便な口調でおねがします
0515Name_Not_Found
垢版 |
2018/11/17(土) 22:11:28.50ID:???
>>514
ぜんぜん関係ないけど、こういうレスって初めて見た気がする
匿名掲示板なんだから、これは自分じゃない、ってことはよくありそうだけどね
ただ、いくら何でも質問者がこんなレスはしないと思うよ
0517Name_Not_Found
垢版 |
2018/11/17(土) 22:16:36.18ID:???
width:100% max-width:1200px
みたいな指定が多い
0518Name_Not_Found
垢版 |
2018/11/17(土) 22:57:11.05ID:V7h8h9GY
Webフォントって使ってる？
自分のサイトで試しにGoogleフォントの日本語使って問題ないっぽいけど客のに使うのはちゅうちょする
0520Name_Not_Found
垢版 |
2018/11/17(土) 23:24:55.63ID:???
>>512
じゃあ答えてやれば？

実際無理なものは無理
それはCSSが不便なんじゃなくそうするべきではないからそういう機能がついてないだけ
0522Name_Not_Found
垢版 |
2018/11/17(土) 23:49:07.14ID:???
>>521
うちもNoto。
検証して見る限り、重いっても誤差かなと思うけど、みんな使ってるか気になった
0523Name_Not_Found
垢版 |
2018/11/17(土) 23:58:35.07ID:???
日本語Webフォントはサブセットで使ってる
そうすればくそ小さくなるから気にせず使える
あとはNoto Sansなら使ってるサイト多いからキャッシュ使われる確率高い
0524Name_Not_Found
垢版 |
2018/11/18(日) 08:12:59.77ID:???
FontAwesomeなどのアイコンは使わないことにしている。あれは重いよね。
0526507
垢版 |
2018/11/18(日) 09:51:52.82ID:???
>>520
そうするべきじゃないと言われても、実際の現場ではこういう対応が必要なデザインが上ってきてるわけでして、、

それとこの1例でも別に完全否定するようなデザインではないと思うんだが。（自分ならレスポンシブでこんなのしないけど）
https://hp-seed.jp/useful/img/pixta_30140996_M.jpg
とてもとてもありふれたものじゃん？

css3になる前だったらこれら文字とリボンそのまま画像にするのが一般的な対応だったわけだが
css3を駆使すればテキストと背景でなんとかできそうな気がして聞いてみたわけだが
まあ、無理という事でOKだね
0527Name_Not_Found
垢版 |
2018/11/18(日) 11:03:25.08ID:???
だから img つかえって言ってんの
backgroud-image では無理なだけでデザインが無理とはいってない
■ このスレッドは過去ログ倉庫に格納されています
ニューススポーツなんでも実況