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時間やっても無理です、アドバイスください。お願いします。
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の勉強にも手を付けようと思います。
ありがとうございました。