X
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
レス数が1000を超えています。これ以上書き込みはできません。
0001Name_Not_Found
垢版 |
2018/01/27(土) 13:50:08.11ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。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
0902Name_Not_Found
垢版 |
2018/03/08(木) 23:57:43.41ID:???
>>900
ブラウザ間の差異に煩わしい思いしたくないから使う
0903Name_Not_Found
垢版 |
2018/03/09(金) 00:04:58.21ID:???
子どもの話全部真に受けてるのがやばいわｗ
pを改行ってその子どもがそう覚えてただけかもしらんだろ
0904Name_Not_Found
垢版 |
2018/03/09(金) 00:59:14.44ID:???
>>900
知っておくのは大事だけど、ブラウザ間の問題解決が目的ではないよ
0905Name_Not_Found
垢版 |
2018/03/09(金) 01:16:31.73ID:???
>>903
あー言葉足らずですまん、口伝ではないのよ
プリントで要素の説明が幾つか書かれてるのを見たんだ

先生が個人で作ったにしては手の込んだデザインのプリントではあったけど
教科書や副読本的のコピーではなかったっぽいんで
全国でそうしているかどうかはわからんよね
断言ぽく書いてすまんかった
0907Name_Not_Found
垢版 |
2018/03/09(金) 19:26:14.67ID:???
画像のように三分割したいのですがうまく行きません
二列目のはじまりを揃えて、三列目は大きな画像を表示させたいです
https://i.imgur.com/S37cxsn.png
0908Name_Not_Found
垢版 |
2018/03/09(金) 19:29:55.68ID:UMua3Tf/
>>907
どんなHTMLにしたいのかね？
0909Name_Not_Found
垢版 |
2018/03/09(金) 19:39:18.44ID:???
>>908
やっていたのは一つ一つの文字にクラス名付けてcssの方で整えようとしてました
テーブルで簡単に出来るんじゃと思い試している最中です
0910Name_Not_Found
垢版 |
2018/03/09(金) 19:44:52.44ID:???
flexアイテムは
先行するflexアイテムのoutlineの上に乗っかってくる
ということに気づきました
フォーカスでoutlineが表示されるフォーム部品やa要素を
flexboxを使って並べると、
フォーカス時にoutlineが後ろのflexアイテムに隠されてしまいます
（気づきにくいですが、outlineを太く、outline-offsetを大きくすれば分かります）
ChromeでもFirefoxでも同じなので、仕様的なものかと思いますが
マージンを大きめに取るくらいしか解決方法はないでしょうか？
0912Name_Not_Found
垢版 |
2018/03/09(金) 20:15:14.22ID:???
>>911
ありがとうございます！
重ね重ねすみません。画像の高さがautoになっていますが、1·2列目の全体の高さと合わせたい場合はどうすれば良いでしょうか全体の枠組みが画像に合わせるのではなくて1·2列目にと考えています。言葉足らずですみません。
0913Name_Not_Found
垢版 |
2018/03/09(金) 20:20:16.46ID:???
flexあるから今の人はもうfloatとか勉強しないの？
0914Name_Not_Found
垢版 |
2018/03/09(金) 20:43:38.38ID:???
<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>サークルＫ</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>


１，２列目にあわせるって　画像のほうが確実にちいさいってこと？
0915Name_Not_Found
垢版 |
2018/03/09(金) 20:46:03.39ID:???
まあ顧客の原稿でもよくあるパターンだよな
どの線をどこにあわせるのか
あいたスペースはすべてつかうのかつめるのか
こっちが推測してデザインしたのに意図が違うってごねられるの
0916Name_Not_Found
垢版 |
2018/03/09(金) 20:46:08.81ID:UMua3Tf/
>>912
1、2行目のことかね？
1、2行目に何か特別な意味があって、画像は1、2行目と関連があって
高さを合わせたい
ということで良いかね？
0917Name_Not_Found
垢版 |
2018/03/09(金) 20:56:12.47ID:???
>>914
すみません。そのコードで解決しました。
ありがとうございました。
助かりました。
0918Name_Not_Found
垢版 |
2018/03/09(金) 20:57:25.54ID:???
>>916
すみません、こちらの説明がおかしくて。
最初に書いていただいたコードで解決しました。
画像の高さはこちらの勘違いです。
ありがとうございました。
0919Name_Not_Found
垢版 |
2018/03/09(金) 21:09:17.12ID:???
>>914
これみておもったけど
flex-direction: column; で縦にalign-contentする方法ってないの？
これ幅固定して無理やりwrapさせてalign-contentしてんだよね？
0920Name_Not_Found
垢版 |
2018/03/09(金) 21:49:39.05ID:???
>>910の件ですが
flexboxをやめたらうまくいきました
便利なのでやたらflexboxとgrid layoutを使っていたのですが
完全上位互換とは言えないようですね
0922Name_Not_Found
垢版 |
2018/03/09(金) 22:06:33.79ID:???
>>919
中のやつらの高さがfixされてればmargin:autoでいけんじゃね　しらんけど
0923Name_Not_Found
垢版 |
2018/03/10(土) 03:05:12.07ID:???
質問です

