いつもお世話になります。
前回の見出しブロックに引続き、関西ユーザーグループ会合でのアイディアを
実現していただきありがとうございます。
調べましたところ、<hr />タグでも装飾は可能なようです。
ただ、扱いが少しややこしいみたいです。
hr {
border: dotted #ff0000; /* 線のスタイルと色を指定 */
border-width: 1px 0 0 0; /* 線の太さを指定 */
height: 1px; /* for IE6,7 線の太さを指定 */
width: 60%; /* 線の長さを指定 */
margin: 0 auto 0 0; /* 線を左に寄せる */
text-align: left; /* for IE6,7 線を左に寄せる */
clear: both; /* for IE6,7 */
}
上記の通り、IEの6,7で表示させようと思えば別途指定が必要です。
あと、機能について意見申し上げますと、せっかく線の「長さ」を指定できるなら
「左寄せ・中央揃え・右寄せ」もできたら良いなぁと思います。
また「ブロック高さ」の機能は、いまひとつピンとこないです。
線の上下の間隔を指定できるようにした方が良い？のかもしれません。
以上、お役に立ちましたら幸いです。
水平線表示ブロック作成
2012年6月1日 at 12:01
水平線を表示するブロックを作成しています。
仕様は下記のものが設定できるというものです。
・線の太さ
・ブロック高さ
・線の色
・線の長さ
・線の種類
当初 hrタグ を使用して作成しようと考えていたのですが、
太さや、色などが変更できないため（原因はよく分かっていません）、
view.php に divタグを用意しstyle ="" を記述して、水平線を表示しています。
ただ、view.phpに直接CSSを書くのもおかしいような気がしますし、
実際そのようにアドバイスいただいております。
view.phpに直接CSSを書かずに作成する方法はございますでしょうか？
ご教授お願いします。
ソースファイルはここにあります。
http://github.com/acliss19xx/horizon_block
tomoac
Re: 水平線表示ブロック作成
<hr />タグは、昔から意味が変わったようです。
昔は、水平線という視覚的な意味と文章の区切りの２つの意味合いがありましたが、視覚的要素はCSSで指定し、HTMLタグは文章内容の意味を示すように明確に区別するという本来のマークアップ言語の仕様に移ってきています。
なので、そういう意味なら<hr />タグはなにも表示されないということなのですが、過去の経緯があり、互換性の移行期間として従来通り水平線が表示されるというのが実情のようです。
ただし、昔の<hr />タグは太さを変えられるなどの視覚的バリエーションがありましたが、いまはできなくなっているようです。
よって、水平線を視覚的意味で使いたいなら<div>タグで行うのが正解のようです。
で、<div>タグ内でのstyleの指定ですが、これは何よりも優先される指定なので、テーマや、ブロックで指定できるCSSタグより優先されるので、テーマを変えても視覚的変化が得られず、違和感が出てしまうように思います。
たまたま水平線１本＝１ブロックなので、ClassかIDを指定して、<hr />タグと共に<style>...</style>タグを出力してスタイルを指定するようにしてはどうでしょうか。