僕の世界観を変えてみる

比較的簡単なHTMLでWebサイトを作ってみるのでその過程を綴っていいたいと思っています。

cssでulとtableを装飾していこう

f:id:htmllifehack:20150815171904j:plain

 

今回はまず箇条書きの●を■に変えたりなんなりしていきます。

楽そうですね。

早速やっていきたいと思います。

 

■list-style-type

htmlでは箇条書きで表示するときは<ul> </ul>で囲み、その中に<li></li>で文章を入力してきました。こんな感じに

<ul>

 <li>ダイヤモンドの見方</li>

 <li>貴金属の値段</li>

 <li>ブランド品の査定</li>

</ul>

cssではulとliを同時に指定してフォントサイズとマークを変えていきます。

f:id:htmllifehack:20150815173104j:plain

 

こんな感じでlist-style-typeをsquareにしてみました。スクエアはそのまま■って意味ですね。

 

f:id:htmllifehack:20150815172939j:plain

できました!

上の3つが<ul><li>だけのもので、下の3つがcssで変更したものです。

 

■list-styleのプロパティ

上記のsquareのほかにたくさんあるので少し紹介します。

f:id:htmllifehack:20150815180811j:plain

上からnone、circle、upper-alpha、hiragana です。

noneはマークなし、サークルは丸ですね、apper-alphaはアルファベット、逆にlowerだと小文字になります。最後もそのままひらがなですね。

それぞれの<ul>にclassをつけてnoneやcircleに変えたんですけど、最初に<ul><li>をsquareって指定していたので全部squareになって焦りました。

squareのところをコメント扱いにしてなんとか全部表示できました。

f:id:htmllifehack:20150815181341j:plain

f:id:htmllifehack:20150815181250j:plain

こんな感じですね。

他にもマークを画像に変えることができるようです。

list-style-imageって入力してur("~~~.jpg")という風に画像のある場所を指定しているようですが、どこにその画像を置いておくのかわからないので今のところやり方は不明です。174ページで解説してくれるようですが僕はまだ68ページです笑

気長に行きましょう。

 

次は表を変えていきます。

 

■table

まずはtableタグで作った表にborderを使って枠を作っていきます。

table {

     font-size:14px;

     border:1px solid #CCCCCC;

     }

っていうのをcssに追加します。

f:id:htmllifehack:20150815182418j:plain

はい!枠ができましたああ!

今度は金、プラチナ、銀の間に線を引いて表らしくします。

<table>
   <caption>本日の相場</caption>
    <tr>
       <th>金</th>
       <td>4,736円 前日比+72</td>
    </tr>
    <tr>
      <th>プラチナ</th>
      <td>4,242円 前日比+135</td>
    </tr>
    <tr>
      <th>銀</th>
      <td>63円 前日比+3<td>
    </tr>
</table>

これを見てわかるように<th>で囲まれた部分と<td>で囲まれた部分に線を引くってことです。

ではやっていきます。

f:id:htmllifehack:20150815183143j:plain

できました。

thとtdの2つを指定したい場合はtable th,tabletdのように , で区切ると2つ同時に指定できるようです。

 

さて、次ですが、上で作った表には線が二重になって表示されていますね。

これを一本の線に変えていきます。

 

■callapse

collapse????読めねぇー、なんなのこれなんて読むの

ということでググってきました。

ejje.weblio.jp

 

コラップス?って聞こえます。コラップスでいいでしょう。

はい、罫線と罫線の隙間をなくすためにコラップス!追記していきます。

cssで入力したtable { ~~のあとに、border-collapse: xollapse;と追加します。

f:id:htmllifehack:20150815190754j:plain

はい、この通り隙間をなくすことができましたー

コラップス余裕っすね。

 

あとちょっと表をいじるんですけど、長くなっちゃったのでダイジェストでお送りいたします。

 

まずは表の金、プラチナ、銀の背景に色をつけ、文字を左寄せにします。

加えて本日の相場の文字も左寄せにし、太字に変更します。

最後に表の横幅を調整します。

まあ僕の場合相場の金額しか書いていないので横幅を変える必要はないんですけど、とりあえず本の通りに進めますね。

f:id:htmllifehack:20150815191900j:plain

f:id:htmllifehack:20150815191905j:plain

はい、めちゃくちゃ横に長くなりました笑

64行目のwidth:100%ってのは横幅いっぱいって意味ですね。

いきなりですけどwidthって何て読むんって思いません?

ね、安定のgoogleで調べましたよ。

そしたらなんかおしゃれなブログを発見しました!

なのでリンク貼っときます。

 

creativememomemo.com

 

くるくる回るボタンも作ってましたよ。そんなん作れるようになりたいですね。

長くなったのでこれで終わりにします。