燈明日記 このページをアンテナに追加 RSSフィード

ごあいさつ

燈明日記へようこそ!!

燈明日記の主なテーマは、以下の通りです。

そして、燈明日記へ来られたのも『私』と『あなた』の何かのご縁です。なので、どうぞごゆっくりご覧下さい!


2009/3/20(金)

[] 段組みレイアウトの留意点とテンプレート

解説第十二弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


とにかく、CSSで段組みレイアウトをしていると不可思議な現象に遭遇します。

それは、ブラウザ毎、バージョン毎、表示モード毎の間だを上手く通り過ぎなければならない宿命なのかもしれません。


レイアウト計算では、つねにコンテナー要素の左右のマージン・パディング・ボーダーの幅とwidthの合計を考慮します。

間違っていると、正確なFirfoxは、段組みレイアウトになってくれませんし・・・。

逆に合っていても、不正確なIEでは、段組みレイアウトになってくれません。

ですので、この両方のいい按配のところを見つけることになるのです。


あと、上記がクリアできたとしても、大きなpre要素やtable要素、img要素、長い半角英数字などが悪さをして、カラム落ちになる場合があります。

この場合、ブラウザによっては、各カラムのコンテナーに「overflow:hidden」を指定すると回避できることがありますが・・・回避できないこともあります。


で、大枠の段組みレイアウトができたとしても、そこから詳細の見栄えをCSSで整えるには、めちゃくちゃ根気にいる作業です。

しかも、デザイナー的なセンスも必要で・・・。


ということで、老プログラマの私としては、そろそろこの辺で、CSSから撤退します。

尚、折角なので、段組みレイアウトテンプレートをプレゼントします。

しかし、そのままでは、まったく使い物になりませんので、デザイナー的センスでカスタマイズしてご使用して頂ければ幸いです。


◆段組みレイアウトテンプレート


関連ページ:

2009/3/18(水)

[] 3列段組みレイアウト(サイド固定横幅コンテンツ可変横幅編)

解説第十一弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。

今回は、3列両サイドバー固定横幅コンテンツ可変横幅のレイアウトです。

これは、シリーズで解説している2列右サイドバー固定横幅コンテンツ可変横幅の応用です。

前回の3列パーセント指定横幅のように簡単にはいきません。

とりあえず、以下がサンプルです。

◆ポイント解説

まずは、ポイントのhtml構造とCSS指示です。


・html構造
<div id="wrapper">
<div id="contents_container">
:
:
</div>

<div id="left_sidebar_container">
:
:
</div>
</div>

<div id="right_sidebar_container">
:
:
</div>

・CSS指示
:
#wrapper {
    width:100%;
    clear:left;
    float:left;
    margin-right:-180px;
}
#right_sidebar_container {
    background-color:#ffcccc;
    width:180px;
    float:left;
}
#contents_container {
    background-color:#ccccff;
    width:100%;
    float:right;
    margin-left:-180px;
}
#left_sidebar_container {
    background-color:#ffcccc;
    width:180px;
    float:right;
}
:

はじめに、wrapperとright_sidebar_containerで右サイドバーの2列左コンテンツ可変横幅右サイドバー固定横幅を行います。

つぎに、wrapper内のcontents_containerとleft_sidebar_containerで左サイドバーの2列左サイドバー固定横幅右コンテンツ可変横幅を行います。

すると、結果的に3列両サイドバー固定横幅コンテンツ可変横幅のレイアウトになるのです。


尚、2列左コンテンツ可変横幅右サイドバー固定横幅は、関連ページの本シリーズを読んでもらえると理解できるようになっています。


関連ページ:

2009/3/16(月)

[] 段組みレイアウトの基礎の基礎

解説第十弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。

えーと、今まで解説してきた段組みレイアウトですが・・・「HTMLってなに」、「CSSってなに」って人にはチンプンカンプンだったのだと思います。

なので、今回は、段組みレイアウトの基礎と関係があるところのHTMLとCSSの基礎を解説いたします。


まず、HTML(HyperText Markup Language)とは、文章の要素をタグでマークアップし、文書内の要素を明確化します。

文章内の要素とは、タイトル、見出し、段落、リスト、引用、画像・・・等です。


