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

css
今日:1 hit、昨日:1 hit、合計:2880 hit

最高ランク : 1 , 更新: 2020/12/31 21:55:01

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

w2mvfc5wksp0


投稿を違反報告 / ブロック



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


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

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

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


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

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


nemunemusama
2020/11/20 17:57:40 違反報告 リンク


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

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

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


20070805
2020/11/20 17:58:36 違反報告 リンク


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


w2mvfc5wksp0
2020/11/20 18:07:40 違反報告 リンク


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

w2mvfc5wksp0
2020/11/20 18:26:54 違反報告 リンク


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

nemunemusama
2020/11/20 18:29:09 違反報告 リンク


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


w2mvfc5wksp0
2020/11/20 18:32:18 違反報告 リンク


はじめまして。
普段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
2020/11/20 19:05:25 違反報告 リンク


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


w2mvfc5wksp0
2020/11/20 19:24:50 違反報告 リンク


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


w2mvfc5wksp0
2020/11/20 19:42:07 違反報告 リンク


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


Mahta〚色彩〛
2020/11/20 23:31:26 違反報告 リンク


有り難う御座います!

w2mvfc5wksp0
2020/11/20 23:56:47 違反報告 リンク


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

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

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

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

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


em7
2020/11/23 7:17:54 違反報告 リンク


有難うございます
とても参考になりました。
CSS辞典も見てみようかと思います


w2mvfc5wksp0
2020/11/24 22:40:10 違反報告 リンク


文字が少し見にくいかと、思います。
でも雰囲気はとても素敵なので、とてもいいと思います!


そら。
2020/11/25 3:42:18 違反報告 リンク


雰囲気を重視視し、文字の濃さはこれで行こうと思っています。
ありがとうございます👍🏻


w2mvfc5wksp0
2020/11/26 16:09:45 違反報告 リンク


コメントをするにはログインが必要です : ログイン


4 一部分だけフォントを変える
2021/07/10 1:57:29 w2mvfc5wksp0

占ツクのCSSで、タイトルや説明文だけなど一部分だけ別のフォントにすることは可能...


4 CSS
2021/07/09 5:36:10 w2mvfc5wksp0

配布をするのではなく個人で使う分にはフリーでない素材を使ったCSSを作品に使うの...


4 フォントを入れたい
2021/01/06 8:45:20 w2mvfc5wksp0

自由の翼フォント(https://tanukifont.com/jiyu-no-tsubasa/)をCSSに組み込みたい...