インラインCSS記述で画像を回転表示させる方法.png
HTMLタグにインラインCSSを追加して、
少しだけ表現力をアップさせる試みの第二弾!!


前回は、画像を重ね合わせて表示する方法をやってみました。

http://digitalkoukisin.seesaa.net/article/249746272.html右向き三角1画像を重ね合わせて表示するインラインスタイルシートの記述方法

今回は、画像を回転表示させるテクニックを調べてみました。
 

style属性にtransformプロパティを指定して画像回転!


<img>タグに「style属性」を追加して、「transform: rotate(角度)」を指定すると画像を回転できることがわかりました。

http://www.htmq.com/css3/transform_rotate.shtmlHTMLやCSSについて詳しく掲載されています。
右向き三角1transform:rotate()-CSS3リファレンス


これを使って実際に記事中でテストしてみたのですが、最初はその効果が確認できませんでした。さらに調べてゆくと、「ベンダープレフィックス」という記述を付けないと動作しない機能があることがわかりました。

http://www.htmq.com/csskihon/603.shtmlベンダープレフィックスについて解説されています。
右向き三角1ベンダープレフィックス-CSSの基本


下のテーブルは、transformプロパティの各ブラウザでの対応状況を表したものです。
Can I use... Support tables for HTML5, CSS3, etc-1.png
各ブラウザ最新版では、Firefox以外はベンダープレフィックスが必要になります。

http://caniuse.com/#search=transformCSS3×各ブラウザの対応状況を調べることができます。
右向き三角1Can I use... Support tables for HTML5, CSS3, etc

わたしは普段「Safari 6」を使用していますが、ベンダープレフィックスの「-webkit-」を付けないと表示できないことがわかります。
最初に効果が確認できなかったのは、ベンダープレフィックスを付けていなかったのが原因だったのですね。

それでは、実際にstyle属性にtransformプロパティを指定すると、どうなるのか見てみましょう。

「transform: rotate(角度)」指定による表示結果の確認


  • 元画像
lionサンプル画像のライオンのイラストは、
「イラストポップ」さんからダウンロードしたものを掲載させていただいています。
右向き三角1ライオンの無料素材-イラストポップ

<img border="0" alt="lion" src="lion_a13-81c00.png" width="200" height="189" />



  • ベンダープレフィックスを付けない場合
lion・Firefoxは時計回りに90°回転
・IE、Chrome、Safariは回転しない
(各ブラウザ共に最新版の場合)

<img style="transform: rotate(90deg);" border="0" alt="lion" src="lion_a13-81c00.png" width="200" height="189" />



  • ベンダープレフィックス「-ms-,-moz-,-webkit-」も付け、各ブラウザに対応させた場合

lion・IE、Firefox、Chrome、Safariの各ブラウザ共に時計回りに90°回転
(各ブラウザ共に最新版の場合)

<img style="transform: rotate(90deg);-ms-transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);" border="0" alt="lion" src="lion_a13-81c00.png" width="200" height="189" />

ベンダープレフィックスを付けると、正しく機能していることが確認できます。

画像を傾けて、記事にちょっとした演出を!


今回、この画像回転のテクニックを学ぶきっかけになったのは、これをやってみたかったからです!
バッジ画像の回転.png
このような配置のデザインを見かけることがありますが、やっぱりちょっと傾いていた方が自然な感じがしませんか!

http://kodawarigoods.jugem.jp/?eid=86右向き三角1【限定2,000セット】Holmegaard / Flora ベース ~2pcs set Medium & Long 6,300円が4,800円で!~ | デザイン雑貨・インテリア雑貨でシンプルライフを楽しもう!


まとめ


CSS3という仕様はまだ正式に勧告されていないようです。

現状、CSS3で採用される予定の機能を各ブラウザが先行実装していて、それらの機能を動作させるにベンダープレフィックスを付ける必要があるということがわかりました。

今回、この記事の投稿に当たり、ネットで調べながら書き進めてきた訳ですが、わかりやすい情報がびっしり詰まったサイトがたくさんあり、とても参考になりました。情報提供ありがとうございます。

私個人的には、だいぶ時間をかけて丁寧にこの記事を作成したつもりです。今後も、素人目線で捉えたわかりやすい記事の作成と、ブログ演出を「楽しく、簡単に!」できるような工夫を考えて行きたいと思います。

最後に、今回のテーマ以外にも興味をひくWEBテクニックをいろいろ発見しました。

例えば、
http://coliss.com/articles/build-websites/operation/css/833.html右向き三角1[CSS]Lightbox風エフェクト+画像拡大をCSSで実装するスタイルシート | コリス

http://css.eweb-design.com/1402_kh.html右向き三角1少し凝った見出し(左揃え) - スタイルシート・サンプル

http://css3button.net/右向き三角1CSS3 Button Generator

などなど。

すごいテクニックがいろいろあるんですね!
つぎは、こういうのにもチャレンジしてみたいと思います!

最後までお読みいただきましてありがとうございます。
にほんブログ村 IT技術ブログへ
スポンサード・リンク