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

締切済

質問者：トキワ
質問日時：2023/12/16 16:14
回答数：3件

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

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

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

補足日時：2023/12/17 15:52
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

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

トキワさん

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

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

<style type="text/css">

</style>

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

<style type="text/css">

</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 …

- 0
- 件

通報する

この回答へのお礼

詳しくありがとうございます。少し弄りましたが、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レイアウトも、今時だと、なんだかなぁって感じかも知れません。