2ちゃんねる スマホ用 ■掲示板に戻る■ 全部 1- 最新50    

■ このスレッドは過去ログ倉庫に格納されています

HTML/CSS のどんな質問にも優しく答えるスレ 43

1 :Name_Not_Found :2020/03/11(水) 16:32:00.45 ID:???0.net
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!

質問側も節度あるレスで!質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人(立てられない場合は次の宣言者)が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(>>980を取った場合も)
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 42
https://mevius.5ch.net/test/read.cgi/hp/1577720324/l50

■関連スレ
Webサイト制作初心者用質問スレ part251
http://mevius.5ch.net/test/read.cgi/hp/1564414228/l50

■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html

2 :Name_Not_Found:2020/03/11(水) 20:22:34 ID:AfaVFx0N.net
cssについて質問があります

line-height: 0;

とはどういう事ですか?
%とかピクセルを入力するなら理解できますが
高さが0って理解できません
どういう事が教えてください

3 :Name_Not_Found:2020/03/11(水) 20:57:07.99 ID:Y9vn5D3f.net
まさか0の概念を理解しとらんとゆうわけやないやろな?

4 :Name_Not_Found:2020/03/11(水) 21:14:11.30 ID:???.net
どう理解できないのか、サッパリ分からんけども
まぁ、用途としては、画像の下とかにできる余白を無くすために使ったり
そのまんまline-height: 0;ググれば色々出てくる

5 :Name_Not_Found:2020/03/12(木) 07:42:08.69 ID:???.net
css からバックグラウンドではない画像、通常のimg srcの値を指定/変更する方法はありますか?

6 :Name_Not_Found:2020/03/12(木) 10:50:01.81 ID:???.net
無理

7 :Name_Not_Found:2020/03/12(木) 11:42:12.51 ID:???.net
これができますか?な質問の時はどういう場合を想定してそういう処理が必要なのかも併記しないと

8 :Name_Not_Found:2020/03/12(木) 12:29:12.64 ID:???.net
>>5
中身消して、背景画像で張り替えちゃえば?

9 :Name_Not_Found:2020/03/12(木) 13:45:37.37 ID:???.net
中身消して、afterとかbeforeで頑張ってみるとか?

10 :5:2020/03/13(金) 08:36:04.75 ID:???.net
すみません、aタグがついてるheader内のhomeへ戻るための画像なので、背景画像にはできません。
一応自己解決方かもしれないので方法書きますね。
img要素2つ用意しておいて、それぞれをdisplayプロパティのblockとnoneで出し分けする方法で実現できました。
というかdisplay:blockとnone使っちゃえば殆んどの表示切り替えはできちゃいますね。

11 :Name_Not_Found:2020/03/13(金) 10:19:09.91 ID:???.net
すごい無駄なソース読み込んでそう

12 :Name_Not_Found:2020/03/13(金) 15:03:56.50 ID:???.net
>>10
背景画像にできない理由にはなってないけど
それで良いなら、まあよかったじゃん

13 :Name_Not_Found:2020/03/13(金) 18:34:47.15 ID:pnKVSu6m.net
>>4
画像の下の余白を無くす!

そういう事でしたか
テキストや画像の高さの事だと思ってました
テキストの場合はテキストと余白の高さ、画像の場合は下の余白って理解であってますか?
間違ってますか?(アフォすぎてさーせん)

14 :Name_Not_Found:2020/03/13(金) 20:42:33.19 ID:???.net
>>13
そういうことじゃない
>>4はline-heightそのものの使い方じゃなくて「line-height: 0;」の使い途の話
だから「「line-height: 0;」でググれよっていう

簡単にかみ砕いて理解しようとすると間違うので、とりあえずコレでも読んでみて
https://developer.mozilla.org/ja/docs/Web/CSS/line-height

15 :Name_Not_Found:2020/03/14(土) 00:24:05.93 ID:???.net
>>4
中学1年になったとき英語用に4本線の描かれたノート買ったじゃろ
上から3本目が赤線のやつ
gとかyとかが赤線より下になるやつ

あの赤線が英文を書くときのbaselineで
vertical-alignのbaselineはこれのこと

img要素もデフォではinline-blockなので、このbaselineに揃う
だから赤線と4本目の線の間ぶん、画像の下に空白ができる

line-heightは行の高さだから、ゼロにしたらもちろんこの下の空白はなくなるけど
いささかやりすぎ

画像の下の空きを消したいならvertical-alignを使おう

16 :Name_Not_Found:2020/03/14(土) 01:21:24.96 ID:???.net
ええなあこういう基本的な概念からの解説ってw
やはり基本は大事だしここができてないと変な解釈へ走るから

