• ベストアンサー

css heightについて

wordpressのテーマのCocoonというのを使用しています。 そのページにだけ適用できるカスタムCSSに下記のようにtextareaの高さを指定したのですが、まったく変わりません。他に何か指定しないといけないものがあるのでしょうか? textarea{ height:50px; }

  • CSS
  • 回答数3
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • 4017B
  • ベストアンサー率73% (1306/1777)
回答No.3

>上位には何も~ それが正しいかどうかを回答者は確認出来ないので、そのズバリのwebページのソースコードを見せて貰えない限りは「はあそうですか」としか言い様がありませんね。 色だけがピンクに変わるのは当たり前と言うか、つまりは「それに影響を与えている他要素には色関係が指定されていないから」ってだけで、仮に色指定がなされていれば色も変更不可だったと思います。 まあ多分、どこかの上位レイヤに xxx * { height:auto; } みたいな指定が有って競合してるのだと思いますが…。聞く耳は持たぬという事なのでは仕方が無いので、ご存分に我が道を往くが如くに突き進んできださい。 P.S. [F12] でデバッガー画面を出して、[セレクターモード] に切り替えてから目的の <textarea> をマウスでクリックして詳細なプロパティ情報を表示させて、[Computed] の項目で実際にスタイルを指定してる部分の詳細を確認して見てください。それで親CSSの何行目に競合してるスタイル指定が記述されているのかが分かります。ブラウザがChromeの場合ですが、FFやIEとかでも同じです。

takahasi5634
質問者

補足

回答ありがとうございます。 教えられた通りデバッガーでStylesタブを見たところ、自分で作成したtextareaのすぐ下にtextareaがあって、そこに下記のようなCSSが表示されていました。 textarea { min-height: 260px; } なんだこれはと思いファイルの場所を探したらCocoonの親テーマのstyle.cssにありました。Cocoonのサイトでは編集する時は親テーマではなく子テーマを編集してとなっていたので、親テーマはまったく見てませんでした。 カスタムCSSに下記のようにmin-height:0px;を設定したら変更できました。ありがとうございました。 textarea{ min-height:0px; height:50px; }

その他の回答 (2)

回答No.2

面白そうなので、私も実験してみました。 正しく動いていますね。 となれば、指定したものよりも「上位」に継承されたCSSが いる可能性があるので、デベロッパーツールで 実際にどこが、オーバーライドしてしまっているかを 探すほうが、早いと思います。 CSSのスコア稼ぎか、だめなら最後の手段でインポータントでしょう^^

takahasi5634
質問者

補足

回答ありがとうございます。 上位は何もありません。新規投稿で下記だけ書いてプレビューしているのですが、定規で計るとtextareaの高さが7センチあります。textareaは右下にサイズ変更可能のマークがあるやつになっています。 <textarea></textarea> カスタムCSSも下記だけ指定しています。色はピンクなのでCSS自体は効いていると思うのですが高さがさっぱり変わりません。 textarea{ background-color: pink; height:50px; }

  • 4017B
  • ベストアンサー率73% (1306/1777)
回答No.1

この手の無料テーマでは珍しくアフターフォローが整っているので、まずは下記URLの公式で調べたり質問してみた方が確実で早いかと思います。 - Cocoon公式FAQ https://wp-cocoon.com/manual/ - Cocoon公式フォーラム https://wp-cocoon.com/community/ P.S. CSS(スタイルシート)はそのCSSが指定されているHTMLタグだけでは無く、それを取り囲む他のHTMLタグに指定されたCSS等が相互に影響し合って最終的な表示が決まります。 ですので「textareaの高さが変わりません」みたいに質問されても、そのwebページの全てのHTML構造等が分からないと何故その様な表示結果になっているのかは上級者であっても皆目検討が付きません。 質問者は既に自分でCSSを書き換えてみて何も変化無しだという事を確認済みなのですから、既に他の要素が影響し合っている事は間違い無いでしょう。そして運良く textarea の表示を変更出来たとしても、それがまた違う他の要素に新たな影響を与えてしまい、思わぬ部分で表示が崩れる~と言った事が連鎖的に起きるのがCSSを使ったwebデザインの日常です。 まあそんな風に一朝一夕ではにわかにはとても手に負えないからこそ、世の中で "webデザイナー" なる職業が成り立つのですけれども…

takahasi5634
質問者

補足

回答ありがとうございます。他の方にも補足したのですが、 新規投稿には下記のみ書いて試しています。 <textarea></textarea> カスタムCSSも下記だけ指定しています。色はピンクなのでCSS自体は効いていると思うのですが高さがさっぱり変わりません。textareaは右下にサイズ変更可能のマークがあるやつになっています。これが関係しているのでしょうか? textarea{ background-color: pink; height:50px; } 後、style.cssもfunctions.phpもいじってません。スキンが関係しているのかと思い変えてみたのですがどれも同じで、 まったく変わりません。

