【Rails】Bootstrapでデザインを考える【DIVE INTO CODE】

更新日:

「DIVE INTO CODE」学習記録 12日目

こんにちは。

12日目。Bootstrapを勉強。レスポンシブデザインを実装する。

学習内容

【Bootstrap】

  • Bootstrapとは(cssフレームワークについて)
  • レスポンシブデザイン
  • パッケージマネージャーYarn
  • マニフェストファイル
  • グリッドシステム
  • Layoutファイルの意味
  • <%= yield %>
  • グリッドシステム3つのクラス(container,row,col)
  • Bootstrapの使い方
  • レスポンシブデザインとメディアクエリ
  • アセットパイプライン
  • アセットプリコンパイル
  • 課題 トップ画面、グリッドシステムの作成

 

感想

今回はBootstrapです。

本当は前回の章が終わった段階で大課題のツイッターの偽物作成があったんですが、飛ばしました。

デザインちゃんとやってみたかったんで。

 

なんていうか、Bootstrap使えば素人でもなんとなく見栄えの良いものできます。

まだ提出はできてないんですが、とりあえず今出来上がってるやつ載せます。

 

元は前回載せたブログアプリです。

【Rails】お問い合わせ機能を実装する【DIVE INTO CODE】

 

そこにまずトップ画面を新しく作り、Bootstrapとcss自分で書き込んだのと、テキストのデザイン参考しながらやりました。

 

 

まずトップ画面

ブログアプリトップ画面

 

スマホの時がこっちです

ブログアプリトップ画面(スマホ)

 

 

ワードプレスとかのデフォルトテーマっぽい画像を載っけました。

 

また、アプリの内容に対しての文章をトップに書かなきゃいけないということだったので、

英語を日本語に訳した風の口調でコメントを真ん中に書きました。

 

 

アプリインストールするときの概要欄ってこんな感じじゃないですか?

もともと英語表記だったんだろうな感。言葉の言い回しとか。

 

自分の中では再現できた気がしてます。

 

 

次がブログ一覧画面。

前回はcssゼロだったので真っ白でしたが色々試行錯誤して。

 

【before】

ブログ一覧画面before

 

【after】

ブログ一覧画面after

 

 

ボタンとかナビゲーションメニューは全てBootstrapから引っ張ってきただけですが、なんとなくそれっぽくなります。

 

 

次はエラー画面。

ここもBootstrapのアラートクラスっていうのをコピペするだけで警告感が出ます。

 

【before】

エラー画面before

 

【after】

エラー画面after

 

 

あとは今回のテキストでやったグリッドシステムを導入し、レスポンシブデザインを作って行く部分です。

 

下に設置した4つの白くて細長いボタンを見てください。

 

まずスマホサイズのとき。

レスポンシブデザイン(スマホ)

 

 

次がタブレットサイズ。

レスポンシブデザイン(タブレット)

 

 

最後にPCサイズです。

レスポンシブデザイン(PC)

 

画面の大きさを変えると、自動でこのような配置に移動します。

 

これもグリッドシステムっていうのを使うと、

これくらいのやつだったらめっちゃ簡単に作れます。

 

こういう端末のサイズごとに配置が変わり、ユーザーに利用しやすい配置になる設計を1つのファイルのみで実装することを「レスポンシブデザイン」というそうです。

 

グリッドシステムを使わないと、スマホ用とPC用でHTMLを二つ用意しないといけなかったりします。

そうすると管理も非常に面倒ということで、現在はこちらの方法が多くのECサイトで実装されてるようです。

 

 

昨日の段階で課題提出しようと思ったんですけど、herokuへのアップデートでエラーが出てしまい、どうにもならなくなってしまいました。

 

これ早く提出して、ツイッターの偽物作成に取り掛かりたい。

 

って思ってたんですよ。でもいくら調べても無理で。

くそーってなってました。

 

実際ツイッター偽物の作成ってどんなもんなのよ、って思って課題条件確認したんですけど、

 

そしたら今回Bootstrapで作ったやつで条件的にはほぼクリアしてるっぽくて。

 

こういうのってどうなんですかね、

復習も兼ねて1から作り直した方が良いのか、

このままちょっといじって提出してさっさと次のカリキュラムに沿って進めるか。

 

1から作り直すって言っても、結局コピペがメインになるんでなんとも言えないですけど。

 

とりあえずherokuにアップデートできるよう頑張ります。

以上ありがとうございました。

-DIVE INTO CODE
-, , , ,

Copyright© s u p ? , 2019 All Rights Reserved.