17 :Name_Not_Found:2020/03/14(土) 01:40:57.93 ID:???.net
>>15
いやいや、line-height:0;の使い途の話をしているんであって
余白の無くし方の話をするならline-height:0;なんて勧めないってば
line-height:0;で検索したら、いくらでも余白の無くし方が引っかかるし
だから先ずはググって色々読めって言ってるんだよ

18 :Name_Not_Found:2020/03/14(土) 02:29:12.17 ID:???.net
>>17
ここではなんでそうなるのかのわかんない奴への解説だからこれでよかろう
人に物を教えるときには順序立ててやんないと理解してもらえない
一番難しい学問は人に物を教えること

19 :Name_Not_Found:2020/03/14(土) 02:51:34.45 ID:???.net
だからレスする相手が違うだろってことだってばよ

20 :Name_Not_Found:2020/03/14(土) 17:29:58.51 ID:???.net
後からやって来て横から御高説を垂れるのはいいけど、そもそもの質問に答えてないっていうねw

>>15
imgはインライン要素な。
displayのデフォルトはinlineであってinline-blockではない。
だから、baselineとbottomの間の余白を無くしたいなら、baselineに揃ってる画像の下端を
vertical-alignを使ってbottomまで下げてやればいい(img{ vertical-align: bottom; })
ってとこまで説明しないと、わかんない奴にはわかんないだろw

ちなみにテキストと横並びにしてる場合には、画像だけが下がるので余白分だけテキストとの
位置関係がズレるが、位置関係を変えたくなければline-height:0;の方がズレないので便利。
良し悪しは知らんが。
https://jsfiddle.net/c5jf4ous/

まぁ、他にも画像をdisplay: block;でブロック化したりfont-size: 0;とかposition使うとか
色々あるから、ケースバイケースで使い分ければいいんじゃないかね。vertical-alignに絞らずに。

21 :Name_Not_Found:2020/03/14(土) 20:10:10 ID:???.net
日本語だとベースラインどうなるんだ?

22 :Name_Not_Found:2020/03/15(日) 00:54:42.49 ID:???.net
日本語に限らずベースラインはフォントによるんじゃね?

23 :Name_Not_Found:2020/03/15(日) 01:36:56.03 ID:???.net
>>5
.example:before {
content: url(../img/face.png);
}

>>6
回答者の資格なし

24 :Name_Not_Found:2020/03/15(日) 01:43:36.81 ID:???.net
>>10
一昔前はそれで対応されてたけど
それの欠点は不要な画像までロードする必要が出るのと
displayを表示か非表示かの用途で使用してしまうと
inlineかblockかの概念で使えなくなる欠点がある。

スマホと出力分ける場合は、一般的にはサーバーサイドで出力わけるか
<picture><source media="(max-width:750px)" srcset="images/hogehoge.png">のようなのを使う

25 :Name_Not_Found:2020/03/15(日) 12:30:52.20 ID:???.net
思い知ったかチンカスどもよ

26 :Name_Not_Found:2020/03/15(日) 23:46:29.77 ID:???.net
優しく!

27 :Name_Not_Found:2020/03/16(月) 03:19:57.55 ID:???.net
ふふっ

28 :5:2020/03/16(月) 07:47:51.67 ID:???.net
>>23 >>24
すごい!師匠と呼ばせてください。
疑似要素使えますねー

29 :Name_Not_Found:2020/03/16(月) 21:13:37.86 ID:???.net
>>26
お思い知りましたでございますでしょうか?
オチンカスの皆さま

30 :Name_Not_Found:2020/03/16(月) 21:14:56.54 ID:???.net
>>28
使えないよ。
その画像、可変対応できないから。
お主もまだまだよのう

31 :Name_Not_Found:2020/03/16(月) 22:12:26.01 ID:???.net
このスレ初心者お断りっぽいな

32 :Name_Not_Found:2020/03/16(月) 22:35:51.72 ID:???.net
よろしくてよ?

33 :Name_Not_Found:2020/03/16(月) 23:40:37.56 ID:???.net
content:にいれた画像ってサイズ指定できないのか

34 :Name_Not_Found:2020/03/17(火) 00:14:12.12 ID:???.net
背景画像として指定すればサイズ変更できるよ

とりま、これでも読んでみ
ttps://saruwakakun.com/html-css/reference/change-before-after

35 :Name_Not_Found:2020/03/17(火) 00:24:43.41 ID:???.net
>>34
サンキュー!やさしい人!

