cssを作成してみたのですがよかったらアドバイスをください

Today:1 hit、Yesterday:1 hit、Total:5206 hit

Best : 1 , Updated： Jan 1, 2021, 12:55:01 AM

https://uranai.nosv.org/u.php/novel/w2mvfc5wks1/

僕もCSS作成は初心者なのですが……
文字が少し見にくいかと

改善方法としては、
背景透過を無くすのが一番ですね

ですが、その方法になりますと
後ろのハートの画像が見えにくいです
なのでそこは自由なのですが……

はちと様がもし、
背景透過が良いのでしたら
文字色を変更すると見やすいですね
(背景のピンクより濃い色や
寒色系の色などが良いと思います)

その他はあまり問題はありません
なので大丈夫ですよ(o´∀`)b

長文失礼しました<(_ _)>

nemunemusama
Nov 20, 2020, 8:57:40 PM Flag Link

私はCSSを作ったことはないですし、完全に個人的な意見ですが…
［良いところ］
・可愛い
・フォントと背景が合っている

［改善してほしいところ］
・文字が見えにくい(色が背景に同化している)

私はこんなふうに思いました

20070805
Nov 20, 2020, 8:58:36 PM Flag Link

成程。。お二人共有難う御座います
文字の見難さは私も思っていましたが、矢張りきちんと見易くするべきですね、改善してみます。

w2mvfc5wksp0
Nov 20, 2020, 9:07:40 PM Flag Link

少し色を濃くしてみました。まだ見辛いですかね。。？

w2mvfc5wksp0
Nov 20, 2020, 9:26:54 PM Flag Link

さっきよりかは良いかと……

nemunemusama
Nov 20, 2020, 9:29:09 PM Flag Link

今度のはどうですかね？
見易いですかね？

w2mvfc5wksp0
Nov 20, 2020, 9:32:18 PM Flag Link

はじめまして。
普段CSSで遊んでいるものです。
あくまで自分の感想ですので、参考までに。

良いと思った所
・画像が可愛い。画像選びのセンスがあって羨ましいです。
フォントとの組み合わせもいいと思います。

変えた方がいいと思う所
・全体的に文字が見づらい。
色が少し薄い気がします…。
・リンクと普通の文字の色を変えるとわかりやすいです。
特に、本文の中にリンクを貼った時に紛れてしまうので、個人的に変えると良いかなと思います。

具体的な改善例
・文字の色
リンクを#9c9cadにするなど。

色は完全に私の好みですが、
これだけでも、見やすくなると思うので試してみてください。

白っぽい背景に薄い色は見づらいので、かなり濃くして良いと思いますね。

・背景の透明度
今は、
div#wrapper{background: rgba(255,255,255,0.5);border:0;}
となっているかと思いますが、0.5を0.7などに変えてみてはどうでしょうか。
ちなみに、0〜1の間で設定できるので、色々試してみてください。

あと、CSSに
input[type=radio]{visibility:hidden;}
を入れると、選択肢のボタンが画像のみになります。

これは私個人の意見なので、色々な人に意見を聞いたり、デザインなんかを見ながら作っていくといいと思いますよ〜。

長文&割り込み失礼しました。

em7
Nov 20, 2020, 10:05:25 PM Flag Link

ものすごく参考になりました。。有難う御座います
早速改善してみたいと思います

w2mvfc5wksp0
Nov 20, 2020, 10:24:50 PM Flag Link

em7様、私不躾ながらにも貴方の作品を拝見させて頂き、とってもお洒落で綺麗なCSSに見入ってしまいました。
そこで一つ質問なのですが、URLをクリックした瞬間、影が出てくるコマンドはどう打てばいいのでしょうか？また、どうしてそうなるのかを教えて頂ければ幸いです。

w2mvfc5wksp0
Nov 20, 2020, 10:42:07 PM Flag Link

おーー！！かわいいと思いますよ！！
私はすごい好きです！
単純なデザインとか私は苦手なので尊敬します！！！

Mahta〚色彩〛
Nov 21, 2020, 2:31:26 AM Flag Link

有り難う御座います！

w2mvfc5wksp0
Nov 21, 2020, 2:56:47 AM Flag Link

見てくださるとは…ありがとうございます。
そう言ってくださるとこちらも嬉しいです。

リンクをクリックした時に、影をつけるには、
a:hover,a:active{
text-shadow:1px 1px 0px #ccc;}
でつけられます。

「:hover」は、カーソルが上に来た時、「:active」はリンクがクリックされた時というセレクタになります。
その前に付いている「a」というのは、ごく簡単に言うと、リンクの事を指します。
上のようにする事で、リンクをクリックした時だけ影をつけることができます。
厳密には、a:hoverとa:activeは違いますが、スマホなどからだと、ほぼ同じように見えるので、私はまとめて設定しています。

text-shadowは、左から、「影の左方向のずれる幅」、「影の下方向のずれる幅」、「影のぼかし具合」となっています。
カラーコードとかも変えると雰囲気も変えられます。

詳しくはCSS辞典に載っているのでそちらを確認してみてください！
返信遅くなってしまってすみません。
他にも何かあればお聞きください〜

em7
Nov 23, 2020, 10:17:54 AM Flag Link