サイドコンテンツ 【メイン】

推し：加藤安那

加藤安那 (ユメオイ少女)

Twitter: @_hana_celeb_

最新 15 件のエントリー

カテゴリ

管理

サイドコンテンツ 【サブ】

ブログ エントリー

  • サイドバーとコンテンツ領域の境界線

    プログラム - 2015/01/30 02:31:12
    
■ HTML
<div id="border_separator">&nbsp;</div>

■ スタイルシート
div#border_separator{
float: left;
width: 1px;
border-left: 1px solid #d0d0d0;
border-radius: 100%;
overflow: hidden;
}

    サイドバーとコンテンツの境界線

    こうするとサイドバーとコンテンツ領域の境界線の上下が自然とフェードアウトする縦線が出来る。

    画像の境界線色見やすいように濃い目に #a0a0a0 にしているけど、実際は #d0d0d0 とか #e0e0e0 ぐらいの薄さでいいと思う。

    AJAX を使ってコンテンツの高さが動的に変わる場合は、どこかのタイミングで境界線の高さをコンテンツ領域の高さに合わせるように以下のようにすると良い。

    
// jQuery でのサンプル
$('#border_separator').height($('#content').height());

    人によっては、中身の無い div を置くことに嫌悪感がでるかもしれない。