■見出し１■


ＨＯＭＥ > レイアウトマニュアル

レイアウトマニュアル

※「<」 「>」 については、全角で表記していますが、コードに入れるときは半角にしてください。

チェックマーク

リストタグを使ってチェックマークを表示できます。

  • リストのサンプルです。
  • ul に、class="check"を入れると、その中のリスト＜li＞の先頭に、チェックマークが付きます。
  • この＜li＞の、フォントサイズは、14px に設定しています。
  • 全体をボックス＜div＞で囲み、そのボックスに bg-yell を入れると、このようになります。
  • より強調したい場合にご使用ください。
  • このようにリストにも、文字装飾は可能です。
  • このようにリスト全体に class で装飾することも可能です。

PageTop

余白設定

＜p＞、＜div＞などに、 class="mt10" などを指定すると余白の調整ができます。

＜p＞の場合

ma20 で、上下左右に余白を20ピクセルとります。マージンオール（margin all）の意味で設定しています。

mt10 で、上に余白を20ピクセルとります。マージントップ（margin top）の意味で設定しています。

mt20 で、上に余白を20ピクセルとります。

mt40 で、上に余白を40ピクセルとります。

mt80 で、上に余白を80ピクセルとります。

ml20 で、左に余白を20ピクセルとります。マージンレフト（margin left）の意味で設定しています。
サイトマップページなどで使うと良いと思います。

＜div＞の場合

テスト画像

上記、＜div＞には、mt20 center を設定しています。上余白20ピクセル、センター寄。

PageTop

プロフィールレイアウト

テスト画像

左BOXの横幅は、160px です。

画像は上のサンプルのように、＜div＞ で囲ってください。画像は、横幅 160px までのが入りますが、160px だと、右BOXにピッタリくっついてしまうので、150px 前後が良いでしょう。

【経歴】
サンプルテキスト

【趣味】
サンプルテキスト

右BOXについて（見出し３ もこのように入ります。）

見出し４も入ります。

右BOXの横幅は、375px です。

背景色に、薄いグレーを入れています。

文字色・サイズなどの変更も可能です。

レイアウトについての解説

ソースをご覧ください。構造としては、以下のようになっています。

＜div class="profile"＞
　＜div class="profile-l"＞
左BOXの内容
＜/div>
　＜div class="profile-r"＞
右BOXの内容
＜/div＞
＜br class="clear" /＞
＜/div＞
＜br class="clear" /＞

全体を、profile で囲んでいて、
その中に、profile-l と、profile-r が並んでいる構造になっています。

２箇所に入っている、＜br class="clear" /＞ は必ず入れてください。これは回り込みを解除するために使っています。これがないと、環境によってレイアウトが崩れる可能性があります。



まぐまぐ登録フォーム

塗替えリフォームで成功する方法

元塗装職人のペイントセンター店長榎本が、塗装工事で失敗しない方法を公開。また、騙されないための基礎知識や外壁塗装の種類や外壁塗装の価格などの最新情報も配信。

発行周期：不定期　>> バックナンバーはこちら

２列表示レイアウト

double

親DIV（double）の中にdouble-l（左）とdouble-r（右）が並んでいるレイアウトです。

double

こちらがdouble-r（右）です。このDIVを閉じた後は必ず br clear を入れてください。


double

br class="clear" を入れて置かないと回り込みが解除されなくて、DIVが無理やり横に並ぼうとしてレイアウトが崩れる場合があります。

double

右DIVの後は、クリアしてください。最後に親DIV(double）を閉じたあともクリアします。閲覧環境によってレイアウト崩れを防ぐためです。



PageTop




ＨＯＭＥ - サービス・価格 - メニュー２ - メニュー３ - よくある質問 - お問い合わせ

会社概要 - お問い合わせ - プライバシーポリシー - 特定商取引法に基づく表記 - サイトマップ


掲載の記事・写真・イラストなど、すべてのコンテンツの無断転写・転載・公衆送信などを禁じます。