【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

目的別レスポンシブサイト制作に役立つCSSジェネレーター8選

目的別レスポンシブサイト制作に役立つCSSジェネレーター8選

レスポンシブサイトではボタンなどは画像よりもCSSで調整する方がいい場合があります。今回はCSSを使って簡単にボタンやメニューを生成できるジェネレーターや、その他便利なツールをご紹介したいと思います。

目次
  1. グラデーションを調整する。
  2. 角丸、シャドウ、フォントなどを調整する。
  3. 吹き出しボックスを作る。
  4. Photoshopの様なUIでグラデーションや角丸などを生成する。
  5. HTMLに含まれるidやclassを抽出する。
  6. 膨大な量のCSSを省略し、ダイエットしてくれる。
  7. 様々なタイプのグローバルメニューを生成する。
  8. 水平メニューを生成する。

Ultimate CSS Gradient Generator
ドラッグアンドドロップでボタン内のグラデーションを細かく調整することができます。プリセットからカラーを選ぶこともできるので、便利です。
Ultimate CSS Gradient Generator

CSS 3.0 MAKER
ボックスの角丸やテキストシャドウ、角度やカラーなど自由に設定することができるジェネレーターです。ベンダープレフィックスも生成してくれます。
css3.0maker

CSS ARROW PLEASE!
今まで吹き出しなどを作る時は画像を使っていましたが、このジェネレーターを使えば吹き出しもCSSで生成することが可能になります。
CSS ARROW PLEASE!

LAYERSTYLES
Photoshopのレイヤースタイルのようなインターフェイスで、ボックスシャドウ内側&外側、グラデーション&透明度、ボーダー、角丸を生成することができます。
LAYERSTYLES

Primer
こちらはボタンなどの生成ではないのですが、HTMLで記述したソースをこのジェネレーターへコピーして貼り付けると、そのHTMLで使われているidやclassが読み出されます。cssを記述する時にどんな指定がされているか分かりやすくなりますね。
Primer

CLEANCSS
生成したcssをコピーし貼付け、右側でどの程度ダイエットをするのか選択します。
設定によって省略の方法は異なるので、コメントアウトなど消されたくない場合は注意が必要です。
CLEANCSS

CSS MENU MAKER
ドロップダウンやフライアウト、タブメニューなどの生成することができ、カラーやグラデーションを調整することができます。
CSS MENU MAKER

CSS Menu Generator
こちらは水平メニューのみですが、多くのデザインの中から選ぶことができます。
CSS Menu Generator

 

以上、レスポンシブサイト制作に役立つCSSジェネレーターでした。

ネット上には上記の他にも役に立つジェネレーターがたくさんあるので、是非積極的に検索して探してみて下さい。

photo credit: Simon Pow via photopin cc

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+