CSSの小技|『ブログが作りたい!』+FC2ブログの作り方+

ブログが作りたい! > CSSの小技

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

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

CSSの小技(1)

ちょっとしたCSSの小技を、ご紹介していこうと思います。

さて、その記念すべき第一回目の CSS小技シリーズは、ナビゲーションメニューなどのリンクのクリック範囲を広げる方法です。

これ、けっこうクリックしやすくなるから好きなんすよね~。やり過ぎると、ちょっと鬱陶(うっとう)しいですけどね。

続きを読む »

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

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

CSSの小技(2)

今回の CSSの小技は、マウスのカーソルを画像の上にのせたときに、画像を半透明に見せる方法です。

リンク付き画像に、何かおもしろみのある効果を加えたいときなどに役立ちます。「あまり嫌味のない効果」なので、好まれるのではないかしら。

続きを読む »

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

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

CSSの小技(3)

今回の CSSの小技は、マウスのカーソルを画像の上にのせたときに、画像を動かす方法です。これは、目にしたことがある人も多いのではないかしら。

前回同様、リンク付き画像に、何かおもしろみのある効果を加えたいときなどに役立ちます。

続きを読む »

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

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

CSSの小技(4)

今回の CSSの小技は、マウスのカーソルを文字の上にのせたときに、文字を大きくする方法です。

リンク付き文字を、大きくして強調する感じになります。

続きを読む »

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

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

CSSの小技(5)

注釈(ちゅうしゃく)」って、ご存知でしょうか?あまり言葉と一致しない人もいらっしゃるかもしれませんが、次のような形式で書くものを注釈と言います。

※:「注釈」とは、補足や解説、ちょっとした留意点などを別途記述する文章のことです。

一般的に、「※(こめ印)」などを付けて、読み手が分かり良いように、ちょっとした補足を書くわけですね。

さて、今回の CSSの小技は、この注釈表示をしたときにうまいこと2行目を良い位置にインデントさせる方法です。

続きを読む »

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

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

CSSの小技(6)

これ、ご存知かしら?Firefoxは、情報がその画面内(縦)でおさまると、右側のスクロールバーを表示しない仕様になっているのです。

あなたは、「そんなん、どうでもええがな、好きにさせといたら」と思うかもしれません。

でもね、おっかさん。スクロールバーのあるページと、ないページを、交互にご覧になってみてくださいな。レイアウトが、ガックンガックンするはずです。

そこで今回の CSSの小技は、Firefoxの右側のスクロールバーを、常に表示させる方法をご紹介いたします。

続きを読む »

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

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

CSSの小技(7)

Firefoxにてリンクをクリックすると、リンクの回りに点線が表示されます。

点線によって分りやすい場合もありますが、点線の跡が残ると、デザイン的に好ましくない場合もあるのではないでしょうか。

今回の CSSの小技は、そのリンク回りに残る点線を、非表示にする方法をご紹介いたします。

続きを読む »

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

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

CSSの小技(8)

画像を重ねて表示したい場合は、1枚は CSS(background-image)で、もう 1枚を HTMLで指定するという方法が一般的ではないかしら。

ただそれは、1箇所くらいなら、良いのですが、複数箇所となると、その度に CSSを更新する手間があり、また何より CSSファイルが大きくなってしまって、運営上も好ましくありません。

そこで、今回の CSSの小技は、background-imageを使わずに画像を重ねて使う方法をご紹介いたします。

何の話なのだか分からないかもしれませんが、ご覧いただくと「あ、こういうことにも使えるかも!」という発見があるかもしれません。

続きを読む »

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

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

CSSの小技(9)

今回の CSSの小技は、サムネイル画像をきれいに並べる方法です。

ちなみに、サムネイルというのは、複数の画像を小さめにして、四角いタイルのように並べて表示することをいいます。

一般的に、その小さい画像をクリックすると、元の大きい画像が表示されるような仕組みです。

多数の写真を、ブログにきれいに並べて掲載したい人などに、役立つのではないかしら。

続きを読む »

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

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

CSSの小技(10)

今回も、サムネイル画像をきれいに並べる CSSの小技です。

前回のサムネイル画像の方法との違いは、画像の下にちょっとした文字を入れていることです。

続きを読む »

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