20/03/11 16:32:00.45 0.net
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 42
ｽﾚﾘﾝｸ(hp板)
■関連スレ
Webサイト制作初心者用質問スレ part251
ｽﾚﾘﾝｸ(hp板)
■HTML
HTML Living Standard 日本語訳
URLﾘﾝｸ(momdo.github.io)
■CSS
Selectors Level 4 日本語訳
URLﾘﾝｸ(triple-underscore.github.io)
2:Name_Not_Found
20/03/11 20:22:34 AfaVFx0N.net
cssについて質問があります
line-height: 0;
とはどういう事ですか？
％とかピクセルを入力するなら理解できますが
高さが０って理解できません
どういう事が教えてください
3:Name_Not_Found
20/03/11 20:57:07.99 Y9vn5D3f.net
まさか0の概念を理解しとらんとゆうわけやないやろな？
4:Name_Not_Found
20/03/11 21:14:11.30 .net
どう理解できないのか、サッパリ分からんけども
まぁ、用途としては、画像の下とかにできる余白を無くすために使ったり
そのまんまline-height: 0;ググれば色々出てくる
5:Name_Not_Found
20/03/12 07:42:08.69 .net
css からバックグラウンドではない画像、通常のimg srcの値を指定/変更する方法はありますか？
6:Name_Not_Found
20/03/12 10:50:01.81 .net
無理
7:Name_Not_Found
20/03/12 11:42:12.51 .net
これができますか？な質問の時はどういう場合を想定してそういう処理が必要なのかも併記しないと
8:Name_Not_Found
20/03/12 12:29:12.64 .net
>>5
中身消して、背景画像で張り替えちゃえば？
9:Name_Not_Found
20/03/12 13:45:37.37 .net
中身消して、afterとかbeforeで頑張ってみるとか？
10:5
20/03/13 08:36:04.75 .net
すみません、aタグがついてるheader内のhomeへ戻るための画像なので、背景画像にはできません。
一応自己解決方かもしれないので方法書きますね。
img要素2つ用意しておいて、それぞれをdisplayプロパティのblockとnoneで出し分けする方法で実現できました。
というかdisplay:blockとnone使っちゃえば殆んどの表示切り替えはできちゃいますね。
11:Name_Not_Found
20/03/13 10:19:09.91 .net
すごい無駄なソース読み込んでそう
12:Name_Not_Found
20/03/13 15:03:56.50 .net
>>10
背景画像にできない理由にはなってないけど
それで良いなら、まあよかったじゃん
13:Name_Not_Found
20/03/13 18:34:47.15 pnKVSu6m.net
>>4
画像の下の余白を無くす！
そういう事でしたか
テキストや画像の高さの事だと思ってました
テキストの場合はテキストと余白の高さ、画像の場合は下の余白って理解であってますか？
間違ってますか？（アフォすぎてさーせん）
14:Name_Not_Found
20/03/13 20:42:33.19 .net
>>13
そういうことじゃない
>>4はline-heightそのものの使い方じゃなくて「line-height: 0;」の使い途の話
だから「「line-height: 0;」でググれよっていう
簡単にかみ砕いて理解しようとすると間違うので、とりあえずコレでも読んでみて
URLﾘﾝｸ(developer.mozilla.org)
15:Name_Not_Found
20/03/14 00:24:05.93 .net
>>4
中学1年になったとき英語用に4本線の描かれたノート買ったじゃろ
上から3本目が赤線のやつ
gとかyとかが赤線より下になるやつ
あの赤線が英文を書くときのbaselineで
vertical-alignのbaselineはこれのこと
img要素もデフォではinline-blockなので、このbaselineに揃う
だから赤線と4本目の線の間ぶん、画像の下に空白ができる
line-heightは行の高さだから、ゼロにしたらもちろんこの下の空白はなくなるけど
いささかやりすぎ
画像の下の空きを消したいならvertical-alignを使おう
16:Name_Not_Found
20/03/14 01:21:24.96 .net
ええなあこういう基本的な概念からの解説ってｗ
やはり基本は大事だしここができてないと変な解釈へ走るから
17:Name_Not_Found
20/03/14 01:40:57.93 .net
>>15
いやいや、line-height:0;の使い途の話をしているんであって
余白の無くし方の話をするならline-heighｔ:0;なんて勧めないってば
line-height:0;で検索したら、いくらでも余白の無くし方が引っかかるし
だから先ずはググって色々読めって言ってるんだよ
18:Name_Not_Found
20/03/14 02:29:12.17 .net
>>17
ここではなんでそうなるのかのわかんない奴への解説だからこれでよかろう
人に物を教えるときには順序立ててやんないと理解してもらえない
一番難しい学問は人に物を教えること
19:Name_Not_Found
20/03/14 02:51:34.45 .net
だからレスする相手が違うだろってことだってばよ
20:Name_Not_Found
20/03/14 17:29:58.51 .net
後からやって来て横から御高説を垂れるのはいいけど、そもそもの質問に答えてないっていうねｗ
>>15
imgはインライン要素な。
displayのデフォルトはinlineであってinline-blockではない。
だから、baselineとbottomの間の余白を無くしたいなら、baselineに揃ってる画像の下端を
vertical-alignを使ってbottomまで下げてやればいい（img{ vertical-align: bottom; }）
ってとこまで説明しないと、わかんない奴にはわかんないだろｗ
ちなみにテキストと横並びにしてる場合には、画像だけが下がるので余白分だけテキストとの
位置関係がズレるが、位置関係を変えたくなければline-height:0;の方がズレないので便利。
良し悪しは知らんが。
URLﾘﾝｸ(jsfiddle.net)
まぁ、他にも画像をdisplay: block;でブロック化したりfont-size: 0;とかposition使うとか
色々あるから、ケースバイケースで使い分ければいいんじゃないかね。vertical-alignに絞らずに。
21:Name_Not_Found
20/03/14 20:10:10 .net
日本語だとベースラインどうなるんだ？
22:Name_Not_Found
20/03/15 00:54:42.49 .net
日本語に限らずベースラインはフォントによるんじゃね？
23:Name_Not_Found
20/03/15 01:36:56.03 .net
>>5
.example:before {
content: url(../img/face.png);
}
>>6
回答者の資格なし
24:Name_Not_Found
20/03/15 01:43:36.81 .net
>>10
一昔前はそれで対応されてたけど
それの欠点は不要な画像までロードする必要が出るのと
displayを表示か非表示かの用途で使用してしまうと
inlineかblockかの概念で使えなくなる欠点がある。
スマホと出力分ける場合は、一般的にはサーバーサイドで出力わけるか
<picture><source media="(max-width:750px)" srcset="images/hogehoge.png">のようなのを使う
25:Name_Not_Found
20/03/15 12:30:52.20 .net
思い知ったかチンカスどもよ
26:Name_Not_Found
20/03/15 23:46:29.77 .net
優しく！
27:Name_Not_Found
20/03/16 03:19:57.55 .net
ふふっ
28:5
20/03/16 07:47:51.67 .net
>>23 >>24
すごい！師匠と呼ばせてください。
疑似要素使えますねー
29:Name_Not_Found
20/03/16 21:13:37.86 .net
>>26
お思い知りましたでございますでしょうか？
オチンカスの皆さま
30:Name_Not_Found
20/03/16 21:14:56.54 .net
>>28
使えないよ。
その画像、可変対応できないから。
お主もまだまだよのう
31:Name_Not_Found
20/03/16 22:12:26.01 .net
このスレ初心者お断りっぽいな
32:Name_Not_Found
20/03/16 22:35:51.72 .net
よろしくてよ？
33:Name_Not_Found
20/03/16 23:40:37.56 .net
content:にいれた画像ってサイズ指定できないのか
34:Name_Not_Found
20/03/17 00:14:12.12 .net
背景画像として指定すればサイズ変更できるよ
とりま、これでも読んでみ
URLﾘﾝｸ(saruwakakun.com)
35:Name_Not_Found
20/03/17 00:24:43.41 .net
>>34
サンキュー！やさしい人！
36:Name_Not_Found
20/03/17 08:17:12 .net
兄弟や従兄弟要素同士、または同クラス同士で高さを揃える方法ある？
例えばテキストボックスが4つあって、一番文字数が多いテキストボックスの高さに他のテキストボックスの高さも合わせるとか
37:Name_Not_Found
20/03/17 13:59:18 .net
>>36
兄弟はflexやgridで
従兄弟はCSSではむずい
38:Name_Not_Found
20/03/17 18:02:16.54 .net
ただいま疑似クラスに苦戦しています
<div>
<h3>見出し</h3>
<p>文章1</p>
</div>
<div>
<h3>見出し</h3>
<p>文章2</p>
</div>
みたいなコードで上のp(文章1)だけを指定する方法は分かりますでしょうか？
39:Name_Not_Found
20/03/17 21:12:49.34 .net
div:first-child > p
とか
div:first-of-type > p
とか
40:Name_Not_Found
20/03/17 22:49:47.78 .net
知ってるよ～
それくらい
41:Name_Not_Found
20/03/17 23:17:12.66 .net
それはよかった( ´∀｀)
42:Name_Not_Found
20/03/17 23:28:55.55 .net
優しいのね
43:Name_Not_Found
20/03/17 23:31:08.80 .net
兄弟や従兄弟同士、または同クラス同士でフットサルする方法ある？
44:Name_Not_Found
20/03/17 23:49:57.64 .net
マッチングアプリ
45:38
20/03/18 07:36:03.04 .net
おお、いけた！ありがとう
ちなみに更にpが複数あった場合は
div:first-child > p:nth-child(2)
みたいな長いセレクタになっちゃうんですかね…
ここまで来たら個別のclassを指定した方が良いのでしょうか？
46:Name_Not_Found
20/03/18 07:52:52.09 .net
ちなんでない
47:Name_Not_Found
20/03/18 08:08:30.57 .net
>>38
>>45
そんなしょっちゅう個別に変える必要があるならclass指定かspanでいいだろ
48:Name_Not_Found
20/03/18 10:38:34.48 .net
今までcssで表の背景透明度とかしてたのに突然css適用されてなくて枠も表の背景色も表示されなくなってしなったのですが
原因はどこにあるのでしょうか?cssへのパスとかは弄ってないので原因がさっぱり分かりません。。
49:Name_Not_Found
20/03/18 13:00:33.87 .net
>>48
HTMLの方が変わって
書くべきセレクタが変わってしまったか
CSSファイルの読み込みが失敗するようになったか
じゃね？
開発ツールでスタイルはどう表示されている？
50:Name_Not_Found
20/03/18 20:12:22.40 .net
す、スタイルですか/////
51:Name_Not_Found
20/03/18 20:16:57.21 .net
指定したフォルダ内のファイルを一括で検索・置換できるオススメソフトない？
「複数行置換」ってソフトがほぼ条件満たしてるんだが、検索がない！！
いきなり置換しかできない！！なんだこの糞使用！！
どこが置換されるのかされたのかわからんだろ！！！
理想
・指定したフォルダだけ検索・置換（PC丸ごと検索すんなボゲ！）
・正規表現に対応してる
・複数行に置換ができる
要するにdreamweaverの機能だなｗ
あの機能を無料で使いたいんだが
52:Name_Not_Found
20/03/19 00:00:04 .net
vscodeでいけるやろ
53:Name_Not_Found
20/03/19 01:26:44.96 .net
>>52
いけた！ありがとう～
アイコンちっせーｗ
54:Name_Not_Found
20/03/19 01:26:51.38 .net
>>51
サクラエディタのgrepじゃダメなん？
55:Name_Not_Found
20/03/19 02:23:47.42 .net
>>49
開発ツールって何ですか？
レンタルサーバーのfftpから直接コード編集してます
56:Name_Not_Found
20/03/19 02:54:55.67 .net
>>55
当該ページをchromeとかfirefoxで表示させてアクティブにした状態で
ショートカット「ctrl + shift + i」押してみ