2019/05/28こんにちは、管理人@SS_mshpです。今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』ではない、ちょっと変わったデザインにしてみます。使う場所によって『ヘッダー』とか『見出し』『フッター』などにも使えそうです。CSSだけで実装できると、画像よりもデータ容量を削れるかもしれません。■『boader-radius』で片方だけ丸くする■片方だけ丸くする実装例(画像)右下だけ丸くしました。文字が左寄せになっていますが、右側に寄せてもよかったかもしれません。0px;}boader-radiusを使うと、要素の境界線を丸くカーブさせることができます。これで片方だけ丸くします。skew』で傾斜させたデザインに■傾いたデザイン実装例(画像)傾いたってよりは、台形っぽくなってしまいました。skewX(-25deg);}transform:skewX(30deg)のように書いて、要素を傾斜させることができます。degは角度(degree)のことです。skewX(30deg);』みたいに書きます。hidden;が指定されている)、中の要素にもtransform:skewは受け継がれるので、角度がきつすぎると文字が読めなくなります。背景だけ傾斜して、中身は傾斜させないときには『擬似要素(beforeなど)z-index(重なり)position(位置)』などでうまく傾斜させずに重ねている方が多い印象です(今回は割愛します)■矢印みたいなデザイン(見出し向き)■矢印みたいなデザイン実装例(画像)これ、gif画像とかじゃなくてCSSで実装です。class=”midashi”』でくくっています。after擬似要素』beforeの部分はボックスの前にあるんだけど、マイナス指定して重ねています。hidden;で、矢印がつぶれた感じになるため。スマホの狭い画面だと潰れる可能性があるので、メディアクエリでより狭いwidthを指定する必要があるでしょう。middle;』が効かないので(テーブルセルやインラインにしか効かない)、line-heightをボックス高さと一緒にしたら縦が中央にそろいました。このデザインのコードはcss-tricks.comさんhttps://css-tricks.com/examples/ShapesOfCSS/に記載されていたコードを参考にしました。■あとがき・まとめ少しこったのをCSSだけでやるとコードが長くなってしまうんですが、今回のはシンプルめのものをチョイスしてみました。画像よりは軽く、コードもそこまで複雑化しないので、ぜひヘッダーや見出しなどに利用してみてください。wpサイト制作受付サイトへ*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。...【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る今回は、フレームワークを使ったサイト制作を行ってみます。今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。...【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。検索:このサイト管理人についてこのコラムと『アトリエss』サイトを運営しております、管理人の五十嵐と申します。活動地域は東北の仙台市です。