HTML,CSSは素人ブロガーでも一週間あれば「読める」ようになる
どうも、スーパーAIロボです
始めに断っておくと僕はプログラミングなんかできましぇん
色々とブログを見て回っていると、本格的なプログラマー向けのレベル高いブログなどがある一方、コピペしてのカスタマイズにすら難易度を感じている方もお見受けしました
このブログのデザインカスタマイズなんかも色んなところからパクったお借りしたコードをペタペタコピペして作られております
HTML,CSSに関しても、自分で一から何か書いてみろと言われたらえらい時間がかかることでしょう
でも「読めます」
タグを見ればだいたい何をどう指定しているのか、ゆっくりだけど解読出来ます
今のブログはHTMLなんか知らなくても書けるようになっていて非常に便利なんですけれど、それでもちょっとリンクをいじりたいとか背景色を変えたいとか、細かいところを調整したくなったらやっぱり自力でやらないと難しい部分があります
その点タグを読めるようになるとどこを、どうすれば、どうなるがわかるので自分でなんとか出来ますし「何が出来るのか」がわかるようになりますね
ではでは僕もド素人ですが、読めるようになるまでの勉強法などを紹介していこうかと思います。あ、お金は一切かかりません
ちょっといじるレベルまでなら書籍なんか買う必要ないです。むしろ本なんか読んでたら遅くなります
HTML,CSSとは何か
はい、じゃーね、世の中プログラマー志望向けの解説などは多いのですがここは飽くまで「読めるレベルまでいく」ことを目標とした非常に志の低い場ですので、小難しい解説は端折って感覚的に説明していきましょね
HTMLは絵で言うところの線です
CSSは色塗りや背景です
はい、おわりっ！
は流石に端折り過ぎなので、もう少しだけ足りない頭で説明しますと
HTMLとはウェブサイトにおける文章部分を主に構成していると考えれば大体合ってると思います。今こうして読んでいるところや見出し、リンク、画像の貼り付けなどもそうですね
CSSはデザイン部分です。カラムの構成だったり、色を一括で変えたり
このように枠を作ったり
するのがCSSです。上のはちょっと簡単な方法で適用したのでブラウザによっては見えるかわかりませんが、多分だいたい見えてると思います
HTMLは中身でCSSはデザインとさえ覚えておけばおけまる
意識低い勉強法
じゃあ目標低く、意識低く勉強しましょ
本当にウェブデザイナーやプログラマーになりたいのであれば基礎からしっかりやった方がいいんでしょうけれど、今回は「読めること」を目的にするので不要なところは色々とすっ飛ばします
皆の味方ドットインストールを眺める
初心者プログラマー向けの動画を配信して下さっているドットインストールというサイトがございます。プログラミング界では知らない人はいないとかどうとか
こちらのサイトになります
ドットインストール
で、だいたい３分以内を１コマとして解説してくれているんですが
内容としてはプログラマー向けなので「読める」を目標にした場合不要な部分も多いです
メタタグとかあんまり知らなくていいですし、テキストエディターもいらないです
一緒にタグ打ちながら覚えましょう！ 的な感じもあるんですが、ぶっちゃけ進行が早すぎてついていけません
ですので、まずはこの動画を「眺めます」
メモ取ったり自分で打ち込んでみたりしなくていいので（勿論やってもいいけど）ただ「喋るのはえータイピングはえー」とか思いながら動画を見ます
ポイントはあんまり真面目に学ぼうとし過ぎないこと。初心者が勉強しよう勉強しようと思いながら見るとわけわかんなくて挫折の原因になりますので。最初は眺めるくらいで丁度いいです
動画内で
タグを打つ→画面の変化を確認する
のように進行してくれるので、こんなことが出来るのかってことがザックリ掴めればいいと思います
ガチりたい人は月額登録コースで色々なプログラミング言語を学べますが、ブログ書くだけなら無料部分のHTML、CSSを見ておけばおｋ
Progateで実際に打ってみる
次は実際に打ってみましょ
つってもテキストエディターや環境構築はいらなーーい。ブラウザだけで十分
僕はこのサイトを使いました
こちらも月額有料コースがあるけど、HTML＆CSS初級編までは無料登録だけで出来るので十分です！
あー中身のスクショとか貼ったらまずいのかな？ やってみるとわかるけど、ゲーム感覚でタグ打ちレッスンが受けられます
スライドで軽く授業、説明があり、実際打ち込む場面でもヒントやお手本、完全に詰まったら正解も見れるのでとことん初心者向けですね
めっちゃ優しみ感じます
初心者向けとか銘打ってる本なんかよりよっぽど初心者向け。ブロガーはここを使うべき
でも多分、それでも今まで一切この手のコードに触れたことが無かった人は、詰まります
考えてもわからず先に進まなくなったら気にせずヒントや正解見ちゃいましょう。そうしながらわかるところはなんとか自分で解き、わからないところはどんどんカンニングして初級編まで終わらせます
復習しよう
Progateでのレッスンをなんとか終えたら、またドットインストールを見ます
この時おそらく最初に動画を見た時よりかなり内容が理解出来るようになっていると思います。ちょっとだけ楽しくなります。メモ帳でも開いて一緒に打ってみてもいいですし、今回も見るだけでもいいです
HTMLとCSSの動画を見終えたらまたProgateをやります。前回のデータを消せるので、また最初からね
真面目にやっていたら前回より遥かに打てます。マジで
「あ！ ドットインストールでやったところだ！」ってなります
ここまでやればもう大体のタグは読めるでしょう。読めなくても何を調べればいいのかが理解出来ているはずです
不安な人は同じコースをもう何周かしたり、月額登録してもっと勉強したり
プログラミングに興味が湧いたらRuby on RailsやPHP、SQL、JavaScriptなどの本格的な言語に手を出してみてもいいかもしれません
難易度は跳ね上がりますが
まとめ
これをやってもHTML,CSSを全て理解したとは言えませんし、実際オリジナルで打ってみろと言われても難しいでしょう。僕と同じですね。握手
ただブログをやる程度であれば、大事なのは書けることより改変することです
幸いコードは公開して下さっている方が沢山いますので、検索してそれらを見つける力、自分流に軽くアレンジする力は十分養われます
タイトルの「一週間」はかなり適当に書いたけど、毎日一時間で七日やったらだいたいいけるんじゃないかなー。勿論個人差はあるでしょうけど
コーディングの最大の敵って多分アレルギーだと思うんですよね。知らない人が見ると意味わかんないですもんね。タグ
ドットインストールを「眺める」、Progateで「遊びのように打ってみる」のはそのアレルギー反応を抑えるいい方法なんじゃないかと思います
では今回はこのへんで。そんじゃまたー
