サイト名称変更のお知らせ

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

コーディング練習レイアウト構成ソースコードデモ

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

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

画像を斜めに表示: 「clip-path」プロパティのpolygonを使用します。
polygonの1番目の値のX座標を右にずらすことで、画像の左上の点が右にずれ画像を斜めにすることができます。
タイトルとテキスト: タイトルとテキスト全体をdivタグで囲み、positionを使って所定の位置に配置します。
スマホ時は画像を四角表示: スマホ時は疑似要素を消して、画像を四角で表示します。
疑似要素は「content: none;」を設定するだけ消すことができます。
タイトル下のテキストにPC表示の時だけ改行を入れる: brタグにクラスを設定して、スマホ表示のCSSに「display: none;」を設定しておくと、スマホ表示の場合だけbrタグが消えて改行されなくなります。

コーディング練習メニューに戻る

【HTML/CSS コーディング練習】番外編：画像を斜めに表示する練習

関連記事

コーディング練習一覧