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

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

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

今度はウィンドウ幅を広くしてみます。

ちょっとカッコ悪くなってしまいました……


「BULLENOTONEとは」の項目が横に伸びすぎてしまうようです。

widthくんは真面目過ぎるので、見た目が崩れそうになっても、

臨機応変に対応するということができません。

そこで、状況がしっかり判断できるmax-widthくんに手伝ってもらいます。max-widthくんは、最大幅を指定すると、widthくんが項目の幅を広げすぎてしまうのを食い止めてくれます。

いい感じです。


ちょうどいい横幅に設定されて、文章が読みやすくなりました。これでレスポンシブデザインに一歩近づいたかな~という感じです。


こんな具合にほかの箇所にも調整を加えていきましょう。

タイトルがはみ出なくなりました。

widthくんとpaddingさんのおかげです。

ダウンロードのボタンの幅も変化するようになりました。

widthくん大活躍です。

幅が狭くなった時に、画像が気を利かせて左にずれてくれるようになりました。

leftくんが画像を配置してくれています。


leftくんは賢いので、


「ウィンドウ幅の7%の幅から、項目の幅が960ピクセルより狭くなった分の12分の1を引いた幅」


という複雑な計算を瞬時に計算して、いい感じの位置に画像を配置することができます。

(ほかのみんなも賢いです。同じく計算ができます)

こんな感じの作業を繰り返して、PC向けのレスポンシブデザインが完成しました。

レスポンシブ化する前と比べて、読みやすいし、見た目も整ってきたように感じます。



続く

レスポンシブ化③へ

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

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

まずは、じっくり検討!

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

BLOGS