【レイアウト構成】番外編：画像を斜めに表示する練習
レイアウト構成
コーディングのヒント!
コンテンツの横幅を設定するため、全体をdivタグで囲みます。
また、Flexboxで左右のdivタグを横並びに配置します。
- 画像を斜めに表示
「clip-path」プロパティのpolygonを使用します。
polygonの1番目の値のX座標を右にずらすことで、画像の左上の点が右にずれ画像を斜めにすることができます。※clip-pathプロパティの使い方については、「【CSS】clip-pathプロパティの使い方について」で詳しく解説しています。
- タイトルとテキスト
- タイトルとテキスト全体をdivタグで囲み、positionを使って所定の位置に配置します。
- スマホ時は画像を四角表示
- スマホ時は疑似要素を消して、画像を四角で表示します。
疑似要素は「content: none;」を設定するだけ消すことができます。 - タイトル下のテキストにPC表示の時だけ改行を入れる
- brタグにクラスを設定して、スマホ表示のCSSに「display: none;」を設定しておくと、スマホ表示の場合だけbrタグが消えて改行されなくなります。
