長文派なのかも
萎:誤読・誤解・無理解・知識の不足に起因するロールバックの必要な誤り、カタカナ語のひらがな置き換え、過多な誤字脱字、擬音による動作の表現(形容詞・副詞的用法を除く)
御意見御要望等・質問箱設置中[〶]
あっぶね、上げ上げ
しんどいの変わらず、上げだけ
春終わる前にはも少しなんとか
ぐえー、しんどい
ひとまず上げだけ
さて……
親記事には何を書いとこうかな？
萌は各プレイ毎ということで、萎だけ書いとけば良いだろうか
とはいえ、あまり萎でプレイに縛りを付けたくはないんだよなぁ……
誰か良案ないかな？
こにゃちわ
どう？おまいらこーいうの好きそうかな、と思ったんだが
返事ないんかーい
何コレ笑
基本的な装飾は終えたので、後は所謂プロフィール的な部分を構築する
とはいえ、プレイ内容によってボディイメージや名前なんかは変えるタチだから、特に書くこともないんだよね……
あ、むしろ変えていく要素やそれを使うネタを纏めたプロフィール的なののテンプレートを作るべきなのか
個人的には左右交互になってるデザインが好きなんだが、ディスプレイによる差が出やすいんだよな……
そうだな、左側に自PCの要素を纏め、右側に相手PCに求める要素を纏めてみるのはどうだろうか？
横長のモニターなどであれば「左右に別れた」感じに、縦長のモニターであれば「交互になった」感じになるかもしれない
簡単に試してみよか
div.left{position:relative;left:-20%;text-align:end;border-bottom:double 3px var(--syscolor);}
div.right{position:relative;right:-20%;text-align:start;border-bottom:solid 1px var(--syscolor);}
あ、そか
全部相対表示にしてるから、これだと横長でも60%=24字分が重なるのか うっかりうっかり
なら1人分のを纏めた方がいーね
ちいと窮屈だな……bottomにだけmarginかまそか…1remでいーべ
っと、widthを80%にしとくの忘れてた
てか%じゃなくてdvwにすべきだな
後は…まあ、こっから先は趣味の領域だよね
春らしく〜ってんで色決めたんだから、他にもちょいと春らしい要素が欲しい
んー、detailsでも弄るか
detailsのアタマのダッセェ三角をまず外そう
details > summary{list-style:none;}
ほいっと…でも、これだけじゃあ味気ない
開くのに合わせて「花が咲く」なんてのはどーだろ
……似合わない？うるせぇな笑
開いた状態[open]で指定して、疑似要素::beforeなり::afterなりのcontentに「花」を作りゃあええんよな
つまりこう
details[open] > summary::before{content:"\273f"}
\273fってのは✿のことな
&#「10進参照数値」→\「16進参照数値」に置き換えなきゃなんね
みんな大好き、もう意味もすっかり忘れてるだろう「〜」なんかは〜(10進)だから、\301c(16進)ってことね
もっとラクに言っちゃうなら、『unicodeエスケープシーケンスからuを抜け』ってことで
さて、このままだと文字色で花というより葉っぱみたいだから、桜色にでもしときましょか
文字色hsl(120deg,93%,79%,1)から色相degだけ変えればトーンが変わらないのだけど、それじゃちょいと濃すぎるよな
一応試してみっか
色相は…330degね
✿
んー、別に悪くないなぁ……
じゃ、この色で
ただ、このままだとあらゆるdetailsに桜咲かすのもバカっぽいし、小さくてつまらん(気付きづらい)ので、class="cherry"とし、開いた瞬間4倍角→徐々に標準サイズになるようにしてみる
……のだが、残念ながら上手くいかんな
どうやら疑似要素のbefore・afterに対してのtransitionは無効らしい、今のところ
(非open時はcontent:""(空)でfont-size:4rem、transition掛けてopen時のcontent:"✿"font-size:1remとすれば大丈夫かな、と思ったのだが……)
しゃーないので倍角font-size:2remにしてp.mainのpadding分を埋めるだけに留めることにする
details.cherry{position:relative;left:2rem}
で常時左から右へ2rem移動させつつ、
details.cherry[open]{left:0rem;}
[open]時にはこれを解除、倍角✿を左端に合わせる
まとめるとこう
details.cherry{position:relative;left:2rem}details.cherry[open]{left:0rem;}details.cherry[open] > summary::before{content:"\273f";color:hsl(330deg,93%,79%,1);font-size:2rem;}
さて、どうでしょかね花を咲かせましょ
どうなった？
うーんガタつきが出るねぇ
レイアウトの崩れが見付かったときは、疑わしい要素のbackgroundを変えて確かめてみると原因が見つけやすい
1remから2remへの変化が原因だな、こりゃ
なら最初からbeforeに2remで、かつ、表示させない状態(正確には「透明で読めない」状態)にさせとけば……ガタつきも無くなったな
合わせてleft:2remなんかも止めて……最終的にはこちら
details.cherry > summary::before{content:"\273f";font-size:2rem;color:transparent;}
details.cherry[open] > summary::before{content:"\273f";color:hsl(330deg,93%,79%,1);}
さてさて、これでcolor:hsl(120deg,43%,39%,1)の文字色使うよう指定してるトコが3箇所になったね、とゆーかしたね
これらを変えようとなったときイチイチちまちま変えるのも面倒だし、まとめてカスタムプロパティで指定しちゃいましょ
疑似クラス:rootにて、--syscolorとでもしますか
念の為、@propertyで型宣言もしたろ
:root{--syscolor:hsl(120deg,43%,39%,1);}
@property --syscolor{syntax:"<color>";inherits:true;initial-value:hsl(120deg,43%,39%,1);}
っと思ったら、syntax内の<>をタグと認識すんのか、クソかよ
ほんで、この色使ってるとこ全部--syscolorに書き換えればOK…の筈が反映されてねぇな
なぁんだ、var()を忘れてたってオチか笑
color:var(--syscolor)ね
いいんよ〜もっばらこーして遊ぶのが楽しみってとこもあるしね
こんなでも誰かの助けになってるのかと思えば、まあモチベーションも上がるってものでね、へへ
編集中なのにすみません､質問板で諸々回答されていた方でしたらひっそり参考にさせていただいておりました｡ひとつお礼を申し上げて退散いたします｡有難う｡
投稿者名・投稿時刻なんかも変えちゃうか
これらは大して目立つ必要のないところだから、さっきの1行1列目そのままこの色でいいんじゃないだろうか常に左側(グラデの薄い側)にある訳だし
つまり、color:hsl(120deg,43%,39%,1)だ
えーと、div.resname(【】)とその子要素のfont内が投稿者名、span.restimeが投稿時刻だったっけ
違った笑
span.noteが投稿時刻だな
div.resname{color:hsl(120deg,43%,39%,1); > font{color:inherit;}}
span.note{color:hsl(120deg,43%,39%,1)}
ついでに>>Xで自動生成されるリンクが主張するのもなんかヤなので、p.main aにcolor:inherit;(colorプロパティを「継承する」=親要素のcolorそのまま)、text-decoration:none;(傍点傍線といった修飾の解除)text-shadow:unset(text-shadow……背後にあるボヤッとしたウザいのをunset→既定値=「なんもなし」に戻す)を入れてしまおう
この際、元の指定がp.main a{}(p.main以下にある子要素a全て)と無駄に詳細度が高いので、全称指定とかしても元の修飾が優先されちゃうので注意だ
あと、レス番が流石に読み辛いので
span.res a{color:hsl(120deg,43%,39%,1);}
で色を揃えてやろう
今度は文字色だ
まずは標準文字色を色々変えて試してみる
基本としたpalegreenがhsl(120deg,93%,79%,1)ってことだから、文字色は彩度を50%以上・明度を40%以上落として、5%刻みで羅列してみよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよ
下ほど彩度が下がり、右ほど彩度が下がる…疲れた
これがいいかな……ってことで、早速body{color:hsl(120deg,33%,24%,1)}に変更っ
背景は…ペールトーンに色相変えない弱グラデなんかおまいら好きそう
春らしくpalegreenにでもしようかな
ひとまず簡単にbody{background:palegreen;color:black;}を突っ込む
検索したところ、palegreen(#98fb98)のhsl値は120,93,79とのこと
早速palegreenをhsl(120deg,93%,79%,1)に置き換え
hslaで表せば、彩度s・輝度l、不透明度aの調整だけで同色グラデや同色相配色がやりやすい
背景グラデはあんまやりすぎてもきついし輝度79%からの±10%とでもしとこか
アスペクト比の違いがあることも考えて、線形グラデの角度はワード指定のto right bottomにしとこ
ほんでグラデ乗せるのは「枠」になるブロック要素
これでレス数増えたりスクロールさせてもグラデは変わらん
div#BG{position:fixed;left:0px;top:0px;z-index:-1;width:100dvw;height:100dvh;background:linear-gradient(to right bottom,ほにゃらら;}って感じでな
ここでstart end指定できんのは手落ちよな
「start側に濃い字が溜まりやすいから薄くしたろ」ってデザインするのは珍しいことじゃないだろに
ともあれ、左側0%を輝度+10%、100%で輝度-10%で試してみる
つまりはこう
:linear-gradient(to right bottom,hsl(120deg,93%,89%,1) 0%,hsl(120deg,93%,69%,1) 100%)
思ったより10%デケェな笑笑
7%ぐらいにしとこっと
:linear-gradient(to right bottom,hsl(120deg,93%,86%,1) 0%,hsl(120deg,93%,72%,1) 100%)
p.main{padding:2rem}で上下左右に2字分の余白持たせて、読みやすい……けど、1行36字は半端過ぎる
全体幅100dvw÷字数44=2.2727…の循環小数か
半端は大抵ロクな事にならないんだよなあ
まあ長々考えるのも面倒だし、calc()関数ブチ込みましょ
html{font-size:calc(100dvw / 44);}でバッチリ
これで>>1のdetailsの後、p.mainから外れたところは40字じゃ余るよね
ちゃんと44字に……なってるな、よしよし
そいじゃp.mainでは40字になってるか確かめますか
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよらりるれろ
問題ないね
これでどの環境で見ても行辺り40字……PCでブラウザウィンドウを狭く表示させてる人には辛いかな
まあ、そういう人は他の作業並行してたりして返事もおっそいから気に留めないってことで
←→