はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog

2012/03/19 247 users CSSプリプロセッサ CSSメタ言語 近年 導入 はてな

こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか ... 続きを読む

tikeda::Diary - 汎用CSS

2006/09/05 102 users diary

汎用CSS 13:34 先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。 構成 ソースを見ていただけれ... 続きを読む

tikeda::Diary - 効率よく育てやすくデザインする

2006/05/15 142 users diary

22:13デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。CSS言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。テキスト要素はなるべく画像にしない特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。シンボルイ... 続きを読む

角丸ライブラリ - tikeda::Diary:

2006/05/01 566 users diary

09:53最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。0501curve.zip中身はこんな感じ。ベーシックなタイプ01：小さ目な角丸02：大き目な角丸03：斜線の角丸（背景画像をループ）04：ストライプの角丸（背景画... 続きを読む

tikeda::Diary - はてな内の2カラムレイアウト

2006/04/29 122 users diary はてな内

15:30最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。HTML CSS #main{ float:left; width:100%; } #side... 続きを読む

tikeda::Diary - 今更だけどAqua風デザイン分解

2005/09/16 121 users diary

01:19OSXアイコンやWidgetなんかでは定番となってるAqua風のデザイン。ちょっと遅い感じですが、今更ながらAqua風を突っ込んでみました。Photoshopを使った簡単な作り方のTIPSなんかは時々目にしてたので、自分はIllustratorでやってみた。現物は以下のドロップと矢印です。簡単なパスで作られたデータです。これだと印刷物なんかでも大丈夫。色々な応用も可能です。実際CMYKカ... 続きを読む

tikeda::Diary - ドット絵ができるまで

2005/07/13 145 users Wink ディテール diary アイコン 手法

23:01アイコンなどを作る時はよく、ドット絵をデザインの手法として使うのですが、これまで、とてもたくさんのドット絵を描いてきてテクニックをあれこれ身につけてきました。はてな社内でも、どうやって描いてるの？みたいな事を時々聞かれます。試しにはてなマップで地図に表示される「写真」アイコンをWinkを使って再現してみました。（実際の物はもっとディテールに手をいれてますが。）意外と時間がかかってしまい、... 続きを読む