MOONGIFT: » プログラマブルCSS「Moonfall」:オープンソースを毎日紹介
CSSは柔軟な書き方に対応するフォーマットだが、運用を続けていくと構造の階層が乱れていったり、フォントサイズの設定が様々な場所に散らばったりと管理しづらくなっていく。 データを上手に管理すべく、プログラマブルなCSSを導入してみるのはいかがだろう。 今回紹介するオープンソース・ソフトウェアはMoonfall、CSSジェネレータだ。 Moonfallはスクリプトで定義する変数のリストと、CSSテンプレートからなる。CSSテンプレートには[]で囲むと数値や文字に置き換わる。ハッシュで定義してCSS指定をまとめることもできる。 fillと言う関数を利用すると、二、三段のカラム生成が容易にできる。幅や一部のカラムの大きさを指定すれば、あまった場所については自動計算してくれる仕組みだ。 現状のCSSは言わば各数値、文字列がハードコーディングされた状態だ。柔軟なデザイン変更に対応するにはやはり変数化が
MOONGIFT: » 不要なCSSの洗い出し「CSS Redundancy Checker」:オープンソースを毎日紹介
CSSははじめこそきちんと定義しながら進めるのだが、修正が重なったり、日々の運用の中で徐々に肥大化していく。HTMLと同じで多少間違っていたり、不要な情報が紛れ込んでいてもそれなりに表示されるので気にならないのだ。 だが不要な情報が紛れ込んでいると、ちょっとした修正が全く無関係と思われる場所に影響を及ぼしたり、管理しきれなくなってくる。そこで使ってみたいのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Redundancy Checker、不要なCSSチェッカーだ。 CSS Redundancy CheckerはRubyで作られている、CUIベースで動作するアプリケーションだ。また、gemでhpricotをインストールする必要がある。そのため、若干敷居が高いかも知れないが、便利なアプリケーションだと思うのでぜひトライしてみて欲しい。 使い方は簡単で、CSSファイル
プログラマー的デザイン勉強法：UX ～ユーザーエクスペリエンス～：オルタナティブ・ブログ
プログラム言語であればどの言語でも習得出来、どんなOSでも使いこなし、データベースだって勉強すればマニアックに最適化出来るプログラマーですがいざデザインとなると「いやぁセンスないから」って感じだと思います。 プログラムは感性で書く物では無いので（私は感性で書いてますがw）いざ右脳を利用する作業になると途端に受け付けなくなってしまいます。 ですがサイト全体ではなくとも、一部にキラリと光るデザインがあるとお客さんに喜ばれる物です。少し位のバグも許してくれるでしょう（もちろん自己責任でお願いします。） デザインの主にわけて、構成、色使い、動きに分けられると思いますが、それぞれどのようにしてテクを研くか私の方法を書いてみます。 1.構成 デザインが良いとされているサイトをとにかく沢山見る。沢山見ることによって目が越えてくるのでアイデアも思い浮かびやすくなります。自分の気に入ったデザインを見つけたら
相性の良い色を自動でピックアップしてくれる「ColorBlender」
ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
MTで実践 - CSSのモジュール化による管理方法と遊び方 - 3ping.org
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE
ページの見かけを決めるCSSについていろいろなデザインが今までありとあらゆる場所で検討されてきましたが、今度はそのCSSを時間帯によって切り替えるという方法です。朝なら朝っぽいCSSで、夜なら夜っぽいCSSを使うというようにして、いろいろと応用が利きそう。 詳細は以下の通り。 Katgal.com: New and Improved このアイディアをさらに延長したアイディアが以下にあります。 nicholasjon.com :: Time Sensitive {1/14/2007} 上記サイトでは以下のような感じで時間だけでなく、天気によっても変わっていけばおもしろいというように提案しています。 はれ くもり 夜
【レビュー】ColorJackがやってきた! - Firefox+JavaScript+Canvasでここまでできる!! (1) ColorJackとは | エンタープライズ | マイコミジャーナル
オンラインでカラーテーマを作成するサービスとしては、Adobe SystemsがAdobe Labsで公開したkulerを挙げることができる。kulerは同社の提供しているFlex2を活用して開発されたWebサービスで、Flex2でどういったことができるかを実証する、という位置づけにある。Flex2で開発されているので動作プラットフォームは当然Flash。Webサービスでありながらデスクトップアプリケーションのようにスムーズな動作が魅力だ。しかも同サービスで作成したカラーテーマは同社の他のプロダクトでも活用できるという優れもの。 図1 Adobe Labs – kuler kulerは興味深いWebアプリケーションだが、動作させるにはFlash Player 9.0.28.0が必要で、執筆当時はまだLinux版の同バージョンは提供されていなかった。2007年1月17日(米国時間)にLinu
『色の決まりを知っていれば「センス」がよくなる』
システム会社に「色はとりあえず適当にお願いします」と言ってあがってきたものを見ると「えーっ」という配色になってあがってくることがよくある。「適当に」と指定していない自分が悪いのだが色をすべて指定しないと使ってはいけない色の組み合わせを使ってきてしまうのだ。 という私も初めて自分でチラシのデザインを作った時は「韓国風の色遣いだね」とつっこまれたが、緑や赤の原色を多様してしまった。（韓国の色づかいが悪いと言っているのではありません）そこでデザイナーさんに進めてもらったのは配色辞典。そこにあげられている色を使えばたちまちセンスの良い色遣いができるようになるのだこれホントに。 たとえば参考サイトは http://www.colourlovers.com/ これを見ると３色とか５色の色があげられているのでその色の組み合わせを使ってあげるとセンスがよくなる。 ああ、なんと便利な。ちょっと知ってるだけで
CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE
terrill.caにてCSSとPHPできれいなグラフを描く方法が紹介されていました。 » terrill.ca | Vertical Bar Graphs using CSS and PHP 棒グラフや立体グラフなどがCSSのスタイルで描けます。PHPはデータの抽出と縮尺の設定だけなので、必要でない方は紹介されているCSSだけ使っても良いかも。 ↓なグラフや、 ↓なグラフが描けます。 なお、HTMLのほうの記述は以下のような感じです。わかりやすいですね。変更も簡単かと。 <ul class="barGraph"> <li class="p1" style="height: 57px; left: 0px;">57</li> <li class="p2" style="height: 27px; left: 0px;">27</li> <li class="p3" style="heigh
CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE
CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ
IT戦記 - CSS の勉強会をしました
2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat
IE上でDOMやCSSを書き換え可能な拡張「DOM Helper」:phpspot開発日誌
Hairy Spider Blog - Announcing DOM Helper: A new and improved CSS Editor Well I've finally got round to producing the inline CSS editor that I wanted to do in the first place. IE上でDOMやCSSを書き換え可能な拡張「DOM Helper」。 サイトのDOM構造を表示し、DOMの属性を自由に書き換えることが出来ます。 CSS Editor によってCSSの編集も可能な模様。 インストールは少々面倒で、次の手順で行う。 DOM Helperをダウンロード Cドライブ以下、DomHelper というディレクトリを作り、そこに解凍 コマンドプロンプトで次のコマンドを実行 "%windir%/Microsoft.Net/F
最速インターフェース研究会 :: Sledge::Plugin::DebugTemplateで開発効率が135倍になるデモ
フォームポストでテンプレートを送りつけると、それを使ってページを表示してくれるSledge::Plugin::DebugTemplateというのを作った。これによりJavaScriptやCSSのみならず、HTMLテンプレートすらローカルファイルと差し替えて開発ができるようになった。 ソース(nopasteが24時間で消えるの知らんかった) http://rafb.net/paste/results/Ohpek040.html http://la.ma.la/misc/src/DebugTemplate.pm Winkで作ったデモ http://la.ma.la/misc/demo/debug_template.htm ブラウザを制御してページの内容をダミーのフォームに置き換えて現在のバッファの内容をペーストしてフォームポストしています。どちらかというとこっちの方が肝で、このデモは萌ディタと
Sooey
Read About this site, Works or Download software. Tumblelogging at Tumblr. Amazon associate store. Search content. コーディングスタイルの常識をぶち壊せ コーディングスタイルの常識をぶち壊せ：CodeZine まあ、「広告企画」らしいのであまり突っ込みませんが、こういう近視眼的なコーダーが一人でもいるとプロジェクト的には非常に厄介。業界未経験で派遣会社の研修を受けただけの人材には特にこういうメンタリティの人が多い気がしていたのですが、その原因が見えた気がする。 ベテランほど、「だって、そういうもの」的な美にこだわるようです。 この一行で、わかってなさが如実にわかる。 プログラマが好んで言う「美しさ」は見栄えじゃないんですよ。
ページ作成のテクニックをまとめた「20 pro tips」が公開されています - PHPプロ！ニュース
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
IE 6.0 - memo.xight.org - Clean CSS - CSSの最適化，ファイルサイズ削減ツール
Summary テキストフィールドにCSSを入力するか，CSSが置いてあるURLを指定して，"Process CSS" をクリック． 使用前 (196byte) #example { color: rgb(0,0,0); background-color: #ffffff; font-weight: bold; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 10px 5px 10px 5px; } 使用後 (Compression: Low) #example { color:#000; background-color:#fff; font-weight:700; margin:5px; padding:10px 5px; } 入力 196 byte 出力 99 byt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
rendr