関連するQ&A

  • heightとmin-heightの組み合わせ方

    webページでページの縦の長さを以下のようにしたいです。 ブラウザの縦の表示が600px以上だった場合 → ページの縦長さは100% ブラウザの縦の表示が600px未満だった場合 → ページの縦長さは600px つまり、縦長さ100%を維持しつつ、ブラウザの縦長さが600pxを下回った場合にはページの長さを600pxで固定(スクロールバーつき)したいのです。 今現在cssでidを2つ作ってそれぞれに min-height:600px と height:100% を与えてその二つのidでbodyを囲んでいるのですが、うまくいきません。 どなたか教えてください;;

  • cssで下限を指定しないのはできるか?

    cssファイルを作るところでheightを指定すると汎用性がなくなるのですがどうしたらいいですか?横は指定でいいですが縦はページごとにどこまで使うかは一概には指定できないわけで。 #left { width:200px; height:600px; float:left; } #right { width:600px; height:600px; float:right; }

    • ベストアンサー
    • HTML
  • heightの指定が無視される

    現在wordpressでサイトを作っているんですがimg画像の大きさを指定するのに width指定の方は大きさが変わるんですがheightの指定が無視されて困っています。 CSSの設定でheightだけ無効にするような方法があるのでしょうか。 よろしくお願いいたします。

  • CSSでdivのheightを動的に

    DIV要素を作り、その中にテキストを配置しています。これの高さ(height)をCSSで次のようにしたいのですが。どのようにすれば良いでしょうか。 1.文章量が多く、画面外まではみ出したらDIV要素の高さをそれに追従させる。 2.文章が画面内に収まる場合、余ったスペースをDIV要素ですべて埋める。 DIV要素のheightを動的に変化させたいのでpxによる絶対値指定はしません。パーセント指定で100%にしてもうまくいかず、調べてみたところこれは親要素の値に依存するとのことでした。そこで html, body { height: auto; } #main { height: auto; } としてみたところ、1.の「はみ出した場合のサイズ追従」は実現できましたが、2.の「余ったスペースを埋める」ことはできませんでした。逆に html, body { height: 100%; } #main { height: 100%; } にすると2.の「余ったスペースを埋める」ことはできますが1.の「はみ出した場合のサイズ追従」はできません。この両方を実現することってできませんか?

    • 締切済み
    • CSS
  • CSSがわかりません!

    やりたいことは 一般の画像に「transition: 0.3s;」を適用 hogeクラスの画像に「float: left;、height: 100px;」を適用 です。 CSSには img { transition: 0.3s; } img.hoge { float: left; height: 100px; } と記述しました。 これだと、<div class="hoge"><img (画像)></div> の、(画像)の部分に「float: left;、height: 100px;」が適用されませんでした。 試しに img { float: left; height: 100px; transition: 0.3s; } としてみたところ、すべての画像に float: left;、height: 100px;、transition: 0.3s;が適用されました。 ということは img { transition: 0.3s; } という、書き方がまずかったのでしょうか? transition: 0.3s;は、すべての画像に適用したかったので あえてクラスを設定することはしませんでしたが この度のfloat: left;、height: 100px;を、一部の画像にクラスを指定し 追加することは可能ですか?

    • 締切済み
    • CSS
  • cssについて、困っております。

    DWでHTMLとCSSの練習としてHPを作成しているのですが、 CSSのスタイルが適用されず、思うようなデザインに出来ず困っております。 例でいうと <div id="main"> <p>~~~~~~~</p> <p>~~~~~~<br /></p> </div> ⬆に対し #main { margin-left:340px; font-size:18px; text-align:center; height:auto; width:600px; { などを指定しているのですが、font-size,text-alignだけが適用され、 その他のmargin,height,width,などが 「(プロパティ名)~は継承されていないため選択範囲に適用されません。外側のタグに適用されます。」 と表示され、適用されません。 この場合はどこに問題があって適用されないのでしょうか?? また、「外側のタグに適用されます。」というのはどの外側の部分に適用されるのでしょうか?? 初歩的な質問で申し訳ございません。 回答お願い致します。

    • 締切済み
    • CSS
  • CSS-heightの自動調節について

    CSSを使いホームページ作成をしております。 一番上にロゴやフラッシュ、メニューを置き、その下の #mainという<div>の中に、#sideと#textの2つの<div>を横に並ばせ入れ込んでいるのですが、 #main全体の高さを、背景入りで、文字に合わせて自動調節したいと思っています。 しかし#mainのCSSにheight:auto;を書き込んでも表示されません。 普通はheightは指定しなくても自動で調節されるものだと思っていたのですが、できなかったのでautoと書いたのですがダメでした。 heightをピクセルで指定すると表示されますが、文字を飛び越えて表示されてしまいます。 解る方どうかご回答お願い致します。 CSSについては初心者のため記述がおかしい部分もあるかもしれませんが、HTMLとCSSは以下の通りです。 【HTML】 <div id="main"> <div id="side"> <p>左サイド</p> </div><!--side end--> <div id="text"> <p>右サイド</p> </div><!--text end--> </div><!--main end--> 【CSS】 #main { width:800px; height:auto; background: #ffffff; margin-right: auto; margin-left: auto; margin-bottom:auto; clear: both; } #side { float:left; width:170px; margin-top:20px; } #text { float:right; width:600px; margin-top:20px; }

  • ネットスケープのCSSエラー

    ネットスケープ4.78(win)を使っています。 フォームを設けて、その中で<textarea>を設置したのですが、 <div class="type1"><textarea></textarea></div> というような形でcssをかけたら、フォーム全体 というか、テーブル全体のレイアウトがおかしくなりました。 送信ボタンがテキストエリアの中に入ったり。 <textarea>にかけたcssの中身(クラス)は .type1 {font-size:12px; line-height:14px; color:#000000;} です。 <textarea>にはCSSをかけないほうがいいのでしょうか? どのようなCSSなら安全でしょうか? ちなみに <input type="text">には同様のCSSをかけても大丈夫でした。 どなたか、教えてください。

    • ベストアンサー
    • HTML
  • min-heightとheightの違いについて

    HTML、CSSを勉強中です。 こちらで似た質問は拝見したのですが、疑問が解決できなかったので投稿させて頂きます。 ページの内容が少ないときにもフッターを最下部に表示させるため、 いくつかのサイトを参考にさせて頂いて以下のようなコードを書きました。 ・HTML(一部) <html> <body> <div id="container"> <div id="article">内容</div> <div id="footer">フッター</div> </div> </body> </html> ・CSS(一部) html,body { height: 100%; } div#container { position: relative; min-height: 100%; } body > #container { height: auto; } div#article { padding-bottom: 20px; } div#footer { position: absolute; bottom: 0px; height: 20px; width: 100%; } これで目的は達成したのですが、ほぼ丸写しの作業で、containerにheightではなくmin-heightを指定する意味がよく分かりません。 min-heightは高さの最小値を設定するプロパティとのことで、これ自体が上手くいくことは分かるのですが、何故heightに替えると上手くいかないのかが分かりません(実際に、フッターがページ内容の終わり位置まで浮き上がってきます)。 親のbody、親の親のhtmlの高さが100%に指定されているのだから、containerの高さ(height)もこれらに対して100%とすることで画面いっぱいの高さが常に確保されるのかと思ったのですが、違うのでしょうか。 そもそもhtmlの高さは何に対して100%なのかと調べてみると「表示領域に対して」とのことで、実はこの記載があったページではmin-heightではなくheightを利用してボックスの高さを100%に出来るとまとめてあったのですが、上述の通り私は今回の目的には上手く利用できませんでした。 「高さ100%のhtml、bodyに対してcontainerのheightが100%」というのが上手くいかないのなら、 何故heightをmin-heightに替えるだけでOKなのかますます分からなくなってしまいました。 だらだらとした文面で申し訳ないのですが、解説していただければ大変助かります。

    • 締切済み
    • CSS
  • cssハックについて

    現在Safariに対してcssハックを適用させようとしているのですが、 そのハックがなぜか他ブラウザにまで影響してしまいます… (Firefox、Operaなど。IEは大丈夫です) なぜ他ブラウザにまで影響してしまうのかが判らないので、 教えて頂けると嬉しいです。 宜しくお願いします。 htmlに対するcss読み込みの記述--------- <link rel="stylesheet" type="text/css" href="css/importtop.css" /> importtop.css内の記述--------- /* For Specific Browsers */ @import "safari.css"; safari.css内の記述--------------- /* Safari4 */ body:first-of-type #content { height: 635px; } body:first-of-type #container { height: 635px; } body:first-of-type #sidebar { height: 635px; } body:first-of-type #content { height: 635px; } body:first-of-type .sbar { height: 635px; } /* Safari3 */ html:not(:only-child:only-child) #container { height: 635px; } html:not(:only-child:only-child) #content { height: 635px; } html:not(:only-child:only-child) #sidebar { height: 635px; } html:not(:only-child:only-child) .sbar { height: 635px; }

    • 締切済み
    • CSS