Web関連

【Web制作会社に聞く】一番良いCSSってなんだ!?

0

いろいろな書き方が存在するCSS!

まずはおさらいですが、CSSとはHTMLに記載できないページのデザイン要素を書くことができるファイルのことです。

ですがこのCSS、HTML以上にコーダーによって記述方法がバラバラになりがちなのです。

結論から言いますとCSSは「設計」をしっかり行ってサイトごとにブレがなければ、どんな書き方をしてもOKだと思います。

ただし、ソースが無駄に長くなってしまったり、編集がしにくいもの、構文エラーのものはダメですが(笑)

設計さえすればどんなものを書いてもよい、とは言ってもWeb制作会社として”これが最適”というものを定めたいと思いいろいろなCSSを検証してみました!

OOCSS

OOCSS(オーオーシーエスエス)というものがあります。
なんの略かというと(Object Oriented Cascading Style Sheets!)

基本的な考え方としてはレイアウトに関わるCSSと色や大きさに関わるCSSを分けて記載するというもの。

信号というレイアウトを表すCSSと赤、青、黄を表すCSSを別々に書いて、赤の時の信号、青の時の信号、黄色の時の信号を2つのCSSで表すというものです。

さらに、その赤というCSSはポストやリンゴというレイアウトにも使うことができるので便利!
といった感じです。

ですが、デメリットとしてCSSを見ただけでどの部分のCSSなのかが分かりにくく、メンテナンスの時に担当が変わったなどの時に煩雑になりがちです。

これだと、メンテナンスにも強い弊社のフォーマットとしては微妙、、、

SMACSSとBEM

SMACSS(スマックス)というもの、BEM(ベム)というものがあります。

それぞれの略は
・Scalable and Modular Architecture for CSS
・MindBEMding
だそうです。

なんだか難しい単語が並んでいますが、SMACSSというCSSはOOCSSとは違ってベース、レイアウト、モジュール、状態、テーマという要素にCSSを分けて、メンテナンス性を高めたものです。

BEMはさらにクラス名をさらに分かりやすく、人にやさしい命名ルールにしたものです。

欠点としては定義する名前が長くなりがち。
でも人には分かりやすくメンテナンスに強そう!

これ以外にも世の中にはいろいろなCSSのフォーマットが存在していて、
どのCSSもメリットとデメリットがありますが、どの開発者も自分のCSSが一番!
って思っているでしょう(笑)

 

では何が一番良いのか!作ってしまえ!

では何が一番良いCSSなのか?と考えた時にWeb制作会社としてメンテナンス性が高くて汎用性もそれなりにあって、
検索エンジンも優しいCSSフォーマットを作ることにしました!
そして現在、誠意制作中になります。

次回のコラム(もしくはその次、、)で発表できるように進めていこうと思います!

css_15040302.jpg

関連するサービス

ホームページ制作

0

Web広告のバナーは「つかみ」のキャッチコピーで決まる!?前のページ

Web制作でも重要!顧客満足度を高めるための3つポイント次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    WEB制作の現場とテレビ会議システム

    昨今インターネットの普及・働き方の多様化が進んできたこともあり、自宅勤…

  2. Web関連

    情報漏洩に注意!?web制作・運用におけるクラウドセキュティのあれこれ

    皆さん、クラウドセキュリティという言葉をご存知です…

  3. Web関連

    【初心者向け】ここに注目!スマートフォン用バナーを作成しよう

    スマートフォンを "持っていない人" 、手を挙げてー!!.....…

  4. Web関連

    集中力を上げたい人必見!おすすめストリーミングサイト

    デザインをしているとき、プログラミングをしているとき、プレゼン資料を考…

  5. Web関連

    最近はオリジナルグッズ制作が流行っているらしい!?

    今回は、オリジナルの作品・グッズ・お菓子の制作ができる便利サイトを集め…

  6. Web関連

    切っても切れないデザインと色の話

    こんにちは、デザイナーの角田です。毎年こっそり楽しみにしていること…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    Web制作について初心者視点で考えてみた!
  2. AIさくらさん

    RPAの導入に向いている業務内容、適した分野や部門は?導入事例を基に考える
  3. Web関連

    Webサイト売上げアップに使える”行動心理学” その4
  4. マーケティング

    不特定多数へ情報を提供する昔のマーケティングしてませんか?
  5. Web関連

    ロボットも好みはやっぱりスリムでイケメン!
PAGE TOP