ページの装飾１

body要素内を装飾１

先に作成したページは各領域が分かりやすいように背景色で色分けをしていたり、ページ内に装飾をしていないので、少し簡単な装飾を施します。

基本レイアウト設定

body,#siteTitle,#nav,#footer{
  width:1024px;
}
body{margin: 0 auto}     /* 要素の横中央寄せ */
#siteTitle{
  height:100px;  ←  90pxに変更
  background: #faa;  ←　削除
}
#nav{
  height:35px;
  background-color:#d8bfd8;  ←  #dda0ddに変更
　　　　　　　　　　　　　   ←  margin-bottom:40px;を追加
}
#main{
  width: 724px;  ←  719pxに変更
  float: left;
                     ←  margin-right:5px;を追加
  background: #afa;  ←　削除
  padding-top:25px;  ←　削除
  padding-bottom:30px;
}
#side{
  width: 300px;
  float: right;
  padding-bottom:30px;
  background: #aaf;  ←　削除
}
#footer{
  clear: both;
  height: 40px;
  background: #ffa;  ←  #e6e6faに変更
  color:gray;
}

これは、レイアウト P タグのコンテンツです

ページヘッダー

スタイルの追加、サイトタイトルの先頭文字色を変える。

#siteTitle h1::first-letter{
  color:#ba55d3;
  }

グローバルナビゲーション

HTML5のtable要素ではsummary属性、border属性以外のものは廃止になり、border属性の枠線は既定では非表示になっています。枠線を設定するにはCSSで設定する必要が有ります。

#nav ul{
  height:34px;
  list-style:none;              /* リストマークを非表示に  */
  border:1px solid #666;  ←  #9932cc;に変更 
}
#nav li{
  float:left;                   /* リスト項目を右にフロート */
  border-right:1px solid #666;  ←  2px inset #9932cc;に変更
}
#nav li a{
  padding:0 20px;              /* 上下余白の設定 */
  line-height:35px;            /* 行の高さを設定 */
  display:block;               /* ブロック要素に設定 */
}
#nav li a:link     {color:#000080}  ←  #ffffff;に変更  /* 未訪問のリンク色  */
#nav li a:visited {color:#178B65}  ←  #ffffff;に変更   /* 訪問済みリンク色 */
#nav li a:active  {color:#178B65}   /* クリック時のリンク色 */
#nav li a:hover   {background-color:#ffff00}  /* マウスオーバー時の背景色 */

メインコンテンツ

見出しスタイルを3種類、文字色とメモ用のclassセレクタを追加

.headerR1{
  padding:6px;
  border-bottom:1px dashed #808080;
  color:#ba55d3;
}
.headerR2{
  border-top:1px solid #bbb;
  border-bottom:1px solid #bbb;
  padding:4px;
  font-size:117%;  
}
.headerR3{
  font-size:100%;   
}
.headerR3:before{
  content:"■";
  color:#000;
}
.colorOringe{
  color:#ff8c00;
}
.note{
	padding: 15px;		        	/*ボックス内の余白*/
	margin-bottom: 15px;	      /*ボックスの下に空けるスペース*/
	background: #f2cffb;	      /*背景色*/
	border: solid 1px #d1d1d1;	/*線の線種、幅、色*/
}

段落、見出し、リスト、各要素の余白を変更

main p{padding:0 10px 1.5ex}  ←　margin:0 15px 1.5exに変更
main h1,main h2,main h3,main h4{
  padding:0 10px 1.5ex  ←　margin:0 15px 1.5exに変更
}

main ul,main ol,main dl{
  padding:0 10px 1ex; ←　0 15px 1.5exに変更
}

テーブルのスタイルを設定

table{
  border-spacing:0;  ←  追加
  border-top:1px solid #666;  ←  追加
  border-left:1px solid #666;  ←  追加
  margin:0 10px;
}
th,td{
  border-right:1px solid #666;  ←  追加
  border-bottom:1px solid #666;  ←  追加
  padding:5px 8px;
}
th{
  background-color: #f2cffb;  ←  追加
}

見出し要素の変更とスタイルの適用

      <h1>アウトラインと見出し要素（大見出し）h1要素を使用</h1>
              ↓ class="headerR1"を適用
      <h1 class="headerR1">アウトラインと見出し要素（大見出し）h1要素を使用</h1>

        <h1>（中見出し）ここもh1タグを使っています</h1>
　　　　　　           ↓ class="headerR2"を適用
        <h2 class="headerR2">（中見出し）h2タグに変更しました</h2>

          <h1>（小見出し）ここもh1タグを使っています</h1>
                ↓ class="headerR3"を適用
          <h3 class="headerR3">（小見出し）h3タグに変更しました</h3>

      <h2>リスト・箇条書きのスタイル</h2>
              ↓ class="headerR1"を適用
      <h1 class="headerR1">リスト・箇条書きのスタイル</h1>

        <h3>マーク付きリスト</h3>
             ↓　変更
        <h2 class="headerR2">マーク付きリスト</h2>

        <h3>番号付きリスト</h3>
             ↓　変更
        <h2 class="headerR2">番号付きリスト</h2>

        <h3>定義リスト</h3>
            ↓　変更
        <h2 class="headerR2">定義リスト</h2>

      <h2>テーブルのスタイル設定</h2>
            ↓ class="headerR1"
      <h1 class="headerR1">テーブルのスタイル設定</h1>

サイドカラム

見出しの左側にアクセントラインを追加します。

#side h3::first-letter {
   border-left: 3px solid #ff8c00; /*左側のアクセント用ラインの幅、線種、色*/
   padding-left: 10px;	/*アクセントラインと文字の間にとる余白*/
}

”.sideBlock”セレクタの背景色を変更

.sideBlock{
   padding: 15px;		 　　　　　/* ボックス内の余白の設定 */
   margin-bottom: 15px;	       /* ボックスの下に余白を設定 */
   background: #e4e4e4;  →　#f2cffbに変更
   border: solid 1px #d1d1d1;	 /* 線の線種、幅、色の設定 */ 
}

サンプルページを見るにはここをクリック