このサイトの構造を解説
このサイトは左右2段のレイアウトで作っている。この左右2段組みのレイアウトの作り方、背景の貼り方、メニューボタンの制作方法などを記載。
3段組の構造を解説
2段組の応用として3段組でも作成。ボックスを入れ子にしたり、「position: absolute」や「float」などで組む方法をテスト。
知っていると役に立つCSSのTIPS
ボックスの構造や、DOCTYPE宣言、基本レイアウトスタイル、スタイルの初期化、セレクタ、記述の優先度、リンクの指定、ショートハンド、単位や色など。
文字の大きさや行間などの一覧
プラットフォームにより標準フォントサイズが違うため、同じCSSでも表示が変わる。その確認用に作ってみたページ。
ボーダーの太さや破線などの形式の一覧
プラットフォームやブラウザによって表示が変わることの確認用。また、スタイル指定で立体的なボックスを作る方法なども記載。
CSSやJavaScriptを使った便利な小技集
飾り罫のついたコラム、プルダウンメニュー、スワップイメージなど。CSSだけで、または簡単なJavaScriptを組み合わせて作る小技集。
Information
● TIPSの「セレクタとは」で、「:before」「:after」などの「疑似要素」が抜けていたので追加しました。(2013.09.19)
● 便利な小技（こわざ）の「フォームを整える」を全面修正しました。旧版では<dl>要素でフォームを整列させていましたが、<dt>だけ使う部分などHTMLの文法上おかしい点があったため修正しました。また、フロート解除に「:after」疑似要素を使用しました。(2013.09.19)
●「ほんっとにはじめてのHTML」で「CSSの @import と @media」を掲載。
CSSファイルで「メディアタイプ」を切り替える指定方法。link要素を使うよりスマート。(2012.09.11)
●「ほんっとにはじめてのHTML」で、CSS3による「応用で水玉や縞模様チェック柄」を掲載。(2011.08.15)
●「ほんっとにはじめてのHTML」で、CSS3による「円形グラデーション」を掲載。(2011.08.08)
●「ほんっとにはじめてのHTML」で、CSS3による「テキストのシャドウ」を掲載。(2011.08.04)
●「ほんっとにはじめてのHTML」で、CSS3による「ボックスのシャドウ」を掲載。(2011.07.28)
●「ほんっとにはじめてのHTML」で、CSS3による「ボックスの角丸」を掲載。(2011.07.25)
●「ほんっとにはじめてのHTML」で、CSS3による「線形グラデーション」を掲載。(2011.05.31)
「CSS3」は「できること」が画期的に増加。この「CSSレイアウト」も「CSS3レイアウト」に刷新すべく検討中です。
●本サイトの姉妹サイト「ほんっとにはじめてのHTML」を開設しました。HTML5 & CSS3 ベースです。
HTMLとCSSの絡ませながら、索引として活用することを目的に書いていきます。(2010.11.05)
●このサイトは2008年10月に、 XHTML1.0 と CSS2 によるサイト構築の基本をまとめたものです。
W3CはHTML5の標準化を目指す意向ですが、本サイトは「HTML要素に対してCSSでレイアウトを整える」という今後も変わらない基本を掲載してますので、当分はこのまま公開してまいります。
HTMLの歴史とCSSを追記しました。(2010.07.25)
参考資料
ページの最上部へ