PHP & JavaScript Room :: 設置サンプル

実行結果

▼border-topの使用例


▼border-leftの使用例

border-left

▼border-rightの使用例

Cascading Style Sheets(カスケーディング・スタイル・シート、CSS)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、W3Cによる勧告の一つ。カスケード・スタイル・シートとも呼ばれる。スタイルシートの一種。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 (出典: フリー百科事典『ウィキペディア(Wikipedia)』)

▼border-bottomの使用例

abbr要素は、W3C(ダブリュースリーシー)やHTML(エイチティーエムエル)など、1つの単語として発音されない略語に使用します。 ※IEではabbr要素はサポートされていません。

acronym要素は、NATO(ナトー)のように、1つの単語として発音される略語に使用します。


▼border-right/border-bottomの使用例

dog dog

ソース

<p>▼border-topの使用例</p>
<style type='text/css'>
    ul#nabtb, ul#nabtb * {
        margin:0; padding:0;
        background-color:#fff;
    }
    ul#nabtb {
        margin:1em 0; padding:0;
    }
    ul#nabtb li {
        display:inline;
        margin:0; padding:0;
    }
    ul#nabtb div {
        margin:0 0 0 -5px; padding:0;
        display:inline;
    }
    ul#nabtb a {
        border-top:5px solid silver; /* 上ボーダーの一括指定 */
        margin:0; padding:5px 10px;
        text-decoration:none;
        color:gray; font-weight:bold;
    }
    ul#nabtb a:hover {
        border-top:5px solid orange; /* 上ボーダーの一括指定 */
        text-decoration:none;
        color:darkorange; font-weight:bold;
    }
</style>
<ul id="nabtb">
    <li><div><a href="#">PHP</a></div></li>
    <li><div><a href="#">JavaScript</a></div></li>
    <li><div><a href="#">HTML</a></div></li>
    <li><div><a href="#">CSS</a></div></li>
    <li><div><a href="#">MySQL</a></div></li>
</ul>

<hr />

<p>▼border-leftの使用例</p>
<style type="text/css">
    div.bleft {
        margin:10px 0; padding:2px 10px;
        border-left:8px solid #ff6699;  /* 左ボーダーの一括指定 */
        color:#ff6699;
        background-color:#f9f7ed;
        font:bold 15px verdana,sans-serif;
    }
</style>
<div class="bleft">border-left</div>

<hr />

<p>▼border-rightの使用例</p>
<style type="text/css">
    blockquote.inyo {
        width:80%;
        margin:10px 0 10px 20px; padding:20px 10px 10px 20px;
        border-right:10px #ccc ridge;  /* 右ボーダーの一括指定 */
        background:#f7f7f7 url(/content/img/skin/dquot.gif) no-repeat 10px 5px;
    }
</style>
<blockquote class="inyo">
    <p>
        Cascading Style Sheets(カスケーディング・スタイル・シート、CSS)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、W3Cによる勧告の一つ。カスケード・スタイル・シートとも呼ばれる。スタイルシートの一種。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
        <cite><a href="http://ja.wikipedia.org/wiki/Cascading_Style_Sheets">(出典: フリー百科事典『ウィキペディア(Wikipedia)』)</a></cite>
    </p>
</blockquote>


<p>▼border-bottomの使用例</p>
<style type="text/css">
    abbr.bbt,
    acronym.bbt {
        cursor:help;
        text-decoration:none;
        background:#f9f7ed;
        color:#ff6699;
        border-bottom:1px dotted #ff6699;  /* 下ボーダーの一括指定 */
    }
</style>
<p>
    abbr要素は、<abbr class="bbt" title="World Wide Web Consoritum">W3C</abbr>(ダブリュースリーシー)や<abbr class="bbt"  title="HyperText Markup Language">HTML</abbr>(エイチティーエムエル)など、1つの単語として発音されない略語に使用します。
    ※IEではabbr要素はサポートされていません。
</p>
<p>
    acronym要素は、<acronym class="bbt"  title="North Atlantic Treaty Organisation">NATO</acronym>(ナトー)のように、1つの単語として発音される略語に使用します。
</p>

<hr />

<p>▼border-right/border-bottomの使用例</p>
<style type="text/css">
    img.waku {
        padding:5px;
        border-right:1px solid #ccc;
        border-bottom:1px solid #bebebe;
    }
</style>
<img src="/content/img/dog_black.png" alt="dog" class="waku" />
<img src="/content/img/dog_white.gif" alt="dog" class="waku" />


polarized women