【レスポンシブ対応】flexで記事と写真、横並びのコンテンツを作る

flexで横並びのコンテンツを作る

CSSを使ってパソコンでは横並び、スマホでは縦並びのサイトを作ってみたいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="box">
    <div class="photo"></div>
    <div class="text">
      <h1>WEBデザイン講座</h1>
      <p>CSS.flex</p>
    </div>
  </div>
</body>
</html>

このような漢字のHTMLを用意してください。内訳としては<body>タグの中に、<div class=”box”>があり、その中に<div class=”photo”> <div class=”text”>が入ってる状態です。HTMLはこれまででCSSを書いていきます。

完成形

予め完成形のCSSも載せます。解説見ないで作りた方はコピペしてください。

@charset "utf-8";

.box {
  max-width: 1000px;
  margin: 0 auto;
}

.photo {
  min-height: 300px;
  background-image: url(リンクを入れてください);
}

.text {
  padding: 10px;
}

@media(min-width:1024px) {
  .box {
    display: flex;
  }

  .photo {
    flex: 3;
  }

  .text {
    flex: 2;
  }
}

フォントサイズなどはデフォルトのままなのでご自身で調整してください。

１ flexで写真とテキストを横並び

<div class=”box”>の大きさを指定します。横に大きすぎても見づらいのである程度限界の大きさを決めます。そのため、max-width:1000pxとします。そしてmargin: 0 auto;で中央よせします。

<div class=”box”>の子要素には<div class=”photo”> <div class=”text”>が入っている為、それらをflexにより横並びにします。その際スマホ画面では横並びにしなくていいのでメディアクエリを使って画面が1024pxの時だけflexにします。

@media(min-width:1024px) {
  .box {
    display: flex;
    margin: 0 auto;
  }
}

２.photoの縦幅と画像を入れます

画像はimgダグではなくbackgroundで画像を表示させる為、divの大きさを指定します。横幅は後設定しますので、とりあえず縦幅をmin-hiight:300px;とします。min-widthで最低でも300pxの大きさを確保します。

そしてbackground-imageで画像を挿入します。

３写真とテキストの幅の比率を指定します　

flexでフレックスにした値の割合を決めます。

/*メディアクリエの中に*/
  .photo {
    flex: 3;
  }

  .text {
    flex: 2;
  }

完成

これで写真をテキストを分けることに成功しました、あとは文字の大きさやボタンなどを配置すれば良いです。

デモサイト完成