といった具合に色を塗ったり
こんなふうに影を付けたり、角を丸くしたりも。
さらにさらに！カーソルを合わせたときにマウスのポインターが変わって、よりボタンっぽくなりました！（クリックしてみてください！）
・・・半年程前でした、僕は「ウェブサイトを作ろう！」と思い立ちました。
簡単に自分のサイトを作成できる方法としてWordPressというものを使う方法がありました。
WordPressを使うと色々なテーマを選ぶことができますが、それは誰でも選ぶことができますので、もし自分だけのデザイン（オリジナルデザイン）に変更する場合は専門的な知識が必要となってきます。
その専門的な知識というのが「HTML言語とCSS言語」です。
HTML言語とはネット上で誰にでも通じる言語で、CSS言語とはHTML言語を装飾する言語、みたいな感じです。
Webデザイナーやプログラマーからしたら基本中の基本でしょうが、素人の僕からしたらさっぱりわかりませんでした。
そこで、自分で本を読んだりネットの講座に登録してみたりして、習得目指して程々に頑張って勉強してみました。
その結果・・・それなりにできるようになりました！！
それが冒頭の装飾です！
もともと理系頭であった僕はプログラミングというものが好きだったみたいです。
まさか半年でここまでできるようになるとは思っていなかったので自分でもビックリです。
長くなりましたが、今回は僕がどうやってここまでHTMLとCSSができるようになったかを説明しようと思います！
まずは優しめの本を読む
おすすめの本を３つ紹介します。
何から始めればいいかわからなかったのですが、とりあえず本屋に行き、直接目で見てフィーリングで本を選んでみることにしました。
デザインがかわいいのとオールカラーで見やすいという事で「たった2日で楽しく身につく HTML/CSS入門教室」という本を購入しました。
丁寧に説明してくれるので、入門編としては最高にわかりやすかったです。
HTMLとはCSSとはなんぞやが、感覚的にも理論的にも理解できました。
この本を見ながら実際にコードを打っていき、一緒にWebサイトを作成しました。サンプルファイルもついていたので、ダウンロードして、まるっきり本の内容と同時進行できます。
そうすることでWebサイトをつくるってこういうことなんだーと感じることもできました。
1つ疑問点をあげるとしたら、「２日」で身につくかどうかって言われたら微妙です。僕は１か月くらいかけて読みました。（毎日コツコツを心掛けていたので。さぼった日もありましたし・・・）
まあゆっくりコツコツやれば理解もしやすいし、挫折せずに読み切る事ができるのを証明しました！
本の中はこんな感じ
吹き出しで説明してくれたり、優しい色合いだったり、とにかく見やすい。
やっぱり最初は優しめな本に限ると思います。
ただ、この段階では「・・・で？」って感じでした。
HTMLとかCSSとかが何かはわかってウェブサイトの作り方は何とかく分かったものの、次に何をすればいいかわかりませんでした。
次に知識を深めようと２冊目に手を出しました。
これも実際に本屋さんに行って選びました。
１冊目よりも難易度が上がっているものの入門編として最適でわかりやすかったのですが、やはり難しい部分がちょこちょこと出てきて半分くらい読んだところでストップしてしまいました。
ここで他の本に浮気をします。
HTML&CSS 標準デザイン講座【HTML5&CSS3対応】
Kindle版で読んだのですが、難易度は一気に上がりました。
ですが、色々なテクニックを身に付けることができました。
例えばフロートというテクニック。
２カラム・３カラムにしたりするときに必要なやつですね。
※2カラム・３カラムっていうのは段組みの事で、メインエリアと、左右のサイドバーのことです。
Webデザインでは基本中の基本ですが、少し頭を使います。でも楽しいです。
これでやる気がどんどん出てきて２冊目の本と３冊目の本を同時進行で読み進めることになります。
このときが一番伸びたかなー。
本の次は動画で勉強
３つの本を読み終えたころ、ふとネットサーフィンしていたらたどり着いたサイトがあります。
それが「ドットインストール」です。
ドットインストールではHTMLやCSS、その他色々なプログラミング言語を３分動画で解説してくれます。
僕は最初JavaScriptという言語を勉強しようとして動画を見ていたのですが、かなり感動して衝撃を受けました。
あ、こんな感じでHTMLって打っていくんだ・・・と。
このとき初めて実感が湧きました。HTMLとはなんぞや、と。
ドットインストールは無料で一部の動画を公開しているので、会員登録すれば見ることができます。
僕は無料の動画を見尽くしてまだほかにも見たかったので、有料会員登録しました。
月額1000円です。
※忙しくてしばらく見れないな、と思ったら一旦解約して数か月後にまた登録してもデータは引き継がれます。
遊び感覚で楽しみながら出来るようになるには
ここまで来たら大分HTML・CSSは使いこなせるようになっていましたが、ダメ押しはこれです。
「Progate(プロゲート)」です。
レッスンをクリアすると経験値がもらえてレベルアップしていくのでゲーム感覚で進めていくことができました。
初心者用のレッスンから上級者用のレッスンまで段階的に細分化されているので、自分の実力に合ったレッスンを見つけやすいと思います。
僕は復習がてら初心者のレッスンから上級者のレッスンまでやりましたー。
ドットインストールとProgate、何が違うの？どっちがいいの？
ドットインストールと何が違うのかを簡単にに言うと（大きく違うのですが）、ドットインストールは動画であること。また説明不足な部分が多くて置いてけぼりになりそうになること。
一方プロゲートのほうは、HTML・CSSのやり方やポイントがかかれているスライドをみて（座学的な）、次にそれらを駆使してコードを打っていきます。（実践）
こちらはかなり優しく解説されているので、とてもわかりやすいです。
てことで、初心者はProgateから始めたほうがいいのではと思います。
HTML・CSSってどうやって使うの？って疑問に思っている人はドットインストールでJavaScriptの動画をみてみると良いです。
HTML・CSSをサラッと使っていく姿がかっこいいですし、具体的に使い方が分かります。
1人で勉強するのが苦手という人は
誰かに教えてもらいながら勉強したいという人におすすめなのは
「プログラミングのオンラインスクールのCodeCamp」です。
オンラインで先生が教えてくれるのでわからないところがあったらすぐ聞けるのがいいですね。
時間を予約してから授業を受けるような形です。
僕は一人で黙々と勉強したいタイプなので、登録しただけでしたが、教えてもらいながらやりたい人は実際に講座をうけてみるのもいいかもしれません。
１回だけ無料で受けることができますので利用してみましょう。
最後に
WordPressのデザインを自分の好きなように変更させるには、もうちょっと勉強が必要かもしれませんが、見出しやサイドバー、フッターのデザインを軽く変更させるくらいだったら出来るようになります！
そしてHTML・CSSを勉強していくと、徐々に力がついていくのが実感できます。
実際にこう言った記事をかくときに
こんなレベルですが、何かわからないことがあったら答えられる範囲でお答えしますので、何でも聞いてください。
では！
コメント