Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

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

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

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

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

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

no image

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

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

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

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

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

最新記事

チャーさん

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

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

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