ランディングページの実装

カルーセルのtouch対応

先日の記事でreact-slideshowを推しましたが、スワイプに対応していないという問題があったのでいくつかtouchイベントに対応しているカルーセルコンポーネントを調査しました。

• react-slideshow
  • touchイベント未対応。imgタグなくても使える。
• react-responsive-carousel
  • 機能は豊富。imgタグ必須。ない場合はエラーで落ちる
• react-slick
  • 機能は最小限だがスワイプ対応

react-slick、君に決めた！

LINE風CSSの適用

会社の同僚にアイデアをもらったので自力で実装してみました。

 <div style={{
        padding:5
       }}
     >
            <div className="question">掲載料金はかかりますか？</div>             
            <div className="answer">いいえ。料金はかかりません.</div>
            <div className="question">データはどうやって登録するのですか？</div>
            <div className="answer">現在、運営がデータを入力する形となっていますのでデータをお送りください。</div>
        </div>

.question{
  width: 70%;
  position: relative;
  padding: 10px;
  background-color: #f2f3f7;
  font-size: 16px;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
  margin: 5px;
}
.answer{
  width: 70%;
  position: relative;
  left:50px;
  padding: 10px;
  background-color: #fde5e5;
  padding: 10px;
  font-size: 16px;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
  margin: 5px;
}

• 参考: LINE風の吹き出しの会話をCSSで作ってみる

webフォントの軽量化

https://gist.github.com/manabuyasuda/b5c867a7cbd17d1eb905b3a8cfd621a6

flexboxを実装する

今回はグリッドレイアウトを使わずにflex-boxを使いました。
幅500pxを境界に、flex-directionを切り替えるメディアクエリを書きます。flex-directionを切り替えるのと同時に画像をウインドウの50%か100%に切り替えます。
サイズの異なる画像を並べるのにobject-fit : coverが便利でした。

JSX

const imageLink = (toLink,image_url,text) => {
    return(
          <div 
            style={{
              position:'relative'
            }}
          >
            <div
              style={{
                fontSize: 20,
                cursor:'pointer',
                position:'relative'
              }}
              onClick={()=>{
                window.location.href= toLink
              }}
            >
              <img 
                style={{
                  height:'20vh',
                  objectFit:'cover'
                }}
                src={image_url}/>
              <span
                  style={{
                    fontSize: 20,
                    color:'aliceblue',
                    textShadow:'2px 2px 2px black',
                    position:'absolute',
                    top:0,
                    left:0
                  }}
                >{text}
              </span>
            </div>
          </div>
    )
  }

CSS

@media(max-width:500px){
  .flex-parent{
    display: flex;
    flex-direction: column;
  }
  .flex-parent img{
    width: 100vw;
  }
}
@media(min-width:501px){
  .flex-parent{
    display: flex;
    flex-direction: row;
  }
  .flex-parent img{
    width: 50vw;
  }
}

参考
- Flexbox【第1回】並べる方向 〜flex-direction編〜
- 縦横比の違う画像を均等に横並びにする方法
- 画像の上におしゃれに文字やボタンをのせる方法