昨日、まにまにフェスティバルに参加してきました。
まにまにフェスティバルとは、Web系・IT系セミナー、展示会で今年で4回目になるそうです。Webデザイナーやエンジニア、クリエイターなど様々なIT業界の方が登壇し、ご講演をしていただきました。
３階が展示とステージ、４階はチケットが必要な大きなステージで、私はほとんど４階のステージでの講演を聴かせていただいていました。
たくさん魅力的な内容の講演があったのですが、その中でも特に個人的に気になったこと・感想としては
①WebデザイナーはWebに特化する。
②ウェラブルコンピュータに注目。
③Edgeはこれから期待できる。
ということです。
①あれこれ手を出すより、WebならWebで深く身につける方がよいというお話がありました。これからある程度のことは機械による自動化が進むと考えられる中で、必要とされるのは機械ができない深い部分、細かい部分ができる人材ということでした。なので何か１つ、より深い部分を身につけようと思いました。
②ウェラブルコンピュータはAppleWatchやドローンなど、かなり現実味のある話だと思いました。将来、Webデザイナーがそういった操作系のデザインをすることになるのではということで、そのあたりにも関わっていけるようにがんばりたいと思います。
③そして、Edgeです。IEに代わりwindows10に搭載されたブラウザですが、これがかなり良さそうでした。レンダリングシステムはwebkitに近いという話。さらにchromeやsafariの拡張機能も使える予定だったり、標準で、絵や字を書き込んでキャプチャーを撮れる機能があったりと、かなり期待させてくれました。近々windowsをアップデートして使ってみたいと思います。
あと、1月13日でIE8以前のIEがサポート終了というのも大きなお話でしたね。Microsoftの人が「IE用の記述もベンダープレフィックスもいらない」と断言されていたので、聴いていてかなりテンションが上がりました。
他にもいい話がいっぱいあったのですが、私の力不足でまとめきれず、すみません。ご講演いただいた方々、貴重なお話を本当にありがとうございました。
（※これから紹介するのはほんの一例であり、私の個人的見解を含みます。これが絶対ということはないですし、もっと良いやり方があったり、コンテンツの内容によって違ってきたりするということは理解しておいてください。）
生徒「レスポンシブって難しい・・・。」
先生「どうしました？」
生徒「先生、レスポンシブがうまくできないんです。」
先生「レスポンシブとはどういうことを言うか、わかりますか？」
生徒「PCでもスマホでもサイトが見られるということですよね？」
先生「そうですね。もう少し詳しく言えば、一つのHTMLソースをデバイスや画面サイズに応じて適切に表示できるようにすることですね。なのでただ画面サイズに対して縮めただけというようなレイアウトではレスポンシブと呼べるかは微妙なところですね。」
生徒「そうなんですね。」
先生「簡単なコードを例にレスポンシブのやり方について見ていきましょう。まず、用意したHTMLはこちらです。」
「そしてそれに対してこのようにスタイルを設定します。」
「その見栄えがこちら」
DEMO①
「まずはPC用に固定値でレイアウトを決めました。次にこれを画面サイズに応じて最適なものにしていくのですが、このとき幅や余白などの数値はbodyに対して相対的に設定したいので、％にします。
ということで％にしたものがこちらです。今回は幅のみ％指定です。」
DEMO②
「これで画面を縮めても表示されてるでしょう。どこまでも伸びていくと気持ち悪いので、max-widthを指定しています。」
生徒「でも、先生。縮めていくとリストやコンテンツが狭くなりすぎる気がするのですが。」
先生「そうですね。同じレイアウトのまま画面サイズが小さくなれば見づらくなります。そこでブレークポイントを指定しましょう。」
生徒「ブレークポイント？」
先生「ブレークポイントとは画面サイズが変化したときにスタイルが変わる画面幅のことです。メディアクエリー（@media screen snd …）でブレークポイントを指定した、その画面サイズまでの間でのみ違うスタイルを適用させることができます。（※デバイスサイズや向きによっても分けられます。詳しくはこちら
デバイスに合わせてCSSを振り分ける「Media Queries」）
メディアクエリーで画面サイズ600xp以下の時のスタイルを指定したものがこちらです。(@media以外は②と一緒です)」
DEMO③
「これだと画面サイズが小さくなってもある程度見やすさを維持できていると思います。」
生徒「そうですね、コンテンツの幅もあるし、ナビのボタンもタップしやすいです。」
先生「実際にはこれにコンテンツの内容が入ってくるので、これだけでレスポンシブ完成というわけにはいきませんが、基本的な考え方はこんなかんじです。」
生徒「そうなんですね。先生、もう一度レスポンシブに挑戦してみます。」
参考サイト
必読！5分でわかるレスポンシブWebデザインまとめ
レスポンシブWebデザインの作り方（簡単設定方法）
いきなりですが、クイズです！
このようなHTMLがあります。
このHTMLに以下のようにスタイルを設定したときdivのfont-sizeはいくらになるでしょう。
①
②
わかりましたか？
では正解発表です。下のリンクからどうぞ。「チェック用」となっているほうには同じサイズになるように、px単位でfont-sizeを指定しています。
①答え
②答え
①と②の違いはfont-sizeの単位です。emとremはどう違うのか。
○emとは
emは相対単位と言って、親要素のサイズに対しその何倍かという計算をしてサイズを設定します。なので、先ほどの例であれば、（16*1.5*2*1.5）=72pxになります。他に％が相対単位になります。それに対してpxはそれ独自にサイズを指定するので、絶対単位といいます。
○remとは
remは:root emの略で、htmlのサイズに対してその何倍かでサイズを設定し、親要素の影響を受けません。なので、先ほどの例では、(16px*2rem)=32pxとなります。これがemとremの違いです。
個人的にはremを使うことをおすすめします。なぜなら、例えば前回紹介したdisplay:inline-bloock;のときに親要素にfont-size:0;を設定すると、emでは0にかけ算することになるので、文字サイズを設定できません。親要素を考慮に入れて混乱することを避けるためにもremを使っていくのがいいのではないでしょうか。
参考サイト:フォントサイズの指定はCSS3の「rem」が便利そう