CSS

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

環境： Windows10 HTML5 CSS3 MicrosoftEdge Webデザイン初学者です。 positionプロパティのボックスの配置方法を決める値として 用いられる「absolute」とは何がどう反映されるのかいまいち 分かりません。自分で調べるとよく「絶対位置と相対位置」と いう単語が出てくるのですが、その時点で既によく分かりません。 分かりやすく教えていただけますでしょうか。 どうぞよろしくお願い致します。

padding-left :30px;//　（値） //左の余白を指定する とか margin-left: 50px; をどのように配置するのですか？ すみません。 どれを試しても左に寄ったままです。 どうかお助けを・・・！！！ まだ慣れていないのです。 ご多忙中恐れ入ります。 ご回答の程、宜しくお願い申し上げます。

ホームページのレスポンシブ対応について質問です。ホームは画像のみで作ったのですが、レスポンシブ対応がうまく行きません。 下の写真は左側にHTML右側がCCSコードです。左画像のHTMLの中にある赤い四角で囲ってあるところが画像のコードです。ほとんどはこの画像を貼り付けたホームページです。 レスポンシブ対応で iPhone6や7では丁度良いのですが、下の写真のようにiPhone5の場合、写真の右下の絵に注目））のところに隙間ができています。また、iPadでは画像が拡大していてほとんど一部しか見えません。 画像をある程度はレスポンシブ対応させたいのですが、どうプログラミングコードを打てばよろしいでしょか？ CCSのコードがおかしいのでしょうか？

ホームページのレスポンス対応について ホームページを作ったのですが、その作ったホームページがほぼ全て画像を繋ぎ合わせて横幅のサイズも統一して、一つにして完成させたのですが、ccsで下の写真のようにコードを書いたのですが、ipadは全くサイズが合いません。また、iPhone6や7なども白い隙間が出来ます。確認はグーグル クロームにあるレスポンス対応の機種別の確認で確かめています。 どうしたら良いでしょうか？　 ccsコードの数字は何度か変えているのですが、なかなかうまく合ってくれません。 ちなみにホームページは全部画像です。　ソフトはマイクロソフトのExpressionWeb4を使っています。 回答よろしくお願い致します。

