20/08/07 07:20:48.47 .net
>>334
:nth-child() - CSS: カスケーディングスタイルシート | MDN
URLﾘﾝｸ(developer.mozilla.org)
> n はすべての正の整数で、0から始まります。
とりあえずHTMLとかCSSで分からないことは、例えば「css nth-child mdn」で検索して
MDNの解説を読んでみよう
338:Name_Not_Found
20/08/07 07:21:08.92 .net
おわ、かぶったｗ
失礼しました
339:Name_Not_Found
20/08/07 07:35:03.88 c7hNF/2z.net
>>336
>>337
nにはインクリメントが入るんですね
340:Name_Not_Found
20/08/07 09:47:57 c7hNF/2z.net
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(ideone.com)
ｆlexで並べたボックスから中身がはみ出てしまいます
対策はないでしょうか？
調べて子要素にmin-width:0;を指定しましたが、変化はなかったです
341:Name_Not_Found
20/08/07 10:17:46.24 W4/guscT.net
>>340
それは英文法の問題なんだ
あいつらの言語は、スペースで区切られないと
改行しないんだ
どうしても折りたい場合は
強制改行（br要素）を使うか
white-space、word-brake、word-wrapを使うんだ
342:Name_Not_Found
20/08/07 11:44:28.57 c7hNF/2z.net
>>341
おおう 本当ですね
ありがとぅ
343:Name_Not_Found
20/08/07 15:44:25 .net
ｐｈｐって言語ってどうなの？斜陽なの？
HTMLを理解したら入門にどんな言語が後々役たちそうですか？
344:Name_Not_Found
20/08/07 15:57:40 .net
JavaScript
345:Name_Not_Found
20/08/07 17:56:12.13 .net
>>343
phpはWordPressある限りしばらくは大丈夫だと思う
346:Name_Not_Found
20/08/07 19:53:53.40 U76a8xtt.net
URLﾘﾝｸ(codepen.io)
マウスホバー時に左上のボタンが消えるようにしたいのですがどうすればよいでしょうか?
347:Name_Not_Found
20/08/07 19:55:00.66 .net
>>344
>>345
ありがとう、CSSフイン域分かる程度なんだけど市lt借りやってから
JavaScript言ったほうがいいかしら？
348:Name_Not_Found
20/08/07 19:55:45.18 .net
>>347
CSS雰囲気分かる程度なんですけどしっかりやってから
JavaScriptやったほうがいいかしら
349:Name_Not_Found
20/08/07 19:57:55.83 .net
まずはタイポ無く日本語を入力することから始めたほうがいいんじゃね？
350:Name_Not_Found
20/08/07 20:05:07.72 c7hNF/2z.net
width1000px height1000pxのボックスを作り、その中に画像を入れています
画像は100px 100pxです
これを余白を埋めるようにしたいのですが、なんのCSSを使うのでしょうか？
調べてみたのですが、object-fit:fill;ではだめなようです
351:Name_Not_Found
20/08/07 20:38:16.66 U76a8xtt.net
すみません先ほど質問したものなのですがURLﾘﾝｸ(codepen.io) マウスオーバーで画像を拡大しながらホバー色を変化させようとしたのですが。
URLﾘﾝｸ(weconet.co.jp) このサイトを参考にして作っているとホバー色変更とホバー拡大がお互いぶつかり合ってしまい。両方を生かすことができません、1行目の<figure class="effect-oscar">
と2行目の<div class="category">を入れ替えると画像の拡大はできるのですが、ホバー色の変化を再現できません。拡大しながら、マウスオーバーでホバー色の変更をするためにはどこを訂正すればよいでしょうか?
352:Name_Not_Found
20/08/07 21:16:09 U76a8xtt.net
URLﾘﾝｸ(codepen.io) 解決できました。
figureにclass設定しても効かないのでしょうか?
353:Name_Not_Found
20/08/07 21:34:40.45 c7hNF/2z.net
>>350です
これは画像ではないですが、こんな感じで文字のボックスがはみ出ます
これも残り領域にフィットさせたかったのですが、何を指定すればよいでしょうか
object-fitではないようです
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(ideone.com)
354:Name_Not_Found
20/08/07 21:38:33.09 .net
>>350
img { width: 100%; }
355:Name_Not_Found
20/08/07 21:43:13.79 .net
>>353
.outerのheightは500px固定にしなきゃいけないの？
356:Name_Not_Found
20/08/07 21:43:58.08 .net
>>353
ウホッ！ウホッウホッ！
(ソースがないウホ！だからゴリラの第ゴリラ感で答えるウホ！)
ウホッホ！ウッホ！ウホウホ！
(画像はbackground-imageを使うウホッ！)
ウホッウホッ！ウッホ！
(backgroundについてはググれウホッ)
ウホッウホッ！ウホッ！
(ウホッウホッ！ウホッ！)
357:Name_Not_Found
20/08/07 21:46:33.73 .net
>>353
ウホッウホッウホウホ！ウホウホ！
(URLﾘﾝｸ(www.netyasun.com))
358:Name_Not_Found
20/08/07 21:47:55.62 .net
js質問スレのノリを持ち込むな
359:Name_Not_Found
20/08/07 21:51:37.45 .net
どうもここんとこ自分で解決しようとしない愚か者ばかりが目立つ
360:Name_Not_Found
20/08/07 21:52:32.28 U76a8xtt.net
何度もすみませんURLﾘﾝｸ(jsfiddle.net)拡大まではできたのですがoverflow hiddenではみ出さないようにできません。3時間やっても無理です、アドバイスください。お願いします。
361:Name_Not_Found
20/08/07 21:57:05.30 U76a8xtt.net
URLﾘﾝｸ(jsfiddle.net) ログインしてませんでしたすみません…
362:Name_Not_Found
20/08/07 22:33:36.18 jMEzpgrG.net
>>359
いつも
363:Name_Not_Found
20/08/08 02:20:24 .net
>>360-361
figure:hoverでfigureごと拡大してるからだろ
figure:hoverでimgだけ拡大させろ
364:Name_Not_Found
20/08/08 02:22:43 .net
要は>>327の応用だな
365:Name_Not_Found
20/08/08 02:40:00 ibmb0nFZ.net
>>363>>364
すみません技術不足でして自分なりに初めから作り変えました。URLﾘﾝｸ(jsfiddle.net)
どうしても<span>aaa</span>にマウスを載せても画像がズームされません。おそらく画像と<span>aaa</span>が一体化してないせいだと思ってます。
画像からだと<span>aaa</span>のマウスオーバーは機能するのに逆はなぜ機能しないのでしょうか?
366:Name_Not_Found
20/08/08 02:43:28 ibmb0nFZ.net
マウスオーバーなど要素をいくつも一つのコンテンツに組み込むのが大変苦手です。
367:Name_Not_Found
20/08/08 03:05:39.93 .net
>>365
<span>aaa</span>には何も効いてないだろ？
.quaternary2のbackground-colorがhoverで変わっただけ
そういうのは孫要素のimgとか子要素のspanじゃなく親要素に
マウスhoverで子とか孫要素をtransformさせりゃいいんだよ
これも>>327の応用
368:Name_Not_Found
20/08/08 05:29:39.81 1I/1YXIK.net
>>355
そうですね
たとえばflexboxで同じ幅で並べたいことなどありますよね
ブログの記事一覧などで
URLﾘﾝｸ(hacks.beck1240.com)
こんな感じです
369:Name_Not_Found
20/08/08 05:39:56 1I/1YXIK.net
>>356
background imageを使うのはなぜでしょうか
370:Name_Not_Found
20/08/08 05:59:57.67 .net
>>368
それじゃ.boxも.textareaもガチガチに固定されてるのに、残りの領域ってのはどこにあるのよ？
.textareaからはみ出させないってだけなら、フォントサイズを小さくするか
overflowではみ出した分は隠すか、スクロール表示させるしかないんじゃね？
371:Name_Not_Found
20/08/08 06:19:51.53 1I/1YXIK.net
残りの領域というのはboxの高さ-boxの高さ＝３００ｐｘです
この領域を埋めるCSSがあったと思うんですが、思い出せません
372:Name_Not_Found
20/08/08 07:22:05.85 .net
問題：
X - X == 300 となる X を求めよ。(15点)
373:Name_Not_Found
20/08/08 07:26:24.48 .net
全てのテキストがはみ出さず、ぎっちり埋め込めるプロパティなんかあったら
俺も知りたいｗ
374:Name_Not_Found
20/08/08 09:46:37.03 3upbSFFB.net
>>367
どれだけ調べてもわかりません。すみませんヒントをください。
375:Name_Not_Found
20/08/08 09:54:20.98 3upbSFFB.net
URLﾘﾝｸ(jsfiddle.net)
間違ってると思うのですが、どこを変えればよいのでしょうか?
376:Name_Not_Found
20/08/08 09:58:17.86 1I/1YXIK.net
>>373
問題はテキストではなくてボックスがはみ出ることです
ボックスがはみ出なければテキストは切り取られますから
>>372
数値指定ではなく、残りの領域に自動的にフィットさせてくれるプロパティがあったと思うのですが、、、
377:Name_Not_Found
20/08/08 10:26:22.33 3upbSFFB.net
URLﾘﾝｸ(jsfiddle.net)
このサイトさんを参考にしてhtmlの配列を書き換えたのですが
URLﾘﾝｸ(www.puzzle-web.jp)、今度は画像がはみ出してしまいホバーもずれてしまいます…
378:Name_Not_Found
20/08/08 11:01:25.04 3upbSFFB.net
URLﾘﾝｸ(jsfiddle.net) コードを整理してみたのですが
figure.snip:hover figcaption,
figure.snip.hover figcaption {
background-color:#000;
} でサンプルだとこの要素に-webkit-transform: translateY(0);
transform: translateY(0); 自分の場合色を変更したいのでback groundを入れたのですが、色は変わらず…
なぜだかわかりません…
379:Name_Not_Found
20/08/08 11:28:39.42 3upbSFFB.net
figure.snip:hover img + figure.snip h2 {background-color: brown;} と追記してみたのですができません、
figure.snip:画像をホバーした際にfigure.snip h2の色を変える どこが間違ってるのでしょうか
380:Name_Not_Found
20/08/08 11:47:02.56 3upbSFFB.net
figure.snip:hover h2 {background-color: brown;} ようやくできましたありがとうございます。
381:Name_Not_Found
20/08/08 11:52:30.74 .net
グリッドレイアウトでサイトデザインをしています。
似たようなレイアウトで画像だけ異なるものを並べていきます。
その際に１つの要素を使って、背景画像だけ違うものを並べていく方法はないでしょうか？
自分が試したのは
１）<img src="">でそれぞれの画像を配置していく
→画像の大きさがそれぞれ異なるのでレイアウトがぐちゃぐちゃになってしまう
２）背景画像として設定する
→レイアウトは整うが、背景画像ごとにcssで要素を設定していくため、
画像の種類が多くなるとbox12、box13...と要素の種類がどんどん増えてしまう
そのため、要素box1(背景画像はimg1)、要素box1(背景画像はimg2)みたいに
html側で要素の背景だけを変えて対応させる方法など、スマートなやり方は
ないかと悩んでいます。
皆様はこういう場合どういう手法を使っていますでしょうか？
382:Name_Not_Found
20/08/08 11:55:01.44 3upbSFFB.net
親要素を順に書いていって：hover<結合子> 実装させたい要素を書くって事ですかね
実装させたい要素には親要素は書かず、共通したhtmlは省いて最小にした要素を入れる
383:Name_Not_Found
20/08/08 12:09:18.64 .net
>>382
なんか独自解釈で変な理解のしかたしてる気がしないでも無いが
もうしょうがねぇから
URLﾘﾝｸ(jsfiddle.net)
元ソースが整理されて無くて分かりづらかったから、HTML部分はほぼそのままで
動きは多少変えたけど、CSSは1から書き換えた
これなら何が悪かったのか理解できるか？
384:Name_Not_Found
20/08/08 12:12:35.47 .net
>>382
ありがとうございます。実現したいのはこういうレイアウトです。
↓box1 ↓box2
┏━━┳━━┓
┃画像1 ┃文章 ┃
┣━━╋━━┫
┃画像2 ┃文章 ┃
┣━━╋━━┫
┃画像3 ┃文章 ┃
┣━━╋━━┫
┃画像4 ┃文章 ┃
┣━━╋━━┫
： ：
これをbox1とbox2の要素だけ使って構成したいということです。
img widthとheightを使って画像のサイズを全部同じにして
画像は<img src="">で設置して、文字をかぶせたい場合は
position:absolute とか使うのがいいんですかね…
385:Name_Not_Found
20/08/08 12:14:48 .net
>>382
すいません勘違いしてました。
386:Name_Not_Found
20/08/08 12:19:58 .net
>>376
いや、だから.textareaに
overflow:hidden;とかoverflow:scroll;とかoverflow:auto;
じゃダメなの？
あとoverflowとセットでこれも
height: 300px;
box-sizing: border-box;
387:Name_Not_Found
20/08/08 12:39:16 .net
>>384
俺なら疑似要素使う
388:Name_Not_Found
20/08/08 12:44:20 1I/1YXIK.net
>>386
なんだか気持ち悪くて、、、
見た目はそれでいいんですけどね
389:Name_Not_Found
20/08/08 12:50:44 .net
>>384
gridだと、こういうこと？
URLﾘﾝｸ(jsfiddle.net)
390:Name_Not_Found
20/08/08 12:52:31 .net
>>387
ありがとうございます。疑似要素ということはbefore after等だと思いますが、
これらを用いても結局はcss側で画像1,2,3,4...と設定してあげないといけないわけですよね。
html側でやるとしたらimgタグでサイズ調整してcssのグリッドレイアウトを乱さないように
調節してあげるしかない感じでしょうか。
imgタグで画像のサイズ指定してしまうと、スマホなどでグリッドレイアウトが変わったとたん
に
レイアウトが破綻してしまうんですよね…
391:Name_Not_Found
20/08/08 12:56:52 .net
>>389
ありがとうございます、そんな感じです。
ただこの場合、画像を（はみ出した部分は切れてもいいので）
要素のサイズ目いっぱいに表示しようとした場合に枠から飛び出して表示されて
しまいますよね。
背景画像に指定すれば要素からはみ出た部分は表示されないので、
そちらの方が有効かなと思った次第です。
わかりにくくすみません。
392:Name_Not_Found
20/08/08 13:00:14 .net
>>391
だったらobject-fitをcoverにすりゃいいだけじゃね？
393:Name_Not_Found
20/08/08 13:07:37.11 .net
>>392
それだ！
これで解決できそうですありがとうございます。
まだまだ自分の知らない便利なタグがあるんですね。
394:Name_Not_Found
20/08/08 13:14:22.70 .net
>>393
細かいとこだけどobject-fitはCSSのプロパティね
タグはHTMLの方なので、言い方はちゃんと区別した方がいいかも
395:Name_Not_Found
20/08/08 14:51:51.52 3upbSFFB.net
>>383
実装したかったものはマウスオーバーで拡大と同時にキャプションの色を変更なので…
396:Name_Not_Found
20/08/08 15:17:15.86 .net
>>395
質問変わってるじゃねぇか
397:Name_Not_Found
20/08/08 15:22:59.57 .net
こんなぐちゃぐちゃした質問に答えてやるおまえら
優しいな
398:Name_Not_Found
20/08/08 15:31:38.26 .net
>>395
つうか>>378の
これとか
figure.snip:hover figcaption,
figure.snip.hover figcaption
これの
figure.snip:hover img,
figure.snip.hover img
.hover（どっとhover）って何だよ
:hover（コロンhover）なら、その行は不要だろ
399:Name_Not_Found
20/08/08 16:25:33.66 .net
最近の異常な質問者、LINEの感覚で聞いてるよな・・
質問者としての態度が、ちょっと怖いわ
400:Name_Not_Found
20/08/08 16:57:27.65 .net
>>399
それな
注意されても殆ど改めないし、あまりにも酷いのでスルーしてもいいんだが
答えそのものじゃなく、もうなるべくヒントしか与えないようにしてる
401:Name_Not_Found
20/08/08 17:19:17 CX3G+LM1.net
すみません先ほどのコードを消してしまいました URLﾘﾝｸ(codepen.io)
キャプションの文字までマウスオーバー時に動くのですが固定できますでしょうか?
402:Name_Not_Found
20/08/08 17:23:23 CX3G+LM1.net
>>398
根本は画像の上にキャプションを置いてマウスホバー時にキャプションの色と画像を拡大するってことでしたが、どうしてもここで教わったコードを改変することができず簡単なサイトのものを自分で一から訂正して先ほど作りました。
403:Name_Not_Found
20/08/08 17:38:45 CX3G+LM1.net
初心者なので結合子と調べてもわかりません
サイトを駆け回って5時間くらいでようやく理解できましたし
できれば答えと解説付きで教えてもらえませんか？お願いします
404:Name_Not_Found
20/08/08 17:49:29 .net
>>401
動いてないが
405:Name_Not_Found
20/08/08 17:56:11 .net
>>403
理解できたんならええやん
406:Name_Not_Found
20/08/08 17:57:41 .net
相手する奴もスレ荒しということを意識して自重してくれ
407:Name_Not_Found
20/08/08 17:58:00 .net
>>403
質問だらけでどこの何の答えが欲しいのか分からん
408:Name_Not_Found
20/08/08 18:05:11 .net
し尿垂れ流しのような異常な質問を続けていることを、本人が気付いていない様子
409:Name_Not_Found
20/08/08 18:09:29 CX3G+LM1.net
>>404
多少左にずれてるように見えるのですが目の錯覚でしょうか…
410:Name_Not_Found
20/08/08 18:38:04 .net
object要素を使って音声ファイルを再生させる時、メディアプレーヤの
操作パネルみたいなのが出ますが、あれとボックスの間の黒バックを
消す（例えばバックを黒でなくbodyの背景色と一緒にするとか、ボックスを
環境によらずパネルのサイズと一致させるみたいな）方法ってあるでしょうか。
素人のサイトなんで黒バックが見えてもどうという事はないんですが、簡単に
消せるものなら消しておきたいです。
411:Name_Not_Found
20/08/08 19:57:34.32 .net
>>410
objectじゃなきゃダメ？
音声ファイルならaudioタグ使った方が、その悩みを解決できるんじゃない？
412:410
20/08/08 20:28:44 .net
>>411
ありがとうございます。
その線も考えたんですが、使ってるhtml/cssテンプレートが
xhtml 1.0 transitionalだし、そこにhtml5の要素を混ぜるのは
どうかという気がしたので。
特に問題も出ないし、素人のサイト程度ならそれでも許される
のであればそうしようと思います。
413:Name_Not_Found
20/08/08 20:53:19.08 t+132G7y.net
>>412
気にし過ぎな気もするけど
doctype変えちゃえばいいじゃん
びみょーーにボックスの解釈変わるとこあるけど
差して問題にもならんじゃろ
414:410
20/08/09 07:37:59.93 .net
>>413
ありがとうございます。
試したところ見た目も変わりなく、lintにかけてみてもhtml5仕様からの
逸脱は素人でも修正できる程度のようでした。>>411のアドバイス通り
audio要素を使ってプレーヤーの見た目も良くなりました。
これを機会にhtml5の勉強にも手を付けようと思います。
ありがとうございました。
415:Name_Not_Found
20/08/09 16:20:57.07 .net
>>403
答え教わっても成長できないよ
ヒントをもとに自分で理解して成長するんだよ
416:Name_Not_Found
20/08/09 18:46:59.51 m2h3L0xD.net
URLﾘﾝｸ(codepen.io) すみません左右flexで並べたのですが右側が機能しませんなぜでしょうか?
417:Name_Not_Found
20/08/09 19:56:34 6V1Y2vLk.net
失礼します。
雨が降る表現ってHTMLで作れますか？
つまり、そういうコードがあるのかなって話ですが
418:Name_Not_Found
20/08/09 20:04:22.93 .net
背景にアニメーションGIFを置けば終わり
419:Name_Not_Found
20/08/09 20:06:17.38 .net
js使わないと無理じゃね
URLﾘﾝｸ(daniellaharel.com)
420:Name_Not_Found
20/08/09 20:21:11.57 .net
>>417
HTMLのみじゃ無理
CSSのみで雨が降るアニメーションサンプル集 | ONE NOTES
URLﾘﾝｸ(1-notes.com)
421:Name_Not_Found
20/08/09 20:26:03.54 .net
へえCSSだけでできるんだなあ
422:Name_Not_Found
20/08/09 20:30:00.94 .net
>>416
機能してます。
423:Name_Not_Found
20/08/09 20:41:26.32 6V1Y2vLk.net
おお、ありがとうございます！
424:Name_Not_Found
20/08/09 22:00:29.92 .net
今は大抵のことはcssで出来るよなぁ
パワプロみたいなバッティングゲームをcssとhtmlのみで作ってるのを見たことがあるが驚いたわ
425:Name_Not_Found
20/08/09 22:03:03.93 .net
こないだCSSオンリーのマインスイーパ見かけた。
ほんとにJS一切なしだった。
426:Name_Not_Found
20/08/09 22:13:00.99 .net
そういうのってIEで動くの？
427:Name_Not_Found
20/08/09 22:15:09.93 .net
IE？何それ？食べられるの？
428:Name_Not_Found
20/08/10 12:07:33.08 JO6ePjR0.net
cssで要素名をつけない場合とつける場合、の使い分けってなんでしょうか？
div.classname{}
.classname{}
429:Name_Not_Found
20/08/10 12:09:58.98 JO6ePjR0.net
list-style:none;はformに指定してもいいのでしょうか？
form要素にもlistと同じcssを適用したい場合、このように書いていますが、、、
共通する部分があるということですが
form.search-form , ul{
list-style:none;margin:0;padding:var(--px16);
border:1px solid red;
}
430:Name_Not_Found
20/08/10 12:15:39.48 .net
>>428
精細度が変わる
div.classname{ color: blue; }
.classname{ color: red; }
ってすると
divようその時だけ青くなるっしょ
431:Name_Not_Found
20/08/10 12:22:47.20 .net
.alert {color:red;font-weight:bold;}
てすれば
赤く強調したいとこならどこでも使える（spanでもpでも）
432:Name_Not_Found
20/08/10 12:28:45.84 JO6ePjR0.net
優先度が違うってことですね
433:Name_Not_Found
20/08/10 12:49:40.66 JO6ePjR0.net
flexboxの解除について
URLﾘﾝｸ(teratail.com)
こちらのページの最初の画像にあるように、最下部だけ回り込まないようにしたいです。最下部にページ送りを設定したいからです
つまりfloatのclearみたいなものはないでしょうか？
434:Name_Not_Found
20/08/10 14:50:44 38PvAAmv.net
>>433
ページ送りのdivを作ってwidthを100%指定するとか
flexを設定した要素の外にページ送りを作るとか
435:Name_Not_Found
20/08/10 15:20:03.41 .net
要素セレクタって後付でここをこうしたいけどHTMLいじるのめんどくせってときにくらいしか使わないよね？
あと一括でimgにmax-width:100%付けたりaにtext-decoration:none付けたりするくらいで
436:Name_Not_Found
20/08/10 15:57:09 JO6ePjR0.net
>>434
うーん、別にしたほうがいいみたいですね
437:Name_Not_Found
20/08/10 22:39:28.70 .net
>>435
場合による
今の何でもかんでもクラスつければいいじゃんシステムでない場合はそこそこ使う
438:Name_Not_Found
20/08/11 00:21:47 euG0tmw+.net
基本的にflexboxは同じ役割をするグループをするものをキレイに並べるためのものだから
違う機能のパーツは含めないほうがいいかも
439:Name_Not_Found
20/08/11 14:41:54 .net
すみませんコロナの影響で大学の観光学部目指すのやめてpython学んでaiかweb系に行こうと思ってhtml勉強してるのですがshift2でやっても半角の真っ直ぐなダブルコーテーション打てないですかま機種のせいですか？ progateで練習してますがちゃんとしたダブルコーテーション直接打てないので登録していちいち変換してます。
440:Name_Not_Found
20/08/11 16:18:39.69 .net
>>439
全角と半角はわかってんの？
441:Name_Not_Found
20/08/11 16:33:49.46 .net
>>439
ダブルクォーテーションな
お前アホっぼいから無理だわ
442:Name_Not_Found
20/08/11 16:43:13.86 .net
>>441
チー牛、自己紹介乙
443:Name_Not_Found
20/08/11 16:47:04.21 .net
もしかして、スマホかタブレットでやってんのかな、、
444:Name_Not_Found
20/08/11 18:28:49.52 0yU6Gsnr.net
>>439
まず、全角と半角の区別を覚えよう
半角入力するときは、必ず半角モードにしてから入力
決して全角入力からの変換はしないように、癖をつけよう
で次に、コーデング用の書体をインストールしよう
Rictyがおすすめ
モニタで間違えずに読めることを重視した書体で、とても見やすい
書体幅も意図的に半角を全角の半分にしてあるので間違えにくい
最後に、コーデングに適したエディタを使おう
今はVSCodeが人気、他にもAtomやSublimeなど
機能は色々あるけど、入力補完、マルチカーソル、editorconfigを使えるものがおすすめ
エディタを変えたら、上記の書体に変更するのを忘れずに
445:Name_Not_Found
20/08/11 19:53:16.01 .net
ここHTML/CSSの質問スレなんだが
文字入力の質問とか馬鹿すぎて心配になるわ
大学で教わってきなさいな
446:Name_Not_Found
20/08/11 20:20:59.03 .net
つかshift2って何？
447:Name_Not_Found
20/08/12 00:37:10.26 .net
SHIFT押しながら2
448:Name_Not_Found
20/08/12 01:09:32.87 .net
そういうことか！
日本語キーボード使ってないから
すっかり忘れてた
449:Name_Not_Found
20/08/12 04:41:12 .net
>>445
どんな質問にもやさしく応えるのがこのスレの主旨なのだ
それに慣れた奴ほど意外に知らない基本事項って結構あるもんだぜ
450:Name_Not_Found
20/08/12 05:42:59 .net
>>449
違う
「HTML/CSSのどんな質問」が理解できない？
451:Name_Not_Found
20/08/12 10:22:36 ecoqwzIl.net
pタグの中にdivはokだったでしょうか？
wordpressのブロックエディタでは、１ブロックにpタグが自動的についてきます(´・ω・`)、、、
タグを独自にしたいのなら、ブロックをカスタマイズする必要がありそうです
452:Name_Not_Found
20/08/12 10:23:41 dcwvEswM.net
>>451
p要素の中にブロックが置かれると
そこでpは終わる
453:Name_Not_Found
20/08/12 11:06:28.19 ecoqwzIl.net
>>452
ブロック同士でもやはり駄目なんですよね。
自分でブロックをカスタムするしかないようです。
454:Name_Not_Found
20/08/12 22:38:46 GcIs3avQ.net
ちょっと聞きたいんだけど、HTMLのidって使いまわし禁止だよね？
455:Name_Not_Found
20/08/13 00:17:23 .net
>>440 >>444 ありがとうございました 英字キーボードでやってみます
456:Name_Not_Found
20/08/13 09:01:47.09 .net
英字キーボードと言ってるが大丈夫か・・・？
日本語配列でもUS配列でもどちらでもいいけど文字入力の状態が日本語入力のままではだめというのは分かってるのだろうか
457:Name_Not_Found
20/08/13 09:05:17.91 .net
>>454
1つのページ内でid名は1つだけ、な。
458:Name_Not_Found
20/08/13 10:00:44.50 nQ0LwsCC.net
>>456
スマホからタブレットの
バーチャルキーボードのことではなかろうか
459:Name_Not_Found
20/08/13 19:11:02.14 pTXEjxK1.net
>>457
やっぱそうだよね、なんでページ内に同じid名付けてるのか・・・HTMLの素人が作ったのかな・・・
460:Name_Not_Found
20/08/13 19:40:06.78 .net
まれによくある
461:Name_Not_Found
20/08/14 09:53:24.68 .net
クッソ長いソースコードで、複数人の手が加わってそうなったの見たことある。
462:Name_Not_Found
20/08/14 23:57:11 .net
怪しげなサイトから落とした圧縮ファイルの中にあったHTMLファイルをなんとなくバイナリエディタで開いたら
末尾の「</html> 0x0D 0x0A」の後に「PK 0x03 0x04 …」で始まるzipファイルらしきバイナリがくっついてたんだけどこれなんぞ？
HTMLコードの中からこのzipファイルを読み込んで何かできるHTML仕様があるの？
463:462
20/08/15 00:10:14 .net
その怪しげな部分だけ切り出してzipファイルとして保存してから解凍したら、
普通のテキストファイルとインターネットショートカットファイルが出てきた。
464:Name_Not_Found
20/08/15 07:48:50.18 .net
怪しげなバイナリとHTMLの仕様になんの関連があるの？
WHATWGの仕様でも読んできたら？
465:Name_Not_Found
20/08/15 08:10:37.59 .net
ここはHTMLの仕様の話しかしてない場所だからな
スレタイをみるな
466:Name_Not_Found
20/08/15 08:30:51.44 .net
知らないなら無理して書き込まなくていいのにw
467:Name_Not_Found
20/08/15 19:16:18.37 JrEtzpe0.net
URLﾘﾝｸ(ideone.com)
htmlタグでこのような中央寄せのボックスを作りたいです
しかし、inner2を作らずにinnerにpaddingやmarginを設定して余白を設定すると、1000px以上にひろがってしまいます。
そこでinnner2が必要なわけですが、outerとinnerのみでできないでしょうか？
468:Name_Not_Found
20/08/15 19:18:21.96 JrEtzpe0.net
URLﾘﾝｸ(i.imgur.com)
画像どす
469:Name_Not_Found
20/08/15 20:00:48.09 .net
>>467
URLﾘﾝｸ(jsfiddle.net)
CSSのbox-sizingについての知識が足りてないだけじゃね？
470:Name_Not_Found
20/08/15 20:07:17.15 .net
>>467
box-sizing - CSS: カスケーディングスタイルシート | MDN
URLﾘﾝｸ(developer.mozilla.org)
471:Name_Not_Found
20/08/15 20:22:16.48 JrEtzpe0.net
↑いえ、これだと1000px以上に広がってしまいます。
autoで中央寄せにしているボックスは、1000px以上にはしたくないのです。
472:Name_Not_Found
20/08/15 21:05:09.09 .net
>>471
広がってないが
URLﾘﾝｸ(i.imgur.com)
473:Name_Not_Found
20/08/15 21:18:40 JrEtzpe0.net
いえ、ブルーのセクションを広げたくないのです。
ここを1000px固定にしたいです。
474:Name_Not_Found
20/08/15 21:26:35.48 .net
>>473
いや、だからブルーのinnerは1000px固定になってるやん
475:Name_Not_Found
20/08/15 21:36:32.66 JrEtzpe0.net
見た目上は広がってしまっていますよね
476:Name_Not_Found
20/08/15 21:40:51.35 .net
>>473
青いとこはwidth+padding+border=1000pxで固定
黄色いとこはinnerのmarginの左右がautoでinnerをouter内で左右中央寄せ
見た目上もinner2を入れた状態と同じ挙動だよ
URLﾘﾝｸ(jsfiddle.net)
477:Name_Not_Found
20/08/15 22:06:26 .net
>>475
これ、値がデカいから分かりにくいんだと思うけど
1000pxを300pxぐらいで確認してみれば？
ちゃんと300px固定になるから
478:Name_Not_Found
20/08/15 23:34:41.01 mWUGbd3m.net
URLﾘﾝｸ(jsfiddle.net) 小さなキャプションを右上左上に追加したいのですが、<figcaption></figcaption>
にクラス名をつけられません この場合<span>タグなどで囲んで<span class>でクラス指定するのが正解ですか?
479:Name_Not_Found
20/08/15 23:47:32 .net
つけられるが
480:Name_Not_Found
20/08/15 23:58:55 mWUGbd3m.net
>>479
教えていただきありがとうございます <figcaption class=クラス名></figcaption>でcss指定できますでしょうか?
481:Name_Not_Found
20/08/16 00:03:24 gJ1wE+4l.net
URLﾘﾝｸ(www.it-swarm.dev)
このサイトさんにも解説してました見落としで、すみません。
figcaptionの代わりに<span>でも代用可能なようですが、画像=figcaptionになるのですかね。
482:Name_Not_Found
20/08/16 00:33:51.90 .net
figureとfigcaptionに限らず、大抵の場合、タグ自体に意味があるわけだが
代用しなくていいものを別のもので代用して、見た目が意図通りになってれば何でもいい
というのであれば、好きなようにすればいい
<figure>: 任意のキャプション付きの図要素 - HTML: HyperText Markup Language | MDN
URLﾘﾝｸ(developer.mozilla.org)
<figcaption>: 図キャプション要素 - HTML: HyperText Markup Language | MDN
URLﾘﾝｸ(developer.mozilla.org)
captionの意味・使い方・読み方 | Weblio英和辞書
URLﾘﾝｸ(ejje.weblio.jp)
483:Name_Not_Found
20/08/16 05:10:33.37 .net
>>462
何かを仕込もうとしてるのかも
そのファイルの拡張子が、.html で、
ダブルクリックすると、ブラウザが起動して、
その時に、そのバイナリが動くのかも
484:Name_Not_Found
20/08/16 05:55:00.30 vCCvyY8m.net
>>474
border-boxはpaddingもwidth煮含めるんですね
あどうでｓもる
485:Name_Not_Found
20/08/16 13:16:28.75 avvKjdbG.net
>>482
参考になりました。サイトまで教えてくださりありがとうございます。
486:Name_Not_Found
20/08/16 19:41:39.77 vCCvyY8m.net
wordpressでcssを切り替えたいのですが、トップページとカテゴリ一覧ページで切り替えることが出来ます。
is_category()関数を使用することで判定出来ます。
しかし、これはcssの別ファイルを用意するしかないでしょうか？
cssファイルの一部のみをis_category用に適用されると言ったことは出来ないでしょうか？
487:Name_Not_Found
20/08/16 19:46:00.63 vCCvyY8m.net
中身がある場合はスタイル適用、ない場合はスタイルを適用しない という設定は可能でしょうか？
488:Name_Not_Found
20/08/16 20:17:37 vCCvyY8m.net
empty効かないですね なぜか
489:Name_Not_Found
20/08/16 20:30:49 vCCvyY8m.net
多分、改行があると駄目みたいですね
490:Name_Not_Found
20/08/16 23:28:19 .net
これは酷い
491:Name_Not_Found
20/08/17 02:20:57.40 .net
普通にbodyにID付けときゃええやん思たけど
これってCSS設計的には古いの？
492:Name_Not_Found
20/08/17 02:23:10.26 .net
bodyにはIDをつけるなっていう古からの教えが
493:Name_Not_Found
20/08/17 02:54:07.66 .net
bodyにclassつけるのは珍しくない気が
494:Name_Not_Found
20/08/17 04:15:55.33 .net
ボディにクラスとかどういう要素を加えるんだ？
495:Name_Not_Found
20/08/17 05:24:45.64 .net
下層ページにunderとか
496:Name_Not_Found
20/08/17 08:13:41.27 pPLgnHQg.net
自分はhtml 要素の方によくやるな
クラスつけるの
497:Name_Not_Found
20/08/17 14:21:57.08 6UBKFdBO.net
URLﾘﾝｸ(codepen.io) すみません一番下のキャプションの末尾を…にしたいのですが、text-overflow: ellipsis; /* 末尾に「…」を付加する */
「-webkit-line-clamp: 何行まで表示するか」2行で省略したい場合は、「-webkit-line-clamp: 2」 どちらの方法でもダメでした、原因がわかりません。
498:Name_Not_Found
20/08/17 16:07:48.46 .net
質問する前にmdn読め
499:Name_Not_Found
20/08/17 20:34:34.02 Yy9pNfcb.net
>>498
読んでみたのですがどうしても分かりません…
500:Name_Not_Found
20/08/17 20:53:53.85 .net
どのページを読んでわからなかったの？
501:Name_Not_Found
20/08/17 21:03:27.11 .net
読めば簡単に分かるのに
実は読んでない疑惑
502:Name_Not_Found
20/08/17 21:24:20.43 Yy9pNfcb.net
>>500
text-overflow: ellipsis; について読みました…
まだまだ素人に毛が生えたようなものなので、どこが間違っているのか分かりません…
教えてくださいお願いします。
503:Name_Not_Found
20/08/17 21:32:31.03 .net
>>502
特に難しい説明はないはずだから
1. たぶんどこかで誤字してるか
2. 記号の類が過不足してるか
3. セレクタが間違ってるか
のどれかだよ
1と2はコード眺めてても見つからないからvalidatorにかけよう
linterのあるエディタを使うこともお勧めする
3はとりあえず
背景色とか罫線とかのスタイルを追加してみて、それが適用されるなら問題ない
されないなら間違ってる
504:Name_Not_Found
20/08/17 22:28:39.99 .net
こっちが想像してるページと同じかどうか怪しいが
本当に隅々まで読んで分からないなら
もう諦めた方がいいレベルの話だな
505:Name_Not_Found
20/08/18 10:15:07.51 FvIbKlnm.net
wordpressでコードを折りたたみたいのですが、アドオンを使わずに折りたたむ事はできるでしょうか？
506:Name_Not_Found
20/08/18 11:38:31.41 FvIbKlnm.net
↑上に関連してですが、wordpressなどでコードを表示するアドオンがありますが、ここにスクロールを設定するのが普通なんでしょうか？
507:Name_Not_Found
20/08/18 12:31:01.42 .net
質問する前にスレタイ読め
508:Name_Not_Found
20/08/18 12:41:33.96 .net
>>505-506
WordPress(ワードプレス)でWebProg 質疑応答スレ 01
ｽﾚﾘﾝｸ(php板)
509:Name_Not_Found
20/08/20 18:34:09 .net
タブレットの縦長、横長、スマホの横はpcの縮小版、スマホの縦はレスポンシブで表示させたい場合、
ブレイクポイントはどのあたりに設定すれば良いでしょうか？
510:Name_Not_Found
20/08/20 21:47:26.56 .net
その辺は現在色々出てる各フレームワークを見れば大体わかるんじゃないかな？
511:Name_Not_Found
20/08/20 22:18:09.15 .net
ちゃんとCSSフレームワークって言ってあげないと無駄にAngularとかのコード完全解析しそうな予感
512:Name_Not_Found
20/08/20 22:51:21.67 .net
786px以上でいけんちゃん
513:Name_Not_Found
20/08/20 23:50:49.19 .net
>>510-511
cssフレームワークは使わず、
自分でcssを書こうと思っています。
>>512
ありがとうございます。
そのあたりで試行錯誤したいと思います。
514:Name_Not_Found
20/08/21 03:21:29.59 .net
>>513
フレームワーク使わなくてもいいから平均値とかわからないなら
一度それらが使ってる数値を見て参考にしとけばってこと
515:Name_Not_Found
20/08/21 07:35:01.18 .net
role属性ってつけると、ブラウザが解釈して何かUIなどが変わったりするの？
検索エンジンのための意味付けのようなもの？
516:Name_Not_Found
20/08/21 10:34:02 .net
>>515
WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN
URLﾘﾝｸ(developer.mozilla.org)
> WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ API（スクリーンリーダーはここから情報を取得する）によって提供される情報を除いて
> それらはウェブページに何の影響も与えないという点です。
> WAI-ARIA はウェブページの構造や DOM に影響を与えませんが、 CSS の要素選択で利用することが可能です。
517:Name_Not_Found
20/08/21 16:49:37.03 .net
>>516
レスどうも、WAI-ARIA見てみました(全然わからん)
divやspanなど、そのものの意味が無いものに対して付加するのが始まりって感じ？
<header role="banner">とか
<nav role="navigation">とかソース見るとあるけど、「ある」と「無い」でどこに違いが出るの？
cssの要素選択ができるということはclassみたいな扱いができるってことかな。
header.bannerみたいな。
たくさんできた仕様で現在ではあまり使われていないものなのかな。
518:Name_Not_Found
20/08/21 17:43:44 .net
>>517
WAI-ARIAは「Web Accessibility Initiative - Accessible Rich Internet Applications」の略
Webアクセシビリティとかで調べてみるといい
あとは、こういうのとか
WAI-ARIAを活用したフロントエンド実装 - role属性、aria属性の基礎知識 | CodeGrid
URLﾘﾝｸ(app.codegrid.net)
CSSの要素選択は、その例だとセレクタはheader[role="banner"]
519:Name_Not_Found
20/08/21 19:17:33.34 .net
アクセシビリティを外観にまつわる機能として判断してるようじゃ理解できないだろうな
むしろ目が見えない人などのために存在してるんだから
520:Name_Not_Found
20/08/21 23:18:35 .net
アクセシビリティといえば
日系企業ランキングを思い出す…
あの惨劇はもう10年以上前だったろうか
521:Name_Not_Found
20/08/22 12:15:02 .net
>>509
Bootstrap のブレイクポイントの変数定義では、
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
522:Name_Not_Found
20/08/22 15:49:36 .net
>>521
今はもっと少なくても良さそうなもんだ
523:Name_Not_Found
20/08/22 16:07:41.99 UFsz4By5.net
URLﾘﾝｸ(www.hook-net.jp)
こちらのサイトのように画像と文字の境界線をなくすためにはjsが必要でしょうか?
524:Name_Not_Found
20/08/22 16:20:43.37 .net
ちょっと何言ってるか分かんない
525:Name_Not_Found
20/08/22 17:47:35 UFsz4By5.net
>>524
すみません画像と文字を一つのボックスに横並べして画像のふちを白でぼかしたいんですが
その場合グラデーションを使えばよいのでしようか？
526:Name_Not_Found
20/08/22 17:59:50.30 .net
手っ取り早いのが縁を白でぼかした画像を作成すること
527:Name_Not_Found
20/08/22 18:04:22.71 .net
だよな。レイアウトはもちろんテーブルタグだ
528:Name_Not_Found
20/08/22 19:46:47 .net
>>520
惨劇ってなんすか？
529:Name_Not_Found
20/08/22 21:30:44 UFsz4By5.net
URLﾘﾝｸ(codepen.io)
グラデーションをつけて片側をすけさせることまでできたのですが同時に画像をぼやけさせることができません。
URLﾘﾝｸ(cruw.co.jp) この場合+を使うと実装できますか?
530:Name_Not_Found
20/08/22 21:40:24 UFsz4By5.net
画像にfilter: blur(5px);を加えると境界線ができグラデーションの意味がなくなってしまいます
グラデーションと画像ぼかしを境界線が見えない形で実装できないのでしょうか…
531:Name_Not_Found
20/08/22 21:41:44 .net
またこのひとか
532:Name_Not_Found
20/08/22 23:00:59 .net
上に透明なdiv重ねてそのdivにbackdropfilter blurかけりゃいいじゃん
533:Name_Not_Found
20/08/22 23:53:26.90 0lfiVAzr.net
すみません、htmlとjava初心者です。
こちらの質問の
URLﾘﾝｸ(teratail.com)
背景の赤い枠を下まで伸ばすにはどうしたらいいか教えてください
534:Name_Not_Found
20/08/23 00:08:29 wdKbLCbE.net
>>533
100vhでどうよ
535:Name_Not_Found
20/08/23 00:10:12 .net
まったく関係ないいんだけど
529を見て知りたかったことあったので
URLﾘﾝｸ(cruw.co.jp)
このページみたいに
画像が出てから色が出てシュッとなるやつって
jQだと思うんだけど説明してるサイトとかってありますか？
これのネーミングなんて言えばいいのかわからなくて
ググってもイメージ通りものにたどり着かなくて
536:Name_Not_Found
20/08/23 00:11:13 .net
↑
画像が先に出てからじゃないや
色がでて画像がでてくる
537:Name_Not_Found
20/08/23 00:13:05.42 1JN6CSRO.net
>>534
.item {
display: inline-block;
width: 30%;
height: 100vh;
margin: 10px;
font-size: 20px;
background: rgba(255, 0, 0, 0.4);
}
としてみたのですが変化なしですね・・
538:Name_Not_Found
20/08/23 00:50:36.54 .net
intersectionobserberで擬似要素と画像をコントロールしとんちゃうか
539:Name_Not_Found
20/08/23 01:56:32.50 .net
さよか
540:Name_Not_Found
20/08/23 05:04:32.52 .net
>>528
審査員のひとりに
富士通のアクセシビリティに一家言ある人がいて
数年後に控えたJIS X 8341-3を
勝手に前倒しで審査項目に導入したので
ほとんどのサイトのランクが
前年と比べて100、200以上変動した
上がったところはいいけど
下がったところは代理店も制作会社もそれなりに
上からお叱りやペナを受けることになって非難轟々
その年を最後に日経企業サイトランキングは消滅した
という昔話です
541:Name_Not_Found
20/08/23 07:45:31.76 .net
この世界じゃよくあることだ
すぐ収まるのもこの世界らしい
542:Name_Not_Found
20/08/23 09:36:05 obkittuk.net
Web系に転職したく勉強をしています
モバイル用にハンバーガーメニューを設置したいのですが、
HTMLにPC用とモバイル用で別のnavを2つ設置してメディアクエリで
それらの表示を切り替えるのはありでしょうか
それとも重複的な記述はHTML的にはよろしくないのでしょうか
543:Name_Not_Found
20/08/23 10:00:48 .net
HTMLとしてはわりとどうでもいいというか
そこまで気にするもんでもないと思うが
運用する上で同じものが二つあるのは厄介だな
片方忘れられたりするリスクがある
544:Name_Not_Found
20/08/23 11:59:10.13 .net
サーバサイドで書き換え