[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめIE8がサポート外になり、喜んでいる制作者の人も多いと思います。 正式版がリリース予定のjQuery 3もBootstrap 4もIE8はサポート外です。 古いバージョンのIEをサポート外にすると、CSSで使えるテクニックも広がります。これからどんどん使っていきたいCSSのテクニックを紹介します。
![[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1fd89076a824a2b1b121fa5a6c8839a4338de05/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012701.png)
[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout
最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。 もちろんレスポンシブ対応で、古い環境（IE8+, iOS5+, Android3+）もサポートされています。 レイアウト用だけのフレームワークを必要としている人にはぴったりだと思います。 GridLayout GridLayout -GitHub サポートするのがモダンブラウザだけであれば、Flexboxでレイアウトをするのがベストです。 Flexboxについては、下記ページで徹底的に解説しているので参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 GridLayoutの主な特徴 GridLayoutのデモ
![[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5ba934ae36a322ae8ab722a40c75aec7f103caf/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082103.png)
IEで「レイアウト崩れが起きてます」と言われた時の対処メモ（Internet Explorerの「互換表示モード」を解除する）
HOME>Web>IEで「レイアウト崩れが起きてます」と言われた時の対処メモ（Internet Explorerの「互換表示モード」を解除する） 業務でやっているとある企業のWebサイト（レスポンシブ対応、対象ブラウザ：IE9〜）構築で、こちら側のブラウザチェックでは問題ないのにクライアントから「こちらのPCで表示が崩れるんですが…」との連絡が。 対応していないCSS3プロパティの効果が見えないとかならまだしも、レイアウトがグチャグチャになっていると言われては冷や汗が止まりません。 しかも、制作側ではどのPCで見ても問題ない上、対応していないIE8ですら問題ないというのに…これは困った。 ie8で崩れぬ表示 クライアント先のie9で崩れている そんな悪夢（バグ）の波間で 終わらない旅路（デバッグ）を続ける堕天使（わたし） 虚しさの意味を知る 柔らかな風が吹くこの場所で… （GLAY/HOW
あと一歩のところでうまくいかないCSSグリッドシステム
しばらく前からわたしはCSSグリッドシステムに取り憑かれたようになっている。このせいで成仏できないので取り憑く側といったほうが正しいのかもしれないが。 わたしが夢想しているグリッドシステムは以下の要件のもの。 HTMLとCSSだけで動く。JavaScriptに依存しない リキッドレイアウトである 行ごとに要素で囲む必要がない グリッドの内容は、％指定でフレキシブルにすることもできるし、固定サイズにしておき領域幅をオーバーしたら改行するようにもできる 使用があやういハックは使いたくない IE8以上に対応する この要件を満たしているサンプルはこちら。ブラウザの画面幅を加減すると、リキッドレイアウトのほうは自動的に幅が伸縮するし、固定幅レイアウトのほうは適宜改行されるようになると思う。 上記サンプルの動作環境はIE8+。うまくいっていない「あと一歩」はどこなのかというと、グリッドの基底要素（サン
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック
hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
IE8・IE9をクラッシュさせるシンプルなCSSコードが見つかる
わずか1行でInternet Explorerをクラッシュさせてしまうコードというものもありましたが、今回見つかったコードも、CSSに数行足すだけでInternet Explorer 8と9をクラッシュさせることが可能です。 Benutzer:Schinken/CSS-IE-Crash – Hackerspace Bamberg - Backspace http://www.hackerspace-bamberg.de/Benutzer:Schinken/CSS-IE-Crash デモページはこちら、IE8・IE9だとアクセスした瞬間にクラッシュし操作不可能になるので注意。 http://schinken.github.io/experiments/iecrash/crash.html 実際にIE8でアクセスしてみたところ、ページにアクセスしたとたんに一切の操作を受け付けなくなり、そのまま
CSSとSVGで曇りガラスのような効果を作る
2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch
軽量でシンプルなレスポンシブWebデザイン向けのボイラプレート・Responsive Boilerplate
軽量且つ、クロスブラウザにも対応したレスポンシブWebデザイン対応のCSSフレームワーク・Responsive Boilerplateのご紹介。パッと見た限りですが、かなり使いやすそうです。軽量なのも◎。 軽量なレスポンシブWebデザイン用のボイラープレート(文例集)です。圧縮版で2KBほど。また、IE7等でも表示が崩れません。 いわゆるCSSフレームワークですね。軽量でシンプル。IEにも対応と、欲しい特徴だけ絞られた感じでよかったです。 IE TabのIE7のスクショです。 また、Sublime textのパッケージも用意されていますのでSublime textユーザーの方で興味がありましたらお試しになってみては如何でしょう。ライセンスはMITです。 Responsive Boilerplate
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
CSS3 の border-image で簡単にリッチなボタンを作れる未来がいつの間にかきてた - latest log
画像を使ってリッチでフレキシブルに伸び縮みするボタンやフレームを作る時みなさんはどうしているでしょうか。 従来の方法だと デザイナーさんが画像を9分割 マークアップで頑張って再現する というハードワークを強いられていましたが、 昨今のモバイル開発環境では、それ、もう要らない苦労らしいですよ。 CSS3 の border-image を使うと、9 slice(9 patch)を CSS だけで実現可能です。 用意するものは、9つに分割する前のボタン画像です。 画像を用意したら、http://border-image.com のジェネレーターを使い border-image 用のCSSを生成します。 -webkit-border-image: url(img/btn.9.png) 27 24 30 25 round; とすると、 Android Browser 2.3.3 iPhone 4S
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
IEでもそこそこできる！CSSで作る画像のようなボタン
#button { width:320px; color:#e4eef8; background:#337fcc; font-size:28px; font-weight:bold; text-shadow:0 -1px 1px #143352; text-align:center; display:block; text-decoration:none; border:1px solid #225588; padding:12px 0 8px 0; border-radius:12px; background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1)); background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ
17 CSS/HTML Effects with Cross-Browsing Alternatives サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。 [ad#ad-2] 下記は各ポイントを意訳したものです。 幅の最小値・最大値 (IE included) RGBa (IE included) 不透明度 (IE included) 画像の回転・拡大縮小 (IE included) 背景をブラウザいっぱいに表示 (IE included) 画像無しのビュレット テキストのシャドウ (IE included) 複数のボーダー (IE included) ボックスシャドウ (IE included) 角丸 スクリーンリーダー用のコンテンツ ネガティブ値で指定したtext-indent Clearfix (IE inclu
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
対象ブラウザをIE9以上にすると使えるようになるもの（Vistaを無視する場合も補足） - Qiita