cssのみで条件分岐(セレクタ利用)

Pocket

今回はcssのセレクタを利用した条件分岐的な書き方をご紹介します。

デモはこちら

<仕様>

・レスポンシブ対応

・写真のみの場合は中央寄せで原寸サイズの写真を表示

・テキストと写真が並んでいる場合は、写真の最大幅を300pxとしてマージンは20px

それでは、解説。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/common.css">
    <title>デモ</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="backgroundBox">
        <div class="Container">
          <p>1.テキストと写真があるとき</p>
          <div class="flexBox">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><img src="images/sample.png">
          </div>
        </div>
        <div class="Container">
          <p>2.テキストのみ</p>
          <div class="flexBox">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
        <div class="Container">
          <p>3.写真のみ</p>
          <div class="flexBox"><img src="images/sample.png"></div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer></footer>
  </body>
</html>

○index.css

* {
  margin: 0;
  padding: 0; }

img {
  max-width: 100%;
  vertical-align: bottom; }

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.Container {
  max-width: 960px;
  padding: 10px 10px 0;
  margin: 0 auto 20px;
  background-color: #9e9e9e40; }

.flexBox {
  padding-top: 20px; }
  .flexBox p {
    padding-bottom: 20px; }
  .flexBox img {
    padding-bottom: 20px;
    display: block;
    margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .flexBox {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start; }
      .flexBox p + img {
        display: block;
        margin-left: 20px;
        max-width: 300px; } }

＜ポイント＞

・テキストと写真が並んでいるときは、隣接セレクタを利用する。(今回で言えば、+の記号のこと)

.flexBox p + img {
display: block;
margin-left: 20px;
max-width: 300px; }

p要素の直後にimg要素があるときにのみcssを適用できる。これってifと同じように条件分岐ですよね。

これを利用すれば、CMSとか作成するときに便利だと思います。

以上です。