HTML/CSS のどんな質問に必ず優しく答えるスレ 31
レス数が950を超えています。1000を超えると書き込みができなくなります。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!
質問側も節度あるレスで!質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人(立てられない場合は次の宣言者)が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(>>980を取った場合も)
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html まぁHTMLの授業がある自体マシでは
わしの中学生の時はキーボードを押す練習しかなかったからな
キーボード配列がテストに出るレベル 最近の学生はプログラミングが授業で学べるのがええな
裏山 CSSはデリミタに_ではなく-を使いますが
ID名やクラス名もデリミタに_ではなく-を使う方がいいのでしょうか? >>881
<blockquote>
<p>CSSはデリミタに_ではなく-を使いますが</p>
</blockquote>
それどこ情報? >>882
プロパティ名に使われているハイフンのことじゃね?
background-colorとかfont-sizeとか selectを全面に広げたペインのある場合も
そのselectはnavなどのブロックレベル要素に入れた方がいいのでしょうか?
インラインレベル要素を直接レイアウトのレベルに置くのはなんだか抵抗がありますが
なくても問題ないコンテナ要素ならない方がいいんじゃないかとも思います
どうなのでしょうか? >>886
直接レイアウトしてるブロックの子にするのが気持ち悪いのはわかる
俺もよく<p>とかに入れてる
でもこういうのはもうポリシーの問題に近いので
良し悪しは人に決めてもらうのではなく、自分で決めること
だと思ってる >>886
あと何かしらの要素に入れておいたほうが
裸で置いておくよりも
後々デザインの為にCSSを書くときに都合が良いことが多い >>887-888
決まったセオリーがあるというわけでもないのですね
ではシンプルさよりも気持ち悪いという感覚の方を重視してコンテナを使おうと思います
ありがとうございました >>880
h1は文字を大きくしますとか教える授業だぞ
あれならないほうがまし >>890
うわ〜酷いな、そうやってアメリカや東欧州などから遅れていくわけだ とはいえどう教えるかって難しいよな
大学生ぐらいなら見出しを意味し、ブラウザで見たときの文字が大きくなるデフォルトスタイルになってることが多い
っていってもいいけど小学生ぐらいなら文字が大きくなるって教えるしかないんじゃね
「h1は文字を大きくする(ために使う)」はひどいが
「ためしにh1をかいてみましょう 大きくなりましたね」ぐらいのことしかいえないだろう <h1>は知らんけど
従姉妹に娘に教えてあげてって頼まれたときに
「改行するときは<p>と書きます」って教えてると知った時は戦慄した
そんですごく迷った
本当のことを教えてしまうと、たぶん学校では役に立たないだろうし
かと言ってこんな20年前のやり方を教えてしまうのもどうかと
幸い、その子はまったくやる気がなかったんで
おっちゃんやっとくから遊んどいでって言って、普通にコーディングしたった 小学生でもわかる
pは段落、brは改行
h1は大見出し、大きくしたいならCSSという物を使う >まったくやる気がなかった
それが正解
下手に覚えるならやらんほうがマシ
小学生でもやってるのか知らんが、教科書の「この部分」でわかるだろ まあでも学校の先生には少しわりーことしたな、とは思う
彼らだって専門家でもないのに、知らんなりに指導要領通りに一生懸命やってるだけなんだろうし
そこに
class以外の属性がほとんどないのに色や大きさが変わってたり
<marquee>じゃないのに動いてるのがあるの持ってこられても
わけわかんなかっただろうなと 何気に教科書って h,p,img,strong,i,ul,table、段組みなどいい教材なんだよな >>895
小学生でもわかる
pは段落、brは改行
h1は大見出し、
ここまではいいけど
>大きくしたいならCSSという物を使う
これが小学校では範囲外なんだよね
小学校で負の数って概念にふれちゃダメなのと同じ リセットCSSは使うのが普通なのでしょうか?
今まで使っていなかったのですが、ブラウザ間の差異を知らなかったせいで
変なハマり方をしたので、使った方がいいのかと思ってきました
今まで使っていなかった理由は、
ブラウザによるふるまいの違いも知っておいた方がいいのでは?と思っていたからです >>900
ブラウザ間の差異に煩わしい思いしたくないから使う 子どもの話全部真に受けてるのがやばいわw
pを改行ってその子どもがそう覚えてただけかもしらんだろ >>900
知っておくのは大事だけど、ブラウザ間の問題解決が目的ではないよ >>903
あー言葉足らずですまん、口伝ではないのよ
プリントで要素の説明が幾つか書かれてるのを見たんだ
先生が個人で作ったにしては手の込んだデザインのプリントではあったけど
教科書や副読本的のコピーではなかったっぽいんで
全国でそうしているかどうかはわからんよね
断言ぽく書いてすまんかった 画像のように三分割したいのですがうまく行きません
二列目のはじまりを揃えて、三列目は大きな画像を表示させたいです
https://i.imgur.com/S37cxsn.png >>908
やっていたのは一つ一つの文字にクラス名付けてcssの方で整えようとしてました
テーブルで簡単に出来るんじゃと思い試している最中です flexアイテムは
先行するflexアイテムのoutlineの上に乗っかってくる
ということに気づきました
フォーカスでoutlineが表示されるフォーム部品やa要素を
flexboxを使って並べると、
フォーカス時にoutlineが後ろのflexアイテムに隠されてしまいます
(気づきにくいですが、outlineを太く、outline-offsetを大きくすれば分かります)
ChromeでもFirefoxでも同じなので、仕様的なものかと思いますが
マージンを大きめに取るくらいしか解決方法はないでしょうか? >>911
ありがとうございます!
重ね重ねすみません。画像の高さがautoになっていますが、1·2列目の全体の高さと合わせたい場合はどうすれば良いでしょうか全体の枠組みが画像に合わせるのではなくて1·2列目にと考えています。言葉足らずですみません。 flexあるから今の人はもうfloatとか勉強しないの? <style>
<!--
.mainArea{ width:800px; font-size:150%; }
.borderBox { border:solid 5px #000; display:flex; padding:1em; justify-content:space-between; }
.borderBox > ul {list-style:none; display:flex; flex-wrap:wrap; align-content:space-between; width:15em;}
.borderBox > ul > li {margin:auto; inherit; display:flex; justify-content:space-between;}
.borderBox > ul > li > div {width:6em; margin:0 1em;}
-->
</style>
<div class="mainArea">
<div class="borderBox">
<ul>
<li><div>サークルK</div><div>良い</div></li>
<li><div>ローソン</div><div>微妙</div></li>
<li><div>ファミマ</div><div>悪い</div></li>
<li><div>セブン</div><div>良い</div></li>
</ul>
<p><img src="http://placehold.jp/300x300.png"></p>
</div>
</div>
1,2列目にあわせるって 画像のほうが確実にちいさいってこと? まあ顧客の原稿でもよくあるパターンだよな
どの線をどこにあわせるのか
あいたスペースはすべてつかうのかつめるのか
こっちが推測してデザインしたのに意図が違うってごねられるの >>912
1、2行目のことかね?
1、2行目に何か特別な意味があって、画像は1、2行目と関連があって
高さを合わせたい
ということで良いかね? >>914
すみません。そのコードで解決しました。
ありがとうございました。
助かりました。 >>916
すみません、こちらの説明がおかしくて。
最初に書いていただいたコードで解決しました。
画像の高さはこちらの勘違いです。
ありがとうございました。 >>914
これみておもったけど
flex-direction: column; で縦にalign-contentする方法ってないの?
これ幅固定して無理やりwrapさせてalign-contentしてんだよね? >>910の件ですが
flexboxをやめたらうまくいきました
便利なのでやたらflexboxとgrid layoutを使っていたのですが
完全上位互換とは言えないようですね >>919
中のやつらの高さがfixされてればmargin:autoでいけんじゃね しらんけど 質問です
<div class="button">ボタン</div>
のようなHTMLであるとき
CSSは
div.button{
}
.button{
}
のどちらの表記がいいんでしょうか?
やはり前者ですか? >>923
例えば、divだけじゃなく
<a class=“button”>ボタン</a>
などで同じスタイルを使うなら後者
divとaで全く違うなら前者
個人的には後者推奨で
<div class="button button-red">ボタン</div>
のように、共通クラスと、派生クラスで管理することが多いです >>923
要は「div.button」で表記だとclassはdivにしか適応されない
aとかpとか他の複数の要素にも使うのなら「.button」にしておく >>926
そうじゃなくてclass名を半角スペースで区切って複数で記述すると
別々のclassのスタイルを同時に適用できるということ
例えばボタンの形と中のテキストのサイズやカラーを別にしたい時とか 詳細クラスのときしかつかったことないけど
ふつうに2つ分のクラスももてるの?
他の言語だと多重継承できないこと多いけど
.button{}
.button.color-red{}
じゃなくて
.button {}
.color-red {}
でも適用される? >>923
原則、後者の方が汎用性高いので後者で行えばいい
そしていずれ前者が必要な時が出てくる
その時に前者が必要な理由を理解すればいい >>921
z-indexのある他のブロック要素ではどうなのだろう?
と思って試してみたら、flexbox同様、
要素が他の要素のoutlineより上に来ました
それで要素のbackgroundをtransparentにしたところ、
outlineの塗りつぶしが避けられると分かりました
おそらくflexboxでも同じやり方で解決できると思います
ありがとうございました outlineって何のことだろう
borderのことならbox-sizingでいいんじゃ
つーかもう
body * {box-sizing:border-box}は必ずいれてるわ >body * {box-sizing:border-box}
ああ、やはりそうなるか。
自分も毎回記述してて疑問に思ってたんだが
それやっても支障でないんだね >>933
なんのことかはわからんが
outlineてのはあるにはあるよね
クリックしたときにでる点線のやつ >>924
>>925
>>927
>>931
ありがとうございます
基本は後者でやって
必要であればクラスを複数同時に当てたり
前者を使ったりってことなんですね 複数のクラスを使うのは、複数の概念を組み合わせる場合
例えば、色のクラスと、テキストの右寄せとか。
赤色で、右寄せとか >>937
> 複数のクラスを使うのは、複数の概念を組み合わせる場合
当たり前ではないかと 規模が大きくなるとクラスが3個以上になることもあるが
どっかのスレでそれが理解できないのがいたな でもマルチクラスは分かりづらいし単純に冗長だから
クラスを組み合わせるのはsass側で解決して
シングルクラスにした方が良いよ 本来、cssは装飾に対する意味付けで、直接的なデザインとしての指定ではないほうがいい
例えば.text-redではなく、.text-strongのほうがいい
とは言え最近はcssを環境によって切り替えることもないし、bootstrapのようにデザイン指定として使うほうが楽だね >>941
text-ってのもおかしんだけどなw
テキストをstrongにするって言ってるわけだから 開始タグと終了タグの間の、タグの中身に相当する部分の呼び名は何ですか? >>944
そうです
要素の内容、あるいはコンテントですね
ありがとうございました >>940
マルチクラスすらのしらないのにsassですかwww
頭わいてるのかお前
やっぱsass様はコミュ障なんだねぇ 土日はsass様が沸きやすいね
会社で相手にされなくてストレスたまってんだろうなぁ おかしいな? 俺平日の夜も普通に書き込んでるけど? でも、SASS の利用率は、海外では100%、日本でも50% はある 100%はウソだわw
海外は、というより欧米はpostcssの機能コマ切れ導入に移行しつつある。
そうでなくともstylus もある。
そもそもrimrafモジュールやmkdirpモジュールまで使って必死でプラットフォーム依存避けようとする輩がsassごときのためだけにruby依存なんて許容できるかよwww
sass使ってる奴もnode-sassだろ精々 じゃあpostcss、stylus等の話もしていかなきゃな
> sassごときのためだけにruby依存なんて許容できるかよwww
ん? 今はlibsassというC/C++で実装された高速なコンパイラに
置き換わってるはずだが?もnode-sassもlibsassを使うので
ruby要らなくなっている >>941
それも結局英語を理解できるって前提ありきだよね
.red や .aka だと発狂しちゃう人でも
.nyekundu だったら許しちゃったりするでしょ
コンピュータに対する識別子でしかないんだし
あんまりこだわらなくてもいい気もするな > .nyekundu だったら許しちゃったりするでしょ
英語ですらないから許さないよ 個人の趣味サイトなら、自分がわかれば好きにすればいいと思う
他人が関わる可能性があるなら、誰が見てもわかりやすくした方がいい
特に、集団で運用するなら、集団のルールに従うべき 今の時代英語が理解できない人間と一緒に仕事をしたくないな 客のアメリカ本社から回されてきたコードで
コメントの半分以上がスペイン語だったときは泣きそうになった 次テンプレ入れておけ
・回答はSASS/SCSSを前提としないこと
CSSでの回答とし、要望があった場合のみSASS/SCSSでも可 SassやSCSSで答えてるやつの相手するほうがめんどくせー HTML中の属性値に引用符と同じ文字を記述するにはどうすればいいのでしょうか?
他のプログラム言語のようなエスケープ文字がないので
"\""
みたいには書けないですよね 引用符の中にも文字参照って使えたんですね
ありがとうございました むしろ使わないとダメだからな
<a href="http://example.com/foo?a=1&b=2">
これは間違いだからな
<a href="http://example.com/foo?a=1&b=2">
正しいのはこれだからな なんか化けたぞ
<a href="http://example.com/foo?a=1&amp;b=2">
正しいのはこれだからな フォームのGETでハッシュ付きのurlに値を渡したいのですが、
パラメータ - ハッシュの順番のurlになってしまってうまく値を渡せません
具体的には
<form method="get" action="./#ajax/find.php">
<input type="text" name="key" value="" />
</form>
というフォームで、
http://sample//#ajax/find.php?key=xxx となってくれたらうまく動くのですが
http://sample/?key=xxx#ajax/find.php となってしまいうまく動かないということです
パラメータを後にくるようにする方法はないでしょうか? action="./%23ajax/find.php">
にするということでしょうか?
http://sample/%23ajax/find.php?key=xxx
となって404がでました そらそーだ
#の後ろはlocation.hashだとブラウザは思ってるわけだから
#ajaxてのはなにか1画面アプリ的なことをしてるわけでしょ
だったらそのフォームのポストもブラウザ任せにしないで
URL作るところから自分で面倒見てあげなきゃ駄目っしょ レス数が950を超えています。1000を超えると書き込みができなくなります。