皆さんこんにちは!Pearです。久しぶりのブログ作成です!突然ですがモノノフとして宣伝させてください!!映画『幕が上がる』とうとう公開が来週となりました!監督はあの『踊る!大捜査線』でおなじみの本広克行監督!脚本は平田オリザさん!なんと叔父はあの大林宣彦監督だそうです。~固定と可変~』について話したいと思います。リキッドレイアウトとは?そもそもリキッドレイアウトとは何でしょう?リキッドレイアウトとは、Webデザインにおいて、Webページの表示領域の幅がある程度変更されても従来のレイアウトを維持できるようにする手法のことを言います。固定の場合もっとも古典的であり一般的なレイアウトです。横幅をpx(ピクセル)などの単位で指定する方法のことを言います。今回はsample.htmlを使ってリキッドレイアウトを行います。</html>まずは固定のリキッドレイアウトのcssファイルを使います。}実行結果ここでWebページのウィンドウの幅を狭くすると以下のようになります!kotei.cssの(1)よりウィンドウ幅を小さくしても幅は750ピクセルのままになってます。レイアウトは崩れませんが、文字が途中から隠れてしまいます。次は可変のリキッドレイアウトについてです。sample.htmlの(1)の部分をkotei.cssからkahen.cssに変更してみましょう。可変レイアウトの場合は主にウィンドウ幅を%(パーセント)で表記します。}実行結果Webページの幅をちいさくするとこのようになります。可変リキッドレイアウトの場合はウィンドウ幅がkahen.cssの(1)によって80%に保つようになっています。レイアウトは崩れていますが、文章はウィンドウ幅の中にしっかりと収まっていますね!これが可変リキッドレイアウトと固定リキッドレイアウトの違いです。分かりましたか?可変レイアウトと固定レイアウトのメリット・デメリット【可変レイアウト】メリット・ユーザーが使う端末(PC,スマホetc)に合わせてレイアウトを調節できます。・余白などの割合が全てのブラウザやディスプレイにおいて均一なので、視覚的に有利に働きます。デメリット・ユーザーが使う端末によってどのように表示されるかが把握しづらいです。・解像度によって文章が見づらくなってしまう欠点があります。【固定レイアウト】メリット・個々のパーツを思い通りの場所に配置することなどが簡単です。・幅が変わることがないので、どのブラウザサイズでも制作側の意図した通りのレイアウトで表示されます。デメリット・大きいブラウザサイズで見ると大きな空白が生じます。・幅にもよりますが小さいブラウザサイズで見ると横のスクロールバーが表示されてしまいます。いかがでしたか?Webサイトを作成するにあたって、この固定レイアウトと可変レイアウトの仕組みをしっかりと覚えておきましょう。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。