はじめに
こんにちは。記事を閲覧いただきありがとうございます。
知り合いの方から頼まれていたWeb制作がひと段落したので、その中で個人的に重宝した
レスポンシブの書き方についてまとめたいと思います。
本当ならSASS、SCSSで以下のようにスッキリ書けるらしいのですが、
.card-columns{@includemedia-breakpoint-only(md){column-count:2;}@includemedia-breakpoint-only(xl){column-count:5;}}コンパイルというのが難しく。。。。笑
約2日におよぶ激闘の末、、、、CSSでそのまま書く事にしました。。。。(・Д・)ﾕﾙｾ....
teratailでも質問させて頂きました。
ご回答いただいた方、ありがとうございました。。。！！！
CSSによるメディアクエリ(レスポンシブ)の書き方
以下のように 768pxから991pxまで、という感じで画面幅の範囲を指定し、
範囲ごとにCSSを記載していきます。
/* sm */@mediascreenand(max-width:767px){h1{font-size:32px;}}/* md */@mediascreenand(min-width:768px)and(max-width:991px){h1{font-size:48px;}}/* lg */@mediascreenand(min-width:992px)and(max-width:1199px){h1{font-size:56px;}}/* xl */@mediascreenand(min-width:1200px){h1{font-size:56px;}}Bootstrapのcard表示列数
以下のように画面の幅に合わせてcardの列数を変更したい場合は、
それぞれのcardの親要素.card-columnsに対してcolumn-countを指定
あと、文字がcardからはみ出ちゃったりしたので、cardもheightを適宜指定
@mediascreenand(max-width:767px){/* sm */.card-columns{column-count:1;}}@mediascreenand(min-width:768px)and(max-width:991px){/* md */.card{height:280px;}.card-columns{column-count:2;}}@mediascreenand(min-width:992px)and(max-width:1199px){/* lg */.card{height:260px;}}@mediascreenand(min-width:1200px){/* xl */.card{height:300px;}}Bootstrapのcardコンポーネントについてはこちら
公式ドキュメントからコードをそのままコピペできるのでBootstrap好きです。（´∀｀）
文字の改行ポイントを指定
画像の幅が狭くなるにつれて、文字の改行を増やしたい場合
まず、テキストの改行タグにクラスを付ける
<divclass='top-msg'id='msg-1st'><h1class='text-light'>あなたの
<brclass='br-1st'>「実家」は
<brclass='br-2nd'>「空き家」になって
<brclass='br-3rd'>いませんか？
</h1></div>画面幅ごとに改行タグへdisplay: none;を付与する。
@mediascreenand(max-width:767px){/* sm */.top-msgh1{font-size:32px;}}@mediascreenand(min-width:768px)and(max-width:991px){/* md */.br-1st{display:none;}.top-msgh1{font-size:56px;}}@mediascreenand(min-width:992px)and(max-width:1199px){/* lg */.br-1st,.br-3rd{display:none;}.top-msgh1{font-size:56px;}}@mediascreenand(min-width:1200px){/* xl */.br-1st,.br-3rd{display:none;}}余談ですが、Bootstrapのナビゲーションバーは画面が小さくなると
自動でハンバーガーメニュー化してくれるのもいいよね！
今回作った作品
ご紹介できるのはデモページのみですが、このようなページをvue.jsで作成し、firebaseにてwebホスティングしました。
田端の空き家相談所(デモページ)
※あくまでデモページなので、田端の空き家相談所は実在しません！！笑
githubはこちら
おわりに
今回、初めて個人でWeb制作を頼まれて作成した事を通じて、
「webページ作ってよ！」と頼まれたら
「あいよ〜😎」と言えるくらいにはなったのではないかと思っています。
今後はSEO対策や、もっとオシャレな見た目を求められる気がするので、
そこらへんも出来るように腕を磨いていこうと思います！
頑張るぞー(・∀・)