縦に二分割して表示をするWebアプリ作ってみた | Autumn-Color.com/ちょっとそこまで旅をします。

Webアプリを作る機会がありました

縦に二分割するものを作りたいと思い、いろいろ調べてとりあえず雛形（サンプル）ができたのでメモ程度に残しておきます

デモページ

まずは動作しているところから

GitHubにあげているHTMLをプレビュー表示してくれるサイトで表示しています

ウィンドウサイズを変えても縦に分割は維持できます（あまりにもウィンドウサイズが小さいと横に分割になります）

Githubにも上げているのクローンしてhtmlディレクトリの中にあるindex.htmlを叩くと表示します

で囲い、

で左のViewの表示をし、

で右のViewの表示をしています

cssのディレクトリ内にstyle.cssがあります

cssの勉強用にいろいろ入れていますが二分割するのに必要なものは、

body{}

.column{}

.LeftView{}

.RightView{}

@media all and (min-width: 500px) {}

です

余談ですが、今まではJavaScitptでアニメーションを作っていたのですが、CSSでも作れるとしりいろいろ調べてたところ、めっちゃ使えるということがわかりました

CSSつよい

是非SNSで感想を教えて下さい 👇️