PlusOne Blog

昨今、IEをサポートしてないことが多いですが、
（プラスワンもIEについては非サポートです）
稀にIEを使用するケースがあります。

　
最近も久しぶりにIEを触る機会があり、その時に「display:flex」が効かなくてハマってあせったことがあったので、その時のことをメモ代わりに。

　
次のようなコードで、

<div class="logo_content">
　　<h3>■■■■■■■■■■■■■■■</h3>
　　<div class="logo_dark">
　　　　<div class="rs_news">
　　　　　　<p>○○○○○○○</p>
　　　　　　・・・
　　　　　　<p>○○○○○○○</p>
　　　　</div>
　　　　<div class="rs_news">
　　　　　　<p>○○○○○○○</p>
　　　　　　・・・
　　　　　　<p>○○○○○○○</p>
　　　　</div>
　　　　<div class="rs_news">
　　　　　　<p>○○○○○○○</p>
　　　　　　・・・
　　　　　　<p>○○○○○○○</p>
　　　　</div>
　　</div>
</div>　　　　　　

クラス.rs_news を横並びに配置したいので logo_dark に display:flex を設定したが…

.logo_dark {
    display              : flex;
    flex-flow            : row wrap;
    justify-content      : space-around;
    align-items          : flex-start;
  }　　　　　

chromeなどのモダンブラウザでは、想定どおり横並びで綺麗に配置されたが、
IEでは、うまく表示されない。
　
調べてみると、親要素である .logo_content の display が block でないと、
flex が、うまく効かないみたいなので、次のようにstyleを設定したら、
IEでも、うまくいった。

.logo_content{
    display              : block;
  }　
.logo_dark {
    display              : flex;
    flex-flow            : row wrap;
    justify-content      : space-around;
    align-items          : flex-start;
  }　　　　　

どうやらIEのバグらしいが、なかなか解決方法が分からず、あせった！
早く、完全にIEに対応しなくて良い日が訪れて欲しい！（笑）

先のblogで、ラスター画像とベクター画像について説明しました。
　
ラスター画像には、.jpgと.pngというファイル形式があります。
これらのファイル形式の特徴とどういったときに使用するのかについて説明します。
　

　
　
■jpg
jpgは、Joint Photographic Experts Groupの略であり、画像を圧縮するファイル方式のひとつです。 圧縮率が高く、フルカラー（約1,677万色）の画像を扱えるため、デジカメ写真の記録に使用されることが多いです。
逆に、jpgは色数が少ないものは綺麗に表示できません。例えば、背景が１色で文字がある場合、文字の周囲にノイズが出たりします。
　
jpgの大きな特徴としては、jpgに変換するたびに画質が劣化してしまうことです。
　
　
■png
pngは、Portable Network Graphicsの略であり、画像のフォーマット方式のひとつです。 圧縮をおこなっていないので、基本的に画質が高いです。特に、テキストや線画など色の境界がはっきりした画像に適しています。
　
pngは、jpgと違い、pngに変換するたびに画質が劣化してしまうことはありません。
また、pngは透過に対応しており、背景を透過させたりすることができます。
　
　
■Webで使う場合は、jpgかpngか？
「写真はjpg、ロゴやイラストはpng」
Webに載せる画像は、ファイルサイズが小さい方が良いので、基本的にjpgを使用した方が良いです。
ただ。上記のようにjpgでは、直線や塗りつぶしで構成されている部分が多いイラストやロゴなどはノイズが発生しやすいので、pngを使用します。

画像オブジェクトには、「ベクター画像」と「ラスター画像」の２種類の形式があります。
それぞれの形式には、良いところ・悪いところがありますので、用途によって使い分けましょう。
　
　
■ベクター画像
点と点を直線や曲線で繋いで画像を描いている画像です。

Photo printcnx.com

この点をアンカーとかコントールポイントとか呼んでおり、
点（アンカー）の座標や曲線の曲率などを数値として設定・管理しています。

このベクター画像編集ソフトとしてよく聞くのが「Adobe Illustrator」です。

線と点で書いているので、画像がシャープに描けます。イラストや文字・ロゴなどに使うことが多いです。
拡大（縮小）しても、線を伸ばすイメージで綺麗に拡大(縮小）できます。
　
　
■ラスター画像
点をたくさん並べて画像を描いている画像です。（写真などになります）

Photo printcnx.com

この点を画素とかピクセルとか呼んでおり、
点（画素）の色や会長などを設定・管理しています。画質は、点の密度（一定の長さあたりの点の数（ピクセル数））によって決まります。これがよく聞く「解像度」というものになります。
密度が高いと（解像度が高いと）、より綺麗な画像となります。

このベクター画像編集ソフトとしてよく聞くのが「Adobe Photoshop」や「GIMP」です。（俗に、ペイントソフト、お絵かきソフトと言われるものです）

並べた点の個々に、色・色調などを調整して繊細な画像になります。その分、どうしても画像の端は凸凹になり（ジャギーって言われます）、シャープにはなりません。
拡大（縮小）しても、点の数は変わらないので、密度が低く（解像度が低く）なり、画像が荒くなってしまいます。

twitterやInstagramなど、色々なソーシャルメディアがあります。

プロフィールを作ったり、投稿したりするときに、画像や動画のサイズはどれくらいにしたら良いのか迷った経験は誰もがあるかと思います。

それらのプロフィール画像や投稿動画・画像の最適なサイズをまとめたサイトがありましたので紹介します。

「Image and Video sizes for Social Media.」というサイトです。

ぜひ、参考にしてみてください。

Adobe XD, Figma, Sketch, Photoshop用のファイルもダウンロードできて、便利です。

==================

主なソーシャルメディアの最適な画像・動画サイズ

Microsoftから、IE11（Internet Explorer 11）サポート終了までのスケジュールが発表されました。
https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666

===================================
2020年11月30日、Microsoft TeamsのWebアプリはIE11をサポートしなくなります。
2021年3月9日、Microsoft Edge Legacy（Windows10のデフォルトブラウザ）をサポートしなくなります。
2021年8月17日、Microsoft 365のアプリとサービスはIE11をサポートしなくなります。
===================================

★→弊社は、従来よりWEBアプリ、ホームページともにモダンブラウザ（chrome,safari等）を推奨しており、
Internet Explorer 11やMicrosoft Edge Legacyは推奨しておりませんが
今回のMicrosoftからの発表により、より積極的にモダンブラウザへの切り替えを勧めて参ります。