via ZERGE_VIOLATOR

こっそりアップデート

　2016年末に弊ブログのHTMl/CSSを大幅に改良しました。色々変えたところはあるのですが、1番の変更点はレスポンシブデザインに対応したところですね。livedoor Blogでスマホ対応のレスポンシブデザインにしているサイトは他にないのではないでしょうか? なぜなら、やる意味がまったく無いからです(笑)。livedoor Blogにはデフォルトのスマホページがありますからね。

　それ以外にもいろいろと改良をした部分があります。今回はその過程で設定した、「HTML/CSSで好きな文字をリストの記号に使う」を紹介したいと思います。

簡単にできると思ってた

css_char_list_01

　CSSの疑似要素を使えば、リスト記号に文字を使うのは簡単そうに思えます。というか筆者もそう思っていました。

ul {
	list-style: none;
}

ul li::before {
	content: "★";
	margin-right: 5px;
}
css_char_list_02

　できたように見えます。これで終わってしまうとこのエントリの意味が無いので、もうちょっと続けます。このリストに、長い文章を入れるとどうなるでしょうか?

css_char_list_03

　……なんだかとても残念な感じです。記号が段落に埋もれてしまい、箇条書き感がなくなってしまいました。これを解決するためには、text-indentにマイナスの値を設定すればいいのです。

ul li {
	text-indent: -20px;
}
css_char_list_04

　それなりにいい感じになりました。ただ、先頭が微妙に揃っていないので、もう少し調整が必要です。

ul li {
	text-indent: calc((1em + 5px) * -1);
}
css_char_list_05

　フォントにもよりますが、1emがそのまま1文字ぶんの横幅になるので、これに擬似要素の右側のマージン（今回の例だと5px）を足せば、ちょうどいい感じになります。

ul li {
	text-indent: calc((2ch + 5px) * -1);
}
css_char_list_06

　等幅フォントなら、2chでちょうど1文字ぶんになります。

　左側にマイナスのインデントを設定するということは、全体を左に無理やり寄せているということなので、margin-leftを設定する必要があります。そのあたりも含めたサンプルコードを以下に載せておきます。ぜひ参考にしてみてください。

See the Pen list with char by keiga (@keiga) on CodePen.

おわりに

　ブログデザインの改修は大変ですが、やり終えたときの他の何にも代えがたい達成感がありますね。最近はSass/SCSSの勉強も進めています。もっとデザインの勉強をして、見やすいブログにしていきたいと思いますので、今後ともお願いします。