2014/12/20、 CLR/Hにてお話しした内容です。無修正。

1. リキッドレイアウトって結何
なのよ！どこで使うのよ！
もうおこなんだからね！！
ノハ公＞ω＜わふー（＠noha_ko）

2. ぷろふぃーる
• なまえ：マツイミホ（のはこ）
• Twitter ID：@noha_ko
• 屋号：モノヅクリノハコ
• しょくぎょう：Webデザイナーだったはず（最近怪しい）
• Japan Azure User Group札幌支部長
• CLR/H デザイン担当
• 北海道情報セキュリティ勉強会（せきゅぽろ）お手伝い
• 札幌に2年半くらいフリーランスとして住んでた現在普通の
会社員。基本的には流浪人
• 基本的に社会に適合できていない
• 朝が弱いし夜更かしもできない
• TOKIOみたいな生活がしたい今日この頃

3. このマークだけでも覚えて帰ってください！

4. 本日の格好、何のキャラだか
ご存知でしょうか？

5. 能美 クドリャフカ（のうみ くどりゃふか / Кудрявка Номи / Kudrjavka
声 - 金子明美 / 鈴田美夜子 / 若林直美 （アニメ版・PE版‧PS3版）
身長：145cm / 体重：37kg / 3サイズ：69/51/72 / 誕生日：6月12日[13] /
テーマ曲：えきぞちっく・といぼっくす
初期称号：えきぞちっく（自称）なマスコット
9人目のメンバー（野球に加わったのは8人目）。理樹たちのクラスメイト
日本贔屓である祖父の影響を多分に受けており、日本文化は日本人よ
風紀委員会の仕事を手伝っている犬（シベリアンハスキーのストレルカと
普段から折り目正しい丁寧語で喋っているが、語末の動詞を「連用形+ま
幼い頃からいろんな国へ引越ししていたために幼馴染や友達が出来な
バトルランキングでの専用装備は飼い犬のヴェルカとストレルカ。
派生作品である『クドわふたー』ではメインヒロインとなる。
『KEY 10th MEMORIAL BOX』の発売に際して行われたKeyキャラクタ

6. まあ、Wikipediaでも
読んでください。

7. 本日のカソウ。問題点

8. 145cm 165cm

9. ・・・・・・・・・・。
さて、本題です。

10. リキッドレイアウト？
はい？今更？なんで？
ってかむしろ何なのよ！？
わふー＞ω＜

11. Google→http://www.google.com/design/
Microsoft→http://msdn.microsoft.com/ja-jp/jj984295
を始めとして、世の中はフラットデザインが主流
PC・タブレット・モバイル（スマートフォン）のどの端末から見ても
差異が少ない、見やすい配置やアイコン・ボタン、
そして「なるべく軽い！」作り方が求められています

12. リキッドレイアウトの立ち位置

13. リキッドレイアウト
【英】liquid layoutリキッドレイアウトとは、
Webデザインにおいて、Webページの表示
領域の幅がある程度変更されても従来のレ
イアウトを維持できるようにする手法のこと
である。
※IT用語辞典より抜粋

14. 良い点：リキッドレイアウトは、各列の幅をパーセンテージ（％）で指定し、
それによってWebページの幅を相対的・可変的にすることを主とした手法である。
リキッドレイアウトにすると、ウィンドウ幅に合わせて自動的に幅が調整されるの
で、多様な環境でユーザビリティが損なわれないWebページを作成することが
できる。

15. 悪い点：無制限に可変的なリキッドレイアウトにすると、解像度が非常に高いディ
スプレイ上では横に伸びすぎた表示となってしまったり、あるいは幅を狭くしすぎ
た場合にコンテンツが縦長になりすぎて読みづらくなってしまったりする場合もあ
る。幅のサイズの上限や下限を併せて指定することで、ある程度は見易さの維持
を図ることができる。

16. まとめ
リキッドレイアウトで、
PC・タブレット・スマートフォンという３つの
ブレイクポイントでレイアウトを変更できるデザインにしましょう！

17. спасибо
（インフルエンザではありません多分）

18. 制作・筆者：
終