タグ

関連タグで絞り込む (17)

タグの絞り込みを解除

cssに関するsnb04のブックマーク (48)

  • 圧縮・高速化、ダウンロード, online tool

    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.

    snb04
    snb04 2011/05/03
    cssとjsを圧縮してくれる
    リンク

  • [CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix

    A new micro clearfix hack デモページ [ad#ad-2] 「clearfix」はフロートした要素が親要素からはみ出してしまうのを回避するもので、当サイトでもいくつか紹介してきました。 今回紹介するのは、スタイルシートの量を更に減らし（class名も短く）した「micro clearfix」です。 この新しいclearfixの対応ブラウザは、下記の通りです。 Firefox 2+ Safari 2+ Chrome Opera 9.27+ IE 6+, IE Mac IE6 にも対応しているのは嬉しいところです。

  • より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net


    cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って︵今更︶いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って︵今更︶いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding︵本家︶HTMLコーディングが3倍速くなる？﹁Zen-Coding﹂秀丸Zen- Codingマクロコーディングの効率化を図
    より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
    snb04
    snb04 2011/04/07
    リンク

  • もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife


    class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記‥ この記事自体、2007年1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
    もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
    snb04
    snb04 2011/04/07
    コーディングの度に悩むんだよね。自分なりのルールを作ればいいんだけど、こうゆうリストがあると助かる。
    リンク

  • 主要なCSS Resetのスタイルシートとドキュメントのまとめ -CSS Reset.com

    ブラウザのスタイルを初期化するCSS Resetのスタイルシートとドキュメントをまとめたポータルサイトを紹介します。 CSS Reset.com [ad#ad-2] 現在、登録されているCSS Resetは下記の7つです。 Eric Meyer's "Reset CSS" Eric Meyer's "Reset CSS"のドキュメント HTML5 Doctor CSS Reset TML5 Doctor CSS Resetのドキュメントメント Yahoo! CSS Reset (YUI 3) YUI 3のドキュメント Vanilla CSS Un-Reset Vanilla CSS Un-Resetのドキュメント Tripoli CSS Reset – David Hellsing Tripoli CSS Resetのドキュメント 'undohtml.css' – Tantek Celik

    snb04
    snb04 2011/01/26
    CSSリセットしてたけど、一周回ってブラウザのデフォルトをポジティブに使うようになったな。
    リンク

  • [CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ

    幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i

  • IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」


    ＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6︵Internet Exproler 6︶ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では﹁IE6氏ねばいいのに﹂とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、﹁DD_belatedPNG.js﹂を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
    IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
    snb04
    snb04 2010/09/13
    IE6で透過pngを使用する
    リンク

  • เข้าสู่ระบบ99 เว็บตรงไม่ผ่านเอเยนต์ ไม่มีขั้นต่ำ ทางเข้าแตกง่าย ฟรีเครดิต

    เข้าสู่ระบบ99 เล่นสล็อตออนไลน์กับเรา รับโบนัสมากมาย รางวัลแจ็คพอตทุกวัน หลากหลายเกม ง่ายต่อการชนะ ท่านทุกท่านสามารถเข้าสู่ระบบ 99 เพื่อเล่นสล็อตออนไลน์ได้อย่างง่ายดายและสะดวกสบาย ทางเรามีเกมสล็อตให้เลือกเล่นมากมาย ทั้งเกมสล็อตคลาสสิก สล็อตออนไลน์ สล็อตมือถือ และอีกมากมาย ทุกท่านสามารถเข้ามาเล่นได้ตลอด 24 ชั่วโมง ไม่ว่าจะเป็นกลางวันหรือกลางคืน lucky99+เข้าสู่ระบบ ทางเรายังมีโบนัสมากมายให้ทุกท่านได้

    snb04
    snb04 2010/09/10
    プロジェクトの表示部分HTMLとCSSとJSのパッケージを作ってくれる
    リンク

  • CSSの優先順位〜CSSテクニック〜

    snb04
    snb04 2010/09/09
    css優先順位の説明
    リンク

  • CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集


    cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。demo縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。demoクロスブラウザ対応のグラデーション
    CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集

  • [CSS]実例から学ぶCSS3の効果的な使い方

    CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。

    snb04
    snb04 2010/06/05
    実例を交えてCSS3の使い方を紹介
    リンク

  • Web Design Articles (CSS Layouts, Experiments & Demos)

    I've been working professionally as a web developer for over two decades and running this website since 1997. I am keenly interested in responsive layouts and their underlying HTML and CSS. My web development work history My web design portfolio Responsive Columns: Build Amazing Layouts With Custom HTML Tags Responsive Attributes: Generate CSS Grid Layouts With Simple HTML Responsive Font Size (Op

    Web Design Articles (CSS Layouts, Experiments & Demos)
    snb04
    snb04 2010/05/24
    css3で星バッチ風アイコンを作る方法。すげーわ。
    リンク

  • CSSセレクタの高速化の話し - Webtech Walker


    続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった︵というか全然知らなくてちょっとびびった︶ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。︵#fooをとるとより高速︶ 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
    CSSセレクタの高速化の話し - Webtech Walker
    snb04
    snb04 2010/05/18
    あまり意識しないが知っておくと良いcssのパフォーマンス対応
    リンク

  • [CSS]CSS3を使用した素敵なボタンを実装するチュートリアルの決定版


    div, span, p, a, button, inputなどさまざまなHTML要素に適用が可能な、CSS3グラデーションを使用したボタンを実装するチュートリアルをWeb Designer Wallから紹介します。 CSS3 Gradient Buttons ボタンは画像やJavaScriptを使用せず、CSSで実装されていて、フォントのサイズに基づいて拡大縮小が可能なものとなっています。ボタンのサイズはpaddinとfont-sizeで簡単に変更が可能です。 下記のデモページで、拡大縮小を試してみてください。
    snb04
    snb04 2010/05/17
    早くcss3でwebサイトを実装したい
    リンク

  • CSSビギナーに気をつけてほしい5つのポイント | コリス


    スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex
    snb04
    snb04 2010/04/05
    css初心者の俺は毎回見る
    リンク

  • わずか四文字でIE6/7/8を区別するCSSハック | コリス

    「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。 <textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } </textarea>

    snb04
    snb04 2010/04/05
    IEを区別
    リンク

  • MOONGIFT: » 必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介


    Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
    MOONGIFT: » 必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介
    snb04
    snb04 2010/02/25
    コネクションを減らして表示速度を上げる
    リンク

  • [CSS]画像１枚でメニューボタンを作る

    tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を１枚にまとめてしまう手法。 ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。 完成すると上のようなメニューになるとする。 この場合、a:linkとa:hoverを１枚にまとめて作成します。 横メニューなら上下、縦メニューなら左右に並べて作る。 HTMLは次のようなソースになる。 <ul id="navigation"> <li><a href="#" title="トピックス" class="topics">トピックス</a></li> <li><a href="#" title="経営方針" class="policy">経営方針</a></li> <li><a href="#" title="会社概要" class="outline">会社概要</a></li> <li><a href="#" t

    [CSS]画像１枚でメニューボタンを作る
    snb04
    snb04 2010/02/25
    画像をまとめてコネクションを減らす
    リンク

  • IE8のレンダリングモードに関するまとめ


    Apr 12, 2008 某所で行われたIE8 Beta 1についてのセミナーで、DOCTYPEスイッチとIE8の複数のモードの話を聞いていたら、頭の中がごちゃごちゃしてきたのでざっくりとまとめてみる。 レンダリングモードの使い分け まず最初に、IE8には以下の3つのレンダリングモードがあることを覚えておきます。 IE8標準準拠モード (デフォルトのレンダリングモード) IE7標準準拠モードQuirksモード (いわゆる互換モード) IE8のデフォルトでのレンダリングモードは一番上の﹁IE8標準準拠モード﹂になります。これらのレンダリングモードを覚えたら、次にIE8が備える﹁IE7エミュレート機能﹂について知っておきましょう。エミュレート機能とは﹁IE7とまったく同じレンダリングをする﹂ための機能です。つまりこの機能を有効にするとデフォルトのレンダリングモードが﹁IE7標準準拠モード﹂に
    IE8のレンダリングモードに関するまとめ
    snb04
    snb04 2010/02/12
    IE8のレンダリングモードを指定する
    リンク

  • 標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有

    2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈

    snb04
    snb04 2010/02/12
    ブラウザ、表示モード別のドキュメント
    リンク
  • 1 2 3 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.