スタンダード・デザインラボ

　いろいろレイアウトをしていると、divに当てたcssの「padding」が時折妙な動きをして、レイアウト崩れを起こすことがあります。paddingは、どういう仕組みなのか、調べてみます。...

　これは、実際に「divブロック」をフロートさせて様子を見るツールです。 　どんな風にフロートされるのか、IEとFirefoxでどのように表示が変わるのか、確かめてください。...

「z-index」は、「position」の補助的役割をするスタイルです。　「position」についてはこちらから。→positionを使いこなす　具体的には、ボックスの重なり順を指定するスタイルです。...

　positionの概要が分かったところで、わかりにくい「relative」（相対位置）と「absolute」（絶対位置）の違いについての考察です。...

「position」を使いこなすと、divボックス（ブロック要素）を画面の自由な場所に配置できるようになります。　例えば、スクロールしても常に右上や左上に表示されているバナーなどを見たことがあると思います。　或いは、スクロールしても常にサイドバーが画面右・或いは左で固定されている場合なども、ヘッダーが、マウスホイールで画面をスクロールさせても、常にヘッダーの位置で消えていかない場合なども、この「position」を...

　前回までで、テーブルタグはあらかた使えるようになりました。（最初から読むには「テーブルタグを理解してみる」から。）　しかし、デザイン部分でテーブルを細かく制御しようとすると、今まで紹介したスタイルシートでは限界が出てきます。　ブラウザによって、あまりにも表示が違ったり、横幅（width）指定しているのに、全く言うことを聞かない。なんてことが発生してきます。　これを「ある程度」制御する方法があります。...

　今回は、実際にテーブルタグをデザインしてみます。　テーブルを使えば、今まで文章では説明しづらかったことが、グラフィカルにわかり易く表現出来るようになります。　いろんな見やすいテーブルをデザインしていってください。...

　テーブルが使えるようになったら、テーブルにも他のタグ同様クラスを当てていきます。　テーブルタグに当てられるクラスは、ほぼdivボックス同様です。　width、フォント系やバックグランドカラーなどが当てられます。　テーブルで使うスタイルで、かなりデザインが整形出来るものをピックアップ。...

　テーブルタグ、この辺になると怪しいのですが（いや、他も独学なんで怪しいんですが…汗）、今回は、まずタグから研究していきます。　タグを使ったことが有り、テーブルタグも知っている人は、テーブルタグのめんどくささはご存知だと思いますが…　やっぱり、テンプレートをレイアウトする時には強力な武器になります。...

　とうとう前回までで、ブログの骨格が作れるまでになってしまいました。　今回は、殆どの人がここで躓くであろう、ブログをセンタリングする方法です。...