タグ

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

タグの絞り込みを解除

*cssとリセットに関するmimimi0101のブックマーク (15)

  • デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17

    デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {

    デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17

  • CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css

    Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal

  • ブラウザのスタイルをリセットするスタイルシート -Normalize CSS

    Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox

  • CSSでのブラウザー事のフォントサイズや表示の統一について | CSS Lecture

  • Lucky bag::blog: CSS を作成する際のお約束

    CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦

  • [CSS]スタイルの初期化(後編) -body内の個別タグ編 | コリス

    2007年春現在よく使用している、ブラウザがもつスタイルを初期化するスタイルシート「body内の個別タグ編」です。 スタイルの初期化 -テーブル関連 スタイルの初期化 -リスト関連 スタイルの初期化 -画像・オブジェクト関連 スタイルの初期化 -フォーム関連 スタイルの初期化 -テキスト関連 スタイルの初期化 -その他 スタイルの初期化(前編) -全称セレクタとhtml, body編 スタイルの初期化 -テーブル関連 テーブル関連では、table、th、td、caption の初期化を行います。 table{ border-collapse:collapse; border:none; border-spacing:0; } th,td{ vertical-align:top; border:solid 1px #000; font-weight:normal; text-align:le

    [CSS]スタイルの初期化(後編) -body内の個別タグ編 | コリス

  • デフォルトスタイルの差異を無くすCSSで気をつけること | F+R (FplusR)

    Universal selector（*）の指定 font-size:100%;を指定しない。 これは、Windowsの「ユーザー補助」関連の機能を有効にしたときに、Internet Explorer 6で画面が乱れるバグがあるため Universal selectorにline-heightを指定しない。 Universal selectorにline-heightを指定すると、一部分のみに違うline-heightを指定することが困難になるので、指定しない事が無難。 その他の指定 a[name]:hover{text-decoration:none !important;outline:0 !important;} Mozilla Firefox、Netscape7などのGecko系のブラウザのバグ対策。 ul li,ol li 使う事がおおいタグなので、細かい指定は各エリアごとに指定

  • 新規でサイトを作る際のCSSを公開:::STOPN' LISTEN:::

    免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

  • 私のサイトが出来るまで。HTMLとCSS実践編その2 : 雑記帳 : der Gegenwart

    [ Web関係 ] id属性とclass属性を付加 div要素は使いたくないので、必要に応じて各要素に直接idとclassを付加。私の場合、使い分けが結構適当です。全部classにしてしまった方が適切かもしれません。 どこにid振るかは勘で決定。「id="left"」みたいなことはしていないものの、結局見栄えのためのidなので一緒だと思う。ホントは好ましくありません。 <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>der

  • デフォルトスタイルの差異を無くす CSS

    2007-01-30更新 Yahoo UI Fonts CSS使用時の各要素のフォントサイズを変更する際の注意点を追加しました。 defalut.cssちょっとだけ修正 2007-01-18 更新 記事の内容も古くなり、Yahoo Libraryなどがでて更に差異を減らすことが簡単になったことから、これを利用し、スタイルも簡潔にシンプルに記述しなおしましました。前よりも使いやすくなったはずです。前回配布していたものとの変更点は次のようになります。 定義グループにアウトライン番号を記述 ベーススタイルのデザインをシンプルに記述し直し 使用していたカラーを一部を除いてモノトーンに変更 Yahoo Library Fonts CSSを組み込み、各ブラウザで文字サイズが同一になるように修正 プロパティ記述順序をhail2u.net「CSS2 Specificationでのプロパティの出現順序」に沿

  • base.cssメモ（初期化と基本設定） - Archiva

    Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSSの初めでUA固有の表示設定を解除するリセットCSSと、フォントサイズ指定、そしてタグ自体の基本的な振る舞いを規定する指定、この３つを合わせたもの。 この部分はいつでもどんなサイトでも大抵は使いまわせるので、自分なりのものを用意している人も多いと思います。ちなみにSig.は「base.css」という名前で用意してますが、「default.css」とか「master.css」とかって命名も良く見かけますね。それはともかく。 このところデフォルト設定に関するレポを良く見かけるので、いちど当サイトでも纏めておこうかと思った次第です。（ま～「良い感じの方法を見つけたんだけ

  • 「リセット用CSSを使わない」ことが流行ってる（らしい）理由 | necoze LOG2 [ネコゼログログ]

    一定期間更新がないため広告を表示しています

    「リセット用CSSを使わない」ことが流行ってる（らしい）理由 | necoze LOG2 [ネコゼログログ]

  • 全称セレクタを用いたスタイルの正規化 | Web標準Blog | ミツエーリンクス

    スタイルの正規化にまつわるご質問をいただきました。 アスタリスクで全要素のマージンをゼロにするようなリセットの仕方は海外では行われず、使用する要素だけにマージンをゼロを指定していくという仕方が最近の流れだとセミナーで聴きました。 そのほうがブラウザに対する負荷も少ないので・・・ということなのですが、一体どの程度の負荷なんでしょうか？体感的に重いなと感じる程度なんでしょうか？ ブラウザが読み込んだら固まってしまう状態を100としたらどの程度なんでしょうか？ ページ全体をdiv要素で囲んで、その中の全要素（div * { margin: 0; }）と指定したら、その中で使ってる要素だけなので、あまり気にすることではないような気がします。 まず補足しておきますと、個々のブラウザが適用するデフォルトスタイルシートによって生じる差異をあらかじめ解消するため、制作者スタイルシート側で要素のマージンやパ

  • CSSの初期化ファイル | d-spica

    CSSの初期化ファイル 2008-05-31 0 0 XHTML/CSS CSS 以前， CSSの初期化 というエントリを書きました。あれからいろいろと試行錯誤し，初期化ファイルがずいぶん変わってきましたので，改めて今ぼくが使っている最新のファイルを紹介したいと思います。 default.css 以下からご覧いただけます。 default.css このファイルは次のような目的で作っています。 各ブラウザが持つデフォルトのCSSをリセットして，レンダリングの違いを解消する。 サイトやページによって書き換えることがほとんどない，基本的な設定を行う。 コーディングが分かりやすくなる初期値を指定しておく。 このファイルをあらゆるサイトで使い回せるようにしておくわけです。 リセット /* Reset */ body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, d

  • RedLine Magazine : 気になった初期化CSS

    気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが

  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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