ボックスの枠線をまとめて指定；border

【border】の外部CSS指定方法

ボックスの枠線も外部CSSで指定することで、HTMLソースがスッキリして、SEO内部対策として検索エンジン最適化に有効です。
SEO初心者でも簡単に検索エンジン上位表示ができるようにHTMLとCSSのソースサンプルを幾つかご紹介しますので、アクセスアップにお役立て下さい。

【border】の書式

border: 値 値 値; /*上下左右のスタイル、カラー、太さを指定。*/

border-top: 値 値 値; /*上側のスタイル、カラー、太さを指定。*/

border-right: 値 値 値; /*右側のスタイル、カラー、太さを指定。*/

border-bottom: 値 値 値; /*下側のスタイル、カラー、太さ指定。*/

border-left: 値 値 値; /*左側のスタイル、カラー、太さを指定。*/

• border-widthの値は、数値または、キーワードで指定する。※キーワードは、一般的ではないので省略します。
  • 相対的単位；px　em　ex
  • 絶対的単位；pt　mm　cm　in　pc
• 複数の値を指定する場合は、値間に半角スペースを記述する。
• border-widthは、border-styleと併用しなければ表示されない。

※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。

【border】の使用例

「セレクタ名」と「値」は、お好みで指定して下さい。

borderの値を「上下左右まとめてスタイルsolid、カラー#00FF00、太さ3px」に指定

▼ 表示
 

▼ HTML

<p class="sample01">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>

 
▼ CSS

.sample01 {
    margin: 10px;
    border: solid #0000FF 3px;
    padding: 5px;
}

border-topの値を「実線、カラー黒、太さ2px」border-rigthの値を「点線、カラー青、太さ8px」border-bottomの値を「二重線、カラー赤、太さ4px」border-leftの値を「くぼみ線、カラー緑、太さ6px」に指定

▼ 表示
 

▼ HTML

<p class="sample02">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>

 
▼ CSS

.sample02 {
    margin: 10px;
    border-top: solid #000000 2px;
    border-right: dotted #0000FF 8px;
    border-bottom: double #FF0000 4px;
    border-left: groove #00FF00 6px;
    padding: 5px;
}

border-bottomの値をス「点線、カラー赤、太さ2px」border-leftの値を「実線、カラー青、太さ4px」に指定

▼ 表示
 

▼ HTML

<p class="sample03">SEO対策に必要な、HTML,CSSのタグ辞典です。コピペしてお使い下さい。</p>

 
▼ CSS

.sample03 {
    margin: 10px;
    border-bottom: dotted #FF0000 2px;</i>
    border-left: solid #0000FF 4px;</i>
    padding: 5px;
}