タグ別アーカイブ: レスポンシブ

宿泊ページを一部改良


レスポンシブを簡略化しすぎてたので、
少し改良しました。

そして、
宿泊ページが長いため、
料金表がどこにあるのかわからない。

空室状況がどこにあるのかわからない。

等の問題解決のため、
昔のように独立ページを作りました。


1. 料金表ページ作成

2. 宿泊ページにボタンを6つ作成
(料金表、空室状況、料理を各2つづつ)

3. 6つのボタンをレスポンシブ化

ということで完成。


デスクトップの場合。

パターン1のボタン3つが、
30%くらいで並びます。


縮めていくと、
レスポンシブじゃない元々のボタンは、
大きさ変わらずリキッド式に流れます。

しかし、
レスポンシブの3つのボタンは小さくなり、
30%くらいで並び続けます。


さらに縮めていくと、
レスポンシブの新しい3つのボタンは、
パターン2の3つのボタンに入れ替わり、
30%くらいで並びます。

文字をキャプションではなくて、
直に書いてるので、
文字も一緒に小さくなるためです。

高さもなくなり薄くなるのもあります。

ホントはキャプションを使って、
文字の大きさを変わらないようにすると思います。


さらに縮めていくと、
3つのボタンはパターン1にもどって、
1列になります。

レスポンシブじゃないボタンは、
大きさは変わらず、
スマホで見ると2列になると思います。


ということで、
やってみたもののまたもや中途半端なレスポンシブ。

またそのうちやると思います。

よろしくお願いいたします。


新web site完成


ようやくアップしました。

実は1年前の春完成予定でしたが、
間に合わずにようやく完成。

2年かかりました。

実際には春夏秋と作ってません(笑)。

前回は3年前ですね。

pc版とスマホ版の2種類作っていて、
スマホ版をレスポンシブに変えた時。

あの時点でレスポンシブを自社で作ってる人って、
珍しいんじゃなかろうか。


今回は、

1. pc版とスマホ版を統合して、
レスポンシブで1本化

2. ドロワーメニューの導入

ここまでのシステムを1年前の冬に作成。

この冬に、

3. ページの作成

4. SSL対応化

ということで、
2月中旬にアップしました。



ナビゲーションが下にずれていき、
最終的には2列になるという、
レスポンシブじゃないじゃん!

リキッドタイプをメインにしていて、
レスポンシブは退化しています(笑)。

時間があればレスポンシブでがんばります。

しばらく静観。


ドロワーメニューは、
CSSで作りました。

隠されたチェックボタン方式ですね。

しかし問題があって、
ドロワーメニューから行って戻ると、
ドロワーが開いた状態のとこに戻るということ。

この直し方がわかりません。

でもドロワーメニュー使わなくてもよさそう。

しばらく静観。


レスポンシブが活躍するのは、
写真の入れ替えやflexの解除。

写真は2つ書き込んで、
幅によって1つ消しています。

最終的に2週間悩んだのが、
予約フォームへのリンクですね。

2月中旬にアップしてたのに未完成でした。

PCで見るとPC版予約フォーム、
スマホで見るとスマホ版予約フォームへ飛ぶようにするには?

予約フォームをレスポンシブで1本化しようかと思いましたがあきらめて、
幅が狭くなるとスマホ版に飛ぶようにしました。

ボタンを2つ作って、
1つ消すタイプにしようとしましたが、
ちょっと形が崩れるんですね。

ここから1週間崩れたまま。

そして思いついたのが、
ナビゲーション丸ごと2つ作る。

これが上手くいきました。

案外単純なものですが、
思いつきませんでした。

これを風呂に入ってるときに思いつくんですね。

これが温泉の効果です(笑)。