HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
![H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -](https://cdn-ak-scissors.b.st-hatena.com/image/square/6b263bf899c02d4253c6fceaca911b7ec35d8b4a/height=288;version=1;width=512/https%3A%2F%2Fsqueeze.jp%2Fwp%2Fwp-content%2Fuploads%2F2013%2F02%2Feyecatch-heading-design-css-only_256x256.png)