webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

ヘッダー・見出しを、『片方だけ丸い・台形・矢印』などおしゃれデザインにできるCSS

      2021/03/04

ヘッダー・見出しを、『片方だけ丸い・台形・矢印』などおしゃれデザインにできるCSS

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』ではない、ちょっと変わったデザインにしてみます。 使う場所によって『ヘッダー』とか『見出し』『フッター』などにも使えそうです。さらにCSSだけで実装できると、画像よりもデータ容量を削れるかもしれません。さっそくやってみましょう。

『boader-radius』で片方だけ丸くする

片方だけ丸くする実装例(画像)

右下だけ丸くしました。文字が左寄せになっていますが、右側に寄せてもよかったかもしれません。

片方だけ丸くするデザインのCSSコードとポイント

{width:100%; height:120px; background-color:#ccccff; border-radius: 0px 0px 100px 0px;}

boader-radiusを使うと、要素の境界線を丸くカーブさせることができます。普通に書くと4箇所がカーブしますが、CSSのマージンとかパディングみたいに『四カ所別々の値』を指定できます(順番は左上・右上・右下・左下と時計回り)。これで片方だけ丸くします。

『transform: skew』で傾斜させたデザインに

傾いたデザイン実装例(画像)

傾いたってよりは、台形っぽくなってしまいました。

傾いたデザインのCSSコードやポイント

{ width:100%; height:120px; margin:auto; background-color:#ccccff; transform: skewX(-25deg); }

transform:skewX(30deg)のように書いて、要素を傾斜させることができます。degは角度(degree)のことです。X軸(横)とY軸(縦)の両方傾斜させるときは『transform:skewY(30deg) skewX(30deg);』みたいに書きます。

width:100%で傾斜してはみ出た分が隠れるので(どっかの親要素にoverflow: hidden;が指定されている)、中の要素にもtransform:skewは受け継がれるので、角度がきつすぎると文字が読めなくなります。

背景だけ傾斜して、中身は傾斜させないときには『擬似要素(beforeなど)z-index(重なり)position(位置)』などでうまく傾斜させずに重ねている方が多い印象です(今回は割愛します)

矢印みたいなデザイン(見出し向き)

矢印みたいなデザイン実装例(画像)

これ、gif画像とかじゃなくてCSSで実装です。ちょっと難しかったです。

矢印みたいなデザインCSSのコードやポイント

htmlは『div class="midashi"』でくくっています。 .midashi { line-height:40px; padding:0 0 0 20px; width:90%; height: 40px; position: relative; background:#ccccff; } .midashi:before { content: ""; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid #ccccff; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .midashi:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 20px solid white; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }

左のへっこんだ部分と右の出た部分は、CSSの『before after擬似要素』beforeの部分はボックスの前にあるんだけど、マイナス指定して重ねています。beforeの三角形(border)は、背景色と同じ(ccccff・薄い紫)にして

widthに余裕があるのは100%だと飛び出た部分がoverflow: hidden;で、矢印がつぶれた感じになるため。スマホの狭い画面だと潰れる可能性があるので、メディアクエリでより狭いwidthを指定する必要があるでしょう

また、この要素だと『vertical-align: middle;』が効かないので(テーブルセルやインラインにしか効かない)、line-heightをボックス高さと一緒にしたら縦が中央にそろいました。

矢印みたいなデザインCSS・参考サイト

なお、このデザインのコードはcss-tricks.comさんに記載されていたコードを参考にしました。いろいろな形の要素をCSSで作っているので、こちらも参考になさってください。

あとがき・まとめ

  • boader-radiusで、片方だけ・一角だけ丸くできる
  • transform:skewX(〇〇deg)で、横方向の傾斜
  • before after擬似要素で、三角形をつけ、矢印のようなデザインに

少しこったのをCSSだけでやるとコードが長くなってしまうんですが、今回のはシンプルめのものをチョイスしてみました。画像よりは軽く、コードもそこまで複雑化しないので、ぜひヘッダーや見出しなどに利用してみてください。


【カテゴリ】 - CSS
【タグ】 - ,

  関連記事

【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする

今回は、かなり地味めなCSSプロパティ(字間スペース&行の高さ) ...

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...