[HTML & CSS General] CSS: 見出しの装飾でテキストを上に付けたり右に寄せたりする

position タグの relative, absolute でまかなうよう。

[markdown]
こんなHTMLを用意。

“`html:index.html

見出しの上に付くテキスト
見出しのテキスト
右寄せするテキスト

“`

CSSをこのように。

“`css:heading.scss
.heading-4 {
position: relative;
height: 100%;
// 装飾
background: url(/img/bg.png) no-repeat bottom left;
padding: 0 0.5em 0 0.5em;
margin: 2em 0 1em 0;
font-size: 18px;
color: #000;
font-weight: bold;
.heading-4-sup {
position: absolute;
top: -24px;
// 装飾
font-size: 14px;
color: #fff;
font-weight: normal;
}
.heading-4-right {
position: absolute;
right: 7px;
top: 4px;
// 装飾
font-size: 14px;
}
}
“`

> * [Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス](http://www.webcreatorbox.com/tech/css-heading-list-blockquote/)
> * [見出しは左寄せに、見出し内のアンカーは右寄せにする CSS | Blog | weeeblog+](http://weeeblog.net/blog/2008/01/29_0130.php)
> * [【CSS】見出しの横に「更新日」とか並べて表示したい時の簡単なCSSの書き方 | バシャログ。](http://c-brains.jp/blog/wsg/09/03/09-210351.php)
[/markdown]