Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

CSS 小技集

第1回:CSSで画像にborderをつけてみる

投稿日:


記念すべき初回のエントリーはCSSによるborderのスタイルを色々試してみます。やっぱりフォトサイトで一番気を遣うのは写真(画像)を表示するための <IMG>タグ だと思います。で、border(枠線)を付けるか付けないか、どんな色にするかとか、迷うと思います。なのでその参考になれば良いなと思います。


■ 枠なし
枠なし
基本は枠なしでしょうね。
シンプル・イズ・ザ・ベスト(だったら、このエントリーの意味ないじゃん・・・)
□サンプルコード

img.borderless {
border: 0;
}

■ シンプルな細い枠
シンプルな細い枠
1ピクセルの細い線で囲んだサンプルです。
画像の端の色がページの背景色と近似色の場合、画像の範囲をハッキリさせるためにborderを付けると効果的な場合があります。border色は写真の色彩を邪魔しないようにモノクロ色(白・グレー・黒)が基本です。
□サンプルコード

img.thinborder {
border: 1px solid #999999;
}

■ 縁ありな太い枠
縁ありな太い枠
5ピクセルのborderで縁あり現像したような表示になります。
border色は白(#FFFFFF)、って事は背景が黒系じゃないと合わないかも!?
□サンプルコード

img.thickborder {
border: 5px solid #FFFFFF;
}

■ ポラ風の変形枠
ポラ風の変形枠
下側のborderを少し太めに設定して、ポラ風な表示。
border色は白(#FFFFFF)、って事は背景が黒系じゃないと合わないかも!?
□サンプルコード

img.polaborder {
border-top: 10px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
border-bottom: 30px solid #FFFFFF;
border-left: 10px solid #FFFFFF;
}

■ 点線
点線
これはあまりオススメはしない。
が、ポップなイメージを演出する際に使えそう。
□サンプルコード

img.dashedborder {
border: 1px dashed #999999;
}

■ 2重線
2重線
使い道あるかな。
□サンプルコード

img.doubleborder {
border: 3px double #999999;
}

■ 右下だけ2重線
右下だけ2重線
borderが影のように、見えないかな・・・。
□サンプルコード

img.shadowborder {
border-right: 3px double #999999;
border-bottom: 3px double #999999;
}

-CSS, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

関連記事

no image

第9回:閲覧しているサイトへのリンクタグを生成するブックマークレット

どうしてもっと早く気がつかなかったんだろう、と思うくらい便利なブックマークレットを思い付きました。既出かもしれないけど、公開しておきます。 ブログを書いていると、他のブログのエントリーへのリンクを貼っ …

no image

第13回:URLエンコードとURLデコードを簡単にするブックマークレット

URLエンコードとURLデコードって頻繁には使わないけど、いざ使う時は適当にGoogleで検索して出てきた変換サイトを使っていたりしました。 この辺とか、 URLエンコードとデコードが行えるフォームで …

no image

はじめに

このカテゴリーでは、フォトサイトやフォトブログを作るのに役立つ便利な情報を紹介して行こうと思います。自分自身、フォトサイト(と呼ぶには幼稚過ぎるものも含めますが)を作り始めてから早5年くらいは経過して …

no image

AmazonのアソシエイトID入りで一番短いURL

via: AmazonはTwitterで自由にアフィリエイトして良いとは言ってないっぽい [C!] の、続きっぽくなっちゃいますが、TwitterでアフィリエイトURLをツイートするときに一番問題なの …

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第1 …

スポンサードリンク

スポンサードリンク