<div class="button">ボタン</div>

のようなHTMLであるとき
CSSは

div.button{
}

.button{
}

のどちらの表記がいいんでしょうか？
やはり前者ですか？
0925Name_Not_Found
垢版 |
2018/03/10(土) 03:23:52.69ID:???
>>923
例えば、divだけじゃなく
<a class=“button”>ボタン</a>
などで同じスタイルを使うなら後者
divとaで全く違うなら前者

個人的には後者推奨で
<div class="button button-red">ボタン</div>
のように、共通クラスと、派生クラスで管理することが多いです
0926Name_Not_Found
垢版 |
2018/03/10(土) 04:58:29.81ID:???
それクラス2つ分の名前持ってる事になるんですか？
0927Name_Not_Found
垢版 |
2018/03/10(土) 08:39:20.20ID:???
>>923
要は「div.button」で表記だとclassはdivにしか適応されない
aとかｐとか他の複数の要素にも使うのなら「.button」にしておく
0928Name_Not_Found
垢版 |
2018/03/10(土) 08:43:34.65ID:???
>>926
そうじゃなくてclass名を半角スペースで区切って複数で記述すると
別々のclassのスタイルを同時に適用できるということ
例えばボタンの形と中のテキストのサイズやカラーを別にしたい時とか
0929Name_Not_Found
垢版 |
2018/03/10(土) 11:23:12.80ID:???
詳細クラスのときしかつかったことないけど
ふつうに２つ分のクラスももてるの？
他の言語だと多重継承できないこと多いけど

.button{}
.button.color-red{}

じゃなくて

.button {}
.color-red {}

でも適用される？
0931Name_Not_Found
垢版 |
2018/03/10(土) 14:12:10.31ID:???
>>923
原則、後者の方が汎用性高いので後者で行えばいい
そしていずれ前者が必要な時が出てくる
その時に前者が必要な理由を理解すればいい
0932920
垢版 |
2018/03/10(土) 14:19:21.57ID:???
>>921
z-indexのある他のブロック要素ではどうなのだろう？
と思って試してみたら、flexbox同様、
要素が他の要素のoutlineより上に来ました
それで要素のbackgroundをtransparentにしたところ、
outlineの塗りつぶしが避けられると分かりました
おそらくflexboxでも同じやり方で解決できると思います
ありがとうございました
0933Name_Not_Found
垢版 |
2018/03/10(土) 15:08:43.14ID:???
outlineって何のことだろう
borderのことならbox-sizingでいいんじゃ

つーかもう
body * {box-sizing:border-box}は必ずいれてるわ
0934Name_Not_Found
垢版 |
2018/03/10(土) 21:24:27.04ID:???
>body * {box-sizing:border-box}
ああ、やはりそうなるか。
自分も毎回記述してて疑問に思ってたんだが
それやっても支障でないんだね
0935Name_Not_Found
垢版 |
2018/03/10(土) 23:43:35.90ID:???
>>933
なんのことかはわからんが
outlineてのはあるにはあるよね
クリックしたときにでる点線のやつ
0936Name_Not_Found
垢版 |
2018/03/10(土) 23:48:29.99ID:???
>>924
>>925
>>927
>>931
ありがとうございます
基本は後者でやって
必要であればクラスを複数同時に当てたり
前者を使ったりってことなんですね
0937Name_Not_Found
垢版 |
2018/03/11(日) 01:54:38.63ID:???
複数のクラスを使うのは、複数の概念を組み合わせる場合

例えば、色のクラスと、テキストの右寄せとか。
赤色で、右寄せとか
0938Name_Not_Found
垢版 |
2018/03/11(日) 02:05:35.18ID:???
>>937
> 複数のクラスを使うのは、複数の概念を組み合わせる場合

当たり前ではないかと
0939Name_Not_Found
垢版 |
2018/03/11(日) 11:25:45.36ID:???
規模が大きくなるとクラスが3個以上になることもあるが
どっかのスレでそれが理解できないのがいたな
0940Name_Not_Found
垢版 |
2018/03/11(日) 11:35:50.85ID:???
でもマルチクラスは分かりづらいし単純に冗長だから
クラスを組み合わせるのはsass側で解決して
シングルクラスにした方が良いよ
0941Name_Not_Found
垢版 |
2018/03/11(日) 11:52:08.75ID:???
本来、cssは装飾に対する意味付けで、直接的なデザインとしての指定ではないほうがいい
例えば.text-redではなく、.text-strongのほうがいい

とは言え最近はcssを環境によって切り替えることもないし、bootstrapのようにデザイン指定として使うほうが楽だね
0942Name_Not_Found
垢版 |
2018/03/11(日) 11:58:09.65ID:???
>>941
text-ってのもおかしんだけどなｗ
テキストをstrongにするって言ってるわけだから
0943Name_Not_Found
垢版 |
2018/03/11(日) 12:53:56.16ID:???
開始タグと終了タグの間の、タグの中身に相当する部分の呼び名は何ですか？
0945Name_Not_Found
垢版 |
2018/03/11(日) 13:55:57.04ID:???
>>944
そうです
要素の内容、あるいはコンテントですね
ありがとうございました
0947Name_Not_Found
垢版 |
2018/03/12(月) 00:35:29.19ID:???
>>940
マルチクラスすらのしらないのにsassですかwww
頭わいてるのかお前
やっぱsass様はコミュ障なんだねぇ
0949Name_Not_Found
垢版 |
2018/03/12(月) 01:20:16.85ID:???
土日はsass様が沸きやすいね
会社で相手にされなくてストレスたまってんだろうなぁ
0950Name_Not_Found
垢版 |
2018/03/12(月) 01:29:21.88ID:???
おかしいな？ 俺平日の夜も普通に書き込んでるけど？
0951Name_Not_Found
垢版 |
2018/03/12(月) 03:13:20.17ID:???
でも、SASS の利用率は、海外では100%、日本でも50% はある
0952Name_Not_Found
垢版 |
2018/03/12(月) 03:34:12.65ID:???
100%はウソだわｗ
海外は、というより欧米はpostcssの機能コマ切れ導入に移行しつつある。
そうでなくともstylus もある。
そもそもrimrafモジュールやmkdirpモジュールまで使って必死でプラットフォーム依存避けようとする輩がsassごときのためだけにruby依存なんて許容できるかよｗｗｗ
sass使ってる奴もnode-sassだろ精々
0953Name_Not_Found
垢版 |
2018/03/12(月) 03:42:46.30ID:???
じゃあpostcss、stylus等の話もしていかなきゃな

> sassごときのためだけにruby依存なんて許容できるかよｗｗｗ
ん？ 今はlibsassというC/C++で実装された高速なコンパイラに
置き換わってるはずだが？もnode-sassもlibsassを使うので
ruby要らなくなっている
0954Name_Not_Found
垢版 |
2018/03/12(月) 04:23:29.13ID:???
これからはWEBアセンブリの時代よ！
0955Name_Not_Found
垢版 |
2018/03/12(月) 08:14:09.35ID:vcw54d0N
>>941
それも結局英語を理解できるって前提ありきだよね

.red や .aka だと発狂しちゃう人でも
.nyekundu だったら許しちゃったりするでしょ

コンピュータに対する識別子でしかないんだし
あんまりこだわらなくてもいい気もするな
0956Name_Not_Found
垢版 |
2018/03/12(月) 10:01:03.68ID:???
> .nyekundu だったら許しちゃったりするでしょ
英語ですらないから許さないよ
0957Name_Not_Found
垢版 |
2018/03/12(月) 12:20:30.86ID:???
英語じゃなきゃ駄目なの？
0959Name_Not_Found
垢版 |
2018/03/12(月) 13:06:56.27ID:???
個人の趣味サイトなら、自分がわかれば好きにすればいいと思う

他人が関わる可能性があるなら、誰が見てもわかりやすくした方がいい
特に、集団で運用するなら、集団のルールに従うべき
0960Name_Not_Found
垢版 |
2018/03/12(月) 13:54:19.50ID:???
今の時代英語が理解できない人間と一緒に仕事をしたくないな
0961Name_Not_Found
垢版 |
2018/03/12(月) 14:15:13.47ID:???
客のアメリカ本社から回されてきたコードで
コメントの半分以上がスペイン語だったときは泣きそうになった
0962Name_Not_Found
垢版 |
2018/03/12(月) 14:23:36.81ID:???
英語でHTMLCSSJSPHPを学び直せばいい
0963Name_Not_Found
垢版 |
2018/03/12(月) 14:30:02.81ID:???
ドサクサ紛れにペチプ混ぜるな！
0964Name_Not_Found
垢版 |
2018/03/12(月) 20:13:11.80ID:???
次テンプレ入れておけ

