20/07/05 17:00:42.27 oHogugHk.net
>>19
それ必要なんですか？
divでいいんじゃないでしょうか？
SEO的にメリットがあるとか？
21:Name_Not_Found
20/07/05 18:09:57.32 .net
>>20
お前がそう思うんならそうなんだろう
お前ん中ではな！ （くわっ
22:Name_Not_Found
20/07/05 18:11:49.99 .net
>>20
とかいって<html>タグとか<body>タグは使っちゃうんだろ？
なんでかな～？
23:Name_Not_Found
20/07/05 18:54:35.96 .net
構造化できない人はぜーーーーんぶdivで良いんだよ^^
24:Name_Not_Found
20/07/05 20:01:24.10 .net
>>20
別に使わなくても動くし、使いたいやつは使うだけ。
それがHTMLファイブ。
25:Name_Not_Found
20/07/05 20:37:17.08 oHogugHk.net
はい
26:Name_Not_Found
20/07/05 20:42:15.85 3nMZck6y.net
憶測だけどheaderタグで書いとけばコード見た時にどこでヘッダー書いてあるか一目瞭然だからだろう
ちなみにfooterもあるよな
27:Name_Not_Found
20/07/05 20:47:54.48 .net
とりあえず、これでも読めや
ドキュメントと Web サイトの構造 - ウェブ開発を学ぶ | MDN
URLﾘﾝｸ(developer.mozilla.org)
28:Name_Not_Found
20/07/05 20:57:14.90 .net
知った風にマウンティング取ったり小難しいサイト貼ったりしてても
section、article、asideあたりの使い分け方を明確に説明できるやつなんてこのスレにはいないんだよなぁ
29:Name_Not_Found
20/07/05 21:11:54.56 .net
そんなお前は、先ず日本語からな
30:Name_Not_Found
20/07/05 21:30:16.30 .net
>>28
知った風に言うなや
31:Name_Not_Found
20/07/05 21:32:55.99 .net
全ては視覚障者の為だけに構造化やるんだぞ
それ以外は特に何も影響ないんだからな
わかったかこのやろう
32:Name_Not_Found
20/07/06 02:47:34.35 .net
英語圏のやつらですら
article、asideの使い分けできてないので
33:Name_Not_Found
20/07/06 06:27:32.93 .net
>>28
ここの連中は説明出来ないんじゃなくて説明する必要がない
そんなもんそれこそ少し調べりゃ腐るほど出てくるしurl貼りゃ良いだけ
わざわざここに自力で書き込むだけ時間と労力の無駄
34:Name_Not_Found
20/07/07 10:03:13.18 .net
>>4
非JS環境って実在したの！？
35:Name_Not_Found
20/07/07 14:32:15.67 .net
非js環境なんていくらでもあるだろ
CMSの投稿部分みたいな独自システムとか楽天とかamazonとか
36:Name_Not_Found
20/07/07 14:36:18.26 .net
HTMLで正しくマクアップするのはいってみりゃ
車も走ってないような田舎の島において
真昼間に信号が赤だから誰もいないけどルール守って渡らずまつ感じだな
渡りたれば渡ればいいし、渡っても別に何か起こるわけでもない
37:Name_Not_Found
20/07/07 16:56:12.64 .net
>>34
curlとか使ったことないの！？
38:Name_Not_Found
20/07/07 21:36:46.66 .net
>>37
あるに決まってんだろ
こちとらペチパーだぞ
39:Name_Not_Found
20/07/07 22:59:36.73 .net
ぺ、ペチパー？
40:Name_Not_Found
20/07/08 00:08:14.19 .net
そういやpuppeteerか出来てから
あんまり使わなくなったなあcurl
やっぱヘッドレスブラウザが便利だわ
41:Name_Not_Found
20/07/08 09:37:18 .net
puppeteer使って何してるのさ
42:Name_Not_Found
20/07/08 11:36:46.96 .net
curlとは用途が違うだろ
api叩いてみるのにpuppeteerやらplaywright使ってたら笑う
43:Name_Not_Found
20/07/08 18:29:10.42 .net
なんでー
つかAPI叩くのにはsequelとかのGUIツール使っちゃうなあ
パペッティア？読み方わかんないけど
ヘッドレスブラウザは確かに便利やな
シェルのワンライナーでいきなりは使えないから
多少面倒はあるけど
44:Name_Not_Found
20/07/08 18:30:10.36 .net
間違えた
sequelはdbのフロントエンドだった
postmanだな、API叩きに使うのは
45:Name_Not_Found
20/07/08 18:52:10.75 .net
> シェルのワンライナーでいきなりは使えないから
> 多少面倒はあるけど
やっぱそう思う？
シェルから簡単にブラウザレンダリング後のhtml取れたら便利かなと思って簡単なラッパーコマンドをnodeで作ったことあるんだよね…
需要あるのか…？
たいしたもんじゃないけど開発再開しようかな。
46:Name_Not_Found
20/07/08 23:44:09.54 .net
>>45
自分も同じようなの作ってつかってるw
みんな考えることは同じだなあ
47:Name_Not_Found
20/07/09 03:15:11 .net
>>4とは別人だが>>11試してみたら動かなかったな
48:Name_Not_Found
20/07/09 03:20:53 .net
漏れは、VSCode の拡張機能・Rest Client を使う
マウス操作だから、テストしやすい
49:Name_Not_Found
20/07/09 09:54:53.45 .net
rubyガイジと同じ拡張機能使ってるなんて癪だわ…
50:Name_Not_Found
20/07/09 10:03:46.06 .net
vscodeのは
中身は.NETコアなんだろか？
51:Name_Not_Found
20/07/09 16:46:25 GssH/3nM.net
画像の下に2カラムで文字を表示させることは可能でしょうか? 画像の左下にタイトル 右下に説明を入れたいのですが
52:Name_Not_Found
20/07/09 18:32:00.92 /ZqFWejT.net
>>51
<p><span>タイトル</span><span>説明</span></p>
こういう書き方もあるけど？
53:Name_Not_Found
20/07/09 20:07:37.95 GssH/3nM.net
>>52
できました！ありがとうございます
spanで できるんですね
54:Name_Not_Found
20/07/09 20:56:58.51 GssH/3nM.net
URLﾘﾝｸ(www.admiretheweb.com)
すみません、こちらのサイトのように改行しながら文字を横並びにする方法を教えていただけないでしょうか？
55:Name_Not_Found
20/07/09 23:41:55 .net
ソースみたらええがな
56:Name_Not_Found
20/07/09 23:46:36 .net
>>54
どの辺のことを言ってるのか知らんが、こういうことか？
URLﾘﾝｸ(jsfiddle.net)
57:Name_Not_Found
20/07/10 01:34:54 X21e09zf.net
>>53
後はクラス要素入れて微調整したりしてくれよ
58:Name_Not_Found
20/07/10 23:36:47.04 9qbDyTmI.net
>>無事作成できました ありがとうございます
59:Name_Not_Found
20/07/15 04:52:58 BIvsxFX2.net
ちょっとtableで聞きたいんだけどtbodyで囲んだtrを横並びに置くって出来るの？
行１
行2
だったときに
行１行2
ってすること
60:Name_Not_Found
20/07/15 05:55:43.96 .net
>>59
こういうこと？
URLﾘﾝｸ(jsfiddle.net)
trをinline-blockにしてもいいけど
どちらかといえばflexだよね
61:Name_Not_Found
20/07/15 14:50:56.36 BIvsxFX2.net
>>60
なるほど、よくわかったわありがとう
62:Name_Not_Found
20/07/15 18:42:14.88 BIvsxFX2.net
>>60
ついでなんだけど、trの中にもう一つthとtdでやった方がいいんじゃないかって思ったんだけど
このflexでやるメリットはあるの？
63:Name_Not_Found
20/07/15 18:47:55.68 .net
そもtableなのか？その情報
64:Name_Not_Found
20/07/15 20:21:51.61 BIvsxFX2.net
URLﾘﾝｸ(my-best.com)
このサイトのランキングでテーブルのところで使ってるんだけど
65:Name_Not_Found
20/07/15 20:30:04.20 .net
表としてのセマンティクスに拘らず
帳票のようなある意味レイアウト目的の表になるなら
正しさは求めてもしかたない
望んだ形になることだけを目指して
HTMLとCSSを存分にごにょこにょするしかない
66:Name_Not_Found
20/07/15 21:46:15.06 4la6hvr8.net
すみませんこちらのサイトURLﾘﾝｸ(unlimitedchaos.net)のフッターを真似て作りたいのですが3カラムフッターがどうしても作れません
アドバイスお願いします
67:Name_Not_Found
20/07/15 22:41:39.29 .net
>>62
そもそもthとtdじゃタグの意味が違うし、単に横並びにするためだけにthを使うべきじゃない
URLﾘﾝｸ(developer.mozilla.org)
>>64のサイトでは、ちゃんとthをヘッダー（見出し）として使ってる
thを使わずスマホ対応も考えるなら、flexの方が少ないコードでフレキシブルにできて何かと便利
URLﾘﾝｸ(jsfiddle.net)
th使ってフレキシブルにするなら、こんな感じ
URLﾘﾝｸ(jsfiddle.net)
いずれも画面幅が変われば縦並びなる
68:Name_Not_Found
20/07/15 22:48:03.41 .net
>>66
そのサイトはwordpressとbootstrapで出来てて、3カラム部分はfloat使ってるみたいだけど
どうやって真似て作って、どの辺が上手く行かないの？
69:Name_Not_Found
20/07/15 22:51:39.09 4la6hvr8.net
>>68
worldpressで真似て作ってるのですが横に均等に羅列ができません
1カラム33%ずつで3等分されてるようですが…
70:Name_Not_Found
20/07/15 23:14:57.48 BIvsxFX2.net
>>67
いやそういう事じゃなく、trにthとtdを二つ作れば横並びになるし最後のtrだけ一つ作れば２・２・１綺麗にテーブル出来るじゃないのって事
71:Name_Not_Found
20/07/15 23:34:01.94 .net
セマンティクス糞食らえ派
72:Name_Not_Found
20/07/15 23:58:13.76 .net
>>70
いやだから、そもそもがthを使わない前提での質問だったし、横並びのためだけにthを使わず
ちゃんと見出しとしてのthが必要であれば、横並びにflexは使わなくてもいいよって話だよ。
あなたの作りたいものは見出しとしてのthは必要なの？
最初の条件で答えたflexを、勝手に前提条件を変えて要らないだろって言われても困るわｗ
73:Name_Not_Found
20/07/16 00:16:33.16 .net
>>69
簡略化すれば何かしらヒントになるかも？
URLﾘﾝｸ(jsfiddle.net)
74:Name_Not_Found
20/07/16 00:41:01.32 zyOebkF6.net
>>73
luxeritasで作ってみたのですがフッターが左中央右と指定されていて
中央に要素を配置するとカラムの横幅をwidthで値を指定しても左右に空間ができてしまいます
やはりPHPを弄るしか方法は無いんですかね？
75:Name_Not_Found
20/07/16 00:51:56.45 zyOebkF6.net
一度参考サイトのフッターをコピペしてwidthを指定すると出来るんですがどういう構造なんでしょうか…
76:Name_Not_Found
20/07/16 01:01:55.90 AqK+cNZN.net
>>72
いやだから・・・提示したサイトの方で使ってるからthを、それなのにtrの中にthとtd入れてflexを使ってるのは何故なのかって聞いてるんだけどさ
77:Name_Not_Found
20/07/16 01:13:41.79 .net
>>69
テキトーに再現してみた。
URLﾘﾝｸ(lisp-trpg.ddo.jp)
78:Name_Not_Found
20/07/16 01:50:20.74 .net
>>76
だったら最初からまとめてそう言いなさいよ。
この流れじゃ後付けが多すぎて、そうは読めないっての。
で、何故flex使ってるかは、開発者ツール使ってflex外せば分かるが
flex使って、セルの横幅決めたりして綺麗に幅一杯に埋まるようにしてたり
多分コードを減らしたりもしてる。
あとtbodyのflexはtrを横並びにしてるけど、trをflexにするのは
thとtdを横並びにするのと関係はない。
79:Name_Not_Found
20/07/16 02:10:01.45 .net
>>74
模写元がどれだけカスタマイズしてるか分からないけど
同じテーマ使ってるっぽいから、どうにかなるんじゃない？
でも、さすがにそれだけの情報だけじゃ、よく分からんから
状況が再現できるコードでも貼ってくれりゃいいんだけど
80:Name_Not_Found
20/07/16 16:17:16.52 V+F4nj+E.net
>>79
floatタグで横いっぱいに要素を並べることができましたありがとうございます
floatタグでレス73のアイデアと77のアイデアを結合できないでしょうか?
81:Name_Not_Found
20/07/16 16:35:25.85 .net
昔かよ
82:Name_Not_Found
20/07/16 16:45:21.95 .net
今はflex使うんだろうなぁ
IE対応するのであれば面倒そうだけどと
83:Name_Not_Found
20/07/16 17:25:49.99 .net
>>80
>>77は、3つのdivにまとめて指定してるdisplay: inline-block;でブロックを横並びにしてるので
そのinline-blockを消して、そこへ新たにfloat: left;を追加すればいいんじゃない？
84:Name_Not_Found
20/07/16 22:31:06.30 V+F4nj+E.net
>>83
自分では解決できなかったのでURLﾘﾝｸ(shu-sait.com)
こちらのサイトの方を参考に作り替えてみます
上記のサイトのフッターを配置してみると左右ぴったりに配置することができました
何が間違っていたのかわからなかったのですが…
85:Name_Not_Found
20/07/16 22:35:10.15 V+F4nj+E.net
もう一点質問があるのですがURLﾘﾝｸ(jsfiddle.net)
こちらの縦並びのメニューをワードごとに大きさを変えて2列3列に並べる場合 inline-blockを使えばよいのでしょうか?
86:Name_Not_Found
20/07/16 23:12:08.22 .net
>>84
書かれた通りにやれば出来るんだが、解決できないってのは
何を言われてるのか分からないってこと？
というか、その参考サイトはfloatじゃなくてflex使ってるんだが
いったい何をどうやってるのかサッパリだな…。
87:Name_Not_Found
20/07/16 23:54:32.28 .net
>>85
ちょっと何言ってるか分からない
横並びの1行じゃなくて2列とか3列にしたいの？
あとワードごとに大きさを変えるって、各ブロックの横幅を変えたいってこと？
88:Name_Not_Found
20/07/16 23:57:48.70 V+F4nj+E.net
>>86
cssを調整した際にworldpressで固定されてる左側のコンテンツのレイアウトが崩れてしまうなどがありまして…
おそらくhtmlのクラス名がかぶっていると思うのですが
89:Name_Not_Found
20/07/17 00:03:44.58 iqDiHOmy.net
>>87
ボックスを横に2列3列とならべて できればボックスの大きさをワードの長さごとに変えたいのですが
以前も挑戦したのですが ul li class を使う方法しかなくできませんでした
bootstrapであれば可能なようですが扱いきれず困ってます
ul li を使わずにワードを2列 3列に並べる方法はありますでしょうか?
90:Name_Not_Found
20/07/17 00:06:14.70 .net
URLﾘﾝｸ(lisp-trpg.ddo.jp)
91:Name_Not_Found
20/07/17 00:08:06.39 .net
>>90
>>89
アンカー忘れてたわ。こういうこと？
92:Name_Not_Found
20/07/17 00:37:28.73 .net
>>89
aとbrのみ
URLﾘﾝｸ(lisp-trpg.ddo.jp)
93:Name_Not_Found
20/07/17 01:04:37.44 .net
>>89
更に謎は深まるばかりなんだが、こういうのを作りたいってこと？
URLﾘﾝｸ(www.webdlab.com)
94:Name_Not_Found
20/07/17 01:09:56.83 iqDiHOmy.net
>>92
こういうことです！ 最後の位置のみ揃えることはできますでしょうか？
95:Name_Not_Found
20/07/17 01:26:53.97 .net
あの説明でよく正解に辿り着いたな…ｗ
96:Name_Not_Found
20/07/17 01:48:54.62 .net
各行の最後のブロックを左揃えにしたいのか、右揃えにしたいのか
各行の他のブロックの位置は変えていいのか、変えちゃダメなのか
それとも各行の全体を右寄せにしたいのか
97:Name_Not_Found
20/07/17 06:54:32.70 .net
>>96
恐らく、正解は・・・両端ぞろえ！！
URLﾘﾝｸ(lisp-trpg.ddo.jp)
98:Name_Not_Found
20/07/17 09:07:07.36 .net
みんなのエスパー力に感動
99:Name_Not_Found
20/07/17 10:28:38.51 JmSrocuP.net
>>97
ありがとうございます aにクラス名をつけることは可能でしょうか? 別の要素に影響してしまい困りました…
100:Name_Not_Found
20/07/17 10:43:24.11 JmSrocuP.net
>>92
class名変更で実装できましたありがとうございます
101:Name_Not_Found
20/07/17 11:33:37.75 JmSrocuP.net
>>97
すみません divに固有のクラス名をつけてcssを適用することはできますでしょうか?
102:Name_Not_Found
20/07/17 11:53:34.40 JmSrocuP.net
URLﾘﾝｸ(jsfiddle.net)
クラス名を変更して無事実装できましたありがとう互います
font-size: 14px;
width: calc((100% - 60px) / 7); このcssの仕組みがわからないのですが教えてください
103:Name_Not_Found
20/07/17 12:24:38.61 .net
横にきっちり並べたい要素が7個
横幅100％を7で割ったものが一つの要素の幅になる。ただ、今回は要素間に10pxの左マージンを入れた。
最初の要素以外に左マージン10pxつけると左マージンは全60pxになる。
故に100％の幅から60px引いて7分割
最初の要素以外に左マージン10pxつければ
7つの要素の幅＋左マージン60px＝
100％
104:Name_Not_Found
20/07/17 15:23:01.64 .net
> できればボックスの大きさをワードの長さごとに変えたい
これはもう要らないのかな？
105:Name_Not_Found
20/07/17 18:25:04.64 nrVkm5ZW.net
>>103
ありがとうございます
106:Name_Not_Found
20/07/17 18:25:45.64 nrVkm5ZW.net
>>104
102のコードを改変しても可能でしょうか？
107:Name_Not_Found
20/07/17 19:52:06.61 .net
まぁ、見た目はともかく出来るといえば出来るよね
URLﾘﾝｸ(jsfiddle.net)
108:Name_Not_Found
20/07/18 18:46:15.95 .net
浦島太郎です。
<head>の中に <style> というのをおいてログイン入力画面とか、
名前登録みたいなのを作っているのですが、やっぱりｃｓｓというのは
必ず使うべきものなんですか？
ちなみに <style> は100行程度です。
109:Name_Not_Found
20/07/18 19:03:27.51 .net
>>108
はい
別のファイルにしても良いです
110:Name_Not_Found
20/07/18 19:16:58.23 .net
URLﾘﾝｸ(deshinon.com)
上記のようなサイトでCODE PEN等で紹介されているコードを
自身のサイトに反映させたいと考えていますが上手くいきません。
cssとjsについては丸コピペして「xxx.css」「xxx.js」として保存、
htmlについては、BODY内に
<link rel="stylesheet" type="text/css" href="xxx.css">
と記述してcssを呼び出しています。
結果としてテキストや表組みはちゃんと反映されますが、
背景画像などの動きをつける部分が反映されません。
特定のサンプルで起きるわけではなく、複数のサンプルを試しても
上手くいかないので、こちらの実装の仕方が間違っていると考えられます。
html css jsで成り立っているサンプルを実装する手法で
上記の手順で間違っている箇所があったら教えてくださればありがたいです。
111:Name_Not_Found
20/07/18 19:31:48.26 .net
>>110
見てないけど
画像のパスも変えないといかんのじゃね？
112:Name_Not_Found
20/07/18 19:54:21.44 .net
>>111
ありがとうございます。
例えば
URLﾘﾝｸ(codepen.io)
このサンプルコードですと、相対パスですべて書かれており、
html css jsを全て同階層に置けば動作すると考えています。
ですが実際にコードをコピペしてxxxx.html xxxx.css xxxx.jsの
３ファイルに貼っても動作しません。
根本的に考え方が間違っているのでしょうか・・・
113:Name_Not_Found
20/07/18 20:02:08.92 .net
どうせhtmlファイルダブルクリックで開いてんだろ
114:Name_Not_Found
20/07/18 20:23:52.73 .net
>>112
同一階層に置いただけじゃ動かんぞ
htmlファイルにcssを反映させるためには基本的にheadタグ内に
link rel="stylesheet" href="xxx.css"
みたいな感じで書く
JavaScriptは基本的に
script src="xxx.js"></scriptこれを
/body直前に追加する
115:Name_Not_Found
20/07/18 21:13:56.16 .net
>>111
>>113-114
解決しました。
jsファイルを呼び出すためのscriptタグを置く位置が間違っていました（headタグ内に置いていた）。
色々ありがとうございました。
116:Name_Not_Found
20/07/19 22:58:47.63 zfUWI/E2.net
URLﾘﾝｸ(tympanus.net)
すみません上記のサイトのLayla Zoe Oscar Bubba のいずれかを実装したいのですが構造が難しく自作できませんでした
cssで作成可能でしょうか?
117:Name_Not_Found
20/07/20 00:43:27.31 .net
>>116
できるよ
URLﾘﾝｸ(jsfiddle.net)
118:Name_Not_Found
20/07/20 15:58:56.47 AtByoekJ.net
>>117
ありがとうございます 実装できました
119:Name_Not_Found
20/07/23 17:46:46.81 eLEo4guL.net
すみません以前こちらで質問したものですがURLﾘﾝｸ(jsfiddle.net) コードを1段追加しようとした際
うまく反映できませんなぜでしょうか?
120:Name_Not_Found
20/07/23 18:56:20.42 .net
>>119
classの一文字目に数字は使えないよ
121:Name_Not_Found
20/07/23 19:29:14.21 eLEo4guL.net
>>120
h1 class 21～24の部分のみ追加したのですが…
CSSのクラス名が適応されません…
何処が間違ってるのでしょうか？
122:Name_Not_Found
20/07/23 20:44:23.14 eLEo4guL.net
>>120
すみません理解できましたありがとうございます
URLﾘﾝｸ(jsfiddle.net)
123:Name_Not_Found
20/07/23 21:40:29.92 eLEo4guL.net
画像内の下部に帯を透過させてその上に文字を設置したいのですがこの場合画像→帯を下に設置してpositionで下部に設置するのでしょうか?
124:Name_Not_Found
20/07/23 21:48:35.87 6qya1rK1.net
>>123
それがいいんでね？
positionをrelativeにしたfigure要素の中にimg要素置いて
positionをabsoluteにしたfigcaption要素の中に文字書いて
下にくっつければ
125:Name_Not_Found
20/07/24 03:31:04.32 .net
こんな感じ？
URLﾘﾝｸ(jsfiddle.net)
126:Name_Not_Found
20/07/24 09:33:22.32 .net
数ページ程度のサイトを構築する場合、CSSファイルの記述順はどのようにするといいでしょうか
以下のAの記述はサイトの上からの表示順に合わせてCSSを上から記述し、
Bは全ページ共通のCSSを上にまとめてその下に特定のページでのみ使うCSSを記述しています
このどちらか、あるいは別の記述順か、どのような記述順がいいのでしょうか
A
<*----- ヘッダー ----- *>
<* ヒーロー *>
<*----- メイン ----- *>
<* 商品ページ *>
<* お知らせ *>
<* お問い合わせ *>
<*----- フッター ----- *>
B
<*----- ヘッダー ----- *>
<*----- メイン ----- *>
<*----- フッター ----- *>
<* ヒーロー *>
<* 商品ページ *>
<* お知らせ *>
<* お問い合わせ *>
127:Name_Not_Found
20/07/24 12:49:26.48 9EAiIz9z.net
>>126
投げやりなわけではなく
適当でいいよ、好きな順で
CSSは結構な行数になるから
順に書いたところで、一覧できるわけじゃない
だから後から記述箇所を見つけるときは
どうせセレクタ等で検索することになるので
生CSSではなく、SASSなどを使うなら
ファイル分けてあった方がやりやすいね
で、ファイル名は一覧できるから順に並んだ方がいい
ので、ファイル名に番号振ったりして整頓するといい
128:Name_Not_Found
20/07/24 19:10:15.74 .net
この板は企業サイトのソースを貼って「これどうなってんの？」と質問するのはアリですか？
模写コーディングをしていてpng画像をSVGフィルタとしてアニメーションさせて動かすというソースが再現できず途方に暮れています
129:Name_Not_Found
20/07/24 19:22:28.50 .net
ソース直貼りじゃなくて、自分で動かそうとしてる部分のソースをここに貼って
URLﾘﾝｸ(jsfiddle.net)
あとは模写元の企業サイトのURLを貼る
130:128
20/07/24 20:28:00.98 .net
>>128です
該当部分を抜き出したコードがこちらになります
URLﾘﾝｸ(jsfiddle.net)
再現したいのはこちらのサイトの背景の上に波紋が広がるようなアニメーションエフェクトです。
URLﾘﾝｸ(chiran-omoiire.com)
こちらのpng画像が<feImage>タグ内に指定されており、エフェクトのもとになっているとは思うのですが虹色の静止画が立体的なアニメーションになる仕組みが分からず、またコピペしても再現できません。
URLﾘﾝｸ(imgur.com)
result="ripple"をググっても引っかからないですし、試しにresult="blur"にしてみても変化なしです。
javascriptは関係ないですよね。。。
131:Name_Not_Found
20/07/25 00:18:41.18 .net
こういうのってaftereffectsとかで作ったのを
書き出してたりしないのかな？
132:Name_Not_Found
20/07/25 00:34:52.30 .net
回答するスキルもってないけど調べてみたらこういうのあったよ
URLﾘﾝｸ(www.sejuku.net)
URLﾘﾝｸ(semooh.jp)
URLﾘﾝｸ(techmemo.biz)
URLﾘﾝｸ(on-ze.com)
jQueryじゃない？？
133:Name_Not_Found
20/07/25 07:15:54.91 .net
URLﾘﾝｸ(triple-underscore.github.io)
URLﾘﾝｸ(triple-underscore.github.io)
調べてみたけど変形は feDisplacementMapElement要素。
in2="ripple" で result="ripple" の要素を参照して、
画像の色を変形情報として波紋っぽく変換してるんだと思う。
あと、filter要素はフィルタの定義をしてるだけなので、
cssでフィルタを適用しないといけない。
filter要素のid使って
filter: url(#filter-ripple-1)
で適用されるはず。
134:128
20/07/25 07:20:00.10 .net
>>131
おっしゃる通り、ロゴ部分のアニメーションはAffterEffectなどで作ったものを書き出していると思われます
>>132
これは便利ですね。.jsファイルの方を書き換えることができればオープニングアニメーションとして波紋を出すということも再現できそうです。
ありがとうございます。
再現しようと思えばjQuery経由で再現できそうですが、立体的なSVGフィルタの仕組みは未解決ですのでわかる方がいましたら是非ご教示願いたいです。
135:128
20/07/25 07:26:19.78 .net
>133
リロってませんでした
詳しいご解説ありがとうございます！
虹色を立体データに変換して再現しているわけですね。
元ソースのCSSの方も一度確かめて今からやってみます。
136:Name_Not_Found
20/07/25 11:17:34.88 .net
コンソールに表示される
URLﾘﾝｸ(www.pixijs.com)
を使っているとかではないの？
137:Name_Not_Found
20/07/25 20:25:05.19 CDxgIMOS.net
>>125
すみません作っていただいてありがとうございます参考にします
帯の透明度を上げて背景をもう少しはっきりさせたいのですがopacityでいいのでしょうか?
138:Name_Not_Found
20/07/25 20:43:49.11 .net
androidのchomeで見ると<p>画像.pngテキストテキスト</p>これが
画像png
テキストテキスト
と1段ずれて表示されるのですがPCではきちんと表示されています
139:Name_Not_Found
20/07/25 20:58:55.62 .net
>>137
rgbaは（R、G、B、透明度）だよ
140:Name_Not_Found
20/07/25 21:15:59.44 .net
>>137
background-color: rgba( 0, 0, 0, .5);
これの.5（0.5の0を省略）を変更して調整してみ
色は並んでる0三つの値を変更
色選択ツール - CSS: カスケーディングスタイルシート | MDN
URLﾘﾝｸ(developer.mozilla.org)
141:Name_Not_Found
20/07/25 23:08:34.89 CDxgIMOS.net
すみませんURLﾘﾝｸ(jsfiddle.net)に、URLﾘﾝｸ(martto.net)のPattern5 先頭にFontAwesomeアイコンを表示
2つの横並び画像の上ににそれぞれ見出しのデザインを作りたいのですがどうすればよいでしょうか?
142:Name_Not_Found
20/07/25 23:12:48.66 CDxgIMOS.net
>>140
ありがとうございます 調節してみます
143:Name_Not_Found
20/07/26 03:05:46 .net
>>141
こんな感じ？
URLﾘﾝｸ(jsfiddle.net)
144:Name_Not_Found
20/07/26 10:58:02.99 0ih6AqYz.net
>>143
ありがとうございます。 <h>タグが増えすぎてしまってCSSが効かなくなってしまった場合 他の<>タグで代用できるものはありますでしょうか？
145:Name_Not_Found
20/07/26 12:37:52.06 0ih6AqYz.net
>>143
一つ一つの画像幅を広げることがどうしてもできません教えていただけませんか?
146:Name_Not_Found
20/07/26 13:55:22.34 0ih6AqYz.net
URLﾘﾝｸ(jsfiddle.net) この状態からURLﾘﾝｸ(gray-code.com)の完成形ボックスにしたいのですが<p>で文字要素を3つ並べればよいのでしょうか?
147:Name_Not_Found
20/07/26 16:20:02.00 .net
>>144
タグには意味があるから、見出しは基本的にh1～6のタグ。
他の見出しと区別する場合はclassで個別に指定。
>>145
一つ一つの画像幅って、それぞれ画像ごとに違う幅を指定したいって話なのか
単に全ての画像を同じ大きさの幅に広げたいだけなのか。
>>146
ちょっと何言ってるか分からなかったが、こういうこと？
URLﾘﾝｸ(jsfiddle.net)
あと、質問は1つにまとめて。
148:Name_Not_Found
20/07/26 16:41:04.73 0ih6AqYz.net
>>147
それぞれの画像幅を調節したいのですがどうすれば良いでしょうか？
149:Name_Not_Found
20/07/26 16:51:00.19 0ih6AqYz.net
>>147
作っていただいてありがとうございます 質問一つにまとめるよう気を付けます。すみません、class名指定忘れてました。cssを個別に使うときはclass指定したほうが良いですかね…
150:Name_Not_Found
20/07/26 18:20:10.18 .net
>>148-149
面倒臭いからまとめるけど、やりたいのってこういうこと？
URLﾘﾝｸ(jsfiddle.net)
151:Name_Not_Found
20/07/26 19:33:44.80 4qVvrd61.net
>>150
説明不足で済みません。URLﾘﾝｸ(jsfiddle.net) こちらのボックスを等間隔で幅を広げようと調整しようと試みたのですが、widthを広げた際ボックスが覆いかぶさってしまい同じ大きさで横に並べることができませんでした。お力をお貸しくださいお願いします。
152:Name_Not_Found
20/07/26 19:56:52.29 .net
>>151
やりたいことは別件なの？
質問は1つずつ。解決したら解決したって言ってよ。
解決したら次の質問な。
で、自分で試みたっていう上手く行かなかったコードを貼ろうよ。
何が悪いのか、何を勘違いしてるのか分からないと解説のしようがないし
誰かが正解だけ書いて、それをコピペしたところで、勘違いしたままじゃ
全く身にならないよ。
153:Name_Not_Found
20/07/26 21:46:15.48 4qVvrd61.net
>>152
すみません今後気をつけます。先ほどの質問なのですがURLﾘﾝｸ(jsfiddle.net)
このように.aligncenter {width: 120px;}で画像のwidthを広げようとしたのですが画像がかぶさってしまいます rightやleftでボックスとボックスに隙間を作ろうとしたのですがposition: absolute;が原因で調節することができません。
自分でも調べてみたのですがどうしても解決できません。アドバイスお願いします。
154:Name_Not_Found
20/07/26 21:57:35.98 4qVvrd61.net
section {
display: flex;
flex-wrap: wrap;
width: 220px;
} 今まで勉強してみた中で要素を二つ並べた際は二つの要素を足したwidth横幅を指定してその中に1要素の幅をそれぞれ指定するという認識でした。
今回も同様にsection(二つを合わせたwidth横幅を指定して）それぞれの横幅を変更しようとしたのですがどうしてもうまくいきません…
posisionについて勉強不足だとおもうのですが…
155:Name_Not_Found
20/07/26 22:59:17.19 .net
>>153-154
自分がいじった内容を保存したかったら、画面左上のsaveを押して。
保存するとURL変わるから、そのURL貼っておくれ。
で、figureのmax-widthとmin-widthをどちらも100pxで固定しちゃってるから
そりゃimgのwidthを拡大縮小しても、親要素のfigureが固定されてたら
伸縮しようがないから、とりあえずmax-widthを大きくしてみ。
その辺はpositionあんま関係ないと思われ。
156:Name_Not_Found
20/07/26 23:38:29.41 4qVvrd61.net
>>155
すみませんsave わすれてました。 URLﾘﾝｸ(jsfiddle.net) 画像幅を広げた状態で要素を横並びしたいのですが、要素が下に回り込んでしまいます。原因がわかりません、アドバイスお願いします。
157:Name_Not_Found
20/07/26 23:54:30.75 .net
>>156
やっと何言ってるか分かった
sectionの子要素のdivを横並びにする場合は主にこんな感じだと思うけど、やりたいことに合ってる？
1. sectionのwidth:220px;を削除（画面幅を小さくすると縦並びに）
2. sectionのflex-wrapをnowrapにしてwidth:220px;を削除（画面幅を小さくしても横並びのまま）
3. sectionのwidthを420px以上にする（420px＝（200px+divの左右のマージン5px）×2）
158:Name_Not_Found
20/07/27 00:03:57.92 .net
ちなみに2のflex-wrap: nowrap;は初期値だから
sectionのflex-wrapとwidthの両方を削除してもおｋ
159:Name_Not_Found
20/07/27 00:25:19.02 alsfth1t.net
>>158
ありがとうございます。やっと問題が解決しました。flex-wrapだと縦並びでnowrapだと横並びになるのはなぜでしょうか?
仕組みが理解できません…
160:Name_Not_Found
20/07/27 00:37:03.81 alsfth1t.net
要素を並べる際はflex はじめにflexに目をつけるべきでした…
flexやfloatやdisplay:inline-block それぞれの利点や使い方などを未だにあやふやにしてる状態なのが駄目なんですかね…
flexは最新で1番スマートにCSSを簡潔に実装できるという認識はあるのですが。
161:Name_Not_Found
20/07/27 00:40:43.12 .net
>>159
flex-wrapはwrap（折り返し）、nowrap（折り返さない）だから
sectionにflex-wrap:wrap;で、尚且つwidth: 220pxを設定してるのに
imgのwidthが200pxもあると2つ横並びじゃsection内に収まらないから
自動的に折り返されて縦並びになる
だから、widthを削除（初期値autoに）するか、強制的にnowrapで
折り返させないようにするか、sectionのwidthを、imgのwidthとmarginの
合計以上の値にすればいい
162:Name_Not_Found
20/07/27 00:46:01.72 .net
>>160
ケースバイケースで使い分ければ良いとは思うんだけど
フレキシブルなサイトを作ろうと思ったらflexが便利だからなぁ。
今いじってるのはフレキシブル対応できてるとは言い難いけどｗ
163:Name_Not_Found
20/07/27 08:26:20.74 .net
テス
164:Name_Not_Found
20/07/27 08:27:41.40 rHdM8kwJ.net
<body>
<div class="hako" id="hako"></div>
<div class="aaa" id="aaa"></div>
<scr ipt>
$(function(){
$("#hako").click(function(){
$("#aaaa").fadeOut();
});
</scr pt>
</body>
これで箱消えないんですがなぜ何ですか・・・
165:Name_Not_Found
20/07/27 08:36:47.80 .net
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
<scr pt>
これフェードアウトしませんもう意味が分かりません…
$("p").click(function () {
$("p").fadeOut("slow");
});
</scri pt>
166:Name_Not_Found
20/07/27 09:11:30.60 .net
できました、CDN読み込んでませんでした
もうー
167:Name_Not_Found
20/07/27 09:23:44.26 .net
早いうちにエラーメッセージ読むくせつけといたほうがいいよ。
今回のだったら $ is not defined みたいなメッセージ出てたはず。
168:Name_Not_Found
20/07/27 10:33:14.47 .net
ここはHTML/CSS質問スレなので、jQueryとかは他所で質問した方が早い
169:Name_Not_Found
20/07/27 12:15:43.08 dHnzPzJ8.net
>>162
なるほどautoで設定するというのは思いつきませんでした。 wrap（折り返し）、nowrap（折り返さない）覚えておきます。
画像の場合wrap nowrapなのでしょうか? 文字も同様でしょうか?
170:Name_Not_Found
20/07/27 14:07:44.54 .net
>>169
便宜上、imgって書いてるけど、sectionのflex-wrapは直下の子要素divに対してのものなので
別にimgに限った話じゃないよ。
文字っていうのが、flexが設定された親要素の子要素のp要素って意味ならflex-wrapは適用される。
というか、親要素のflexコンテナー直下にある子要素のflexアイテムに適用される。
URLﾘﾝｸ(jsfiddle.net)
要素内の文字列の折り返し方法って意味なら、white-space等で指定。
あと、勘違いしてるかもだけど、プロパティごとに設定できる値は違うから、wrapとnowrapが
どんなプロパティにも使えるわけじゃないので、念のため。
とりあえずflexについてはこの辺りを参考に。
URLﾘﾝｸ(developer.mozilla.org)
URLﾘﾝｸ(www.webcreatorbox.com)
171:Name_Not_Found
20/07/27 18:11:06.96 dHnzPzJ8.net
>>170
詳しくおしえていただきありがとうございます。white-spaceについて調べてみます。
プロパティごとに設定できる値は違うということは使えない場合別のclassで代用するという認識でよいのでしょうか?
どちらも拝見させてもらいブックマークしました。ありがとうございます。
172:Name_Not_Found
20/07/27 18:51:32.26 .net
>>171
プロパティをセレクタか何かと勘違いしてる気が…。
余計なこと言って混乱させて悪いが、先ずはCSSの基本的な用語を憶えよう。
CSS の基本 - ウェブ開発を学ぶ | MDN
URLﾘﾝｸ(developer.mozilla.org)
今、話してるwrapとかnowrapはプロパティ値で、flex-wrapがプロパティ。
flex-wrapで利用できるプロパティ値はwrap、nowrap、wrap-reverseの3つ。
詳しくは以下で
flex-wrap - CSS: カスケーディングスタイルシート | MDN
URLﾘﾝｸ(developer.mozilla.org)
173:Name_Not_Found
20/07/27 19:44:37 .net
wordpressで動いているPCサイトは、すべてのタグにclassが書かれていたら
cssファイルを触るだけでスマホ用サイトにすることは可能なのでしょうか？
174:Name_Not_Found
20/07/27 20:18:33.70 .net
可能。
次
175:Name_Not_Found
20/07/27 21:54:07.84 dHnzPzJ8.net
>>172
アドバイスありがとうございます。紹介してくださったサイトを見て勉強してみます。
176:Name_Not_Found
20/07/27 22:41:17.46 dHnzPzJ8.net
すみませんデロッパツールでボタンを押し込んだ色を確認したいのですが どうすれば押し込んだ時の色がわかるのでしょうか?
177:Name_Not_Found
20/07/27 23:22:39.96 .net
>>176
とりあえず、これでも読んでみて
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
URLﾘﾝｸ(saruwakakun.com)
【デベロッパーツール】hover状態やactive状態のままcssを調整する方法！
URLﾘﾝｸ(clrmemory.com)
178:Name_Not_Found
20/07/27 23:36:29.64 .net
>>176
Elementsタブで対象の要素を右クリック、
そのメニューからForce stateを選び、
サブメニューから:activeを選ぶ。
解除するときは↑をまたやる。
179:Name_Not_Found
20/07/27 23:59:35.79 .net
>>173
Wordpress で、Bootstrap は使えないの？
180:Name_Not_Found
20/07/28 00:18:49.85 .net
>>179
テーマをbootstrapで作ることは可能。
181:Name_Not_Found
20/07/28 18:51:05.03 4s+I9u6i.net
>>177 >>178
教えてくださったサイトを見て解決できました。ありがとうございます。
182:Name_Not_Found
20/07/30 04:54:37.00 MAJO3W9c.net
div.blogtitle > a:link,a:visited{color:white;text-decoration:none;}
div.blogtitle > a:hover{text-decoration:underline;}
サイトタイトルを囲んでいるdiv.blogtitleの中にあるリンクだけ、色を白くしたいです
しかしサイト全体に適用されてしまいます
なぜでしょうか？
183:Name_Not_Found
20/07/30 05:41:00.55 ideNSv+i.net
>>182
カンマで区切ったら
また最初から親子セレクタ書かにゃいかんの
184:Name_Not_Found
20/07/30 06:28:14.35 MAJO3W9c.net
どうやって複数指定するのでしょうか？
185:Name_Not_Found
20/07/30 07:54:53.21 .net
>>184
>>183
186:Name_Not_Found
20/07/30 09:14:54.47 ideNSv+i.net
>>184
カンマの後で改行してみれば気づかないか？
カンマの後ろのセレクタは全てのa要素になっている
187:Name_Not_Found
20/07/30 09:56:53.54 MAJO3W9c.net
複数のアンカーを指定するにはどう書けばいいのでしょうか？
188:Name_Not_Found
20/07/30 10:28:16.39 .net
>>187
>>183
189:Name_Not_Found
20/07/30 10:42:58.42 MAJO3W9c.net
そうではなくて、複数指定する術はないのかという質問です
190:Name_Not_Found
20/07/30 11:34:11.70 MAJO3W9c.net
サイドバーのナビゲーションに対してh3を使うのはおかしいと思うんですが、div意外で適当なものはあるでしょうか
ウィジェット全体はnavでいいとして、「カテゴリ一覧」といったナビゲーションのタイトル部分です
191:Name_Not_Found
20/07/30 11:35:45.60 QHzfwoPG.net
>>189
万人にわかるように質問してよー
複数ってなんのことよー
192:Name_Not_Found
20/07/30 11:36:47.77 QHzfwoPG.net
>>190
なんでおかしいと思ったのん？
193:Name_Not_Found
20/07/30 11:47:34.93 MAJO3W9c.net
>>192
本文部分で見出しはh4くらいまで使うと思うので
194:Name_Not_Found
20/07/30 11:55:47.60 QHzfwoPG.net
>>193
URLﾘﾝｸ(momdo.github.io)
6つじゃ足りなくなるような人は
セクション毎に1から始めても良いんだぜ
セクショニングに矛盾しないように書くんだぜ
195:Name_Not_Found
20/07/30 12:17:25.74 MAJO3W9c.net
そういうやり方もあるんですね
逆に混乱しそうだから、無難にdivにしておきます、、、
196:Name_Not_Found
20/07/30 12:49:09.93 .net
見出しだったらdivなんか使わずにh1に適当なclass名つけて
個別にスタイル指定すりゃいいのに
この程度で混乱するとか大丈夫か
197:Name_Not_Found
20/07/30 16:07:18.05 .net
個人的にはむしろdivにする方が混乱する
（ネスト的な意味で）
198:Name_Not_Found
20/07/30 17:32:40.89 .net
>>190
アウトラインを表示するツールを使ってみたほうが良いよ
ようはアウトラインが綺麗にできてるかどうかだから
199:Name_Not_Found
20/07/30 17:36:58 K+cFYQgo.net
質問があるのですが
200:Name_Not_Found
20/07/30 17:38:15 K+cFYQgo.net
URLﾘﾝｸ(jsfiddle.net) こちらのフッターリストをURLﾘﾝｸ(shu-sait.com) こちらのサイトのフッターのように並べるのは非常に難しいのでしょうか?
Bootstrapは使わずに別の要素で代用しようと思っております
201:Name_Not_Found
20/07/30 17:59:00.08 MAJO3W9c.net
記事部分とサイドバーを黄金比にしたいです
サイトの横幅は960pxがいいと聞いたので、これを黄金比に分割したいです。
flex-basisで62%と38%にしましたが、これは黄金比になっているでしょうか？
960*0.618=593.28
593.28/960=0.618
202:Name_Not_Found
20/07/30 18:24:15.32 .net
>>201
とりあえず、これでも嫁
URLﾘﾝｸ(liskul.com)
203:Name_Not_Found
20/07/30 18:29:59 .net
日本人なら黄金比より白銀比使え！
204:Name_Not_Found
20/07/30 19:25:06.89 .net
>>200
どの部分だよｗ
フッターメニューの作り方のサイトのフッターのようにって
ややこしすぎるわｗｗ
205:Name_Not_Found
20/07/30 20:07:14.01 XS4Vfimb.net
>>204
すみません、フッターのみにbootsstrapを適応することは出来るのでしょうか？
bootsstrapを今回を機に勉強してみようと思っております
206:Name_Not_Found
20/07/30 20:13:14.31 .net
俺もbootstrapについて聞きたいけど
12分割するということはわかるけど、もともとどういうレイアウトのためのものなの？
レスポンシブをするためのbootstrapなのか、
pcで2カラム・3カラムを表現するための12カラムなのか。
207:Name_Not_Found
20/07/30 20:15:41.11 XS4Vfimb.net
URLﾘﾝｸ(jsfiddle.net)の3カラムを
208:Name_Not_Found
20/07/30 20:17:26.88 XS4Vfimb.net
URLﾘﾝｸ(shu-sait.com)のフッターのように作り替えたいです。
boostrapの真ん中のカラムだけ別の要素に作り替えて実装することは可能でしょうか？
209:Name_Not_Found
20/07/30 20:45:23 .net
YouTube で「たにぐちまこと bootstrap」で検索すれば？
210:Name_Not_Found
20/07/30 21:23:20 QHzfwoPG.net
>>205
出来なくはないが
あまりお勧めはできない
bootstrapは身も心もbootstrapに捧げないと
あんまり幸せになれない
あと
bootstrapが想定しているようなデザインシステムではないサイトでも
あまり活躍はしない
211:Name_Not_Found
20/07/30 21:26:10 QHzfwoPG.net
んで
カラム並べ程度のことだけだったら
bootstrapにとられる手間の方が圧倒的に多いと思う
212:Name_Not_Found
20/07/30 21:54:21 XS4Vfimb.net
何度も質問すみません URLﾘﾝｸ(jsfiddle.net) こちらの3カラムの高さが揃えられませんアドバイスお願いします
213:Name_Not_Found
20/07/30 22:27:41 .net
>>205
適応することはできない。
適用、の間違いだろう。
214:Name_Not_Found
20/07/30 23:39:50.60 .net
inline-blockの揃え方を検索
215:Name_Not_Found
20/07/31 05:32:41.41 .net
inline-blockで高さ指定してないのに
高さが揃うわけが無かろう
216:Name_Not_Found
20/07/31 05:42:10.97 .net
というか、メディアクエリでflex使ってるならinline-blockじゃなくflex使った方がいいだろ
各flexアイテムに高さ指定しなくても、flexアイテム内要素に合うよう伸縮するんだから
217:Name_Not_Found
20/07/31 16:17:30.00 eM6eIZ1R.net
8の倍数でサイトを作ると楽と聞きましたが、テンプレとなる倍数はどんな数値がいいでしょうか？これだときりが悪いような気がするです、、、。
サイト幅は960です
--px8:8px;
--px16:16px;
--px32:32px;
--px64:64px;
--px128:128px;
--px256:256px;
--px512:512px;
--px1024:1024px;
--px2048:2048px;
--px960:960px;
218:Name_Not_Found
20/07/31 16:29:56 .net
textarea内の文字列の左右寄せは
text-align:○○でてきるのですが、
上下はどう記載すればよろしいのでしょうか？
219:Name_Not_Found
20/07/31 16:31:57 .net
vertical-align
220:Name_Not_Found
20/07/31 16:34:49 .net
>>219
text-bottomで下いかないんです
221:Name_Not_Found
20/07/31 17:29:01 .net
>>218
CSSだけじゃ出来ないっぽい
URLﾘﾝｸ(codepen.io)
222:Name_Not_Found
20/07/31 17:51:24.96 .net
>>218
フォントの種類、フォントサイズ、
最大文字数、ラッパーの幅、高さなど考慮して>>221のようにやるしか今のところはないと思う。
一行だけなら別だけども
223:Name_Not_Found
20/07/31 20:16:13 38Rt8NI/.net
>>214>>219
教えてくださったサイトのおかげで解決できました、ありがとうございます。
224:Name_Not_Found
20/07/31 20:56:19 .net
誰も教えてないのに？
225:Name_Not_Found
20/08/01 05:26:07.80 bkI+Kz1x.net
フォントサイズにも8の倍数を使うのでしょうか？
226:Name_Not_Found
20/08/01 12:15:37 .net
フォントは16px以上にしとくが無難
iphoneでform入力するときイラっとしなくていい
227:Name_Not_Found
20/08/01 15:15:19 TbBM/PNh.net
URLﾘﾝｸ(oshiete.goo.ne.jp) この質問を参考に画像の上にオーバーレイ広告を設置したいのですが、
WordPressで設置予定のため以前自作したjsがつかえません。 cssとhtmlのみで画像の上に広告を配置することはできますでしょうか?
228:Name_Not_Found
20/08/01 15:25:45 TbBM/PNh.net
jsなしで離れたWordPressの固定要素に要素をかぶせることはできるのでしょうか?
229:Name_Not_Found
20/08/01 15:52:00 TbBM/PNh.net
すみません<img src>~</img><p class="overlay">オーバーレイテキスト</p>で実装できたのですが、右上に×を表示させて非表示にするためにはjsが必要なのでしょうか?
230:Name_Not_Found
20/08/01 16:18:42.54 .net
チェックボックス隠しといて表示のONOFF切り替えりゃイケんじゃね
231:Name_Not_Found
20/08/01 22:12:59.32 IMZZx7Ap.net
URLﾘﾝｸ(jsfiddle.net)
このコードをworldpressで使用した際 固定されるのはなぜでしょうか?
232:Name_Not_Found
20/08/01 22:35:46.15 .net
position: fixed;
233:Name_Not_Found
20/08/01 23:40:45.43 7BLzz9e9.net
>>232
すみません実装できました バーがおかしくなってたようです
234:Name_Not_Found
20/08/01 23:48:01.82 .net
dialogタグ使えっていう
235:Name_Not_Found
20/08/01 23:54:02.01 .net
徹頭徹尾、何言ってんのか分からんｗ
236:Name_Not_Found
20/08/02 00:00:53.54 .net
何これ？エロ広告？
237:Name_Not_Found
20/08/02 02:24:37.91 .net
竜頭蛇尾
押置だべ
238:Name_Not_Found
20/08/02 12:53:03 8BTjp7/S.net
ConoHa WINGでブログを始めようとする素人ですが、かんたんセットアップというので進めていたら
WordPressパスワードが入らず＜文字や数字を変えてもダメ＞途方に暮れています。どなたか詳しい方お教えください。
239:Name_Not_Found
20/08/02 16:40:22.43 .net
なぜConohaに聞かないのか、コミュ症なの？
240:Name_Not_Found
20/08/02 16:42:34.53 .net
マルチは無視しよう
241:Name_Not_Found
20/08/02 16:57:55.79 .net
なんだよ、マルチー牛かいな
242:Name_Not_Found
20/08/02 17:26:20.01 .net
よろしくお願いします。
左から、番号、テキスト、数値×4列、計6列の表を作ることになり、
番号はth、数値のセルが多いのでtdを text-align : rightにしました。
問題は2列目のテキストで、これを中央揃え&太字にしようと指定しても
太字にはなりましたが右揃えのままでした。どうやればいいのでしょうか？
あと、2列目もthにするのは有りなのでしょうか？
243:Name_Not_Found
20/08/02 18:46:43.43 .net
>>242
こういうこと？
URLﾘﾝｸ(jsfiddle.net)
244:Name_Not_Found
20/08/02 19:49:48.51 .net
Web系への転職を考えてCSS設計を学び始めたのですが、
学ぶとしたらFLOCSSか、それとも最近出てきたPRECSSのどちらがいいでしょうか
245:Name_Not_Found
20/08/02 19:55:43.83 .net
>>242
スタイルはセレクタで要素を特定して適用するじゃろ？
そんでセレクタは要素名だけではなく
classやidなども使えるのだよ
246:Name_Not_Found
20/08/02 19:56:08.74 .net
>>244
まずはピュアCSSをきちんと
247:Name_Not_Found
20/08/02 20:29:18.06 .net
>>246
ピュアCSSというと、これといった設計手法などを使わないCSSの記述のことでしょうか
それでしたらある程度学習を済ませており、就活の際のアピールにでもなればと思いまして、
さらにCSSの設計手法を学ぼうと思っています
また、ポートフォリオサイトなどを作っている際も、自分ルールなCSS設計をするよりも
何かしらのCSS設計手法を学んだほうが制作効率がいいのかなとも思っています
なにかアドバイスがありましたらお願いいたします
248:Name_Not_Found
20/08/02 21:01:11.33 .net
>>243
ありがとうございます。不勉強なもので :nth-child() 今日初めて知りました。
1列目も中央揃えにするには :nth-child(-n+2)でいいですかね。
>>245
CSSに↓を書いて
td.center{
text-align : center;
}
2列目の各セルを<td class="center">としても何も起こらなかったので質問させてもらいました。
249:Name_Not_Found
20/08/02 21:26:14.34 .net
>>248
:first-childでいいんじゃね？
250:Name_Not_Found
20/08/02 21:29:44.14 .net
>>247
マルチブラウザ対応の難点を押さえてれば
あんま細かいこと気にしなくていい予感
251:Name_Not_Found
20/08/02 21:50:22.09 .net
>>249
どうもです
擬似クラス1から勉強しますわ
252:Name_Not_Found
20/08/02 22:22:33.01 .net
>>247
FLOCSSもPRECSSも、しょせんは自分ルールなCSS設計のうちの一つにしか過ぎないんだよ
こんなとこでうだうだやってないで、全部試して好きなの使えよ
転職できたらできたで、職場にルールがあればそれを使わないといかんのだし
253:Name_Not_Found
20/08/02 22:36:14.81 wVx5940i.net
URLﾘﾝｸ(jsfiddle.net)
作成予定のサイトはメジャーリーガーのことをまとめるサイトなのですが、ここのアダルトサイトで見つけたRSSリーダー縦スクロールを作成したいです。
RSSについて調べてみてプラグインも入れたのですが、デザインがいまいちでした。自サイトのRSSを縦スクロールで実装するアドバイスをください。お願いします。
254:Name_Not_Found
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時間やっても無理です、アドバイスください。お願いします。