ホームページ作成

【ホームページ作成】レイアウトの作成・調整 (HTML,CSS)

レイアウトの作成・調整 (HTML,CSS)

HTMLやスタイルシート（CSS）を使ったレイアウトの作成、調整方法について解説しました。

上下に隣接するマージンは大きい方だけ採用

スタイルシートを使って余白(マージン)を設定した場合、上下に隣接する余白は「大きい方だけ」が採用されます。隣接する両方の余白量が合算されて確保されるのではありません。細かなデザインを作る際には注意です。

ガイド：西村文宏
ボックス横幅の最大値・最小値を指定する

可変幅のボックスを作る際、範囲を制限したいことがあります。「80％の横幅で表示するが、200pxより小さくはしたくなく、800pxより大きくはしたくない」というような場合です。スタイルシートで簡単に指定できます。

ガイド：西村文宏
キャプション付き画像を横に並べて配置する

アルバムのように、キャプション(タイトル名)を加えた画像を横方向にたくさん並べてみましょう。横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置される「リキッドレイアウト」で実現する方法をご紹介。

ガイド：西村文宏
スタイルシートで段組を作るメリット

スタイルシートを使って段組を作る方法には、HTMLの構成上、大きなメリットがあります。単にスタイルシートでデザインできるというだけではありません。ユーザを待たせず、クローラにも良いHTMLにできるのです。

ガイド：西村文宏
CSS段組1：スタイルシートだけで段組を作る方法

スタイルシートで「段組(マルチカラム)」を作ってみましょう。「段組」というとtableタグを駆使して作るものだと思っていませんか？そんな力業を使わなくてもHTMLとCSSでスマートに実現できるのです。

ガイド：西村文宏
CSS段組2：スタイルシートで作る段組レイアウトの例

HTML+CSSで「段組(マルチカラム)」を作ってみましょう。よくあるレイアウトのサンプルを用意して、その通りに段組を構成する方法をご紹介します。スタイルシートでスマートに段組を作りましょう。

ガイド：西村文宏
CSS段組3：隣の段が下に回り込むのを防ぐ

スタイルシートで「段組(マルチカラム)」を作ると、横に並ぶ段の長さ（高さ）が異なる場合に、段組が崩れてしまう問題点があります。今回はこの問題を解決してみましょう。実は、意外と簡単に解決できるのです。

ガイド：西村文宏
CSS段組4：段の背景色が切れないようにする(前編)

スタイルシートで作った「段組(マルチカラム)」に背景色や背景画像を指定すると、段の途中で背景が途切れてしまうことがあります。今回はこの問題を解決してみましょう。考え方は非常に単純です。ぜひ試して下さい。

ガイド：西村文宏
CSS段組4：段の背景色が切れないようにする(後編)

スタイルシートで作った「段組(マルチカラム)」に背景色を指定すると、段の途中で背景が途切れてしまうことがあります。今回の後編では、左右どちらの段が短い場合でも、うまく背景色を付ける方法をご紹介！

ガイド：西村文宏
ページ周囲の余白を微調整する方法

通常、ページの周囲には数ピクセルの余白ができますね。デザイン上、この余白をなくしたい場合もあるでしょう。そこで今回は、この余白を消したり、サイズを調節する方法をご紹介致しましょう。

ガイド：西村文宏

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！