質問をすることでしか得られない、回答やアドバイスがある。

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

ただいまの
回答率

91.01%

  • HTML

    7529questions

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

  • CSS

    4797questions

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

画像の大きさが変わらない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 237

metayan

score 8

<img src="http://gakureki-zero.com/wp-content/uploads/2017/10/OKMSIIMGL0747_TP_V.jpg" alt="" width="690" height="400" class="aligncenter  wp-image-356" id="jondo"/> 
これをcssで調整してみました。
img.jondo {
width: 690px;
heigth:  400px;
}
何も変わりませんでした。アドバイスをもらいやってみたのですが、無理です。何がダメなのかわかりますか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2017/10/19 08:47

    マルチポストですね。ヘルプを参照して下さい。https://teratail.com/help#posted-otherservice

    キャンセル

  • dit.

    2017/10/19 09:02

    https://teratail.com/questions/96749 と同じような内容ですね(他のサイトにもマルチしてるのかな)。あちらが「サイズが変わらない」こちらが「他の画像には適用したくない」ならまぁ、別質問とも取れますが…。また、質問は編集することができますので、HTMLやCSSの部分を選択し、codeボタンを押してそれぞれコードブロックにしてください。

    キャンセル

  • 退会済みユーザー

    2017/10/21 10:14

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • taktaktak

    2017/10/21 13:41

    これも読んでください。 教えてクン養成マニュアル http://www.redout.net/data/osietekun.html

    キャンセル

回答 1

checkベストアンサー

+2

cssの方が「heith」とスペルミスが起きているようです。
img.aligncenterと指定しているため、同じCSSクラスが指定されているimgに対して全て影響があります。
そもそもクラス名「aligncenter」から「中央寄せにする」という意味合いがあるように思いますので、
元々、text-align:center;のような指定がしてあるものと思います。
そこにサイズ情報を入れると意味合いが変わってくるのでaligncenterに指定するのは良くないと思います。
imgタグに直接width,heightの指定があるとそちらもいきてくるため、可能であれば削除しましょう。

指定したい画像に対してだけのものであれば下記のようにID指定とすると良いでしょう。
※hogehogeは任意の名称です。自身で適当な名前をつけてあげてください。

img#hogehoge{
width: 690px;
height:  400px;
}
<img src="http://gakureki-zero.com/wp-content/uploads/2017/10/logo_twitter_withbird_1000_allblue.png" alt=""  class="aligncenter size-full wp-image-328" id="hogehoge"/>

ただ、「size-full」「wp-image-328」というCSSクラスにも画像サイズに関する指定がしてあるものと思われますので、
これだけでは自身の指定がそのまま反映されるとは限りません。
ブラウザの開発ツールなどでどのような指定があるのか確認し、
調整すると良いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/20 02:24

    何も変わりませんでした。コードもコピペしてやってみたのですが、何もかわりませんでした。どうすればいいかわかりません

    キャンセル

  • 2017/10/20 06:30 編集

    回答最後まできちんと読まれてますかね。
    コピペでやったにしては「heigth」とスペルミスがあります。
    私も本文中にタイポしてしまってますが(修正しておきます)、提示したCSSは合ってます。
    metayanさんが変更された質問本文は間違ってますよ。コピペしたわけではなく見ながら打ったんでしょうか。
    IDの指定は「.」ではなく「#」ですよ。
    metayanさんの指定だとimg.jondoではなくimg#jondoです。

    「どうすればいいか分かりません」だけではいつまでたっても身につきませんよ。
    回答者側は質問者の真横について教えてあげられるわけではないんです。
    あくまでヒントに、色々やってみてください。
    私の回答には幾つかの懸念点を並べています。それも全てやってみましたか?

    まず1つ
    > imgタグに直接width,heightの指定があるとそちらもいきてくるため、可能であれば削除しましょう。

    2つ目
    > ただ、「size-full」「wp-image-328」というCSSクラスにも画像サイズに関する指定がしてあるものと思われますので、
    > これだけでは自身の指定がそのまま反映されるとは限りません。

    そしてブラウザの調整の方法
    > ブラウザの開発ツールなどでどのような指定があるのか確認し、調整すると良いです。

    これらをヒントに、自身で色々やってみてください。
    全てやってみて、それでも上手くいかないのであれば、やってみたことをきちんと教えてください。
    ブラウザの開発ツールによる調整をしたあとに対応するのが確実です。

    CSSは何が影響しているかわかりません。CMSやフレームワークやプラグインを使われているのであればそれも影響している可能性大です。
    何が影響しているかわからないので、上記すべて試してもダメであれば環境情報をなるべくすべて提示してください(ブラウザ開発ツール上の調整は確実なものなのでこれでうまくいかないのであればやり方が間違っているか足りないかのどちらかだと思いますが・・)

    キャンセル

  • 2017/10/20 06:32

    また、追記修正依頼に幾つか指摘されていますがそちらも読まれましたか?
    teratailを利用するために大事なことなのでそちらも対応お願いしますね。

    キャンセル

  • 2017/10/21 02:03

    もちろんすべて読んだ上で行っていますよ。スペルミスもなく確認したうえでやっているのです。ですが出来なかったのです。かなりの初心者なので応用もよくわからない状態です。
    ですが、とあることに気づきやってみたらできました。上記に書いてあることではなかったです。

    1 IDの指定は「.」ではなく「#」ですよ。

    これも違っていました
    IDを指定しなくてもできました。むしろこの言葉に惑わされました。
    IDの問題ではなかったようです

    2 imgタグに直接width,heightの指定があるとそちらもいきてくるため、可能であれば削除しましょう。

    これも違っていました。
    width,heightも異なる数字で指定していても、できるようです


    mts10806さんのアドバイスも知識として役立ちましたが、結局自分で解決できました。

    どうやら別のやり方でもできるようです。
    知識不足ですよ
    正しいアドバイスをお願いしますね

    実際に指摘されていること以外でちゃんと出来たのですから。

    キャンセル

  • 2017/10/21 06:23

    回答通りやっていない上に他のやり方で出来たから間違っているとまで指摘するのは大きな間違いで、かなり横暴な進め方です。
    回答は解決につながるヒントになれば、、という思いで回答していますが、
    ソースが必要な回答する際はほとんどが自身で検証した上で出しています(今回も検証済み)

    それにこのこと自身は応用でもなんでもなく基本です。
    IDに対して指定する場合は CSSでつけた名称の頭に#をつけるのも基本、
    CSSを指定する場合に直で同様の効果がある指定をしないのも基本です。
    基本であることを指摘しているため間違いでも知識不足でもありません。

    失礼を承知で申し上げますが、私の回答もCSSの基本,HTMLの基本、
    もっと言えばWordpressの基本も理解しないまま進めようとしていませんか?(他の回答とCSSクラス名からWordpressのものであると予想)
    私の回答を正しく理解していないのは編集された質問のソースを見れば明らかですし、基本を理解していないのは明らかです。(そもそもコピペしてませんし)
    他の質問のやり取りを見ていてもそのあたりが見受けられます。

    どのようなやり方で対応したか存じ上げませんが、本当に基本と本質を理解して解決に至ったのかが心配になるレベルです。

    キャンセル

  • 2017/10/21 06:29

    ひとまず解決できたのであれば良かったです。同じような質問が繰り返されないように祈っています(既にマルチポストのような形になっているので推奨されない状態です)
    私の回答の形ではなく別の方法で解決できたのであれば、自身で回答を投稿し、自己解決としてはいかがでしょうか。
    このteratailというサイトは質問者以外にも同様の問題で悩んでいる方への解決の糸口となるように自己解決でも質問者自身で回答してその回答をベストアンサーとすることが推奨されています。

    下記を参考にしてください。
    https://teratail.com/help#resolve-myself
    https://teratail.com/help/question-tips#questionTips4-2

    キャンセル

  • 2017/10/21 13:55

    放っておこうと思いましたが、あまりにも目に余るのでコメントします。

    「mts10806」さんの指摘は全部正しいですよ。「知識不足」は質問者さんの方です。
    初心者どうこうの話ではく、思い込みが激しく素直に人の指摘を聞けない姿勢が問題です。

    まず、「超」基本部分から学習してください。
    このままでサイト構築してもメンテ不能のぐちゃぐちゃなコードになりますよ。

    キャンセル

  • 2017/10/22 07:26

    mts10806さん、失礼しました。
    反省します。
    せっかくのアドバイスを踏みにじってしまって。
    基本を勉強したいのですが、なにをすればいいかわからない状態です。
    まずコード入力の基本も勉強したいです。
    html.cssの基本は勉強したのですが、途中にエラーが出て先に進めず、なぜそうなるのかわからず挫折。
    wordpressも同様エラーがでて挫折。
    本など、書いてある通りにやっているのにエラーが出てしまいわからずじまい。
    コード入力に問題があると思われます。
    そのことについても探したのですが、見つけられずです
    コード入力,html,css,wordpressの基本について何かお勧めの本、もしくはサイトがあれば教えてほしいです。
    このサイトの使い方もあまりよくわかってない状態なので、よく目を通しておきます。
    今回はとても失礼しました。
    深く反省しています。

    キャンセル

  • 2017/10/22 07:48

    エラーが出ているのでしたらまずは落ち着いてエラーメッセージが何を言いたいのか調べましょう。エラーは基本はプログラムやシステムが意図的に出力しているものが多いです。
    データやサイトが壊れたということは殆どありません。
    エラーが英語で出ているのであればGoogle翻訳で日本語訳にしてみるとある程度意味が見えてくるはずです。またはエラーメッセージそのままGoogle検索にかけると必ず同じようなエラーで悩んでいる人がやってみたことが出るはずです。
    もちろん100%一致するとは限りませんが、何かしら解決のヒントにはなるはずです。
    ただ、いろいろやってみる前にファイルやデータのバックアップは必ずとっておくようにしてください。最初の内はいろいろやろうとしすぎて余計にグチャグチャになってしまうことがよくあります。
    元の状態にいつでも戻せるようにバックアップは必ずとってから手を入れるようにしてください。
    それでもうまくいかなければ、「やりたいこと」「起きていること(エラー内容)」「やってみたこと」「調べてみたこと」を
    まとめてみてこのサイトで質問する、といった形です。
    「やってみたこと」「調べてみたこと」をきちんと記載することで回答者側はその方法を避けて
    より適切な方法を的確に模索することができて、解決が早くなります。
    そして質問者側が「思い込み」で気づかなかったことに気づけるような回答も気づけるようになります。
    結構そういう質問者も多いですよ。自分がこうだと思ったら「それはありえない」と頑固な方が・・・。

    HTML,CSSの基本についてはそもそもどのように学んでこられたかというところがひとつ気になります。
    もしかしたらその学んだ方法自体は間違いがなくて「きちんと吸収できていない」だけかもしれません。
    サイトや教本を提示することは簡単ですが、内容をきちんと吸収して自分で思ったような結果を
    出せないのであれば意味がありません。
    まずは自分が何をやってきたかを具体的にご提示ください。

    キャンセル

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

  • ただいまの回答率 91.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    画像の配置に関して

    こちらの複数の様々なサイズの画像同士の隙間を 均等にしつつ、尚且つ画像やテーブルはウィンドウサイズによって 可変する様に作成したいと考えておりますが、 どのように作成すればいいかが

  • 解決済

    box-shadow<div>要素内の画像に。

    例えば以下の様にマークアップした画像があります。 <div class="Wrapper">         <img src="home" alt="" height="600

  • 解決済

    wordpress テーマstinger5のナビゲーションをカスタマイズしたい。

    wordpressテーマstinger5を使ってサイト構築中です。 ヘッダーのナビゲーションをカスタマイズしたいのですが、うまくいきません。                  

  • 解決済

    JavaScript スクロールボックス内で特定の座標の要素を取得する方法

    いつもお世話になっております。 早速ですが質問させていただきたいと思います。 とあるシステムでデータベースで管理している情報を、 1件(1レコード)ごとにユーザが閲覧しやすい形に

  • 受付中

    レスポンシブWEBデザインについて

    画像を横に4つ並べました。 <ul> <li><img src="./img1.png" alt="四角い画像" /></li> <li><img src="./img2.png

  • 受付中

    jpgの画像をドット絵風に表示したい

    モザイクを掛けたり、ぼかしたり、というエフェクトは簡単に使えるプラグインが見つかったのですが画像の減色処理をどうすればいいのかわからなく行き詰まってしまいました。 モザイクを掛ける

  • 受付中

    画像がサイトに表示されない。

    サイトに食べログのように個々の店舗の画像を掲載したいです。僕は現在yahoo!のapiを使って個々の店舗情報を取得しています。xml経由でphpファイルにyahoo!のapiのコー

  • 解決済

    Canvasに描画した図形の拡大・縮小のやり方

    Canvasに描画した図形を拡大・縮小出来る機能を作りたいと考えています。 参考にしたサイト 上記のサイトを参考にして実装したのですが、ScaleTransformを設

同じタグがついた質問を見る

  • HTML

    7529questions

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

  • CSS

    4797questions

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