![見出し画像](https://assets.st-note.com/production/uploads/images/96466617/rectangle_large_type_2_90c6f42add45540cdcdc53d3ad94b174.png?width=800)
webデザイン勉強ノート28日目
少し空きましたが勉強は続けています。
ヒューマンアカデミーのほうの動画は、HTMLの各タグについて説明をしていて、コンテンツ量が多いなーという印象なのですが、「基本はわかったよね!じゃあ課題あるから作ってね」っていうのはかなり飛躍しているような…?Adobe講座のものは勉強の補助的に使うイメージなのかな。
本の方も読んでいますが、1,2章の時点ではあんまり目新しい情報がない感じです(たくさんあっても混乱してしまいますが)
もう少し自分にあった本を探したいところです。大きい本屋さんに行きたいな。
●現状
![](https://assets.st-note.com/img/1674643803017-f98TCCfDe8.png)
今日はこの下のアイテム部分を作っていきます。
まずは画像の用意です…PCで見た時にちょうどいいものを、縮小してスマホで使いたいので(スマホサイズに合わせるとPCだと小さい)この点モバイルファーストとは…?となっています。
●とりあえずHTMLを追加
画像は用意したのですが、スクロールしてみると前回作ったScrollの部分の重なり順がおかしいですね…ヘッダーのクラスにz-indexを指定しようと思います。
![](https://assets.st-note.com/img/1674645122052-kavyePvwEq.png?width=800)
●横スライド(スワイプ)できるように
まずは横にスライドできるようにしてみます。
こちらを参考にやってみました。
![](https://assets.st-note.com/img/1674646042611-dgoL7oGfAy.png)
とりあえず横にスクロールはできるので、ここから内容をカード状にしてみます。
●内容をカード状に変更
まずは画像のサイズを、画像の上階層から.cardbox imgで指定して小さくします。
![](https://assets.st-note.com/img/1674646610284-3HlWtt9ObD.png)
少し大きく感じるので、Xdファイルで確認します。
案の定画像サイズの指定が違ったので、直して背景とmarginなどをつけたものがこちら
スクロールできるエリアのposistion:relativeとleftも追加しています。
![](https://assets.st-note.com/img/1674647263640-AKnqYObF99.png)
画像をcenterにして、上にmarginをつけてこんな感じ。
![](https://assets.st-note.com/img/1674647979093-nigwToX3Vl.png)
ですが…文字数が多すぎて折り返してしまっていますね。シャンプー…
あとは金額の表示も調整したあと、このCSSでの効果をためしてみたいと思っています。
今日の進度はそこそこ!動画と本も読んでから寝ようとおもいまーす。
^ー^<マタネ
タイトルロゴ作成のお支払いはこちら(どの記事からでもokです)でお願い致します。頂いたお金はillustratorの月額料金と変貌します。