タイトル下のボーダーの両端にダイヤを入れようとした

始まりは、webデザイン担当小川の、この依頼でした。

無茶振り

いや……無理やん?

都合の良いように変更してツッコミが入ったら「最初からそんなんでしたよ?ほら、こっちのillustrator、CS5ですし?CCじゃないですし?データが壊れちゃったんですよ。CCに変えてくれたら大丈夫なんですけどね〜変えてくれたらね〜」と論点のすり替えを行おうかとも思ったのですが。
一応、頑張ってみました。

とは言っても、永遠の初心者コーダーです。
とりあえずダイヤの画像を作って、beforeとafterに入れてみれば何とかなるんじゃないか、と軽い気持ちで試してみたところ……

知識不足による失敗

そりゃこうなりますよね〜。

いっそ画像じゃなくて、疑似要素でダイヤ作っちゃえばいいんじゃないかな。でもそんな知識は……と思った能登でしたが、ふと思い出したのが、いつも利用させていただいている、デザインサンプルでした。
スキルもなければセンスもない私の強い味方です。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50(NxWorld様 より)

こちらの「マーク #1」を参考に、このようなコードにしてみました。

■HTML

<h1>タイトル</h1>

■CSS

h1 {
  position: relative;
  padding: 0 1em;
  border-bottom: 1px solid #000;
}
h1::before {
  position: absolute;
  bottom: -.2em;
  left: 0;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
h1::after {
  position: absolute;
  bottom: -.2em;
  right: 0;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

他力本願で成功

成功しました!
レスポンシブでも問題ないです。
確認した限りだと、横320pxまでは両端にダイヤがありました。

タイトルが長くなり、複数行になっても

カラス

大丈夫です。
大丈夫じゃないのは、とうとうカラスまで羨み始めた社長だけです。

いつものように、社長のfacebook記事からでした。

暑くて食欲がなくなりがち……だと思ったら、大好きだけど最近足を運べていないレストランがFacebookページを更新したのを見て、お腹が鳴りました。
仕事中のFacebookは色々と危険ですね。

【ハートブレーン】http://heartbrain.net

メールでのお問合せ・お見積りはコチラ