質問板

スレッド一覧  

      

背景画像の固定について。  

自分調べたのですがどうしても出来ません。分かる方教えて下さい。body background="" bgproperties="fixed"は入れて見たのですがどうしても出来ません。✉️

no name
10/25 15:45    

25  no name

分かりました、そうですね、申し訳御座いません。また御手数とお時間お掛けして申し訳御座いませんでした。1から10まで解説を付けて説明頂き、私でも分かるように時間を掛けて頂きまして本当にありがとうございます。優しい方に教えて頂けて幸いです。また自分で調べてみます、有難う御座いました。

02/28 22:00    

24  no name

ヤだよ
キミのここまでの態度だと、「要領を得ないキミの指示を心を砕いて解釈し、勉強する気のないキミの代わりに、他人の成果物のタダ乗りをする片棒をロハで担げ」って言ってるようにしか聞こえないしね

まずはチューターサイトを良く読みなよ

とはいえ、フツーはCSSファイルを別に作ることを推奨してるから……
「CSS styleタグ style属性 書き方」とかで検索掛けてみなよ
コピペ脱却せんと「他人の成果物のタダ乗り」のままだよ

02/28 21:45    

23  no name

始めから全て直して頂いて有難う御座います。どう此方の口から上手く説明して良いか分からず…。またどう上手く組んだら良いのか分からず他サイトから借りさせて頂いたのですが…。お手数お掛けしてしまってすみませんでした。何度もお手数お掛けしてしまって再度のお願いに為ってしまって申し訳無いのですが、鍵部屋で1度スレッド試しに作ってみたいと思うので宜しければお手すきの間で構いません、ご指導頂けませんか?親記事にメルフォ置いておくのでもし気が向けば来て頂きたいです。再度拝見しました、私の様な無知な者に対して全てに解説を付けて頂いてお時間頂いてしまい申し訳ありません。何度も読み返しているのですが全てきちんと理解出来ているとは言えず…、まだ教えて頂けるのならばお願い出来ればと思います。

02/28 20:24    

22  no name

>>22
> ほい、よーやっとおかしいトコ直し終わった……そもそも他のチューターサイトからのコピーで全然言う事聞いてないね、キミ
CSSで指定してるセレクタ「.wrap」と「.conts」がどちらもHTMLsource内にないんだもん、反映されるのはpへのpaddingだけだよね
divにclass="wrap"を持たせたものと、class="conts"を持たせたものをそれぞれ用意してみたよ
んでだ、何がおかしいかって……意味を考えずにサンプルをただ持ってきてるから、改行とかインシデント【行の頭を落として可読性を高めるアレのこったね】がまるまる残ってるんだよ
改行は全部投稿時にbrタグに置き換わるんだから、styleタグ内に混ざっちゃアカンでしょ
後、意味のない・デザイン的におかしな指示とかもね
無駄な空白も関数の引値おかしくしたりするから、とりあえず削っといたよ

.wrap {
margin: 30px;←これいる?marginは本来の表示領域(画面の左上)から始まるから、30ピクセル分だけ上と左に隙間ができちゃうよ?
}

