サイト模写２回目。今回は美容室のようなサイトを模写してみた。
気にすること
始める前にゴールを設定。だいたい見た目が同じであればOK。
- 画像は無料の写真素材サイトで取得する
- 項目間の空白や位置は見た目あわせる
- PCで橫896pxまではレイアウトが崩れないようにする
気にしないこと
どこまでやって完璧とはならなし、きりがないので。
- フォント、フォントサイズは気にしない
- ボタン動作は実装しない
- タブレットやスマホを考慮したレスポンシブ対応しない
複写のポイント
模写にあたりクリアしたいポイントを決める。
- ヘッダーの横並び
- スライダー
困ったこと
４時間くらい。「ヘッダーの横並び」は問題なし。「スライダー」が大変だった。
ググってみると、スライダーの実装はいろいろ方法があるみたい。
- JavaScript：Swiper
- jQuery：slick
- css：参照したサイトでは自動的にスライドする実装を紹介
JavaScript、jQueryは勉強していないので、cssで対応できるものを調べたものの、自動的にスライドする機能だったので、画面クリックでスライドしてくれるJavaScriptでやってみる。
と決めたものの、何からすればよいのやら。。。基本的なことはわからないが、スライダーを実現、実装することを目標として組み込んでみる。
参考にしたサイト：https://xn--web-oi9du9bc8tgu2a.com/js-swiper-sample/
スライダーの実装
サンプルをベースにhtml、cssにスライダー機能の組込み実装。jsはそのままコピー。
html<head>：css、jsの追加
html<body>：スライダーの実装、画像の設定
css：スライド要素のサイズ変更
スライダーが動いた！やったぜ！
でも画像サイズがあってなく砂色の四角があるだけになってしまった。画像サイズを調整する方法を調べてみると「object-fit」がある。
- contain：縦横比を保ち、リサイズされる
- cover：縦横比を保ち、はみ出る部分はトリミング
- none：サイズ調整なし
- scale-down：縦横比を保ち、リサイズするが縮小のみ
- fill（初期値）：縦横比を無視してリサイズ
参考にしたサイト：https://code-kitchen.dev/css/object-fit/
どうやら値がnoneとなっていたよう。今回は画像が大きいので、noneでは画像の中心が大きく表示されるし、contain、scale-downでは余白ができる可能性あり、fillは画像が崩れてしまうので、cover！
css：imageにobject-fit:cover;を追加
やったぜ！
やってみた感想
スライダーを調べ始めた時、こりゃ無理だ！！と思ったけど、実現できたことは嬉しい。
これを機会にJavaScriptの基本的な勉強をしてみようかな。
コメント