人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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; } }

よろしくお願いします。


●質問者: worldtravel
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● ジント兄さん
●10ポイント

残念ながらできません。

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

たとえば、質問文章中のコードの#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>


worldtravelさんのコメント
ありがとうございました。 何とかできそうですが無理なんですね...。

2 ● 7cc
●70ポイント ベストアンサー

(先にあるように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;
}

worldtravelさんのコメント
!!!これいいですね!!! ちょっといじりましたが、現在のところ、ほぼ希望通りの動きをしています。 もう少しこれをいじってみます。 ありがとうございます。

3 ● lang_and_engine
●10ポイント

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


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


worldtravelさんのコメント
ありがとうございました。

質問者から

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

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

<html>
<head>


</head>

<body>
あいうえお

かきくけこ
</body>
</html>

1-5件表示/6件
4.前の5件|次5件6.
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