カテゴリー : HTML CSS

画像を使わずに HTML + CSS3 だけで影付きの付箋みたいのを作る

以前、HTML CSS ってカテゴリを作ったんだけど、あんまりそのカテゴリの記事を書いてないことに気がついて、たまには書いてみようかと書いた記事です。

今回の内容は、だいぶ前に書いたやつで、今でも割とアクセスが多い「ブログタイトルをテキストだけで、しかもちょっとオシャレに」という記事の二番煎じに近いですが、パッと見たときに、「あれ、これ画像じゃないの?」って思ってしまうような、HTML と CSS のテクニックです。

まずは、以下のサンプルを見てください。

付箋みたいでしょ?

どうですか?画像みたいでしょ。画像ですからね(瀑)
ところがこの画像、HTML と CSS で作ったものをキャプチャーしただけなんです。左が Chrome、右が FireFox のキャプチャーです。

それでは、早速、作り方を。

[1] divで四角を作る

HTML

<div id="sakitabox"><p>テキスト</p></div>

(以後、HTML 部分は変わらないので、省略します)

CSS

#sakitabox {
	width:250px; /* 四角の幅  */
	height:50px; /* 四角の高さ  */
	background-color:#eee; /* 四角の色  */
}

ポイント

アレンジは後でするとして、とりあえず、縦横サイズの指定もしてください。

表示確認(右:Chrome、左:FireFox)

[1] divで四角を作る

[2] 影付きの擬似要素を重ねる

CSS

#sakitabox {
	width:250px;
	height:50px;
	background-color:#eee;
	position: relative; /* 位置指定(普通の位置に表示) */
}
#sakitabox:after {
	width:200px; /* 擬似要素の幅  */
	height:45px; /* 擬似要素の高さ  */
	content: ""; /* 擬似要素の内容 */
	position: absolute; /* 位置指定 */
	top: 0px; /* 上から */
	right: 3px; /* 右から */
	-webkit-box-shadow: 0 5px 5px #555 ; /* 影(Chrome、Safari) */
	-moz-box-shadow: 0 5px 5px #555 ; /* 影(FireFox) */
	box-shadow: 0 5px 5px #555 ; /* 影(CSS3) */
}

ポイント

最初に作った四角に「position: relative;」の指定を追加してください。
「:after」を使って擬似要素で四角を作ってます。
擬似要素は影にしか使わないので、「content: “”;」でカラにしてください。
「position: absolute;」「top: 0px;」「right: 3px;」で位置を指定します。
「box-shadow」で影をつけます。

表示確認(右:Chrome、左:FireFox)

[2] 影付きの擬似要素を重ねる

[3] 影付きの擬似要素をズラす

CSS

#sakitabox {
	width:250px;
	height:50px;
	background-color:#eee;
	position: relative;
}
#sakitabox:after {
	width:200px;
	height:45px;
	content: "";
	position: absolute;
	top: 0px;
	right: 3px;
	-webkit-box-shadow: 0 5px 5px #555 ;
	-moz-box-shadow: 0 5px 5px #555 ;
	box-shadow: 0 5px 5px #555 ;
	-webkit-transform: rotate(2deg); /* ズラす(Chrome、Safari) */
	-moz-transform: rotate(2deg); /* ズラす(FireFox) */
	-o-transform: rotate(2deg); /* ズラす(Opera) */
	-ms-transform: rotate(2deg); /* ズラす(IE) */
	transform: rotate(2deg); /* ズラす(CSS3) */
}

ポイント

「transform: rotate(2deg);」で擬似要素の四角を2度回転させ、ズラします。

表示確認(右:Chrome、左:FireFox)

[3] 影付きの擬似要素をズラす

[4] 影付きの擬似要素を後ろに送る

CSS

#sakitabox {
	width:250px;
	height:50px;
	background-color:#eee;
	position: relative;
}
#sakitabox:after {
	width:200px;
	height:45px;
	content: "";
	position: absolute;
	top: 0px;
	right: 3px;
	-webkit-box-shadow: 0 5px 5px #555 ;
	-moz-box-shadow: 0 5px 5px #555 ;
	box-shadow: 0 5px 5px #555 ;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	z-index: -1; /* 重なり順を背面へ */
}

