FC2ブログ

記事一覧

floatプロパティでレイアウトを配置する

CSSのfloatプロパティを活用することでHTMLの要素を縦横に自在に配置してページのレイアウトを決めることができます。今回は要素を3つ並べた3カラムのレイアウトをfloatを用いて作りました。カラムとは縦方向に並ぶ列の数の単位で表計算ソフトの列の数にも用いられます。content1はヘッダー(タイトルなどを表示する領域)として作成しているのでfloatは用いません。content2、content3、content4はメニューなどを表示できそうな領...

続きを読む

要素を横に並べる方法:floatプロパティの利用

通常HTMLの要素は記述した順に縦方向に表示されます。横に並べて表示したい場合はCSSのfloatプロパティを利用します。このプロパティを用いると要素を横方向に回りこませて表示させることができます。floatプロパティの値は次のものがあります。float: left;    このスタイルでは要素は左に配置され、続く要素も左から右へ回り込んで配置されます。float: rightt;   このスタイルでは要素は右に配置され、続く要素も右から...

続きを読む

ボックスモデルについて

CSSは各要素を装飾するだけではなく各要素の位置を指定してレイアウトを決定することができます。HTMLのそれぞれの要素はボックスと呼ばれる四角形のエリアに区切られて表示されます。このボックスはブロックレベル要素かインライン要素を持ちます。ブロックレベル要素とは見出し<h1>や文章<p>、リスト<li>などの縦方向に表示される要素です。インライン要素は主にブロックレベル要素の内容として用いられる要素...

続きを読む

CSSでのセレクタの指定

CSSではどこにどのようなスタイルを適用するかを記したものです。ここでどこにスタイルを適用するかを指定するのがセレクタです。つまりCSSの記述はこのようになるといえます。セレクタ{プロパティ: 値;}前回の記事のように<h1>や<p>を指定すればその要素すべてに指定したスタイルが適用されます。今回は主なセレクタについてについて確認したいと思います。全称セレクタ HTMLの文章中のすべての要素に適用されるセレ...

続きを読む

CSSを適用する方法

CSSをHTMLに適用させる方法は主に以下の三つがあります。タグに直接記入する<style>タグの利用外部からのCSSファイルの適用具体的にそれぞれ用いてCSSをHTMLに適用させてみます。タグに直接記入するCSSを適用させたい部分のHTMLのタグにstyle属性を追加する方法です。ただしこの方法ではタグが見づらくなりメンテナンスがやりにくくなったりします。また他のCSSと競合する可能性があり思うように上書きが難しくなります。<...

続きを読む