今回はリストの最初の部分だけボーダーを消す方法についての解説になります。

リストにボーダーをつけると、最初の部分に不要なボーダーができてしまいます。

この場合、css の設定を追加することで、最初のボーダーを非表示にすることができます。

例えば、以下のように、
リストを作成し、そこにボーダーを引くようにしてみると、最初の部分に余分な線ができてしまいます。

1つめの方法は、
:first-child擬似クラスを利用して最初のリストのみボーダーを非表示にする方法です。

css を

とすることで、最初のボーダーが非表示になります。

また、コード量を少なくする場合

というように :not と組み合せることで簡単に記述することが可能になります。

li:not(:first-child)
と指定することで、最初の li 以外にスタイルが適用されます。

2つ目の方法としては、ネガティブマージンとoverflow:hidden の組み合わせです。
こちらの注意点は、
ネガティブマージンの値と、border-to-width の値を揃える必要があります。

なお、ネガティブマージンは、マイナスの値を設定したものです。

こちらでも同じ効果になります。

そして3つめが隣接セレクタによる設定です。
この設定をすると、li が1つのときには効果がでずに2つ以上になるとスタイルが適用されるようになります。

以上が概要となります。

それでは実践してみましょう。

実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

次に、style.css を読み込む設定をします。

を展開すると

となります。

次に style.css を作成し、内容を記述します。

ちなみに、Emmet で記述すると、
bdt+ で展開し、色の部分だけ修正すると効率的に記述できます。

この状態で保存し、次に index.html にリストを作成します。

今回は Emmmet で書きつつ、ダミーテキストをいれてみます。
Emmet でダミー作成するには lorem を使います。

これを展開すると

というようになります。

この状態でプレビューを ctrl + shift + h で見てみましょう。

Screenshot from 2016-07-13 16:40:28

この状態ですと、一番上まで線ができています。

今回は、隣接セレクタによる設定を行います。

このメリットは1つの場合には機能せず、2つ以上、つまり追加されたときのみ効果が反映されることです。
意味としては、:not + :first-child と同じですが、書きやすいためこちらを使います。

style.css の内容を

へ変更し、保存します。

この状態で再度プレビューをみてみましょう。

Screenshot from 2016-07-13 18:13:53

これで一番上の線が消えているのが確認できます。

それでは、今回の要点をまとめてみましょう。

・:first-child擬似クラスを利用して最初のリストのみボーダーを非表示にすることが可能。
・隣接セレクタを設定することで、複数のli要素になったときのみ非表示にすることが可能。
・ネガティブマージンと overflow hidden でも可能だが border-top-width の値と揃える必要がある。

今回は静的サイトでしたが、wordpress などを浸かった場合に隣接セレクタなどを使うことがあるため、
その応用として覚えておくと便利になります。