じろう

2019年11月02日に参加

学習履歴詳細

[Laravel]課題アプリのデザイン。レスポンシブ対応させる。LP作成する（途中）

今日のYWT

やったこと

Travelog

  • デザインをほぼ終わらせる
  • レスポンシブを考える
  • LPを作成する

わかったこと

レスポンシブ

こんな感じで、Scssファイルにスタイルを書くと端末のwidthで表示を変えられる

// 768px以上の画面サイズで適用されるスタイル（タブレット〜PC）
@media (min-width: 768px) {}

// 768pxより下の画面サイズで適用されるスタイル（タブレット以下）
@media (max-width: 767.98px) {}

スマートフォンサイズの時、PCモニターサイズのスクリーンショットを使ってしまうと見にくいので、LPのアプリの画面のスクリーンショットをviewportで変えたい

<img srcset="">と<picture> <source>

srcsetで画像をレスポンシブやRetinaディスプレイに最適化

<img srcset>で、ウィンドウ幅で画像を切替えられる……とあるものの、Laravelのマスタッシュを埋め込んだ上でwidthを指定するとうまくいかなかったので、下の<picture> <source>を試した。

<div class="container-1">
  <!-- ブラウザのwidthで画像を変える -->
  <picture class="demo-image img-fluid">
    <source media="(min-width:768px)" srcset="{{ asset('images/lp-indexpage-lg.png') }}" class="img-fluid">
    <img src="{{ asset('images/lp-indexpage-sm.png') }}" class="img-fluid">
  </picture>
  <p class="mt-3">写真をメインとし、邪魔しないスッキリとしたデザイン</p>
</div>

min-widthで◯◯px以上の時の画像を指定し、<img src>でそれ以下の時の画像を指定した。

画像が中央に来ない

画像の親要素にtext-align: centerで解決

次やること

  • LP完成させる
  • SendGridの再設定
  • 環境変数をセット




Laravel
Bootstrap

2020年11月15日(日)

6.6時間