脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
【全訳】JSだけじゃない！AirbnbのCSS/SCSSスタイルガイド - リクルート住まいカンパニー Tech Blog
こんにちは！2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。 入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。 一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。 特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Twitter を見ていると 『Riot.js でも Sass 使いたいー！』ってのをちらほら見かけます. Riot.js は, 標準で Less にも Sass にも対応してると思っていたんですが, ちゃんと中身を読んでみると Less にしか対応していませんでした💦 (以前ドキュメントで対応してるっての見た気がするんだけどなぁ...) ただ, 引数で簡単に拡張できるよう良い感じに作ってくれているので, 手軽に Sass を導入できます. なので今回は, 実際に Riot.js のパーサーに Sass
[Rails] TwitterBootstrapとSassとAssetPipeline - Qiita
Ruby on Rails Tutorialのエッセンスを自分なりに整理してみる5 [Ruby基礎] ブロックとProcをちゃんと理解する http://qiita.com/kidachi_/items/15cfee9ec66804c3afd2 の続き。 Ruby on Rails Tutorial（chapter5） http://railstutorial.jp/chapters/filling-in-the-layout#sec-layout_exercises TwitterBootstrapの導入 Bootstrapでは、動的なCSS生成のためにLESSを使用している。 一方でRailsのAssetPipeline（詳細後述）はデフォルトではSassをサポートする。 →bootstrap-sass（gem）を導入し、Sassベースで扱えるようにする。 source 'https:
![[Rails] TwitterBootstrapとSassとAssetPipeline - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1c27d27c7a1af177eefba7fd80592d464cbf9cf/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmFpbHMlNUQlMjBUd2l0dGVyQm9vdHN0cmFwJUUzJTgxJUE4U2FzcyVFMyU4MSVBOEFzc2V0UGlwZWxpbmUmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWRmOGY4NmNkYjZjMjhkNDU4YTkzMTc4NmQwNDU0ZGRl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBraWRhY2gxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mMDA4Mzk3YzFlZTZlMTA4YTY1YmYwODZlYzgzZDRiZg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ki44Kr44OE44Kt%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D2c52a8440e650cdfa040029c5246e9cd)
社内Sass勉強会を開催しました
こんにちは、クレイの亀井です。もうすっかり秋ですね！コンビニやケーキ屋さんに芋栗南瓜のスイーツがもりだくさんでテンション上がりっぱなしです さて本題に入ります。先日9月30日にクレイ社内で Sass 勉強会を開催し、CSS 設計について発表しました。そのことについて今回はブログに書こうと思います。 開催することになった経緯 数ヶ月前から社員のキャリアアップのため、『クレイ社員補完計画』が開始しました。週に4時間まで自分の好きなことを勉強する時間をとれ、2ヶ月に一度ブログや勉強会などの場で成果を発表します。 私ははじめ別のテーマにしていたのですが、いまいちモチベーションが上がらず、相談した結果 Sass をテーマに勉強会を開催することになりました。 社会人になってから2年半、スライドを制作して発表をするという経験がなかったのですが、いつか外部の勉強会で LT などしてみたいと思っていたためい
最近のRubyなWebアプリの構成
私が運用しているWebアプリ (Perfume Headlineとかこのブログとか) で使っているライブラリなどを紹介します。つまり、最近とは最近流行りという意味ではなく、あくまで最近私が使っているという意味に過ぎません。あしからず。 紹介するのは以下のものです。こうやって並べるとほんとにたくさんのソフトウェアに支えられていることがわかりますね。感謝しながら使いたいですね。 Webアプリケーションフレームワーク Sinatra データベース SQLite DataMapper テンプレートエンジン Haml Sass Compass アセット管理 sprockets sprockets-sass sprockets-helpers 管理用コマンド Thor バッチ rufus-scheduler プロセス起動 foreman 死活監視 daemontools デプロイ Git Webサーバ
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
美しいグラデーションが簡単に利用できる！グラデの種類が豊富に揃ったmixinとスタイルシートのまとめ -SuperGradient
垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描くmixinをまとめた「SuperGradient」を紹介します。 ↓4色を使った斜めのグラデーション、美しいですね！ SuperGradient SuperGradient -GitHub SuperGradientではグラデーションのタイプとカラー、そのカラーが始めるポイントを指定するだけで、簡単に美しいグラデーションが描けるSassのmixinがまとめられています。 下記に、そのmixinの使い方とスタイルシートでの記述も添えてみました。 Vertical, 2 colors 2色を使った垂直方向のグラデーション mixinの使い方 @include sgradient( $colors: ( (#31B7D7, 0%), (#EDAC7D, 100%) ) );
これは便利！Animate.cssをSassで使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。京都の会社でフロントエンドエンジニアなどをしている田路と申します。 このたび、縁あってLIGブログに記事を書かせていただくことになりました。どうぞ、よろしくお願いいたします。 さて、早速ですが今回はAnimate.cssをSassで使用する方法を紹介していきたいと思います。 Animate.cssとは？ Animate.cssは、読み込んでさえいれば、要素にクラスをつけるだけでさまざまなアニメーションを実装してくれるという便利なスタイルシートのライブラリです。 使用方法 まずはこちらからダウンロードしてください。 ファイル名、拡張子をanimate.scssとすることで、partial機能を利用し、簡単にSassでも利用することが可能になります。 animate.css → _animate.scss ただし「3秒かけてアニメーションさせたい」や「アニメーションの開始を遅延さ
Tokyo Otaku ModeがStylusを使う理由 | Tokyo Otaku Mode Blog
Здравствуйте! Tokyo Otaku Modeでフロント周りを担当している今吉です。 社内でロシア人という設定を付けられていますが、ロシア語は挨拶くらいしかできません。 Webサイトを作るのに避けて通れないのがCSSだと思います。エンジニアも多かれ少なかれCSSを書く事があるかと思います。 しかし、CSSを書くのはとても面倒くさいです。出来る限り楽をしたいと常々思っています。そこで、CSSプリプロセッサを導入してCSSを作成している方も多いでしょう。CSSプリプロセッサとは、乱暴に言ってしまえばCSSをクールにラクに書く事ができる言語です。(設計が素晴らしく、COOLなCSSというものも、もちろんあるとは思いますが、これは一旦置いておきます。) 恐らく最も知られているものは、LESSとSass/Scssでしょう。 しかし、Tokyo Otaku Modeでは、Stylusとい
keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
CompassでSpriteなんてもう古い！？grunt-spritesmithのすすめ - Thujikun blog
釣りっぽいタイトルになってますが、ようはCompassのSprite Generatorだと解決できないことをgrunt-spritesmithならやってくれるよって話です。 Compassの方については山ほど記事があるので、あまり知らないよって方はてきとーにググってください。 Compassの問題点 Sassでしか使えない 一つ目は当然ですが、CompassはSassのフレームワークなのでLessとかStylus派の人は使えないってことです。 私は最近はStylus派なので、なにか良いSpriteツールないかなーと探し始めたのが最初でした。 SassのCompileのたびにSprite化処理が実行される これは画像が多いサイトではかなり深刻な問題となります。画像とは関係ないStyleの変更時でも毎回Sprite化が実行されるため、確認までかなりの時間をロスします。 正方形に画像を並べると
デザイナーのいないチームでのCSSの書き方 - morishitter blog
スタートアップや少人数のチームでは、デザイナー（最終的なデザインの決定権を持つ人）がいないことも少なくないと思う。 また、エンジニアだけで何かサービスを作ることも多いだろう。 僕自身、そのような環境でよく開発をする。 僕はCSSはそこそこ書けるが、デザイナーではないのでサイトのデザインについては他のエンジニアと相談しながら決定している。 IllustratorやPhotoshopもほぼ全く使えないので（紙にざっくりレイアウトを書くことはあるが）、HTMLとCSSを修正しながらデザインを検討することになる。 「CSS書きました。」 「うーん、ここのコンテンツはもっと大きく表示させたい。色ももっと目立つ感じで。」 「なおしました。」 「うーん、やっぱり微妙かも。試しにここ2段組にしてみて。」 「」 なんてことになる。 今更言う必要はないと思うがCSSの設計は非常に脆く、アドホックな修正を繰り返
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//キャッシュファイルを生成
CodePen: CSSの構成と方針 - ワザノバ | wazanova
http://codepen.io/chriscoyier/blog/codepens-css 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約5時間前 GitHubやLonely Planetに触発されて、この手のエントリーが続いています。今回は、CodePenのChris Coyierのブログ。 Overview SCSS Autoprefixer RailsのAsset Pipeline スタイルの方針はあるが、目的はほぼ見た目の整合性をとるため 「classを多用する」以外に、アーキテクチャは採用していない ページ当たり、2-3個のCSSファイル media queryの@mixinを使うが、.scssファイルごとにオンオフできるようにしている コメントを残すのには賛成派 Preprocessing S
Sass(SCSS)とかChefとか使う人はBundler使おうぜ - BitArts Blog
RubyGemsはRubyのライブラリ配布のパッケージ管理システムですが、なんか最近では、SassとかChefとか、Rubyプログラマ以外の人が使いそうなツールがRubyGemsで配布されるケースが多くなってきました。Rubyとか絶対書かなそうなウェブデザイナがgem installとか打つ時代の到来です。 例えばウェブデザイナが話題のSassを使ってみようと方法をググってみると「Rubyをインストールして、gem install sassと打てば使えるよ！」とか出てくるわけです。たしかにそうなんだけど、それだとシステムワイドにインストールされてしまうので、プロジェクトごとにバージョンを固定することができません。「昔のプロジェクトの動作がいつのまにかおかしくなってる！あれってどのバージョン使ってたんだっけ？？」みたいなトラブルを避けるためにも、Gemパッケージはプロジェクトごとに個別にイン
CSS3からSassまで ─ これから学ぶ人のためのCSS全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #04」【ゲスト寄稿】 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
CSS3からSassまで ─ これから学ぶ人のためのCSS全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #04」【ゲスト寄稿】 編集部注：本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy（テックアカデミー）による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第4回目のテーマは「CSS」です。 前回は「HTMLの設計思想と、2014年に最適な学び方」というテーマでお送りしました。今回は「CSS3からSassまで ─ これから学ぶ人のためのCSS全体像」という記事テーマで、考察・ご紹介します。本連載は、イ
CSS Nite LP32「Sass」のフォローアップを公開します｜CSS Nite公式サイト
2014年2月15日、ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップを公開します。 （1）谷 拓樹さん（サイバーエージェント ） （2）柴田 大樹さん（unCopi） （3）黒野 明子さん（crema design） （4）森田 壮さん（Sou-Lab） （5）坂巻 翔大郎さん（ピクセルグリッド）、山田 敬美さん（ピクセルグリッド） （6）木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし） （7）富田 梓さん（LINE） （8）高津戸 壮さん（ピクセルグリッド ） 出演者のひとり、森田 壮さんの執筆された『Web制作者のためのSassの教科書』もオススメします。 Web制作者のためのSassの教科書 - 公式サポートサイト 追記： 各セッションの音声を追加しました。 ベストセッション20192019年、CSS Niteでは4
SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する
SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する SASS/SCSSには様々なカラーコントロール機能がありまして、この機能を利用すればカラーバリエーションの作成やカラー修正など効率的に行うことができますよ。 投稿日2013年06月27日 更新日2013年06月28日 共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者のためのSassの参考書.pdf
