CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
お探しのページは見つかりませんでした。- 有限会社キートン
指定されたURLのページは存在しません。 サイト更新などによってURLが変更になったか、URLが正しく入力されていない可能性があります。 ブラウザの再読込を行ってもこのページが表示される場合は、サイトマップまたはサイト内検索でお求めのページをお探しください。 トップページに戻る
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
Bootstrap from Twitter ver1.3.0の使い方を日本語解説して簡単css (web)デザイン - end0tknr's kipple - web写経開発
この解説ページ群の目次 url トップ(このページです) bootstrapの概要「等」 入手と設置(install) http://d.hatena.ne.jp/end0tknr/20111016/1318730072 グリッドシステム http://d.hatena.ne.jp/end0tknr/20111016/1318731266 (固定/可変)レイアウト http://d.hatena.ne.jp/end0tknr/20111016/1318732238 テキスト(ﾍｯﾀﾞ, ﾘｽﾄ, ｲﾝﾗｲﾝﾗﾍﾞﾙ) http://d.hatena.ne.jp/end0tknr/20111016/1318750736 テーブル http://d.hatena.ne.jp/end0tknr/20111016/1318777018 フォーム、ボタン http://d.hatena.ne.jp/
IE7 バグ 早見表 by nobu
CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutを変更するプロパティには、「float」「position」「writing-mode」のように実装するレイアウトでその値を指定できないなどの制限があるものもあります。 また、「height="1%"」のように特定の箇所には使用できないものもあります。 ほとんどのレイアウトでは、拡大縮小せず100%の状態でユーザーに利用してもらうことを前提に制作していると思うので、この「zoom」を利用して指定する方法がよいと思います。 CSSのバグに効果のあるhasLayoutの指定方法 *{zoom:1;} 「*」は全てのタグに適応する意味になります。 全てを対象にするのが具合の悪い場合は、個別の箇所に指定してください。 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、 floatに後続するmarginの値
[CSS]日本語と英語で異なる最適なフォントサイズの指定方法
日本語・英語のサイト制作に使用しているCSSのフォントサイズの指定で、2007年用デフォルトとしているものです。 %指定を採用している理由の１つは、font-size、line-heightとともに組み合わせにより微妙に異なり、その組み合わせの最適な値を採用するためです。 日本語サイトのフォントサイズの指定 英語サイトのフォントサイズの指定 line-heightの指定 日本語サイトのフォントサイズの指定 body{ font-size:16px; /**/ font-size:100%; /**/ } 上記を基準サイズとして、下記を指定。 標準： font-size:82%; 大きめ： font-size:94%; 小さめ： font-size:69%; 英語サイトのフォントサイズの指定 body{ font-size:13px;*font-size:small;*font:x-smal
![[CSS]日本語と英語で異なる最適なフォントサイズの指定方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[CSS]気をつけたいIE 7のバグ -CSS-Discuss
CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意： バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small
条件分岐コメントを使用して、Internet Explorer のみに関するレイアウトの乱れを回避します - SystemGathering
条件分岐コメントを使用して、Internet Explorer のみに関するレイアウトの乱れを回避します 条件分岐コメント Internet Explorer では、ブラウザの動作の差異を回避するための労力を認識しています。 条件分岐コメントは、Microsoft Internet Explorer 5 で導入された、IEブラウザの種類とバージョンを特定する簡単で管理しやすい方法です。構文はコメントベースなので、他のブラウザではステートメントは無視されます。これは、IE を対象とする * HTMLフィルタなどのフィルタの代わりに使用するのに適しています。コードを見やすくするため、条件分岐コメントでは、IE 固有のスタイル シートへのリンクを設定することをお勧めします。 Internet Explorer のみに適用するスタイルシートへのリンク <!--[if IE]> <link rel
CSSでグラデーションを実現する方法、主要ブラウザ全対応
Firefox 3.6 / Gecko 1.9.2のCSSにはグラデーション機能が実装されている。この機能を利用すると背景のみならず要素ごとにグラデーションをかけることが可能になり、画像を使うことなく手軽に美しいUIを実現することができる。 CSSグラデーションを使ってクールなボタンをつくる方法 Firefox 3.6でCSSグラデーションを使う方法 グラデーション実装はFirefox以外のブラウザでも実現されている。Operaはまだ正式サポートしていないが、近いうちにサポートが実現するとみられる。IEではIE 5.5のころからサポートしており、WebKitを採用しているChromeとSafariでもサポートされている。IE8から名前が変わっているが指定する内容は同じまま。 CSSグラデーションは便利な機能だが、現状ではIE、Firefox、WebKit (Chrome、Safari)で指
FreeCSSTemplates.org is now FCT.co
FreeCSSTemplates.org has been rebranded to FCT. Therefore, our new domain will be FCT.co while our previous domain FreeCSSTemplates.org will always be kept redirected here. What happened to FreeCSSTemplates.org? As the domain FreeCSSTemplates.org was dedicated to just “Free CSS Templates“, we decided to expand our brand name by keeping the domain name short but with more topics to cover. That mean
CriCri 半透明フィルター
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。 あるブロックを半透明にしたい場合、IE独自仕様のアルファフィルターと、CSS3に入っているフィルターを両方指定すればできます。 現在のW3CのCSS Varidater はCSS2で検査されていますが、主なブラウザはすでにCSS3に対応しているので、CSS2に規定されていないopacityを指定しても読み取ってくれる。 例： background-color: #FFF; filter:alpha(opacity=75); opacity:0.75; IEのアルファフィルターは、真ん中のfilter:alpha(opacity=75);の部分で、これは不透明度75％になります。 IEの半透明フィルターが半透明にならない 他のブラウザのCSS3への対応のおかげで、レイヤーを半透明に
CSSの優先順位について｜クロノドライブ
上記の例も、sampleBox02の方が後に書かれているからsampleBox02が優先的に読み込まれてテキストの色は#666666になる…というわけではありません。今回の例の場合、sampleBox01がidセレクタによって指定されているため、classセレクタで指定されているsampleBox02よりも優先して読み込まれるようになっています。つまり、今回の例の場合だと、文字色は#999999になるわけです。 セレクタにはそれぞれ優先順位を決めるポイントが設定されており、そのポイントがより多いセレクタのスタイルが優先的に読み込まれるようになっています。その内訳は、 *（全称セレクタ） … 0ポイント p,h1など（タグセレクタ） … 1ポイント .sample（classセレクタ） … 10ポイント #sample（idセレクタ） … 100ポイント というようになっています。つまり、前
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
borderプロパティを使用した華麗なる四つのエフェクト | コリス
CSSを効率的に記述できるメタ言語「LESS」の使い方 [ホームページ作成] All About![CSSを効率的に記述できるメタ言語「LESS」の使い方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
わずか四文字でIE6/7/8を区別するCSSハック | コリス
http://web.donnatokimo.com/css/392
たった6行追加するだけ！CSSだけで透過PNGをIE6で表示させるテクニック｜クロノドライブ
通常のスタイルとは別に、印刷時のみに有効となるスタイルを作成する方法｜クロノドライブ
CSS3で新たに追加されるプロパティと各ブラウザの対応状況まとめ｜クロノドライブ