僕の世界観を変えてみるスマートフォン用の表示で見る僕の世界観を変えてみる文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。cssでulとtableを装飾していこう2015-08-15cssでulとtableを装飾していこうwebシェアするTwitterGooglePocketLine今回はまず箇条書きの●を■に変えたりなんなりしていきます。やっていきたいと思います。</ul>で囲み、その中に<li></li>で文章を入力してきました。こんな感じに<ul><li>ダイヤモンドの見方</li><li>貴金属の値段</li><li>ブランド品の査定</li></ul>cssではulとliを同時に指定してフォントサイズとマークを変えていきます。こんな感じでlist-style-typeをsquareにしてみました。スクエアはそのまま■って意味ですね。できました!上の3つが<ul><li>だけのもので、下の3つがcssで変更したものです。■list-styleのプロパティ上記のsquareのほかにたくさんあるので少し紹介します。noneはマークなし、サークルは丸ですね、apper-alphaはアルファベット、逆にlowerだと小文字になります。最後もそのままひらがなですね。それぞれの<ul>にclassをつけてnoneやcircleに変えたんですけど、最初に<ul><li>をsquareって指定していたので全部squareになって焦りました。squareのところをコメント扱いにしてなんとか全部表示できました。他にもマークを画像に変えることができるようです。list-style-imageって入力してur("~~~.jpg")という風に画像のある場所を指定しているようですが、どこにその画像を置いておくのかわからないので今のところやり方は不明です。次は表を変えていきます。■tableまずはtableタグで作った表にborderを使って枠を作っていきます。#CCCCCC;}っていうのをcssに追加します。はい!枠ができましたああ!今度は金、プラチナ、銀の間に線を引いて表らしくします。前日比+3<td></tr></table>これを見てわかるように<th>で囲まれた部分と<td>で囲まれた部分に線を引くってことです。