[B! .css] ntoukmのブックマーク

【全訳】JSだけじゃない！AirbnbのCSS/SCSSスタイルガイド - リクルート住まいカンパニー Tech Blog

こんにちは！2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO

ntoukm 2017/11/10

リンク

こんなCSSからはそろそろ卒業しよう

社内向け勉強会で作ったスライド ※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです！

ntoukm 2017/10/24

.css

リンク

【実例あり】position:「absolute」「relative」でレスポンシブECサイトのレイアウトを！ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ

実際の上下左右の距離は「top」「bottom」「left」「right」プロパティを併用します。これらはpositionプロパティの値がstatic以外の時に有効となります。またこの4つ全てを使う必要はなく、「top」だけ、「top」と「right」だけと必要なもののみ使い、配置された位置からの距離を指定します。言葉だけではイメージがつきにくいと思いますので、以下より実際配置した時の画像と併せてご説明します。２．“relative”と“absolute”の動きの違いｉ）relative 【その１】 100px × 100pxの灰色のボックスの下に、relative指定したを配置しました。今回は上から0pxの距離を指定しています。 <div class="box">box</div> <div class="relative">relative</div> .box { wid

ntoukm 2017/05/19

リンク

Rails + Materializeでウェブページを作ってみる - Qiita

先日調べた通り、Rails + Materializeがよさそうなのでウェブページを作ってみます。 CSSのデザイン部分はMaterializeがやってくれるのでやらないといけないパートはJSの部分とサーバーサイドの入出力だけです。 JavaScriptもMaterializeがJqueryを使っているのでそのまま慣れ親しんだJqueryを使い続けます。今回AJAX通信でのサーバー連携は外してアニメーションのデモだけ作成します。 GettingStarted のサイトにサンプルが豊富に揃っているので一貫してHTMLのコピペのみでいけそう。覚える事はあまり無いです。色とか線の太さとかデザイナーチックな事は気にしなくていいので自分好みです。 Rails用のGem利用方法こちらも書いてある通りにやれば動きましたので安定感→高の印象。ただ、CDNを利用する方法もあるので、実運用している所に

ntoukm 2017/03/25

リンク

【2016年冬】最新CSSフレームワークまとめ - Qiita

はじめに以前、HTMLやCSS設計がよく分から無いというあなたへ。知ることから始める5つのTIPSという記事を書いたのですが、これは、僕が当初CSSの設計が凄く苦手で、苦手なりにも沢山書いていって少しわかるかな？と思ってきたときに備忘録も兼ねてまとめました。なぜ苦手だったのかと振り返ると、その中で一番大きな要素が、構造間の依存関係を把握できていなかったことにあるのではないかなと思います。この記事の中でも言うようにCSSの設計やもっと大きく言えばプロダクトの設計思想によって異なるとは思いますが、その依存関係を把握できていない原因はおそらくは何かしら取り入れているCSSのフレームワークの理解に乏しいことに原因があるのではと考えました。そこで、多くの人に用いられているであろうCSSフレームワークを、2016年末時点でgithubのスター数が多かった順に５位までまとめてみました。ここで一般