味噌ラーメン
★CSS
●overflow
・・・ボックスからあふれた内容の処理を指定する。
<p class="overflowtestA～D">
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
</p>で試してみます。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
↑のCSSの記述は、
/*--.overflowtestA設定----------------------------------------------*/
.overflowtestA {
background-color: #00ff00;
width: 80px;
height: 80px;
overflow: visble;
}
visibleはあふれた内容を、そのまま表示します。ボックスサイズは変わりません。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
↑のCSSの記述は、
/*--.overflowtestB設定----------------------------------------------*/
.overflowtestB {
background-color: #00ff00;
width: 80px;
height: 80px;
overflow: hidden;
}
hiddenはあふれた内容は表示されません。ボックスのサイズは変わりません。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
↑のCSSの記述は、
/*--.overflowtestC設定----------------------------------------------*/
.overflowtestC {
background-color: #00ff00;
width: 100px;
height: 80px;
overflow: scroll;
}
scrollはスクロールバーが表示され、スクロールバーで内容を確認できます。ボックスのサイズは変わりません。
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
↑のCSSの記述は、
/*--.overflowtestD設定----------------------------------------------*/
.overflowtestD {
background-color: #00ff00;
width: 100px;
height: 80px;
overflow: auto;
}
autoはブラウザが自動で判断します。
●visibility
・・・要素の非表示/表示を指定します。
<p class="visibilitytestA～B">醤油ラーメン</p>
<p class="visibilitytestA～B">味噌ラーメン</p>
<p class="visibilitytestA～B">とんこつラーメン</p>
<p class="visibilitytestA～B">カレーラーメン</p>
で試してみます。
醤油ラーメン
味噌ラーメン
とんこつラーメン
カレーラーメン
上のCSSの記述は、
/*--.visibilitytestA設定----------------------------------------------*/
.visibilitytestA {
background-color: #00ff00;
visibility: visible;
}
visibleにしたので全部表示されます。
醤油ラーメン
味噌ラーメン
とんこつラーメン
カレーラーメン
上のCSSの記述は、
/*--.visibilitytestB設定----------------------------------------------*/
.visibilitytestB {
background-color: #00ff00;
visibility: hidden;
}
hiddenは要素を非表示にします。（※味噌ラーメンとカレーラーメンはclass=visibilitytestBをはずしています。）
●display
・・・要素の表示形式を指定します。
<p class="displaytestA～D">こんにちは こんばんは</p><p class="displaytestA～D">おはよう おやすみ</p>で試してみます。
こんにちは こんばんは
おはよう おやすみ
↑のCSSの記述は、
/*--.displaytestA設定----------------------------------------------*/
.displaytestA {
background-color: #ffff00;
display:inline;
}
pタグがinlineになりましたね。
こんにちは こんばんは
おはよう おやすみ
↑のCSSの記述は、
/*--.displaytestB設定----------------------------------------------*/
.displaytestB {
background-color: #ffff00;
display:block;
}
pタグはもともとblock要素なので、この場合はデフォルトかな？
こんにちは こんばんは
おはよう おやすみ
↑のCSSの記述は、
/*--.displaytestC設定----------------------------------------------*/
.displaytestC {
background-color: #ffff00;
display:list-iten;
}
list-itenにしたけどlist見たいになると思ったけどこのブログではなりませぬ。ホントはなるらしいです。
こんにちは こんばんは
おはよう おやすみ
↑のCSSの記述は、
/*--.displaytestD設定----------------------------------------------*/
.displaytestD {
background-color: #ffff00;
display:none;
}
noneだと要素を非表示にします。全部消えました。
★同じページ内でのリンクを試してみます。
マーカーを設定する。
<p><a name="ramen">味噌ラーメン</a></p>
マーカーへのリンク
<p><a href="#ramen">ラーメン</a></p>
ラーメン
↑のリンクでマークした味噌ラーメンまでとびます。hrefの属性名のはじめに#をつけましょう。
PR
