TORICOインターン生のブログです。会社で起きたことについて情報発信していきます。

Viewing posts from April, 2019

インターン15、16日目 #Vue.jsでタブ切り替え

こんにちは!

前回ブログを書く時間がなかったので、今回まとめて更新します!


現在、スキマオリジナルページに「全て」「連載」「完結」の3つのタブを作り、切り替えを行う機能を作っています。

前回は、Vue.jsでタブ切り替えができるようにしたところまで進みました!


連載中の作品のデータと完結の作品のデータを取ってきて、if文で条件分岐させるのがとても苦戦しました。

やっぱりVue.jsは難しい…😅



そして、今日は、タブのデザインを考えました!

調べてみたんですが、吹き出し風のタブやインデックス風のタブ、下線のみのタブなど色々あるんですね!


今回は、吹き出し風のデザインに挑戦してみました!

作るのは意外と簡単だったのですが、色や枠をどうするかでかなり悩みました笑

全てボーダーで囲ってみたり、下線だけつけてみたり・・・


いろいろやってみた結果、タブをリストで作っていたのでそれぞれをボーダーで囲んだデザインが一番しっくりきました!!!


吹き出しなので漫画っぽさも出て、可愛い感じにすることができました😊



今回、タブのデザインでもたくさん種類があることを知ったので、他の機能のデザインも調べてみようと思います!


インターン14日目 #Vue.js学んでみた

こんにちは!

インターンシップも残り半分となりました!


『Sukima comics』のページは更新順で並んでいるので完結している作品が読まれないのではないかと思い、連載中の作品と完結している作品をタブで切り替えられるようにするのはどうでしょう?という提案をさせていただきました。

その結果、Vue.jsで書いてみようということになりました。


調べてみると、Vue.jsを使うとこんないいことがあるぞ!ということは理解できたのですが、書き方が難しすぎて…


普通のforじゃないのね、onclickも使わないのね、という感じでした笑


きっと慣れれば書きやすいんだと思うんですが、今日は調べたら調べていくほどわからなくなり気づいたら1日が過ぎていました笑


とりあえず、勉強してきます!!!