WordPress備忘録

デザイン

デザインに関する備忘録

記事表示ここから

スタイルシートで段組を作成する

スタイルシートを利用して2段組のレイアウトを作成する。
これは以前からホームページ制作で利用していたスタイルシートをそのまま引用。
このスタイルシートは色々なサイトを参考にして自分用の初期テンプレートとして使用している。

「index.php」を下記のように変更して保存する。

PHP:
  1. <?php get_header(); ?>
  2. <div id="body">
  3. <div id="contents">
  4. コンテンツ内容
  5. </div><!-- contents-end -->
  6. <?php get_sidebar(); ?>
  7. </div><!-- body-end -->
  8. <?php get_footer(); ?>

次に「style.css」を編集。
以下の内容を「style.css」に追加する。

CSS:
  1. /*****************************************************
  2. ページ全体
  3. *****************************************************
  4. body{
  5.     margin: 0px;
  6.     padding: 0px;
  7.     font-size: 0.75em;
  8.     text-align: center;
  9. }
  10. /*****************************************************
  11. 全体を中央寄せにする為のスタイル
  12. *****************************************************/
  13. div#page{
  14.     margin: 0px auto;
  15.     padding: 0px;
  16.     text-align: left;
  17.     width: 800px;
  18. }
  19.  
  20. /*****************************************************
  21. ヘッダ
  22. *****************************************************/
  23. div#header{
  24.     width: 800px;
  25.     height: 100px;
  26.     margin: 0px;
  27.     padding: 0px;
  28.     background-color: #cdcdcd;
  29. }
  30.  
  31. /*****************************************************
  32. 段組を入れる為のフレーム
  33. *****************************************************/
  34. div#body{
  35.     width: 800px;
  36.     margin: 0px;
  37.     padding: 0px;
  38.     zoom: 100%;
  39. }
  40. /* 段組を自動で解除 */
  41. div#body:after{
  42.     content: &quot; &quot;;
  43.     clear: both;
  44.     height: 0px;
  45.     display: block;
  46.     visibility: hidden;
  47. }
  48.  
  49. /*****************************************************
  50. コンテンツ
  51. *****************************************************/
  52. div#contents{
  53.     width: 600px;
  54.     margin: 0px;
  55.     padding: 0px;
  56.     float: right;
  57.     background-color: #fcfcfc;
  58. }
  59.  
  60. /*****************************************************
  61. サイドバー
  62. *****************************************************/
  63. div#sidebar {
  64.     width: 200px;
  65.     margin: 0px;
  66.     padding: 0px;
  67.     float: left;
  68.     background-color: #dcdcdc;
  69. }
  70.  
  71. /*****************************************************
  72. フッタ
  73. *****************************************************/
  74. div#footer{
  75.     width: 800px;
  76.     height: 100px;
  77.     margin: 0px;
  78.     padding: 0px;
  79.     background-color: #787878;
  80. }

保存、アップロードして確認。

スタイルシートに関する細かい説明は省く。background-color属性は分かり易くする為に設定しただけ。

記事表示ここまで
リンクここまで

この記事のコメント・トラックバックRSS

コメント・トラックバック ここまで

トラックバック用URL:

コメントフォーム

コメント入力

コメントフォーム
※管理人にのみ公開されます

記事のリンク先URL:http://www.is-p.cc/wordpress/design/float/17

空白
ページのトップに戻る
空白