SHOEISHA iD

パスワードを忘れた場合はこちら

※旧SEメンバーシップ会員の方は、同じ登録情報（メールアドレス＆パスワード）でログインいただけます

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

水無瀬 あずさ

柳井 政和

矢野 完人（合同会社DMM.com）

橋原 朋央（株式会社NTTデータ）

吉村 哲樹
イベント
イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

講演資料・動画まとめページ

Developers CAREER Boost 2024 講演資料まとめ

Developers X Summit 2024 講演資料まとめ

Developers Summit 2024 KANSAI 講演関連資料まとめ

Developers Summit 2024 Summer 講演資料まとめ

Developers Boost 2024 講演資料まとめ

Developers Summit 2024 講演資料まとめ

翔泳社では、「独習」「徹底入門」「スラスラわかる」「絵で見てわかる」「一年生」などの人気シリーズをはじめ、言語や開発手法、最新技術を解説した書籍を多数手がけています。プロジェクトマネジメントやチームビルティングといった管理職向けの書籍も豊富です。

ITエンジニアとしてのスキルアップ・リスキリングに、ぜひお役立てください。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
SassとCompassをつかってCSSを効率作成しよう

CSSフレームワーク「Compass」の基礎

SassとCompassをつかってCSSを効率作成しよう（3）

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

　本連載では、CSSの拡張言語であるSassの導入と、Sassを利用したメジャーなCSSフレームワークの一つであるCompassの導入をサンプルを交えて紹介し、最終的には実際にオイシックスで利用しているCSSをSassで書き直した際の実例をご紹介します。第3回目はCompassの基礎部分を紹介します。

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

対象読者

  • CSSの基礎知識がある方
  • SassおよびCompassの導入を検討している方

Compasとは

　Compassは、Sassを拡張したオープンソースのフレームワークです。第1回と第2回でご紹介したSassをより使いやすく、便利にしたのがCompassになります。実際Sassを利用するときは、合わせてCompassも一緒に利用するケースが多いです。

Compassのメリット

CSSスプライトが簡単に作成できる

　Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。

独自のmixinが利用できる

　グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。

独自の関数が利用できる

　画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。

　mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。

　上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。

  • 読みやすい
  • 変数や繰り返し処理が使える
  • 成果物の品質を統一できる
  • 高速化につながる
  • //で1行のコメントが書ける
  • 関数が作れる

Compassのインストール

　コマンドラインからCompassのインストールを実行します。今回はSassインストールを前提に話をしていきます。もしSassのインストールがまだできていない人は、第1回目の記事を参考にSassをインストールしてみてください。

Windows環境

　Windows環境でのCompassのインストールを説明します。Compassのインストールはコマンドプロンプトから行います。コマンドプロンプトを起動して「gem install compass」と入力し、「Successfully installed compass」と表示されれば成功です。

　ためしに「compass version」と入力してみてください。インストールされているCompassのバージョンが表示されるはずです。

Mac環境

　次に、Mac環境でのCompassのインストールです。Mac環境でも同様にCompassのインストールはコマンドラインから実行します。ターミナルを起動して「sudo gem install compass」と入力します。

　その後パスワード入力が促されますので、ご自身のPCのパスワードを入力してください。

　パスワード入力後に「Successfully installed compass」と表示されれば成功です。

　ためしに「compass version」と入力してみてください。インストールされているCompassのバージョンが表示されるはずです。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
サンプルファイルの作成と実行

NEXT

この記事は参考になりましたか？

  • X ポスト
  • このエントリーをはてなブックマークに追加
SassとCompassをつかってCSSを効率作成しよう連載記事一覧

もっと読む

この記事の著者

鈴木 健二（オイシックス株式会社）（スズキ ケンジ）

オイシックスにてスマホ開発担当。映像製作、DTPなどのデザイナー経験があり、フロントエンドからサーバサイドまで幅広く開発を行っている。現在仙台在住で、毎週東京のオイシックス本社まで通っている。得意分野はJavaScript、CSS。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事

