CSSに関する質問・疑問一覧 - (161件目〜180件目)

<label>と<textarea>の位置がズレる

おおよそ以下のような記述で備考欄<textarea>を作成しました。横方向は固定させ、縦方向のみリサイズ可としました。さらにmin-height と max-height で高さを制限しました。最小値(min-height)の時には備考という文字(label)は textarea のちょうど真横に来るようにpaddingなどで位置を調整したのですが、最大値(max-height)までリサイズするとラベルが添付画像のように下の方にズレてしまいます。 textareaボックスの左上に固定、もしくは高さに合わせてボックスの真横にくっついてくるようにするにはどのように記述したら良いのでしょうか？わかる方がいらっしゃいましたら教えてください。よろしくお願いします。（HTML） <div> <label for="remark"> 備考: </label> <textarea id="remark"></textarea> </div> (CSS) textarea#remark { width: 400px; resize: vertical; min-height: 50px; max-height: 120px; border-radius: 0.5em; }

締切済み
blueletter12345
CSS
回答数1
2019/09/11 10:56

追加CSSでサイトの編集をしようと思っているのです

追加CSSでサイトの編集をしようと思っているのですが、もともと青だった所を追加CSSを使用して赤に変更した場合、もともと書かれていた赤は無効になって追加CSSが優先されて赤になるのでしょうか？

ベストアンサー
9494kouta
CSS
回答数2
2019/09/08 20:33

macでサイトのプログラミング編集をしています。

macでサイトのプログラミング編集をしています。写真の中の青色で表されているidに対応するCSSをすぐに見つける方法はありませんか？ CSSが多すぎて1つ1つ見ていくととても時間がかかります。また、1つのタグにいくつかのブロック要素があります。(id,classなど) 検索をかけましたが出てきませんでした。サイトではmacの上のバーで出てくる「開発」で編集しています。よろしくお願いします。

ベストアンサー
9494kouta
CSS
回答数1
2019/08/28 05:20

backglound-color　の透明度

backglound-color　の透明度を変えるにはどのようにすればよいでしょうか。その上の文字の透明度を変えずに背景の色だけスケた色にしたいのです。ショートハンドなどありましたらお教え願います。よろしくお願いいたします。

ベストアンサー
snshtml
CSS
回答数1
2019/08/27 19:37

フォームのレイアウト崩れを防ぐ方

