ドットインストールとBootstrap【プログラミング学習記録①】
この記事は、プログラミング初心者がHTML/CSS/PHP/Wordpressを学習して、仕事にするまでの過程を綴るシリーズです。
こんばんは、プログラミング初心者の氷犬です。
2018年7月に公務員を辞めて次の仕事を始めるので、現在プログラミングをゼロから勉強中です。
今回の記事から、「HTML/CSS/PHP/Wordpressを勉強するシリーズ」として、プログラミングの学習記録をシリーズ化することにしました。
これからプログラミングを勉強したい人の参考になればと思います。よろしくお願いしますm(_ _)m
Progateと市販の本１冊については既に記事にしていますので、ゼロから始める方はぜひ見てみてください。
【プログラミングを始めるなら『Progate』がおすすめ。楽しくコードが書けるプログラミング学習サイト】
【プログラミング初心者でも簡単にコードが書ける『HTMLの教科書』】
こんな人におすすめ
- HTML/CSSの基本はなんとなく理解した
- サイト作りのフレームワークを知りたい
- Bootstrapに触れたことがない
ドットインストールでBootstrapを学習しました
この記事では、以下の紹介＋感想を書いています。
- プログラミング学習サイト『ドットインストール』
- HTML/CSSフレームワーク『Bootstrap』
プログラミング学習サイト『ドットインストール』
ドットインストールとは、プログラミング初心者向けの学習サイトです。
HTMLやPHPなどの言語から、BootstrapやRuby on Railsなどのフレームワークまで、１本につき３分程度の動画でサクッと学習することができます。
学習画面はこんな感じ
Progateとは違い、「サイト上でコードを書いて動かす」ということはできないので、自分でファイルを用意して書いていく必要があります。
たとえば、HTML/CSSであればメモ帳などのテキストファイルでもOKですが、PHPやRubyなどのプログラミング言語であれば実際に開発環境を構築して動かす必要があります。
初心者にとって開発環境の構築は難しいですが、「開発環境を構築するまで」もレッスン動画があるので、動画を見ながらゼロから進めることができます。
一部無料ですが、レッスンを全部やるには有料会員登録をする必要があり、月額980円がかかります。
まあ、プログラミングの本を１冊買うよりもよっぽど安いので、本気で学習するつもりなら最初から有料会員になってしまった方が良いと思います。
初心者はProgateからやった方が良いかも
「サイト上でコードを書いて動かす」ということができないので、「手っ取り早くプログラミングをしてみたい！」という人には、Progateの方がいいですね。
Progateでプログラミングの基本を覚えたらドットインストールに移って本格的に学習するのがいいかと。
Progateは丁寧でわかりやすくていいんですが、ボリュームに欠けるところがあるので入門用として使うのがいいと思います。
初心者がドットインストールを使った感想
プログラミング初心者である僕がドットインストールを使った感想ですが、１動画につき３分程度とあっさりしていてすごく勉強しやすいですね。
事前に自分のパソコンでコードを書いたことがあるので、「サイト上でコードが書けない」ことはデメリットに感じませんでした。
ボリュームもありますし、細かいところに手が届く仕様になっているので、無理なく学習が続けられそうです。
ただ、動画では男性が声で解説してくれるのですが、話し方が聞き取りづらかったりして「聞き心地がよい」とは言えないのが欠点だと思いました。
有料会員になると男性⇒女性に声が変えられるのですが、おそらくボイスチェンジャーを使っているだけで話し方が変わっているわけではないみたいですね。
まあ、その辺りは割り切って使うしかないと思います(-_-;)
HTML/CSSフレームワーク『Bootstrap』
Bootstrapとは、Twitter社が開発したHTML/CSSフレームワークです。
要するに「Bootstrapを使うとめんどうなコードを書かなくても簡単にサイトが作れますよ」というものですね。
普通は「HTMLのタグの中にclass/idを書いて、CSSでデザインする」のですが、デザインするのも手間なので、よく使うものを使いやすくまとめたフレームワークがBootstrapです。
名前をよく聞くだけあって、実際に使ってみたらすごく便利で感動しました。
Bootstrapでランディングページを作りました
実際に作ったサイトはこちらです
ドットインストールのレッスンで実際に作ったサイトはこちら。
いわゆるランディングページというやつです。
サイトだけ見ても何をしたかわからないと思うので解説しますね。
作ったもの１：アラートバナー
ホームページの上に「お知らせ」的なバナーがあるのを見たことはありませんか？
そのお知らせバナーを作りました。
右の×ボタンを押すと綺麗にフェードアウトして消えます。すごい。
作ったもの２：ボタン
このGet It Now!というボタンを作りました。
CSSでボタンを作ろうと思うと、大きさ・色・角の丸みなどをデザインする必要があってめんどくさいんですけど、Bootstrapであればすごく簡単にボタンが作れます。これもすごい。
作ったもの３：比較する表
表も作ろうとするとデザインするのが手間なんですが、おしゃれな表も簡単にできました。すげー。
作ったもの４：切り替えタブ
仕様によって切り替えるタブを作りました。
切り替えタブはJavascriptを一部使って実装しています。
リンクの設定にコツがいりますが、それでも慣れてしまえば簡単そうです。
作ったもの５：ハンバーガーメニュー
パソコンで見るか、スマホで見るかによって幅が違うので、ページを作る際にはあらかじめ幅に合わせたデザインをする必要があります。
「レスポンシブデザイン」といいますが、Bootstrapではレスポンシブデザインの考え方が採用されているので、ブラウザの幅に合わせたデザインを比較的簡単に実装できます。
特にリンクが多くなってくるとスマホでは表示しきれないので、まとめてリスト化しなければなりません。
リンクをリスト化してボタンに閉じ込めたものを「ハンバーガーメニュー」と呼びます。
ハンバーガーメニューもBootstrapなら簡単に作れます。本当にすごい。
LPもサクサクできて感動しました。すごい
ここまですごいとしか言ってないですが、Bootstrapは本当にすごいですね。
簡単に今風のデザインが作れるので「必ず覚えておかないとな」と思いました。
ランディングページ(LP)が作れればいろいろ応用が利くので、とりあえず今回作ったサイトを元にいろいろ改造してみます。
まあ、今回は動画の内容を丸写ししただけなので楽だったんですが、ゼロから作るのは大変そうなのでがんばります(-_-;)
プログラミング始めたての方は一緒に学習しましょう！
僕は本格的にプログラミングを学習しはじめて日が浅いので、ぜひ一緒にがんばってくれる方を募集しています笑
タイムラインにプログラミングを勉強している同志がいれば、よりがんばれると思うんですよね。
僕のTwitterはこちら(@icedog_410)です。
よろしくお願いしますm(_ _)m
ちなみに次回はPHPの開発環境の構築＋PHPの内容を軽く触れようかなと思います。
次回⇒【プログラミング学習記録②】PHPとローカル環境の構築【難しい】
