HiKaRin's BLOG

"I am captain of my ship and the master of my fate!"

#495 デザインこんな感じどうでしょう?

 

こんばんは、今日は土佐清水市の紹介サイトのスマホサイズのデザインについて。

 

 

ただいま目指してるデザインはこれ

f:id:hyamasaki0101:20180222203120p:plain

 

おおまかな構想は残したまま、スマフォのデザインに変えようと思っていて、

ちなみに、Keynoteで作った、PCのデザイン案はこれ。

f:id:hyamasaki0101:20180222203312p:plain

 

PCの場合

FoodsのカードのMoreをタップ(カード自体をタップでも可)すると、Foodsが紹介されてるところにスクロールする

 

スマホの場合

新規ページに飛ぶみたいな感じ

 

にしたいと思っている。

けれど今index.htmlにJSで1個1個要素表示されるようにしてるから、PCデザインの時はMoreを押してスクロール(つまりこの時は、新規ページへは飛ばないようにする)。スマホデザインの時は、More押して新規画面にいく(自動スクロールはなし)。みたいな仕様にしなきゃいけないんだけど、たぶん1つ1つ丁寧に処理してできるようにすれば、ちゃちゃっといけるんだろうけど、今それを考えることから私の頭は逃げている。

 

 

文章かいてたら大したことない感じかも?と思たのがまだ救い。

 

 

あと、3つのカード台形が画像にかかってるみたいなデザインにしたんだけど、今回この部分が一番といって良いほどこっているところ。

HTML自体は簡単だけど、CSSがね。

イメージはこんな感じ

ぶあつい下線を用意して、右がわをスパッと。

まぁ実際はちょっとちがう。傾斜つけるって感じで作ってます。

f:id:hyamasaki0101:20180222204908p:plain

 

ここが、微調整しまくってつくってるもんだから、デザインをPCからスマホに、のところで非常に苦労しております。(できない言い訳・・・)

 

 

はやく作って、こまかいところの修正に入りたい・・・

 

 

明日は転職エージェントへいきます。

どうだろうか。