ホームページについて質問です。トキワ劇場https://www.tokiwa-movie.com/Preview.html
のページで画像が枠いっぱいまで大きくなってしまうのですが、どうしたらいいでしょうか?
原因はスマホとかに対応しようと、cssを弄りまくってたのがことの発端だとなのですが
cssのどこらへんをいじったほうがいいでしょうか?
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
トキワさん
・・・・画像が枠いっぱいまで大きくなってしまうのですが、・・・・・・・・
問題が、表示が「公式サイト」である画像 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>
ただし、ソースが不要な記述でかなり乱れているので、
1.改めて、新規にこのページを書き直すことを強くお勧めします。
その際は、「ページ編集」でも 「HTMLソース」 でも、やり易い方法でしたら良いでしょう。
兎に角、まずは不要な記述の少ない、きれいなページを作るのが目的です。
そのため、現在は非推奨のテーブルでレイアウトすることもやむを得ません。
2.「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にバージョンアップさせてやってみます!
No.2
- 回答日時:
こんばんは
ざっと眺めただけですが、直接的には、common.css の
img { width: 100%; }
で、全部(?)の画像が幅めいっぱいになるように指定されているからではないでしょうか?
勝手に想像するところ、対象によって使い分けたいのでしょうから、使い分けられるように指定しておくのが宜しいかと。
>スマホとかに対応しようと、cssを弄りまくってた~~
すでに回答があるように、レスポンシブ対応で行うのが一般的と思います。
https://goleadgrid.com/blog/responsive
なお、ご質問には、直接関係ありませんけれど、マークアップでも
CSSファイルを利用している割には、style属性てんこ盛りの要素があったり
fontタグ(=非推奨になっています)の大ネストがあったり
と、疑問点も多いですね。
tableレイアウトも、今時だと、なんだかなぁって感じかも知れません。
No.1
- 回答日時:
レスポンシブデザインの基本ですが、ブラウザの幅に合わせて異なるレイアウトになるようスタイルシートを用意しておくことです。
https://www.kagoya.jp/howto/it-glossary/web/resp …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Chrome(クローム) 自作のホームページの画像でパソコンのChromeで見るとコナンの映像だけ写らなくて、マイクロソフトE 3 2022/06/09 18:00
- HTML・CSS HP作成 作成した画像を動画の上に配置したです。付属画像のような感じにしたいのですが、スマホのフチの 2 2022/02/02 12:22
- PHP 画像ファイルの名前をそのままURLにする 3 2022/10/16 11:18
- HTML・CSS HTMLの画像表示時のキャッシュについて 2 2021/12/21 16:09
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS HTMLとCSSコードを教えてください 1 2022/04/27 09:47
- 英語 私の解釈、合っていますか? 9 2023/09/04 21:53
- ライブ・コンサート・クラブ アリーナ・劇場について 3 2023/10/24 08:09
- WordPress(ワードプレス) WordPressの記事の途中に差し込む 1 2023/06/29 11:18
- HTML・CSS ホームページについての質問です 最近学校でhtml等に触れる機会があったのですが、疑問がわきました 7 2022/05/06 15:42
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
HTMLでデスクトップの画像がでない
HTML・CSS
-
かっこいいウェブを作るテク
HTML・CSS
-
-
4
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
5
PDFのファイルサイズ
PDF
-
6
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
7
至急。PCに詳しい人助けてください。 どうしても開きたいTSVファイルがあります。(圧縮済みで75,
Windows 10
-
8
コードレビューをお願いします。
JavaScript
-
9
ウェブ、孤立画像を検出する方法
その他(プログラミング・Web制作)
-
10
初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。
HTML・CSS
-
11
スマホにpdfのファイルが送れてきました その書類に記入して送り返せとのことですが、 スマホでpdf
PDF
-
12
すいません HTMLです この画像をHTML、(もしくはCSS)で表すにはどうすれば良いですか? 教
HTML・CSS
-
13
用紙のサイズについて教えて!
年賀状作成・はがき作成
-
14
ホームページのURLをコピーしてエクセルのシートに張り付けるとURLの文字が変わる場合があるのはナゼ
HTML・CSS
-
15
PDFやtxtにしたらWordではなくなるんですかね?
PDF
-
16
ワードプレスインストールできない
オープンソース
-
17
教えてください。 パソコンは苦手なので、説明が下手ですがご容赦ください。 ギガファイル便で送られて来
その他(ソフトウェア)
-
18
KADOKAWA電撃大賞は応募フォーマットを使ってるなら,PDFに変えたりせず,そのままフォーマット
PDF
-
19
iOSのみダブルタップが必要
JavaScript
-
20
大きすぎるpdf
PDF
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
NN(Netscape)だけに適用され...
-
macで見るとホームページが真っ...
-
このサイトのようにhタグをし...
-
文字の色、大きさを変えるWe...
-
インターネットのHTMLが圧縮形...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
テーブル内の文字サイズを変更...
-
Illustratorで作成、pngで保存...
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
文字の位置、上下のマージンが...
-
入力規則のリストの文字の大き...
-
MsgBoxについて
-
似ているフォント(Win⇔Mac)
-
プルダウンメニュー内のフォン...
-
fontサイズ指定の ”-(マイナ...
-
CSSです。英数字のみArial書体...
-
”ヒラギノ明朝Pro”をWindowsで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS、Bootstrapについて contai...
-
メールソフトBecky!のHTMLメー...
-
cssでリンク先のurlを表示させ...
-
複数のcheckboxを間隔を空けず...
-
ホームページについて質問です...
-
safari でcssがききません!
-
ホームページビルダーでcssのサ...
-
CSSシグネチャ
-
リンクの色一括指定について。
-
インターネットのHTMLが圧縮形...
-
contentプロパティの初期化?
-
下線なしのリンクは?
-
CSS background-color:でサイト...
-
macで見るとホームページが真っ...
-
Chromeでcssを表示させると、cs...
-
携帯では指定のタグを無効化す...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
入力規則のリストの文字の大き...
おすすめ情報
使用してるソフトはホームページビルダーです
ホームページビルダー14では限界があるな…
22だとスマホ用のテンプレもあるらしいいそっちに移行したほうが楽でしょうか?
たまにソースからいじったりするにわかなので知識も全然ないので…