miltee〜毎日が小さな旅〜

22歳。結婚して半年・・・日常のこと、学んだこと、どうでもいいこと、ゆるいつぶやきなどなど日々のことを書いています♪〜365日毎日が小さな旅〜
<< May 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
RECOMMEND
SENSE 2-NI-
listのa要素のクラス指定
listのa要素をクラスで一括指定

<ul class="mokuji">
<li><a href="#q1">目次1</a></li>
<li><a href="#q2">目次2</a></li>
<li><a href="#q2">目次3</a></li>
</ul>


ul.mokuji a:link{ color: #fff; }
ul.mokuji a:visited{ color: #fff; }
ul.mokuji a:hover{ color: #FF6; }
ul.mokuji a:active{ color: #fff; }
CSS/HTML / comments(0) / - / akane /
a要素の疑似クラスの宣言順序

a:link { color: #ffcc00; }
a:visited { color:#000000; }
a:hover{ color: #ccff00;}
a:active { color: #eeeeee; }

a要素の疑似クラスの宣言はこの順番で記述する。

hover,activeは一連の動作があるので、CSSでもこの順番にする必要がある。
順番がばらばらになると、正しく動作しないことがある。
CSS/HTML / comments(0) / - / akane /
まとめてクラス指定
クラス指定をするときに、まとめて指定させる方法

<table>の場合・・・


/*  HTML
----------------------------------------------*/
<!-- クラス指定 -->
<div class="tabledayo">
<!-- //クラス指定 -->
<table cellpadding="1" cellspacing="1">
  <tr>
     <th>品名</th>
     <td>☆カフェラテ☆</td>
  </tr>
</table>
</div>


/*  CSS
----------------------------------------------*/
.syousai th,td{
     padding:3px; /*セルに余白*/
}

.syousai table{
    background-color:#cccccc; /*背景色(枠線)*/
}

.syousai th{
    background-color:#eeeeee; /*背景色をグレーに*/
    font-size:12px; /*フォントサイズ*/
}

.syousai td{
    background-color:#ffffff; /*背景色を白に*/
}


<table>を<div>で囲って全体をクラス指定
CSSで 『.クラス名 td』と書く
2箇所にするときは 『.クラス名 table,th』でコンマ(,)で区切る

<table class="tabledayo">
<th class="tabledayo">
<td class="tabledayo">
・・・・と一個一個にクラス指定する必要がない

CSS/HTML / comments(0) / - / akane /
CSSで画像回り込み+余白
CSSで 画像を回り込みさせ、文字と画像の間に余白をとる方法。




/* HTML
-------------------------------------------------*/

<img src="画像のURL" class="mawarikomi_left">




/* CSS
-------------------------------------------------*/

.mawarikomi_left{
     float: left;
    margin-right: 5px;
}



CSS/HTML / comments(0) / - / akane /
dl,dt,ddを使った段組み
 メモ

dl,dt,ddを使った段組み
TABLEを使わなくてもいい


/* CSS
---------------------------------------------*/
#dan1 dl {
    border: 1px solid #999;
    margin: 0;
    padding: 0;
    width: 300px;
    font-size: 0.8em;
}
#dan1 dl dt {
    clear: both;
    float: left;
    width: 4em;
    padding: 5px 0 5px 5px;
    font-weight: bold;
}
#dan1 dl dd {
    margin-left: 5em;
    padding: 5px 5px 5px 10px;
    border-left: 1px solid #999;
    line-height: 1.4;
}


/*HTML
--------------------------------------------*/
<dl>
        <dt>項目1</dt>
        <dd>文章文章文章12345</dd>
        <dt>項目2</dt>
        <dd>文章文章文章12345</dd>
        <dt>項目3</dt>
<dd>文章文章文章12345</dd>
    </dl>
CSS/HTML / comments(1) / - / akane /