参考にさせてもらおう!
 まずはコピペでCSSを書いてみる

にいどめ

はじめてページを作った時、公開する前にプレビューボタンを押すと―――

くま

黒文字ばっかり…
なんかだ暗いな…

パンダ

あちゃ~、
我ながら読みづらい!

…なんて経験ありませんか?
これらは全て、CSSを記述することで改善できます。

難しい部分は分からなくても大丈夫!
出来ることからスタートしましょう。

わからないなら…




初心者でも心配なし!

コピペでCSSを始めよう

こんなタイトルを付けると……

何も知らないならまず勉強しろよ!
出来ないなら金を出して依頼しろ!

とお叱りを受けそうですが、時間や予算の面から自分で簡単に作りたいと思っている人も多いですよね。

でも問題は、どうすればいいか分からないこと。

そのような場合、インターネット上にいる方々のお力を借りれば、自分でデザインすることが出来ます。

と言っても、「誰かが無料で作ってくれる」なんて意味ではなく……

人間1

このコードをコピペして使っていいですよ~

人間2

こんなコードを作ってみたので活用してください

……のように、
インターネット上には「これをコピペすれば、このデザインが表示されます」と、CSSコードを公開してくださっている方々がたくさんいるのです。

初心者にとってまさに救世主!
当サイトも、どの部分がどのWebサイト様の知恵をお借りしたか覚えていないくらい活用させていただいております。

ただし簡単に「コピペする」と言っても最低限の知識は必要ですよね。
コピーしてもどこへ貼り付けるか等、勝手が分からなければ使いようがありませんし…。

そんな最低限のことは、下記のページでサクッと補ってください。

CSSをマイルドにお伝え!

どういうもののこと?
書き方やクラス名って?…etc

理解を深めるまでの取っ掛かりにしてください。

難しく考えずに…

体験してから学べば良し!

何となく仕組みを把握したら、実験として下線などのCSSコードをコピペしてみましょう。
知識として知っておくのと、やってみることは全く違います。…あ、今良いこと言った。

ちなみに下記はシンプルな黒い下線のCSSコードですので、入力した文字にこのCSSを適応させてみてください。

まっさらな「~.css」ファイルなら、どんなコードをコピペしても反映されるはず。自分で貼り付けたものがきちんと表示されるとモチベーションが上がりますよ!

と言っても、
コピペで始めると頭に残りづらいのも事実。
なにせコピーして貼り付けるだけなので、コードの意味を理解する間さえありません。

分からないことだらけなので、どこがどうなれば理想通りの表示になるのかすら分かりませんよね。

トラ

だからコピペの前に勉強しろって言ってんだろ!

と言われそうですが、やはり時間が掛かりすぎるので、私は「ここをどうすればいいんだろう…?」と疑問に思った箇所から学ぶという方法をおススメします。

「文字をもっと大きくしたいなぁ」と具体的なイメージを持ってコピペしたならば、「文字を大きくするには、ここを変更すればいいのか?」と自分が調べたい内容も分かりますよね。

それこそCSSを学ぶ入り口!
必然的に、より理解していくことへ繋がるのです。

これから個人サイトを作ろうと考えている方、必要に迫られてから学ぶのも手ですよ。
はじめから難しい道を歩まず、出来ることから始めていきましょう!

お世話になってます

おススメなデザインサイト様

最後に、CSSコードのデザインを公開されているおススメサイトを3つご紹介したいと思います。

以下の3サイト様は私のお気に入り!
後々に当サイトでもコピペ用CSSコードを紹介しますが、下記Webサイト様で公開されているコードのアレンジ版も含まれています。

どの箇所が元のコードと違うか比べてみると、またひとつCSSを理解できるはず!

デザイン量が多くて見やすい!

【サルワカ】さま 

シンプルかつオシャレで好き!

【Yuru Warp】さま 
【NxWorld】さま 

公開されているCSSコードを有効に利用して、出来るだけ見やすいページを作っていきましょう!


ご覧いただきありがとうございました!