■ このスレッドは過去ログ倉庫に格納されています
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 ★