メモを揉め

お勉強の覚書。

タグをCSSで描く

CSS HTML Tips プログラミング

カテゴリーで分類するアレです。
はじめに図解します。

元となる<a>要素

display: inline-blockを設定することで幅・高さを設定出来、なおかつ改行せずに親要素の幅に合わせて流れ込んでくれます。

位置を調整していきます。

  1. position: relativeを設定します、これによりtop、leftなどが効くようにしておきます。
    僅かに空いた隙間は、改行やインデントなどの連続した空白文字が、半角スペース１文字分に変換されて出来たものです。
    inline-block inline-block inline-block inline-block inline-block

  2. left: 5pxで本来の位置より右に5px表示をずらします、左側に幅10pxのタグの菱型部分がくっつくので合計で左右5pxずつ本来の幅より大きくなります。
    inline-block inline-block inline-block inline-block inline-block

  3. margin-rightに8pxで隣り合うタグが重ならないようにします。
    13pxにしないと計算が合わないような気がしますが、半角スペース分の隙間が初めからあるのでその分を考慮すると大体8pxになるということにしておきます。
    なんとも頼りない計算ですが、そのためだけにスクリプトを走らせて改行・スペース・タブを除去するのも反映までのラグがあるのが嫌なので我慢します。
    inline-block inline-block inline-block inline-block inline-block

その他もろもろ設定するとだいたいこんな感じになります。
後でホバー時の変化を付ける為にtransition: 200ms background-colorも設定しておきます。

inline-block inline-block inline-block inline-block inline-block

a {
    position: relative;
    display: inline-block;
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background: #ccd;
    margin: 0.1em 8px 0.1em 0;
    padding: 0 4px;
    border-radius: 0px 2px 2px 0px;
    left: 5px;
    white-space: nowrap;
    transition: 200ms background-color;
}

左側の菱型の部分

この部分はborderを使って斜めの線を表現します。

上下左右で違う色を設定するとそれぞれの堺が斜めになるのを利用しています。
display: blockの幅・高さを0に設定するとこんな感じになります。

.diagonal {
    display: block;
    width: 0;
    height: 0;
    border-top   : 50px solid crimson;
    border-right : 50px solid darkblue;
    border-bottom: 50px solid darkcyan;
    border-left  : 50px solid khaki;
}

これを応用してタグの左側を作ります。

border-rightを#ccdに変えます。

border-topとborder-bottomの色を透明色transparentにします。

border-leftの幅を0pxにします。

出来ました。
これを小さくしてタグに応用します。

新しく要素を用意するのではなく、<a>の::before要素にスタイルを適用します。
position: absoluteを設定することで、元の<a>タグの位置に影響を与えないようになります。

::before、::after要素はcontentを設定しないと有効にならないので注意。*1

まとめるとこんな感じになります。
これも後でホバー時の変化を付ける為にtransition: 200ms border-right-colorを設定しておきます、background-colorではないので注意。

a::before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: -10px;
    border-top   : solid 10px transparent;
    border-right : solid 10px #ccd;
    border-bottom: solid 10px transparent;
    border-left  : 0px;
    transition: 200ms border-right-color;
}

タグの穴の部分

::after要素を使います、これも同じようにposition: absoluteで<a>要素に影響を与えずに配置出来ます。

まとめるとこんな感じになります。

a::after {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  margin: 0;
  padding: 0;
  top: 8px;
  left: -4.8px;
  border-radius: 50%;
  background: white;
  z-index: 100;
}

ホバー時の変化を付ける

擬似クラス:hoverを使います。
本体の<a>要素にホバーした時に::before、::afterにも変化を適用するにはa:hover::beforeのようにすれば大丈夫です。
クラスセレクタの時も.tag:hover::beforeで適用されます。

inline-block inline-block inline-block inline-block inline-block

a:hover {
  background: #88a;
}

a:hover::before {
  border-right-color: #88a;
}

IE11で見たら幾つかのタグは<a>要素と左の三角の間に切れ目が見えちゃったけど、何かいい方法あるのかな？
とりあえず今は放置してます。

*1:いぃぃっっつも忘れる。