yaml – CSSフレームワークライブラリとそのブラウザエディタ yaml builder | 秋元@サイボウズラボ・プログラマー・ブログ
via Ajaxian 名前が紛らわしいのだけど、データフォーマットのYAMLとは関係ない。ドイツ製のウェブサイトレイアウトライブラリyamlは、CSSベースのマルチカラムレイアウトをマルチブラウザ対応で行なうライブラリ。 それだけだと他にもいろいろあるのだけど、特徴としてはドキュメントがすごく充実していることらしい。そのわりに知られていなかったのはドイツ語圏で開発が続けられていたかららしいが、英語のドキュメントも揃えて本格的なバイリンガルプロジェクトとなったそうだ。 プレビューが公開されたばかりらしいyaml builderが良くできていて、ブラウザ上のオンラインエディタでドラッグアンドドロップでレイアウトを試すと、できあがったレイアウトを再現するHTMLとCSSを入手できるというもの。 こんな風にマルチカラムを編集し、ヘッダや本文などのコンテンツを置いていく。 “Get Code”を押
ページのCSSをファイルごとにリアルタイム修正できるFirefox拡張「CSSMate」:phpspot開発日誌
CSSMate :: Firefox Add-ons Inline CSS Editing Evolved. Originally a port of the fantastic EditCSS tool that i've been using for many months. I've gutted it, made each stylesheet load into a seperate tab. Removed the save load clear functionality as i found it to be useless... ページのCSSをファイルごとにリアルタイム修正できるFirefox拡張「CSSMate」。 次のように、ページに使われているCSSをファイルごとに編集し、リアルタイム反映できます。 ページのＣＳＳをすべて１くくりにしてしまう「Edit CSS」よ
MOONGIFT: » ついに登場！CSSフレームワーク「Blueprint」:オープンソースを毎日紹介
誰かがきっと作ってくれると思っていた。 prototype.jsのようなライブラリを利用するのは、便利な機能が多いという事もあるが、各ブラウザ間での相違を吸収してくれるという点も大きい。 その点において、CSSもまた各ブラウザ間での表示の差異が大きい。そこで試してみたいのがこれだ。 今回紹介するオープンソース・ソフトウェアはBlueprint、ブラウザ間の描画差異を吸収して簡単にマルチカラムを実現してくれるCSSライブラリだ。 Blueprintはヘッダ、コンテンツ、サイドバー、フッターのようなテンプレートをクラス指定するだけで簡単に作成できる。デフォルトのフォーマットはリセットされているので、ブラウザ間の違いが出るマージンやパディングの差異も吸収してくれている。 また、印刷時のCSSも用意されている。これを使えば印刷時やプリンタ経由でのPDF作成時に綺麗なものが仕上がるようになる。今後の
Lucky bag::blog: 個人的に気に入ってるユーザースタイルシート
今んとこ、ガチで不動のレギュラーメンバーな自分のユーザースタイルシートを晒してみる。userstyles.org で見つけたやつとか、自分で書いたやつとか。ちなみに、ユーザースタイルシートの管理は Firefox の 拡張 Stylish で。 livedoor Reader 用 各記事タイトルの下にある"元記事"って部分を URI に置き換えて表示 @-moz-document domain("reader.livedoor.com") { div.item_info { text-indent: -3em; } div.item_info a { visibility: hidden; } div.item_info a::after { visibility: visible; content: attr(href); } } Gmail 用 迷惑メールの未読数を見えなくしてボールド
CSS のデバッグの小技 - SmallStyle(2006-08-07)
_ CSS のデバッグの小技 新しいスタイルシートを書いたりするときは，たいていデバッグ用にボーダーを入れたりなんかしたりするのですが，これを構造を階層ごとに色分けして表示すると，よりデバッグしやすくなるかも．そんな小技が A Handy CSS Debugging Snippet で，デバッグ用の CSS が紹介されていました． ためしにこのサイトでも表示させてみたのですが，うーん，どうだろう．スタイルシートを定義する初期段階では結構役立ちそうな気もします． リンク先では，CSS に記述してコメントアウトしておいて，構造を確認したいときにコメントをはずしてるよ，って書いてたけど，自分の場合は，それをやるとうっかり忘れて放置とかはずかしいことをしてしまいそうなので，Bookmarklet にしてみたり． javascript:(function(){var newSS, styles='*
Aptana
Register now for Axway Summit 2024 and get energized to accelerate your digital transformation. Learn More Aptana Studio 3 is an open-source web development IDE, and while we are no longer actively maintaining the repository, it is still open-source and public so if you wish to download Aptana Studio 3 you can do so on GitHub.
ちょっと小粋なCSSのナビゲーションメニュー「ADxMenu」 - GIGAZINE
WindowsXPやOfficeXP風のメニュー、シンプルなメニュー、ミニタブ型、横に展開するタイプなど、いろいろな幅広い応用が可能です。 例とコードのダウンロードは以下から。 ダウンロードや設置方法は以下のページから。 aplus :: ADxMenu http://www.aplus.co.yu/adxmenu/intro/ 実際の例は以下にあります。 http://www.aplus.co.yu/adxmenu/examples/ 例その1：WinXP style http://www.aplus.co.yu/adxmenu/examples/winxp/ 例その2：Simple style http://www.aplus.co.yu/adxmenu/examples/simple/ 例その3：Minitabs http://www.aplus.co.yu/adxmenu/exam
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
【コラム】シリコンバレー101 (178) CSSの第一人者がGoogleのビジュアルデザイン・リーダーに | ネット | マイコミジャーナル
Googleのビジュアルデザインの責任者にStopdesignのDouglas Bowman氏が就任した。"Visual Desing Lead"という、これまでGoogleには無かったポジションに就く。 Bowman氏は、CSSとWeb標準の採用を推し薦める先進的な考えを持ったWebデザイナーとして知られる。同氏の仕事では、2002年のWired Newsのリデザインが有名。GoogleではBloggerのほか、過去6カ月の間、コントラクタとしてGoogle Calendarの開発を手助けしてきた。また同氏はデザインコンサルタントという一面も持っているが、自ら編み出したテクニックを内部に閉じ込めずに、クライアントやWebコミュニティに率先して公開している。Googleとは波長が合いそうなタイプのデザイナーである。 Googleでは「全てのコラボレーション/コミュニケーション製品を通じた、
#56 (Tracサイトのデザインを変えてみる(その２)) – HirobeのHack倉庫 – Trac
Tracのデザインって標準でも綺麗なんだけど、 皆がTracそのままじゃ味気ないよね。 ブログサイトみたいに華やかなデザインにしてみたいよね。 ってことで、Tracのスタイルシートの変更方法です。 いろいろ試行錯誤しましたが、結論としては、 「Tracのtrac.cssファイルを直接変更するのが良い」 です。 TranEnvフォルダのsite_css.csに書くという方法(#29,TracGuide)もあるんだけど、以下の理由から。 大きくデザインを変えようとすると、trac.cssで定義してあるスタイルが邪魔になる。 site_css.csは、linkタグではないので、HTMLにベタ書きされる。(これは@importすれば回避できる) で、とりあえず、２つほど作ってみました。横幅固定にしたのと、ナビゲーションバーやbanner,footerの背景を変更。 派手なオレンジ系。ダウンロード
Tracサイトのデザインを変えてみる：WeekbuildのHack倉庫 - Trac
このサイトのデザインをちょこっと変えてみました。で、そのときの覚え書き。 Tracではほとんど全てのページがスタイルシートによってデザインされている。 で、TracEnv配下のTemplate/site_css.csにCSSを書くと、サイトのデザインを変更できる。 ↓こんな感じ。 <?cs ################################################################## # Site CSS - Place custom CSS, including overriding styles here. ?> .wikipage h2 { border-bottom: 1px solid #b00; border-left: 6px solid #b00; font-size: 120%; margin-top: .5em margin-bo
CSSのレイアウト40種類を集めた「Layout Gala」 - GIGAZINE
サイトのコンテンツのレイアウトを考える場合、コンテンツをどのようなレイアウトでは位置すればいいのか悩む場合が多々あります。2コラムにするのか3コラムにするのか、それぞれのコラムの下にさらに子コラムを入れるのか否か、右サイドに置くのか左サイドに置くのか、などなど。 そんな場合に参考になるのがこの「Layout Gala」。CSSによるレイアウトの例が40種類あるので、自分の作りたいサイトのスタイルに近いレイアウトを実際に見てから、CSSファイルをダウンロードできます。Layout Gala http://blog.html.it/layoutgala/ 全部のレイアウトのファイルを詰め込んだファイルのダウンロードは以下から。 http://blog.html.it/layoutgala/allLayouts.zip また、「Yahoo! UI Library」にも単一のCSSファイルで100
Open Source Web Design - オープンソースによるIT戦略支援 -
無ければ外から デザインセンスが無いからと言って嘆く事はない。これだけ参考にできるものがあればきっと出来るはず。 無ければ外から Webサイトのデザインはある意味で楽しく、ある意味で非常に苦しい作業だ。特にデザインセンスのない私にとってはそうだ。頭の中で考えるのとそれを実際に表現する事とのギャップが大きいのだ。 ただ、最近はCSSによるデザインが増えたので若干楽になりつつある（デザインを後回しにしておける）。そして最後にこれを見れば良い。 今回紹介するのはOpen Source Web Design、Webデザインテンプレートがダウンロードできるサイトだ。 具体的なライセンス等についてはダウンロードできるファイルの中にあるか、またはPublic DomainかCreative Commonsが適用されるとの事だ（具体的に明記されている場所がないのだが）。 登録されているデザインはどれも素晴
Yahoo!が提供するレイアウト用CSSライブラリ:phpspot開発日誌
Yahoo! UI Library: Grids CSS Grids CSS is a suite of seven web page templates and the ability to nest grids of one to four columns within the content area of those templates. Yahoo!が提供するYahoo! UI Library。 Javascriptだけのライブラリ、だと思っていたら最近になってCSSライブラリも含まれるようになりました。 このCSSライブラリを使うことで、ページの複雑なグリッドレイアウトが比較的容易に作れます。 更に、このライブラリで作ったページは大体のブラウザに対応しているというので動作確認の手間も省けそうです。 基本のHTMLを書いておけば、classの変更で簡単にレイアウト変更が可能な形に
CSS3 の否定疑似クラスの使いどころ - lucky bag
CSS3 の否定疑似クラス :not() って、使う機会があまり無さそうとか思ってたんだけど、Bite Size Standards で属性セレクタと組み合わせた使用例が紹介されてて、なんかそのピンポイントで指定できてる感がクール！つうか、そうか、そういう使い方かぁ。 input[type="text"]:not([size]) { width: 15em; } 上記コードを解説すると、type="text" な input 要素で size 属性が指定されていないものは width: 15em; ってことになる。うーん、これをユーザスクリプトで指定しておくのも良いかも。size が指定されてなくて入力欄の幅が狭いのって意外とストレス感じるし。 自サイトでも、クラスや ID をわざわざ付与してなくても否定疑似クラス使って指定できるもんって他にもありそう。例えば、(X)HTML の方で wi
はてな内の2カラムレイアウト - tikeda's blog
最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。 HTML <div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div> CSS #main{ float:left; width:100%; } #sidebar{ float:left; width:250px; background:#CCC; margin-left:-260px; } .box{ margin-right:260px; }こうすると、メインカラ
ちょっとしたメモ - CSS 2.1今度こそ
CSS本の校正を戻そうとした矢先に、CSS 2.1の改訂草案がでてきてびっくり。diffをとって比べたところ、昨年6月の最終草案と大きな違いはなかったので、原稿も僅かに修正するだけで校了できた。いやはや、最後まで一筋縄ではいかなかったこの本も、5月中旬にはようやく形になりそうだ。 CSSにおいて「2.0」が登場したのは1998年のこと。近頃の流行をはるかに先取りしていたわけだけれど、何しろ巨大で複雑な規格だから最初から完璧というのは難しく、CSS 2.0の記述には不整合や現実との食い違いが少なからず見られる。不備な部分を整理するために改訂版がでてくるのは必然だ。 ところが、最初の草案が公開されたのは2002年8月だというのに、それから4年近くたってもいまだにCSS 2.1は草案段階でしかない。ひとこと言いたいというのがやたら多いこともあって、2年前にいったん勧告候補になりながらまた草案に逆
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cyano: なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか
Dynamic Drive CSS Library- Practical CSS codes and examples