添付画像のようなフォームのフィールドセットを作りました。画面サイズ100%の場合は添付画像左側のように整った状態です。が、画面の右側から縮小すると半分あたりでガタッとレイアウトが崩れます。フィールドセットの下はjqueryのデータテーブルズを使用しています。縮小した分文字数などは減りますがレイアウトは大きく崩れません。フォームの方もせめて画面の半分程度まで縮小してもレイアウトが大崩れしないようにする方法はありますか？また１から作り直すには時間がたりません。 <div>等ではさんでにクラスやIDをつけCSSでなんとか設定するような方法はありますでしょうか？以下は（凡そ）の記述です。初心者ですのでレスポンシブデザインなどもあまり理解できていません。何かいいやり方をご存知のかたいらっしゃいましたら教えてください。よろしくお願いします。＜HTML＞ <form action="staff_order.php" id="entry" method="post"> <fieldset id="staff_order"> <label for="user_id"><span class="required">*</span>●●●:</label> <select name="user_id" autofocus required> <option value="" selected> 選択してください</option> <?php foreach($rows_students as $student){ print '<option value="' . $student["user_id"] . '">' . $student["student_name"] . '</option>\n'; } ?> </select> </div> <div> <label for="title"><span class="required">*</span>●●●:</label> <input type="text" name="title" size="80" maxlength="100" required d="title" style="border-radius:0.5em;"> </div> <div><label for="date"><span class="required">*●●●: </span＞ </label> <input type="date" name="date" required id="date"> </div> -> <div><label for="point"><span class="required">*</span>●●●:</label> <input type="number" name="point" min="0" max="1000" required id="point"><b style="color: #411C00;"> P</b></div> <label for="remarks" class="order_remarks">●●:</label> <textarea name="remarks" rows="3" cols="60" maxlength="500" id="remarks"></textarea></div><p class="notes">(*)は必須項目です </p> <div class="so_button"><button type="submit" name="confirm" value="登録">登録</button> </div> </fieldset> </form> ＜CSS＞ input:focus, textarea:focus { background-color: #ffffcc; } button, input, select, textarea { font-family: inherit; font-size: 100%; padding-left: 5px; outline: none; } input[type=number], input[type=date] { text-align: right; padding-right: 8px; } input, select, textarea { border: solid 1px #CCC; border-radius: 3px; box-shadow: 0px 0px 5px #CCC inset; } /*↓form enry↓*/ form#entry fieldset#staff_order { border: 1px solid #666666; box-shadow: 0px 0px 2px; background-color: #bed487; border-radius: 0.5em; width: 90%; min-width: 90%; padding-top: 25px; margin-bottom: 25px; }

締切済み
blueletter12345
CSS
回答数1
2019/07/18 13:12

HTMLの構造

HTML初心者です。テキストでHTMLの構造が <html> <head> </head> <body> <header> </header> <main> </main> <footer> </footer> </body> </html> となっているのに対して、スタイルシートは、 html, body { font-size : 16px ; color : black ; } となっているのを見ましたが、このスタイルシートは、 html { font-size : 16px ; color : black ; } ではだめなのでしょうか。一番外側であるhtmlタグを指定すれば、 bodyタグ内もすべて含むのではないのでしょうか。よろしくお願いいたします。

ベストアンサー
snshtml
CSS
回答数2
2019/07/10 20:32

spanを使わずに文字列の一部を赤色にする方法

HTML/CSSについて教えてください。文字列の一部を赤色にしたいとき、インラインで記載すると以下のようになると思います。 <span style="color:#FF0000;"> samplesamplesample </span> 上記内容を、「span」を使わずにインラインで記載する方法を教えて欲しいです。 (HTML5用でお願いします) ※ググったところ、 <div style="display:inline;color:#FF0000;"> samplesamplesample </div> という書き方でよさそうに思うのですが、詳しくないのでよく分からず・・。 <font style="color:#FF0000;"> samplesamplesample </font> という書き方が、やりたいことに最も近い気がしますが、HTML5では禁止?されていると知りました。恐れ入りますが、どなたかよい方法をお教えくださると嬉しいです。

ベストアンサー
6z6-0
CSS
回答数4
2019/07/03 16:36

CSSでwidthの指定は%、pxどっちがいい

HTML5、CSS3の記述方法で教えていただきたい事がございます。横幅を指定する場合には、px、%、vwなどどんな単位で記述するのがいいのでしょうか。また、%とpxを混ぜて使ってもいいのでしょうか。高さも%を使うものでしょうか。お手数ではございますが、それぞれの説明サイトはあるのですが、では実際にどれを使うのが良いかの記述はどこにもなかったので、書き込ませていただきました。知識をお持ちの方、よろしくお願いいたします。

締切済み
teee
CSS
回答数1
2019/07/03 00:00

ｃｓｓスタイルシート

(1)html { }と(2)html * { }の違いを教えてください。ちなみに使い方は下記のようなものでした。 (1)html { font-family:sans-serif;} (2)html * {box-sizing: border-box;} どちらもhtmlタグ内すべての指定だと思いますがとくに(2)のアスタリスクがなぜ必要なのかがわかりません。よろしくお願いいたします。

ベストアンサー
snshtml
CSS
回答数2
2019/07/01 19:30

FlexboxのレシポンシブCSSで困ってます2

Proof4さんスミマセン！再度質問させてください。教えて頂いた通りにしたらboxのレシポンシブ化は出来たので、infofl-item2にｈ3とリストを作成したらinfofl-item2のリストがｈ3の下に来なくて右横に来てしまいました。どこが悪いのかわかりません？お手数ですが教えて下さい。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Introduction to CSS(flex-basis)</title> <script src="js/flexibility.js"></script> <style>  </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : yellow;"> <dl> <dt>■test1 <dd>test <dd>test <dt>■test2 <dd>test <dd>test <dt>■test3 </dl> </div> <div class="infofl-item2" style="background-color : silver;"> <h3 style="color : white;background-color : #212121;padding-top : 0.5em;padding-left : 0.5em;width : 98%;height : 1.5em;">お知らせ・新着情報</h3> <dl> <dt>■test1 <dd>test <dt>■test2 <dt>test <dt>■test3 <dt>■test4 <dt>■test5 </dl> </div> </div> </body> </html> 何度お尋ねしてもうしわけありまんがよろしくお願いいたします。

ベストアンサー
jeday8118
CSS
回答数1
2019/06/04 14:53

ハンバーガーメニューの作成について

Proof4様、今回いろいろご回答頂き有難うございました。初心者なものでいろいろ勉強になりました。Proof4の経験上から教えて頂きたいのですが、ハンバガーメニューに変わる3階層のレシポンシブメニューを作成するにあたりluxbar、SlickNav、その他どれが初心者にとってお勧めでしょうか？ナビバーの上にはLogoやテキストを記述するエリアが必須でその下にレシポンシブメニューを配置、また色が任意に選択出きIEにも対応できるのが希望です。訳あってHPをどうしても作成しなくてはいけないので是非教えてください。

ベストアンサー
jeday8118
CSS
回答数1
2019/06/03 23:28

FlexboxのレシポンシブCSSで困ってます。

Flexboxのレシポンシブの書き方で困ってます。各クラスのitemをPC版での場合は横並びで幅は20％、20％、60％。スマホ版では各itemが100%の画面横一杯に縦並びに表示したいです。他のCSSの関係上@media screen and (max-width:567px) の書き方は変えないでおきたいのですが上手くできません。どなたか教えて下さい。宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title></title> <style>  </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : green;">フレックスアイテム1</div> <div class="infofl-item2" style="background-color : fuchsia;">フレックスアイテム2</div> <div class="infofl-item3" style="background-color : silver;">フレックスアイテム3</div> </div> </body> </html>

ベストアンサー
jeday8118
CSS
回答数1
2019/05/31 14:03

レシポンシブのtab型メニューで困ってます

レシポンシブのtab型メニューが上手くできなくて困ってます。希望は、表示する枠の高さは固定、表示するリストが多くなれば縦のスクロールバーが自動的に表示される、レシポンシブに対応です。jQueryが上手く動かなくなる可能性があるのでCSSのみで動くソースがネット上に掲載されていたものを自分流にアレンジしてみました。作成後Google Chromeのデヴェロッパーツールでレシポンシブを検証すると、縦のスクロールバーは一瞬表示されますがマウスを適当に動かすと消えて機能しません。ソースは以下です。 html <div class="tab5"> <div class="tab-content"> <input id="tab5-1" type="radio" name="tab5" checked> <label for="tab5-1">1</label> <input id="tab5-2" type="radio" name="tab5"> <label for="tab5-2">2</label> <input id="tab5-3" type="radio" name="tab5"> <label for="tab5-3">3</label> <input id="tab5-4" type="radio" name="tab5"> <label for="tab5-4">4</label> <div id="tab5-b1" style="width: 100%;height : 100px;overflow-x: hidden;"> <p>コンテンツ1</p> </div> <div id="tab5-b2" style="width: 100%;height : 100px;overflow-x: hidden;"> <p>コンテンツ2</p> <p>コンテンツ2</p> </div> <div id="tab5-b3" style="width: 100%;height : 100px;overflow-x: hidden;"> <p>コンテンツ3</p> <p>コンテンツ3</p> <p>コンテンツ3</p> </div> <div id="tab5-b4" style="width: 100%;height : 100px;overflow-x: hidden;"> <p>コンテンツ4</p> <p>コンテンツ4</p> <p>コンテンツ4</p> <p>コンテンツ4</p> </div> </div> </div> css .tab5{ width: 100%; min-width: 320px; margin : 0px auto 20pt; } .tab5 .tab-content{ margin: 0 10px; } .tab5 label{ display: inline-block; margin: 0; padding: 0; } .tab5 label{ display: inline-block; width: 78px; padding: 3px 10px; cursor: pointer; background: #ddd; color: #777; margin-right: -2px; } .tab5 label:hover{ background: #eee; } .tab5 input:checked + label{ background: #9fb7d4; color: white; padding: 5px 10px 3px 10px; } .tab5 input{ display: none; } .tab5 #tab5-b1, .tab5 #tab5-b2, .tab5 #tab5-b3, .tab5 #tab5-b4{ display: none; padding: 10px; } .tab5 #tab5-1:checked ~ #tab5-b1, .tab5 #tab5-2:checked ~ #tab5-b2, .tab5 #tab5-3:checked ~ #tab5-b3, .tab5 #tab5-4:checked ~ #tab5-b4{ display: block; border: 1px solid #9fb7d4; } また、html中の style="width: 100%;height : 100px;overflow-x: hidden;"をcssに記述したいのですがどこに付加していいのかわかりません。 htmlを勉強し始めの初心者です。ソースをわかりやすく教えて頂くと助かります。よろしくお願いいたします。

ベストアンサー
jeday8118
CSS
回答数1
2019/05/26 08:19

CSS3のnth-childが上手くいかない

テーブル内のテキスト配置をtext-align: center;にします。左側の2番目以降をtext-align: left;にしたいです。どうやったら良いでしょうか？宜しくお願いします。

締切済み
nkmyr
CSS
回答数2
2019/05/20 11:37

safariでのtransformを有効にさせたい

webデザインについてです。 BODY <div id="wrap"> <main> <h1> <ruby> <span>題</span><rt>dai</rt>名<rt>mei</rt> </h1> <hr> <nav> #page2_INFO# #page4_MAIN# #blog1_LOG# </nav> </main> </div> CSS * { -webkit-box-sizing: border-box; box-sizing: border-box; } *:before,*:after { position: absolute; content: ""; } body { text-align: center; font-family: 'Lora','IPA 明朝'; font-size: 15px; letter-spacing: 1.5px; margin: 0 auto; animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; } @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } #wrap:after { background: url(画像url) right center; z-index: -9999; position: fixed; top: 0; left: 0; width: 100vw; height: auto; min-height:100vh; background-size: cover; } h1{ font-size: 60px; font-weight: normal; line-height: 1; letter-spacing: 4px; font-family: 'Lora','IPA 明朝'; text-align: center; margin: 0 auto; } h1 span { display: block; padding-top: 8px; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -webkit-transform: -webkit-translateY (180px); -webkit-backface-visibility: visible; backface-visibility: visible; } ruby rt { font-size: 8px; letter-spacing: 8px; line-height: 1; text-align: center; } nav{ text-align: center; } nav a{ font-size: 20px; font-family: Cinzel; line-height: 2; color: #000; text-align: center; background: url(画像url); background-size: 300px; padding: 2px; margin: 0 5px; } a{ background: rgba(255,255,255,0.5); color: #000; font-size: 10px; line-height: 14px; text-decoration: none; } main { background: rgba(255,255,255,0.9); padding: 5%; margin: 100px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } main hr{ width: 70%; border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -o-linear-gradient(left, #ccc, #333, #ccc); margin-top: 10px; } （サイトタイトルや画像url等を一部ぼかしています。web fontのコードは省略しています。）この状態で、chromeやfirefoxから閲覧すると、題名の題という文字がY軸180度回転(鏡文字のような状態)になっているのですが、なぜかsafariから確認すると題という文字がすっぽりと消えてしまいます。ルビ部分はそのまま消えていません。 safariからでも題の文字の部分が鏡文字のように見える状態で閲覧するにはどうしたら良いでしょうか。よろしくお願い致します。

ベストアンサー
GEDACHITNIS
CSS
回答数1
2019/05/08 17:31

htmlエディタのサイトをそのままワードプレスへ

元々はワードプレスを使ってHPを作っていたのですが最近htmlやCSSを勉強し始め、 bracketsというhtmlエディタで新たにサイトを作りました。 htmlエディタでのほうが自由度も高く、慣れれば作りやすいように感じています。しかし、たとえば画像を自動で圧縮してくれる EWWW Image Optimizerなどのようなワードプレスでの便利なプラグインも使いたくなりました。そこで、htmlエディタで htmlファイルとcssファイルを作った後、ワードプレスに移行すればいいと考えたのですが、これがなかなかうまくいきません。ひとまず、htmlのbody部分をワードプレスの記事のテキストエディタにコピペし、 cssをワードプレスのstyle.cssにコピペしてみたのですがレイアウトが多少崩れてしまいます。 style.css以外のファイルでワードプレスのテーマに元々含まれている要素が反映されてしまっているためかと思われるのですが、さすがにどこをどういじったらいいのかわかりませんでした。 htmlエディタで作ったものをそのままワードプレスで表示させるために最も簡単な方法はどのようなものでしょうか？

締切済み
amano2286
CSS
回答数2
2019/04/30 14:10

デスクトップのアイコンを画面片側にまとめたい

ノートパソコンを使ってますが、デスクトップ画面のアイコンが画面いっぱいになってます。中アイコンの大きさにちじめてもそのままの位置で変わりません。画面左側にまとめたいのですが方法ありますか？以前はできたようですが、、、、。

締切済み
perogou
CSS
回答数2
2019/04/24 15:45

:hoverで枠内どこに合わせても文字色が変わる

画像のようなメニューを作りたいと思っています。下記のように記述すると <li>に:hoverをつけ、カーソルを合わせると<li>内の枠線下の部分と<li>内の背景色は変わりますが文字に関しては文字の上にカーソルを合わせないと文字色は変わりません。 <li>Yahoo!</li>、枠線内であれば文字が入っていない部分にカーソルを合わせても、枠線下の部分、背景色、文字色全て変える為にはどのように記述すればよいですか？少し意味がわかりづらいかと思いますが、お分かりの方いらっしゃいましたら教えて下さい。宜しくお願いいたします。【HTML】 <nav> <ul> <li><a href="#">Yahoo!</a></li> <li>……</li> <li>……</li> </ul> 【CSS】 nav ul li:hover{ background-color: yellow; border-bottom: 5px; } nav ul li a:hover{ color:blue; }

締切済み
blueletter12345
CSS
回答数2
2019/02/21 23:28

ウェブサイトの基本的な学習をしています

ウェブサイト作成の学習をしています。おおよそ以下の添付画像のようなログイン画面を作成したいと思っています。 (1)ページのタイトルを記述するだけの「トピック」部分のcssですが”ログイン” という文字が垂直方向の中央に配置されません。 display: inline; にするとテキスト部分のみに背景色が適用されます。 display: inline-block; にしてもテキストの垂直方向に動いてくれません。念のためblockをいれてみたのですが変わりません。ちなみにページの幅、widthは1000pxです。＜div id="topic"＞の部分に記述した文字列を垂直方向中央にするにはどのようなCSSを記述したり、 HTMLの方に何か加えるなりしたらよろしいでしょうか？ (1) #topic { height: 30px; background-color: #819FF7; vertical-align: middle; } (2)以下の画像にもありますが、上から４行目のロゴ2 の横にユーザーIDとパスワードのフォームを配置し、さらにログイン画面をフォームの横に設置しようとしています。 cssで幅を設定し form や fieldset にfloat: right; をかけてみたのですがユーザーIDやパスワードのボックスがうまくロゴ２の横にならんでくれません。フッター部分の右下に配置されたりします。おおよそ添付画像のようにロゴ２の画像の横に２つのフォームを縦に並べ、その横にログインボタンを配置し、メイン画像の縦横中央にこれらを配置するにはどのようなCSSを記述すればいいでしょうか？独学で学習していたのですが、やはり自分で作ってみようとすると中々うまくいきません。ご面倒でしょうが何卒よろしくお願いします。m(_ _)m 【HTML】  <main> <div id="topic">ログイン</div> <p><img src="img/common/logo2.jpg" alt="ロゴ2"></p>  <form action="#"> <fieldset> <p><input type="text" name="userid" pattern="^[0-9A-Za-z]+$" value="" placeholder="ユーザーID"></p> <p><input type="password" name="password" pattern="^[0-9A-Za- z]+$" value="" placeholder="パスワード"></p> <p><input type="submit" value="ログイン"></p> </fieldset> </form>  </main>  投稿画像

締切済み
blueletter12345
CSS
回答数1
2019/02/17 18:45

divで2カラムにすると途中から本分が左に寄る

CSSは詳しくないのでテンプレートを元にしてますが divで2カラムなっており左にメニュー右に本分メニューが終わった部分から本分が左に寄って困っています本分の最初から最後までを0pxのテープルで囲えば途中から左に寄りませんが重くなるのでテーブルを使わずデザインしたいです clear: で寄せを解除してる分けでも無いんですよね… 色々調べたり試しましたが分かりません ※ブログシステムを使用せず手作りのWEBサイトです

ベストアンサー
天才とマスク
CSS
回答数1
2019/02/03 15:51

CSS

カテゴリ 一覧

カテゴリ
一覧