読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

最近流行りの見出しスタイル

HTML&CSS

 Qiitaに見出しに関して提案するくらいにはいちおうheadingのスタイルを注視しています。

QiitaにIttaこと - Birth of the Fool
 それで、ここのところ、割と最近になってみるようになったCSSのHeading Styleがあったので紹介します。例を見た方が早いので、以下をご覧下さい。

PUBLIC

f:id:sthmdnss:20140910213155p:plain
PUBLIC. Award Winning Restaurant & Bar in Brisbane’s CBD

 サイボウズ式の方は、ベースとなる灰色の線に画像を使っています。CSSだけでできるのならばそうすることに越したことはないので、CSSだけで書いてみます。
 書いてみます、と言いましたが、気になってソースを見たことがカンニングになってしまいまして、殆ど上のほうのリンク先のCSSをなぞったものになっています。
 jsfiddleに載せたので、ブラウザ上で実際にご覧いただけます。

trending heading style - JSFiddle
 CSSだけを引用します。

* {
    box-sizing:border-box;
}
.title-area {
    padding-bottom: 10px;
    border-bottom: solid 4px lightgray;
}
.title {
    display:inline-block;
    font-size:24px; 
    font-weight:bold;
    border-bottom:4px solid #BE9800;
    margin-bottom:-13px;    
    padding: 0 5px 10px 5px;
}

 ポイントとしては、headingに対するinline-blockでしょうか。これには、もう一つのスタイル上の使いみちがあるのでいつか紹介します(もう読者の方は知っている可能性が高いですが)。あと、paddingとmarginはfont-sizeによって、適宜かえる必要が出てくることがあります。ややこしいですが、ブラウザの開発ツールを使って1pxずつ変えてみて調整すれば何とかなると思います。
 公式化できたらまた載せます。
追記 iframeで埋め込みできることを知ったので、貼っておきます。