i-8jo.com（Yahoo!blog入門）

サイトマップ

ようこそ、i-8jo.comへ

　このサイトは、Yahoo!blogについて初心者の方に対して分かりやすく解説しているサイトです。初めて、ブログを始める方、既に初めている方、その他多くの皆さんのお役に立てれば嬉しく思います。
　ちなみに、この情報は東京から南に約300kmに位置する八丈島よりお届けしています。みなさん、よろしくお願いします。

サイトマップ

Yahoo!blog入門
　└Yahoo!blogをはじめてみましょう
　　（Yahoo!blogの作成・記事の投稿・画像の投稿・トラックバックの仕方など）

　└Yahoo!blogを飾り付けてみましょう
　　（レイアウト・メニュー・アバター・名前アイコン作成や設定など）

（↑文字数制限で書ききれないため、過去のサイトマップにジャンプします。）

　└記事本文を飾り付けてみよう
　　　└（その１）HTML超入門１「文字を強調、斜体、下線、取り消し線に設定する方法」
　　　└（その２）HTML超入門２「文字のサイズを変える方法」
　　　└（その３）HTML超入門３「文字の色を変える方法」
　　　　　└（番外編１）色見本１
　　　　　└（番外編２）色見本２
　　　└（その４）HTML超入門４「文字のサイズや色を同時に変える方法」
　　　└（その５）HTML超入門５「文字の装飾を組み合わせる方法」
　　　└（その６）HTML超入門６「文字を上付き、下付きにする方法」
　　　└（その７）HTML超入門７「文字にルビをふる方法」
　　　└（その８）HTML超入門８「文字を動かす方法１」
　　　└（その９）HTML超入門９「文字を動かす方法２」
　　　└（その１０）HTML超入門１０「文字を動かす方法３」

　　　└（その１１）Wiki超入門１「文字を太字、斜体、見出しに設定する方法」
　　　└（その１２）Wiki超入門２「文字を引用に設定する方法」
　　　└（その１３）Wiki超入門３「リンクを設定する方法」
　　　└（その１４）Wiki超入門４「画像を貼り付ける方法１」
　　　　　└（番外編）顔アイコンを使ってみよう
　　　　　└（番外編）記事にアバターを表示させてみよう
　　　└（その１５）Wiki超入門５「画像を貼り付ける方法２」
　　　└（その１６）Wiki超入門６「画像を貼り付ける方法３」
　　　└（その１７）Wiki超入門７「音楽ファイルを張貼り付ける方法」
　　　└（その１８）Wiki超入門８「Flashファイルを貼り付ける方法」
　　　　　└（番外編３）いろいろなファイルをアップロードしてみよう１
　　　　　└（番外編４）いろいろなファイルをアップロードしてみよう２
　　　　　└（番外編５）いろいろなファイルをアップロードしてみよう３
　　　└（その１９）Wiki超入門９「動画ファイルを貼り付ける方法」
　　　└（その２０）Wiki超入門１０「リストを表示させる方法」
　　　└（その２１）Wiki超入門１１「段落を下げて表示させる方法」
　　　└（その２２）Wiki超入門１２「水平線を表示させる方法」
　　　└（その２３）Wiki超入門１３「テーブルを表示させる方法」
　　　└（その２４）Wiki超入門１４「テーブルの大きさと色を変える方法」
　　　└（その２５）Wiki超入門１５「テーブル中の文字の位置を変える方法」
　　　└（その２６）Wiki超入門１６「テーブルのセルを結合する方法」

　　　└（コラム）CSS超入門はじめる前に「html・wiki・CSSについて」
　　　└（その２７）CSS超入門１「CSSで文字のサイズを変える方法」
　　　└（その２８）CSS超入門２「CSSで文字の色を変える方法」
　　　└（その２９）CSS超入門３「CSSで文字を強調、斜体、上線、取消線、下線、点滅させる方法」
　　　└（その３０）CSS超入門４「CSSでフォントを変える方法」
　　　└（その３１）CSS超入門５「CSSで文字・単語の間隔をあける、改行する方法」
　　　└（その３２）CSS超入門６「CSSで行の高さを変える方法」
　　　　　└（番外編）「CSSのボックスについて」
　　　└（その３３）CSS超入門７「CSSでパディングを設定する方法」
　　　└（その３４）CSS超入門８「CSSでパディングを一括して設定する方法」
　　　　
　　　└（その３５）CSS超入門９「CSSでボーダーのスタイルを設定する方法」
　　　└（その３６）CSS超入門１０「CSSでボーダーの太さを設定する方法」
　　　└（その３７）CSS超入門１１「CSSでボーダーを一括して設定する方法」
　　　└（その３８）CSS超入門１２「CSSでボーダーをバラバラに設定する方法」
　　　　

このサイトはYahoo!JAPANディレクトリに登録されています。

記事本文を飾り付けてみよう「（その３５）CSS超入門９」

　今回から、数回にわけてボックスについてでご説明した「ボーダー」の部分の設定方法をご説明したいと思います。ボーダーの工夫次第で素敵なタイトルなどが作れると思います。それでは、始めましょう。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

border:ボーダーのスタイル;border-color:ボーダーの色;

[ボーダーのスタイル]
solid →　普通の線
double →　2本線
groove →　立体的にへこんで見える線
ridge →　立体的に突き出て見える線
inset →　全体的にへこんで見える線
outset →　全体的に突き出て見える線
dashed →　破線
dotted →　点線

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

テーブルに関して詳しくは
Wiki超入門１３「テーブルを表示させる方法」
Wiki超入門１４「テーブルの大きさと色を変える方法」
Wiki超入門１５「テーブル中の文字の位置を変える方法」
Wiki超入門１６「テーブルのセルを結合する方法」
をご覧ください。

それでは、実際に設定したものを見てみましょう。

■ボーダーをsolidにする（border:solid;の場合）

文法）
||<#ccffff' style=border:solid;border-color:#ff0000; ``ボーダーがこんな感じになります。||

※補足　分かりやすくするために、セルとボーダーに色を付けています。また、ボーダーの太さも10pxに設定しています。（ボーダーの太さについてはこちらをご覧下さい）以下も同様。

結果）

ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをdoubleにする（border:double;の場合）

||<#ccffff' style=border:double;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）

ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをgrooveにする（border:groove;の場合）

文法）
||<#ccffff' style=border:groove;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）

ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをridgeにする（border:ridge;の場合）

文法）
||<#ccffff' style=border:ridge;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）

ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをinsetにする（border:inset;の場合）

文法）
||<#ccffff' style=border:inset;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）

ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをoutsetにする（border:outset;の場合）

文法）
||<#ccffff' style=border:outset;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）

ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをdashedにする（border:dashed;の場合）

文法）
||<#ccffff' style=border:dashed;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）

ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをdottedにする（border:dotted;の場合）

文法）
||<#ccffff' style=border:dotted;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）

ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしたか？
いろんな、タイプのボーダーがありますから、その記事の雰囲気に合わせて使い分けると一味違ったものになると思います。是非、使ってみてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

[感謝]
この記事は「京都写真日記：Wiki文法を使いこなそう」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「京都写真日記：Wiki文法を使いこなそう」さんのページにて、ボタンをお願いします。
「京都写真日記：Wiki文法を使いこなそう」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

テスト

今日も良い一日になると良いですね