お世話になります。CSSについての質問です。 添付の写真のようなメインナビゲーションのドロップダウンメニューについてですが、 赤丸の下線の部分の白線の位置（ドロップダウンメニューのスタート位置）を下げるにはどう記述したらいいでしょうか？ よろしくお願いします。 .main-navigation ul ul li a { background-color:#333!; border-top: 1px solid #fff; border-color: #fff; line-height: 1.5; padding-bottom: 14px; padding-top: 14px; }

フッターのコピーライトが一番下に配置していません。右側のウィジェットサイドのより下になりたいです。ボックスのはみ出しだと思うのですが、うまくいきません。 教えてください。 よろしくお願いしいます。 http://yesdeafcan.com/

ul { display: -webkit-flex; display: flex; }　 上記のdisplay: -webkit-flex;の意味を教えてください。

画像を添付します。 このようなことをcssでやりたいのですが。

レスポンシブ対応の表を作成したのですが、640px以下になるとテーブルがセンターから少しズレています。 原因が分からないのです。どうかアドバイスをお願いします。 CSS table { width: 80%; margin: 20px auto; } .tbl td { width: 50%; border: solid 1px #ccc; padding: 10px; } @media screen and (max-width: 640px) { .tbl { width: 80%; } .tbl td { border-bottom: none; display: block; width: 100%; } } HTMLタグ <table class="tbl"> <tr> <td>01</td> <td>02</td> </tr> <tr> <td>03</td> <td>04</td> </tr> <tr> <td>05</td> <td>06</td> </tr> </table>

先日css記述の件で質問しましたが、また分からないことがありました。 番号付きリストで括弧を使うとき、説明文が折り返したとき、頭を揃えるにはどうすればいいでしょう。（括弧は赤文字、他は黒） 1.(1)説明説明説明説 　　明説明説明 　(2)説明説明説明説 　　明説明説明説明 2.説明説明説明

1.(1)説明文１ 　(2)説明文２ 2.説明文１ などというふうにcssの箇条書きで記述するには、どうすればいいでしょうか。 （括弧は赤文字）

このblog CSSのブログタイトルの色変更はどうすればいいですか？ .blogtitle　の所で色指定してもダメでした？他に方法があるのですか？ livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si

「Codepen」 というwebデザインのサイトについて質問があります。 素敵なメニューがあるので自分のサイトにも使いたいのですが、フリー版で登録してファイルをDLしてみたところ、サイトで見ている状態にはなりませんでした。サイト自体をDLしてみたところ、ベンダープレフィックスの記述もあったり別の javascript も記載されており大分違っていました。 HTML と CSS と JS だけで作成されていると記載されていますが、実は jquery を利用していたり、記載に無い別の javascript を利用しているようです。 アイコンなどは削除してコードを最低限にスリム化したいのですが、頁をまるごとDLしても元のサイトのような動きや表示をしないので困っています。 ＜質問の頁＞ https://codepen.io/kieranfivestars/pen/JdbPBv https://cdpn.io/kieranfivestars/fullpage/JdbPBv# ＜必要と思われる頁など（全て同じディレクトリに入れています。）＞ (1) index.html（大元の頁） (2) font-awesome.min.css（これは削除してもOK？） (3) jquery.min.js（必要みたい） (4) stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js（必要みたい） 以下はhtmlからも削除しました。 (5) fontawesome-webfont.svg (6) favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico DLしたフォントは　font　というフォルダの中に入れています。 ウェブ上の頁とDLしたファイルのコードに違いがありましたので少し直したところ 見た目は動くようになりました。しかし横三本線のメニューの表示が少しおかしいです。（DLしたファイルでは　<ul class="open">　の　classの指定がされていませんでしたので追加しました。） (2) font-awesome.min.css は削除すると、上下に動くハンバーガーメニューが止まってしまいました。 ＜補足＞ 以下は必要と思われるファイルのアドレスになります。 (1) index.html（大元の頁） (2) font-awesome.min.css（これは削除してもOK？） https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome... (3) jquery.min.js（必要みたい） https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js (4) stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js（必要みたい） https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e... ●他に多数のフォントファイルもDLできました。必要なのかもしれませんが、ディレクトリは font という別のフォルダに入れたいので、 もしかしたら、font-awesome.min.css の中の url にディレクトリ名を追加しないといけないのかもしれません。 アイコン画像やsvgも一応保存しています。 今の状態のファイルは以下にありますので、一度見てもらえますとありがたいです。 ７日間保存されています。 https://firestorage.jp/download/b19a1219f4ffb04658781c5d4892f410d8e59475 短縮URL https://xfs.jp/jSR7aT できるだけ必要のないコードは削除してシンプルにしたいと思っています。 出来れば CSS や javascript ファイルは外部タイプにして　html　はシンプルにしたいと思っています。 どなたかお知恵を拝借できればと思っております。 よろしくお願い致します。

HPのタイトルの字の大きさを変更したい（レスポンシブ対応にしたい）ですが、 調べて見つけたコードをそのままコピペすると、 <や”などに赤の波線が引かれてエラーとなり、保存できません。 対応する>や”を書いていてもです。 どうすればよいかご教示願います。 テンプレートはLightingを使っています。

IE11のみレイアウトが崩れてしまうため、原因がわかりません。 こちらのサイトをIE11でも表示できるようにできるのでしょうか？ サイトはこちらになります。 http://kentaw77.han-be.com/public_html2/

　img { 　transition: 1.0s ; } 　img:hover { 　opacity: 0.5 ; } を使って画像をゆっくり半透明になるようにしています それと .relative { position: relative; } .absolute { position: absolute; left: 4px; top: 23px; } で画像に画像を重ねているのですが、 その時に重ねた小さい画像だけを半透明にしないようにしたいのですが それはどうすれば良いでしょうか？

http://atsumare.wp.xdomain.jp/ 上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。 クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。 下記のものがスマホ用スタイルシートです。 /**************************************** スマホ用 ****************************************/ @media screen and (max-width:640px){ #main-1 { max-width: 100%; width: 100%; } /* ページヘッダー */ body.home header { background-size:cover; background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg"); width:100%; height:200px; } header img{ background-size:cover; display:inline-block; margin-left:auto; margin-right:auto; } h1 { position:absolute; top:0; left:0; margin-left:50px; margin-top:100px; color:#fff; font-size:24pt; } header img { background-size:cover; /* width:640px; height:200px; */ } .right-dw { display:inline-block; position:relative; width:100%; float:left; } header nav { display: none; } /* コンテンツエリア */ article { width:100%; display:block; padding-left: 5px; padding-right: 5px; box-sizing: border-box; } img { max-width:100%; height:auto; margin: 5px 5px 5px 5px; float:left; background-size:cover; } .right-dw { clear:both; display:block; position:relative; width:100%; height:auto; float:left; } .glay { border:dotted 2px #696969; display:block; color:#696969; padding:2px; margin:15px 15px 15px 15px; position:absolute; } /* フッターエリア */ footer { max-width:100%; width:500px; display:block; text-align:center; margin-left:auto; margin-right:auto; } .footer { width:130px; display:inline-block; text-align:left; color: #000; font-size: 10pt; margin-left:auto; margin-right:auto; } small { font-size:10pt; } } どなたかご教示ください。

何故多くの人たちがCSSを書くとき div p { color: red; } のように改行やスペースを入れるのですか？ div p {color: red; } でもいいと聞きますが、上のように書くメリットは何ですか？

下のようにタブが３つあり、表示する内容は５項目あるとします。 Aタブをクリックした時は２・３・４、Bタブをクリックした時は１・５・３、 Cタブをクリックした時は１・３・４を表示させたいのですが、よい方法はありますか？ シンプルに、各タブ下に表示する内容をブロック要素で囲んで、display:block noneで切り替えを考えたのですが、３のデータなどはソース上３つ書かなければいけないので却下しました・・・。 どなたかお助けください。 [Aタブ][Bタブ][Cタブ] １ ２ ３ ４ ５