CSSHTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。サンプルをご覧ください。紙を切り取ったようなデザインです。»ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。inset;02.テープテープを貼ったようなデザインです。»ポイント「box-shadow」で両脇のはみ出したテープを追加していますが、それより先に元のh1要素に影を設定することでコンテンツの縁とはみ出したテープの境目にも影を落とすことでき、貼り付けたようなデザインを再現しています。全体を3度傾けたあと、h1要素を3度傾いた平行四辺形に変形させることで、コンテンツと背景の境目が垂直になります。skew(-3deg);03.リボンリボンを巻いたようなデザインです。»ポイント傾きは、「02.テープ」と同様に、全体を傾けたあと、h1要素を傾いた平行四辺形に変形させることで調整しています。折り返しの三角形は擬似要素の「:before」と「:after」で「border」を追加。上下のラインは「linear-gradient」で表現しています。92%);三角形の作り方は、以前の記事「アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン」で詳しく紹介していますのでそちらをご確認ください。04.吹き出し漫画の吹き出しのようなデザインです。»ポイント「border-radius」で丸みをだし、内側と外側にベタ塗の影を設定することで表現しています。三角形は「:before」と「:after」の「border」で追加しています。#000;05.アメリカンな(?)吹き出しアメリカンテイストな(?)吹き出しのようなデザインです。»ポイント文字は「text-shadow」を2つ重ねることで装飾しています。背景のストライプは、「linear-gradient」で45度に傾いたラインを作成し、それを4×4pxのタイルを繰り返し配置しています。付箋のようなデザインです。»ポイント「:before」で三角形を作成し、右側と下側に「box-shadow」でh1要素と同じベタ塗の影を設定して付箋を表現しています。「:after」で背景色に透明度を設定した帯を傾けて配置することでマーカーを再現。rotate(-1deg);}07.メタルプレート金属の板のようなデザインです。»ポイント「border」や「box-shadow」で、1pxのハイライト/影を設定する事でエッジの効いた板を表現しています。背景色のグラデーションでメタリック感を出しています。1.0));08.モザイクモザイクのようなデザインです。»ポイント「:before」と「:after」を40px四方のボックスに設定し「:before」には上から下に10pxずつグラデーション、「:after」には左から右に10pxずつグラデーションしたものを重ねる事で表現しています。グラデーションはホワイトの透過度合いを調整し、背景色で元の色を設定しているので背景色を変えるだけで、色をすぐに変える事ができます。旗のようなデザインです。»ポイント紐の部分は「:before」に文字「<」で表現し、棒の部分は「:after」の「border」に傾きと角丸を設定しています。rotate(-2deg);}いかがでしたでしょうか?そのままコピペ使っていただいても、アレンジして使っていただいても、ご活用いただけたら幸いです。以下のfacebookコメントやシェアから感想やご意見、ご指摘などいただけると嬉しいです。ツイートWeb関連ニュース&ブログ更新情報をチェックするTwitterやFacebookではブログの更新情報とあわせて、Webやデザイン関連のニュースをお届けしています。Plusの大きさは、ほぼ1万円札と同じということで試してみた。