Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
Sassに新しいモジュールシステムが導入されます。具体的には@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。現在、Sassのおもな実装としてDart SassとLibSassがありますが、まずDart Sassへの実装が進んでいて、今年10月に安定版がリリースされる予定です。この新しいモジュールシステムを簡単に紹介したいと思います。 なお、ここで言うSassの「モジュール」とは、メンバー（変数、関数、ミックスイン）のコレクションを指し、具体的にはSassのソースファイルのことです。 背景 新しいモジュールシステムが開発された背景として、@importルールがかかえる多くの問題があります。ファイルスコープがないため依存モジュールの把握が困難になったり、名前空間を持たないためにライブラリの作者と利用者が命名を工夫しないといけなかったり、と
Sublime Textは軽量で高速なエディターですが、最近登場したような後発組である Visual Studio Codeなどに比べると初期状態での機能は少なくプラグインを必要とします。 SASS / SCSSの構文もカラーで表示することは出来ませんし SASS / SCSSをコンパイルすることもできません。 SASS / SCSSのコンパイルですが、 少し前まではcompassを利用している人が多かったと思いますが、 compassは若干、コンパイル速度が遅いため2018年になろうという今はcompassを利用している人は少ないと思います。 本記事ではGulpなどのタスクランナーを利用するほどでもないという場合の Sublime TextのみでSASS / SCSSのコンパイルを行う方法を記載します。 準備 Windowsの場合にはRubyをインストールする必要があります。 Rubyの
フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(Responsive Font Size)のデモ RFS(Responsive Font Size)の使い方 RFS(Responsive Font Size)の特徴 RFSは、ブラウザのビューポートのサイズに基づいて、フォントに適切なサイズを自動的に計算して適用するスタイルシートです。 フォントのサイズは、スクリーンやデバイスごとに最適化されます。 フォントのサイズには下限と上限があ
CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。 CSS Flexboxの各プロパティがまとめられたSass Mixin CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin CSS Flexboxの各プロパティがまとめられたSass Mixin flexboxのブラウザのサポート状況 Internet Explorer 11+（10はプレフィックス「-ms-」が必要） Edge 12+ Chrome 29+（21-28まではプレフィックス「-webkit-」が必要） Firefox 28+（2-21まではプレフィックス「-moz-」が必要） Opera 17+（15-16まではプレフィックス「-webkit-」が必要） Safari 9+（6.1-8まではプレ
Windows（Windows 7）環境でSassを使う機会があり、Sassをインストールしました。SassをインストールするにはRubyが必要です。Rubyのインストール方法はMacと異なる部分が多いので、RubyのインストールからSassのインストールまでの一連の流れをまとめておきます。 はじめにSassはプログラミング言語の「Ruby」で実装されており、Sassを使用するにはRubyの環境が必要です。なので、お使いの環境にRubyがインストールされていなければ、事前にインストールしておく必要があります。 Macでは、Rubyをインストールする方法として、rbenvやRVMのようなRubyのバージョン管理ツールを使うことが一般的 だったりします。 rbenvでRubyを管理し、Rails開発環境を構築する – maesblogMac OS X Mountain LionにRVMを使って
HOME>Web>「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ Compass、Sass（Scss）とは？ Sass（Scss）とは？ Sass（Scss）とは、CSSを記述するために開発されたメタ言語のこと。長くなりがちなコードを短くできたり、関数などを使用してより便利にスタイルシートが書けるという代物です。CSSの管理が非常に楽になります:) Sassには、プログラムのような書き方をする「Sass」と、よりCSSに近い記述が可能な「Scss」とがあるのですが、根本的には変わりありません。（記述方法が違う） ちなみに、私はScssを利用しております。 どんなことができるの ではちょいと実例をば。ScssではCSSを簡単に書くためのルールがたくさん用意されておりますのでさっくりとご紹介。 [css]
現在の安定バージョン NodistSetup-v0.7.2.exe をダウンロードして実行します インストーラの案内に従って実行していけばOKですが、私の場合は Windows7 64bit 環境なので、x64 を選択してインストールしました インストールが完了したら、追加された環境情報を認識させるためにWindowsから１回ログアウトして、再ログインし直します その後、コマンドプロンプトから引き続き作業を行います ※コマンドプロンプトからの作業は、文字化けする場合があるので、Windows のコマンドウィンドウよりも 日本語表示可能な bash 等を使うのがお勧めです Nodist インストールバージョン確認 nodist -v コマンドラインから nodist -v と入力すれば、0.7.2 と表示されるはずです インストール可能な node.js のリスト表示 nodist dist
2018 年 3 月 15 日、渋谷のはずれにある中華料理店『東亜飯店』では、 Sass の拡張フレームワークの Compass の送別会がしめやかにとりおこなわれていた。 「えー、それではですね、きょうは長年われわれのチームでいっしょに働いてきた Compass くんがついに卒業ということで、 minne のデザイナーの @shikakun から挨拶があるそうなので、よろしくお願いします」 はい、ありがとうございます。 Compass、いままでほんとうにありがとう。 Compass は、 SCSS を CSS へトランスパイルする機能だけでなく、 CSS3 で追加されたプロパティにベンダープレフィックスを付与してくれる mixin や、指定したディレクトリに画像ファイルを放り込むだけでスプライト画像も生成してくれる、とっても便利なライブラリでした。なんと最初のリリースは 2009 年で、
単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。 CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。 完成サンプル 下のサンプルが完成形となります。「Return」をクリックするとアニメーションを再度開始します。 See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen. HTML コード HTML コードはシンプルなリストになります。順番に表示する要素が li になるの
CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。 「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。 使い方 まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。 あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空に
Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way. The goal of this project is to unleash the power of the nth-child property, in an easy way. The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three Each and every mixin is really easy to use, proceed li
前回は効率的な制作環境を作るために、Gruntについて紹介しました。今回はCSSを効率よく書くことができるSassについて紹介したいと思います。 Sassを使い始めて1年ほど経ちますが、その便利さに、今ではコーディングをする上で欠かせなくなりました。 CSSの場合は、同じスタイルを何度も定義したり、プロパティの変更の修正が面倒だったりします。 Sassを使うと、CSSでは面倒なことを解決できるだけでなく、変数が利用できたり、スタイルの使い回しができたり、for文や四則演算まで使えます！ それらを使いこなせば、CSSをより便利で効率的に書くことが出来る。CSS設計もしやすくなります。CSSのパワーアップさせた言語、それがSass！のような感じです。 Sass特長 セレクタがネスト（入れ子）になっているので見やすい。また、セレクタの変更に柔軟に対応できる セレクタの使い回し（extend）がで
書籍内に出てきた、7、8章以外のソースコードが掲載されていますので、コピーして使って頂くことができます。 第1章 Sass のキホン まずは Sass って何なのかを知ろう Sass を導入する前の疑問や不安 何はともあれ Sass を触ってみよう 第2章 Sass の利用環境を整えよう Windows 環境に Sass をインストールする Mac 環境に Sass をインストールする Sass を最新版にアップデートしよう Sass コマンドの使い方を覚えよう バッチファイル／シェルスクリプトで簡単にコマンドを実行する GUI（Koala）で Sass を使用する インストールや実行中にエラーが表示された場合の対処法 第3章 これだけはマスターしたいSass の基本機能 ルールのネスト（Nested Roles） 親セレクタの参照 &（アンパサンド） プロパティのネスト（Nested P
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろSassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！ 抑えておきたい基本編1. 透明度の書き方を簡略化通常色の透明度を指定する時は rgba(0, 0, 0, 0.5); という具合で、RGB 値に続いて透明度（0〜1 の値）を記述します。しかしカラーコードで書き慣れていると、カラーコードから RGB 値に生成して指定する…というのが少し面倒だったりしますよね。Sass ならカラーコードのまま透明度の指定も可能です。 Sass（.scss）ファイル$main-color: #0bd; div
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く