column

ITコラム

a_woderful_stone_steps_of_murugan_temple_inside_the_big_temple-1

プログラミング

2015.08.21

土日でCSS入門!ムダのないオススメ勉強方法をご紹介!

ホームページ作成のために入門レベルのCSSを勉強しようと思っているけど、どうやってやればいいかわからない。そんなお悩みはありませんか?実は、ここ最近は学習環境や、レンタルサーバーなどの発達により、本当に誰でもホームページ作りが独学できる時代になっています。

今回は「CSS」についてです。HTMLとCSSの違いについては、「HTMLがコンテンツ」「CSSがデザイン」と捉えるのがオススメです。HTMLでインターネットにコンテンツを公開する方法を学んだら、次はCSSでオシャレなデザインを作っちゃいましょう!

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

まずはど基礎の定番、ドットインストールでそのまま真似しよう!

こちらのドットインストールというサービスは、初心者向けに大変わかり易く作られたサービスです。動画で丁寧に説明されているため、自分のペースでお手軽に勉強ができます。
CSS入門(全22回)
まずはコチラの動画を見ながら、ひたすら動画の真似をしてみましょう。かなり丁寧に説明してくれるので、何もわからない人でも簡単にできちゃいます。
たまにスピードが早くてついていけないな..と感じたら、動画を途中でとめても全然問題ありません!自分のペースで、ゆっくり進めてみてください。
3時間もあれば、CSSの基本的な仕組みが理解できると思います!わからない部分や難しい部分は飛ばしても大丈夫なので、「とりあえず真似する」くらいの気持ちでやってみましょう!

次は簡単な応用編。問題形式のprogateで簡単な実践をしよう!

こちらのprogateというサービスは、とてもシンプルに要点がまとまっている上に、カンタンな問題形式で学習ができるため、小学校の計算ドリルの問題を解くような感じでHTMLを学ぶことが出来ます。
問題の前には説明もあるので、上述のドットインストールの内容を暗記している必要はありません。またゼロから始める気持ちでやってみましょう!
このサービスのなかで、とりあえず
HTML&CSS 基礎編
を完了させれば、基礎としては十分なレベルになります。
こちらも2〜3時間もあれば十分にできるはずなので、是非お試しください!

あとは仕上げ!書籍を一冊選んでそれを書き写してみよう!



仕上げとして、書籍を一冊選んでそれを書き写してみましょう。これはまるまる1日くらいかかってしまいますが、かなり力がつくと思います。
おすすめ書籍は上の一冊。完全な初心者向けではないですが、ドットインストール等での学習を終えた方であれば「これ知ってる!」みたいな内容ばかりになります。
同じようなことが書かれているにも関わらず書籍での学習をおすすめする理由は、「様々なケーススタディに触れられる」からです。CSSは、仕組みを理解しただけでは中々思うようには扱えません。実際に実践でどのような使われ方をしているか、ケーススタディを通じて学ぶことでようやく理解ができます。
こちらも、とりあえず読みながら書き写すのがオススメな使い方。細かいことは気にせず、本の言うとおりに書いていきましょう!

根気も大事!たくさん作って数をこなそう!

ここまでくれば、もうかなりCSSについての理解が深まっているはず。あとは以前に学習したHTMLの知識と合わせて何かを作ってみましょう。「特に何か作りたいものがない…」そんなことを思ったら、オススメなのは「好きなwebサイトを一つ真似してみる」ことです。
「webサイトの真似」のメリットは大きく2つあります。1つは、自分の好きなデザインの作り方を学べること。そしてもう1つは、そのサイトのHTMLファイルとCSSファイルを覗けば作り方がわかること。です。まずは自力で試して、わからなかったらそのサイトのHTML&CSSファイルを見てみる。といったことを繰り返していけば、間違いなくかなりのレベルアップが見込まれます。

最後に友達に公開すればもっと楽しくなります!

「真似したサイト」の公開はできませんが、オリジナルでサイトを作って公開することは、大きなモチベーションになります。
Google Analyticsなどのアクセス解析ツールを使えば、どのくらいの人が自分のページを見てくれているかもわかるので、とても楽しいですよ!さらにアフィリエイトサービスも使えば、お小遣い稼ぎなんかもできちゃいます。
是非CSSをマスターして、あなただけのオシャレなwebサイトを作ってみてください!

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