トップ > スッキリかんたんスタイルシート


DELLのパソコンへ
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
display 要素の表示形式を指定する

displayプロパティで要素の表示形式を変更する方法を解説します。
値の種類は4つあります。

【display:block】要素をブロック要素として表示し,要素の後に改行が入る。
【display:inline】インライン要素として扱われる。
【display:list-item】要素をリスト項目として扱う。
【display:none】要素そのものをなくしてしまうので,他の要素のレイアウトに影響を与えない。

◆以下は,表示形式を指定した状態 *************************************

この下にある画像にnoneを指定して見えなくしています。
↓桂林 2002.5.1
桂林

<span>で指定されたインライン要素にblockを指定したので,改行されました。

<div>で指定されたブロック要素に

inlineを指定したので
インライン要素として扱われています。

<span>で指定された次のインライン要素にlist-itemを指定すると,リスト表示その1 リスト表示その2と表示されます。

◆表示指定をはずすと以下のようになります ******************************

この下にある画像にnoneを指定して見えなくしています。
↓桂林 2002.5.1
桂林

<span>で指定されたインライン要素にblockを指定したので,改行されました。

<div>で指定されたブロック要素に

inlineを指定したので
インライン要素として扱われています。

<span>で指定された次のインライン要素にlist-itemを指定すると,リスト表示その1 リスト表示その2と表示されます。

>>> HTMLソース
a要素をブロック要素に指定する
品揃え・価格に自信あり! Yahoo!BBのお申し込みはココをクリック!! マイクロソフト ショッピング 全国31店舗展開!BTOパソコンならドスパラへ!
a要素はwidthを使った幅の指定ができませんが,ブロック要素を使って左のように幅を合わせることができます。
>>> HTMLソース
position 要素の配置方法〜絶対配置と相対配置

ここにポジションを指定。

▼position:absolute <絶対配置> 表示領域(ブラウザ画面)の左上端からの距離。
HTML記述の領域は表示されない。

position

absolute


*************************************************************************
▼position:relative <相対配置> 通常の配置の位置を規準として,そこから指定した距離。
HTML記述の領域は残される。

position

ここにポジションを指定。

relative


*************************************************************************
▼position:static <通常通りの配置> 通常の配置の位置。

position

通常のポジション。

static


*************************************************************************

>>> HTMLソース
マイナスの値を相対配置で指定する
▼position:relative <相対配置> 通常の配置の位置を規準として,そこから指定した距離。
HTML記述の領域は残される。

position

ここにポジションを指定。

relative

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
要素の重なり〜HTMLの要素の順
2番と3番のHTMLの要素の記述を入れ替えると重なり方が変わります。
1番
2番
3番
1番
3番
2番
>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
z-index 要素の重なり順序を指定する
z-index:3
z-index:2
z-index:4

