数日勉強してみましたが、時間がかかりそうです。

現在、レスポンシブ関連の著書を参考に、アート集を作成して
います。著書のプログラムは、私のパソコンの画面だと１２
枚の写真がいっぺんに見れます。しかし、作成している、写真
のはアート関連で画質を落としたくないので、現行のままの画
質で著書の通りプログラムにセットしたところ、著書の写真に
比べて、1.5倍ほどしかないのに、馬鹿でかくなり画面に１枚
しか見れません。レスポンシブは、css、とhtmlのコラボで作
成が基本だそうで、画像に手を入れる場合は、cssに画像プロ
グラムを設定しないといけないと、ご回答をいただきました。
　それで、現行のページの同じ機能を保ちながら、画像プログ
ラムをcssにシフトしようと数日費やしましたが、いつになるか
分かりませんでしたので、質問しました。
　
プログラムは以下です。
1) html側　　http://afurieitohannei.la.coocan.jp/photograph/S …
以下はプログラムの抜粋です。

<section id="city">

<h2 class="icon">City</h2>

<ul class="clearfix photograph-list">

<li><img src="images/photograph-city-01.png" alt="駅への階段"></li>

<li><img src="images/photograph-city-02.png" alt="自転車とシャッター"></li>

<li><img src="images/photograph-city-03.png" alt="スケートパーク"></li>

<li><img src="images/photograph-city-04.png" alt="エアポート"></li>

<li><img src="images/photograph-city-05.png" alt="雑貨を扱う店舗"></li>

<li><img src="images/photograph-city-06.png" alt="ストリートバスケ"></li>

</ul>

</section>
　以上プログラムを、ページの機能はそのままで、cssにシフトした場合
どんなプログラムになるのでしょうか？

　css側のプログラムは以下で、IDはphotograph です。
　２）　http://afurieitohannei.la.coocan.jp/photograph/S …
大変そうですが！　
以上よろしくお願いいたします。

No.2 ベストアンサー 回答者： gura_ 回答日時： 2019/11/17 20:35

Campus2さん

>････馬鹿でかくなり画面に１枚しか見れませ･･････････

imgの表示幅を設定すれば良いのでは？

ご参考に↓

@charset "utf-8";

body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}

p,h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}

img {
vertical-align:bottom;
width:80px; /* ここで画像の幅を指定 */
}

ul {
margin: 0;
padding: 0;
}

・・・・・・・・・・・・

この回答へのお礼

ご回答くださいまして、ありがとうございました。
せっかくのご回答でしたが！
今のところ、HTMLのみのでできる、１２分割プロ
グラムがネット上にあり採用したところです。
CSSからの画像分割は、レベルが高そうなので！
まだ先々は不安ですが！徐々レベルアップしていき
たいと思っています。
今後ともよろしくお願いします。

お礼日時：2019/11/19 13:58

No.3 回答者： fujillin 回答日時： 2019/11/18 09:44

こんにちは

＞著書の写真に比べて、1.5倍ほどしかないのに、
＞馬鹿でかくなり画面に１枚しか見れません。
何が1.5倍なのか示されていませんが、サイズが1.5倍なら1.5倍に表示されるはずです。
ただし、画像の表示サイズはCSSで指定すればそのサイズに表示されますので、いかようにでもなります。（ご提示のCSSでは何の指定も無いようなので、元の画像のサイズで表示されます）

＞アート関連で画質を落としたくないので、現行のままの画質
＞で著書の通りプログラムにセットした
画像のサイズが無指定の場合、多くのブラウザは画面（ディスプレイ）の解像度に合わせて表示します。
ＰＣの画面だと解像度は72dpi(または96dpi)に換算されますので、例えば1200dpiの画像をそのまま表示させると、元のサイズの12倍以上になってしまいます。
表示サイズを指定すれば、そのサイズで表示されるようになりますが、そのサイズで表示するのに必要な画像容量をはるかに超えたデータを送っていることになりますので、無駄とも言えます。（拡大表示をすれば無駄ではなくなりますが…）

とりあえず、
　img { width:100px; }
のようなCSSを追加することで、画像の表示サイズは小さくなりますので、変化がみられるものと思います。
細かく調整した指定をするには、上記の様に大雑把ではなく、もっと詳細な指定が必要になりますが。


＞レスポンシブは、css、とhtmlのコラボで作成が基本だそうで、～
その前に、レスポンシブになさる気があるのかどうか疑問です。
というのも
　＞.content {
　＞ width: 960px;
　＞　margin: 0 auto;
　＞}
を初めとして、表示幅が絶対指定で作成されているので、「レスポンシブのうちのPC用」という限定のもの（=全体の一部分）というのならわからないでもないですが、そのような雰囲気も感じられませんので…
スマホ等での表示をどうするつもりなのでしょうね…？

この回答へのお礼

ご回答くださいまして、ありがとうございました。
懸念材料ですね、了解です。
今後ともよろしくお願いします。

お礼日時：2019/11/19 14:00

No.1 回答者： lv4u 回答日時： 2019/11/16 22:21

＞＞レスポンシブは、css、とhtmlのコラボで作成が基本だそうで、画像に手を入れる場合は、cssに画像プログラムを設定しないといけない

レスポンシブについて、ネットを探してみると、BootstrapとjQueryという単語が見つかります。

「Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。」

なんて書かれています。つまりは、cssとjavascriptとhtmlの３つの技術をマスターしないといけないし、「グリッドシステム」の理解は必須でしょう。

BootstrapとjQueryに関する書籍を購入されて勉強をされるといいと思います。

この回答へのお礼

ご回答くださいまして、ありがとうございました。

お礼日時：2019/11/19 13:59