東北・仙台市拠点のwordpressエバンジェリストが送る、 動画・webサイト制作・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サイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

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

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpressの仕組みねたで記事にできそうなポイントがあったのでお伝えします。 アクションフックだっ …

【wpプラグイン】ワードプレスサイトで、スマホアクセス時だけ軽量テーマに切り替える方法

今回は、スマホでみるとワードプレスサイトがちょっと重い件について対策してみます。 紹介するプラグインは『デバイスに応じてテーマ切り替え』という機能。軽量テーマと …

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

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵はイラストacさんからお借りしました。CSS3では、カンタンなアニメーションを実装できるの …

ワードプレスサイトの独自ドメイン解除方法

今回は、以前『ワードプレスに独自ドメインを設定する方法』を書きましたが、その逆もやってみたのでお伝えします。 需要があるかはわかりませんが、『構造を知る』とか、 …

音声セミナー・講座・音楽視聴をサイトに実装できる、HTML5 audio要素を使いこなそう

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTMLタグを紹介します(オーディオ)。 ブラウザ対応やどんなサイトに使えるかなどを、さっそく …

ワードプレスでタイトルが長くなりすぎるのを、適正な長さにして検索表示対策

今回は、ワードプレスの個別記事タイトルの検索表示を最適化して、検索してきたユーザーに対して見やすくする方法です。 一時期はタイトルにキーワードを詰め込みまくるの …

【WPプラグイン】PDFで、ワードプレスを電子書籍風にできる『PDF light viewer』

今回は、ワードプレス&WPプラグインを使って、めくれる電子書籍風のページを実装したサイトを作ってみます。 使用するプラグインは『PDF light viewer …

検索エンジンに登録されやすくするため、xmlサイトマップ作成~ツール・wpプラグインなどのやり方紹介

今回は、ちょっと更新の必要がでてしまったため、xmlサイトマップを扱います。 googleなどの検索エンジンに送ったりするファイルで、きちんと登録されているとよ …

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

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームページ制作請負)を少しリニューアルしてみた件についてお話します。 しばらくほったらかしだった …

【ワードプレスサイト高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法

今回は、ワードプレスサイトの使い勝手(読者から見た)を向上させるプラグインを紹介いたします。 一般的には重いとされるワードプレスサイトで、表示速度対策は必須です …