CSSの小技|カテゴリ記事一覧

ブログが作りたい!カテゴリ記事一覧 > CSSの小技|カテゴリ記事一覧

CSSの小技|カテゴリ記事一覧

CSSの小技|カテゴリ記事一覧

CSSの小技

カテゴリ『CSSの小技』では、CSSに関する役立つ小技をご紹介しています。ちょっとしたアクセントになるはずです。


CSSの小技

01:リンクのクリック範囲を広げる:CSS小技

ナビゲーションメニューなどのリンクのクリック範囲を広げる方法です。「display: block;」を使っています。

02:画像の透明度を変化させる:CSS小技

リンク画像の上にマウスのカーソルをのせたときに、画像の透過度を変える方法です。opacityプロパティを使っています。

03:マウスをのせると画像が動く:CSS小技

リンク画像の上にマウスのカーソルをのせたときに、画像が動くようにする方法です。「position: relative;」を使っています。

04:マウスをのせると文字が大きくなる:CSS小技

リンク付き文字の上にマウスのカーソルをのせたときに、文字を大きく表示する方法です。「font-size: larger;」を使っています。

05:注釈(※)の文章をきれいに整える:CSS小技

注釈表示をしたときにうまいこと2行目を良い位置にインデントさせる方法です。

06:Firefoxのスクロールバーを常に表示する:CSS小技

IE以外のモダンブラウザは、1画面で表示できる情報の場合は、右側のスクロールバーを表示しないようです。「overflow-y: scroll;」で解決します。

07:Firefoxのリンククリック跡を非表示にする:CSS小技

Firefoxにてリンクをクリックしたときに表示される点線を、非表示にする方法です。「outline: 0;」にします。

08:効果的に画像を重ねて使う方法:CSS小技

画像を重ねて表示する方法です。「position: relative;」を使います。

09:サムネイル画像をきれいに並べる(1):CSS小技

サムネイル画像をきれいに並べて表示する方法です。<ul>で作ります。「float: left;」を使います。

10:サムネイル画像をきれいに並べる(2):CSS小技

文字付きのサムネイル画像をきれいに並べて表示する方法です。<dl>で作ります。「float: left;」を使います。

11:サムネイル画像を大きく表示する:CSS小技

同じページにて、サムネイル画像を大きく表示する CSSの小技です。(マウスのカーソルを、画像の上にのせると大きく表示されます)

12:半角英数字の文字列を折り返す:CSS小技

半角英数字の文字列が、親要素を突き抜けたり、領域を広げたりすることを解決します。

13:「ページの先頭へ戻る」の常駐表示:CSS小技

右下に常駐表示する「ページの先頭へ戻る」ボタンを作成します。「position: fixed;」だけでできるかと思ったら、IE6に対するCSSハックが必要なんですね。疲れた。

14:基本となるシンプルなtableの装飾:CSS小技

とてもシンプルな tableの装飾です。最も基本的な方法です。

15:少しだけおしゃれなtableの装飾:CSS小技

少しだけおしゃれな tableの装飾です。罫線を使うばかりが一覧表ではないのですね。

16:行の色が交互に違うtableの装飾:CSS小技

行の色が交互に違う tableの装飾です。データの可読性が高まります。

17:floatを使ったナビゲーションメニュー:CSS小技

floatを使った横並びのナビゲーションメニューの作り方です。

18:inlineを使ったメニュー:CSS小技

「display: inline;」を使った横並びのナビゲーションメニューの作り方です。

19:画像がロールオーバーするメニュー:CSS小技

ナビゲーションメニューの画像の上にマウスのカーソルをのせると、画像が切り替わります。

20:引き出すナビゲーションメニュー:CSS小技

隠れているナビゲーションメニューにマウスのカーソルをのせると、引き出されます。

21:引き出して使うプルダウンメニュー:CSS小技

隠れているナビゲーションメニューにマウスのカーソルをのせると、引き出されます。引き出されたメニューはリストになっています。でも、IE6含め、いろいろ不安定です。

22:文章の背景を透過して画像を表示:CSS小技

文章の背景を透過させて、背面にある写真がうっすら透けて見えるようにする方法です。

23:ulリストマークに背景画像を使う:CSS小技

<ul>タグで書かれたリストに、背景画像を使用してリストマークをつける方法です。「list-style-image」より、位置の調整が楽になります。

24:リストにチェックマークを付ける:CSS小技

<ul>タグで書かれたリストに、背景画像を使用します。訪問済みリンクにチェックマークをつける方法です。

25:シンプルで分りやすい角丸を作る:CSS小技

角丸を作る方法です。空(から)divを使ったシンプルで分りやすい方法です。

26:空のdivを使わずに角丸を作る:CSS小技

角丸を作る方法です。空(から)divを使わない方法です。

27:border-radiusを使って角丸を作る:CSS小技

border-radiusを使った角丸を作る方法です。画像を使わない方法です。

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

装飾(画像)付きのサイドメニューを作ります。

29:文章の先頭の文字だけ大きく表示する:CSS小技

文章の先頭の一文字目だけ文字を大きく表示する方法(ドロップキャップ)です。

30:便箋のようなデザインにする:CSS小技

便箋(びんせん)のようなデザインにする方法です。

31:書籍の目次のようなデザインにする:CSS小技

書籍の目次のようなデザインにする方法です。左側に見出しがあって、それを点線でつないで、何ページ目かが表記されているようなレイアウトです。

32:見出しの先頭に背景画像を表示する:CSS小技

hタグ見出しの先頭に背景として画像を表示する方法です。

33:見出しの先頭に画像を表示する:CSS小技

hタグ見出しの先頭にimgで画像を表示する方法です。リンク付き見出しにする場合などに有効です。

34:好きな場所にスクロールバーを作る:CSS小技

「overflow」を使った好きな場所にスクロールバーを作る方法です。狭いスペースに多くの情報を盛り込みたいときなどに便利です。

前の記事へ
次の記事へ

関連記事

サイトマップ、及び同じカテゴリにあるカテゴリ記事一覧をご紹介します。

1:サイトマップ親分

2:ブログのカスタマイズ|カテゴリ記事一覧

作成日:2009/04/12 更新日:2009/12/08

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

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

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

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/476-765a8dc9
 | トップページ | 

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
ありのごとくあつまりて