HIROのデザインと独立日記 「CSS」カテゴリの記事

すでにはてなではメニューの背景を繰り返し100%にできるような設定になっており、
下記の部分をCSSのカスタマイズ画面で上書きするだけでいいようだ。

div#container {
  width: 100%;
  overflow: hidden;
  background-color: #f0f;
}

さらにメニューになる部分を下記のように入れ替えます。

.sidebar{
background:#ccc;
height:100%;
}

うん、すごく簡単。

今日はデザインのカスタマイズを行う前に基本となるHTMLの構成の整理をする。
カスタマイズを行うであろうと思われる箇所を研究し、CSSの構造を変更したりした。

まずは第一弾となったネットフラワーズのデザインをシンプルなレイアウトにも変更可能なように・・
また、シンプルなレイアウトからも簡単にこのようなレイアウトにできえるように試行錯誤で挑戦。

なかなか難しいものだ。テーブルを使えばもっと楽になるが、ここまでがんばったのだから、
なるべくならテーブルは使いたくない。

そう、難しさを感じたのは縦が100%で表示するデザインを考えた事だった。
メニューもメインも偏らず、最下部はしっかり揃うようにレイアウトを考えた時に色々と大変だった。

早速、実験してみたいと思います。

これからCSSで悩んだり失敗した時はメモ代わりに
ブログに書いていきたいと思います。

その時にこの入力画面の下にあるタグに
「キーワード」を入力しておく事によって、
関連づける事ができます。

関連づけた記事を一覧表示する事ができるので
とても便利です。

CSSの復習です。
並列にオブジェクトを並べる時にレイヤーを使う。
１つ上の階層の<div>にposition:relative;を入れて、
内側にある<div>にposition:absolute;で位置を合わせる。

この時、しっかり高さを合わせるには内側にある<div>に
height:100%;と高さの指定をする事でレイアウトを整える
事ができる。

ちなみにこれはIEブラウザの問題だ。