Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* CSSレイアウト [#ebf01571]
CSSレイアウトについて解説します。
** HTMLタグ(要素)はブロック要素とインライン要素に大別で...
CSSレイアウトをする時に意識する必要があるのが、ブロック要...
** 基本的にブロック要素を横に並べることはできない [#y9b8e...
下のHTMLではpタグ(ブロック要素)とspanタグ(インライン要...
<html>
<head>
<style type="text/css">
* {margin:0;padding:0}
</style>
</head>
<body>
<p style="background:red">1</p><p style="background:yell...
<hr>
<span style="background:red">1</span><span style="backgr...
</body>
</html>
** なぜインライン要素だけでレイアウトしないのか [#y2332cc1]
多くのウェブページでは要素を箱に見立ててレイアウトします...
ブロック要素を横に並べることができないので、普通に考えれ...
<html>
<head>
<style type="text/css">
* {margin:0;padding:0}
</style>
</head>
<body>
<p style="background:red;width:100px">1</p><p style="bac...
<hr>
<span style="background:red;width:100px">1</span><span s...
</body>
</html>
幅(と高さ)を指定できないということは、左の箱はメニュー...
** ブロック要素をどうしても横に並べたければfloatかpositio...
では、ブロック要素を横に並べる方法が全くないかといえば、...
float:leftを使って左寄せのレイアウトをした例が以下です。
<html>
<style type="text/css">
* {margin:0;padding:0}
</style>
<body>
<p style="background:red;width:100px;float:left">1</p><p...
</body>
</html>
しかし、これはこれでいろいろと問題があります。一例を上げ...
<html>
<body>
<ul style="background:red">
<li style="float:left;width:50px">1</li>
<li style="float:left;width:50px">2</li>
<li style="float:left;width:50px">3</li>
</ul>
<br style="clear:both">
<hr>
<ul style="background:red">
<li style="width:50px">1</li>
<li style="width:50px">2</li>
<li style="width:50px">3</li>
</ul>
</body>
</html>
上のulタグでは背景色の赤が表示されていません。下のulタグ...
この他にも込み入ったレイアウトだとfloatの設定と解除の指定...
** TABLEレイアウトを適時使う [#i866b149]
こうして見てみるとCSSで複雑なレイアウトを実現するよりTABL...
お名前: [ ]
年齢: [ ]
都道府県: [ ]
特にラベル内の文字を右寄せにしたい場合は、これをCSSで実現...
以上でCSSレイアウトを解説しました。現状のCSSでは基本的に...
終了行:
* CSSレイアウト [#ebf01571]
CSSレイアウトについて解説します。
** HTMLタグ(要素)はブロック要素とインライン要素に大別で...
CSSレイアウトをする時に意識する必要があるのが、ブロック要...
** 基本的にブロック要素を横に並べることはできない [#y9b8e...
下のHTMLではpタグ(ブロック要素)とspanタグ(インライン要...
<html>
<head>
<style type="text/css">
* {margin:0;padding:0}
</style>
</head>
<body>
<p style="background:red">1</p><p style="background:yell...
<hr>
<span style="background:red">1</span><span style="backgr...
</body>
</html>
** なぜインライン要素だけでレイアウトしないのか [#y2332cc1]
多くのウェブページでは要素を箱に見立ててレイアウトします...
ブロック要素を横に並べることができないので、普通に考えれ...
<html>
<head>
<style type="text/css">
* {margin:0;padding:0}
</style>
</head>
<body>
<p style="background:red;width:100px">1</p><p style="bac...
<hr>
<span style="background:red;width:100px">1</span><span s...
</body>
</html>
幅(と高さ)を指定できないということは、左の箱はメニュー...
** ブロック要素をどうしても横に並べたければfloatかpositio...
では、ブロック要素を横に並べる方法が全くないかといえば、...
float:leftを使って左寄せのレイアウトをした例が以下です。
<html>
<style type="text/css">
* {margin:0;padding:0}
</style>
<body>
<p style="background:red;width:100px;float:left">1</p><p...
</body>
</html>
しかし、これはこれでいろいろと問題があります。一例を上げ...
<html>
<body>
<ul style="background:red">
<li style="float:left;width:50px">1</li>
<li style="float:left;width:50px">2</li>
<li style="float:left;width:50px">3</li>
</ul>
<br style="clear:both">
<hr>
<ul style="background:red">
<li style="width:50px">1</li>
<li style="width:50px">2</li>
<li style="width:50px">3</li>
</ul>
</body>
</html>
上のulタグでは背景色の赤が表示されていません。下のulタグ...
この他にも込み入ったレイアウトだとfloatの設定と解除の指定...
** TABLEレイアウトを適時使う [#i866b149]
こうして見てみるとCSSで複雑なレイアウトを実現するよりTABL...
お名前: [ ]
年齢: [ ]
都道府県: [ ]
特にラベル内の文字を右寄せにしたい場合は、これをCSSで実現...
以上でCSSレイアウトを解説しました。現状のCSSでは基本的に...
ページ名: