今日のデザインはコレ!

 

<div class="concept_midashi">
   <p>会社の特徴</p>
</div>
<div class="right_greenbox">
   <dl>
      <dt>□□□□□□□□□□□□</dt>
      <dd>□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□</dd>
      <dt>□□□□□□□□□□□□</dt>
      <dd>□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□</dd>
      <dt>□□□□□□□□□□□□</dt>
      <dd style="padding-bottom: 0;">□□□□□□□□□□□□</dd><br> →下の文字との隙間をなくすため
      <span class="concept_detail">
         <a href="/□□□□□□">□□□□□□□□□□</a>
      </span>
   </dl>
   <p>□□□□□□□□□□</p>
</div>

 

-------------

 

.concept_midashi {
   background-image: url(/img/concept_□□□□.gif);
   background-repeat: no-repeat;
   width: 607px;
   height: 28px;
   margin: 30px auto 15px auto;
}

.concept_midashi p,.news_midashi p {
   color: #735844;
   font-size: 15px;
   font-weight: bold;
   letter-spacing: 1px; →文字の間隔を指定
   padding: 2px 0 0 15px;
   margin: 0;
}

.right_greenbox {
   width: 585px;
   border: 10px solid #82c988; →solid…1本線で表示
   margin: 0 auto;
}

.right_greenbox dl {
   padding: 30px 20px 0 20px;
}

.right_greenbox dt {
   font-size: 15px;
   letter-spacing: 2px;
   padding: 0 0 8px 0;
   color: #000;
   font-weight: cold;
}

.right_greenbox dd {
   font-size: 12px;
   letter-spacing: 1px;
   padding: 0 10px 20px 10px;
   color: #3a3a3a;
}

.right_greenbox span {
   color: #5ab461;
}

.right_greenbox p {
   margin: 0px;
   color: #333;
   text-align: right;
   padding: 0 25px 15px 0;
   font-size: 13px;
}

.concept_detail {
   font-size: 10px;
}

.concept_detail a {
   color: #5ab461;
}

 

-------------

 

この3つを分ける意味はなんだろう・・・

ひとつにまとめちゃダメなの??

 

.right_greenbox span {
   color: #5ab461;
}

.concept_detail {
   font-size: 10px;
}
.concept_detail a {
   color: #5ab461;
}