この記事は参考になりましたか？

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine（コードジン）
https://codezine.jp/article/detail/7772 2014/05/27 14:00
" ); }

おすすめ

アクセスランキング

  1. 1
    Google、同社史上もっともインテリジェントなAIモデル「Gemini 2.5」を発表 NEW
  2. 2
    「アップサート」　～マンガでプログラミング用語解説
  3. 3
    「Developers Summit 2025 アワード」ベストスピーカー1位は安野貴博氏＆漆原茂氏と、「ちいさなDX」セッションがW受賞 NEW
  4. 4
    なりたくなかったマネージャーが天職に？ 知らない景色に飛び込むエンジニアは「何にだってなれる」
  5. 5
    【Webブラウザでストリーミング動画配信：前編】MP4プログレッシブダウンロードによるストリーミング再生を実現しよう NEW
  1. 6
    ウェルスナビCTOが語る「事業成長に貢献できるエンジニアになるために必要なこと」 NEW
  2. 7
    企業の約7割、AIによってエンジニアの採用要件が変化すると予想。ファインディが調査 NEW
  3. 8
    日本発グローバル企業 ファーストリテイリングが実践する、世界で活躍するエンジニアの育て方 NEW
  4. 9
    大阪大学発！ 量子コンピュータのためのクラウドシステム構築とDevOps最前線 NEW
  5. 10
    生成AIモデルGeminiとBigQueryで実現！ データ分析の効率と効果を飛躍的に向上させる方法 NEW

アクセスランキング

  1. 1
    Google、同社史上もっともインテリジェントなAIモデル「Gemini 2.5」を発表 NEW
  2. 2
    「アップサート」　～マンガでプログラミング用語解説
  3. 3
    「Developers Summit 2025 アワード」ベストスピーカー1位は安野貴博氏＆漆原茂氏と、「ちいさなDX」セッションがW受賞 NEW
  4. 4
    なりたくなかったマネージャーが天職に？ 知らない景色に飛び込むエンジニアは「何にだってなれる」
  5. 5
    【Webブラウザでストリーミング動画配信：前編】MP4プログレッシブダウンロードによるストリーミング再生を実現しよう NEW
  6. 6
    ウェルスナビCTOが語る「事業成長に貢献できるエンジニアになるために必要なこと」 NEW
  7. 7
    企業の約7割、AIによってエンジニアの採用要件が変化すると予想。ファインディが調査 NEW
  8. 8
    日本発グローバル企業 ファーストリテイリングが実践する、世界で活躍するエンジニアの育て方 NEW
  9. 9
    大阪大学発！ 量子コンピュータのためのクラウドシステム構築とDevOps最前線 NEW
  10. 10
    生成AIモデルGeminiとBigQueryで実現！ データ分析の効率と効果を飛躍的に向上させる方法 NEW
  1. 1
    世界6000万ユーザーの「TimeTree」、サービスの未来を見据えて挑んだデータベース移行の舞台裏
  2. 2
    「オブザーバー・パターン」　～マンガでプログラミング用語解説
  3. 3
    3/5まで書籍全文が無料公開 『Pythonで動かして学ぶ！Kaggleデータ分析入門』
  4. 4
    データサイエンス基礎を高校数学から復習しよう！ D3.jsでデータを表現する
  5. 5
    macOS上のアプリケーションからChatGPTが呼び出せるように。各種IDEやターミナル、メモなどが対応
  6. 6
    マイクロソフト、VSCodeの新機能「Copilot Next Edit Suggestions」のプレビュー版公開
  7. 7
    GitHub、あらゆるエディタやIDEとGitHub Copilotとの統合を可能にする「Copilot Language Server SDK」を一般公開
  8. 8
    フロントエンドの定番ライブラリ「React 19」の新機能を紹介──React Server Componentsとその他の改善点
  9. 9
    「Tailwind CSS」の公式UIライブラリ「Tailwind UI」、サービス拡大を視野に「Tailwind Plus」へ名称変更
  10. 10
    オープンソーステキストエディタ「Emacs 30.1」リリース

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

