https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

3カラムレイアウト

ここではブログやお小遣い系サイトのような

3カラムレイアウトのホームページの作り方を解説をしていきます。

カラムとは 列や段という意味で3カラムだと3列で構成されたレイアウトという意味になります。 3カラムレイアウトはフォントサイズを小さくすれば内部リンクをたくさん詰め込むことができるので訪問者により多くの情報を 見せることができます。
テーブルタグを使用して3段組のレイアウトを組むことは可能ですがCSSを 用いた方がソースの量が少なくなりレイアウトの変更もし易いというメリットがあります。
それでは下の画像のようなHPのレイアウトをテーブルタグを使用せずに組んでいきます。

3カラムレイアウト

手順1・ レイアウト全体の設定
手順2・ ヘッダー部分を作る
手順3・ レフトメニューを作る
手順4・ メインコンテンツを作る
手順5・ ライトメニューを作る

3カラムレイアウトの解説は飛ばして完成後のサンプルと ソース、外部ファイルを見る場合は以下をご覧下さい。

3カラムレイアウトのサンプル
3カラムレイアウトのソース
3カラムレイアウトの外部ファイル

このエントリーをはてなブックマークに追加 Instagram