質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • HTML

    8348questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    3742questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブの正方形を配置し、中央に画像が表示される画面を作りたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 217

KSK8000

score 11

レスポンシブの正方形を配置し、中央に画像が表示される画面を作りたい

現在、レスポンシブデザインのサイトを作成しております。
レスポンシブの正方形を配置して
中央に画像が表示される画面を作ろうとしております。

しかし、資料を基にHTMLを作成しても、希望の表示にならない状況です。
私の作成したコードに問題があればご指摘いただければと思います。
また、希望の画面を作る方法をご存知の方がいらっしゃれば
ご教授願えないでしょうか?
どうぞよろしくお願いいたします。

現在のコード

<style>
.squareBox{
  position: relative
  &:before
    display: block
    content: ''
    padding-top: 100%
}
  .content{
    position: absolute
    top: 0
    width: 100%
    height: 100%
    box-sizing: border-box
    overflow: hidden
}
.thumb{
  width: 100%
  height: auto
}
.centerTable{
  display: table
  table-layout: fixed
  text-align: center
  width: 100%
  height: 100%
   > .tableCell
    display: table-cell
    vertical-align: middle
}
</style>
<body>
<div class="squareBox">
        <div class="content">
          <div class="centerTable">
            <div class="tableCell">
              <img class="thumb" src="Image.jpg">
            </div>
          </div>
        </div>
      </div>
</body>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kszk311

    2018/05/16 22:16

    CSSのそれぞれの指定ごとに、「;」をつければいいような気も…。あと、見た所Sassのようですが、いったん素のCSSで組まれてはどうでしょう?

    キャンセル

  • kszk311

    2018/05/16 22:24

    コード上おかしいところは指摘できますが、希望の画面というのは、質問者さんしか知らないので、具体的に画像で例を示すなどしていただかないと、答えようがありません。

    キャンセル

  • KSK8000

    2018/05/17 10:23

    >kszk311様 不十分な質問でお目汚しいたしました。以後、気を付けたいと思います。

    キャンセル

回答 1

checkベストアンサー

+3

まず、画像は元から正方形なのでしょうか?一応、正方形ではないという前提で進めます。

また、

レスポンシブの正方形を配置し

という部分が具体的でないため、質問者様のやりたいことが憶測になってしまいますが、

  • 正方形ではない画像を中心から正方形にトリミングされた状態でボックス内に表示したい
  • ボックスは親要素の横幅の比率によって変わるため、〜px などの絶対指定をせず 〜% など相対で指定したい

上記を実現したい、という前提で進めます。見当違いの回答でしたらすみません。

※この方法はIE11およびEdgeには対応していません。対応方法は後述します。
※重要な点だけ下記に箇条書きにしています。
※わかりやすい様にマークアップを修正しています。

 要点

1. .squareBox へ、親要素に対しての横幅の比率を指定します。

e.g.
親要素の 1/2 なら width: 50%;、 1/5 なら width: 20%;

※ 親要素ではなく画面全体に対しての比率にしたい場合は、 vw という相対単位の指定が可能です。

e.g.
画面全体の 1/2 なら width: 50vw;、 1/5 なら width: 20vw;

2. .squareBox に ::before 疑似要素を生成し、アスペクト比を考慮に入れた padding-top を指定します。

e.g.
正方形なら padding-top: 100%;、4:3の長方形なら padding-top: 75%;

3. 画像そのものの親要素( .squareBox__item )に対して絶対配置と上下左右引き伸ばしを指定します。

- position: absolute; z-index: 1;
- top: 0; left: 0; bottom: 0; right: 0;

4. 画像( .squareBox__image )に幅と高さを指定し、 object-fit: cover; にてトリミングします。

表記例:

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style media="screen">
    .squareBox {
        width: 50%; /* 1. */
        position: relative;
        z-index: 0;
    }
    .squareBox:before { /* 2. */
        content: '';
        display: block;
        padding-top: 100%;
    }
    .squareBox__item {
        margin: 0;
        padding: 0;
        display: block;
        position: absolute; /* 3. */
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
    }
    .squareBox__image {
        width: 100%;  /* 4. */
        height: 100%;
        object-fit: cover;
    }
    </style>
</head>



<body>

    <div class="squareBox">
        <figure class="squareBox__item">
            <img src="https://source.unsplash.com/category/nature/800x400" class="squareBox__image">
            <!-- ^^^ 参考のため、横長の画像をランダムで入れています -->
        </figure>
    </div>

<!-- スクリプト入れるなら・・・ -->
</body>

</html>

 ※もしIE11およびEdgeにも object-fit を対応したい場合

IE11およびEdgeへ object-fit プロパティを適用することはできません。
そのため、「IE11とEdgeの場合には要素のサイズや配置を JS で変更する」必要が出てきます。
この JS の処理を一から考えるのは大変ですが、ちょうど良いプラグインがあります。
今回、 object-fit-images というJSプラグインを使用して進めて参ります。

1. プラグインをダウンロード

object-fit-images のページにアクセスし、「Clone or download」ボタン -> 「Download ZIP」へ進み、 ZIP ファイルをダウンロードします。

2. プラグインを任意のディレクトリへ設置

上記でダウンロードした ZIP ファイルを展開すると、下記の位置にプラグインが入っています。

object-fit-images-master/
└─ dist/
   └─ ofi.min.js

この ofi.min.js をご自身のプロジェクト内の任意の位置へ配置して下さい。

3. jQuery とプラグインを読み込み、関数を実行

jQueryとプラグインを読み込み、 objectFitImages() を実行させる記述をします。
※ </body> の直前に挿入します。(「スクリプト入れるなら・・・」のあたりですね。)

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="{置いたディレクトリ}/ofi.min.js"></script>
<script>
objectFitImages();
</script>


4. IE・Edgeに対応させるプロパティをCSSへ追記

object-fit: cover; を指定しているセレクタへ、 font-family: 'object-fit: cover;' を指定します。

※本件であれば

.squareBox__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;'
}


のような形ですね。

 補足

質問のコードが Sass 記法になっているのが気になりました。
Sass はコンパイラ言語なので、 <style> タグに書いてもスタイルはあたりません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/17 10:34

    >simesava様 丁寧な回答ありがとうございます。至らない質問でご迷惑おかけしました。

    キャンセル

  • 2018/05/17 11:55 編集

    すみません、回答内の表記に誤りがあったため修正しております。①「4:3の長方形なら padding-top: 100%;」-> 「4:3の長方形なら padding-top: 75%;」、②「ライブラリ」 -> 「プラグイン」

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8348questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    3742questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。