最近は、自分があまりやってこなかったviewについて勉強してます。
今まで個人アプリ作ってきたけど見た目に全く力を入れていなかったので今回がすごい良い機会になったことは間違い無いですw
Viewに関しては”いつかやらないと〜”だったので、いつか半強制的にやる時が無いとダメだな〜と思っていたのでちょうどでした。
今回は初めてBootstrap4を使ってLPを作成し、ワードプレス化までした話を書いていきます。
目次
Bootstrap4触ってみて
めっちゃ頭いい。
一言で表すとこんな感覚でした。とにかく扱いやすくて素材がたくさんあり、教材となるサイトなども多い印象でした。
ある程度触れるようになれば、普通のサイトであれば大体のサイトは作れるようになる気がします。(Bootstrap歴1週間)
どんなふうに勉強したか
全くどんなことができるのかイメージできなかったので、Youtube先生を使ってチュートリアルで実際に作りながら勉強していました。
最初はホントに言われたとーりにコードを書いていきながら、’へぇ〜こんな感じなんだ〜、こんな事できるんだ〜’とか思いながら作ってました。
これを複数やってみるとなんかこーゆーときはこれ毎回使ってるなぁ〜とか少しづつ見えてきます。
実際にチュートリアルとして参考にした動画
1. シンプルでサクサクと進んでいくのでスーパー初心者の僕には優しい入り口でした。(日本語)https://www.youtube.com/embed/fou-ZR9LhGM?rel=0
2. このかたは多くのチュートリアルの動画を出しているので、複数個やってみてbootstrapでやっている事のイメージやレスポンシブについて学びました。(英語)https://www.youtube.com/embed/9cKsq14Kfsw?rel=0
3. チュートリアルを複数個やった後に復習としてこちらの動画を参考にさせていただきました。丁寧に解説されているので、’あー!!!そーゆー事だったのね！’こんな感じで良い復習が出来ます。
col-md-6とかw-50とか??ってなっていたものがこの動画で解けました。
実際に作ってみる
実際に作っていきます。今回は友達にLPのページをもらっていたので試しにそれを作ってみることにしました。
作成といっても、チュートリアルで作ったものを参考にしながらです。
丸々同じでは作れないので、その部分で学びが増えました。
CSSの書く記述が少なくなるのは見やすいかなと思います。
あとはレスポンシブのところで少し時間をかけつつやっていきます。ここで気づいたんですが、テキトーにクラスの名前とかをつけてしまうと同じ要素に予期しないCSSがかかってる！？なんてこともありました。
あとは今回初めてCSSで!importantを使った。レスポンシブしてるときに出会いました。
ワードプレス化
なんかむずそーーー。最初はそんなイメージを持っていましたが、めちゃめちゃ簡単に出来ました。(これが正解なのであれば。)
最初に流れを軽く。
新しいフォルダを作成。
php拡張子のファイルで必要なページを元のファイルからコピペ。
ファイルはヘッダーやフッター、サイドバーで分けたほうがワードプレスで使いやすいらしい。
そのあと色々と関数をコピペしていく。
大体できたら、zipファイルにしてワードプレスで読み込み、ライブレビューで確認してみる。うまく見れたらおっけい！
自分はここのサイトを参考にしました。
そんな感じでワードプレス化は意外とすんなりいけた気がする。
学んだこと
まだ1週間程度しか触っていないけど、チュートリアルなどを参考にそれなりのLPが作れた。
クラス名をテキトーに書かない。CSSを書くときに重なってしまうことが注意。
これは覚えておいて損は無いし、楽できるなと。(自分みたいなhtml書くのが苦手な人は)
レスポンシブもcolとかoffsetとか覚えていけば楽に実装できる気がする。
ワードプレス化は新しいフォルダを作成して、用意されている関数をコピペで貼っていき、zipファイルにしてインストール。こんな流れだと理解している。
次
以前から作りたいと思っていた、ポートフォリオサイトを作ってみようかなと思います。
もし結構いい感じで作れたら、ワードプレス化もしてみようかなと思ってます。
デザインセンスが問われますが、そんなの気にしても無い物は無いんで無いなりに作ってみますww
そんな感じで
以上！
