デジタルハリウッドSTUDIOつくば ブログ

【受講生ブログ】レスポンシブ化①

こんにちは!受講生のかめざわです。

本日より、受講生ブログが開始します。

その第一号として、発信させていただくことに非常にプレッシャーを感じています(笑)


本日お話させていただく「レスポンシブ化」とは、

スマートフォン向けのWebページを作成する際に非常に重要な作業です。

Web業界への転職やWeb業界での独立(フリーランス)を考えている方々の

少しでもサポートとなれば幸いです。宜しくお願い致します


ウェブサイトのレスポンシブ化について

レスポンシブ化とは、ウェブサイトを画面のサイズに応じて、

適切な表示になるように調整する作業のことをいいます。


いまこのブログをPCで読んでいるみなさん、

ブラウザのウィンドウの右端をつかんで、右のほうにグイっとドラッグしてみてください。

(スマートフォンの方は画面を回転させてみましょう。)


レイアウトがいい感じに変化していきませんか?これがレスポンシブデザインです。


今度は、さっきと同じようにウィンドウの右端をつかんで、

左にキュッとドラッグしてみましょう。

ある一定の幅よりも狭くなったところから、上のメニューのデザインが変化すると思います。

これは、STUDIOつくばのウェブサイトが、スマートフォン向けのデザインになったということなんです。


では、このような見やすいウェブサイト、どのように制作しているのでしょうか。

今回、私がスタジオで学習した内容、レスポンシブ化の作業を紹介していこうと思います。


これは現在私が卒業制作として制作している、あるスマートフォンアプリの紹介サイトです。

※文章はワーク課題の原稿を転用しているため、本サイトの内容とは関係ありません。ご了承ください。


問題なく表示されていると思います。

しかし、このウェブサイト、ウィンドウの幅を狭くしていくとどうなるでしょうか。


なにか、おかしいですね……


「BULLENOTONEとは」の項目がウィンドウからはみ出てしまいました。

このままじゃ内容が読みづらいし、見た目もカッコ悪いですよね。

まずはこれを直していきます。



さて、一体なぜこのような表示になってしまっているのでしょうか。


それは、この項目の横幅が一定の幅に設定されているため、

狭くなったウィンドウに収まりきらなくなってしまっているからです。


表示の設定を見ていきましょう。はみ出た部分はこのように設定されています。

widthくんが「横幅は984ピクセルだよ」って言っていますね。


これを

こうします。


widthくん「横幅はウィンドウと同じ幅をとるよ」


「width」を100%に設定することで、widthくんは、ウィンドウの幅に応じて臨機応変に対応する、

デキルヤツ になりました。

いい感じです。


ウィンドウ幅が狭くなったときに対応できるようになりました。


続く

レスポンシブ化②へ

ご興味ある方や詳細を聞きたい方は、下記の来校予約や資料請求よりお問い合わせください

お客様のご予定に合わせて開催

まずは、じっくり検討!

その他のSTUDIOつくばのブログ

BLOGS