css

cssで平行四辺形を作る方法「1行足せばできますよ」

投稿日:

Pocket

うも、チャーさんです。

 

あなたは、cssで平行四辺形に

できないものかと思っていませんか?

 

この記事では、要素をcssで平行四辺形に

する方法を書いています。

 

 

なのであなたがこの記事を読めば、

cssで平行四辺形を作ることが可能です。

 

ということで、cssで要素を平行四辺形に

したいと思っていたら、このまま下にスクロールし

読んでみてください。

 

スポンサードサーチ

cssで平行四辺形にするには

 

ということでまず結論からです。

cssで平行四辺形を作りたい場合、

transform:skewX(数字deg);を使いましょう。

 

transform:というのは、

要素を回転させたり、歪めたり、

軸を元に色々と見せ方を変えることができます。

 

 

そして、skewというのは、

transform:で使える値の1つでして、

これを使うと以下の画像のように、

 

平行四辺形に見せることが可能です。

 

css 平行四辺形

 

で、やり方ですが、

画像をみていただいた通りで、

平行四辺形にしたい要素に対して、

 

transform:skewX(deg)とかき、

degの前に数値を入れましょう。

 

ちなみにこの数値次第で、

平行四辺形の傾き具合が変わります。

 

 

スポンサードサーチ

cssで縦の平行四辺形にしたい場合

 

またこのskewの後のXですが、

これは軸のことでして、二次関数の表

を思い出してもらったらわかると思いますが、

 

Xだと横に、Yだと縦に対して、

傾きが変わっていきます。

 

 

なので、縦がたの平行四辺形を

作りたい場合は、skewYでcss書いてやると良いです。

 

デザインの都合上、divのボックスを、

平行四辺形にしたいこともあるでしょう。

 

そんな時に使ってみてください。

 

スポンサードサーチ

まとめ

 

ということでまとめに入ります。

 

cssで平行四辺形を作りたい場合は、

transform:skewX(数字deg);を使いましょう。

 

これをcssで書いてやれば、

平行四辺形に見せることが可能です。

 

 

ということで、cssでの平行四辺形のやり方は、

わかったと思いますので、あなたの方でも

実践してみましょう。

 

するとスキルアップしますよ。

 

 

ということで、手順ですが、

まずは平行四辺形にしたい要素を用意しましょう。

 

わかりやすいのはdivです。

 

css

div {
height:100px;
width:100px;
border:1px solid black;
}

html

<div>
</div>

 

コピペで楽できるように

上にコードのせときます。

 

 

で、あとは、cssでtransform:skewX()を

書きましょう。

 

コード例としては以下です。

div {
height:100px;
width:100px;
transform:skewX(20deg);
border:1px solid black;
margin-left:50px;(平行四辺形にすると横に伸びるのでお好みで)
}

 

でブラウザを再読み込みして、

ちゃんと平行四辺形になってればokです。

 

 

ということで、cssで平行四辺形を作る方法に

ついての記事でした。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。