Oculus Quest、やってます？自分はメチャメチャはまってます。 おはこんばんちわ、kouraku です。今回で最後の投稿となります。 近々、Web業界を引退することとなりました。 ということで、最後に何を書こうか・・・と色々と考えてみた結果、 これまでお世話になったSassのmixinを紹介することに至りました。 「あー、あるよねー」とか、「え？そんなの必要？？？」なんて感じで見ていただければ幸いです（笑） inline-blockでの隙間を削除 // ---- // * ex) @include remove-letterspace(); // ---- @mixin remove-letterspace { letter-spacing: -0.4em; > * { letter-spacing: normal; } } どうせなら子供にdisplay: inline-bloc

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

人材の確保が難しい時代にあっても、 その状況を鮮やかに一変させるカードは きっとある。 私たちは業界のインフラとなって さまざまなサービスを展開し、 採用シーンのあらゆる課題を 解決に導きます。 その時々、それぞれの場面で 最善の一手を考え続け、 先進的かつユニークな 人材調達・活躍支援サービスの力で つながった先の景色まで支えていきます。

「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追

CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。Read less

これはスマート！z-indexをSassで管理する方法に感動しました 更新日: 2019/10/18 公開日: 2015/03/05カテゴリー: CSS positionプロパティで配置した要素の重なり順を指定するz-index。値が大きいほど前面に表示されるアレです。 使うだけなら簡単なのですが、いざz-indexの指定箇所が増えてくると「どの要素より上なのか下なのか」「z-indexプロパティが散り散りになって探すのが面倒」みたいな状況に陥りますよね。 じゃあ便利なSass様に効率よくz-indexを管理してもらおうと色々調べたのですが、中々良い方法が見つかりませんでした。 それから月日が立ち、たまたま目にしたスライド「CSSで泥沼にはまらない3つのアプローチ」の中でずっと悩んでいたz-indexの管理方法が紹介されていました。 コレがなんともスマートで素晴らしい、感動しました。 z-

その昔Sassに凝っていたころに書いたメモを見つけた。供養のために公開。 当時のSassにはセパレータ判別の関数とかなかったので、今は特に必要ないものもあるね。時間経ったね。 グラデーションのmixinを書いたときに「リストを扱う関数が足りないなあ」と思ったので、関数をいろいろ書いてみている、RubyじゃなくSassで。 is-list($arg) リストかどうかを返す関数。list 型のほか、可変長引数の arglist 型でも true を返す。 @function is-list($arg) { @return type-of($arg) == 'list' or type-of($arg) == 'arglist'; } ただこれ、ちょっと問題があって、('item') などひとつの値を括弧でくるんだものを渡すと false を返してしまう。 $list: ('item'); @d

以下、ブログに書いたのとほぼおなじ内容だけどこっちにも転載してみます。 github: https://github.com/rstacruz/rscss githubのREADMEをドキュメント化したもの: http://ricostacruz.com/rscss/index.html （このドキュメント自体がRSCSSの実践例になってる） しばらく CSS とか追ってなかったので、触るにあたって「むやみにCSS書いてたら後で確実に死ぬし、そういえばなんかOOCSSとかあったな」と思っていろいろ調べてたら OOCSS の他にも SMACSS とか BEM とか SuitCSS とか FLOCSS とかなんかいろいろ出てきて大変でした。たしか SMACSS くらいまでは記憶があるんだけど…。 で、どうもどれもしっくり来ないのでさらに調べてみると RSCSS というものを発見。「フレームワー

Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

BEMとはBEMの概要もうすでにいろんなブログやQiitaなどで書かれていると思いますが、自分の頭を整理するためにも書いておきます。BEMはロシアの検索エンジン大手のYandexにより以下を達成するために開発された「cssの記述方法論」です。CSSセレクタの「命名規則」とも言われています。 Block, Element, ModifierBEMは、セレクタの役割を「Block」「Element」「Modifier」の3つの概念に分けて考えるCSSの設計思想です。BEMのドキュメントによると、Block、Element、Modifierは、それぞれ以下のように定義されています。 Block「Block」は独立したエンティティ（実体）であり、アプリケーションを「構成するパーツ」です。Blockは単一で用いることも可能だし、他のBlockを含んで複合的に用いることも可能です。Block名は基本的

小さいアプリケーションなら、styleは変更がある度に毎回フルビルドしてしまっても1sもかからないかもしれない。 しかし大きくなって、5s以上かかると非常に苦痛だ。 というわけで差分ビルドしたい。 Sassの差分ビルドで問題になること 差分ビルド自体は簡単で、gulp-cachedとかを使えば、前回と差分があるものだけをビルドできる。 なんだけど、その場合に問題になるのがsassの依存関係(@import)の解決だ。 単純に差分のあったファイルをビルドするだけだと、@import元を辿れない。 そうすると@import元のファイルが変更についてこない。 いや、でもnode-sassのwatchオプションって@import元辿ってるよな、あれってどうなってるんだ？？ と思って実装を見てみたら、sass-graphというnpmを使って辿っていた。 お、これ使えば差分ビルド時に依存関係の解決もで

はじめに Sassの**@mixin**はメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい（おきたかった）基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは**.scss**形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル（セレクタ・class）に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列（

(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/rem-vs-em. We hope to fix this soon!). One of the best practices to typography on the web is to use relative units like rem and em. The question is, which should you use? There's been a longstanding debate between rem supporte

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

時代はとっくにSass 3.4なのでローカル変数メインにしたいということが前提にある。そうすることで変数名にBEM等のしっかりとした命名規則を使わずに済み、自己言及的な変数名と数文字の変数名でおおむね完結することになる。パーシャル間で共有したい場合はしょうがないので!globalを使ってローカル変数をグローバルへエクスポートするようなあきらめを許容して誤魔化す。 まずある程度はグローバル変数として定義しておく必要がある。それらグローバル変数は自己言及的なもの(それこそ$color-black: #000;といったようなもの)で、実際にウェブサイトで使われる要素やクラスとは無関係に定義していく。 // _variables.scss $ratio: 1.7; $ratio-text: 1; $ratio-text-large: 1.5; $line-height-default: $rati

the llama @roatnek コンテクスト依存（HTML依存）のほうがわかりやすい、理に適ってるケースってたくさんあるのです。まず誤用されないし。過剰なフレキシビリティは混沌を呼ぶんやから。何度も言ってるけど案件規模次第よね、そのへんは。 2015-08-20 15:18:35

Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover