dreamweaver CS6では、scss,sassなどが使えません。使えないというか、コードヒントやコードカラーリングが適用されず、テキスト扱いと同様になってしまいます。
検索すれば、多くのサイトで説明されていますが、以下の作業をすればコードヒントが使えるようになります。
scssを追加する手順
1.DWの環境設定>ファイルタイプ/エディター内の「コードビューで開く」の箇所に「.scss」を追加します。(sassも使いたい場合は.sassも追加)
2. アプリケーション ▸ Adobe Dreamweaver CS6 ▸ Configuration 内の「Extensions.txt」とアプリケーション ▸ Adobe Dreamweaver CS6 ▸ Configuration ▸ DocumentTypes内の「MMDocumentTypes.xml」を編集
…
CSS3が使えるようになって、メニューボタンの背景に矢印を表示させることなどが出来るようになりましたが、IEでは効かないものもあります。
背景に矢印を入れる時は、transform: rotate(45deg);
のようにborderを回転させるのですが、このtransformがIE9では使えません。
CSS3で矢印を作る方法は、以下のサイト様が詳しく説明してくださっています。
スマートフォンサイト制作時に覚えておきたいCSS 15
リンクに矢印を表示させるHTML&CSS
HTML
<ul> <li><a href="#">List 01</a></li> <li><a href="#">List 02</a></li> <li><a href="#">List 03</a></li> <li><a href="#">List 04</a></li> <li><a href="#">List 05</a></li> </ul>
CSS
ul li a { position: relative; display: block; padding: 10px 25px 10px 10px; border-bottom: 1px solid #ccc; } ul li a::after { position: absolute; top: 50%; right: 10px; display: block; content: ''; width: 8px; height: 8px; margin-top: -4px; border-top: 1px solid #888; border-right: 1px solid #888; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
上記の例で、IE9では、transformが聞かないので、右上の角に直角にボーダーが表示されてしまいます。
解決策
ベンダープレフィックスをつければ反映される場合があるようです。 ベンダープレフィックスとは、CSSを触ったことある方ならお馴染みの「Chromeなら-webkit、FireFoxなら-moz」のような CSSプロパティの先頭につける接頭辞です。主要ブラウザのベンダープレフィックス
-moz-Firefox
-webkit-Google Chrome、Safari
-o-Opera
-ms-Internet Explorer
IE9でtransformを有効にするには、CSSのtransformの箇所に以下を追記します。
-ms-transform: rotate(-7deg);
いつまでたってもIEは気が抜けませんね(^_^;)
ブラウザ間の調整をしなくて良くなる日が来る日を願って・・・ε≡≡ヘ( ´Д`)ノ
この投稿へのコメント
コメントはまだありません。