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

10月22日（土）に都内の小学校の保護者、教職員の方々を対象に、インターネット、とりわけスマートフォンの安心安全な使い方の講演会をさせていただきました。 これは総務省と文部科学省のサポートにより、全国の学校、団体、地域へ出張して講演を行う、出前講座の「e-ネットキャラバン」の活動です。 講演はどんな内容か 講演は通常45分〜90分ほどの内容です。 パソコンのみならず、スマートフォンも手軽に便利にインターネットを楽しんだり、学習のツールとして使用することのできる便利なものですが、判断力の不十分な子どもたちにとって、スマートフォンの使い方を誤ると、取り返しのつかない事態になってしまうことがあります。 実際社会問題として、 ・スマホ依存症 ・歩きスマホ ・スマホによるいじめ ・LINEやSNSの炎上問題 ・傷害暴行事件、性的被害事件 ・詐欺事件 など、様々な問題が毎日のように起こっています。 これらを未然に防ぐべく、弊社も制作開発を行う、作り手として、e-ネットキャラバン講師として参加させていただいております。 学生向けと大人向けの講座 学生向けとしては小中学生と高校生向けの内容、大人向けとしては保護者教職員を対象とした内容で開催しています。 費用 この講座の講師派遣かかる費用、謝礼、交通費は不要です。 ですので、毎年小学5,6年生を対象に行いたいということでご依頼もできます。 申込方法 申し込みはe-ネットキャラバンの 「講座内容と受講方法」 をご覧になった上で、 「Web申し込みフォーム」 よりお願いします。 Written by Creative Flake

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...

PhotoshopやIllustratorなどで、太文字を書きたいとき文字がつぶれて見づらいことはありませんか？ つぶれ文字の場合 文字がつぶれてしまった場合の多くは、 ・ボールド「B」で太くしている ・枠線をつけて太くしている こういうケースが多く見られます。 これは、元の文字の外側に太線をつけるため、スキマが埋められてしまうことでつぶれて見えるためです。 つぶれない文字にするには 文字をつぶさないようにするには、文字そのもののウェイトで調整します。 ウェイトというのは「太さ」という意味です。 例えば、「●●ゴシック-M」とか、「▲▲明朝-W3」などという、フォント名の最後にアルファベットや数字がついているのを見たことはありませんか？ まずはフォント（文字）を選ぶ際に、ウェイトのバリエーションが存在するかどうか確認してから使うことをおすすめします。 太字にできる無料の日本語フォント そもそもどんなフォントが太字のバリエーションがあるのか、今回は無料の日本語フォントを紹介します。 M+フォント やや丸みのあるやさしいイメージのゴシックフォント。 極細から太字までフォントウェイトがあります。 【ライセンス】商用・非商用可。利用、複製、再配布可能。 配布サイトでダウンロード Kazesawaフォント こちらも丸みのある、認識性の高いフォントです。 エクストラライトからエクストラボールドまで6種類のウェイトがあります 【ライセンス】SIL Open Font License準拠 配布サイトでダウンロード 源ノ角ゴシック AdobeとGoogleが共同開発したオープンソースのフォントです。 エクストラライトからヘビーまで7種類のウェイトがあります 【ライセンス】SIL Open Font License準拠 配布サイトでダウンロード Rounded M+ 丸ゴシックのかわいい感じなのに品のあるのフォントです。 また、「標準」、「丸さ強め」、「丸さ弱め」からも選んでダウンロードが可能です。 【ライセンス】商用・非商用可。利用、複製、再配布可能。 配布サイトでダウンロード Written by Cr...

夏休みはスマホを持ってポケモン探しに出かけよう！という子どもから大人まで多いのでは？ 便利で楽しいスマホですが、今後はスマホ利用に関する問題が多く出てくるのでは、と危惧されています。 特に、小学生や中学生のお子さんをお持ちのご家族の方は危険なトラブルに遭わないよう、注意が必要です。 危険なトラブルに遭わないために、スマホのルールを作ろう 便利なスマホが一転して危険なものや、人を傷つけたり、時にはいじめ問題にもつながりかねません。 そこで一度ご家庭でスマホのルールを作りましょう。 たとえば、 ・決めた時間・場所以外ではスマホを使わない ・迷惑メールは無視する（開封しない、決して返事をしない） ・LINEなどのコミュニケーションアプリでは相手を傷つける発言をしない ・課金については家族のルールを決める などです。 フィルタリングサービスを利用しよう また、 一般社団法人電気通信事業者協会 では、スマホを安心・安全に使うためのルール作りとして、フィルタリングサービスを推奨しています。 フィルタリングの設定方法はこちらから。 今後も増える可能性アリ　ポケモンGO関連トラブル もうすでに世界ではポケモンGO関連のトラブルがいくつも発生していますが、利用方法さえ正しく守れば楽しく遊べるゲームです。 内閣サイバーセキュリティセンター（ＮＩＳＣ）のＨＰに注意喚起が掲載されているので、　是非ご一読ください。 内閣サイバーセキュリティセンターからポケモントレーナーのみんなへおねがい♪ ちなみにポケモン発売当時の1996年に家にあったのは、「緑」でした。 Written by Creative Flake

