そよ風情報局 -初心者プログラマが独学で試行錯誤-

Webエンジニア目指して勉強中の初心者が、苦労したことや学んだ言語について書いてます。たまにゲームのことも。

Webサイト作成

レスポンシブデザイン化進行中

投稿日:



前回書きました通り、レスポンシブデザイン化目指してちまちまと頑張ってます。

 

実際に作ってみると、想定と違うことが多々あったので、それについて書いていこうかなと。

 

Bootstrapは必要ない!?

レスポンシブデザイン化するにはどうすればいいんだろう?

最初そう考えたとき、まず検索しますよね。
で、検索するとまずカラムの話がよく出てきます。

PCで見ると

□□

とカラムが並んでいるところを、スマホから見ると


と見えるようにしましょうって感じですね。
確かに、カラムがいっぱいあるようなページだとこの方法使うのがいいんだろうと思います。
そして、この方法を使う際に使用するのがBootstrapです。

しかしながら、私みたいな初心者が作っているようなサイトってヘッダーがあってサイドバーがあってメイン部分があるってくらいなんですよね。
(このブログくらいな作り)
そのときに表現したいことって、サイドバーを隠してボタン表記にして、あとは大きさをスマホサイズにするだけで十分なんですよ。

それを実現させるにはBootstrapなんて必要ないです。

 

CSSでレスポンシブ化!

これらのことはCSSだけで実現が可能です。
Bootstrapでもできますが、使ったことない人が調べながら実装するよりもCSSだけで書いた方が多分楽なんじゃないかなと思います。

私は調べながらやってましたが、よくわからなくなってCSSとBootstrap両方の合わせ技?みたいな感じになってますw

でもほとんどがCSSで実現させてるので、正直全部CSSでいい感はあります。

 

ブレイクポイントを作る

ではどのようにして実現するのか。

それはCSSファイルに条件によって処理を分岐させるのです。

「PCで見たときはこの処理、スマホで見たときはこの処理」

といったように分岐させます。
そこで必要になってくるのがブレイクポイント

現在表示させている画面のサイズを読み取って、そのサイズによってどちらの処理を行うかを決めているのです。
具体的にはこう書きます。

@media screen and (min-width: 768px){
//PCで見たときのCSS処理
}
@media screen and (max-width: 768px){
//スマホで見た時のCSS処理
}

この768pxというのがブレイクポイントとなる指標です。
上記条件ですと、768pxより大きいか小さいかで処理をわけてます。

これで、768pxより大きい場合はサイドバーを普通に表示させて、小さい場合はサイドバーを非表示にしてメニューボタンを表示させるという処理を書けばいいのです。
ついでにサイドバーを非表示にするとサイドバー部分に余白ができてしまうので、メイン部分をずらす処理も入れると見た目がいいです。

 

カラムのサイズ変更

これが一番苦労しました。。。

上で解説しました通りCSSを書くと、画面を小さくするとブレイクポイントで処理が行われるようにはなりますが、メイン部分はサイズが変わらず画面外まではみ出してしまうということになります。
これはCSSでカラムサイズをpxで指定しているからです。
%で指定すると画面サイズに合わせて動いてくれます。

 

サイドバーがある場合

サイドバーを表示させないスマホ用であればただ100%って書けば画面いっぱいに表示されていいんですが、サイドバーがある場合はそうもいきません。
サイドバー分だけ縮めないと重なってしまいますからね。

そんなときはcalcという表記を使います。
例えばサイドバーの大きさが200pxとします。
(サイドバーは画面サイズを変えても固定サイズで置いておきたいため%ではなくpx表記します)
その場合、

width: calc(100% - 200px);

と書くことでサイドバーの200px分だけ縮めて表示させることができます。

 

まとめ

レスポンシブデザイン化したいと思って調べても、思ったように欲しい情報は集まりませんでした。
カラムを画面サイズに合わせて縮めたいのにその情報が載ってない!!ってことが多かったですw

多分私と同じように慣れていない初心者だと同じように「レスポンシブ」というキーワードに拘って調べて見つからない!ってなっちゃうかなと。

キーワードで調べるよりも、どういうことが実現したいかを調べた方が欲しい情報が集まるということを今回のことを通して学びましたね。
当たり前のことかもしれませんがw

ちなみに、Webページの方は基本的にはレスポンシブ化が終わっていて、あとはアプリケーションのページを変更すれば完成ってところまできてます。
アプリのページをいろいろいじらないといけないんで、ついでにスケジュールの編集機能も実装してしまおうかと考えてます。

完成したらまたこちらで報告します。







-Webサイト作成

Copyright© そよ風情報局 -初心者プログラマが独学で試行錯誤- , 2018 All Rights Reserved Powered by STINGER.