スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について
スマートフォンと呼ばれる端末が世に出て、早。。。何年だ？何年かは忘れましたが、 私はそのスマートフォン端末登場と共に、正式に「フロントエンドエンジニア」と呼ばれる職種につきました。 それまではデザインだったり、構成作成したり、モバイルやったり、Flashだったり、PHP用いてのサーバーサイド等と言わばなんでも屋のwebデザイナーでした。 スマートフォンに特化した「フロントエンドエンジニア」となってからは様々なプロジェクトに参加し、様々なプロダクトを世に放ってきました。 ここ数年でその「フロントエンド」と言われる領域の環境もめまぐるしく変わってきました。 そこで、一旦ここ数年これで落ち着いているな。と思われる SCSSのclass付与とディレクトリ構成についてまとめさせて頂きます。 まず、ディレクト構成についてなんですが、管理するにあたって一番大事なのは、「第三者でも分かる管理法です。」 「
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://soufflecode.net/website/
