フレークの素 | Web制作・システム開発のCreativeFlakeブログ

Googleのセキュリティブログが9月8日に発表した内容によると、今後HTTP接続には警告が表示されることがわかった。 具体的には、Chrome（バージョン56 : 2017年1月リリース予定）から、HTTP接続のサイトで、「パスワード」、「クレジットカード情報」を含むものについて、アドレスバーのところに警告アイコンが表示されるようだ。 ▼表示される予定のChromeのアドレスバー （上が現在のChrome53、下が1月リリース予定のChrome56） 今後は「パスワード」、「クレジットカード」に限らず、広くHTTP通信には警告が表示されることも予想される。 HTTPS化に対応していないサイトは年内を目標に対応することをおすすめする。 Googleセキュリティブログ（英文） 【Googleセキュリティブログ　全文訳】 ユーザーがWebブラウザを安全に使えるようにするため、Chromeはアドレスバーにアイコンで接続セキュリティを表示する。これまでChromeは安全でなくても、HTTP接続に特に表示はしなかった。2017年1月（Chrome 56）からGoogleでは、安全でないすべてのHTTP接続サイトをマークする長期計画の一部として、安全ではないパスワードやクレジットカード情報を送るHTTPサイトをマークすることになった。 Chromeは現在、中立的な指標でHTTP接続を示している。これはHTTP接続において安全性が不足しているという事実を反映していない。ユーザーがHTTPの上のWebサイトを読み込む時に、情報がユーザーに届く前にネットワークの他の誰かがそのサイト閲覧したり、修正できうる。 Webトラフィックの大部分はこれまでにHTTPSに移行させ、HTTPSの利用が現在も増えている。Googleでは、現在HTTPS上に提供されたChromeデスクトップページ読み込みの半分以上でマイルストーンを打ってきている。さらに、2月にGoogleがHTTPSレポートをリリースしてから、トップ100中の12以上のWebサイトが、デフォルトページ指定をHTTPからHTTPSに変更してきた。 これまでの研究で、ユーザーが警告としての「安全」アイコンの不足に気づいていのだけれども、頻繁に警告が表示されると気にしなくなるということが分か...

ドット絵（ピクセルアート）は1980年代ごろのパソコンやゲーム機で、最もよく使われた画像の表現方法でしたが、パソコン等の高解像度化にともなって、ドット絵を使われることはほとんどなくなりました。 以前は解像度が低かったため、写真や画像を今のようにきれいに表示することができなかったので、ドットで描画することが主流でした。目で見てピクセルだと分かる範囲がドット絵と呼ぶそうです。 今だからこそ逆に斬新、かわいいと思うこともあるのですが、せっかくなのでドット絵をCSSだけで描画したいと思います。 もちろん、こんなチョコボを描くことも余裕でできます。 ドット絵に使うCSS HTMLやCSSを使って描く表現方法はさまざま考えられますが、今回は「box-shadow」のみで描いていきたいと思います。 box-shadowでドットを描く HTML <div></div> まずHTMLには空のdivを用意してあげます。これだけでHTMLは完成です。 CSS div { background: transparent; width: 10px; height: 10px; box-shadow: 0 10px red, 10px 20px blue, 20px 10px green; } CSSは基点＜（0, 0）の場所＞をtransparent（透明）とし、基本となるドットの大きさを縦、横ともに10pxずつと設定します。 そのときに、基点から下へ10pxの箇所に赤いドットを、右へ10px、下へ20pxの箇所に青いドットを、右へ20px、下へ10pxの箇所に緑のドットを描画します。 ↓↓↓こんな感じで表示されます 本来box-shadow（ボックスシャドウ）は指定した要素に立体っぽく影をつけるCSSなのですが、ぼかし具合を入力しないことでゼロ、つまりただの直線として認識されます。 ざくざく作っていこう こんな感じで、ドット絵を書いていくには元画像を準備し、ピクセル単位で描画していきます。 チョコボを描く（HTML） <div id="chocobo...