上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 これで、大体のちょっとしたブログやホームページの「部品」はスタイルシートでデコレーション出来るようになったと思います。
 今回は、どんなデザインが出来るのか研究してみましょう。
 よく見かけるデザイン部品は、どうやって組み立てているのかの研究です。

 最初のページから読むには「スタイルシートで遊ぶ part.1(<span>タグ編)」からどうぞ。


ボタン系


ボタン ボタン ボタン

 主に、「ボーダー」で「アウトセット」を使うと浮き出たボタン風にデコレーションすることができます。
「border : 1px outset #ffccbb;」
 ポイントは色で、バックグランドカラーとボーダーカラーは同色にするのが基本です。
 フォントカラーも調整すると、ぐっと画像っぽくなります。


ボタン ボタン ボタン



クラフト系


ボタン ボタン

 ボーダーの「dotted」「dashed」で縁を囲むと、クラフティな感じに仕上がります。これにはポイントが有って、ブラウザによって表示が変わってきます。バックグランドカラーとボーダーカラーを同色にすると、IE(インターネット・エクスプローラー)では美しく表示されますが、FX(ファイアーフォックス)では縁がなくなってしまいます。

IE用 ボタン


FX用 ボタン


 ブラウザが「IE」の人は、上がクラフト風に、「FX」の人は、下がクラフト風になります。
*「ブラウザ」が何のことだかよく分からない方で「ウィンドウズ」を使用している人は、ブラウザは「IE」です。

 同系色でまとめるテクニックとしては、画面の背景色と同化させるのではなく、フォントカラーとフチのカラー、バックグランドカラーとフチのカラーpart2を合わせるといい感じになりそう。

ボタン



さらにデコる


ボタン

<div> ~ </div>」の中に、さらに「<div> ~ </div>」をいれこむと、さらに縁取りを繰り返すこともできます。HTML部分は「<div><div> ~ </div></div>」こんな感じになります。

 書き方は下図。

HTML(記事編集画面も)部分
<div class="deko1"><div class="deko2">ボタン</div></div>
CSS(スタイルシート)部分
.deco1 {
    width : 100px ;
    text-align : center ;
    padding : 4px ;
    border : 4px dashed #ff6 ;
    background : #f66 ;
    color : #9ad ;
   }

クラス名(旗印)
横幅 100px
テキストのセンタリング
内側のボックスとの空間
ボーダー
背景色
文字色


.deco2 {
    padding:10px;
    border:3px dotted #ff6;
    background:#559;
    color:#fff;
   }

クラス名(旗印)
文字との空間
ボーダー
背景色
文字色


構造の図解
<div class="deko1">
外側のボーダーと空間(バックグランドカラー)
<div class="deko2">ボタン</div>
内側の文字、ボーダー、バックグランドカラー
</div>


 図で描くとややこしいですが、つまり、「divボックス」の中に「divボックス」を何個でも入れ込めるようになっています。
 それを利用して、外側のボックスにはこういうスタイル、内側のボックスにはこういうスタイル…と繰り返せば、複雑な飾り箱を作ることができます。

実際に表示確認してみる(編集可)
【HTML】

【CSS】





こんなことも出来てしまう…
*ここまでやるくらいなら、お絵かきソフトで画像を描いた方がスマートだという噂もあります。

■divボックスに適応出来る代表的なスタイルの命令文の一覧表。
文字デコ・基本のCSSの命令文(プロパティ)


■次の記事はコチラから。
背景編

■ボーダー番外編「エンボス」
スタイルシートでエンボス効果

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Mon.03.22.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。