border-left

  • リビジョンの URL スラッグ: CSS/border-left
  • リビジョンのタイトル: border-left
  • リビジョンの ID: 308715
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

{{ CSSRef() }}
{{英語版章題('Summary')}}

概要

CSS の border-left プロパティは、「{{ Cssxref("border-left-width") }}」、「{{ Cssxref("border-left-style") }}」、「{{ Cssxref("border-left-color") }}」を一括指定する為のショートハンド・プロパティです。このプロパティは、前述の 3 種の内、1 つまたは複数の値を設定するために使用することができます。各値は半角スペースで区切って、任意の順序で記述する事が出来ます。省略された値には初期値が設定されます。

  • {{ Xref_cssinitial() }} 詳細については、各個別のプロパティを参照してください。
  • 適用対象 全ての要素
  • {{ Xref_cssinherited() }} 継承しない
  • 相対値の基準 N/A
  • メディア {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} 各プロパティの頁を参照してください
{{英語版章題('Syntax')}}

構文

border-left: [border-width || border-style || border-color | inherit] ;

<{{Cssxref("border-width")}}>
ボーダーの幅
<{{ Cssxref("border-style") }}>
ボーダーの種類
<{{ Cssxref("border-color") }}>
ボーダーの色
{{英語版章題('Examples')}}

blockquote { 
    border-left: 10px solid #555;
}
{{英語版章題('Specifications')}}

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }} {{ cssxref("border-left-color") }} の値の変更以外の直接的な変更は無し
CSS 2.1 {{ Spec2('CSS2.1') }} 有意な変更点は無し
CSS 1 {{ Spec2('CSS1') }}  
{{英語版章題('Browser compatibility')}}

ブラウザ実装状況

{{ CompatibilityTable() }}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 {{ CompatGeckoDesktop("1.0") }} 4 3.5 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
{{英語版章題('See also')}}

関連情報

  • {{ CSS_Reference:Border() }}
  • {{ CSS_Reference:Border-left() }}

このリビジョンのソースコード

<div>{{ CSSRef() }}</div>


<div>{{英語版章題('Summary')}}</div>
<h2 id=".E6.A6.82.E8.A6.81">概要</h2>

<p>CSS の <code>border-left</code> プロパティは、「{{ Cssxref("border-left-width") }}」、「{{ Cssxref("border-left-style") }}」、「{{ Cssxref("border-left-color") }}」を一括指定する為のショートハンド・プロパティです。このプロパティは、前述の 3 種の内、1 つまたは複数の値を設定するために使用することができます。各値は半角スペースで区切って、任意の順序で記述する事が出来ます。省略された値には初期値が設定されます。</p>


<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> 詳細については、各個別のプロパティを参照してください。</li>
  <li><dfn>適用対象</dfn> 全ての要素</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> 継承しない</li>
  <li><dfn>相対値の基準</dfn> N/A</li>
  <li><dfn>メディア</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> 各プロパティの頁を参照してください</li>
</ul>




<div>{{英語版章題('Syntax')}}</div>
<h2 id=".E6.A7.8B.E6.96.87">構文</h2>
<pre class="syntaxbox"><code>border-left: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ;</code></pre>



<h3 id=".E5.80.A4">値</h3>
<dl>
  <dt>&lt;{{Cssxref("border-width")}}&gt;</dt>
  <dd>ボーダーの幅</dd>
  <dt>&lt;{{ Cssxref("border-style") }}&gt;</dt>
  <dd>ボーダーの種類</dd>
  <dt>&lt;{{ Cssxref("border-color") }}&gt;</dt>
  <dd>ボーダーの色</dd>
</dl>




<div>{{英語版章題('Examples')}}</div>
<h2 id=".E4.BE.8B">例</h2>

<pre class="brush:css">blockquote { 
    border-left: 10px solid #555;
}</pre>






<div>{{英語版章題('Specifications')}}</div>
<h2 id=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">仕様書</th>
      <th scope="col">策定状況</th>
      <th scope="col">コメント</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands" title="http://www.w3.org/TR/css3-background/#background-left">CSS Backgrounds and Borders Module Level 3</a></td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>{{ cssxref("border-left-color") }} の値の変更以外の直接的な変更は無し</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left" title="http://www.w3.org/TR/CSS21/box.html#propdef-border-left">CSS 2.1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>有意な変更点は無し</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS1/#border-left" title="http://www.w3.org/TR/CSS1/#border-left">CSS 1</a></td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>



<div>{{英語版章題('Browser compatibility')}}</div>
<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7">ブラウザ実装状況</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>4</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>



<div>{{英語版章題('See also')}}</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li>{{ CSS_Reference:Border() }}</li>
  <li>{{ CSS_Reference:Border-left() }}</li>
</ul>
Revert to this revision