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

      2021/06/22   2634文字

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

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

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

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

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

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

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

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

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


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

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

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”』でくくっています。左のへっこんだ部分と右の出た部分は、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だけでやるとコードが長くなってしまうんですが、今回のはシンプルめのものをチョイスしてみました。画像よりは軽く、コードもそこまで複雑化しないので、ぜひヘッダーや見出しなどに利用してみてください。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


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

  関連記事

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)
【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)
【WordPressテーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど
WordPress CSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック
【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする
【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由
bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】
サイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現
【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装
【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)