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

   

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

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

   

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

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もS …

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

今回は、googleカレンダーとメールフォームで、予約受付ページを作って …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法 …

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作につい …

ワードプレスCSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック

今回は、ワードプレスのサイト制作をするとき、ひっかかりそうなポイントにつ …

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

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

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

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

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

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …