読者です 読者をやめる 読者になる 読者になる

アプリ魂

はじめてのプログラミング生活

【135日目】カード型デザインのスライダーを作ってみた

f:id:seitokaii:20170205011731p:plain

@appdamacyですペコリ(o_ _)o))

今日はカード型デザインのスライダーを作ってみました!
スマホで右に左にコンテンツを閲覧できる感じのやつです

縦はぜんぶVHで指定して全画面に対応させる

f:id:seitokaii:20170205012200p:plain

ウェブサイトでもアプリっぽい全画面コンテンツを
作ってみたいというのが今日の目標でした(^^)

上で学んだことを応用して「すべての要素をトータル100VH」になるようにしてあげるとブラウザの高さに収まって表示することができました(=ω=;)

ちなみにこのまえ作ったスライダーは

横幅の単位をピクセルで指定して作っていたので改良しました
めんどうで後回しにしたことはこうして必ず返ってくるなー(ノ△・。)

f:id:seitokaii:20170205011945p:plain

ただひとつ問題があって
サイトを読み込んだ後にブラウザの横幅を変えると
読み込んだときの横幅を維持したままになります・・・

いつでも横幅にフィットするように
次使う機会が来る前に修正してあげたい(=ω=;)

コンテンツが動く感じと全てのコード

f:id:seitokaii:20170205011740g:plain

かっこよく作れた気がします。ブラウザですぐ動く言語は飽きがこなくておもしろいですよ(ノ△・。)

HTML

CSS

JS

2016 アプリ魂
Powered by Hatena Blog.