つぎに、CSS(Cascading Style Sheets)とは、HTMLで明確化した要素をどのように修飾(表示)するかを指示します。

HTMLとCSSの関係は、HTMLでマークアップした要素にid属性やclass属性を指定して、それをCSSのセレクタに関係付けします。

また、タグ名だけでマークアップした要素に対しても、タグ名だけで関係付けができます。

ちなみに、id属性は、その文書内では一意(ユニーク)でなければなりません。


具体的(サンプルソース参照)には、div要素のid属性のmain_containerをCSSに関係付けるには、セレクタを#main_containerとします。

また、p要素のclass属性のsidetitleをCSSに関係付けるには、セレクタを.sidetitleとします。

つまり、idが頭「#」のセレクタで、classが頭「.」のセレクタです。

ちなみに、タグ名だけでマークアップした要素は、タグ名のセレクタになります。


サンプルソース

<html>
<head>
<title>テスト</title>
<style type="text/css">
#main_container {       /* #main_containerがセレクタ */
    width:96%;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
}
.sidetitle {            /* .sidetitleがセレクタ */
    padding: 0.5em 0;
    border-bottom: 1px solid #666666;
}
h1 {                    /* h1がセレクタ */
    margin-bottom:0.5em;
    padding:5px 0 5px 5px;
    border-top:1px solid #888888;
    border-bottom:1px solid #888888;
}
</style>
</head>

<body>
<div id="main_container">
<h1>見出し</h1>
<p class="sidetitle">サイドタイトル1</p>
</div>
</body>
</html>

CSSのセレクタとプロパティをもっと知りたい人は、以下のページをどうそ!

関連ページ:

2009/3/15(日)

[] 3列段組みレイアウト(3列パーセント指定横幅編)

解説第九弾です。


今までは、メインコンテンツサイドバーの2列段組みレイアウトでしたが、今回は3列段組みレイアウトに挑戦してみます。


挑戦と言っても、あっさり出来てしまいました。

特に3列パーセント指定横幅でのレイアウトは、比較的簡単でした。

しかし、IEバグには悩まされました。

ul要素中の改行コードに反応して変なスペースが入ってしまうんです。

改行コードを除去するとFirefoxと同じ表示になりました。


まず、HTMLの文書構造は、サンプルページのソースを見てもらえれば分かるように、以下のように非常にシンプルです。

IE用の特別なdiv要素などは必要ありません。

  • header_containerというidのdiv要素(ヘッダー)
  • menubar_containerというidのdiv要素(メニューバー)
  • left_sidebar_containerというidのdiv要素(左サイドバー)
  • contents_containerというidのdiv要素(コンテンツ)
  • right_sidebar_containerというidのdiv要素(右サイドバー)
  • footer_containerというidのdiv要素(フッター)

CSSの方も、非常にシンプルです。

left_sidebar_container、contents_container、right_sidebar_containerを親要素に対して、各々フロートさせて、横幅を20%、59.9%、20%でとるだけです。

contents_containerを59.9%にしているのは、60%だとIEではカラム落ちが発生する場合があるためです。


今回の3列パーセント指定横幅段組みレイアウトは、非常にシンプルなのですが、サイドバー2列固定幅の3列段組みレイアウトは、結構難しいです。

これは、次回以降に解説する予定です。


関連ページ:

2009/3/14(土)

[] 段組みレイアウトの基礎

解説第八弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回は、段組みレイアウトの基礎的なところを解説してみます。

スタイル指定なしのHTMLから徐々に段組みレイアウトのHTMLへ進化させていきます。

まずは、スタイル指定(CSS)なしのHTMLです。

尚、HTMLソースは、ブラウザで表示させた後、ブラウザのメニューからの表示で見てください。

