こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 今回は、現行サービスのCSSをリファクタリングした話とどんな影響があったかをまとめたいと思います。 もくじ 経緯とか 実際にした5つのこと まとめ 経緯とか 開発期間約9ヶ月、リリースして1年の現行サービスのCSSが大変なことになっていたので リファクタリングすることにしました。 ちなみにリファクタリングとは、 ソフトウェア開発では、ソースコードの作成が進むにつれて、中途での設計変更やバグフィックスなどでプログラムは冗長で汚いものとなっていくことが多い。これらの問題点を解決し、将来の仕様変更に柔軟に対応できるようソースコードの手直しを行うことを「リファクタリング」という。 リファクタリングとは｜refactoring - 意味/解説/説明/定義 ： IT用語辞典 ということのようです。 問題点は大きくわけて2つ。 1. コーディン
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 前回、これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)というSassの基礎に関する記事を書かせていただきました。 そこで今回は、もう一歩つっこんでもっと使いこなせるようになろう！という趣旨のもと、ちょっと使えるようになったからっていい気になっている僕がSassのテクニックやら関数をまとめてご紹介いたします！ たくさんある機能の中から、今回は比較的簡単で実用性の高いものをチョイスしました。 目指せSassマスター！WEBデザイナーもコーダーもすぐに実践したくなるSassの基本テクニック12連発もくじ もくじ テクニック1 アンパサンド（&） テクニック2 演算 テクニック3 round() テクニック4 rgba() テクニック5 コメントアウト テクニック6 変数 テ
Captcha security check stack3.com is for sale Please prove you're not a robot View Price Processing
インプレスジャパンから、9月13日に「Web制作者のためのSassの教科書」が発売します。 キッカケは、2012年の1月頃に書いていた、Sassを覚えよう！で、それをインプレスジャパンの編集の方が読んで気に入って頂いたらしく「Sassの執筆をしませんか？」というお話を頂きました。 お話を頂いた当時は、「Sassの書籍って売れないんじゃ？本にするほどでは...」って感じであまりノリ気では無かったり、執筆を始めると主業務もこなしつつになるので、忙しくなるなーと思ってお断りしようとかも考えてました。 そう思っては居たけれど、一度打ち合わせをしたら書くこと前提になってた風味で、気付けば執筆をすることに＞＜ 今回、執筆のお話を頂いて書くことが決まってから、1人でやり切れる自信も無かったので、Sou-Lablogとか書いてる、SOUさんを誘って、共著でSassの本を書くことになりました。 書き始めたら
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ 目次Sass の基礎知識@mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定rem を使ったフォントサイズ指定レティナディスプレイ対応画像Compass について軽く。Sass
・・・VCwareがWEBサイト（やフライヤー、その他印刷物など）の「デザイン」を行うさい、「配色」（カラーコーディネート）には、原則としてPCCS（日本色研配色体系）を用いる。 これは簡便のためである。 「色彩調和」（カラーハーモニー）技術のあらゆる手法を適用することができ、あらかじめマッチするように体系化されているのがPCCSである。 まさにカラーハーモニーのために体系化された色彩体系であるため、間違いが生じにくい。 VCwareではCSSの記述にSCSS記法を用いるため、この項目はもっとも重要である。 もちろんクライアントの要望に応じてベースカラー、アソートカラー、アクセントカラーは決定されるべきであり、そのさいには体系で定義された値のズラシが必要となる。その場合でも、簡易的にPCCSにおける近似値で配色をしておき、ある程度コンセプトが固まった段階で、新たな色彩体系のSCSS変数ファ
ども、白です。ホワイトデーは来月です（はい）。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを使ってテーマのスタイルを作る人もいるでしょう。 新規で作る場合は自分の好きなプリプロセッサを使えばいいし、「Forge」なんていうSass / CoffeeScriptなテーマ開発フレームワークみたいなの（要Ruby / RubyGems）もあるんですが、昔構築したサイトのメンテナンスとかリニューアルの時など、既存のテーマを元にいじらないといけない場合はきっとイライラすることでしょう（笑）。 しかし、世の中には便利なツールを作ってくださる開
はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてください。 SCSS/Compass CSS Sprite Media Queries 1，サンプルをキャプチャしてみ
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
Sass は ネイティブ関数 のほかに、@function ディレクティブ を使ってカスタム関数を自由に定義することができます。僕もより共有や再利用のしやすいものを作るべく試行錯誤していますが、ここではそのうち最近試しているいくつかのパターンについて書いてみました。ご意見求む。 接頭辞 attr() や calc() など CSS のネイティブ関数や percentage() や type-of() といった Sass のネイティブ関数と名前が衝突するのを防ぐため、カスタム関数の関数名に接頭辞をつけることを検討しています。現行の CSS/Sass だけではなく将来追加される新しいネイティブ関数も考慮するとやはり何らかの対策をしておきたいところで、接頭辞は現実的な解であるように思います。Sass リファレンスの 関数ディレクティブの項 でも以下のように接頭辞の採用を勧めています: It is
Ever find yourself needing to wipe your iPhone 15 Pro Max clean? Maybe you’re planning to sell it, following an iPhone guide at solveyourtech.com, or perhaps it’s just time for a fresh start. Whatever your reason, performing a factory reset is a straightforward process. By the end of this quick overview, you’ll know exactly how to restore your iPhone 15 Pro Max to its original factory settings. Af
In Responsive Web Design we’re working with different states, widths, and viewport sizes. Fluidity and adaptive behavior is a hot subject nowadays, and it’s perfectly justified when looking at today’s mobile browser landscape. We achieve this with CSS’s Media Queries. But sometimes it can be messy – I’m gonna share a quick tip for indicating (with pure CSS) which media query that has actually kick
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
この投稿は 14年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 そろそろテーマを変更しようかなと思っているので、その前準備について。ぼくのサイトのWordPressテーマは子テーマとか既存テーマのカスタマイズではなく、完全フルスクラッチなんですが、その際に「こんな風に作り始めてるよ」という問わず語りです。 1. 開発環境 開発ツールは最近Netbeansを使ってます。NetbeansはWordPressのルートフォルダーをプロジェクトに指定すると、関数が予測変換で呼び出せるようになります。グローバル関数なんて全部覚えていられないので、これは便利ですね。変なタイプミスをなくすためにも、予測変換機能は絶対使うようにした方がいいと思います。DreamWeaverもCS5ぐらいからこういう機能が実装されたように思います。 NetBeansの予測変
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
