HTML/CSS のどんな質問にも優しく答えるｽﾚ 43
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 42
https://mevius.2ch.sc/test/read.cgi/hp/1577720324/l50
■関連スレ
Webサイト制作初心者用質問スレ part251
http://mevius.2ch.sc/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
line-height: 0;
とはどういう事ですか？
％とかピクセルを入力するなら理解できますが
高さが０って理解できません
どういう事が教えてください
まぁ、用途としては、画像の下とかにできる余白を無くすために使ったり
そのまんまline-height: 0;ググれば色々出てくる
中身消して、背景画像で張り替えちゃえば？
一応自己解決方かもしれないので方法書きますね。
img要素2つ用意しておいて、それぞれをdisplayプロパティのblockとnoneで出し分けする方法で実現できました。
というかdisplay:blockとnone使っちゃえば殆んどの表示切り替えはできちゃいますね。
背景画像にできない理由にはなってないけど
それで良いなら、まあよかったじゃん
画像の下の余白を無くす！
そういう事でしたか
テキストや画像の高さの事だと思ってました
テキストの場合はテキストと余白の高さ、画像の場合は下の余白って理解であってますか？
間違ってますか？（アフォすぎてさーせん）
そういうことじゃない
>>4はline-heightそのものの使い方じゃなくて「line-height: 0;」の使い途の話
だから「「line-height: 0;」でググれよっていう
簡単にかみ砕いて理解しようとすると間違うので、とりあえずコレでも読んでみて
https://developer.mozilla.org/ja/docs/Web/CSS/line-height
中学1年になったとき英語用に4本線の描かれたノート買ったじゃろ
上から3本目が赤線のやつ
gとかyとかが赤線より下になるやつ
あの赤線が英文を書くときのbaselineで
vertical-alignのbaselineはこれのこと
img要素もデフォではinline-blockなので、このbaselineに揃う
だから赤線と4本目の線の間ぶん、画像の下に空白ができる
line-heightは行の高さだから、ゼロにしたらもちろんこの下の空白はなくなるけど
いささかやりすぎ
画像の下の空きを消したいならvertical-alignを使おう
やはり基本は大事だしここができてないと変な解釈へ走るから
いやいや、line-height:0;の使い途の話をしているんであって
余白の無くし方の話をするならline-heighｔ:0;なんて勧めないってば
line-height:0;で検索したら、いくらでも余白の無くし方が引っかかるし
だから先ずはググって色々読めって言ってるんだよ
ここではなんでそうなるのかのわかんない奴への解説だからこれでよかろう
人に物を教えるときには順序立ててやんないと理解してもらえない
一番難しい学問は人に物を教えること
>>15
imgはインライン要素な。
displayのデフォルトはinlineであってinline-blockではない。
だから、baselineとbottomの間の余白を無くしたいなら、baselineに揃ってる画像の下端を
vertical-alignを使ってbottomまで下げてやればいい（img{ vertical-align: bottom; }）
ってとこまで説明しないと、わかんない奴にはわかんないだろｗ
ちなみにテキストと横並びにしてる場合には、画像だけが下がるので余白分だけテキストとの
位置関係がズレるが、位置関係を変えたくなければline-height:0;の方がズレないので便利。
良し悪しは知らんが。
https://jsfiddle.net/c5jf4ous/
まぁ、他にも画像をdisplay: block;でブロック化したりfont-size: 0;とかposition使うとか
色々あるから、ケースバイケースで使い分ければいいんじゃないかね。vertical-alignに絞らずに。
.example:before {
content: url(../img/face.png);
}
>>6
回答者の資格なし
一昔前はそれで対応されてたけど
それの欠点は不要な画像までロードする必要が出るのと
displayを表示か非表示かの用途で使用してしまうと
inlineかblockかの概念で使えなくなる欠点がある。
スマホと出力分ける場合は、一般的にはサーバーサイドで出力わけるか
<picture><source media="(max-width:750px)" srcset="images/hogehoge.png">のようなのを使う
すごい！師匠と呼ばせてください。
疑似要素使えますねー
お思い知りましたでございますでしょうか？
オチンカスの皆さま
使えないよ。
その画像、可変対応できないから。
お主もまだまだよのう
とりま、これでも読んでみ
ttps://saruwakakun.com/html-css/reference/change-before-after
サンキュー！やさしい人！
例えばテキストボックスが4つあって、一番文字数が多いテキストボックスの高さに他のテキストボックスの高さも合わせるとか
兄弟はflexやgridで
従兄弟はCSSではむずい
<div>
<h3>見出し</h3>
<p>文章1</p>
</div>
<div>
<h3>見出し</h3>
<p>文章2</p>
</div>
みたいなコードで上のp(文章1)だけを指定する方法は分かりますでしょうか？
とか
div:first-of-type > p
とか
それくらい
ちなみに更にpが複数あった場合は
div:first-child > p:nth-child(2)
みたいな長いセレクタになっちゃうんですかね…
ここまで来たら個別のclassを指定した方が良いのでしょうか？
>>45
そんなしょっちゅう個別に変える必要があるならclass指定かspanでいいだろ
原因はどこにあるのでしょうか?cssへのパスとかは弄ってないので原因がさっぱり分かりません。。
HTMLの方が変わって
書くべきセレクタが変わってしまったか
CSSファイルの読み込みが失敗するようになったか
じゃね？
開発ツールでスタイルはどう表示されている？
「複数行置換」ってソフトがほぼ条件満たしてるんだが、検索がない！！
いきなり置換しかできない！！なんだこの糞使用！！
どこが置換されるのかされたのかわからんだろ！！！
理想
・指定したフォルダだけ検索・置換（PC丸ごと検索すんなボゲ！）
・正規表現に対応してる
・複数行に置換ができる
要するにdreamweaverの機能だなｗ
あの機能を無料で使いたいんだが
いけた！ありがとう〜
アイコンちっせーｗ
サクラエディタのgrepじゃダメなん？
開発ツールって何ですか？
レンタルサーバーのfftpから直接コード編集してます
当該ページをchromeとかfirefoxで表示させてアクティブにした状態で
ショートカット「ctrl + shift + i」押してみ
お答えお願いします。
ヘッター作成後、
div cssでバックグラウンドイメージ
h2で文字
/div
h2にマージンで位置を調整したいのですがうまくいきません。
バックグラウンドイメージの中央に文字を配置したいのですが、
h2にマージンを入力しても、ヘッターとの間にマージンがかかってしまいます。
よろしくお願いします
そもそもh2だけでやれ
うまく伝わるかどうかわからんが
マージンは貫通してる
パディング使ってください
開発ツールで見られるので、見てください
あと次スレ立てる人は
>>1にあれこれ書く前に
「初心者はまず開発ツール見ろ」と書いてほしい…
おお、久しく使ってなかったな
なんで使わなくなったのか忘れたが、何か理由があったはず。
でもありがとう
俺様に上から命令すんな
やんぞ？
質問者がやさしくする義務はないだろ？
margin:0 auto;
や
display:inline-block;
text-align:center;
は試した？
改行されないようにするにはどうしたらいいでしょうか？
どのbeautifyを使ってるかわかんないからアレだけど
設定がないならあきらメロン
ありがとうございます。
インラインブロックでうまくいきました。
gulpのプラグインgulp-html-beautifyです。
設定か、ignore?でどうにかできないか知りたかった。
以下にできるとは書いてあったんだけどな
https://haniwaman.com/gulp-html-beautify/
>>72に加えてcssはbracketsのプラグインです。htmlにも手動で使います。
あ？急にタメ口になって調子のんなや！！
パソコン持ってないです（ＴＴ）
ではスマホ、タブレットで開発ツール出す方法教えてやってよ
Scssって構造通りの入れ子で書いてますか？
これも2回目ですね（ニヤニヤ）
さっさと質問しろや
先生忙しいから締めきっちゃうぞ
リンゴ：バラ科リンゴ属の落葉高木樹。またはその果実のこと。植物学上はセイヨウリンゴと呼ぶ。
みかん：ブドウは、ブドウ科 (Vitaceae) のつる性落葉低木である。
こんな場合、名前と説明をどういうhtmlの構造でマークアップすれば良いのでしょうか？
説明はpで良いと思うのですが、名前はliの後ろに ： をつけるのも構造としては変でしょうか。
ほうなかなかないい質問しやがるな
考えてる事は素晴らしい。
回答は
li > h3 dl > dt dd だな
定義済みリストってのがあるからリンゴは<dt>だな。
：はsfter疑似要素でつけるがよろしい。
ちなみにdtというのは童貞の事な
56すぞ
まあdlで果物をdtで説明をddでやるがベターだろうな
中にはタイトルをhタグで説明をｐタグでとか簡単にやってるとこもあるが
使い方次第で装飾も融通効くから
先生ありがとう
ul liを使っていましたが、dl dd dtを使うのですね。
定義済リストというのがよくわからないのですが、
定義済ならdl dd dtで、
定義されていないリストならul liってことかな・・・
・ul li 順序の無いリスト
・ol li 順序のあるリスト
・dl dt dd 定義済みのリスト。用語（dt）に対して説明（dd）が入ったものが1セット
なのでこう書く
<h3>くだもの</h3>
<dl>
<dt>リンゴ</dt>
<dd>バラ科リンゴ属の落葉高木樹。またはその果実のこと。植物学上はセイヨウリンゴと呼ぶ。</dd>
<dt>ブドウ</dt>
<dd>ブドウは、ブドウ科 (Vitaceae) のつる性落葉低木である。</dd>
</dl>
dtとddをくくるタグがあったら使いやすかったのになー
ほんそれ。
デザイン上の区切りが付けにくいったらありゃいない
今日の夕食は魚です。
ここでいう魚とはサンマの事です。 ← 定義
この魚は一匹100円でした。
この魚は秋が旬で美味しく食べられます。
あ？みんなって何人に調査したんだよ？あ？
本当にBL好きかどうかなんてわかるのかよ！あ？
100〜のスレッドの続きを読む
