CSSでスタンプ風アクセントをつくる

小見出しのアクセントとして、その左上にスタンプを捺したいと思い、CSSで書いてみた。
やりたいのは下のようなデザインだ:

これで君もモテモテだ
注目!


こんな風に、

  • 小見出しの左肩に
  • 数文字からなるスタンプを
  • 斜めに捺したい
  • スタンプの文字は適宜変更したい

というものをつくりたい。
という訳で、この記事ではこのようなスタンプ風アクセントをCSSでつくった経緯を、3段階で紹介したい。何故3段階かと言えば、僕がこれをつくるのに苦労したのが

  1. どうやってアイテムを斜めにするか
  2. どうやって小見出しの左肩に配置するか

の2点だったので、それ以外の部分をまずさらっと説明した上で、この2つを説明しようと思ったからである。

第1段階:スタンプを真っ直ぐ捺してみよう

まずは、スタンプ自体をつくってみたい。スタンプっぽく見せるには、とりあえず文字を枠で囲えばいいかなと思ったので、

/*CSS*/
div.stamp{
      color: red; /*文字色を赤に*/
      border-style: solid; /*枠線スタイルを実線に*/
      border-width: medium; /*枠線の太さを中に*/
      border-color: red; /*枠線の色を赤に*/
}
<!--HTML-->
<div class="stamp">注目!</div>

と書いてみた。結果、

注目!
となった。あーあ、枠が右に伸びてしまった。仕方ないので幅を指定する。

/*CSS*/
div.stamp{
      color: red;
      border-style: solid;
      border-width: medium;
      border-color: red;
      width: 2.5em; /*枠の幅を文字2.5個分に*/
}
<!--HTML-->
<div class="stamp">注目!</div>

すると

注目!
と、一応は文字に沿って枠がついた。しかし文字と枠のバランスが悪いなぁ。ということで、パディングを調節する。ついでに文字を太字にしてみた:

/*CSS*/
div.stamp{
      color: red;
      font-weight: bold; /*フォントを太字に*/
      border-style: solid;
      border-width: medium;
      border-color: red;
      width: 2.5em;
      padding: 0em 0.5em 0em 0.5em; /*パディングを調節 上下0em 左右0.5em*/
}
<!--HTML-->
<div class="stamp">注目!</div>

結果、

注目!
まぁこんなもんかな。

第2段階:スタンプを斜めに捺してみよう

さて、「斜め」である。要は回転させれば良いのだが、これにはtransformプロパティのrotateというものを使う。transformプロパティがCSS3から追加されたものなので、面倒ですがベンダープレフィックスをつけています。

/*CSS*/
div.stamp{
      -moz-transform: rotate(-30deg); /*−30度回転(Mozilla系ブラウザ e.g.: Firefox)*/
      -webkit-transform: rotate(-30deg); /*−30度回転(Webkit系ブラウザ e.g.: Safari, Google Chrome)*/
      -o-transform: rotate(-30deg); /*−30度回転(Opera系ブラウザ e.g.: Opera)*/
      -ms-transform: rotate(-30deg); /*−30度回転(Microsoft系ブラウザ e.g.: Internet Explore)*/
      color: red;
      font-weight: bold; 
      border-style: solid;
      border-width: medium;
      border-color: red;
      width: 2.5em;
      padding: 0em 0.5em 0em 0.5em;
}
<!--HTML-->
<div class="stamp">注目!</div>


注目!

とりあえず斜めにできた。

第3段階:小見出しの左肩に配置する

さて、最終段階です。小見出しの左肩に配置したい、もっと言うと、ちょっと小見出しに重なってほしいので、色々検討した結果、positionプロパティをabsoluteすることにしました。何も付けずにabsoluteするととんでもないところを基準座標にしちゃうので、divで見出しを囲い、その中に更にdivをネストすることで、基準座標を小見出しの左上にしています。

/*CSS*/
div.stamp{
      -moz-transform: rotate(-30deg); /*−30度回転(Mozilla系ブラウザ e.g.: Firefox)*/
      -webkit-transform: rotate(-30deg); /*−30度回転(Webkit系ブラウザ e.g.: Safari, Google Chrome)*/
      -o-transform: rotate(-30deg); /*−30度回転(Opera系ブラウザ e.g.: Opera)*/
      -ms-transform: rotate(-30deg); /*−30度回転(Microsoft系ブラウザ e.g.: Internet Explore)*/
      color: red;
      font-weight: bold; 
      border-style: solid;
      border-width: medium;
      border-color: rgba(255,0,0,0.75); /*rgba()関数を用いて透過パラメータ(アルファ値)を0.75に指定*/
      /*width: 2.5em;*/
      padding: 0em 0.5em 0em 0.5em;
      position: absolute; /*配置を絶対座標基準に*/
      top: -0.5em; /*デフォルトで配置を0.5em上にシフトする*/
}
div.stamped{
      margin: -1em 0em -1em 0em; /*上下のマージンを削っています*/
      padding-left: 1em; /*スタンプの文字数に関係なく小見出しの左に1文字分のスペースを置く*/
      position: relative; /*配置を相対座標基準に*/
}
<!--HTML-->
<!--スタンプの位置を文字数によって微調整するので、divタグ内でstyleプロパティをいじっています-->
<h4><div class="stamped">小見出し<div class="stamp" style="top: -1em; left: -1em;">注目!</div></div></h4>

※HTMLコードは横スクロールします


お、それっぽくなった。スタンプが小見出しの文字を潰して読みづらい気がしたので、透過色指定をしてみました。その他、topやleftを使って配置を微調整しています。
また、widthプロパティを切っていますが、これはpositionプロパティをabsoluteに指定したので不要になった…っぽいです。よくわからんが、これでスタンプ内の文字数の制限はなくなり便利になりました。

小見出し
大注目!

あと、はてなダイアリーでこれを使うと、デザインのテンプレートによってはスタンプの左側が切れてしまうことがあります。これはbody要素のoverflowプロパティがhiddenに設定されているため、body本来の範囲からはみ出したコンテンツが消えてしまっているからです。このプロパティをvisibleにすれば、スタンプの欠けが直ります。

コードまとめ

/*CSS*/
div.body{ /*スタンプの左がかけてしまう場合はこの3行を追加*/
      overflow: visible;
}
div.stamp{
      -moz-transform: rotate(-30deg);
      -webkit-transform: rotate(-30deg);
      -o-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
      color: red;
      font-weight:bold; 
      border-style:solid;
      border-width:medium;
      border-color:rgba(255,0,0,0.75);
      padding: 0em 0.5em 0em 0.5em;
      position: absolute;
      top: -0.5em;
}
div.stamped{
      margin: -1em 0em -1em 0em;
      padding-left: 1em;
      position: relative;
}
<!--HTML-->
<h4><div class="stamped">小見出し<div class="stamp" style="top: -1em; left: -1em;">注目!</div></div></h4>

※HTMLコードは横スクロールします