![見出し画像](https://assets.st-note.com/production/uploads/images/91604463/rectangle_large_type_2_326152df5a8f5f270e76ed104cf23eca.jpeg?width=800)
webデザイン勉強ノート8日目
今日は図書館に行ってwebデザイン関係の本を借りてきました。
昨日ぐちゃっとなってしまったスライドショー部分ですが、コピペした内容が8.5割ぐらいわからなかったので、やはりもっとシンプルなjavascriptからトライするべきですね…
しかも前回のヨロシサン製薬のときのjavascriptも、コピペ元のリンクが残っていたようで、それを消したら動かなくなってしまいました。理解、大事。
ということで、今日はjavascriptについてやっていこうかな。
こちらの書籍を図書館で借りてきたので、参考にしていきます。
●スライドショー(javascript)
とりあえずコピペ
![](https://assets.st-note.com/img/1668942536038-NxIN3u9dnR.png?width=800)
CSSとjavascriptに関して1行ずつコメントがついているので理解に役立ちます。
そしてjavascriptもコピペして…
![](https://assets.st-note.com/img/1668942674176-8wbjxGOwgG.png?width=800)
レイアウトをデザインに合わせつつ、内容を理解していきます。
まずはXDファイルを開いて、スライドショーにしたい部分のサイズを確認します。
もともと横幅1920で作っているので、現在の横幅1254pxに合わせなければなりません。また比率計算。
![](https://assets.st-note.com/img/1668942891612-Gn5n6e0ynC.png?width=800)
1920:1254=1720:? は1123.375なので、widthを1123に。
heightは1080:738=847:?で578.783。
![](https://assets.st-note.com/img/1668944005378-Iqrj3kpsAG.png?width=800)
デザイン通りのサイズにはなりましたが、左寄せになっているので直します。
positionの指定をこちらで行おうとして、おおむね上手くいったのですが、
![](https://assets.st-note.com/img/1668945123613-2mgxlB0zni.png?width=800)
h1タグもrerativeの下にabsoluteでpositionを指定しているのですが、なぜ…?スライド画像部分はうまいこと中央になりました。
今日は本を読んでまた明日取り組みまーす。
^ー^^<マタネ
タイトルロゴ作成のお支払いはこちら(どの記事からでもokです)でお願い致します。頂いたお金はillustratorの月額料金と変貌します。