【レイアウト構成】番外編：画像を斜めに表示する練習

コーディングのヒント!

コンテンツの横幅を設定するため、全体をdivタグで囲みます。
また、Flexboxで左右のdivタグを横並びに配置します。

画像を斜めに表示

やり方は色々ありますが、今回はよく使う方法として疑似要素を使用します。
疑似要素（before）使って平行四辺形の白いボックスを作り、画像の上に重ねることで斜めに表示します。
ちなみに、beforeではなくafterを使用してもよいのですが、その場合はテキストが下に隠れてしまうので、上に表示する等の考慮が必要になります。
今回は、テキスト側のdivタグに対して疑似要素を設定していますが、画像側のdivタグに設定してもOKです。

タイトルとテキスト

タイトルとテキスト全体をdivタグで囲み、positionを使って所定の位置に配置します。

スマホ時は画像を四角表示

スマホ時は疑似要素を消して、画像を四角で表示します。
疑似要素は「content: none;」を設定するだけ消すことができます。

タイトル下のテキストにPC表示の時だけ改行を入れる

brタグにクラスを設定して、スマホ表示のCSSに「display: none;」を設定しておくと、スマホ表示の場合だけbrタグが消えて改行されなくなります。