ポイント

「z-index: -1;」で擬似要素の四角を背面に送ります。

表示確認(右:Chrome、左:FireFox)

[4] 影付きの擬似要素を後ろに送る

これで完成です。簡単でしょ?

最後に、これのアレンジについてなんだけど、最初の四角の幅と、擬似要素の幅と、影の大きさ、回転の角度などを微調整しないと使えません。まあ、幅を大きくするくらいなら大丈夫かな。影は大きくならないけど、右ハジがめくれてるってイメージは変わらないので大丈夫なんじゃないでしょうか。影付きの部分を大きくするためには擬似要素の幅を大きくすればいいんだね。大きくし過ぎると、サンプルでいうと左上のカドが最初の四角からはみ出しちゃうかも。そしたら回転の角度を1度にしてみるとか、影の大きさを小さくしてみるとか。なんにしても微調整はめんどくさいと思う。なので、可変のところでは使いにくいね。


あなたのウェブサイトやブログに簡単に「Follow me」を設置する方法

このブログの画面の右端に「Follow me」っていうTwitterへのリンクを付けました。

コードはTwitter “Follow” Badge for your site/blogで簡単に作成。

Twitter "Follow" Badge for your site/blog

設定項目は5つ。

  1. Twitter account(ツイッターのアカウントですね)
  2. Label(「Follow us」とか「Folloe me」とかetc.表示する文字の選択です)
  3. Color(色です)
  4. Side(画面の左に表示するか右に表示するかを選びます)
  5. From top(画面の上からの距離ですね)

以上の5つを設定して[UPDATE CODE]ボタンをクリックすれば以下のようなコードが表示されます。
<!-- twitter follow badge by go2web20 -->
<script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'sakitamax';
tfb.label = 'follow-me';
tfb.color = '#262626';
tfb.side = 'r';
tfb.top = 150;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->

あとはこのコードをコピーして自分のウェブサイトやブログの一番下方、具体的には</bode>の前にペーストしてあげればオッケー。

簡単でしょ?


ブログタイトルをテキストだけで、しかもちょっとオシャレに

新しくカテゴリーを追加しました。「html css」です。

誰かの役に立てるような記事が書けるかはわかりませんが、少なくとも自分の備忘録としては使えるだろうという事で。

で、今回の内容はタイトルのまま。このブログのタイトルの「sakitamax」の部分をちょっと変更しましたので、その方法というかcssでの指定方法をメモっときます。

#ブログのタイトル {
	font-family: "Arial Black", Arial, Helvetica, Sans, FreeSans, 	Jamrul, Garuda, Kalimati;
	color: #333;
	font-size:36px;
	line-height:36px;
	text-shadow: #fff 1px 1px 1px;
}

と、まあこんな感じです。ポイントは「text-shadow: #fff 1px 1px 1px;」の部分。人の所で見かけておしゃれだなと思ったのでそのまんまパクッてきましたお手本にさせていただきました。

検証してないのですが、おそらくIEでは普通の文字として表示されていると思います。これはオレが悪いんじゃなくIEが時代遅れなのだ。IEよ、はやく早くこれが表示できるところまでやってこい。


Facebookの「いいね!」とか

Facebook
Facebookの「いいね」ボタンをブログに設定する」を参考にして「アースジュース・ひかりやWEBショップ」の商品詳細ページにFacebookの「いいね!」ボタンを設置してみた。

他にもmixiチェックだとかTwitterだとかの機能も設置。そのへんは「公式の『mixiボタン』『Twitterボタン』『Facebookボタン』『GREEボタン』『はてなボタン』などを設置する方法。」とかを参考にしました。

ちなみに「アースジュース・ひかりやWEBショップ」は本日オープンです。

「アースジュース・ひかりや」ってなんぞやってひとはこちらをどうぞ。http://www.earthjuice.net/