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

前置きはこのくらいで…

ってことで!!

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

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

だったら隠してしまえ

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


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

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

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

サンプル:

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

ダウンロード:

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


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


導入方法

まずはDL後解凍してください。
コレが無いと物語は始まらない感じです。

解凍すると、下記4つのファイルが入っていると思います。

  1. img-lineフォルダ
  2. index.html
  3. line.css
  4. style.css

使うのはimg-lineフォルダとline.cssです。

index.htmlは、コピペや区切り線のデザインチェックに使ってください。
style.cssは、index.htmlの見映えを心なしか整えているだけですので、不要です。

img-lineフォルダに其の壱の区切り線画像が全て入ってます。
不要な画像は削除してもらっても構いません。

んでは、事前準備が整ったトコロで、実際の導入方法をば。
色んな区切り線を使いたいhtmlファイルと同じ場所に、line.cssとimg-lineフォルダをおきます。

そして、<head> ~ </head> 内に下記を突っ込みます。

<link href="./line.css" rel="stylesheet" type="text/css" />

突っ込んだ後は、適用させたい箇所に区切り線のソースを書きます。

例えば、9番のラインを使いたいとしたら下記のように。

<div class="line_009"><hr /></div>


自分のPC上で確認できたら、line.cssとimg-lineフォルダをFTP等を使ってアップ。

コレで完了です。
区切り線を変えたい場合は、line_009とかってなってる場所の数字を変えて上げればOK!

最後に色々注意事項でも。

二次配布は禁止。
使う場合はひと言あると、「Clickで救えるボクのやる気」より救えるという噂です。