IE10は、二つあります

投稿日: 作成者:

今、Windows8　customer preview版が利用できます。

そして、6月上旬には、メディアリリースが発表される予定です。

先日参加しましたMicrosoft Developer Daysに参加したときに話がありました。

この時に、IE10が二つあることを知りました。

Windows8に搭載されているIE10は、Metroスタイル・アプリ版とデスクトップ版の二つが搭載されています。

そして、Metroスタイル・アプリ版のIE10は、フリープラグインとなっていますので、各種プラグインが動きません。

フラッシュなどは、利用できません。

ただし、デスクトップ版のIE10は、プラグインを利用できます。

また、Windows7版の　IE10がリリースされる話があるそうですが、リリース時期は未定とのことです。

IE10からW3Cの勧告をかなり取り入れて来まして、JavaScript、CSS共に使えるものが増えてきました。

ドラえもんのデモを見ましたが、シャドウ効果も反映されていて綺麗に見ることが出来ました。

IE9までは、シャドウが使えないなど色々とクロスブラウザでウェブページを作るときに悩みの種でしたが、IE10になったら、ほぼ大丈夫のようです。

 

PIE.htcは、便利だけど

投稿日: 作成者:

PIE.htcは、IE8以下でも角丸表示　border-radius　を反映させるときに便利です。

でも、反映されないときが、あります。

調べたところ、PIE.htcは、サーバーによって動かない場合があり、その場合は、.htaccessファイルで定義する必要があります。

そのため、何処にアップロードされるか分からいサイトを作るときは、お勧めできません。

こちらのブログの記事も、参考になります。

http://css.microrza.com/csstips/iecss_css3pie/

 

 

IEの互換表示モードにハマらないためにも

投稿日: 作成者:

IE9の機能を発揮するお呪いを発見しました。

 

<meta http-equiv="X-UA-Compatible" content="IE=9" />

IE9の表示モードを使うときに、必要な一文です。

IE8が読み込んだ時は、IE8のモードになります。

ネタ元のブログは、こちらです。

http://blog.goo.ne.jp/akkie13/e/e444a8391a57f9c5a71e8ac4d1d3420b

http://paro2day.blog122.fc2.com/blog-entry-695.html

簡単にツイートボタンを設置できるソースコード

投稿日: 作成者:

ツイートするURLや記事、アカウントを省略する形でも、twitterに設置されているURLとタイトルが挿入された形で投稿できた。

これなら、利用できます。

どこにアップされるか分からない状態でサイトを作らないといけないから大変です。

ソース掲載します。

twitterのソースで指定する各項目の中で省略できるものがありますので、応用しました。

<a href=”https://twitter.com/share” data-lang=”ja”>ツイート</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

 

こちらのブログの作者の方の記事が、参考になると思います。

http://yaburekabure.com/computer/button.html

http://www.ideaxidea.com/archives/2011/12/how_to_add_share_buttons_on_tumblr.html

http://www.koikikukan.com/archives/2011/12/10-025555.php

ツイッターアカウントが無いけどツイートボタンを設置したい時に・・・

投稿日: 作成者:

今日、ツイッターのアカウントが無いけどホームページにツイートボタンを設置したいという要望があり、ネット検索していました。

すると、新しいツイートボタン設置のソースで、twitterアカウントの項目は省略可能いうことを知りました。

今までtwitterアカウントを持っているから、そのアカウントを入力していましたので、省略可能と知らず、今回大発見した気分です。

こちらのブログのライターさんが、ソースの解説をされています。

ぜひ、読んでください。

http://foobarbox.info/2012/01/10/753/

 

IE9では表示できるのに、IE8は何をしても角丸表示できないみたい

投稿日: 作成者:

私は、chrome、firefox、IE9で、角丸表示できる方法を調べて、下記のfacebookページでも活用しています。

http://on.fb.me/rTtdzT

 

そして

https://www.facebook.com/pages/AtelierMIRACLE/367491809936061

ここで角丸表示しているCSSの設定を公開します。

ｈ１タグにCSSで角丸表示とシャドウ設定をしています。

実際の表示例は、ぜひ、上記のリンク先のページを見てください。

h1 　　　{ 　　　height:30px;
               margin-left:5px;
               padding-top:12px;
               text-align:center;
               font-size:16px;
               background-color:#00FF00;
               /* 角を丸くする */
              border-radius: 20px; /* CSS3 */
              -webkit-border-radius: 20px; /* Webkit */
              -moz-border-radius: 20px; /* Mozilla */
              /*　影を付けます */
              box-shadow: 5px 5px 5px #ccc; /* CSS3 */
             -moz-box-shadow: 5px 5px 5px #ccc; /* Mozilla */
             -webkit-box-shadow: 5px 5px 5px #ccc; /* Webkit */
              }

 

この

border-radius: 20px;

でIE9で角丸表示できるようになります。

しかし、IE8の場合は、このCSSの指定が出来ません。

IEでHTML5の要素を使えるようにできる方法として、IE9.jsやHTML5.jsを使う方法があります。

しかし、この方法でもIE8で角丸表示やシャドウ効果を表示することは出来ませんでした。

IE9.jsの実装方法は、下記のブログの記事がお役に立つと思います。

http://internet-explorer9.info/other/564/

上記のブログに書かれていますIEの分岐の部分でIE8とありますが、これは、IE8以下なら対応するという意味になります。

IE8でしたら、この条件が当てはまるので、角丸表示に対応できると思ったのですが、ダメでした。

不思議です。

これまでIE9でCSS3対応させて、グラデーション表示させる方法など模索してきましたが、まさか、現場でIE8があるとは想定していなかったで・・・

IE9以前のブラウザの対応も考慮に入れて作らないといけないですが、簡単な視覚効果で角丸BOXやシャドウを使いたいときに、IE9なら表示できますという説明ではクライントにも申し訳ないです。

角丸表示のコードを自動で生成するジェネレーターは、こちらが使いやすいと思います。

IEはバージョン9から対応のジェネレーターも、あります。

http://www.css3maker.com/

使い方や、CSS3で作るボタンの記事などは、下記のブログの記事がお勧めです。

http://www.lifehacker.jp/2010/08/100820_css3maker.html

IE9以下のバージョンで、CSS3の効果を実装する方法は、下記のブログが参考になると思います。

http://shoonm.com/2010/03/html5css3.html