マイクロソフトの新ブラウザ「Project Spartan」の開発にアドビが参加。CSSの強化などに貢献
マイクロソフトの新ブラウザ「Project Spartan」の開発にアドビが参加。CSSの強化などに貢献 アドビはこれまで、Flashなどで培ってきた画面上でのさまざまな表現をWeb標準でも実現すべく、W3Cの標準化やオープンソースでの実装などに協力してきました。一方で、マイクロソフトのブラウザはオープンソースではなかったため、アドビがWebKitなどに実装したCSSの新機能などはInternet Explorerでは実装されていない、あるいは動作や表現が異なる、といったことが起きていました。 マイクロソフトはProject Spartanの開発に当たってこうした姿勢を改め、外部からの協力が可能な体制を作っていると説明しています。IEBlogから引用します。 In the same spirit of openness, we’ve been making changes internal
不特定多数の人が更新する大規模サイトに必要な CSS 設計の思想
今話題（？）の CSS 設計のメモ。 この「ある程度の規模」というのは、肌感覚としてテンプレートの枚数( ≠ Webサイトのページ総数)が 20P〜50P くらいのイメージ。 また、コーディング完了後に自分以外の人間による断続的な更新が入るという前提。 そして一番重要なのは「更新する人のスキルは定義しない。」ということ。つまり HTML の知識が乏しい人が更新する可能性があることを前提とする。 きっと1ヶ月くらいすれば変わると思うけど、自分の思想のログとして残しておく。 今ぼくは以下のことに気をつけながら CSS を書いている。 コードが長くなることを気にしない セレクタが長くなることを気にしない セマンティクスの実現の難しさを理解し、妥協する 再利用性より保守性 拡張しやすい設計 最初から最適化しようとしない ゴールは目先のパフォーマンス向上ではなく誰が触っても問題が起きにくい設計 ひと
はてなブログのトップにナビゲーション(カテゴリ)メニューを作る！【カスタマイズ】 - すりゴマ・ドットコム
すりゴマです。 今日もいい感じにすり潰していきますね。 photo by kudumomo RSS登録していただいている方は、お気づきかもしれませんが、トップの「ナビゲーションメニュー(グローバルメニューとも言いますかね)」のデザインを変えました。 (・∀・) 以前、はてなブログがSEOに強いというエントリーを書いたとき、id:narutonetabare さんにコメントいただきました。 で、ブログのトップに表示されている「ナビゲーションメニュー」の作り方を記事にしましょう！ということで、カスタマイズの仕方の復習兼ねて、ついでにデザインも変えてみたというわけです。 (*´∀｀*) 便利なサイトがあるよ！ 使い方 テンプレートの選択 見た目のカスタマイズ リンク先URLなどの編集 データの保存と修正 HTMLの反映 CSSの反映 便利なサイトがあるよ！ こちらです。 CSS MenuMake
『CSS3でつくるキャラアニメーション』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー
使われていないCSSを探す方法
Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。 紹介されているツールは「uncss」とい
jQuery Mobile 1.4が正式版に。CSSインラインSVGのアイコンでRetina対応、DOM削減で動作の高速化も
jQuery Mobile 1.4が正式版に。CSSインラインSVGのアイコンでRetina対応、DOM削減で動作の高速化も iOSやAndroidなどクロスデバイス対応のモバイルアプリケーション開発のためのJavaScriptライブラリ「jQuery Mobile」の最新版「jQuery Mobile 1.4」が公開されています。 CSS内のSVGでアイコンを描画 今回のバージョンの大きな特徴は、これまで画像ファイルを基に描画されてきたアイコンがすべてSVGに置き換えられたことで拡大縮小に対して柔軟になり、Retinaなど高精細な画面でもなめらかな表示を実現したことです。 例えば、jQuery Mobile 1.4でアイコン表示を備えたボタンをChromeのデバッガで見てみると、イメージファイルを示す部分にはSVGのコードがそのまま記述されていることが分かります。 これまであったPNG形
はてなブログのスマホ記事下の人気記事と新着記事のウィジェットのデザイン変更 - 無意味の意味
2013-11-12 はてなブログのスマホ記事下の人気記事と新着記事のウィジェットのデザイン変更 報告 スマホの記事下にはてなの人気記事と新着記事のウィジェットを入れてらっしゃる方が多いと思いますが、そのままだと大変よろしくないデザインとなってしまうので簡単にですが、デザインを変更する方法をご紹介したいともおもいます。 STEP1:CSS作成 CSSの編集ができる方はお好みのデザインに微調整をお願いします。わからない方はそのままでOKです。 <style> .entry-list .hatena-bookmark-widget-title { background: #000; color: #fff; padding: 10px 10px 10px 10px; margin: 0 0 10px 0; position: relative; font-size: 14px; } .entr
JavaFXの練習２：Controllerとか - プログラムdeタマゴ
というわけで、今回もJavaFXの練習した内容です。 今回は以下のような感じのパネルを作ってみようとしております。 画像と、ファイル名と、ファイルの説明を表示して、ボタンをクリックするとファイル名と説明部分がスライドアウトしたりスライドインしたりするようなものです。かっくいいね。このスライドイン、アウトをどうすればいいのかにえらい四苦八苦しました。。。 今回はJava言語を利用する必要があるので、Eclipseでプロジェクトを作成します。先に空っぽのtest.cssと表示する画像のサンプルをプロジェクトフォルダに入れておきました。 JavaFXの開発をするにはjfrt.jarが必要ですので、jre/libの下にあるjfxrt.jarをビルドパスに追加しておきます。 ビルダーを起動して、とりあえず空っぽのまま、fxmlをEclipseのプロジェクト上に保存しておきます。 さて、準備完了したの
JavaFX2の練習1 - プログラムdeタマゴ
JavaFX2のCSS意味わかんない。そもそも、そんなCSS得意でもないのに、普通のHTML用のCSSともなーんか全然違ってマジブッコロ。JavaFXのCSSのページまじ意味わからねーし。それぐらいならSwingでゴリるわ。とか思ってたのでJavaFX2手を出していませんでしたが、日本語記事は全然見つけられなかったけど、英語記事だとわかりやすいのがいくつか見つかってきたので色々試したことを雑記していこうと思います。たまったらそのうちまとめる。 ラベルで簡単なCSSの練習 JavaFX Scene Builderを使ってCSSの記述の練習をしていこうと思います。 今日はフォントの設定と、背景と、ラベルの画像の指定について。 まずは、とりあえず、Labelを貼り付けます。StyleClassの項目の[+]を押して、testclassという名前のクラスを追加しておきました。 次に、デスクトップに
lessphp と mod_rewrite を使って快適なless開発環境を作る - プログラマー幸福論
Photo by [ changó ] via photopin たまには、開発系のことも書きたくなったので、今開発で使っている lessphp のことについて書いてみます。今回は、lessphp という less の PHP版と mod_rewriteを連携してみました。 1. Less とは Lessは、CSSの拡張構文を使えるようになるCSSの拡張メタ言語です。ネストや変数、ミックスインなどが使えるようになるので、効率的にCSSを記述、そして管理できるようになります。必ずlessで記述しなければならないというわけではく、CSSの記述も普通に使えるので（一部を除き）、lessの記述をしたい場合だけless構文を使うといったボトムアップのアプローチができるのもいいところです。 以下は、lessの構文の一例です。詳しく知りたい方は、むゆうさんの記事などで詳しく解説されていますので、そちらを
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material UI
IDEA * IDEA
Simplified CSS Preprocessing with restyle.js
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
ワンクリックでHTMLからCSS/LESS/SASSを自動生成してくれる『OneClickCSS』 | IDEA*IDEA
IDEA * IDEA
