![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
ホームページについて質問です。トキワ劇場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・CSS
-
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
-
4
HTMLでデスクトップの画像がでない
HTML・CSS
-
5
PDFのファイルサイズ
PDF
-
6
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
7
コードレビューをお願いします。
JavaScript
-
8
すいません HTMLです この画像をHTML、(もしくはCSS)で表すにはどうすれば良いですか? 教
HTML・CSS
-
9
至急。PCに詳しい人助けてください。 どうしても開きたいTSVファイルがあります。(圧縮済みで75,
Windows 10
-
10
ホームページのURLをコピーしてエクセルのシートに張り付けるとURLの文字が変わる場合があるのはナゼ
HTML・CSS
-
11
用紙のサイズについて教えて!
年賀状作成・はがき作成
-
12
ウェブ、孤立画像を検出する方法
その他(プログラミング・Web制作)
-
13
初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。
HTML・CSS
-
14
スマホにpdfのファイルが送れてきました その書類に記入して送り返せとのことですが、 スマホでpdf
PDF
-
15
iOSのみダブルタップが必要
JavaScript
-
16
大きすぎるpdf
PDF
-
17
PDFやtxtにしたらWordではなくなるんですかね?
PDF
-
18
ワードプレスインストールできない
オープンソース
-
19
教えてください。 パソコンは苦手なので、説明が下手ですがご容赦ください。 ギガファイル便で送られて来
その他(ソフトウェア)
-
20
KADOKAWA電撃大賞は応募フォーマットを使ってるなら,PDFに変えたりせず,そのままフォーマット
PDF
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
メールソフトBecky!のHTMLメー...
-
IE6 IE7で文字が潰れる 高さが...
-
携帯では指定のタグを無効化す...
-
表だけのページにおける表題の...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
cssファイルの名称付け
-
テーブル内の文字サイズを変更...
-
Illustratorで作成、pngで保存...
-
MsgBoxについて
-
SELECTのプルダウンの長さの調整
-
ペイント3Dのテキストサイズ変更
-
「MS Pゴシック」と同じ幅の...
-
奇数のフォントサイズ指定について
-
入力規則のリストの文字の大き...
-
EXCEL VBA 印刷プレビューダイ...
-
ユーザーフォーム スクロール...
-
テキストボックス途中で切れて...
-
WebサイトのMacとWindowsのでの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
safari でcssがききません!
-
オンラインとオフラインでのcss...
-
cssでリンク先のurlを表示させ...
-
macで見るとホームページが真っ...
-
NN(Netscape)だけに適用され...
-
contentプロパティの初期化?
-
外部cssのパーミッション?
-
このサイトのようにhタグをし...
-
メールソフトBecky!のHTMLメー...
-
インターネットのHTMLが圧縮形...
-
Chromeでcssを表示させると、cs...
-
携帯では指定のタグを無効化す...
-
スクロールバーをカスタマイズ...
-
ホームページビルダーでcssのサ...
-
WinIE5にだけCSSを適用させない...
-
文字の色、大きさを変えるWe...
-
ユーザビリティ、アクセシビリ...
-
cssが触ってないのに崩れていま...
-
表だけのページにおける表題の...
-
IE用と、その他のCSSを条件分岐
おすすめ情報
使用してるソフトはホームページビルダーです
ホームページビルダー14では限界があるな…
22だとスマホ用のテンプレもあるらしいいそっちに移行したほうが楽でしょうか?
たまにソースからいじったりするにわかなので知識も全然ないので…