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

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

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

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

Web制作者必見!レスポンシブデザインでCSS管理を劇的に効率化

Web制作者必見!レスポンシブデザインでCSS管理を劇的に効率化

CSSを効率的に管理

過去2回にわたり、弊社の提供するレスポンシブECサイト構築aishipRについてお話してきましたが、今回も少し触れされていただきます。

今回は制作担当者が気になるCSSの一部分についてお話しをしていきたいと思います。

参考記事:
aishipRを開発したポイントについて書いてみる(その3)
aishipRを開発したポイントについて書いてみる(その1)

※具体的なサイト制作の方法などは、こちらの記事『超簡単!15分でレスポンシブECサイトを作る3つのステップ』をご参照ください。

サイトの規模によりCSS調整の複雑化

レスポンシブWebデザインの基本は1つのHTMLでマークアップをしていき、それらを画面の横幅ピクセルによって表示の調整を行います。その表示の調整に横幅毎にCSSを指定して適用していきます。

CSSで調整

通常はCSSを一つのファイルで、それぞれ各パーツ単位に@media規則を使って場合分けをして管理をしてきました。

/* ヘッダー */
.headerlogo{
    float: left;
    margin: 10px 0 0 0;
}

/* ヘッダータブレット */
@media(max-width:768px){
.heaedrlogo{
    float:left;
    margin: 5px 0 0 10px;
}
}

/* メイン */
.pageMain{
	float: left;
}

/* メインタブレット */
@media(max-width:768px){
.pageMain{
    float: none;
}
}

しかしながらサイトの規模が大きくなったり、CSSの細かい調整をしていくにつれ膨大な行数のCSSファイルができてしまい、その管理が複雑になるケースも多く、探したいところへ辿りつけなかったりと少し不便です。

担当変更などで引き継ぎがあった場合にも、前担当者の記述したスタイルをまず読み解かなくてはならず、このように1ファイルに直接要素を書き込んでいくと、作業も非効率です。

aishipRではCSSが各デバイスごとに管理しやくなった

aishipRでは、従来@Media規則で分けていたCSSをデバイスごとに分けることによって管理がしやすくなってます。

1、管理画面でブレイクポイントを設定する

まずはあらかじめ管理画面でどの横幅ピクセルで切り替えるのか(ブレイクポイント)を、設定しておきます。

ブレイクポイントを設定する

2、各デバイス毎のCSSを記述

次に各デバイス毎にCSSを記述していきます。横幅毎に数字で記載しているのではなく、デバイス毎に管理をしているので、後でCSSを追記したり削除したりする際の検索の手間を大幅に省くことができます。

<スマートフォン用のCSS記述欄>

<タブレット用のCSS記述欄>

<PC用のCSS記述欄>

<ケータイ用のCSS記述欄>

もちろん共通での設定も可能となってます。

<共通のCSS記述欄>

 

おわりに

いかがでしたでしょうか。サイト制作ASPやカートASPにCMSは、CMSと謳っている以上便利なものでなくてはなりません。

制作担当は膨大な量のCSSを記述・管理をしたり、また複数の担当者によって管理される場合もあります。そのようなときにより便利で簡単に管理できるようにaishipRでは用意しております。

ご興味をお持ちになられた方や実際に触ってみたいという方は、ぜひお気軽に「aishipR お問合せ」までお問い合わせください。

photo credit: tantek 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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+