装飾付きのサイドメニューを作る:CSS小技

ブログが作りたい!CSSの小技 > 装飾付きのサイドメニューを作る:CSS小技

装飾付きのサイドメニューを作る:CSS小技

装飾付きのサイドメニューを作る:CSS小技

CSSの小技(28)

今回の CSS小技は、ブログのサイド(横)などに配置する「メニュー」部分を、装飾付きで作ってみようと思います。

これって意外と、marginやpaddingで苦戦したりするんですよね。

それから、まれにすが、IEブラウザでしか表示確認していないのか?リストがはみ出しているブログさまも見かけたりします。(気をつけたいものです)

それでは、横ちんがはみ出してしまわないように、サイドのメニュー部分を作ってみることにしましょう。


装飾付きのサイドメニューとは?

次のようなシンプルなメニューを作ります。

サイドのメニュー部分

画像は、次の 3つを使用しています。まず、上段のタイトル部分。これは、文字サイズだけ大きく表示されても良いように、縦を大きめにとってあります。

使っている画像(上)

そして、中段の部分。

使っている画像(中)

最後に、下段の部分ですね。

使っている画像(下)

これ自体は地味で、おもしろみはないですけれども、作成の基本となる考え方は一緒だと思うので、デザイン力さえあれば、いくらでもおもしろく応用できるはずです。

サンプルは、上の画像と同じですが、良かったらサンプルもご覧になってみてください。


装飾付きのサイドメニューを作る方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、<h2>タグ、<ul>タグを、それぞれガッツリ<div>タグで囲んでいることです。

Webサイト制作に慣れてくると、できるだけ<div>タグの使用を減らしたくなってくると思うんですが、ここでは marginや paddingを柔軟に使うためにも入れておく方が楽なのではないかと思います。

それから、中段の部分で使用している画像は、縦方向に繰り返し(repeat-y)表示しています。こうしておくと、リスト項目が増えても問題がありません。

あとは、記事『空のdivを使わずに角丸を作る:CSS小技』でもやりましたけれども、下部の画像は背景画像として bottomで入れて padding-bottomで顔を出すようにしてあります。

<div>タグがよく分からない場合は、記事『グループ化 【<div>タグ】:HTML入門』をご覧ください。

前の記事へ
次の記事へ

次回予告

次回は、先頭文字だけ大きく表示する CSSの小技をご紹介したいと思います。


関連記事

CSSに関連する記事の一部を、ご紹介します。

作成日:2009/05/22 更新日:2009/05/22

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/516-e844d268
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて