🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

514閲覧

少しずつサイズの違う画像を同じ位に縮小して横に並べたい

let

総合スコア41

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/24 22:39

編集2020/11/24 23:42

過去の質問やネットで調べながら思考錯誤していたのですがうまくいかず、皆様からご教授いただきたく質問させていただきます。
横並びなのではじめはflexを使っていたのですが、思うようにいかなかった為、floatで試してみましたがこちらも満足いくものにはなりませんでした。皆様宜しくお願い致します。

html

1コード 2<div class="carcos"> 3<p class="sample1"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="480" alt="ああ"></a></p> 4</div> 5<div class="carcos"> 6<p class="sample2"><a href="car-costam.html"><img src="images/***2.jpg" width="640" height="425" alt=""></a></p> 7</div> 8<div class="carcos"> 9<p class="sample3"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="426" alt=""></a></p> 10</div>

CSS

1 2.sample1 img{ 3 height: auto; 4 width: 30%; 5 margin-top: 10px; 6 7.sample2 img{ 8 height: auto; 9 width: 35%; 10} 11.sample3 img{ 12 height: auto; 13 width: 40%; 14} 15.carcos{ 16 float:left; 17 width: 33% 18}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dit.

2020/11/24 23:32

コード用のマークダウンがうまくいっていませんので、下記のような形にしてください。 ```html ここにHTML ``` 1行以上開ける ```css ここにCSS ```
let

2020/11/25 00:00

修正できました。ご教授いただけると助かります。宜しくお願い致します。
guest

回答1

0

ベストアンサー

.sample1 img{を閉じる}がありませんが、実際のコードでもこのようになっていますか?
転記の際のミスでなければ

css

1.sample1 img{ 2 height: auto; 3 width: 30%; 4 margin-top: 10px; 5}/*これを追加*/ 6.sample2 img{ 7/*以下省略*/

としましょう。

これで画像自体は横並びになっていると思いますが、floatを使う場合は適宜回り込みを解除する(clear)必要がありますのでご注意を。


flexを使う場合には、carcosをdivなどで囲み、それに対してdisplay: flex;を指定しましょう。

html

1<div class="carcos-container"> 2 <div class="carcos"> 3 <p class="sample1"><a href="car-costam.html"><img src="http://placehold.jp/640x480.png" width="640" height="480" alt="ああ"></a></p> 4 </div> 5 <div class="carcos"> 6 <p class="sample2"><a href="car-costam.html"><img src="http://placehold.jp/640x425.png" width="640" height="425" alt=""></a></p> 7 </div> 8 <div class="carcos"> 9 <p class="sample3"><a href="car-costam.html"><img src="http://placehold.jp/640x426.png" width="640" height="426" alt=""></a></p> 10 </div> 11</div>

css

1.sample1 img { 2 height: auto; 3 width: 30%; 4 margin-top: 10px; 5} 6.sample2 img { 7 height: auto; 8 width: 35%; 9} 10.sample3 img { 11 height: auto; 12 width: 40%; 13} 14.carcos-container { 15 display: flex; 16} 17.carcos { 18 width: 33%; 19 width: calc(100% / 3); 20} 21

flexboxを使った場合のサンプル(上記のコード)
こうなるはず
イメージ説明
細かい設定は下記など参考に調整してみてください。
日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

投稿2020/11/25 00:03

編集2020/11/25 02:05
dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

let

2020/11/25 00:41

ご返信頂きありがとうございます。 記載いただいた通りに変更してみたのですが、sample1 imgの画像が全く縮小されません、他の画像は縮小されるのですが、縦並びのままです。 記載いただいた、fiexで試してみました。他に何か要因があるのでしょうか? ご教授いただけるとありがたいです。宜しくお願い致します。
dit.

2020/11/25 01:09

回答に示したflexの方のサンプルをcodepenにあげました。 https://codepen.io/dit4410/pen/VwKZbdV 各carcosはcarcos-containerの1/3の横幅、 各画像はcarcosに対してそれぞれ30%、35%、40%のサイズになっていると思いますが希望とは違いますか?
let

2020/11/25 01:16

ご返信ありがとうございます。 画像の二個目、三個目は縮小されたので思っていたより小さかった為、変動しなかった、一つ目から 50%、55%、55%に変更しました。ただ縦並びなのでどういう風になるのかまだ掴めていない状況です。ul liを使った横並びの方がいいんでしょうか?
let

2020/11/25 01:24

ローカルでみると、一つ目も縮小されていました。ただ横並びにはなっていないです。どこの設定なのでしょうか?どこが間違っているか判断がつかない為ご迷惑をお掛けし申し訳ありません。 ご教授いただけると幸いです。
dit.

2020/11/25 01:35

先ほど提示したcodepenでも縦並びに見えますか? 一応Windows10、主要ブラウザ(Google Chrome、Firefox、Microsoft Edge、Internet Explorer)で横並びになっているのは確認したつもりなのですが。 リストを使っても結局floatかflexboxで指定することになるので状況は変わらないと思います。 いくつか可能性があるところを提示しておきます。 ・<div class="carcos">3つを<div class="carcos-container">で囲ってありますか?(回答で提示したflexbox版のコードを丸々使っても同じですか?) ・きちんと保存できていますか?保存したものと表示しているコードは同じものですか? ・(サーバー上で確認している場合)アップロードはきちんとできていますか? ・キャッシュの削除やスーパーリロードはしましたか? 一度、質問を編集し現状のコードを追記してください。
let

2020/11/25 02:07

・codepenでは横並びに見えています。 ・保存はきちんとして確認しております。 ・サーバー上も確認してアップロードして確認しております。 ・キャッシュの削除はしてます。 現状のコードを追記します <div class="corcos-container"> <div class="carcos"> <p class="sample1"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="480" alt="あ"></a></p> </div> <div class="carcos"> <p class="sample2"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="480" alt="い"></a></p> </div> <div class="carcos"> <p class="sample3"><a href="car-costam.html"><img src="images/***.jpg" width="640" height="480" alt="う"></a></p> </div> </div> CSS .sample1 img{ height: auto; width: 50%; margin-top: 10px; } .sample2 img{ height: auto; width: 55%; } .sample3 img{ height: auto; width: 55%; } .carcos-container { display: flex; display : -webkit-box; /* old Android */ display : -webkit-flex; /* Safari etc. */ display : -ms-flexbox; /* IE10 */ } .carcos{ width: 33%; width: calc(100% / 3); }
dit.

2020/11/25 02:28

HTML側のクラスがcorcos-containerになっています。carcos-containerに直してみてください。
let

2020/11/25 02:54

横並びになりました。本当にありがとうございます。またひとつ勉強になりました。 長い時間おつきあいいただきありがとうございました。 サーバーアップロードしても同様の動作になりました。 本当にありがとうございました。
dit.

2020/11/25 03:39

解決したようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問