cssについて


下記のように一定の量で変化する数十行を
1行かそれに近い感じで書く方法は無いでしょうか。

javascriptではなく cssでお願いします。

@media screen and (max-width:800px){ #hoge{ height: 400px; } }
@media screen and (max-width:780px){ #hoge{ height: 390px; } }
@media screen and (max-width:760px){ #hoge{ height: 380px; } }
@media screen and (max-width:740px){ #hoge{ height: 370px; } }
@media screen and (max-width:720px){ #hoge{ height: 360px; } }
@media screen and (max-width:700px){ #hoge{ height: 350px; } }

よろしくお願いします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/09/27 10:49:05
  • 終了:2014/09/29 18:12:59

ベストアンサー

id:u_7cc No.2

7cc回答回数32ベストアンサー獲得回数142014/09/27 15:25:38

ポイント70pt

(先にあるようにCSSのみでは不可能なので)参考までにをSass(SCSS)で書くとこうなります。

@for $i from 1 through 6 {
  @media screen and (max-width: 820px - $i * 20){ #hoge{ height: 410px - $i * 10; } }
}

コンパイルが要るので趣旨には添わないと思いますが、CSSを書く機会が多いようでしたらSassなどの導入をお勧めします。

--------

追記後

#hogeのサイズを変えない限り期待の動作にはならないので、そうしてよいのなら

#hoge {
    max-width: 100%;
    height: 10vw; /* ここがポイント */
    max-height: 190px;
    background: url(https://www.google.co.jp/images/srpr/logo11w.png) no-repeat;
    background-size: contain;
}
id:worldtravel

!!!これいいですね!!!

ちょっといじりましたが、現在のところ、ほぼ希望通りの動きをしています。
もう少しこれをいじってみます。

ありがとうございます。

2014/09/29 18:11:23

その他の回答(3件)

id:jislotz No.1

ジント兄さん回答回数19ベストアンサー獲得回数72014/09/27 12:56:19

ポイント10pt

残念ながらできません。

しかし、そういう書き方をしたいと思った、より根本的な動機が何なのかがハッキリすれば、
もしかしたら何か違った方法が使えるかもしれません。

たとえば、質問文章中のコードの#hogeがbody要素の直下の子供で、
#hogeの高さをbody要素の幅の半分にしたいというのであれば、
CSSで不可能というわけではありません。

body > #hoge {
padding: 25% 0;
position: relative;
}
body > #hoge > div {
left: 0;
max-height: 100%;
position: absolute;
top: 0;
width: 100%;
}

#hogeの中にさらに皮を増やしたりして、美しい方法ではありませんが、
何十行を同じようなコードをリピートするよりはマシなのではと思います。


補足を受けて追記

最初に答えたやつと同様に要素の皮が一枚増える方法しか思いつきませんでした。
以下は手元で試したコードです。
( #hogeの中身はテストしやすいように勝手に増やしてます )
最初に答えたやつとの違いは、positionではなくfloatでやっている点です。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style type="text/css">
#hoge {
background: url(https://www.google.co.jp/images/srpr/logo11w.png) no-repeat;
background-size: contain;
padding: 35.32% 0 0;/* 190÷538 */
}
#hoge > div {
float: left;
margin-top: -35.32%;
width: 100%;
}
#hoge:after {
clear: left;
content: "";
display: block;
}
</style>
<body>
<div id="hoge">
<div>
<p>パラグラフ</p>
<p>パラグラフ</p>
<p>パラグラフ</p>
<p>パラグラフ</p>
<p>パラグラフ</p>
<p>パラグラフ</p>
<p>パラグラフ</p>
<p>パラグラフ</p>
</div>
</div>
かきくけこ
</body>
</html>

id:worldtravel

ありがとうございました。

何とかできそうですが無理なんですね...。

2014/09/29 17:35:48
id:u_7cc No.2

7cc回答回数32ベストアンサー獲得回数142014/09/27 15:25:38ここでベストアンサー

ポイント70pt

(先にあるようにCSSのみでは不可能なので)参考までにをSass(SCSS)で書くとこうなります。

@for $i from 1 through 6 {
  @media screen and (max-width: 820px - $i * 20){ #hoge{ height: 410px - $i * 10; } }
}

コンパイルが要るので趣旨には添わないと思いますが、CSSを書く機会が多いようでしたらSassなどの導入をお勧めします。

--------

追記後

#hogeのサイズを変えない限り期待の動作にはならないので、そうしてよいのなら

#hoge {
    max-width: 100%;
    height: 10vw; /* ここがポイント */
    max-height: 190px;
    background: url(https://www.google.co.jp/images/srpr/logo11w.png) no-repeat;
    background-size: contain;
}
id:worldtravel

!!!これいいですね!!!

ちょっといじりましたが、現在のところ、ほぼ希望通りの動きをしています。
もう少しこれをいじってみます。

ありがとうございます。

2014/09/29 18:11:23
id:language_and_engineering No.3

lang_and_engine回答回数170ベストアンサー獲得回数632014/09/27 18:39:52

ポイント10pt

90度回転してみるという手も…


CSSで,画面の横幅(width)と要素の高さ(height)をパーセント指定で連動させる方法 (動作サンプルつき)
http://d.hatena.ne.jp/language_and_engineering/20140627/CSStateyokoPercent

id:worldtravel

ありがとうございました。

2014/09/29 18:11:41
id:worldtravel

質問文を編集しました。詳細はこちら

id:worldtravel

みなさま、ありがとうございます。

↓このようにして、画面の横幅を縮めると、画像は小さくなりますが、
 「かきくけこ」が元々の位置から移動しません。
 これを、画像の高さが縮まるのに合わせて、上に移動するようにしたいのです。

すいません。
cssやタグの一部が見えていなかったようです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style type="text/css">
#hoge{
max-width: 100%;
height: 190px;
background: url(https://www.google.co.jp/images/srpr/logo11w.png) no-repeat;
background-size: contain;
}
</style>
<body>
<div id="hoge">あいうえお</div>
かきくけこ
</body>
</html>

id:a-kuma3 No.4

a-kuma3回答回数4521ベストアンサー獲得回数18792014/09/28 22:00:57

ポイント10pt

HTML の構造を変えても良いのなら、こんな感じはどうでしょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style type="text/css">
#hoge{
    position: absolute;
}
#hoge-back {
    width: 100%;
    border: 1px solid black;    /* 分かりやすいように、入れてるだけです */
}
</style>
<body>
<div id="hoge">あいうえお</div>
<img id="hoge-back" src="https://www.google.co.jp/images/srpr/logo11w.png">
かきくけこ
</body>
</html>

画像を、先行する要素の背景にするのではなく、要素として作って、先行する要素の上に被せます。
後続する要素は、画像の要素の後についてきます。

id:worldtravel

ありがとうございます。
imgタグをどうしても使いたくなかったので...(^^;

2014/09/29 18:12:18
  • id:a-kuma3
    calc() と var() って、メディアクエリで使えるかなあ...
  • id:jislotz
    <body>
    あいうえお

    かきくけこ
    </body>
    要素の包含関係と、それぞれfloatプロパティ、positionプロパティの指定がどうなっているかが肝心で、
    これを見なおせば、変なことをしなくても、かきくけこの位置は望む位置にくるはず。

    たとえば、
    <body>
    <p>あいうえお</p>
    <p><img style="width:100%" /></p>
    <p>かきくけこ</p>
    </body>
    こんな感じでCSSでは何もしなければ、それだけで済む話。のように見えます。
    (実際のマークアップなどは、こんなに単純ではないと思いますが。)

    また、質問者の過去の質問を見ると、このくらいのことは当たり前に知ってそうなので、
    気付けば「なんで気付かなかったんだろう?」と思えるようなところが原因でハマっているのでは、
    という気もします。
  • id:worldtravel
    ジント兄さん、ありがとうございます。
    それは、imgタグの場合ですよね?
    画像を背景に敷きたいのです。

    申し訳ありません。
    タグやcssが見えていなかったようですので、補足を書き直しました。

    よろしくお願いします。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません