WordPress備忘録

デザイン

デザインに関する備忘録

記事表示ここから

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

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

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

PLAIN TEXT
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」に追加する。

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

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

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

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

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

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

トラックバック用URL：

コメントフォーム

コメント入力

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

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

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