36 :Name_Not_Found:2020/03/17(火) 08:17:12 ID:???.net
兄弟や従兄弟要素同士、または同クラス同士で高さを揃える方法ある?
例えばテキストボックスが4つあって、一番文字数が多いテキストボックスの高さに他のテキストボックスの高さも合わせるとか

37 :Name_Not_Found:2020/03/17(火) 13:59:18 ID:???.net
>>36
兄弟はflexやgridで
従兄弟はCSSではむずい

38 :Name_Not_Found:2020/03/17(火) 18:02:16.54 ID:???.net
ただいま疑似クラスに苦戦しています

<div>
<h3>見出し</h3>
<p>文章1</p>
</div>

<div>
<h3>見出し</h3>
<p>文章2</p>
</div>

みたいなコードで上のp(文章1)だけを指定する方法は分かりますでしょうか?

39 :Name_Not_Found:2020/03/17(火) 21:12:49.34 ID:???.net
div:first-child > p
とか
div:first-of-type > p
とか

40 :Name_Not_Found:2020/03/17(火) 22:49:47.78 ID:???.net
知ってるよ〜
それくらい

41 :Name_Not_Found:2020/03/17(火) 23:17:12.66 ID:???.net
それはよかった( ´∀`)

42 :Name_Not_Found:2020/03/17(火) 23:28:55.55 ID:???.net
優しいのね

43 :Name_Not_Found:2020/03/17(火) 23:31:08.80 ID:???.net
兄弟や従兄弟同士、または同クラス同士でフットサルする方法ある?

44 :Name_Not_Found:2020/03/17(火) 23:49:57.64 ID:???.net
マッチングアプリ

45 :38:2020/03/18(水) 07:36:03.04 ID:???.net
おお、いけた!ありがとう

ちなみに更にpが複数あった場合は

div:first-child > p:nth-child(2)
みたいな長いセレクタになっちゃうんですかね…

ここまで来たら個別のclassを指定した方が良いのでしょうか?

46 :Name_Not_Found:2020/03/18(水) 07:52:52.09 ID:???.net
ちなんでない

47 :Name_Not_Found:2020/03/18(水) 08:08:30.57 ID:???.net
>>38
>>45
そんなしょっちゅう個別に変える必要があるならclass指定かspanでいいだろ

48 :Name_Not_Found:2020/03/18(水) 10:38:34.48 ID:???.net
今までcssで表の背景透明度とかしてたのに突然css適用されてなくて枠も表の背景色も表示されなくなってしなったのですが
原因はどこにあるのでしょうか?cssへのパスとかは弄ってないので原因がさっぱり分かりません。。

49 :Name_Not_Found:2020/03/18(水) 13:00:33.87 ID:???.net
>>48
HTMLの方が変わって
書くべきセレクタが変わってしまったか
CSSファイルの読み込みが失敗するようになったか
じゃね?

開発ツールでスタイルはどう表示されている?

50 :Name_Not_Found:2020/03/18(水) 20:12:22.40 ID:???.net
す、スタイルですか/////

51 :Name_Not_Found:2020/03/18(水) 20:16:57.21 ID:???.net
指定したフォルダ内のファイルを一括で検索・置換できるオススメソフトない?

「複数行置換」ってソフトがほぼ条件満たしてるんだが、検索がない!!
いきなり置換しかできない!!なんだこの糞使用!!
どこが置換されるのかされたのかわからんだろ!!!

理想
・指定したフォルダだけ検索・置換(PC丸ごと検索すんなボゲ!)
・正規表現に対応してる
・複数行に置換ができる

要するにdreamweaverの機能だなw
あの機能を無料で使いたいんだが

52 :Name_Not_Found:2020/03/19(Thu) 00:00:04 ID:???.net
vscodeでいけるやろ

53 :Name_Not_Found:2020/03/19(木) 01:26:44.96 ID:???.net
>>52
いけた!ありがとう〜
アイコンちっせーw

54 :Name_Not_Found:2020/03/19(木) 01:26:51.38 ID:???.net
>>51
サクラエディタのgrepじゃダメなん?

55 :Name_Not_Found:2020/03/19(木) 02:23:47.42 ID:???.net
>>49
開発ツールって何ですか?
レンタルサーバーのfftpから直接コード編集してます

56 :Name_Not_Found:2020/03/19(木) 02:54:55.67 ID:???.net
>>55
当該ページをchromeとかfirefoxで表示させてアクティブにした状態で
ショートカット「ctrl + shift + i」押してみ

57 :Name_Not_Found:2020/03/19(木) 03:21:55.78 ID:???.net
初心者でテキストの応用がうまくいかず質問します。
お答えお願いします。
ヘッター作成後、
div cssでバックグラウンドイメージ
h2で文字
/div

h2にマージンで位置を調整したいのですがうまくいきません。
バックグラウンドイメージの中央に文字を配置したいのですが、
h2にマージンを入力しても、ヘッターとの間にマージンがかかってしまいます。

よろしくお願いします

58 :Name_Not_Found:2020/03/19(木) 06:32:33.32 ID:???.net
divにoverflow:hidden;
そもそもh2だけでやれ

59 :Name_Not_Found:2020/03/19(木) 06:33:49.24 ID:???.net
>>57
うまく伝わるかどうかわからんが
マージンは貫通してる
パディング使ってください

60 :Name_Not_Found:2020/03/19(木) 06:35:52.41 ID:???.net
そんでその貫通してる様子も
開発ツールで見られるので、見てください

あと次スレ立てる人は
>>1にあれこれ書く前に
「初心者はまず開発ツール見ろ」と書いてほしい…

61 :Name_Not_Found:2020/03/19(木) 19:24:47.03 ID:???.net
>>54
おお、久しく使ってなかったな
なんで使わなくなったのか忘れたが、何か理由があったはず。
でもありがとう

62 :Name_Not_Found:2020/03/19(木) 19:27:12.13 ID:???.net
バッティングは1割5分とかですね

63 :Name_Not_Found:2020/03/19(木) 19:28:06.80 ID:???.net
>>58
俺様に上から命令すんな
やんぞ?

64 :Name_Not_Found:2020/03/20(金) 00:15:40.72 ID:???.net
優しく!

65 :Name_Not_Found:2020/03/20(金) 02:24:54.68 ID:???.net


66 :Name_Not_Found:2020/03/20(金) 09:20:28.90 ID:???.net


67 :Name_Not_Found:2020/03/20(金) 14:09:53.67 ID:???.net
回答者はやさしくする義務があるが
質問者がやさしくする義務はないだろ?

68 :Name_Not_Found:2020/03/20(金) 14:13:55.33 ID:o3KxbB+B.net
>>57
margin:0 auto;

display:inline-block;
text-align:center;
は試した?

69 :Name_Not_Found:2020/03/20(金) 16:46:23.30 ID:???.net
htmlやcssの整形でbeautifyを使っているのですが、コメントアウトも改行されてしまいます。
改行されないようにするにはどうしたらいいでしょうか?

70 :Name_Not_Found:2020/03/20(金) 17:26:14.54 ID:???.net
>>69
どのbeautifyを使ってるかわかんないからアレだけど
設定がないならあきらメロン

71 :Name_Not_Found:2020/03/20(金) 17:51:25.35 ID:???.net
>>68

ありがとうございます。
インラインブロックでうまくいきました。

72 :Name_Not_Found:2020/03/20(金) 17:54:25.04 ID:???.net
>>70
gulpのプラグインgulp-html-beautifyです。
設定か、ignore?でどうにかできないか知りたかった。
以下にできるとは書いてあったんだけどな
https://haniwaman.com/gulp-html-beautify/

73 :Name_Not_Found:2020/03/20(金) 18:00:29.49 ID:???.net
>>70
>>72に加えてcssはbracketsのプラグインです。htmlにも手動で使います。

74 :Name_Not_Found:2020/03/20(金) 19:05:54.52 ID:???.net
>>72
あ?急にタメ口になって調子のんなや!!

75 :Name_Not_Found:2020/03/20(金) 22:56:08.02 ID:???.net
>>56
パソコン持ってないです(TT)

76 :Name_Not_Found:2020/03/20(金) 23:20:30.12 ID:???.net
今はスマホでブログ作る時代か・・

77 :Name_Not_Found:2020/03/21(土) 14:24:20.11 ID:???.net
パソコンとかもう時代遅れだろ

78 :Name_Not_Found:2020/03/21(土) 18:38:57.24 ID:h2gmz7iG.net
>>77
ではスマホ、タブレットで開発ツール出す方法教えてやってよ

79 :Name_Not_Found:2020/03/21(土) 19:48:02 ID:???.net
まずは挨拶からだな

80 :Name_Not_Found:2020/03/21(土) 19:48:50 ID:???.net
まあうちはマイコンだけどね

81 :Name_Not_Found:2020/03/21(土) 20:28:48.52 ID:svC+tYjw.net
https://i.imgur.com/S7yDhow.jpg

82 :Name_Not_Found:2020/03/23(月) 21:34:31.75 ID:???.net
Scssって構造通りの入れ子で書いてますか?

83 :Name_Not_Found:2020/03/23(月) 23:07:11.58 ID:???.net
大事な事なので2回いいますが
Scssって構造通りの入れ子で書いてますか?

84 :Name_Not_Found:2020/03/24(火) 01:22:11 ID:???.net
なぜ二回言う

85 :Name_Not_Found:2020/03/24(火) 01:44:47 ID:???.net
大事な事だからです
これも2回目ですね(ニヤニヤ)

86 :Name_Not_Found:2020/03/24(火) 01:46:16 ID:???.net
おう素人共!
さっさと質問しろや
先生忙しいから締めきっちゃうぞ

87 :Name_Not_Found:2020/03/24(火) 06:31:22 ID:???.net
h3タグに「くだもの」というタイトルがあったとして、その下に
リンゴ:バラ科リンゴ属の落葉高木樹。またはその果実のこと。植物学上はセイヨウリンゴと呼ぶ。
みかん:ブドウは、ブドウ科 (Vitaceae) のつる性落葉低木である。

こんな場合、名前と説明をどういうhtmlの構造でマークアップすれば良いのでしょうか?
説明はpで良いと思うのですが、名前はliの後ろに : をつけるのも構造としては変でしょうか。

88 :Name_Not_Found:2020/03/24(火) 08:01:37.86 ID:???.net
>>87
ほうなかなかないい質問しやがるな
考えてる事は素晴らしい。
回答は
li > h3 dl > dt dd だな

定義済みリストってのがあるからリンゴは<dt>だな。
:はsfter疑似要素でつけるがよろしい。
ちなみにdtというのは童貞の事な

89 :Name_Not_Found:2020/03/24(火) 08:02:50.16 ID:???.net
ごめんsfter疑似要素でなくafter疑似要素の間違い
56すぞ

90 :Name_Not_Found:2020/03/24(火) 13:47:51.77 ID:???.net
>>88
まあdlで果物をdtで説明をddでやるがベターだろうな
中にはタイトルをhタグで説明をpタグでとか簡単にやってるとこもあるが

91 :Name_Not_Found:2020/03/24(火) 15:41:44.62 ID:O7GDyFUi.net
みんなdl好きだよなあ

92 :Name_Not_Found:2020/03/24(火) 18:57:35.30 ID:???.net
あるものは使う
使い方次第で装飾も融通効くから

93 :Name_Not_Found:2020/03/24(火) 23:34:46 ID:???.net
>>88
先生ありがとう
ul liを使っていましたが、dl dd dtを使うのですね。

定義済リストというのがよくわからないのですが、
定義済ならdl dd dtで、
定義されていないリストならul liってことかな・・・

94 :Name_Not_Found:2020/03/25(水) 09:25:46 ID:???.net
>>93
・ul li 順序の無いリスト
・ol li 順序のあるリスト
・dl dt dd 定義済みのリスト。用語(dt)に対して説明(dd)が入ったものが1セット

95 :Name_Not_Found:2020/03/25(水) 09:31:37 ID:???.net
>>87
なのでこう書く

<h3>くだもの</h3>
<dl>
<dt>リンゴ</dt>
<dd>バラ科リンゴ属の落葉高木樹。またはその果実のこと。植物学上はセイヨウリンゴと呼ぶ。</dd>
<dt>ブドウ</dt>
<dd>ブドウは、ブドウ科 (Vitaceae) のつる性落葉低木である。</dd>
</dl>

96 :Name_Not_Found:2020/03/25(水) 09:34:02 ID:???.net
あとdtに対してddが複数あって説明を分けても別に構わないしその逆もまた同じ

97 :Name_Not_Found:2020/03/25(水) 14:01:55.76 ID:???.net
dlって、tableのtrみたいな
dtとddをくくるタグがあったら使いやすかったのになー

98 :Name_Not_Found:2020/03/25(水) 20:10:55 ID:???.net
>>97
ほんそれ。
デザイン上の区切りが付けにくいったらありゃいない

99 :Name_Not_Found:2020/03/25(水) 21:26:07 ID:???.net
>>93
今日の夕食は魚です。

ここでいう魚とはサンマの事です。 ← 定義

この魚は一匹100円でした。
この魚は秋が旬で美味しく食べられます。

100 :Name_Not_Found:2020/03/25(水) 21:28:46 ID:???.net
>>91
あ?みんなって何人に調査したんだよ?あ?
本当にBL好きかどうかなんてわかるのかよ!あ?

総レス数 1006
301 KB
新着レスの表示

掲示板に戻る 全部 前100 次100 最新50
read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★