|WEBCSSハックとは各ブラウザごとでCSSの実装状況やバグの影響で表示が崩れてしまう時に、特定のブラウザのみにCSSの指定ができるテクニックです。Chrome、Firefox、Safari、IEの4つブラウザが主に使われていて、最近ではWindows10の登場により新たにEdge(エッジ)というブラウザが生まれました。タブレット・スマホのブラウザのことも考えると沢山のブラウザやOSに対応したCSSを書くことになります。webサイトを制作する際に、各ブラウザで実装状況の違いやバグがあるので見た目が崩れないようにいろいろとCSSで試行錯誤することはよくあります。それでもあのブラウザだけがどうにもならないって時が出てくることもあるでしょう。Web制作では、PCのいろんなブラウザもそうですしタブレット、スマートフォンでのiPhone、Androidのブラウザなど、どのような状況でもうまく表示させることが求められます。そんな時に使える各ブラウザ・OSに対応するためのCSSハックをご紹介します。#aaa;}「*::-ms-backdrop」と書く方法もよく見かけますが、IE11でうまく動きません。「_:-ms-lang(x)::-ms-backdrop」と指定することで解決します。IE9以降でも各バージョン特有のハック方法もありますが、セキュリティ面の問題もありシェア率がものすごく低いので省きます。#bbb;}}Edge(エッジ)はWindows10のために設計された、Microsoftが開発しているウェブブラウザ。これからのWindowsユーザのためのもしもの時に。#eee;}}ブラウザやOSごとにCSSハック次にご紹介するのはブラウザだけでなく、OSごとでもCSSをコントロールすることができる方法です。「css_browser_selector.js」を使うと、簡単にブラウザやOSごとにCSSを変えることができます。http://rafael.adm.br/css_browser_selector/DOWNLOADの下にあるリンクからjsをダウンロードして、jsを読み込ませてあとにCSSコードを書くだけです。*/}その他、「.blackberry」や「.mobile(モバイルすべて)」などがあります。ブラウザ用のコードもありますが、Chrome、Firefox、Safari、IEはこちらのjsを使わなくても大丈夫です。Ironというドイツ・SRWare社製のウェブブラウザに適応させたいという人は使うと良いかも。(日本にそんな人いるかな???)他にもJavascriptでユーザーエージェントを判別するなどして自力でやる方法も。css_browser_selector.jsを使うほどでもという方は、タブレット・スマホの情報を取ってきてコントロールすれば良いです。ユーザーエージェントを判別してbodyにクラスを付けてみる。ifなどでもっとコンパクトにコードを書いても良いです。JavaScriptではなくサーバサイドスクリプトのPHPで書いても良いです。あとはCSSでゴニョゴニョすればいいですね。しても特定のブラウザだけスタイルがおかしくなる時や、このブラウザ、この端末はスタイルを変更したいという時などに使ってください。背景に文字の切り抜きができるbackground-clipの使い方Webサイトの表示速度を速くするためのにしておきたい。Variables(カスタムプロパティ)を使うFlexboxで要素を横並びにして要素の数でのレイアウト調整や中央寄せにするPREV:p5.jsを使ってProcessingのクリエイティブコーディングをJavaScriptで書くNEXT:Web担当者が知っておきたいGoogleのSEO対策でも使える検索オプションPROFILEAkira元ボクサー、元トラックドライバーと不思議な経歴を持つ。納豆はご飯と分けて食べるタイプ。