- 真っ白のページから一から作れといわれても全く意味が分かっておらず作れない。
- なにがわからないかわからない
- CSSを勉強するにあたってどんな勉強法がいいのか?
ブログサイトを制作する上で、デザイン的な部分をカスタムするにはCSSの知識は必要不可欠ですが、いざ初心者の人がCSSを触ろうとしても、英語がズラズラと書かれていてなんだかムズかしそう・・
勉強したいけどどうやって勉強したらいいかもわからないし・・
なんて思っている方も多いのでは?
今回は初心者の方でもCSSが身につく勉強法をまとめてみました。ぜひ、参考にしてみてください。
あまり難しくならないように、ざっくり説明すると...
Cascading Style Sheets、カスケーディング・スタイル・シート
の略で、HTML(文書構造)を装飾するファイルの事です。
装飾する例として
- 文字の大きさ
- 文字の色
- 文字と文字との隙間の調整
- 背景色の指定
これらを要素ごとまとめて指定します。
プログラミングとかと比べると難易度は高くないですね。
記述ルールと指定方法を覚えれば大丈夫!
勉強方法
まずはレイアウトが簡単なページをマネしよう
いきなり複雑なレイアウトは難しいので、
レイアウトが簡単なページを真似して「メモ帳」を使って作ってみましょう!
参考書を読んでてもCSSは上達しないです。
CSSは「打って」「表示確認」「打って」「表示確認」の繰り返しです。
ゼロからが無理だったら、
- ヘッダー部分
- メイン部分
- サブメニュー部分
- フッター部分
のようにページを構成している部分ごとに切り分けて作ってみましょう!
その中できっとわからない部分がでてくるでしょう。
その時にcssプロパティについて紹介されている本やサイトを使います。
参考書は下記のような辞典がお勧めですね
ウェブでCSSを調べるならHTMLリファレンスがお勧め
CSSプロパティやHTMLタグリファレンスが役立ちます
以上の事を繰り返し続けていると、ある時から参考書や参考サイトを見なくても、
CSSプロパティが打てるようになりますw
まるでスピードラーニングのように!w
というのは冗談で、先にも書きましたが「メモ帳で直打ち」してください。
入力補完機能の付いたエディタは最初から使ってはダメです。
最初から補完機能付きのエディタを使うとCSSプロパティを覚えません。
わからないところを調べて直接手打ちすることを繰り返すことでCSSを覚えられるのです
ある程度CSSを覚えたら効率化のために入力補完付きのエディタを使ってもいいと思います。
入力補完機能を味わうと、もう「メモ帳」なんて使ってられなくなりますw
まとめ
シンプルなページをマネしてCSSプロパティを「直接手打ちして体で覚える」
覚えたら「入力補完機能付きエディタ」で効率化
CSSを覚えるとブログなどある程度、自分の思い通りのデザインにカスタマイズできるようになります。
また、phpやJavascriptのようなプログラミング言語を勉強すると思えばcssは楽な部類だと思うので頑張って身につけましょう!