メディアクエリの書き方はモジュール（ページ要素）ごとにまとめるのがいい
先日、久々に凝ったレイアウトのレスポンシブ・ウェブサイトのCSSをがっつり書いていて、やっぱりメディアクエリはモジュール（ページ要素）ごとにまとめて書いた方が良いというのを実感しました。ブレイクポイントでまとめて書くとブラウザで確認しながら細かいレイアウトの調整をするのが大変なんですね。 レイアウトの調整が細かければ細かいほど、メディアクエリはモジュールごとにまとめて書くのが良いです。途中で書き直すのは結構大変なので、これからレスポンシブなサイトのコーディングを始める方で迷っている方、お気をつけください。 以上、Rriverからのお知らせでした。笑 手短に言ってしまうと、伝えたいことは以上なんですけど、もう少し説明してみます。 メディアクエリをモジュールごとにまとめた方が良い理由 なぜメディアクエリはモジュールごとにまとめて書いた方が良いのか？ それは、以下の3つが理由です： 丁寧なレスポ
知らないと損する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%); 設定方法は以上になります、カンタンですね( ˘ω˘)☝ 設定できる種類 設定できる色合いは以下
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ぺちこです。 先日水族館に行ったら「ペンギン12種模型セット」なるものをショップで発見し、危うく買うところでした。 Suicaペンギンのモデルはおそらくアデリーペンギンですが、私が愛してやまないのはジェンツーペンギンです。どうでもいいですね。（興味をもった人はみんな友達） さて、以前にデザイナーのせいとくんが Sassの導入方法と Sassの基本テクニックについてまとめてくれていましたが、今回はそれらを踏まえて、コーディングに役立つextend＆mixin集を作ってみました！ 日々ちょこちょこと作っては使いまわして・・を繰り返しており、あると便利なものは先にまとめておけば楽ではないかと、やっと気付きました。 サンプルで作ったhtmlとscssファイルを一式ダウンロードできるようにしていますので、そのまま使っても良し、各自（各社）毎のコーディングルールに合せて改良しても良し、要ら
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
SassというCSSコーディングを身につけよう!in Coda2!!超簡単な僕のSass覚書。
半年ほど前から良く話題になるSassとかLessとかってなんだろうなーって思いつつめんどくさそうだからこの手の記事は回避していました。 ですが、いつものようにTwitterでつぶやいていたらSassかなり良いよって言われて 「へーそうなんだ〜」と興味を持ち始めて 少しずつですが記事を読みあさりながらSassってこうゆう感じなんだーっていうのが掴みかけてきたので記事にしたいと思います。 Coda2で検索して来た方へ この記事ではCoda2の事についてあまり触れていません。ですが、こちらの記事でがっつりcoda2の魅力を語っていますので是非ご覧になって下さい。 参考記事：Coda2の使い方をマスター出来るチュートリアル[完全版] Sassってなーに? CSSを拡張しよう!っていう感じのメタ言語らしいです!サスって読むらしいです。なんだか僕的にはいい響き!「ググる」とかと似ているかも。「Sass
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog