タグ

★とcssに関するEnriのブックマーク (11)

  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

  • Adobe Fonts

    {{retired.name}} fonts are being removed from Adobe Fonts on {{retired.retirement_date}}; {{message.actionLabel}}

    Adobe Fonts
    Enri
    Enri 2010/05/11
    ユーザーの環境に依存せずにフォントを使える。サイト数やフォント数により金額が異なる。無制限プランで月額5000円ほど。 解説:http://hyper-text.org/archives/2009/11/typekit_web_font.shtml
  • Centering (horizontally and vertically) an image in a box

    The problemWe want to center an image inside a container, bigger than the image and with assigned dimensions. The image is not a background one, it’s a true <img> element. Any image has well defined dimensions, so the easiest and most reliable way to solve the problem is: make the image display:blockassign to the image the needed left and top margins to get it centered in the container. Each of th

  • DoCoMoのCSSとXHTMLまとめ | 村式開墾日記

    DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。 これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。 他のキャリアについてはまた書くと思います。 特に気をつけるべき点を先にまとめると、こんな感じです。 ・CSSはインラインでしか記述できない。 ・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。 ・istyle属性は使えない。 ・MARQUEEタグは使えない。 ・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。 ・TABLEタグはiモード対応XHTML2.0以降でないと使えない。 ・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。 (DoCoMoに限った話ではない内容も含まれています) CSSの名称、記述

  • CSS Mania · Since 2004

    Sponsors Free website builder. Create a website now! EcommerceBooth is an eCommerce resource where you can find useful guides, tutorials, and exclusive deals. WPKube - learn how to get most out of WordPress. Popular Topics Companies (6,703) Freelance / Portfolios (4,828) Technology (6,562) Internet (5,264) Marketing (4,812) Lifestyle (3,905) United States (3,078) United Kingdom (1,713) Weblogs (2,

  • Jetpack

    JetpackはMozilla Labsによって開発されたブラウザ拡張のための新たな試みです。 ユーザはまず、FirefoxにJetpackエクステンションをインストールする必要があります。その上でAPIを用いた様々なJetpackプラグインを動作させることができます。 ※但しこれは現時点での話で、将来的にはFirefox体に統合されるとのこと。(参照) Jetpackプラグインは HTML + Javascript + CSS といった従来のWebベース技術で記述することができるため、ブラウザを拡張することが非常に容易になります。 更に最近人気の jQuery などが組み込まれていて、表現力に富んだ柔軟なモジュールを簡単に実装可能です。 ここでは、Jetpackでの開発を助けるためのドキュメントを集めたり、家サイトのリファレンスを和訳(意訳)したりします。 勉強がてらなので、不足点は

    Jetpack
  • [css] 効率の良いcssを書くための7箇条

    スタイルシートをシンプルに効率よくすることは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繫がります。これはページのパフォーマンスを大きく向上させることに繫がります。 前回は大まかなブラウザの挙動を見ました。 今回は、そういった動きを踏まえた上で、やってしまいがちな非効率なスタイル指定を挙げてみます。そういった指定を避けることで、軽量で高速なスタイルシートを記述することができるでしょう。 なお、この記事は、Google Page Speedの”“および、Mozillaの”Writing Efficient CSS for use in the Mozilla UI“などを元に書いています。 1. 不要なスタイルは書かない 言うまでもない大前提です。ですが、ちょっと調べてみると意外と多いのではないでしょうか。 例えばサイト内で幾つかのパターンのページがあり

    [css] 効率の良いcssを書くための7箇条
    Enri
    Enri 2009/06/25
    『6. :hover擬似セレクタを使わない~(略)~特にアンカー(aタグ)でない要素に対して』 体感できるほど遅くなる
  • line-height の値には単位なしが良いとされる理由

    CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size

  • Lucky bag::blog: dt と dd を横並びのサンプル その1

    最初に全称セレクタを使って全ての要素を margin: 0; padding :0; line-height: 1.6; としている。 デフォルトの状態 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 case:1 float を使った方法 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。

  • MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介

    雑誌や新聞などでは複雑な段組みを行って、情報を見やすくしている。ネット媒体の場合、あまりそうした点は考慮されず、二段または三段のカラムで構成されることが多い。しかも幾つかのカラムはメニューなどに使うので、文章自体は殆ど組版が施されていない。 CSSだけとは思えないほど細かく制御されている Webはそういった媒体ではない、と言い切ってしまえばそれまでだろう。だが今後情報の電子化は進み、紙媒体は現状維持ないし衰退していくのは間違いない。そうした時に、Webもやはり読ませる形式を求められるようになるのではないだろうか。それを実現するのがこれだ。 今回紹介するオープンソース・ソフトウェアはEmastic、複雑なカラム構成を実現するCSSフレームワークだ。 Emasticはまるで雑誌のような段組みをCSSで実現している。二段、三段、四段の表示を行い、固定幅または表示サイズに合わせて変化とを組み合わせ

    MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介
  • CSSMENUMAKER.COM

    Get a price in less than 24 hoursFill out the form below. One of our domain experts will have a price to you within 24 business hours.

  • 1