z-index:1
指定した数字が大きいと,より全面に表示されます。
Z-indexプロパティは,positionプロパティで,relativeなどの値をもつ要素にしか適用されません。
>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
float 回り込みの指定
セブンアンドワイ「コンピュータ」
  • セブン-イレブンで受け取れば送料・手数料0円。ご購入いただいた商品の価格にかかわらず、送料・手数料が一切不要。セブンアンドワイならではの、お得なサービスです。
  • セブン-イレブンなら、24時間365日受け取り可能。昼間不在がちの方、休日外出がちの方でも、セブン-イレブンならご都合に合わせて何時でも受け取ることが可能です。
  • セブン-イレブン受取りなら、現金で安心お支払い。「クレジットカードは不正利用が心配」という方でも、セブン-イレブン受取りなら、商品と引換えにレジにて現金でお支払いいただけます。
  • 専用パッケージでお届け。中身の情報はご本人様以外わかりません。ご購入いただいた商品は、専用パッケージでしっかり梱包してお届けします。配送伝票にも商品名は記入されないので、店員にも梱包の中身はわかりません。
    >>> HTMLソース
  • 画像以外の要素にも回り込み

    セブンドリーム
    ドットコム

  • お近くのセブン-イレブンで受取れば送料・手数料無料!宅配でも全国一律380円!・・・セブンドリーム・ドットコム
  • セブン-イレブンが近くにない方も安心。「宅配」でもお得!
  • CD、DVD、パソコンソフトに限り、一回のお買上げ金額が合計 1,500円(税込)以上の場合、送料無料です。※他のカテゴリーの商品を同時にご注文された場合は、他の商品の送料が課金されます。あらかじめご了承ください。
    >>> HTMLソース
  • 要素と画像を並べて,回り込み

    第6巻
    『ハリー・ポッターと謎のプリンス』

    ハリーポッターバナー 『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選
    世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー『ハリー・ポッターシリーズ』。2006年5月、その第6巻『ハリー・ポッターと謎のプリンス』が発売されます。

    ◆2006年5月17日水曜日、あなたは16歳のハリーと再会する!◆
    「謎のプリンス」とはだれか?一段と成長したハリーの新しい恋人は?宿敵ヴォルデモートの戦いで、またしても悲しい別れが・・・。ハリーの運命を予言した第5巻に続き、第6巻が過去の謎を解き明かす。一気に読ませる30章!
    >>> HTMLソース
    要素を左右に,テキストを中央に

    第6巻
    『ハリー・ポッターと謎のプリンス』

    ハリーポッターバナー 『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選
    世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー『ハリー・ポッターシリーズ』。2006年5月、その第6巻『ハリー・ポッターと謎のプリンス』が発売されます。

    ◆2006年5月17日水曜日、あなたは16歳のハリーと再会する!◆
    「謎のプリンス」とはだれか?一段と成長したハリーの新しい恋人は?宿敵ヴォルデモートの戦いで、またしても悲しい別れが・・・。ハリーの運命を予言した第5巻に続き、第6巻が過去の謎を解き明かす。一気に読ませる30章!
    >>> HTMLソース
    WinIE
    5.05.56.0
    WinNS
    4.x6.x7.x
    WinOpera
    6.07.x8.0
    winFirefox
    1.x
    MacSafari
    1.x2.0
    MacNs
    4.x6.x7.x
    MacOpera
    6.07.58.0
    MacFirefox
    1.x
    【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
    clear 左側の要素に対する回り込みを解除する

    セブンドリーム
    ドットコム

  • お近くのセブン-イレブンで受取れば送料・手数料無料!宅配でも全国一律380円!・・・セブンドリーム・ドットコム

  • セブン-イレブンが近くにない方も安心。「宅配」でもお得!
  • CD、DVD、パソコンソフトに限り、一回のお買上げ金額が合計 1,500円(税込)以上の場合、送料無料です。※他のカテゴリーの商品を同時にご注文された場合は、他の商品の送料が課金されます。あらかじめご了承ください。

    >>> HTMLソース
  • 中央の回り込みを解除する

    第6巻
    『ハリー・ポッターと謎のプリンス』

    ハリーポッターバナー 『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選
    世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー『ハリー・ポッターシリーズ』。2006年5月、その第6巻『ハリー・ポッターと謎のプリンス』が発売されます。

    ◆2006年5月17日水曜日、あなたは16歳のハリーと再会する!◆
    「謎のプリンス」とはだれか?一段と成長したハリーの新しい恋人は?宿敵ヴォルデモートの戦いで、またしても悲しい別れが・・・。ハリーの運命を予言した第5巻に続き、第6巻が過去の謎を解き明かす。一気に読ませる30章!

    >>> HTMLソース
    WinIE
    5.05.56.0
    WinNS
    4.x6.x7.x
    WinOpera
    6.07.x8.0
    winFirefox
    1.x
    MacSafari
    1.x2.0
    MacNs
    4.x6.x7.x
    MacOpera
    6.07.58.0
    MacFirefox
    1.x
    【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
    overflow 内容が収まらない場合の処理方法

    ◆overflow:visible◆
    ボックス領域の大きさを指定していると,要素の内容が領域内に収まらないときがある。<overflow>プロパティは,はみだした内容をどのように表示するか指定する。値には,visible,hidden,scroll,autoがある。
    【visible】収まりきらない内容をそのまま表示する。
    【hidden】収まりきらない内容は表示しない。
    【scroll】スクロールバーをつけてすべての内容が見られるようにする。
    【auto】処理方法はブラウザに依存する。(一般的にはスクロールバーが付く)

    ◆overflow:hidden◆
    ボックス領域の大きさを指定していると,要素の内容が領域内に収まらないときがある。<overflow>プロパティは,はみだした内容をどのように表示するか指定する。値には,visible,hidden,scroll,autoがある。
    【visible】収まりきらない内容をそのまま表示する。
    【hidden】収まりきらない内容は表示しない。
    【scroll】スクロールバーをつけてすべての内容が見られるようにする。
    【auto】処理方法はブラウザに依存する。(一般的にはスクロールバーが付く)

    ◆overflow:scroll◆
    ボックス領域の大きさを指定していると,要素の内容が領域内に収まらないときがある。<overflow>プロパティは,はみだした内容をどのように表示するか指定する。値には,visible,hidden,scroll,autoがある。
    【visible】収まりきらない内容をそのまま表示する。
    【hidden】収まりきらない内容は表示しない。
    【scroll】スクロールバーをつけてすべての内容が見られるようにする。
    【auto】処理方法はブラウザに依存する。(一般的にはスクロールバーが付く)

    ◆overflow:auto◆
    ボックス領域の大きさを指定していると,要素の内容が領域内に収まらないときがある。<overflow>プロパティは,はみだした内容をどのように表示するか指定する。値には,visible,hidden,scroll,autoがある。
    【visible】収まりきらない内容をそのまま表示する。
    【hidden】収まりきらない内容は表示しない。
    【scroll】スクロールバーをつけてすべての内容が見られるようにする。
    【auto】処理方法はブラウザに依存する。(一般的にはスクロールバーが付く)

    >>> HTMLソース
    WinIE
    5.05.56.0
    WinNS
    4.x6.x7.x
    WinOpera
    6.07.x8.0
    winFirefox
    1.x
    MacSafari
    1.x2.0
    MacNs
    4.x6.x7.x
    MacOpera
    6.07.58.0
    MacFirefox
    1.x
    【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
    visibility 表示・非表示
    表示の指定 ****************************************************

    【visible】通常と同じように要素を表示する。

    この行に,<visibility:visible>を指定しています。

    【hidden】要素を表示しない。ただし,要素がしめる領域は確保する。

    ****************************************************************

    非表示の指定 **************************************************

    【visible】通常と同じように要素を表示する。

    この行に,<visibility:hidden>を指定しています。

    【hidden】要素を表示しない。ただし,要素がしめる領域は確保する。

    ****************************************************************

    visibility:hiddenとdisplay:noneの違い *************************

    【行1】行1と行3の間にある行2に,display:noneを指定しています。

    【行2】この行に,<display:none>を指定しています。

    【行3】行2は非表示とともに要素そのものが存在しないような扱いになる。

    ****************************************************************
    >>> HTMLソース
    古くて新しい!これからはAjax

    つくろう!魅せよう! スッキリかんたんスタイルシート〜基本 スッキリかんたんスタイルシート〜文字 スッキリかんたんスタイルシート〜色と背景 スッキリかんたんスタイルシート〜リンク スッキリかんたんスタイルシート〜ボックス スッキリかんたんスタイルシート〜配置 スッキリかんたんスタイルシート〜リスト スッキリかんたんスタイルシート〜表 スッキリかんたんスタイルシート〜いろいろ スッキリかんたんスタイルシート〜HP構成
    Copyright(C)1997. itoben style. All Rights Reserved.