バッグに入れたはずのスマホが・・・。 あれ？　ポケットにもない！？　え？？ホントないんだけど！　ええええええええ！！！！！！！！！！！！！！！！ ってなる前に読むと、落ち着いてスマホが探せますよ。 もちろん、今まさにスマホないっぽい！人も参考に。 ※Androidユーザのみです。 まずはGoogleのマイアカウント「ログインとセキュリティ」にアクセス １． 「ログインとセキュリティ」にアクセスしましょう。 ２． 「スマートフォンを探す」から、なくした or なくしたっぽいスマホを見つけます。 3. 登録している端末を選択 この「ログインとセキュリティ」からできることは6つあります。 ① スマートフォンをロックする ② スマートフォンに電話をかけてみる ③ スマートフォンでログアウトする ④ 携帯通信会社に連絡する ⑤ 最寄りの遺失物取扱所に連絡する ⑥ 端末のデータの消去を検討する スマートフォンをロックする こんなときにおすすめ↓↓↓↓↓ 普段ロックかけてない人。まずはロックしとけば勝手に中身見られないだろう！！ １． 「スマートフォンをロックする」を選択 2. ロック解除用のパスワードを入力（必須） 3. 発見者に読んでもらうメッセージを作成（任意） 4. 発見者に電話してもらう連絡先を入力（任意） ▲ロック用のパスワードを入力して「ロック」すると ▲ロック完了です。 ▲スマホ側でもちゃんとロックされていました。 スマートフォンに電話をかけてみる 探したんだけど見つからない。 「ログインとセキュリティ」ページ 右上の「着信音を鳴らす」からは、着信音最大音量でスマホを鳴らせます。 まずは携帯に電話してみよう。 固定電話や他の携帯がない場合は、チャットツール（LINE、ハングアウトなど）の電話機能も使ってみて！（とGoogleは言っています。） スマートフォンでログアウトする PCなどからスマートフォンのGoogleアカウントをログアウト。 知らない人にアドレス帳を見られたり、何かを購入されてしまったりするのを防ぎましょう。 携帯通信会社に連絡する ここまで結構探したんだけどやっぱないわ。 という人は契約している...

使用度の高い白とグレーを使った、無料でダウンロードできる背景パターンを集めました。 定番・王道パターンから、最新トレンドのパターンまで素敵なパターンをまとめています。 大きめ白菱型パターン 立体感のあるグラデーションの白菱型パターンはふんわりとした印象にも、ラグジュアリーな印象で、美容系やウェディング系にも使える素材。 大きめ白菱型パターン素材のダウンロード 小さめ白菱型パターン こちらも自然な感じに立体感のある白菱型パターン。背景はもちろん、ボタンの一部にしても使えそうなおしゃれな素材。 小さめ白菱型パターン素材のダウンロード 四角なパターン 幾何学的な空間のような四角モチーフのパターン。奥行き感があって、Web素材にも印刷用素材にも使えそう。 四角なパターン素材のダウンロード ネットワークなパターン 点と点を線でつないだ、ネットワークのような格子状パターン。スタイリッシュな印象にぜひ。 ネットワークなパターン素材のダウンロード 六角形のシームレスパターン 六角形をモチーフにしたつなぎ目のない、シームレスパターンです。色を変えたり、透過度を変えてみてアートな印象にも。 六角形のシームレスパターン素材のダウンロード 四角格子のパターン ドットでつないだ四角形の格子のパターンは、かわいい感じに。 四角格子のパターン素材のダウンロード 白のポリゴンパターン 自分で描くと結構大変なポリゴンパターン。数年前から人気継続中です。 白のポリゴンパターン素材のダウンロード 白のポリゴンパターン 上のポリゴンパターンとはちょっと違う、折り紙を折ったようなパターン。人とは違うポリゴンを探していたという方はぜひこちらを。 白のポリゴンパターン素材のダウンロード セールっぽい放射状のパターン 白い放射状はクリーンでおしゃれ。中心を引き立てたいときにも、背景にももちろん。 セールっぽい放射状のパターン 三角形のパターン どんなイメージにも使えそうな三角形のパターン。ちょっとした色のアクセントでさらに目を引く印象に。 三角形のパターン素材のダウンロード Written by Creative Flake