Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」 - NxWorld
CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。 「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。 使い方 まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。 あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空に
ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー
gulp.jsで便利なタスクを作ってみよう【デバッグ編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 第一回、第二回でgulp.jsの基本的な使い方について学びました。今回は便利なライブラリを紹介しつつ、実用的なタスクを作っていきます。 今回のテーマは「デバッグ」です。HTMLの構文チェックを自動化する方法と、PC・スマホで常に修正内容を反映させながらチェックする方法をお伝えします。 コードは前回、前々回作ったファイル構成を元におこなうので、初めて読む方は下記から前回までの内容をダウンロードしてください。 Im0-3/gulp-tutorial – Github 3-1が前回の内容、3-2、3-3が今回作る内容になっています。ファイルをダウンロードしたら、ターミナルでprojectフォルダに移動して $ npm install を実行しましょう。そうすると、制作に必要なライブラリをダウンロードできます。 前回までのファイルの内容は下記のとおりです。 ディレクトリ構成
【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」
【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」 佐川 夫美雄（Ashiras, inc.） Twitter Bootstrapバージョン4アルファ版が8月19日に公開されました。既にご存知の通りTwitter BootstrapはレスポンシブでモバイルファーストなCSSフレームワークです。さっとレスポンシブなサイトを構築するのに多くの方が利用しているのではないかと思います。この記事ではTwitter Bootstrapバージョン4の変更点について、筆者が「これは！」と思ったところをピックアップしてまとめます。 バージョン4の変更内容はGitHub上のissueで確認することができます。この中で筆者が注目している事項は LESSからSASSへの変更 アイコン（グラフィックアイコン）の削除 IE8のサポート終了とjQuery1系からjQuery2系
これはスマート！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の組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack
デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co
![[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack](https://cdn-ak-scissors.b.st-hatena.com/image/square/db8b9840475a6890e8fd894a96d4d6cf1d2d7f90/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060801.png)
[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline
見出しや文章など、テキストの読みやすさを重視して設計されたレスポンシブ対応のグリッドを実装するスタイルシートを紹介します。 Sassline Sassline -GitHub Sasslineはテキストが読みやすく、美しいタイポグラフィを実現するために開発されたもので、ブログでも企業サイトでも開発中のプロトタイプでも利用できます。単位には「rem」を使っており、ベースラインのグリッドからタイポグラフィのスタイルが機能するように設計されています。 テキストをデザインする際に、気を付けるべきことは「縦のリズム」。 Sasslineでは、ベースラインのグリッドに基づいて正確な縦方向のリズムを使うことができます。 レスポンシブ用に各サイズでの表示には、モジュール式のスケールを採用しています。これはブレイクポイントごとにテキストのサイズを簡単に設定でき、そのままベースラインのグリッドと連動して、美し
![[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline](https://cdn-ak-scissors.b.st-hatena.com/image/square/326599f01a29f1985c237ea13213cdb051872389/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060301-01.png)
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境
Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とは そんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー！ デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点 - Qiita
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点HTMLCSSSassscssCompass あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレな
[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とかGruntとか、試したことないフリーランスのウェブデザイナー
って、それしばらく前のボクのこと。 求められるスキルの範囲も広くなり「ウェブデザイナー」っていうのをどこで線引きすればいいのか、増々難しくなってる今日この頃。ひとまず今回は下記のような人々をフリーランスのウェブデザイナーと呼んでます。 「Photoshopやイラレでのデザイン作業だけじゃないよ」、コーディングまで含めた案件を受注してる人々。JavaScripやPHPは主力の武器じゃないけど、「案件によっては嗜むよ」な非エンジニアの人々。 そんな（これは職種を問わず全般に言えると思うけど）フリーランスにありがちな傾向を一つ。「食えるようになると怠けちゃう」というのがあります。 独立したての新米の頃は、まるでスポンジ。学べることは何でも吸収したい、と高く高くアンテナを張り巡らしています。 それが、いい感じに案件が回りだすと途端に「現状維持」が目標になってしまうのは、なぜ？ 「忙しいから」を言い
そうだ、Sass使おう（Railsフロント開発者向け）
こんにちは！株式会社じげんの戦略子会社にじげんに所属している北國です。 じげん、にじげん共に運営サービスはRailsを使って開発しているのですが、 にじげんでは、フロントエンド開発においてsassを利用しています。 cssからsassへの移行・学習コストは非常に低く、 コード量が減り、メンテナンス性も高いため、にじげんではsassを愛用しています。 今回は、sassをRailsに導入し、超便利な@mixinの事例をご紹介します！ (scssではなく、sassです) Railsでsassを導入するsassの導入はすぐできます。 Gemfileに下記のコードを追加して、bundle installするだけです。 gem 'sass-rails', '~> 4.0.3' （ruby 2.1.2, rails 4.1.4） 各ブラウザに対応するためのprefixは絶対sassの方が便利！IE, C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ
Git、Sass／LESS、EmmetそしてExtractの拡張機能が便利なBracketsの使い方
コーディングがラクになる！？ “自分仕様”のさくさくコーディング法
