
見本を参考に作成してください。


解答ソースコード
<h1>sectionを斜めに区切っていこう</h1>
<section class="section-wrap">
<h2>section1</h2>
<section class="section section--cat1">
<p>section1のテキストsection1のテキスト</p>
<p>section1のテキストsection1のテキスト</p>
<p>section1のテキストsection1のテキスト</p>
<p>section1のテキストsection1のテキスト</p>
</section>
<h2>section2</h2>
<section class="section section--cat2">
<p>section2のテキストsection2のテキスト</p>
<p>section2のテキストsection2のテキスト</p>
<p>section2のテキストsection2のテキスト</p>
<p>section2のテキストsection2のテキスト</p>
</section>
</section>
¥HTML¥
body {
width: 500px;
margin: auto;
text-align: center;
}
h1 {
position: relative;
font-weight: bold;
font-size: 24px;
}
h1::before {
content: '';
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
height: 1px;
margin: auto;
background: #FE2E2E;
transform-origin: bottom;
transform: rotate(-3deg);
z-index: -1;
}
h1::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 1px;
margin: auto;
background: #0e6edf;
transform-origin: bottom;
transform: rotate(3deg);
z-index: -1;
}
h2 {
text-align: left;
font-weight: bold;
font-size: 18px;
}
.section-wrap {
margin: 24px 0;
padding: 65px 0;
}
.section {
position: relative;
overflow: hidden;
color: #fff;
margin: 24px 0;
padding: 65px 0;
}
.section--cat1::before,
.section--cat2::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 80%;
margin: 3% -10% 0;
z-index: -1;
}
.section--cat1::before {
background: #0e6edf;
-ms-transform-origin: left center;
transform-origin: left center;
transform: rotate(3deg);
}
.section--cat2::before {
background: #FE2E2E;
transform-origin: right center;
transform: rotate(-3deg);
}
¥CSS¥
甲賀
なら実務レベルで使えるスキルを
体系的に学ぶことが可能です
Web制作学習は、決して楽ではありませんが
「正しい方向で」「コツコツ」と続ければ、
必ずスキルアップする事が可能です。
甲賀では、挫折せずに学習を継続するための
カリキュラム・サポート体制をご用意しています。
↓↓↓↓
ステップバイステップで
着実にスキルが身につくカリキュラム
-
step 01
初心者でもよく分かる!
Web制作の基礎の基礎1.知っておこうWeb制作に関する基礎知識の話
2.HTMLの書き方や役割を基礎から学ぶマークアップ入門
3.CSSで挫折しない為の基礎学習【超重要プロパティ】
4.基礎を終えたらHTMLコーディングを鍛えよう(デザインから)
5.初心者向けHTMLコーディング完全解説(STEP1総まとめ)
-
step 02
真似して覚えるWeb制作
(デザイン〜プログラミングまで)1.属性ってなに?などなどHTML,CSSの深堀り編
2.デザイナーから直接学ぶ猫ちゃんサイトのデザイン解説
3.鎧模写-YOROIMOSYA【銅の鎧】
4.JavaScriptで学ぶプログラミングの基本のきほん【16項目】
-
step 03
動きをつけたり、効率化!
脱初心者を目指すためのスキルを学ぼう1.jQueryの基本的な使い方から応用まで【プラグイン解説あり】
2.Web制作でCSSを簡単に書くためのSASS入門【小技あり】
3.現場で使うCSS設計の考え方参考サイトを元に解説
4.生のJavaScriptだけで英単語アプリを作ろう(音声読み上げ付き)
-
step 04
ここまでくれば中級者!
ちょこっと応用編のWeb制作1.JavaScriptの屋敷【鳳凰の間】
2.JavaScriptで作るLINE風チャットボット
3.コマンドラインとアプリ操作を同時に学べるGit【15選】
4.EJSを使いコーディング力を中級者まで引き上げる
-
step 05
実務で必須の制作スキル
WordPressについて学ぶ1.鎧模写-YOROIMOSYA【銀の鎧】
2.PHPを基礎から学びたい人向け14項目から学ぶ【入門】
3.PHPで簡易的な掲示板を作ってみよう【コーディングあり】
4.甘えを吹き飛ばす!WordPress開発
5.WordPressで¥400,000の案件を徹底解説!
6.WordPress有料テーマSnow Monkeyの解体書
解説
今回実装したのは、親要素(.section--cat1/cat2)に対して
position: relative;をかけ::beforeを浮かして
斜め要素の役割を果たす擬似要素を当て込んでます。
斜め要素は擬似要素にしなくてもdivタグなんかで展開することが可能です。
これらを使用する際は、z軸に気をつけてください。
レイヤーの重なりを意識してz-indexを付与してあげます。
また、どこから斜めにするかというのをtransform-originで指定することができますので、こちらの値を明確化するのを忘れないようにしましょう。