20/08/02 22:48:20.29 wVx5940i.net
URLﾘﾝｸ(yuruyururoad.jp) のようなものはあるのですが自作することは難しいのでしょうか?
255:Name_Not_Found
20/08/02 23:06:15.94 wVx5940i.net
URLﾘﾝｸ(on-ze.com) このコードにURLﾘﾝｸ(gray-code.com) で紹介しているoverflow: scroll; を追加できれば再現可能でしょうか?
256:Name_Not_Found
20/08/02 23:57:41.29 .net
>>244
BEM（MindBEMding）とかだろ
257:Name_Not_Found
20/08/03 00:35:12.71 .net
>>253-255
自分で色々考えて作ってみて、ここまでやってみたけど、どうしても上手く行かない
って状態になってから質問して下さい。
質問が雑過ぎて答えようが無い上に、思いついた端から質問を連投されても困ります。
258:Name_Not_Found
20/08/03 00:54:24.46 lPDNPAmV.net
>>257
PHPで文字を出力することは出来るのですがCSSと合わせて縦スクロールを追加する事が出来ません…
明日コードを載せてみます… 連投してすみません
259:Name_Not_Found
20/08/03 03:49:26.47 D4j/4m1r.net
spanとdivの違いってなんですか？
cssでブロック要素の切り替えは出来るし、使い分ける意味があまり、、、
cssが読まれなかった場合でも表示が崩れないように心がけるべきでしょうか
260:Name_Not_Found
20/08/03 04:07:15.42 .net
逆に聞きたいけどspanをcssでブロック要素にする意味は？
元々ブロック要素のdivを最初から使えばいいじゃない
その理由が適切だと説明できるなら好きなようにすればいいんじゃない？
あとさんざんこのスレでも出てるけどアクセシビリティを無視するのならいくらでも好きなように書けばいいよ
261:Name_Not_Found
20/08/03 06:47:09 .net
基本的にspanは文章内とかにインラインでしか使わないわな
汎用コンテナーとしてのdivがあるにも関わらず、spanをわざわざブロック要素にして使うとか
むしろ恥ずかしくて出来ない
262:Name_Not_Found
20/08/03 09:03:16.02 MowOAdyO.net
JavascriptでRSSを取得してCSSで外側を装飾する場合
HTMLでコンテンツを作ってそれをjsで動的にしてCSSで装飾するという認識でいいのでしょうか？
コードを調べた際、PHPとCSSで完結してるものがあり、そこにCSSで手を入れるというのは素人には難しいのかなと思いました。
263:Name_Not_Found
20/08/03 09:04:29.72 MowOAdyO.net
すみませんCSSで装飾を付け加えるでした。
264:Name_Not_Found
20/08/03 14:49:36.44 .net
javascriptだろうがphpだろうが、HTMLとして出力されたものに対して
CSSでデザインをいじる事に、難易度の違いは無い
265:Name_Not_Found
20/08/03 15:56:30.71 .net
めちゃくちゃ初歩的な質問かもしれませんが、Webサイトの模写をする際の重要な点としてpxは正確に合わせると初学者用の動画で説明されてたのですがpxを合わせるには地道に調整して合わせていくしかないのでしょうか？
もしそうだとしたら経験者の方は文字や幅の大きさを見て大体これは何pxだなというふうに判断しているのでしょうか？
266:Name_Not_Found
20/08/03 16:01:34.01 sTKeLVkR.net
すみませんageになってませんでした
267:Name_Not_Found
20/08/03 16:12:32.87 .net
開発者ツールとかで模写元のソースを確認しちゃ駄目なの？
268:Name_Not_Found
20/08/03 16:29:28 sTKeLVkR.net
>>267
答えは極力見ずに模写をして、終わった後に答え合わせをしましょうとのことでした
それで実際に模写コーディングをしてみよう思ったもののpxの指定で詰まってしまいました
動画とかだと当たり前のようにここは何pxにしましょうと教えてくれますが実際に自分でコーディングするとなると値の見極めがすごく難しいなと思ってしまいました
269:Name_Not_Found
20/08/03 16:55:27.07 .net
答えは見ずに、ってことは開発者ツール以外のプラグイン等も使うなってことだろうから
目視で比較するしかないかもね。模写元とウィンドウを2つ並べるとかして。
でもまぁ、模写元が全てpx単位で作られてるならともかく、他の単位が混在してたりすると
完全一致は無理だから、多少の誤差は許容される「正確に合わせる」だと思うけどね。
ただ、多少の誤差がレイアウト全体に大きく影響する場合もあるから、ある程度の正確さは
求められるだろうけど。
270:Name_Not_Found
20/08/03 18:26:28.51 .net
どっちかというと
既存サイトのキャプチャー画像からコーディングしてみる方が
訓練になりそうじゃね
271:Name_Not_Found
20/08/03 18:27:54.25 .net
セレクタで 内容が◯◯の場合 というのはありあますか？
ミス防止のためユーザスタイルシートで特定の単語だけ強調したいのですが、他人の作ったシステムなのでクラスなどを与えることが出来なくて困ってます
ご存じの方いらっしゃいましたらご教示お願い致します
272:Name_Not_Found
20/08/03 18:47:16.83 .net
cssのセレクタだけじゃ条件分岐は無理
273:Name_Not_Found
20/08/03 18:49:37.13 .net
>>272
有難うございます
別の方法を模索します
274:Name_Not_Found
20/08/03 18:50:22.05 .net
疑似クラス使えば、ある程度は条件分岐みたいなことは出来るけど
内容で条件分けは無理だね
275:Name_Not_Found
20/08/03 18:51:43.63 D4j/4m1r.net
親要素のボックスに以下のflexを設定しています
display:flex;justify-content:space-between;flex-wrap:wrap;
しかし、子要素がなぜか縦にストレッチしてしまいます
サイドバーの高さに合わせてストレッチされるようです
space-betweenを使いつつ、縦ストレッチを解除することは出来るでしょうか
ちなみにjustify-content:flex-start;を指定しても、ストレッチされることに変化はなかったです
276:Name_Not_Found
20/08/03 18:53:08.66 .net
>>272
あれ？
条件分岐は無理とありますが、
p[class*="foo"]
p要素のclass属性値がfooの場合、などは
可能なので「contentの値が◯◯の場合」は条件分岐というようなものではないような
そのセレクタの有無はわからないですが
まあなさそうですが
277:Name_Not_Found
20/08/03 19:07:15.40 .net
>>276
後半何言ってるか分からんが、とにかくclass指定できない>>271みたいなケースで
条件分岐は無理って話
278:Name_Not_Found
20/08/03 19:11:37.82 .net
>>275
align-itemsで検索
279:Name_Not_Found
20/08/03 19:47:48 D4j/4m1r.net
>>278
ありがとう
align-contentでできましたです
280:Name_Not_Found
20/08/03 20:05:08 .net
>>279
そっちを忘れてたｗ
281:Name_Not_Found
20/08/03 20:57:22 D4j/4m1r.net
display:flex;で並べた子要素なんですが、子要素同士の縦のマージンはどうやって指定すればいいでしょうか？子要素にmargin-bottomでもいいんですが、何かやりようがありますか？
URLﾘﾝｸ(i.imgur.com)
282:Name_Not_Found
20/08/03 21:47:42.77 .net
align-contentでspace-betweenやspace-aroundにする以外は
margin-bottomでいいんじゃない？
283:Name_Not_Found
20/08/04 05:28:32.06 CEo59waj.net
aligin contentは親要素の縦幅を設定していないと使えないですよね
横は幅固定なのでいいんですが、縦の場合は幅可変ですよね
284:Name_Not_Found
20/08/04 10:54:57.39 CEo59waj.net
URLﾘﾝｸ(i.imgur.com)
こんな感じにmargin-bottomを指定しましたが、最下部まで広げてしまうのが余計なのですが、どうしたらいいでしょうか？
align-content:space-between;だと、余白の広さがコンテナの縦幅によって変化します
常に１０ｐｘ程度にしたいです
285:Name_Not_Found
20/08/04 11:26:28.39 .net
>>284
上マージンにして
nthで最初の行だけゼロにするのはどうよ
286:Name_Not_Found
20/08/04 11:32:08.21 .net
全体の幅が固定ならいいけど、flexだと横幅が変わると列数が変わるから
最初の行だけって指定は難しくね？
287:Name_Not_Found
20/08/04 12:08:10.21 fVy2EeC4.net
すみませんフッターをレスポンシブにしたいのですが幅を狭めてスマホで見るとフッターメニューが見切れて消えてしまいます。縦並びで実装したいのですがアドバイスお願いします。
288:Name_Not_Found
20/08/04 12:08:36.78 fVy2EeC4.net
URLﾘﾝｸ(jsfiddle.net)
289:Name_Not_Found
20/08/04 12:13:58.03 CEo59waj.net
子要素の幅は固定です
親要素も固定です
ですから、１行に入る子の数は決まっています
290:Name_Not_Found
20/08/04 12:26:32.76 CEo59waj.net
URLﾘﾝｸ(www.dolceproof.jp)
最後の行のみだと どういう指定にしたらいいんでしょうか
１行にはいるのは５つの子です
291:Name_Not_Found
20/08/04 12:32:38.85 CEo59waj.net
ちなみに行の数はきまっていないです
列の数は決まっています
しかし、レスポンシブにするなら後々問題は出るでしょうね
292:Name_Not_Found
20/08/04 12:41:22.66 .net
連投すんなや
293:Name_Not_Found
20/08/04 12:43:46.00 .net
メディアクエリでスマホ用にCSS書け
294:Name_Not_Found
20/08/04 12:44:32.86 CEo59waj.net
nth-last-child(-n+5)
でいけました
295:Name_Not_Found
20/08/04 13:09:47.58 .net
>>294
お前、思いついた端から質問連投するなって言われてただろ
ここはLINEじゃねぇんだよ
質問は1レスにまとめろや
296:Name_Not_Found
20/08/04 14:03:04.45 .net
ちなんでないし
297:Name_Not_Found
20/08/04 14:10:19.17 7G0+geFq.net
URLﾘﾝｸ(www.sample.cfbx.jp)
すみませんフッターをスマホサイズにした際どうしても縦並びにできませんアドバイスくださいお願いします。
298:Name_Not_Found
20/08/04 14:16:02.14 .net
>>297はマルチ
299:Name_Not_Found
20/08/04 16:06:45.02 CEo59waj.net
flexboxで最後の列のみを取得する場合はリストを追加しないとだめなんでしょうか
<li><div>item</div><div>item</div></li>
<li><div>item</div><div>item</div></li>
300:Name_Not_Found
20/08/04 16:21:48.79 .net
取得って何だ
301:Name_Not_Found
20/08/04 21:47:17 .net
レスポンシブ対応なら、Bootstrap を使えば？
302:Name_Not_Found
20/08/05 11:13:49.80 YMPhsBWl.net
>>300
取得というか、cssの対象にしたいんです
listにしたらまあ出来ましたが、これでいいんでしょうか？
303:Name_Not_Found
20/08/05 11:20:16.07 YMPhsBWl.net
windows10で絶対パスが読み込めないのですが、なぜでしょうか
C:\Users\name\Desktop\img\file.JPG
htmlファイル配下において以下のようにして読み込むことは可能でしたから、バックスラッシュの問題ではないようです。
img\file.JPG
304:Name_Not_Found
20/08/05 12:11:09.58 .net
windows10関係無いだろ
それだけキーワードが分かってるなら「html ローカル 絶対パス」とかで
検索してから質問しろ
305:Name_Not_Found
20/08/05 12:18:27.75 .net
>>302
classとか疑似クラス使わずにliタグ使う意味は？
306:Name_Not_Found
20/08/05 12:25:19.37 YMPhsBWl.net
>>305
擬似クラスというのはnth-last-childのことでしょうか？
最後の列を取得する場合、flexboxの場合はそれぞれがインライン要素ですから、最後の列だけ取得するというのは難しいかなと思います
しかし、リストはブロックですから、最後の列だけ取得するのは容易でした
インライン要素の場合nth-last-child(3)とすることで最後から３つまでを取得することが出来ますが、列に入る要素の数が変わると使えませんよね
307:Name_Not_Found
20/08/05 13:54:10.49 .net
また訳の分からんことを…。
li使ったら出来たってのも意味不明だし。
308:Name_Not_Found
20/08/05 14:00:44.35 YMPhsBWl.net
そうですね、たしかに意味不明でした
flexboxの場合は先頭から順番に数えればいいだけですね
要素が１列に４つ、行が４行目までだった場合は13個目を指定するだけですね
309:Name_Not_Found
20/08/05 14:05:17.74 .net
>>306
flexコンテナの子要素のflexアイテムはインライン要素では無いし、>>299のliで囲ってるdivもブロック要素だが
インライン要素だとかブロック要素だとか言うなら、ブロック要素であるdivを使わず、リスト項目では無いものに
liタグを使う意味が無いし、ulやolを使わずli単独で使うものではない
あと、nth-last-child(3)は最後から3番目を指定するだけで3つまでを指定するものじゃないから
> 列に入る要素の数が変わると使えませんよね
viewport幅によって最終行のflexアイテムの数が変わる場合の指定方法の話をしてるんだろうが
そんなもんnth-last-child（あるいはnth-last-of-type）とメディアクエリ使えば、どうとでもなる
310:Name_Not_Found
20/08/05 17:08:02.93 .net
もう本人が納得してるなら、それでいいんじゃない？
なんか相手にするだけ時間の無駄になりそうｗ
311:Name_Not_Found
20/08/06 15:21:42.15 e5zc34N+.net
画像の下に説明文があり説明文にマウスが乗った際 opacityをかけるほうほうはありますでしょうか？
312:Name_Not_Found
20/08/06 15:52:19.18 e5zc34N+.net
すみませんURLﾘﾝｸ(jsfiddle.net) このコンテンツについて質問なのですが何故URLをつけた説明のみした線が表示されるのでしょうか？
画像にマウスが乗った際も説明文にマウスオーバー変化をつけたいのですが text-descripcion がききません
解決策を教えてもらえないでしょうか？
313:Name_Not_Found
20/08/06 16:38:58 wOuRb+I6.net
>>311
もう自分で答え書いちゃってるよそれ
マウスが乗ったとき（hover）
画像のopacityを0にすればいい
CSSで
314:Name_Not_Found
20/08/06 16:40:50 wOuRb+I6.net
そんでtext-descriptionてなんぞ？
315:Name_Not_Found
20/08/06 16:47:40.87 +/4NC5fx.net
>>314
説明文のした線を消して画像またはテキストにマウスが乗った際にtext-descripcion underlineでした線と文字色変更をしたいのですが。
上記のものだとマウスが乗る前にした線がでてしまい画像マウスオーバーしてもした線と文字色変更ができません。
アドバイスください、お願いします。
316:Name_Not_Found
20/08/06 16:58:36.18 wOuRb+I6.net
text-decorationかな？
317:Name_Not_Found
20/08/06 17:41:55.13 .net
>>316
俺もそうだと思うわ
>>315
文字列をリンクにするとブラウザが頼んでもねーのに勝手に下線を付けるんだわ。他にもブラウザは勝手に余計なことばかりする。
特にサファリとかいう糞の塊
318:Name_Not_Found
20/08/06 17:55:29.33 .net
a要素の中にp要素入れてるからだろ
a要素に入れていいのはテa要素以外のインライン要素とテキストだけ
<a><p></p></a>じゃなくて<p><a></a><p>にしろ
319:Name_Not_Found
20/08/06 20:20:07.99 x/6SsYNW.net
>>318
一つ問題が解決しました。ありがとうございます。画像にマウスが乗った際、文字のリンクの色を変更できないでしょうか？
320:Name_Not_Found
20/08/06 20:31:58.66 .net
できるが、それ以前に無駄なp要素とか不要なもの多過ぎ
解決した部分を織り込んで、汚いソースを整理してこい
話はそれからだ
321:Name_Not_Found
20/08/06 20:40:22.30 x/6SsYNW.net
した線の色だけはマウスオーバーで変更できるのですが文字色だけ画像をマウスオーバーしても文字色が変化しません…
322:Name_Not_Found
20/08/06 20:41:53.78 x/6SsYNW.net
wordpressでいらない要素を削除したんですが強制的についてきて…どうすればよいのでしょうか。
323:Name_Not_Found
20/08/06 20:42:43.26 .net
これだけ「した線」を連呼するのって何かポリシーでもあるのかな
324:Name_Not_Found
20/08/06 20:53:39.42 .net
>>321
wordpressのどこで編集してるのか知らんが、wpautopで検索して自動整形を無効化してこい
その上でjfiddleにコピペしたまんまじゃなくて、不要なものを削除して整理してから書き込めよ
325:Name_Not_Found
20/08/06 21:24:18 x/6SsYNW.net
URLﾘﾝｸ(jsfiddle.net) 不要なタグを消してきました、アドバイスお願いします。
326:Name_Not_Found
20/08/06 21:30:38 .net
何も書かれてない空のa要素は何なんだ
327:Name_Not_Found
20/08/06 21:47:50.38 .net
>>325
ヒント
兄要素:hover <結合子> 弟要素
328:Name_Not_Found
20/08/06 22:04:49.19 x/6SsYNW.net
flex-child:hover ＋p ですかね
329:Name_Not_Found
20/08/06 22:08:21.81 .net
聞く前にやってみればいいじゃん
330:Name_Not_Found
20/08/06 22:26:28 iIEnBw9v.net
難しくてわかりません…
331:Name_Not_Found
20/08/06 22:31:37 .net
ヒント以前に検索とかしてみたのかね？
「css hover 別の要素」でググれば、すぐ分かるだろ
332:Name_Not_Found
20/08/06 22:36:14.66 .net
>>328
ドットが足りないし
プラスが全角だし
プラスの後ろに半角スペースが無い
333:Name_Not_Found
20/08/06 23:28:47.70 wOuRb+I6.net
>>317
リンクの下線は
いわゆるデフォルトスタイルじゃない？
Safariに限らず
334:Name_Not_Found
20/08/07 05:43:29.77 c7hNF/2z.net
nth-child(n+5)だと5番目以降の子要素を指定出来ますが、どうしてこの式で5番目以降という意味になるんでしょうか？
nとはなんですか？
335:Name_Not_Found
20/08/07 07:13:10.67 .net
5番目以降じゃない。
nに0から数字足したら括弧内はいくつになる？
それが答えだ。
336:Name_Not_Found
20/08/07 07:15:27.97 .net
>>334
構文の関数表記とセレクターの例に解説あるから、とりあえず読んでこい
URLﾘﾝｸ(developer.mozilla.org)
これに限らず、基本的には developer.mozilla.org にあるはずなので「これなんだっけ」ってなったらまずキーワードに site:developer.mozilla.org つけてググるかな
和訳が変だったり、そもそも和訳されてないこともあるが
337:Name_Not_Found
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
サーバサイドで書き換え