wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

WordPress屋のマルチメディアコンテンツ制作読んどけ☆コラム

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

      2019/05/28

こんにちは、管理人@SS_mshpです。

今回は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: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;
}

.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;
}

左のへっこんだ部分と右の出た部分は、CSSの『before after擬似要素』beforeの部分はボックスの前にあるんだけど、マイナス指定して重ねています。

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

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

なお、このデザインのコードはcss-tricks.comさん
https://css-tricks.com/examples/ShapesOfCSS/
に記載されていたコードを参考にしました。

■あとがき・まとめ

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

  関連記事

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

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

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

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

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニューをサイ …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている …

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動して …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …