ほわぴの旅行日記

旅行大好き!小さな旅行から国内・海外旅行まで。日々のお勉強の進捗など。

【勉強の成果】HTMLテーブルをCSSで装飾

短期集中でCSSをやっています。

 

blog.whiteandpeach.com

 

これまでHTMLのみで記述してきたものをCSS装飾に変更

 

f:id:whiteandpeach:20180817162735j:plain

見た目はあんまり変わらないんですが、青いリンクの色を変え、リンクをマウスオーバーにしたりしてます。

 

今まで使ってたHTML

Dreamweaverで作ったっきり、コードは触らないことが多い私です。

かなり無駄な記述がありました。

----

<table width="210" border="0" cellpadding="5" cellspacing="1" bgcolor="#996600">
<tr>
<td bgcolor="#FFFDF2"><div align="center"><img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112373884.jpg" alt="カテゴリ" width="210" height="30" /></div></td>
</tr>
<tr>
<td bgcolor="#FFFDF2"><table border="0"> ←何度も背景を指定してたり
<tr>
<td><a href="https://item.rakuten.co.jp/pawstore/c/0000000188/"><img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112361997.jpg" alt="バッグ" width="100" border="0" /></a></td> ←繰り返しサイズ指定してたり
<td><a href="https://item.rakuten.co.jp/pawstore/c/0000000188/" >バッグ</a></td>
</tr>
</table></td> ←無駄なタグがたくさん
</tr>
<tr>
<td bgcolor="#FFFDF2"><table border="0">
<tr>
<td><a href="https://item.rakuten.co.jp/pawstore/c/0000000105/"><img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112361998.jpg" alt="小物・ポーチ・財布" width="100" height="100" border="0" /></a></td>
<td><a href="https://item.rakuten.co.jp/pawstore/c/0000000105/">小物<br />
ポーチ<br />
財布</a></td>
</tr>
</table>

----

 

今回自力で書いたCSS

---

 <style type="text/css">
a { 

text-decoration: none;

color:#220101;

font-size: 11px;

}

a:hover {    

color: #ff0000;   

text-decoration: none;

}        

.type1{

border: 1px solid #aaa; 

border-collapse: collapse; 

border-spacing: 0; color: #270001;

img size:70px;

}
.type1 img{

width: 70px; vertical-align:middle;

}

.type1 img:hover{    

filter:alpha(opacity=80);       

opacity:0.4;

}

.table-img{ 

border: 1px solid #aaa;

}

.table-txt{    

background-color:#FDF8E8;

padding: 2px 2px 5px 5px; 

border: 1px solid #aaa;

text-align:left; vertical-align:middle;

}

---

HTML

<table class="type1">

<tbody>
 <tr>

<td class="table-img">

<a href="https://item.rakuten.co.jp/pawstore/c/0000000188/"> 

<img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112361997.jpg" alt="バッグ"></a></td> 

<td class="table-txt">

<a href="https://whitepeach.base.shop/categories/1177489" >バッグ</a></td></tr> <tr>  <td class="table-img">

<a href="https://item.rakuten.co.jp/pawstore/c/0000000105/">    <img src="https://image.rakuten.co.jp/pawstore/cabinet/imgrc0112361998.jpg" alt="小物・ポーチ・財布" /></a></td>

<td class="table-txt">

<a href="https://whitepeach.base.shop/categories/1178991">小物<br />ポーチ<br />財布</a></td></tr>
---

まだまだ無駄がありそうですが、なんとかわかってきました。

タグが覚えられないので、検索しながらやっています。

 

【問題点と課題】

・class="table~を何度も書いてるんですが、なんか簡単になる方法ないのか。

・線ひくときどこを指定してよいかわからず、中の線だけを点線にすることができなかった。

 

うーん!!はてなブログで練習するのもありですね。

ちょっと触ってみます。

バッグ 小物

 

© White and Peach 2017-2018