広告関係4団体「新しい働き方」円卓会議、広告制作取引「受発注」ガイドラインを策定。
広告業務に携わる関係者全員がこれまでの働き方を見直し、長時間労働を抑制するための取り組みとして、公益社団法人日本アドバタイザーズ協会、一般社団法人日本広告業協会、一般社団法人日本アド・コンテンツ制作協会、公益社団法人日本広告制作協会の広告関係4団体は「新しい働き方」円卓会議を第2回（12月8日）、第3回（1月11日）と開催し、「広告制作取引『受発注』ガイドライン」を策定いたしました。
広告制作業務における長時間労働削減のためには、受注/発注側の両者がお互いの立場を尊重し、業務を進めることが重要です。
このガイドラインは制作費や納期などの発注内容を事前に明確にし、適切なスケジュール管理のもと業務管理を行い、受注/発注両者が長時間労働の抑制に取り組むことを目的としたものです。それらを「受発注確認書」として電子メールで取り交わすことをルールといたしました。
var box = document.getElementById("box") fetch("logo2.svg") .then(function(response) { return response.text(); }).then(function(svg) { box.innerHTML = svg })
css3のアニメーションでフェードインなどを表現する場合、「display:none」から「display:block」ではアニメーションを効かせる事が出来ないので、代わりに「visibility:hidden;」と「visibility: visible;」を使用します。
ただ、visibilityの指定のみだと、アニメーションは効かないので必ず一緒に「opacity」の指定もします。
visibilityプロパティは、ボックスの表示（visible）・非表示（hidden）を指定する際に使用します。
非表示にした場合にも、ボックス自体が無くなってしまうわけではなく、表示・非表示を切り替えてもページのレイアウトは変わりません。ボックス自体を無くしてしまいたい場合には、displayプロパティでnoneを指定します。
例
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ドロップダウンメニュー</title> <style> #btn { width: 200px; height: 50px; background: #EE3639; position: relative; } #btn:hover { background: #DE9D9E; } #box { width: 500px; height: 500px; background: #59CED6; position: absolute; top: 50px; left: 0; visibility: hidden; opacity: 0; transition:0.5s; } #btn:hover #box { visibility: visible; opacity: 1; } #inner { width: 200px; height: 200px; background: #222; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> </head> <body> <div id="btn"> <div id="box"> <div id="inner"></div> </div> </div> </body> </html>
ポートフォリオを制作する際に、もちろん中身の作品の質も大事ですが、ポートフォリオ自体の見た目も非常に大事です。特に面接などではポートフォリオの中身をじっくり見る時間が無く、トップページのパッと見の印象で評価されてしまうケースも珍しくありません。なので、短時間でパッと見の印象である程度人の目を惹きつける、「ツカミ」が必要になってきます。
デザインとは結局は引き出しの中身の多さが物を言うので、色々な物を見て、使えそうな物はどんどん真似していきましょう。
特に一番最初にユーザーの目に触れる、ヘッダーのデザインというのは非常に大事で、ヘッダーの出来でそのサイトの雰囲気が決まってしまうと言っても過言ではないので、デザインをアピールしたい人は色々な工夫をして、「ツカミ」を入れて見ましょう。
<html lang="ja"> <head> <meta charset="utf-8"> <title>RWD-ハンバーガーメニュー</title> <meta name="viewport" content="width=device-width"> <style> html,body,p,ul,li,a{ margin: 0; padding: 0; line-height: 1.0; } ul{ list-style: none; } a{ text-decoration: none; } /*PCレイアウト*/ P{ display: none; } nav { width: 100%; background:#77CCF0; margin: 50px auto 0; } #menu{ max-width: 960px; margin:0 auto; overflow: hidden; } #menu li{ float: left; width: 25%; height: 50px; box-sizing: border-box; } #menu li a{ display: block; line-height: 50px; text-align: center; background:#24A1F0; color: #fff; border-right: 2px solid #fff; } #menu li:first-child a{ border-left:2px solid #fff; } #menu li a:hover{ background:#77CCF0; } .box { width: 100%; height: 3000px; } footer { width: 100%; height: 200px; background: #EB8384; } @media screen and (max-width:767px){ p{ display: block; width: 100px; height: 100px; background: #24A1F0; border-radius: 8px; margin: 50px auto; position: relative; } span{ display: block; width: 60px; height: 6px; background-color: #fff; position: absolute; top:0; right: 0; bottom: 0; left: 0; margin:auto; border-radius: 4px; transition: 0.1s; } span:before{ display: block; content:""; width: 60px; height: 6px; background-color: #fff; position: absolute; top: -40px; right: 0; bottom: 0; left: 0; margin:auto; transition: 0.2s; border-radius: 4px; } span:after{ display: block; content:""; width: 60px; height: 6px; background-color: #fff; position: absolute; top:0; right: 0; bottom: -40px; left: 0; margin:auto; transition: 0.2s; border-radius: 4px; } p.click span{ background: transparent; } p.click span:before{ top: 0; transform: rotate(45deg); } p.click span:after{ bottom: 0; transform: rotate(135deg); } nav { width: 300px; height: 200px; margin: 0 auto; background:transparent; display: none; } #menu{ overflow: visible; } #menu li{ float: none; width: 100%; height: 50px; } #menu li a{ display: block; line-height: 50px; border-top: 2px solid #fff; border-right: none; } #menu li:first-child a{ border-left: none; border-top: none; } } </style> </head> <body> <p id="btn"><span></span></p> <nav> <ul id="menu"> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> <li><a href="#">ボタン4</a></li> </ul> </nav> <div class="box"> </div> <footer></footer> </body>
3月27日、Googleが検索結果に使用するインデックスを今までのデスクトップ版のコンテンツから、モバイル版のページを使用する方法に切り替えました。
これまで、Google のクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツが使用されてきました。そのため、その内容がモバイル版と大きく異なる場合、モバイル検索ユーザーに問題が発生する可能性がありました。 モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。
詳しくはこちら
webmaster-ja.googleblog.com
今回の変更は、既にレスポンシブデザインで制作してあるサイトにはほとんど影響はありませんが、今後はスマートフォンでの表示速度が今まで以上に重要視されるので、cssやjsなどの記述などにも気を使うようにしましょう。
また、下記のサイトで表示速度が確認出来るので、確認してみましょう。
フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
Reactは、Facebookが開発したJavaScriptのフレームワークです。JavaScriptではGoogle製のAngularJSも有名なのですが、最近ではReactの名前を聞くことも多くなってきました。Reactの設計はFluxを用いていて、Webアプリケーションではフロント側の機能を担当します。Facebookで使われていることからもわかるように、規模の大きなアプリケーションに向いているフレームワークと言えます。
Twitter社が公開しているCSSフレームワークです。CSSと聞いてわかるとおり、WebサイトやWebアプリケーションのレイアウトをするための機能が豊富に揃っています。代表的なものとしては、グリッドシステムがあります。Bootstrapでは画面を12分割しています。このグリッドレイアウトを使うことで、CSSのプログラミングに慣れていなくても、自由にページ要素を配置することができるのです。リキッドレイアウトにすることも可能で、スマホ対応などのレスポンシブデザインも簡単に実現できます。
