小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

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

CSSレイアウト

解説第十弾です。
本コンテンツは、以下のページの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">サイドタイトル１</p>
</div>
</body>
</html>

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

関連ページ：