webこんにちわ、ここ数日娘から風邪をもらい絶不調のHashiです。子供の風邪はエグいっすね。以前CanvasでExif情報を持った画像をjavascriptで調整する方法を紹介(下記関連記事)しましたが、今回はcssを使って画像の向きを調整する方法を紹介したいと思います。cssで調整する方法は環境によって正しく動作しない可能性があるので正確性を求める場合はcanvasで調整する方法がおすすめです。【javacript】Canvasで画像のExifの向きを調整する方法こんにちわ、今日も気持ちの良い天気で最高ですね。今回は仕事でCanvasで画像を扱う際にExif情報を持った...ちなみに、「Exif」って何?という方は上の前回のjavascriptの記事を参照してください。Orientationの種類Exifがもっている傾きの情報Orientationは全部8つありぞれぞれ下表のようになっています。撮影方向(Orientation)の定義1そのまま2上下反転3180度回転4左右反転5上下反転、時計周りに270度回転6時計周りに90度回転7上下反転、時計周りに90度回転8時計周りに270度回転CSSのTransformを使って調整この8つのOrientationデータをもとにcssを使って表示の調整をしたいと思います。Transformを使用するのでTransformが動作するブラウザ限定という形になります。実際にExifデータをもった画像が欲しい方は、前回も使用したサンプル画像があるので、こちらを使用してみてください。実際に各Orientationに対応したcssデータがこちらになります。top;}Orientationの値に合わせてクラス名を命名しております。Orientationの値が2であれば「.exif2」というクラス名になります。1に関しては傾きがないので何も対応しなくて大丈夫です。Orientationの値はjsのプラグインなどで取得できるので、jQuery等を併用してOrientationの値にあったクラス名を該当要素に付与するなどして対応すれば問題ないかと思います。環境によって表示位置等のずれが生じる可能性もあるので、その点は環境に合わせてカスタマイズしてみてください。まとめということで、今回はExifデータを持つ画像の向きをcssで調整する方法を紹介させていただきました。スマホサイトでユーザーの画像を使ったキャンペーン等では必ずと言っていいほどExifの問題に直面しますが、表示の調整だけならcssでどうにかなるので参考にしてみてください。それでは今回はここまで!Hahsiでした。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!noteinstagram詳しく見るプログラミングの記事一覧へ他のブログも見る人気記事2018.01.09FITNESS【ダイエット】確実に痩せたいなら、まずやるべきこと8選。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。