タイ研修いってきました
2021.07.02

【コピペ・css】お問合せステップデザイン!【HP制作・Web制作】

  • このエントリーをはてなブックマークに追加

こんにちは!EC担当している佐藤です!

 

今はECが中心ですが、たまにコーディングをしているのでこんなテンプレあったら便利かな~と思い今回こんなテンプレ用意しました!

お問合せページの上にある、今自分がどこにいるかわかりやすくするステップのcss↓です!

デザイン考えるときにも使えると思うので、コーダー・デザイナーの方参考に是非ご利用ください😊

レスポンシブ済みなので、表示の関係でデザインがSPだけのものになっているは画像を掲載しているので参考にしてください~

 

STEPデザインテンプレ7種

クラスにactiveがついている箇所が目立つ部分(今いるページのSTEP)のデザインになりますので、コピペしてページごとに変えて使用してください。

ひし形タイプ

See the Pen by harukasato (@satosubarusan) on CodePen.

 

数字タイプ

See the Pen by harukasato (@satosubarusan) on CodePen.

 

●タイプ

See the Pen by harukasato (@satosubarusan) on CodePen.

 

■タイプ

See the Pen by harukasato (@satosubarusan) on CodePen.

 

長方形タイプ1

 

See the Pen by harukasato (@satosubarusan) on CodePen.

長方形タイプ2

 

See the Pen by harukasato (@satosubarusan) on CodePen.

長方形タイプ3

 

See the Pen by harukasato (@satosubarusan) on CodePen.

 

まとめ

結構コーディング入るとお問合せのデザインは、コーダーに任せるというパターンがあるんですよね…。

お問合せの参考デザインやテンプレ探すとあまりデザインされていないものや、海外のものをそのまま持ってきているパターンが多いので日本のサイト向けのテンプレが欲しいと思い今回作りました!

次回需要あれば、フォームやフォーム+規約が一緒になっているデザインも作成したいと思います😁👍

この記事を書いた人

はるかさとう

楽天EC/デザイン/コーディング 最近switchのゲームに時間吸われてます

小規模持続化補助金

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。
売れてるサイトはこんなに違う。
イキツケ制作所
小規模持続化補助金