あらかじめ日記

2chまとめサイト「ソノウソホント?」の雑記と、ブログで使えるスクリプトとかテクニックとか。その他、音楽やアニメ、漫画の話題とかも。

まとめサイト「ソノウソホント?」と「ムードもりあげ楽団」はこちら。

【CSS】投稿済み記事のレイアウトを隣の隣のセレクタで何とかしてみる

今まで記事の中で2行以上のリンクを作成したい場合に、単純にaタグに、改行(br)、aタグ、改行(br)…で挿入していました。

ただこれだと、行間が無くて1つのリンクタイトルが折り返して2行になると1つ目と2つ目のタイトルの区切りが分かり難くなりスマホ用の画面で見ると特に)、今更ながら面倒がらずにULタグで書いておけば、、と思う訳ですが既に記事の中に書いているので全て修正していくのも修正も辛い。

そこでCSSで何とかしようと思った訳です。

 
浅はかな考えでクラスを指定して記事内のaタグに限定した設定をしようと思ったのですが、当然aタグはこの対象としたいリンクだけではないので全てに影響してしまう、、と言うことで結局しばらく塩漬けにしていました。

先日ふと、やりたかったのはaタグが並んでいる場合に間隔を少し空けたい、この場合だと「aの隣のbrの隣のa」が指定できれば、と思った訳ですが実際に隣接を示すセレクタ(+)は重ねられるんですね。(常識でしたらすいません…)

例で

<a href="#">Test1</a><br />
<a href="#">Test2</a><br />
<a href="#">Test3</a><br />
<a href="#">Test4</a><br />

と言うタグの並びがあった場合に

<style>
 a+br+a { font-size:150%; }
</style>

CSSを記述をすれば、

Test1
Test2
Test3
Test4


と、ちゃんとTest2以降にスタイルが適用されています。

今回やりたいのは間隔を空けるですので、margin-topを指定します。
ただ、aタグはインライン要素なので、inline-block属性の設定を加えておくのがちょっとしたポイントでしょうか。

これで調整することができました!