まず、サンプル1でCSSを使わず(見やすくするため「background-color」は例外)以下の構造のHTMLを表示しています。

  • header_containerというidのdiv要素(ヘッダー)
  • contents_containerというidのdiv要素(コンテンツ)
  • sidebar_containerというidのdiv要素(サイドバー
  • footer_containerというidのdiv要素(フッター)

サンプル1では、ブラウザのデフォルトでのマージンとパディングがあるので、サンプル2ではこれをゼロにします。


サンプル3では、サンプル2でのcontents_containerを左フロートさせ右側へsidebar_containerを回り込ませてみます。


一見、IEFirefoxも段組みになります。

しかし、sidebar_containerは親要素の100%の横幅になっているだけで、実は段組みではないのです。

フロートさせたブロックレベル要素の後につづくフロートでないブロックレベル要素は、あたかも前のフロート要素が無かったようにレイアウトされるのです。


では、段組みさせるのは、どうするかというと、後につづくブロックレベル要素もフロートさせます。


これで、IEもFirefoxも段組みになりました。

しかし、IEは、ウインドウの大きさを変えると、段組みになったり、カラム落ちになったり不安定なのです。

これを解決するには、sidebar_containerの横幅を30%から29.9%にすると、IEでも大丈夫になりますね。

どうやら、IEでは、レイアウト計算で誤差がでるようです。


これで、段組みが完成しました。

しかし、ulやol要素の点や番号の表示が変です。

なので左マージン(margin-left:25px;)をとり、いい感じになりました。


このように、レイアウト横幅を親要素のパーセントで指定すると比較的簡単に段組みレイアウトができます。


関連ページ:

2009/3/13(金)

[] 右サイドバーを左サイドバーへ

解説第七弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回、解説しているCSSソースは、右サイドバーの段組レイアウトです。

実は、以下の3箇所のrightとleftを逆すれば、左サイドバーの段組レイアウトになります。

#contents_container {
    background-color:#ccccff;
    width:100%;
    clear:left;

    margin-right:-200px;  /* 右サイドバー */ 
/*    margin-left:-200px;    左サイドバー */

    float:left;           /* 右サイドバー */  
/*    float:right;           左サイドバー */

}
#for_ie_wrapper {
    margin-right:200px;   /* 右サイドバー */ 
/*    margin-left:200px;     左サイドバー*/
}

右サイドバーは、メインコンテナーを幅100%(親要素に対して100%)で左フロートさせ、右マージンを200pxネガティブさせ、空いたところに右サイドバーを回り込ませます。


左サイドバーは、これを逆にするだけです。

つまり、メインコンテナーを幅100%(親要素に対して100%)で右フロートさせ、左マージンを200pxネガティブさせ、空いたところに左サイドバーを回り込ませます。


関連ページ:

2009/3/12(木)

[] CSS詳細部の解説2(メニューバー)

解説第六弾です。

本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回は、メニューバーCSSの詳細を解説します。

/*--- menubar ---*/
#menubar_container ul {
    width: 100%;
    list-style-type: none;
    background-color: #eeffff;
}
#menubar_container li {
    width: auto;
    float: left;
    border-right: 2px groove #cccccc;
    height:2.2em;
}
#menubar_container li a {
    text-decoration: underline;
    display: block;
    width: auto;
    padding: 0.5em 1em;
    background-color: #eeffff;
    color: #000000;
}
#menubar_container li a:hover {
    background-color: #99ccff;
    color: #ff0000;
}
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

menubar_container内のul要素の幅を親要素main_containerの幅100%とし、リストの点を無しにして、バックカラーをとりあえず#eeffffとします。

/*--- menubar ---*/
#menubar_container ul {
    width: 100%;
    list-style-type: none;
    background-color: #eeffff;
}

menubar_container内のli要素の幅を自動にし、左フロートさせ、右ボーダーを2px(groove #cccccc)とり、高さ2.2emとします。

これは、普通のダウンリストを左フロートさせることでメニューリストにしています。

#menubar_container li {
    width: auto;
    float: left;
    border-right: 2px groove #cccccc;
    height:2.2em;
}

menubar_container内のli内のa要素をアンダーラインして、インライン要素からブロックレベル要素に変え、あとは以下略。

a要素をブロックレベル要素にすると親要素のli内にピッタと収まるのです。

#menubar_container li a {
    text-decoration: underline;
    display: block;
    width: auto;
    padding: 0.5em 1em;
    background-color: #eeffff;
    color: #000000;
}

menubar_container内のli内のa要素の擬似クラスhoverにバックカラーを指定して、フォーバー(マウスオン)すると色が変わるようにしています。

#menubar_container li a:hover {
    background-color: #99ccff;
    color: #ff0000;
}

関連ページ: