Illustratorを使って、たった３分でプロが作ったようなグラフィックを作る方法 - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
配色管理用の CSS をモジュール化する - 我的春秋
今日は再現性の高いスタイル（プロパティの集合）ごとに、CSS セレクタをグループ化して管理する事例として、ちょっと前から制作中のサイトで実践している、配色管理の方法を紹介してみようと思います。（とっくに似たようなことを実践されている方も、きっといらっしゃると思います。お気づきの点があれば、細かいことでもご教示・ご指摘いただけましたら幸いです。） （なんだか、CSS が主題のエントリーって、随分、久しぶりのような気がする..。） 配色管理モジュールの作成方法 色に関するスタイルをすべて、この配色管理モジュールに集約する。 別出した color.css は、@import で上位 CSS ファイル（もしくは HTML ファイル）から読み込ませるようにする。 セレクタは、同一スタイルごとにグループ化する。（注意: CSS セレクタ、グループ化の落とし穴） セレクタは、浅い階層の一般的なものを先に
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
コーディングガイドライン
構造と見た目の分離の必要性 HTML は Markup (意味付け)する Language (言語)です。例えば文脈のなかで、「ここは見出しですよ」「ここは段落ですよ」などという感じに「意味付け」を行い、文書構造を記述するための言語です。 ところが HTML は Web ページのレイアウト目的に使う仕様が多数盛り込まれ、その簡便さ、習得のしやすさと柔軟性から、本来の「意味付け」以外のレイアウトや見栄えに関する要素が多く使われていました。 それでは本来の HTML の目的に反するということで、「見た目」の部分を担当する CSS が策定されました。 建築物に置き換えるならば、きれいな骨組みの建物(HTML)に壁の色を塗ったり窓の形を変えたり(CSS)という感じでしょうか。いくらきれいな色を使っていても設計ミスの建物では使い物になりません。文書でも同じことが言えるもので、プレーンに理解しやすい文
見ているページを自在に分割できる Firefox拡張 『Split Browser』 | P O P * P O P
ちょっと便利なFirefox拡張をご紹介。 この「Split Browser」を使えば見ているページを分割することができます。2つのページを比較したい時なんかに便利ですね。他にも特定のページを参考にしながら何かを書く時なんかに使えそう。 » Split Browser 下記、使い方をご紹介。 ↑ インストールするとこのようなボタンがでてきます。これをクリックすると分割できます。メニューからもできますよ。 ↑ 見ていたページを2つに分割できました。 ↑ いくらでも分割することができますよ。 動画の方がわかりやすいかもですね。こんな（↓）感じです。 ちょっとした拡張ですが、必要な時には助かるのではないかと。他にも便利な使い方があれば教えてくださいね。 » Split Browser ■ 関連記事 右クリックから簡単に定型文を入力できるFirefox拡張『Clippings』 | P O P *
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
PhotoshopでHDR（ハイダイナミックレンジ）な、ものすごい画像をつくる方法 - DesignWalker
http://www.caramel-tea.com/2007/01/colortube/
イメージからカラースキーム生成 - pic2color | caramel*vanilla
http://www.caramel-tea.com/2007/01/customize_memo/
http://www.gascap.tv/