【全訳】JSだけじゃない！AirbnbのCSS/SCSSスタイルガイド - リクルート住まいカンパニー Tech Blog
こんにちは！2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。 入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。 一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。 特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO
これは便利！Animate.cssをSassで使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。京都の会社でフロントエンドエンジニアなどをしている田路と申します。 このたび、縁あってLIGブログに記事を書かせていただくことになりました。どうぞ、よろしくお願いいたします。 さて、早速ですが今回はAnimate.cssをSassで使用する方法を紹介していきたいと思います。 Animate.cssとは？ Animate.cssは、読み込んでさえいれば、要素にクラスをつけるだけでさまざまなアニメーションを実装してくれるという便利なスタイルシートのライブラリです。 使用方法 まずはこちらからダウンロードしてください。 ファイル名、拡張子をanimate.scssとすることで、partial機能を利用し、簡単にSassでも利用することが可能になります。 animate.css → _animate.scss ただし「3秒かけてアニメーションさせたい」や「アニメーションの開始を遅延さ
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41a2e814247663ad1040b747f3c634ccd698a028/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111701.png)
gulpでsassをコンパイルするタスクを作る - yutaponのブログ
何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
GruntでSassのビルドとjsファイルの結合・圧縮を自動化 - bata's log
JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/javascript/firstgrunt.html Macの場合 http://catcher-in-the-tech.net/461/ Gruntfile.js を記述 module.exports = function(grunt) { grunt.initConfig({ //Sassをビルド sass: { options: { style: 'compressed',//CSSのスタイル sourcemap: true,//ソースマップを書き出す noCache: true//キャッシュファイルを生成
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
Sass 3.2 からは placeholder selector を使おう - nodot
Sass 3.2 からは placeholder selector を使おう この article は CSS Preprocessor Advent Calendar 2012 の25日目のエントリーとして書かれています(あれれ?!)。 ご挨拶 2012年も皆様の願い空しくクリスマスは中止されず、それどころか今年も元気に Santa Tracker がサンタクロースを追いかけ回していたわけですが、CSS メタ言語 lover の皆様におかれましてはいかがお過ごしでしょうか。僕個人は今年の師走は今までにない師走っぷりで、一番ヤバい時は某 b 社にいた20代の頃を思い出す感じでした。いつもだいたい忙しいピークは夏に来るんですが今年は違いましたね。でもひとまず何とか乗り切れました。そう、もちろん Sass があったからです。これがなかったらと思うと恐ろしいですね。2012 年の冬、僕を救ってく
これは今読むべき！Web制作の今がわかりやすく説明されている「現場のプロが教えるWeb制作の最新常識」を読みました！｜男子ハック
本の紹介これは今読むべき！Web制作の今がわかりやすく説明されている「現場のプロが教えるWeb制作の最新常識」を読みました！2014年4月14日290 @JUNP_Nです。WEBCRE8.jpの酒井優（@glatyou）さんが共著として参加されている「現場のプロが教えるWeb制作の最新常識」をいただきました。Web制作者ではない僕が制作の本を紹介するのはおかしいのですが、Webに関わることをしている人は読んでおくべき本だったのでご紹介。 Web制作の現状やトレンドを知っているか知らないかでは大違い目まぐるしいスピードで変化しているWeb制作の現場。最近では「フラットデザイン」「レスポンシブデザイン」「パララックス」などWeb制作の職業についていなくても耳にしたことがあるキーワードがたくさん。他にもHTML5やSass、Gitなど新しい言語やプロジェクト管理について、今のWeb制作の現場がど
Gruntを使ってプロジェクトを自動化する、Myタスクメモ | tipsBear
Gruntで出来ることはたくさんありますが、今回ご紹介するのは私がよく使うGruntの設定のメモになります。 ちなみに、Gruntの導入方法や基本的な解説は下記の記事がとてもわかりやすく紹介してくれていますので、これから導入したいという方がいましたら是非参考にどうぞ。 Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 – Web Design KOJIKA17 コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 – OZPAの表4 今更だけどやるgrunt入門編・インストールから基本的な使い方 – WEB Drawer Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 – WWW WATCH また、この記事はSass/Compass、ブラウザのliveReloadを使用することを前提に書いてい
モバイルアプリ向けUIフレームワークionicがSassで作られている＆AngularJSに最適化されていて俺得すぎる | mah365
HTML5でモバイルアプリを作るなら、UIはionicで決まりなのでは！と思えるぐらい良いライブラリです。AngularJS＆Sass派の人はぜひ使ってみてはいかがでしょうか。 はじめからAngularJSで使うことを念頭に置かれているのが良い はじめからAngularJSで使うことを念頭に置かれているので、モバイルアプリで当たり前に使う機能をAngularJSから簡単に操作できるように、ionic-angular.jsというライブラリが用意されています。 ナビゲーション（Views and Navigation） テーブルビュー（List） タブバー（Tab Bar） スライドメニュー（Slide Menu） などなど、一通りの機能がAngularJSから操作できるようになっています。 設計方針もCocoa Touchっぽくしているとのことで、iOSネイティブで開発していた人にもとっつき
4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass | mah365
そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。 ソース こちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。 実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color
2時間でSassを習得！Sass初心者向け講習スライド大公開！ | WebNAUT by Beeworks
※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます！ この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip（3.5MB） Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass
Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ぺちこです。 先日水族館に行ったら「ペンギン12種模型セット」なるものをショップで発見し、危うく買うところでした。 Suicaペンギンのモデルはおそらくアデリーペンギンですが、私が愛してやまないのはジェンツーペンギンです。どうでもいいですね。（興味をもった人はみんな友達） さて、以前にデザイナーのせいとくんが Sassの導入方法と Sassの基本テクニックについてまとめてくれていましたが、今回はそれらを踏まえて、コーディングに役立つextend＆mixin集を作ってみました！ 日々ちょこちょこと作っては使いまわして・・を繰り返しており、あると便利なものは先にまとめておけば楽ではないかと、やっと気付きました。 サンプルで作ったhtmlとscssファイルを一式ダウンロードできるようにしていますので、そのまま使っても良し、各自（各社）毎のコーディングルールに合せて改良しても良し、要ら
2013年Web制作に使い始めてよかったツール・サービスまとめ 〜そして時は2014年へ〜
2013年Web制作に使い始めてよかったツール・サービスまとめ 〜そして時は2014年へ〜 2013.12.19 | この方法お勧めです！ | 初心者向け | 制作あるある 皆様しわっす。WP-Dではジミーな技術系記事を書いてますエメラルドこと井村です。 パープルリーダーから「ゆく年くる年」というお題をいただきまして、たまにはまとめ記事的なものを書いてみたいと思います。 日々新技術に猛進する猛牛のような制作者の皆様には役に立たない記事だと思うので、日本酒でもたしなみながらくるくるスクロールしていただければこれ幸いであります。 個人的な話になりますが2013年3月に独立しまして、制作環境なども自分の好きな物を使うことができるようになりました。またフリーランスにとっては作業効率が自分の手取りに直結するので、作業の自動化・効率化は死活問題でもありますよね。 紹介しているツールやサービスは2013
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
Sassを使って時間短縮！アイコンフォントを手軽に使える方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、ももこです。 先日発売されたGE2のプレイ時間を確保する為に、作業の時短は重要な任務です。 今回はSassでアイコンフォントを手軽に使える方法をご紹介します！ アイコンフォントを使ってみたいけど導入方法が難しそう…という方にオススメです。 アイコンフォントの用意をする まずはアイコンフォントを用意します。 過去記事にアイコンフォントの紹介がありますので、宜しければご参考ください。 「Retinaでもボケない「シンボルアイコン」を使いこなそう！」 「無料で出来る！オリジナルアイコンフォントを作ってみよう」 今回は「Fontello」から可愛いアイコンフォントをダウンロードしました。 cssフォルダと同階層に「fonts」フォルダを作り、その中にフォントデータを入れてください。 アイコンフォントの読み込み 早速Sassにフォントを読み込ませます。 LIGブログでたびたび登場する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
Bootstrap