.wrap::before {←コロン二連(::)で指す疑似要素のうち、beforeは「コンテンツのその前」の意味、だから以下の指示を全部.wrap内に納めちゃう このままだと画面全体(先・後レスなどを含めて)を画像の下に敷いて隠しちゃうね
content: "";←スペースですらない空なら要らないよね
display: block;←他板はdisplayの文字列がNGなんだ
position: fixed;←「画面に対して固定」位置の意味だね
top: 0px;←その場所が上から0ピクセル
left: 0px;←左から0ピクセルから始まるよ、って言ってる
z-index: -1;←これ、他の要素との重ね合せの優先度=手前〜奥のどこに置くかを「−1」……ずっと奥だってことね
width: 100%;←%は使った場所で示す長さが変わるから気をつけてね、ここは問題ないけど
height: 100vh;←vhは「画面の高さ(100で一画面分)」上と合わせて指定した領域は「画面一枚分」っていう大きさだね
background-image: url(https://img.freepik.com/free-vector/watercolor-abstract-background_220290-24.jpg?w=1060&t=st=1709103970~exp=1709104570~hmac=fb0edebe8e8e7ddd929adc714e8e3f51e3ffba1fe634bc51d35ba1bebd192f85);←ちゃんと直リン可能なとこから貰ってきた?俺は知らんよ?
background-size: cover;←「指定した背景をどのくらいの大きさに広げるか」、今回は「縦横比を崩さず・領域いっぱいに隙間なく」の指定だね 縦横の長さ(ディスプレイのピクセルと画像のピクセル)の比によって縦横のどちらかが切れたりするよ
background-repeat: no-repeat;←領域の隙間を埋めるのに背景を繰り返すかどうか……だから、別に要らないね
}

.conts {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;←四ツ角を全部半径10ピクセルで丸めるよ
font-size: 40px;←フォントサイズは高さを参照するからね
text-align: center;
padding: 5%;←内側上下左右5%をパディング【文字の書かれない範囲】にするよ 行数によって可変する上下もだから、実際に使うまでどのくらいの余地が出来るかは分からないよ
max-width: 800px;←領域の最大幅を800ピクセルに限定するよ 横長のフルHDモニタ・スマホ横持ちとかだと余裕で越えちゃうけど大丈夫?
margin: 0 auto;←四辺指定はパラメータ二つのとき、上下・左右の順で指定するよ 縦マージンが0、横マージンが自動ってことね
}

p {←セレクタ指定にclass・id等ないから、表示ページの全pタグのうち、class・idを指定してpaddingを定義していないもの全部に適用されるけど大丈夫?
padding: 20px;←パディングは20ピクセルを取るよ
}


Resources←これFirefoxでしか使わないんじゃなかったかな?しかももうサポート・推奨してなかった気がする
後にurl・パスを続けて、参照先を読み込んでおくとかそんなだったはず……まあ要らないね

んで、そのあたりを直したのがこちら↓

ここはdiv class="wrap"にしたから、.wrap部分が反映されるよ。まあ、本来ならここに書く必要はないかな……
ここはdiv class="conts"にしたから、.conts部分が反映されるよ。字がデカ過ぎない?テスト用?それともタイトル的なのでも入れるのかな?

>>22
↑他のレスの影響を消したい時は自レスへのアンカー打って、リンク先を見るのが良いね

02/28 19:30    

21  no name

上記↑なにが間違ってて機能しないのでしょうか?

02/28 16:13    

20  no name


02/28 15:40    

19  no name

HTMLのタグとCSSの並べ方が良く分からずどう親記事に並べたら良いのか教えて頂けませんか?

02/27 14:27    

18  no name

背景固定 cssで検索すれば全て出てきます。調べた内容を流し見してませんか?内容きちんと読んでますか?

02/27 11:38    

17  no name

背景固定のコメント部分だけスライド出来る様なタグの方法知りたいです。

02/27 10:49    

16  no name

自分で調べても分からないなら聞いてもきっと分からないですよ。

02/24 17:39    

15  no name


私の説明が悪くて申し訳ありません。他の方のまるまる盗みたいというわけではなく、デザインの方法を学びたいのですが、文章で表現する事が出来ないため失礼ながら他の方のスレを挙げさせて頂ければとお伝えさせて頂いたつもりだったので、申し訳ありません。

02/24 17:16    

14  no name

さて、ひょっとしたら……
全体の背景にはほにゃほにゃの画像を置いて、各コメント部分にはふにゃふにゃの画像を半透明で置きたい……たとえば、全体を木目調の複雑なパターンにして、コメント部分には焼印での焦がしみたいな下の木目がうっすら見えるまた別の複雑なパターンを乗せたいとか……ってことなのかな?

cssの方で画像の透過率を調整することはできないんだ
たとえば、今ココの背景になんらかの画像を指定したとして(アプロダ使いたくないんで割愛)、それが透過pngだったとしても、透過部分は背景(今なら緑赤青の→グラデ)をそのまま透かすし、非透過部分は背景とは全く関わらずに指定された色・形を表示しちゃう
pngの半透明の指定(アルファチャンネル設定)は……反映されたりされなかったり、ブラウザによってサポートが異なってたはずだ

もちろん、これに不満を持っている人は多くて、数年前に重なって表示されているはずのものにより高度な重ね合わせをするっていう機能が実装されてる
それがミックスブレンドモードmix-blend-modeだ
……ただ、コレはまだ勉強中で全然使い方が飲み込めてないんだよね笑

02/24 16:55    

13  no name


もちろん、別にグラデーションにする必要もない
各ブロックのbackgroundのcolorをrgba値で表現したり、opacity(指定要素内コンテンツ全体にも同じ不透過率を設定する、子要素には継承されない)を使ってもよい

↓たとえば……

今度はここの領域の背景全体を255,0,0,0.4……赤で不透過率0.4だね……で覆ってみたよ
赤のみのはずなのに、かなり暗く見えるよね?
透過とは言っても実際には色の重ね合わせなので、思ったような効果を狙うのは難しいんだ

02/24 16:22    

12  no name


んで、こっからだけど……p.mainを指定すると全部のコメント部分が切り替わっちゃうから、それぞれのコメント部分をdiv id=うんちゃらで囲み、代わりにそれを指示するよ
classの指定はドット(.)だけど、idの指定はハッシュ(#)だからね
pタグはその内側(子要素)に、フレージングコンテンツのタグ……改行brや小字smallみたいな文章修飾とかだね……しか入れられないから、今回のdiv#verticalgradientはp.mainの外(次)に弾かれるよ
↓ほんで、これ

↑同じくlinear-gradientだけど、今度は向きをto bottom……下方向へ、って意味で180degと一緒……色指定にrgba値を使ってる
rgba値は赤緑青の指定(0〜255、大きいほど色が強い)に加えて、アルファ値(不透過率のこと。0〜1、大きいほど不透明)も指定するんだ
255,255,255,0.8……不透過率0.8の白、ちょっとだけ透ける白ってことだね……から始めて、0,0,0,0.2……不透過率0.2の黒、かなり透ける黒で終わるっていう指示だよ
body背景の緑→赤→青のグラデーションが透けて見えるの、判るかな?

02/24 15:10    

11  no name

「これを真似したい」って言うのは如何なものかと……少なくとも俺は手を貸したくない
権利がどうとかいう以前にマナーの問題でね

「自分の中にあるものを形にするための技術を学びたい」っていうなら協力してあげたいけどさ
特にここの独自ルール(禁止ワードとかね)のお陰でできること・できないこともあるわけだし、知ってることを伝えるのはやぶさかじゃないよ

さて……
まずは↓でbodyのbackgroundにlinear-gradient……線形グラデーションだね……を指示してみるよ

↑()内のパラメータは順に角度(下から上が0deg、時計回りに360degで一周。他にもいろんな書き方があるよ)、#3c3から始めて、50%の所で#c33になって、最終地点で#33cになるよ、って意味だね
これをひとまず背景画像の代わりにしようか

02/24 14:58    


スレッド一覧  

雑談趣味別なりきりアダルト
全カテゴリ一覧

… ヒトリゴト …


リニューアル版

 TOP

(C)i-eden