ウェブコーディング

CSSのfloatを使ってリキッドレイアウトを組んでみた

先日ふと思い立って、一からWEBサイトをデザインし始めることにしたのですが、一からと言うのはなかなか難しいですね。

基本も忘れかけていたのでちょっとずつメモしていこうと思います。

私自身リキッドレイアウトやレスポンシブ対応など、ちゃんと勉強したことがありませんでした。

ですから、HTMLとCSSは読めば分かる程度の知識しかありません。

同じレベルの人には調度よい難易度?かもしれません。

主流となっている左リキッド右固定のレイアウト

今回作るのはこういうイメージのレイアウトです。

リキッドレイアウト_イメージ

基本的にはこのレイアウトが画面の中央に来るように配置したいわけです。

最大横幅を960pxに維持したまま、すべての要素が中央に表示されるようにします。

あとは画面サイズに合わせてcontent部分が横に伸び縮みするリキッドレイアウトを実現すればOKということです。

最終的にはレスポンシブにも対応できるように設定します。

スクリーンサイズが小さいときにsidebarがcontentの下に来る状態がレスポンシブ対応です。

 

webのレイアウトを制御するときはdivタグにレイアウト用のCSSクラスを設定すると思います。

ここでも同様の方法で実装していきます。

まずは結論から。

HTMLサンプル

まずは以下のHTMLを「sample.html」として保存しておきます。

HTML内で外部ファイルとしてCSSを読み込む場合は <head></head> の内側に

と書いておく必要があるので、すでに挿入してあります。

CSSサンプル

「sample.html」と同じフォルダに以下の内容でCSSファイルを用意します。

ここでは「style.css」として保存します。

 

表示サンプル

サンプルコードの「sample.html」をブラウザで表示するとこんなページが開きます。

レイアウトがわかりやすいようにheightプロパティを適宜設定し、背景色を設定しています。

リキッドレイアウト_表示サンプル

 

全体の表示幅を設定して中央寄せにするCSS設定

設定は「.container」に記載しています。

「.container」はページ内のすべての要素を含むようにHTMLで定義しています。

まず「max-width」を設定して、横幅の最大値を設定しておきます。

この指定方法では、ディスプレイが960pxより小さいとき、ディスプレイのサイズに合わせて横幅が縮小されます。

あまりに横長だと記事自体も読みづらくなってしまうので、今回は960pxです。

肝心の中央寄せですが、marginの左右を「auto」にすることで実現します。

画面に合わせてcontainerの左右に自動で同じ幅のmarginが設定されます。

これによって全体が中央に寄せになります。

 

横幅の適切な設定についてはこんな記事があるので参考にしても良いと思います。

「デザインは8の倍数で出来ている」

 

左リキッド・右固定のレイアウトをするCSS設定

設定されているCSSはこちらです。

HTML上で「.wrapper」は「.content」を囲むように設定されています。

「float: left;」によって、「.content」のエリアを左寄せにしています。

「.content」のエリアの右側に「.sidebar」のエリアが入り込むための余白を310px残しておきます。

「.sidebar」のエリアは「float: right;」によって右寄せになり、「.wrapper」と「.content」の余白部分にすっぽり収まるようになります。

 

「.wrapper」の「width: 100%;」の指定がないとcontent部分がうまく表示されなくなってしまうので、必ず指定が必要です。

ここで言う「width: 100%;」は「.container」の幅に対して100%です。

「margin-right: -300px;」はsidebarを右側にはめ込むための外余白(margin)の設定です。

sidebarの幅の分だけマイナスの余白を取ることで、sidebarが下側に回りこまず、横に表示できます。

 

floatを解除してfooterを横幅100%で表示するCSS設定

最後に回りこみの設定を解除してfooterを「.container」に合わせて表示する必要があります。

CSSはこちらです。

headerエリアはもともと回りこみがなしだったので問題ありませんでした。

footer部分はそうは行かず、ひとつ前の要素の回り込みが反映されてしまいます。

これを解除するのが「clear: both;」です。

これで最初の構図通りのレイアウトが完成します。

 

レスポンシブ対応のためのCSS設定

今回はスクリーンサイズが720pxを下回った場合に1カラムのレイアウトになるように設定しました。

「@media」はメディアクエリと呼ばれる、ウィンドウサイズに合わせて表示を変化させる分岐点のようなものです。

「(max-width: 720px)」は条件分岐で、今回は画面幅が720pxまでは「@media {}」の中身を読み込むという指定です。

つまり、画面サイズが720を下回っているときに、メディアクエリの中のCSSが適応されるということです。

上記の設定では、float・marginを全て解除して、画面の最大幅で表示するという設定です。

表示はこうなります。

リキッドレイアウト_表示サンプル_レスポンシブ

簡単なメモ書き程度でしたが、すべてご理解いただけたでしょうか?

今後はこれをベースにパンくずリストや画像のフルード化などを設定していこうと思います。

ではまた。

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

スポンサードリンク

スポンサードリンク

関連記事

  1. ウェブコーディング

    WordPressでも簡単に使えるってほんと?会話風吹き出しのCSSテンプレート

    会話風吹き出しのテンプレートとして使えるCSSを作ってみました。会…

  2. ウェブコーディング

    NetBeansでSQliteのドライバーを有効にするプラグイン

    PHPなどのwebアプリケーションを作成できるNetBeansですが、…

  3. ウェブコーディング

    AdSenseのモバイル向けページ単位の広告をWordPressに設置する方法

    AdSenseにモバイル用のページ単位の広告という機能が追加されてしば…

  4. ウェブコーディング

    PHPでデータベースから取得した配列を加工する方法

    データベースからデータをfetch関数などで取得すると、大体は2次元配…

  5. ウェブコーディング

    子テーマを使ってWordPressを自由にカスタマイズしちゃいましょう

    WordPressをカスタマイズするときに使うと便利なのが「子テーマ」…

  6. ウェブコーディング

    PHPの基本的な文法と変数のまとめ

    どんなPHP文でも必ず従わなければいけない文法があります。その初歩…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

カテゴリー

ピックアップ記事

WordPressテーマ「MAG(TCD036)」   ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche  
  1. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」
  2. ブログの収益化

    報酬の受取に苦労してません?初心者でもAmazon・楽天のアフィリエイトで効率的…
  3. 特集

    inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集
  4. ブログやサイトの作り方

    TCDテーマ比較「CUBEY」と「BlogPress」どっちがいい?
  5. 特集

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
PAGE TOP