CSSでタイトルを飾ってみる

CSSだけでタグを飾れると、気軽に色々な変化をつけることができます。

<head>〜</head>の間に
<style TYPE="text/css">
<!--

-->
</style>

と書いてから、div要素などに以下のｃｓｓを書きたします。

タイトル

margin-bottom: 10px;
padding: 5px;
border: 1px solid #6C96C9;

タイトル

margin-bottom: 10px;
padding: 5px;
border: 3px solid #6C96C9;

タイトル

margin-bottom: 10px;
padding: 5px;
border: 1px dotted #6C96C9;

タイトル

margin-bottom: 10px;
padding: 5px;
border: 3px dotted #6C96C9;

タイトル

margin-bottom: 10px;
padding: 5px;
border-top: 1px solid #6C96C9;
border-right: 1px solid #6C96C9;
border-left: 5px solid #6C96C9;
border-bottom: 1px solid #6C96C9;

タイトル

margin-bottom: 10px;
padding: 5px;
border-top: 1px solid #6C96C9;
border-right: 5px solid #6C96C9;
border-left: 5px solid #6C96C9;
border-bottom: 1px solid #6C96C9;

タイトル

margin-bottom: 10px;
padding: 5px;
border-top: 1px solid #6C96C9;
border-right: 1px solid #6C96C9;
border-left: 1px solid #6C96C9;
border-bottom: 3px solid #6C96C9;

タイトル

margin-bottom: 10px;
padding: 5px;
border-top: 3px solid #6C96C9;
border-right: 1px solid #6C96C9;
border-left: 1px solid #6C96C9;
border-bottom: 3px solid #6C96C9;

タイトル

margin-bottom: 10px;
padding: 5px;
border: 3px double #6C96C9;

タイトル

style="margin-bottom: 10px; padding: 5px; border-top: 3px double #6C96C9; border-bottom: 3px solid #6C96C9;"

タイトル

margin-bottom: 10px;
padding: 5px;
border-top: 3px double #6C96C9;
border-right: 3px solid #6C96C9;
border-left: 3px double #6C96C9;
border-bottom: 3px solid #6C96C9;

バリエーションは無数ですね。

素材のトップへ

スポンサードリンク

スポンサードリンク

SOZAI | 素材

その他