上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
「文字デコ編」を理解された方であれば、基本的にスタイルシートは、ボーダーとかを使って「箱」を作り、その中の文字を間接的に飾る…つまり、見やすくする、見栄えを良くすることができるツールだと言うことが分かったと思います。
 スタイルシートでは、とにかく「箱」が基本になってきます。
 この箱を組み合わせることによって、記事ブロックや、サイドバー、ヘッダーなんかを作っています。

 そう、「文字デコ」をより応用したのが、ブログ全体の形と言うわけです。そして、「文字デコ」でも出てきた「divタグ」というのを応用すれば、ブログを1から作り上げることもできてしまうというわけなんですよ。



divボックスを自由に設定


 箱を作るときの基本は、高さと幅の概念です。


命令文(プロパティ)数値
横幅width :~ px ;
高さheight :~ px ;

 タグの作り方は…


<div style="width:300px;heifht:80px;background:#ced;border:1px solid #a7e;">文字やボックス</div>
見本

文字やボックス


 「style=""」で中にスタイルシートの命令文を書けば、見本の箱の完成です。分り易く、バックグランドカラーとボーダーも一緒に指定しています。
 まずは、復習も兼ねて、これを「HTMLファイル用」と「CSSファイル用」に分ける、「旗印(クラス)」を使って、この出来たタグを分解しましょう。旗印・クラスは…適当に「sample-box」とでもしておきましょう。



HTMLCSS
<div class="sample-box">
文字やボックス
</div>
.sample-box{
        width:300px;
        height:80px;
        background:#ced;
        border:1px solid #a7e;

        }


「width」と「height」を利用すれば、どんな箱でも出来てしまいます。バックグランドカラーやボーダーを組み合わせ、箱を作る。それら一個一個がブログのヘッダーだったり、サイドバーだったり、記事部分だったりするわけです。


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

【CSS】




■次のページはコチラです。
divボックスを横に並べる

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