・回答はSASS/SCSSを前提としないこと
　CSSでの回答とし、要望があった場合のみSASS/SCSSでも可
0966Name_Not_Found
垢版 |
2018/03/12(月) 21:20:53.41ID:???
SassやSCSSで答えてるやつの相手するほうがめんどくせー
0968Name_Not_Found
垢版 |
2018/03/12(月) 21:41:36.20ID:???
答えてくれてるのに無視するわけにはいかんだろ
0970Name_Not_Found
垢版 |
2018/03/12(月) 23:19:41.53ID:???
HTML中の属性値に引用符と同じ文字を記述するにはどうすればいいのでしょうか？
他のプログラム言語のようなエスケープ文字がないので
"\""
みたいには書けないですよね
0971Name_Not_Found
垢版 |
2018/03/12(月) 23:23:50.25ID:vcw54d0N
数値文字参照ではいかんの？
0972Name_Not_Found
垢版 |
2018/03/12(月) 23:28:44.33ID:???
そもそも属性値に、そんな記号を使えるのか？
0973Name_Not_Found
垢版 |
2018/03/12(月) 23:39:26.85ID:???
引用符の中にも文字参照って使えたんですね
ありがとうございました
0976Name_Not_Found
垢版 |
2018/03/13(火) 00:26:40.78ID:5ytCXUBT
フォームの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 となってしまいうまく動かないということです
パラメータを後にくるようにする方法はないでしょうか？
0977Name_Not_Found
垢版 |
2018/03/13(火) 00:43:31.54ID:???
#を%なんちゃらでＵＲＬエンコードしてもだめ？
0979Name_Not_Found
垢版 |
2018/03/13(火) 01:29:08.97ID:XCWZnfDn
そらそーだ
#の後ろはlocation.hashだとブラウザは思ってるわけだから

#ajaxてのはなにか１画面アプリ的なことをしてるわけでしょ
だったらそのフォームのポストもブラウザ任せにしないで
URL作るところから自分で面倒見てあげなきゃ駄目っしょ
0980Name_Not_Found
垢版 |
2018/03/13(火) 17:19:40.51ID:???
デスクトップ用evernoteクライアントの
タブのようなものをHTMLとCSSで作ろうと思います
hoverすると「×」がボタンの右端に表示されて、
それをクリックするとボタンが消えるようなものです
この「×」はどういう実装で実現するのがいいですか？
0984Name_Not_Found
垢版 |
2018/03/13(火) 19:02:49.56ID:???
>>983
どんぐりの背比べ
好きに実装するといい
0985Name_Not_Found
垢版 |
2018/03/13(火) 19:03:55.88ID:XCWZnfDn
>>983
HTMLで要素を作って
CSSで見た目を整えて
JSで制御するのがいいと思う
0987Name_Not_Found
垢版 |
2018/03/13(火) 19:20:08.49ID:???
優しく意地悪してて笑った
0988Name_Not_Found
垢版 |
2018/03/13(火) 19:22:20.27ID:???
>>980
×って自分でいってんだから×で実装すればいいじゃん
0989Name_Not_Found
垢版 |
2018/03/13(火) 19:26:33.77ID:???
absoluteな子要素を右寄せ縦センタリングして
その要素にafter疑似クラスを使って×を設定しました
これ以上にイケてる方法ありますか？
0990Name_Not_Found
垢版 |
2018/03/13(火) 19:32:06.62ID:???
アプリケーション系は
よっぽど切羽詰った事情がない限り
before、afterを使うよりも普通に要素として書いたほうが
後々取り回ししやすことが多い、気がする
DOMから手が届くから
0991Name_Not_Found
垢版 |
2018/03/13(火) 21:14:07.03ID:???
この×は文字ではなくてアイコンとして使っているだけなので
font awesomeのアイコンと同じ感じにしました
0992Name_Not_Found
垢版 |
2018/03/13(火) 21:44:53.53ID:???
evernoteのタグってことは削除したあとリロードでなくなってないといけないんだろ？
localStorageとか使わないと無理だよ
0993Name_Not_Found
垢版 |
2018/03/13(火) 22:44:14.91ID:???
実は作っているのはウェブサイトではなくてelectronのアプリなので
ストレージは使っていますが、locasStrageではありません
レス数が1000を超えています。これ以上書き込みはできません。
ニューススポーツなんでも実況