メールバックナンバー

アクセスランキング

  1. 1
    Google、同社史上もっともインテリジェントなAIモデル「Gemini 2.5」を発表 NEW
  2. 2
    「アップサート」　～マンガでプログラミング用語解説
  3. 3
    「Developers Summit 2025 アワード」ベストスピーカー1位は安野貴博氏＆漆原茂氏と、「ちいさなDX」セッションがW受賞 NEW
  4. 4
    なりたくなかったマネージャーが天職に？ 知らない景色に飛び込むエンジニアは「何にだってなれる」
  5. 5
    【Webブラウザでストリーミング動画配信：前編】MP4プログレッシブダウンロードによるストリーミング再生を実現しよう NEW
  1. 6
    ウェルスナビCTOが語る「事業成長に貢献できるエンジニアになるために必要なこと」 NEW
  2. 7
    企業の約7割、AIによってエンジニアの採用要件が変化すると予想。ファインディが調査 NEW
  3. 8
    日本発グローバル企業 ファーストリテイリングが実践する、世界で活躍するエンジニアの育て方 NEW
  4. 9
    大阪大学発！ 量子コンピュータのためのクラウドシステム構築とDevOps最前線 NEW
  5. 10
    生成AIモデルGeminiとBigQueryで実現！ データ分析の効率と効果を飛躍的に向上させる方法 NEW

アクセスランキング

  1. 1
    Google、同社史上もっともインテリジェントなAIモデル「Gemini 2.5」を発表 NEW
  2. 2
    「アップサート」　～マンガでプログラミング用語解説
  3. 3
    「Developers Summit 2025 アワード」ベストスピーカー1位は安野貴博氏＆漆原茂氏と、「ちいさなDX」セッションがW受賞 NEW
  4. 4
    なりたくなかったマネージャーが天職に？ 知らない景色に飛び込むエンジニアは「何にだってなれる」
  5. 5
    【Webブラウザでストリーミング動画配信：前編】MP4プログレッシブダウンロードによるストリーミング再生を実現しよう NEW
  6. 6
    ウェルスナビCTOが語る「事業成長に貢献できるエンジニアになるために必要なこと」 NEW
  7. 7
    企業の約7割、AIによってエンジニアの採用要件が変化すると予想。ファインディが調査 NEW
  8. 8
    日本発グローバル企業 ファーストリテイリングが実践する、世界で活躍するエンジニアの育て方 NEW
  9. 9
    大阪大学発！ 量子コンピュータのためのクラウドシステム構築とDevOps最前線 NEW
  10. 10
    生成AIモデルGeminiとBigQueryで実現！ データ分析の効率と効果を飛躍的に向上させる方法 NEW
  1. 1
    世界6000万ユーザーの「TimeTree」、サービスの未来を見据えて挑んだデータベース移行の舞台裏
  2. 2
    「オブザーバー・パターン」　～マンガでプログラミング用語解説
  3. 3
    3/5まで書籍全文が無料公開 『Pythonで動かして学ぶ！Kaggleデータ分析入門』
  4. 4
    データサイエンス基礎を高校数学から復習しよう！ D3.jsでデータを表現する
  5. 5
    macOS上のアプリケーションからChatGPTが呼び出せるように。各種IDEやターミナル、メモなどが対応
  6. 6
    マイクロソフト、VSCodeの新機能「Copilot Next Edit Suggestions」のプレビュー版公開
  7. 7
    GitHub、あらゆるエディタやIDEとGitHub Copilotとの統合を可能にする「Copilot Language Server SDK」を一般公開
  8. 8
    フロントエンドの定番ライブラリ「React 19」の新機能を紹介──React Server Componentsとその他の改善点
  9. 9
    「Tailwind CSS」の公式UIライブラリ「Tailwind UI」、サービス拡大を視野に「Tailwind Plus」へ名称変更
  10. 10
    オープンソーステキストエディタ「Emacs 30.1」リリース