ビジュアル・小技

画像の周りなどに1pxの破線を引く

画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。
borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね？

その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線を引くとなるとちょっと面倒な感じがします。

ソコで、結構簡単な方法で解決できるぷちテクニックのご紹介。

背景の真ん中にテキストを配置

↓こんな画像があったとして。
背景の真ん中にテキストを配置

コノ中にテキストを入れる場合、真ん中に合わせるのがビミョーに面倒だったりします、、、よね？
そんな時にチョットだけ便利なテクニック。

何かのタイトル

こんな感じで真ん中に来ます。
上のサンプルで指定しているスタイルはこちら↓

 margin:0;
 padding:0;
 border-left:0;
 background:url(bg_hearts.gif) no-repeat center top;
 text-align:center;
 line-height:80px;

今回、横幅300pxの縦80pxの画像を背景にしているんですが、その真ん中に持ってくるために、line-heightを画像の縦幅と同じにしてます。
コレでイチイチpaddingで調整しなくてもキレイに真ん中に来るって寸法です。

今回のような、縦幅固定の画像を背景にしようする場合とかだと中々便利に使えて良いです。
ただしコレには大きな欠点があって、複数行には対応出来ません。

メニューなど、テキストが基本的に変更されない時など、使えると思います。
最近仕事の方でチョコチョコ使ってたりします。

・・・結構修正が入って、組みなおしって落ちが多いんですけどね...

dlのdt dd を横並びに

何かと便利な定義リスト。
用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。
しかし、中々思うように横並びが出来ないのが定義リスト。

今回はそんな厄介な定義リストのサンプルを作ってみました。

一つの要素で、テーブルレイアウトのように列を揃える

的確なタイトルが浮かばなかったんですが、一つの要素、例えばリストなどで常に日付が先頭に表示され、その後タイトルが続く場合や、リストのマークとは意味合いが違う場合などに複数行になった場合、
日付の下にタイトルが来て欲しくない、列を揃えてくれと言ったことが有ると思います。

横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現

かなり色んなサイトで見かけるようになった、JavaScriptを使わずにロールオーバーをCSSのみで実現するテクニック、そのやり方です。

以前のエントリーで、縦並びのメニューで同様のを紹介しましたが、横並びのメニューは随分勝手が違います。
またメニューをテキストではなく、画像で行っているのでその部分についても説明していきます。

サンプル：

ダウンロード：

使用画像

では、やり方をば、、、

文章構造を崩さず出来るだけキレイに角丸をつくってみる。

前回のエントリーでご紹介した角丸。
今回は、文章構造を維持出来るデザインが上がってきた場合の角丸の作成をしてみました。

仕様
タイトル：3行～4行くらいまで。
本文：文字数・サイズ制限無し、横幅固定。
投稿日部分：3行～4行くらいまで。

<$MTEntryTitle$>

サンプル：

http://css-happylife.com/template/06/

ダウンロード：

http://css-happylife.com/template/06/06.zip

使ってる画像。

角丸上部画像
繰り返し用画像
角丸下部画像

角丸+背景を文字数に関わらず表示させる。

CSSによる角丸テクニックはイッパイみかけるけど、ドレも可変なんすよ。

個人的には、可変より固定の方が好きだったり、実業務で可変レイアウトの角丸を作る事ってのは殆ど無かったりします。
ゆえに、実践で必要なのはウィンドウサイズによって可変する角丸より、固定幅で縦だけ伸びれば十分だったりします。

無駄なdivとか減らせますしね。

まぁユーザビリティ関係の本を読んでれば、可変レイアウトの方が良いと書かれておりますが、ソコは今回は気にしない方向で行くとして、取りあえずサンプル。

サンプル：

http://css-happylife.com/template/05/

ダウンロード：

http://css-happylife.com/template/05/05.zip

サンプルを見ていただいたトコロで実際の方法をば。

区切り線（hr）色々　其の壱

<$MTEntryTitle$>あらかじめ言っておく。
このサイトは、非常に忠実で厳格なhtmlやらに拘ってるわけじゃない。
CSSで、HappyなLifeを送っている内に、CSSっておもしろーい！って人が増えてくれたらいいのです。

前置きはこのくらいで…

ってことで！！

区切り線イッパイ作ってみた！

区切り線は通常 hr で指定する訳だけど、どーにもこうにも hr は言う事を聞いてくれない。
クロスブラウザな環境を狙うと、泣きそうになったりする。。。
そんな出来事に多々出会っている内に、一つの結論に辿り着く。

だったら隠してしまえ

因みにコレは、時々仕事でも使うテクニック（？）の一つです。


世の中に区切り線系の素材は沢山有るけれど、区切りの為に画像を連続で並べたり、スタイルを直接htmlに記述したりするのは、いけてる方法とは言えない。

提供する側としては仕方ない部分も分かるけど、やっぱりもうちょっとキレイに。
そう、スマートに提供してみたい。

そんな事を考えているうちに、今回出来上がった区切り線たち。
今回は25パターンをサクッと作ったけど、今後も増やしていきたいと思ってます。

サンプル：

http://css-happylife.com/template/04/

ダウンロード：

http://css-happylife.com/template/04/04.zip


導入方法が分からない方は、下記追記にて。
分かる方は、使いたい部分だけコピって使ってください。

↑上に行くよ