Life is Tech! Lesson
オリジナル制作サンプル集
タイトルをななめにする
難易度：
プロパティ：transform
関連レッスン：Chapter 1 レッスン 1
できあがりイメージ
つくりかた
Step1
ななめにする要素をHTMLから探す
HTML
<header>
<h1>Mom's Bakery</h1>
</header>
このHTMLのheaderタグで囲まれているところに対し、CSSを反映させていきます。
Step2
ななめにする要素のCSSセレクタを探す
HTML
<header>
<h1>Mom's Bakery</h1>
</header>
このHTMLのheaderタグで囲まれているところに対し、CSSを反映させていきます。
Step3
要素をななめにする
transform プロパティを追加して要素をななめにします。
CSS
h1 {
color: #ffffee;/* フォントの色 */
font-size: 90px;/* フォントの大きさ */
font-family: lobster;/* フォントの種類 */
border-style: solid;/* 線の種類 */
border-color: orange;/* 線の色 */
border-width: 10px;/* 線の太さ */
text-align: center;/* 文字・画像を中央にそろえる */
border-radius: 90px;/* 枠線の角丸 */
padding: 20px;/* 内側の余白 */
margin: 30px;/* 外側の余白 */
transform: skew(-20deg);
}
transform を追加して skew を指定すると、要素をななめにかたむけることができます。
カッコの中でかたむける角度を指定します。サンプルでは -20deg にしています。
deg は角度の単位で-20deg は -20度 です。
Step4
コードを書くかコピー＆ペーストする
CSS
transform: skew(-20deg);
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
Step5
要素のデザインを変更する
ななめの形状に合わせてデザインを変更します。
CSS
h1 {
color: #ffffee;/* フォントの色 */
font-size: 90px;/* フォントの大きさ */
font-family: lobster;/* フォントの種類 */
border-left-style: double;
border-right-style: double;
border-color: #ffffee;/* 線の色 */
border-width: 20px;/* 線の太さ */
text-align: center;/* 文字・画像を中央にそろえる */
border-radius: 90px;/* 枠線の角丸 */
padding: 20px;/* 内側の余白 */
margin: 30px;/* 外側の余白 */
transform: skew(-20deg);
}
サンプルでは背景色を指定して、border の色を変更しています。
border は左右に double（2本線）を指定しています。
2本線がキレイにでるように、border-width を 20px に変更しました。
Step6
コードを書き換えるかコピー＆ペーストする
CSS
border-left-style: double;
border-right-style: double;
Step7
実際の見え方を確認する
Mom’s Bakeryの見出しが傾斜していたら完成です。
