プログラミングと聞くと、すごく難しそうですよね。
実は、私もそう思っています。
「興味はあるけど、とっつきにくい」部類なのでなかなか始められずにいました。
ですが、自分で壁を高くしている可能性も若干あると思うので、今回挑戦してみます。
HTML・CSSをやってみようと思ったキッカケ
私は、このブログを運営していますが、プログラミングの知識は全くありません。
基本的にWordPressではHTMLやCSSの知識は必要ではないので、運営はできています。
ですが、ときどきトラブルが起きることがあります。
そんな時に、自分でトラブルを改善できたらいいなと思いました。
他にも、ブログの表示のスピードをあげたり等、ちょっとした改善に知識があった方が便利なことがあります。
そんなわけで、一度どこまで理解できるかやってみようと思います。
利用サイト【paizaラーニング】
今回利用したアプリは、「paizaラーニング」のTHML/CSS入門編です。
paizaは、HTML学習を無料でできる範囲が広そうなので選んでみました。
無料で使うことができるのですが、会員登録をしないと途中までしか受講することができないので、まず登録をしました。もちろん無料です。
動画を見て、最後に練習問題を解いて次に進むという形式になっています。
動画の解説はオリジナルのキャラクターが行ってくれて、CVもプロの声優さんです。
無料とは思えない力の入れ方です。
動画の下には、補助の説明や参考になるサイトのリンクがあって、とても便利です。
paizaラーニングの他にも、無料学習サイトを紹介した記事もありますので、気になる人は読んでみてください。
学習内容
学習内容は、大きく分けて3つに分かれており、その中で細分化されて構成されています。
1・HTML/CSSを理解しよう。ーーー4項目
2・CSSの基礎を学ぼう。ーーーーー6項目
3・HTML要素を学ぼう。ーーーーー６項目
全くの無知なので、当然最初からやっていきます。
HTML/CSSを理解しよう
まずは、基本からですね。
最初に、タグ・コメント・インデントなどの説明してくれます。
全部を書くことはできないので、HTMLのメインになる「タグ」の部分の例を書いてみます。
例
<h>これは見出しタグです</h>
↑開始タグ ↑見出し ↑終了タグ
タグというのは上のように <◯>（開始タグ） </◯>（終了タグ） でセットになったものです。
そして、◯の中に何を入れるかによって、タグの意味が変わってきます。
上の例の場合は、「ｈ」が入っています。
この「ｈ」（ヘディングの略）は見出しを表します。
開始タグと終了タグの間に入れた文字の「これは見出しタグです」が反映されて表示されます。
「タグ」には「ｈ」の他にもいろいろな種類があり、このタグを使い分けることでホームページが構成されます。
「タグ」を閉じ忘れると、全く別の表記になったり、表示されなくなったりと問題が発生してしまうので注意が必要です。
簡単なタグの説明はこんな感じです。
他にも、行の先頭を揃える「インデント」や、HTMLの中でメモの役割を持たせる「コメント」の解説もあります。
この項目の最後に、「Bootstrap」という、「HTMLフレームワーク」を利用するのですが、これが優秀で、入力の時間を大幅に減らしてくれます。
この章は、序盤ということもあり、わりと簡単な内容だったのかなと思います。
ここの章は、つまずくことなく進めることができました。
CSSの基礎を学ぼう
CSSはHTMLで書いた文章の見た目を揃えたり、文字を大きくしたりといった装飾をします。
THMLの中に、CSSを記述していきます。
styleタグを使い、セレクタやプロパティを指定していきます。
- styleタグの使い方
- 色の指定方法
- 文字の色・太さ・サイズの変更
- 余白などのレイアウト
など
色の指定方法で、「16進数」という定義があるのですが、ここの説明はすごくわかりやすかったですね。
上記以外にも、レスポンシブデザインなど覚えることが増えてきます。
ここの終盤あたりから、徐々に難しくなってきました。
HTML要素を学ぼう
最後の章です。
最終章ということもあり、最初から少し難しくなってきています。
ついていくのが難しかったので、何度か動画を見返したりしながら進めました。
- 写真・リンクの貼り方
- リスト・ナビゲーションバー
- テーブル表示
など
HTMLの特徴である、「ページ内にリンクを貼る」という作業がここで登場します。
ここまでくるとタグの種類も増えてきているので、わからない用語が出たときはメモしておいて、後で調べてみるといいと思います。
動画でコーディングをするのですが、すごく早いのでついていけないときは、動画を止めながら見てみることをおすすめします。
やってみた感想
あくまでも、個人的な感想ですが、一通りやってみて「モヤモヤがはれた」感はあるので、やってみてよかったと思います。
途中からちょっと難しくなってしまい、一度で完全に全部を覚えるということには至りませんでした。
エンジニアになりたいわけでもなかったので、お金もかからず無料でこれだけできたので、個人的には十分でした。
プログラミングの敷居が、少しだけ下がった気がします。
時間的には、少しずつ進めて大体二週間で終わりました。
自分のペースで進められるのは良いですね。
まとめ
今回は使用した「paizaラーニング」では、一通り練習問題も終わりました。
今まで何冊かHTMLの本を読んだのですが、こちらの方がわかりやすいです。
何度も繰り返し同じ項目もできるので、わからなければ何度もやってみるのがいいと思います。
アプリの完成度は高く、よくできていると思います。
ですがこのサイトでは、あくまでも基本が学べるというスタンスで捉えたほうがいいと思います。
本格的にやろうと思う人には、「タグ」や「プロパティ」など、もっと情報が必要になってきますので、他にも本や動画などで学ぶ必要があると感じます。
一度トライしてみたいという人は、下のリンクから飛んでみてください。
コメント