ホームページについて質問です。トキワ劇場https://www.tokiwa-movie.com/P

ホームページについて質問です。トキワ劇場https://www.tokiwa-movie.com/Preview.html
のページで画像が枠いっぱいまで大きくなってしまうのですが、どうしたらいいでしょうか？
原因はスマホとかに対応しようと、cssを弄りまくってたのがことの発端だとなのですが
cssのどこらへんをいじったほうがいいでしょうか？

質問者からの補足コメント

• 使用してるソフトはホームページビルダーです

    補足日時：2023/12/16 16:26

• ホームページビルダー14では限界があるな…
  22だとスマホ用のテンプレもあるらしいいそっちに移行したほうが楽でしょうか？
  たまにソースからいじったりするにわかなので知識も全然ないので…

    補足日時：2023/12/17 15:52

No.3 回答者： gura_ 回答日時： 2023/12/16 21:59

トキワさん

　････画像が枠いっぱいまで大きくなってしまうのですが、････････

問題が、表示が「公式サイト」である画像 saito.png の幅だけを 111px にしたいことを指しているなら、
https://www.tokiwa-movie.com/Preview.html の中の、

<style type="text/css">
<!--
.style1 {
color: #FFCC00;
}
.style2 {
color: #666666;
}
.style3 {
color: #FFFFFF;
}
-->
</style>

を「HTMLソース」の編集で、ソースを下記のように書き下部に書き加えれば治るはずです。↓
書き方の参考: https://abhp.net/hp/HP_HPB_207000.html

<style type="text/css">
<!--
.style1 {
color: #FFCC00;
}
.style2 {
color: #666666;
}
.style3 {
color: #FFFFFF;
}
/* この下を加筆 */
td:last-child img{
width:111px !important;
}
-->
</style>


ただし、ソースが不要な記述でかなり乱れているので、

１．改めて、新規にこのページを書き直すことを強くお勧めします。
　その際は、「ページ編集」でも 「HTMLソース」 でも、やり易い方法でしたら良いでしょう。
兎に角、まずは不要な記述の少ない、きれいなページを作るのが目的です。

そのため、現在は非推奨のテーブルでレイアウトすることもやむを得ません。


２．「HTMLソース」 の編集に自信があれば、HTML 5 などの新しい仕様で記述したら良いでしょう。↓
https://www.tohoho-web.com/wwwbeg2.htm#Template
https://www.tagindex.com/html/basic/basic.html

この場合は、レイアウトは、css の grid などを使うのがおすすめですが、かなりハードルが高いと思います。↓
https://www.tohoho-web.com/css/prop/grid.htm

もちろん、レスポンシブル対応も取り込んだら良いでしょう。↓
https://www.webcreatorbox.com/tech/css-grid-basi …

この回答へのお礼

詳しくありがとうございます。少し弄りましたが、1から作り直す必要有りですね…
知識もあまりないので環境もホームページビルダー14なので、最悪だめだったら、22にバージョンアップさせてやってみます！

お礼日時：2023/12/17 15:55

No.2 回答者： fujillin 回答日時： 2023/12/16 18:03

こんばんは

ざっと眺めただけですが、直接的には、common.css の
　img { width: 100%; }
で、全部（？）の画像が幅めいっぱいになるように指定されているからではないでしょうか？
勝手に想像するところ、対象によって使い分けたいのでしょうから、使い分けられるように指定しておくのが宜しいかと。

＞スマホとかに対応しようと、cssを弄りまくってた～～
すでに回答があるように、レスポンシブ対応で行うのが一般的と思います。
https://goleadgrid.com/blog/responsive


なお、ご質問には、直接関係ありませんけれど、マークアップでも
　CSSファイルを利用している割には、style属性てんこ盛りの要素があったり
　fontタグ(=非推奨になっています）の大ネストがあったり
と、疑問点も多いですね。
tableレイアウトも、今時だと、なんだかなぁって感じかも知れません。

この回答へのお礼

ご指摘ありがとうございます
1から見直してみます

お礼日時：2023/12/16 18:47

No.1 回答者： rera1016 回答日時： 2023/12/16 16:41

レスポンシブデザインの基本ですが、ブラウザの幅に合わせて異なるレイアウトになるようスタイルシートを用意しておくことです。

https://www.kagoya.jp/howto/it-glossary/web/resp …