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

レイアウト構成

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

コーディングのヒント!

コンテンツの横幅を設定するため、全体を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サイト制作でよく使う技術を練習

リクエスト受付中
【プレゼント特典あり】

当サイトを利用いただき誠にありがとうございます。

皆様の学習がより良いものになるよう、日々サイトの改善に努めております。

利用してみて、「分かりづらい、もっとこうしたほうが良い」という点、「こんな学習内容があればいいのに」というリクエストをお送りください。

特典としまして、当サイトでは公開していない追加の学習コンテンツをご案内させいただきます。

【プレゼント特典】

【特別編】コーポレートサイト/サイドメニュータイプ

学習内容は以下の通りです。

  • ・デモサイト
  • ・レイアウト構成解説
  • ・ソースコード

下記、アンケートフォームでご入力いただいたメールアドレスへ、学習ページのURLをお送りさせていただきます。

※メールが届かない場合、メールアドレスの入力間違いか、迷惑メールへ振り分けられている可能性がありますのでご確認ください。

    【アンケートフォーム】

    ※学習に関するご質問につきましては、質問箱からお願いいたします。

    (※学習コンテンツのURL送付以外の目的で使用いたしません。)