そのほかメモ的なものとかをこちらにまとめます。
上記はページ内リンクです。気になる項目をクリックしてチェックしてください。
なお、CSS3が普及することで、いままでjsなどと組み合わせないとできなかったことが、CSSのみで実現可能になったりしています(ユーザの環境選ぶけど)。
たとえば、アニメーションやタブ切り替え、アコーディオンやモーダルウィンドウなど、CSSだけでも実現可能です。
ネットに作り方などがおちているので、google先生に訊いてみてください。
ただし、CSSよりもjsの方が動作が速い場合が多かったり、jsと組み合わせた方がソースがシンプルになる(管理が容易になる)といったことなどもあるので、状況によってCSSのみでいくか、jsと組み合わせるか選択してみてください。
スマートフォン向けのコーディングは、サイト構築にとどまらず、アプリのモック版を作ったりすることもあると思います。
アプリの開発そのものは専門の担当者が行うことが多いでしょうが、それでもHTMLコーディングでモック版を作った責任者として、実際のアプリでの表示確認をしたいこともあると思います。
とはいえ、実機を持っていなかったり、会社側のセキュリティ上のルールで個人の端末を社内に持ち込めないうえにテスト用端末の数が少なく、検証に時間がかかるということもよくある話です。
そこで、PCでAndroidアプリを動かす方法をご紹介します。
残念ながら、WindowsPC上でiOSアプリを動かす方法はないようです(正確には開発はともかく、動きを見たい程度であれば可能っぽい)。→参考
Mac端末をお持ちであれば、そちらを活用する方法をGoogle先生に訊いてみてください。
ちなみに、Windows10ではAndroidアプリやiOSアプリを動かすことができるとのうわさ・・・。
開発とまではいかなくても、動きの確認程度であれば便利そうですね。
metaタグのhttp-equiv="X-UA-Compatible"についてですが、この資料を作った企業では、IE10が登場したあたりからcontentの値を明示して、IE7や8など古いブラウザに合わせて表示するように設定していました。
当初IE10では初期モードでFlashが表示されなかったり(ユーザがFlashに対応するモードに変更すれば表示された)、いろいろ問題があったからです。
しかし、IEも最新ブラウザを使う人が増えてきていたり、ツイートボタンの仕様が変わって古いブラウザに合わせているとボタンが表示されなくなって来たりしたので、この設定をやめることにしました。
お勤めの企業やクライアントによって、この辺りをどうするかというのはそれぞれだと思うので、それぞれの事情に合わせて適宜設定しましょう。
ちなみに、最新のレンダリングをさせるようにするには、
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
と記述します(最後のスラッシュはdoctypeによって、適宜不要であれば外してください)。
これにしておけば、使用しているIEのバージョン(にとっての最新)のドキュメントモードで表示する(レンダリングする)ようになります。
さて、ここで問題になるのは、HTML5でX-UA-Compatibleの設定は必要なのかどうかという問題です(そもそもX-UA-Compatibleの設定自体、ブラウザのバージョンを限定しないのであれば不要なのかもしれませんが)。
このあたり、世間でも判然としないという感じ・・・。まぁ、IEに対してのみの設定なので、バリデートエラーが返ってきたりもしますし、一応IEの開発は終わりになりますし、そのうち不要だよっていうのが世のトレンドになりそうですが。
Microsoft EdgeではX-UA-Compatibleは無視されるようです。
<参考>徐々に明らかになる次期 Internet Explorer の新機能 - Hebikuzure's Tech Memo
ようやく世間的にも(MS的にも)IE6がなかったことになりつつありますが、大人の事情により、IE6はじめ古いIEにも対処しなくてはならない場合もあるかと思います。
全てを叶えることは無理ですが、古いIEでも多少はCSS3的な表現を可能にする手段がいくつかあるので、ご紹介しておきます。
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプト(htc)です。
jsのようにhtmlの中で外部ファイルをscriptタグを使って呼び出すのではなく、cssでbehaviorプロパティを使ってhtcファイルを指定します(ルート相対パスで指定)。
使用したいhtmlファイルと異なるサーバーにhtcファイルがあると使えなかったり、背景にグラデなどのCSS3を適用させたい場合はbackgroundプロパティに-pie-つけないといけなかったり、なんかうまくいかないときはposition:relative;を追加してみたり、あんまり複雑なグラデはできなかったり、いろいろ制約はありますが、それなりの表現ができると思います。
その他類似プラグイン(詳細はgoogle先生に一任)
古いIEでもCSS3セレクタに対応させるプラグインです。
cssは外部ファイルに記述しなければならない(styelタグ内に書いても機能しない)とか、ローカルで確認できない(要サーバアップ)といった制限があるみたいです。
古いIEだと透過画像が扱えないので、それを扱えるようにするプラグインがあります。以下が代表的なもの(と使いかた)です。
HTML5のcanvasタグの互換機能を提供するjsプラグインです。canvasをVML/Silverlight/Flashでレンダリングしているらしいです。ExplorerCanvasをヒントにしているのだとか。
なお、VMLはIE10でサポートされなくなったそうです。FlashはchromeやFFなどで排除の動きがありますが、IEやEdgeではどうなんですかね・・・。というわけでSilverlightで描画させるのが妥当なのかなぁと思います(でもSilverlightも2021年10月12日にサポート終了とか言ってる・・・それまでにcanvasタグを使えないブラウザのシェアがほとんど無視できるぐらいになっていれば良いですが・・・)。
プラグインを使わなくても、昔からあるIE独自のCSSプロパティを使えば、なんとかなるものもあります(あの頃他のメジャーになりつつあるブラウザと互換性ないから無視されまくったあいつらです)。
たとえばfilterプロパティを使えばopacity的な表現やグラデーション、回転などに対応できます(CSS3のfilterプロパティとはまた別な話)。先にご紹介したCSS3 PIEでも使用したbehaviorプロパティもIE独自仕様です。
直接のCSS3対策ではないですが、IE特有の諸問題を解決するためやCSS3代替デザインを適用するために、その部分だけ別のCSSをあてたいときにちょっと使える便利なやつです。
ただし、これを使うとweb標準的に正しい記述ではなくなってしまったりするので、できれば使わないほうが良いです(新しいブラウザが出てきたときにトラブルの原因になることもあります)。
まとめ的な情報です。
CSS3の範疇ではないですが・・・
html5.jsとかhtml5shivを紹介しているところもありますが、個人的には必要ないんじゃないかなぁと思っております。というか、入れてるけど使えてないサイトが結構ある・・・。
あと、条件付きコメントはIE10以降からサポートしなくなっているようなので、クロスブラウザを意識しているなら使わないほうが良いと思います。IE9以前のブラウザだけを対象にしているwebページなら良いと思いますが。
古いブラウザでも(できるだけ手間をかけずに)最新のブラウザと同じように表示したいというのが、制作側の人情かと思いますが、それってそんなに大事なのか?と疑問を持つことも大切です。
プロとしてのこだわりも大事だけど、本当にこだわるところは角丸を描画することなのか?
デザインと寸分違わず表示できていることが、ユーザーが求めていることなのか?もとのデザインをユーザーは知らないけども・・・
最新ブラウザと古いブラウザの表示の違いを見比べるユーザーは世の中にどれぐらいいるのか?
古いブラウザだけ画像にしたり、プラグインを使ってみたり、そんな手間をかけた分だけユーザーに伝えたいことは伝わっているのか???
ボタンが角丸でなくても、背景がグラデーションでなくても、デザイナーさんがしっかりとしたコンセプトのもとにデザインしたwebページは十分に美しいし、みやすいし、何よりも伝えたいことがしっかり伝わっている、目的の物事にちゃんと誘導できている・・・そうであれば何が問題なんでしょうね。
なにも問題ないと思うんですけどね。
突き放して言っちゃうと古いブラウザを使っているユーザーは自己責任の範疇だとおもいます(まぁOSのバージョンがメーカーのサポート範疇だけど古くて最新ブラウザは使えないというなら突き放しちゃうのはアレかと思いますが)。
最新ブラウザでちゃんとデザイン通りに表現されていて、古いブラウザでは角丸が丸くないぐらいなら、もういいんじゃないかなーと。
プログレッシブ・エンハンスメントという考え方もあることですし。
どうせ時間をかけるなら、伝えたいことを伝えられているか、目的のところにストレスなく誘導できているかを精査したほうが良いのではないかなー。