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

レイアウト構成

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

コーディングのヒント!

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

画像を斜めに表示
やり方は色々ありますが、今回はよく使う方法として疑似要素を使用します。
疑似要素(before)使って平行四辺形の白いボックスを作り、画像の上に重ねることで斜めに表示します。
ちなみに、beforeではなくafterを使用してもよいのですが、その場合はテキストが下に隠れてしまうので、上に表示する等の考慮が必要になります。
今回は、テキスト側のdivタグに対して疑似要素を設定していますが、画像側のdivタグに設定してもOKです。
タイトルとテキスト
タイトルとテキスト全体をdivタグで囲み、positionを使って所定の位置に配置します。
スマホ時は画像を四角表示
スマホ時は疑似要素を消して、画像を四角で表示します。
疑似要素は「content: none;」を設定するだけ消すことができます。
タイトル下のテキストにPC表示の時だけ改行を入れる
brタグにクラスを設定して、スマホ表示のCSSに「display: none;」を設定しておくと、スマホ表示の場合だけbrタグが消えて改行されなくなります。

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

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習