レスポンシブwebデザインのコーディングでやってること - kojika17
今年、携わった案件のほとんどがレスポンシブWebデザインでした。 今更ですが、私がレスポンシブWebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」をよく使います。 デザインによっては、Eric Meyer’s的なRest CSSの方がやりやすい場合もあるので、そこは見た目に臨機応変に対応してます。 CSS Flexible Box 私が受け持つ案件では、最新ブラウザ、及びInternet Explorer 11（IE11）のみの対応が増えたため、近年では、Flexible Boxをカジュアルに使用できるようになりました。 個人的には、広い画面では横並びだったものを、displayプロパティを変更す
PostCSSをSCSS記法に近づける+便利にするためのプラグイン11選 | be-into
PostCSSはプラグインの量が多く、同時に似てる名前のプラグインが乱立しつつあったので、「どれ使えばいいかわからない…」という状態になりました。 今回は、SCSS記法に近づけつつ便利にするために、最終的に選定したPostCSSプラグインを紹介したいと思います。 紹介していくプラグインを使用することでSCSS記法に近づけることはできますが、完全に再現には至りませんでした…。 プラグイン一覧 PostCSSは仕様上、プラグインの処理順序に出力結果が影響します。それを顧慮して、プラグインの適用順に紹介しています。 postcss-easy-import GitHub: postcss-easy-import node_modules/配下のCSSファイルや、*を用いたGlob Importにも対応しています。 @importでの読み込みで*を使うことができます。 @import "module
QiitaのCSS構成2017 - Qiita
この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年では プリプロセッサーとして Sass (node-sass) を使っています。 プリプロセッサーとして PostCSS を使わなくなった最大の理由は @apply ルールが仕様から落ちた ことです。@apply は Sass でいう引数なしの mixin みたいなもので、Chrome の Canary では実装されていた時期がありましたが、消えてしまいました。 おそらく CSS Nesting Module や CSS Extend Rule も落ちると思
あなたの知らない CSS ベストプラクティス - Frasco
React 、Angular 、Vue.js などの一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。たとえば React なら、コンポーネントの性質上、CSS Modules を使ってスタイルを記述する方が良いでしょう。新しい CSS の機能を使いたいのであれば、 CSSNext をおすすめします。Sass や LESS のような、古き良き CSS プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。そうですね、その通りです。でも、基本は同じなんですよ。 この記事では、CSS Modules や Sass / LESS を使用するかどうかにかかわらず、堅牢かつメンテナンス可能
Sassコンパイル環境をつくる（PHPStorm + node-sass） - Qiita
Sassのコンパイル環境を作ろうとすると、今まではRubyの実行環境を構築して、Sass＋Compassが使えるようにしていたと思います。 しかし、デザイナーさんがちょっとcssを編集したいというときに、Rubyの実行環境を構築をお願いすることは、手順書ありきでもなかなか手間がかかるものでした。 それに、Ruby製のSass＋Compassはコンパイル時間が長いことや、Compassが既に開発停止していることを考えると、それらを使い続けることにこだわる必要はないでしょう。 今回はそのための対策として、Node.js の node-sass パッケージをインストールして、WebStorm / PHPStormから使えるようにするところまで紹介します。 ただ結局は、黒い画面を触ることにはなるのでデザイナーさんには敷居が高いかもしれませんが、Sass＋Compass環境を作るよりも簡単で、しかも
HTMLとCSSの極上テクニック！ヤフーの現役フロントエンドエンジニア陣が本気で解き明かすオススメの本
本書にはHTML、特にCSSに携わる人が学ぶべきものがたくさんあります。 最前線の現場でHTMLとCSSがどう書かれているのか、Sassは制作で実際にどのように取り入れているのか、Gulpの使い方やBEMをベースにした命名規則の策定など、CSSの設計や管理の仕方、考え方のプロセスや効率的に書く方法などが詳しく解説されています。 今の自分に、5年後の自分ために、絶対熟読しておきたいオススメの本を紹介します。 本書はヤフー株式会社の現役のフロントエンドエンジニア陣が惜しげもなく、実際に業務で使用されているHTML/CSSの記述ルールやテクニックをベースに、より多くの制作現場で利用できるよう解説されたものです。 大規模サイトはもちろん、小規模サイトやランディングページなど、一つのプロジェクトを制作する上でSassをつかった実践的なCSS設計について学ぶことができます。
GruntでSassをコンパイルした際、エラーになる場合の対処方法 | SONICMOOV LAB
gem を更新したタイミングで、Grunt で sass をコンパイルしたら DEPRECATION WARNING というエラーが吐き出されまくったので、原因と対処方法の調査を行なうことにしました！ エラー内容 [sourcecode lang="text"] DEPRECATION WARNING on line [num] of C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compas s-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolatio n near operators will be simplified in a future version of Sass. To preserve the current behavior, use
これはスマート！z-indexをSassで管理する方法に感動しました
これはスマート！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の組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
Sassでカラーを変数に設定してCSSのコーディングを速くする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ✌(´ʘ‿ʘ｀)✌ このあいだ昼休み中に思い切ってPS4と「龍が如く0」と「Final Fantasy 零式」をポチってしまいました( ˘ω˘)＜計65,000円なり しばらく節約のためお昼のお弁当生活がんばります(◞‸◟) そんなことはどーでもいいですね。 今回はSassで1つのカラーコードを使い色々と管理をする方法をご紹介します( ˘ω˘)☝ 設定方法 まずカラーを変数で定義します。 $base:#46AFED; $baseの色を明るく設定したい場合はlightenで設定します。 %で明るさの値を変えます。 color:lighten($base, 10%); これをまた変数で定義するといいかもですね。 $Lighten10:lighten($base, 10%); 設定方法は以上になります、カンタンですね( ˘ω˘)☝ 設定できる種類 設定できる色合いは以下
[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)
SassについてとCompass導入から利用までの簡単な解説 - blog.4uing
SassについてとCompass導入から利用までの簡単な解説 2013-04-09 はじめに このページではRubyやSassのインストール手順などの初歩的なことや、高度なSassの使用方法についてはほとんど解説されていません。 Sassに興味をもっている方、もしくはすでにSassを使用していて …はじめに このページではRubyやSassのインストール手順などの初歩的なことや、高度なSassの使用方法についてはほとんど解説されていません。 Sassに興味をもっている方、もしくはすでにSassを使用していて、これからCompassやBourbonの導入を考えている方を主に対象としています。 SassとSCSS SassとはCSS3の拡張であり、ネスト・変数・Mixin・セレクタの継承などの機能が実装されています。以下はその4つの機能を使った、リンクとそのホバー時の色を変更する例です。 $l
mixinが3文字で！Emmetオリジナルスニペットの登録方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのサリーです。 LIGにSassがもたらされて1年… たまにあるCSSで書かなきゃいけない機会にネストして書いてハッとしてキーーッてなったりしますよね（Sassあるある）。 私はDreamweaverを使いつつたまーにSublimeText2を使っているのですが、DreamweaverはSassのコードヒントが出ないので、Compassのmixinを呼び出すのがかなり面倒です。 簡単に呼び出せるようにスニペット機能を使おうと思ったのですが、Emmetのスニペットを使う方が簡単そうだったので、やり方に慣れていることもありEmmetを使うことにしました。 今回はDreamweaverまたはSublimeText2で、Emmetにオリジナルスニペットを登録する方法を紹介します。 Emmetをインストールする すでにEmmetをインストール済の方はこの項目は飛ばしてくださ
一歩先の活用のために…『Sass＆Compass 徹底入門』を読んで | book | position: absolute;
今や世界でお馴染み「StyleStatsの石本さん」が監修された、『Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために (DESIGN & WEB TECHNOLOGY)（Kindle版）』を購入して読んだのでその感想をば。 ちなみにどうでもいいことですが、間違えて2冊買ってしまったようです。「オレンジ色のアイツ」の発売で、あれこれ面倒を見ていてamazonの荷物開けずに置いていていざ開封したらこんなことに、あうあう。まあ、機会があれば誰かにあげることにしよう、そうしよう。 まずは原著の発売(2013年8月)から半年ほどで発売ということなのでそれほど記述内容が古いということはないと思います。この領域はまだまだ動きがあるのでこのスピード感はありがたいですね。 また、Compassをセットで活用することが前提で書かれているのも実践的でいいと思います。Sassの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
イマドキのコーダー環境構築2016
Problem file to import not found or unreadable ../../variables/_colors.scss
Compass cannot compile Ohm [#2392841] | Drupal.org
guard compilation errors [#2323235] | Drupal.org
SASSベースのRWD対応CSSフレームワーク・「SPACEBASE」
