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

Sassには@eachや@forといった制御構文があり、それらを利用することでCSSで繰り返し記述していたような手間を省くことができます。 そこで今回は基本的なものでありますが、その制御構文を使って繰り返し記述するようなものを楽に出力するサンプルをいくつか紹介します。 例えばクラス名の一部と背景画像名だけ変更したものをいくつも記述するとか連番付きクラスをいくつも記述しながら一部プロパティだけ変更するなど、普段からCSSを書くことが多い人であれば、ほとんどの人が先述したような同じようなものを繰り返し記述していくということをしたことがあると思います。 そういったときにSassを使っていれば、@eachや@forといった制御構文を利用して繰り返し記述する手間を省くことができます。 ここで紹介しているものはいずれも簡易的なものですし、実際に使ってみたりコードを少し見ればわかるようなものばかりだと思

blues25.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

みなさんはCSSのサイズ指定をする時に、細かい計算をしてサイズ指定をしていますか？ calc()は計算式を記述すればブラウザ側で計算して出力します。 しかもcalc()はIEを含むほとんどのメジャーブラウザに対応しているので、安心して使用できます。 また、計算は単位を揃える必要がなく、異なる単位間でも計算してくれるのでレスポンシブコーディングともとても相性がいいです。 それでは具体例を交えながら活用方法を紹介します。 calc()は加算、減算、乗算、除算を行うことができます calc()は下記のように四則演算を行うことが可能です。 //加算 .hoge{ width:calc(10px + 50px); } //減算 .hoge{ width:calc(100px - 50px); } //乗算 .hoge{ width:calc(100px * 50px); } //除算 .hoge{

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

.image { background-image: url(/image/to/path/example.jpg); } @font-face { font-family: "acms-fonts"; src: url(../fonts//acms-fonts.eot); src: url(../fonts//acms-fonts.eot) format("embedded-opentype"), url(../fonts//acms-fonts.ttf) format("truetype"), url(../fonts//acms-fonts.woff) format("woff"), url(../fonts//acms-fonts.svg) format("svg"); } .image { background-image: url(/image/to/path/example.

Sass用のソースマップを作成してコーディング作業を更にもっと爆速化だ！【Gulp Sass向け】 2016/6/8 CSS, WEB Sassって便利便利って言われてるから、「そんなに便利なんやったら試してみても良いかな」と思って触ってみたものの「やっぱり今までどおりでいいや」とそのまま放置してました。 だってデベロッパーツールからCSSの適応場所が分かりにくすぎるんだもん。 ただ、これは自分が無知なだけでした。ソースマップを使えば一瞬で解決らしい。 しかしこのことを知るのは少し先の話…… ※SassとはCSSのメタ言語と言われてて、CSSをより簡単に素早く書けるようにした便利言語みたいなもの。今ではCSSで書くよりSassで書くのがデフォルトスタンダードになってる気がする。 SassでCSSを書くなら必須のソースマップとは？ ソースマップっていうのはなんぞ？って話し。 Source M