忍者ブログ

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2段組のレイアウトにする

da8c788d.jpeg

2段組のレイアウトにします。
今回は、WordPressだからといって、特別なことをやるわけではありません。
普通にfloatを使うだけです。

01. サイドバーのdiv要素を追加
サイドバーのdiv要素を、コンテンツのdiv要素(id="content")とフッターのdiv要素(id="footer")の間に挿入します。
<!-- サイドバー -->
<div id="sidebar">
サイドバーのdiv要素
</div>

02. CSS(style.css)の編集
下記記述を、style.cssに追記します。
全体(div#container)の横幅は760pxで、
その中にコンテンツ、サイドバーが入っています。

/* コンテンツ */
div#content {width: 515px;
  float: left}

/* サイドバー */
div#sidebar {width: 220px;
  float: right;
  background-color: #9f9;}

 

拍手[1回]

PR
Name
Title
Mail
URL
Comment
Pass
Pictgram
Vodafone絵文字 i-mode絵文字 Ezweb絵文字

 

プロフィール

HN:
太郎松
性別:
男性
職業:
無職
自己紹介:
フロントエンドエンジニアを目指す30代。元SE。今はHTMLコーダーってところ。あわよくばWebデザインもやりたいと考えている。

 

 

カレンダー

04 2025/05 06
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

 

最新記事

 

最新コメント

[04/14 ちーた]
[02/20 ちーたん]
[12/31 ちーたん]
[12/09 ちーたん]
[11/11 ちーたん]

 

バーコード

 

最新TB