RSS

Posts Tagged “CSS”

flexboxの旧仕様、改定仕様、現行仕様の一覧

by tomita on 2013.9.10

[13/11/14 追記] flex-wrapの実装について注記を追加しました。 暑さもやわらいできたような気配がしてきました。皆様いかがお過ごしでしょうか。 久しぶりのブログ更新です。UIT 富田です。 今回はCSSでのレイアウトをより柔軟にしてくれるflexboxについて解説します。 flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのをやめたくなるプロパティとなっております。 しかしflexboxを利用することで、現時点ではCSSだけでの対応が難しかったり、複数のプロパティを複雑に組み合わせる必要があるレイアウト(例えば一番大きい高さに揃えた要素を横に並べたり、子要素を上下左右中央位置したりといったもの)が、容易に利用できるようになるという大きなメリットもあり、使えるならば使っていきたいプロパティでもあります。 にも関わらずflexboxについて調べてみると、各仕様をまとめた記事はみつかるものの、新旧の仕様を横断的に確認できるものが見つからなかったため、後方互換をわかりやすく対応するためにまとめました。

compassのベンダープリフィックス制御

by tomita on 2012.12.3

歳晩の候、皆様におかれましてはますますのご繁栄の事とお喜び申し上げます。 NHN Japan ウェブサービス本部開発1室UITチーム(長い) 富田(@a_t)です。 CSS Preprocessor Advent Calendar 2012の3日目、css書くのに便利だからといって盲目的にcompass使ってないでちょっとは中でなにをしているか知っておいてもよかろうもん ということで タイトルのとおり、compassがベンダープリフィックスの制御をどのように行なっているかについて書きます。compassのソースをまだ一度も見たことがない人向けの内容です。 sassについてよくしらない、というかたは過去の記事をよむとわかるかもしれません。

NAVERでのSassの使い方

by uemura on 2011.12.21

NAVER UITのSass Mixins職人(他称)の上村です。 今日はLess & Sass Advent calendar 2011の21日目です。 3日目に書かれている通り、NAVERでは半年ほど前から実務でSassを使っています。 今回は弊社で使用しているSassのディレクトリ/ファイル構成やMixinsについて解説します。

はじめてのCSSメタ言語はLessがおすすめ!

by tsushima on 2011.12.8

こんにちは、NAVER UIT つしまです。 Less & Sass Advent calendar 2011の8日目です。 これまでのAdvent calendarの記事で、SassやLessの概要、活用法などが見えてきました。 今回は、「Lessは機能不十分そうだし、Sassオシ多いし、Sassを使いはじめようかな・・」と思っている方に向けてはじめてのCSSメタ言語はLessがおすすめというおはなしです。

sassの抑えておきたいfunctionの使い方

by tomita on 2011.12.6

こんにちは。 年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。 今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。

Sass を今すぐ実務で使おうよ!

by LINE on 2011.12.3

はじめましての tacamy です。 さて今日は Less & Sass Advent calendar 2011 の 3 日目です。 「Sass かぁ。まーたしかに便利そうだけど、 実務で使えるか分からないし自分には関係ないかな。」 とか思ってませんか・・・!? ぜんぜんそんなことないですよ!( ・`ω・´) その証拠に、NAVER では半年ほど前から、 新規サービスはすべて Sass を使って制作していますが、問題なく使えています。 むしろ効率化できて、CSS を書く工数が減った気もします(個人の感想です)。 小難しいテクニックは、このあとの 22 人が書いてくれると思うので(丸投げ)、 今日の記事では、Sass を実務で使うことに絞って書いてみます。

ReFlowの原因とマークアップの最適化

by LINE Engineer on 2011.11.4

自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。