↓こんな画像があったとして。

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

何かのタイトル

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

 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で調整しなくてもキレイに真ん中に来るって寸法です。

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

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

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

何を思ったか、写真なんて撮らないのにフォトブログっぽいモノが作りたくなり、作ってみました。

このフォトブログをテンプレートとして配布しようと思っているのですが、準備に想像以上に手間取り、中々公開出来ないので、こんなん作りましたよって事で雑記カテゴリでご紹介です。

写真やイラストなどの画像を魅せることに注力し、写真が映える色とし黒を使い、見せ方もLightboxを使う事で「画像を見る」ことだけに専念出来るかなと思い今回のようなデザインになりました。

トップページのひたすら写真が並ぶのも、色々悩んだ挙句なんですが、あーいった形で落ち着きました。

SAMPLEだと枚数少なくていけてないんですが、100枚近くエントリーすると中々盛観です。

一応SAMPLEファイルそのままのデータをアップしましたので、興味ある方はどぞ。
（SSI使ってたり、エントリー方法を知らないと使い物にならなそうなんで、アップする価値はあんまり無いんですが…）

ダウンロード：

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

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

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

2006年10月19日に行われた、CSSNiteに参加してきました。

行間を指定しているにも関わらず、imgなどの置換要素が含まれると、WinIEでline-heightで指定した値より小さくなるというバグ。
line-heightの値があまり大きくなければさして気にはならないのですが、line-height:200%など多少大きめに指定している場合だと、このデザイン崩れがやっかいです。

オンライン上でいとも簡単に.htaccessファイルを作成してくれる、ヒジョーに便利なツール。
ツールだけどサイトなので、Webサイトカテゴリに。（もちろんCSSで組まれてます）

これ、すべての動作がJavaScriptなんで、ファイル作成時にサーバとの通信は一切なし。
.htpasswd の作成時にサーバにデータが残ったりしたら、なんてことが心配な人にも安心です。

.htaccessに関してボクはぜーんぜん分かってないので、こういったツールが有ると非常に助かります。

.htaccess Editor

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

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

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

サンプル：

• サンプルページを見る

ダウンロード：

• サンプルをダウンロード

使用画像

• ロールオーバー用画像
• ナビ背景画像

では、やり方をば、、、

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

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

サンプル：

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

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

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

前置きはこのくらいで…

ってことで！！

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

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

だったら隠してしまえ

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

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

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

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

サンプル：

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

ダウンロード：

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

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

3カラムレイアウトのサンプルです。

デザインはテキトーでいいや。と思って作ってたのに、余計な装飾を始めてしまって中途半端っぷりが出ていたりするのは、見なかったことにして。

えっと、今回のサンプルで行っている事でも。

• 見た目上は真ん中にあるメインコンテンツを、ソース上ではヘッダーの次に。
• 左、真ん中、右のドレが長くなっても背景が最後まで表示されるように。
• 最近の時代にあわせて（？）横幅が多少大きめ。

ざっとこんなトコロでしょうか。

ブラウザチェックに関しては、WinIE6、FireFox1.5、Netscape7.1、Opera9.01のみ。
Mac環境はわかりません。崩れてたらごめんなさい...
あ、WinIE5.xでは崩れてます。仕事じゃないのでソコまで対応しておりません。ご了承を。
（MacのMacのOpera9.1、Netscape 7.1、Firefox2.0.0.3、Safari2.0.4でダイジョブだったみたい）

取りあえず、サンプルと持ち帰り用でも。

サンプル：

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

持ち帰り用：

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