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

送信ボタンのサイズを変更したいです

入力されたデータを送信するための「送信ボタン」を画像付きのボタンのコードを書いているのですが、付属画像のように、ボタンの大きさが横一杯に広がって灰色のようになって、しまうのですが、ボタンの大きさの縦幅と横幅の大きさを調節しても、適応されず困っています。ボタンの画像自体の大きさは適応できています。困っています。コードは以下にあります。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" href="senden.css"> <style type="text/css"> /* 送信ボタンの位置 */ .auto-style3 { text-align: center;/* 送信ボタンを中央に配置 */ } /* 送信ボタンの代替画像位置 */ .auto-style4 { text-align: center;/* 画像を中央に配置 */ margin-top:87px ;/* 画像の上の余白 */ } /* 画像の大きさ調節 */ img.example8 { width: 50%; height: 100px; </style> </head> <body> <form action="form1.php" method="post"> <div class="enter"> <button type="submit" name ="submit" class="auto-style4" height="70px" width="40px"> <img src="senden15.png" alt="確認画面へ" class="example8"/></button> </div> </form> </body> </html>

ベストアンサー
hayosat
CSS
回答数1
2021/06/23 16:01

ｈｔｍｌ

backgroun:url ()の後に続く英文字の意味を教えてください。 background: url('') top center / cover no-repeat;

ベストアンサー
dhtfyjh
CSS
回答数2
2021/06/12 08:50

付属画像の1794×400の画像の下の

付属画像の1794×400の画像の下の1794 ×200の高さを200pxにして表示させたいのですが、高さを２００ｐｘに変更しても上の画像の高さが適応されてしまいます。上の画像 1794×400高さと幅はそのままで、下の画像の高さのみ変更するにはどうしたらよいでしょうか？.kodai2{ height: 200px;反映されません。コード以下にあります。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title></title> <style> * { margin : 0; padding : 0; -webkit-box-sizing : border-box; box-sizing : border-box; } .box { height : 56px; width : 100%; background-color : #0fd; } .wrap{ width : 100%; display : -webkit-box; display : -ms-flexbox; display : flex; -ms-flex-wrap : nowrap; flex-wrap : nowrap; padding-bottom : 30px; } .wrap .wrap_inner_left { width : 300px; } .wrap .wrap_inner_left ul { width : 300px; } .wrap .wrap_inner_left ul li { color : #444; list-style-type : none; width : 300px; height : 30px; line-height : 30px; padding-left : 20px; border-bottom : solid 1px #53535352; background-color : #f6f4f4; } .wrap .wrap_inner_left ul li:first-child { border-top : solid 1px #53535352; } .wrap .wrap_inner_right { width : 100%; } /* トップの画像のスタイル */ .wrap .wrap_inner_right img { width : 100%; height: 400px; } .kodai2{ height: 200px; } /* 画像の下の右の太文字タイトル */ .mozi1{ font-size: 36px;/* 文字の大きさ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; margin-top: 19px;/* 上の余白 */ } </style> </head> <body> <div class="box">正方形</div> <div class="wrap"> <div class="wrap_inner_left"> <ul> <li>使い方・マニュアル</li> <li></li> <li></li> <li>翻訳機能</li> <li>英語</li> <li>中国語</li> <li>スペイン語</li> <li>フランス語</li> <li>ロシア語</li> <li>アラビア語</li> <li>a</li> <li>a</li> <li>ヘルプ</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>w</li> <li>s</li> <li>mmmm</li> <li>ログアウト</li> </ul> </div> <div class="wrap_inner_right"> <img src="https://placehold.jp/1794x400.png"> <div class="kodai2"> <img src="https://placehold.jp/1794x200.png"> </div > </div> </div> </body> </html>

ベストアンサー
hayosat
CSS
回答数1
2021/06/03 08:14

付属画像がwebの表示画像ですが、その画像の赤い丸

付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように灰色のリストの右側の真ん中に３行ほど文字を入れたいです。コードは以下でです。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title></title> <style> * { margin : 0; padding : 0; -webkit-box-sizing : border-box; box-sizing : border-box; } .box { height : 56px; width : 100%; background-color : #0fd; } .wrap{ width : 100%; display : -webkit-box; display : -ms-flexbox; display : flex; -ms-flex-wrap : nowrap; flex-wrap : nowrap; padding-bottom : 30px; } .wrap .wrap_inner_left { width : 300px; } .wrap .wrap_inner_left ul { width : 300px; } .wrap .wrap_inner_left ul li { color : #444; list-style-type : none; width : 300px; height : 30px; line-height : 30px; padding-left : 20px; border-bottom : solid 1px #53535352; background-color : #f6f4f4; } .wrap .wrap_inner_left ul li:first-child { border-top : solid 1px #53535352; } .wrap .wrap_inner_right { width : 100%; } .wrap .wrap_inner_right img { width : 100%; } </style> </head> <body> <div class="box">正方形</div> <div class="wrap"> <div class="wrap_inner_left"> <ul> <li>使い方・マニュアル</li> <li></li> <li></li> <li>翻訳機能</li> <li>英語</li> <li>中国語</li> <li>スペイン語</li> <li>フランス語</li> <li>ロシア語</li> <li>アラビア語</li> <li>a</li> <li>a</li> <li>ヘルプ</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>w</li> <li>s</li> <li>mmmm</li> <li>ログアウト</li> </ul> </div> <div class="wrap_inner_right"> <img src="https://placehold.jp/1794x400.png"> </div> </div> </body> </html>

ベストアンサー
hayosat
CSS
回答数1
2021/06/02 13:16

ＣＳＳに美的センスは必要？

ＣＳＳを勉強中の人が「ＣＳＳを使ってどのように装飾するか以前に、どのようなデザインにしたいかを考える美的センスが必要ということに気付いた」と言っています。この意見に賛成ですか、反対ですか。

締切済み
NKM_Chitose
CSS
回答数2
2021/05/26 23:15

セレクトボックスの矢印を大きな▼の緑色の矢印にした

同じような質問ですいません。入力フォームとセレクトボックスの横幅と縦幅を変更せずにセレクトボックスの矢印を大きな▼の緑色の矢印にしたいです。何度も同じ質問してすみません。レスポンシブ対応が上手くいかなかったので、少しコードを整理しました。(前回と少し違うコードになります）。付属画像のような感じにしたいです。コードは以下にあります。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <link rel="stylesheet" href="box.css"> <style> /* 入力フォームの位置 */ .auto-style1 { margin: auto; text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { margin: auto; text-align: center;/* セレクトボックス中央に配置 */ } </style> </head> <body> <form action ="hpform1.php" method ="post"> <div class="auto-style1"> <p class="px-num"> メールアドレス：※ </p> <input type="text" class="email" name="email" id="email" value="<?php if(isset($email)){ echo $email; } ?>"/> </div> <p class="px-num"> 支払方法：※ </p> <div class="auto-style2"> <select name="pay" class="pay" id="pay"> <option value="">支払方法</option> <option value="クレジットカード"<クレジットカード></option> </select> </div> </form> </body></html> ◎◎入力フォームとセレクトボックスのｃｓｓ（boxcss) /* 入力フォームのスタイル */ #email { margin:0 auto;/* レスポンシブ対応中央 */ text-align: center;/* レスポンシブ対応中央 */ border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 29.3em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ box-sizing: border-box;/* レスポンシブ対応中央 */ } /* セレクトボックスのデザイン */ #pay { margin:0 auto;/* レスポンシブ対応中央 */ text-align: center;/* レスポンシブ対応中央 */ border: 3px solid #63e02d ; /*#63e02d 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 24.3em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1.2em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */ box-sizing: border-box;/* レスポンシブ対応中央 */

ベストアンサー
hayosat
CSS
回答数1
2021/05/19 10:43

CSS

boxのサイズを文字に合わせたいです。 .box1 { /* Box */ padding: 0.5em 1em; margin: 2em 0; font-weight: ; border: solid 1px #fff; text-align: center; } .box1 p { margin: 0; padding: 0; color: white; }

締切済み
noname#247623
CSS
回答数1
2021/05/15 01:59

HTML CSS

こちらのサイトの"メタリックなボタン"というものが欲しいのですがかなり圧迫されてしまいます。出来れば少しでも短く...無理ならリンクさせるしかないです... https://jajaaan.co.jp/css/button/

締切済み
noname#247623
CSS
回答数1
2021/05/14 21:01

決済フォームのセレクトボックスの矢印

決済フォームのセレクトボックスの矢印を（付属画像のように三角の大きい目立つデザインにしたいです。付属画像の緑色のフォームは自分のコードのWEBの表示画像です。どうしたらよいでしょうか？回答よろしくお願いいたします。コードは下にあります。HTML CSS <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title>お問い合わせ</title> <link rel="stylesheet" href="syoki.css"> <link rel="stylesheet" href="syokigazou.css"> <style> /* 入力フォームの位置 */ .auto-style1 { margin: auto; text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { margin: auto; text-align: center;/* セレクトボックス中央に配置 */ } </style> </head> <body> <form action ="hpform1.php" method ="post" class="auto-style1"> <p class="px-num"> 支払方法：※ </p> <div class="auto-style2"> <select name="pay" class="pay" id="pay"> <option value="">支払方法</option> <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option> <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option> </select> </div> </form> </body></html> ◎◎ｃｓｓのコード（syokicss) /* セレクトボックスのデザイン */ #pay { border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 24.3em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1.2em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */ } /* 入力フォームとフォーム間のの上下の余白， */ input.email{margin:8px 0px;} /* セレクトボックスの上下の余白， */ select.pay{margin:8px 0px;} /* pxで指定入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/ .px-num{ line-height: 0px;/* 文字の行間 */ font-size: 22px;/* 文字の大さ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; }

ベストアンサー
hayosat
CSS
回答数1
2021/05/10 21:46

htmlについて

htmlで質問です。 <explanation> <p>説明</p> </explanation> このような、独自でタグって作ってもよいのでしょうか？よく <main> </main> などを目にします。またこれらにcssを適応させる場合はどのようにすればいいのでしょうか？

ベストアンサー
dhtfyjh
CSS
回答数1
2021/05/08 08:55

文字の囲みボックスが中央に配置されません。

文字の囲みボックスが中央に配置されません。text-align: center; をCSSのボックスのコードに追加しても、なぜか真ん中に行きません。どうしたらよいでしょうか？回答よろしくお願いいたします。付属画像のように真ん中に配置したいです。コードは下にあります。 ◎ＨＴＭＬのコード <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title>お問い合わせ</title> <link rel="stylesheet" href="highcoin.css"> <style </style> </head> <body> <div class="box_css"> <p>次の注意事項を読んでください </p> </div> </body> </html> ◎◎ｃｓｓのコード（high coin) /* 電話の際の注意事項ボックスのデザイン， */ .box_css{ width:100px; margin: 5em; border: solid 3px #f83c02; background-color: rgb(255, 255, 255); text-align: center; }

ベストアンサー
hayosat
CSS
回答数1
2021/05/06 07:06

CSSが反映されない

http://cus4.j-daa.or.jp/wordpress/news/ （テストの途中です）下記を参考にカテゴリー毎に色分けするように設定しました。 https://rmtmhome.com/category-design-wordpress-1280 一つだけ表示できて、あとは表示されません。「委員会」のCSS <span class="td-post-category cat committee">委員会</span> committeeがカラー指定です。 http://cus4.j-daa.or.jp/wordpress/wp-content/themes/jdaa/style.css?ver=1 7309行目に「.committee」があります。なぜ反映されないか、ご教鞭ください。宜しくお願いします。

ベストアンサー
nkmyr
CSS
回答数1
2021/05/02 20:15

スクロールボックスを中央に配置したいのですが上手く

スクロールボックスを中央に配置したいのですが上手くいきません。自分のコードは下にあります。試してみたこと。下記のURLを参考に https://h110.info/html_box_size/ ｃｓｓのスタイルシートに margin-left: auto; margin-right: auto; を追加してみても変化がありませんでした。何か私のやり方が間違っているのでしょうか？どうしたらよいでしょうか？途方に暮れています。ちなみにスクロールのつまみの色等はきちんと適応されています。画像も付属しておきます。ボックス内の文字一部消しています。 ○HTMLコード <!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <link rel="stylesheet" href="kiyaku.css"> <title></title> </head> <body> <form action ="hpform3.php" method ="post" name="doui_form" onsubmit="return false"> <p></p> <div class="row"> <label class="col-sm-2 control-label" for="name">名前：<?php echo $name; ?></label> </div> <p></p> <label class="title2" for="title2">利用規約</label> </div> <p></p> <div class="main"> <p>(以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。<br> すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。</p> <h4>第1条 (定義)</h4> </div> </form> <p><a href="form1.php?action=edit">入力画面へ戻る</a></p> </body> </html> ○CSSのコード「kiyaku CSS」 /*スクロールのボックスの位置*/ .main { margin-left: auto; /* 中央寄せにするため */ margin-right: auto; /* 中央寄せにするため */ } /*スクロール内のボックスの指定*/ .main{ width:550px; height:350px; border: 2px solid #63e02d; overflow: auto; margin: 30px; color: #63e02d; } /*スクロールの幅の指定*/ .main::-webkit-scrollbar{ width: 10px; height: 10px; } /*スクロールの背景の指定*/ .main::-webkit-scrollbar-track { border-radius:5px; box-shadow: 004px #63e02d; } /*スクロールのつまみ部分の指定*/ .main::-webkit-scrollbar-thumb { border-radius: 5px; background: #63e02d; }

ベストアンサー
hayosat
CSS
回答数1
2021/04/25 12:58

レスポンシブのサイトにbootstrapは使うか？

主にレスポンシブのためにbootstrapを使うと思いますが、こだわりだすと普通のcssよりも融通がきかないです。レスポンシブ部分を自分で作るのは難しいでしょうか？スマホとｐｃで分けたいのですが、境界線をどこに設定すればいいですか？。

ベストアンサー
inudaisukidesu
CSS
回答数3
2021/04/23 17:35

入力フォームの上の文字の位置を変更したいです

入力フォームをWebの中央に配置した場合、入力フォームの上にある文字の位置を、付属画像のように入力フォームの左下に配置したいのですが、上手くいきません。ただ、文字を左に配置するだけならできるのですが、付属画像のように入力フォームの左下に配置する方法が分かりません。どうしたらよいでしょうか？以下がコードになります。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title>お問い合わせ</title> <link rel="stylesheet" href="syoki.css"> <style> /* 入力フォームの位置 */ h2{ text-align: center; font-size: 22px } .auto-style1 { margin: auto; text-align: center; } </style> </head> <body> <form action ="hpform1.php" method ="post"> <div class="auto-style1"> <h2>名前：※</h2> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/> <h2>フリガナ：※</h2> <input type="text" class="furigana" name="furigana" id="furigana" value="<?php if(isset($furigana)){ echo $furigana; } ?>"/> <span colspan="2"><input type ="submit" name ="submit"value="確認画面へ"></span> </form> </body></html> ◎◎（syoki.css)◎◎ /* 入力フォームのスタイル */ #name { border: 2px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 27.8em; /* 横幅 */ height: 36px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ } #furigana { border: 2px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 27.8em; /* 横幅 */ height: 36px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ text-align: center; }

ベストアンサー
hayosat
CSS
回答数1
2021/04/19 22:46

セレクトボックス内の文字の文字の大きさを変更したい

セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス（緑色）は自分のコードのWeb表示画像なのですが、同じく付属画像の下にある、セレクトボックス（青色）は選択するセレクトボックス内の文字が少し大きく表示されています。（他の会社のHP画像です。）ちなみにセレクトボックス自体の大きさはどちらも同じ大きさです。文字を大きくしたいのですが、どうしたらよいでしょうか？また、文字を大きくすると、勝手にボックス横幅が広がってしまうでしょうか？以下がコードになります。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title>お問い合わせ</title> <link rel="stylesheet" href="syoki.css"> <style> /* セレクトボックスの位置 */ .auto-style2 { margin: auto; text-align: center; } </style> </head> <body> <form> <h2>支払方法：※</h2> <div class="auto-style2"> <select name="list" id="pay"> <option value=""></option> <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option> <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option> </select> </div> <p></p> <p></p> <p></p> <span colspan="2"><input type ="submit" name ="submit"value="確認画面へ"></span> </form> </body></html> ◎（syoki.css）◎ /* セレクトボックスのスタイル */ #pay { border: 2px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 28.8em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */

ベストアンサー
hayosat
CSS
回答数1
2021/04/19 11:17

パラメーターでのブラウザのキャッシュクリアについて

ブラウザでユーザーに最新の更新状況を見てもらうために、ユーザー自身がブラウザのキャッシュクリアをせずともパラメーターを画像やcssにつけたらキャッシュクリアできるとのことですが、画像やcssはこの方法で行うとして、文章内容を変更してアップした場合にも、同じページ内の画像などにパラメーターをつけたらば、そのキャッシュクリアされて、恩恵を受けて同一ページ内の更新したい文章箇所も新しい状態で表示されるのでしょうか？例更新前の文章　　今日は暖かいですね更新前の画像　　<img src="test.jpg"> パラメーターを追加 <img src="img src="test.jpg?20210415"> 文章変更　　　今日は寒いですね ↓ サーバーへアップするとユーザーがブラウザのキャッシュクリアしなくても、文章　　今日は寒いですねとなりますでしょうか？詳しくないので教えていただけたらありがたいです。よろしくお願いします。下記パラメーターについての参照サイトです。 https://kds-info.jp/blog/%E3%80%8C%E3%81%82%E3%80%81%E3%81%9D%E3%82%8C%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82%E3%80%8D%E3%81%A8%E3%81%AF%E3%82%82%E3%81%86%E3%82%AA%E3%82%B5%E3%83%A9/

ベストアンサー
zion12345
CSS
回答数1
2021/04/15 19:48

Cookieと削除動作との関係

あるQ&Aサイトにて、自分で投稿した質問内容を削除する時、"質問を取り消しました"というページが表示されますよね。質問(投稿)内容が www.example.com/ question/12345 ･･･① 取り消し完了ページが www.example.com/ your_question/deleted/finish ･･･② とそれぞれ分けています。今見ているページが①のリンクだとして、もし、第三者が直接②のリンクに直接アクセスすると、自分で投稿したリンク①は削除されるのでしょうか？ありえないと思いますが、回答と解説をよろしくお願いします。 Cookieと関係しているのでしょうか？

ベストアンサー
noname#248589
CSS
回答数1
2021/04/14 23:40

cssだけで3段階に連動するプルダウンメニュー

cssだけで3段階に連動するプルダウンメニューは可能でしょうか。2段階なら可能でした。西村文宏氏によるホームページ作成講座によると2段階のプルダウンメニューなcssだけでjacascriptを使わずに可能です。 http://guide.withabout.net/guide/gp332/23955/2step-pulldown.html

締切済み
semboku_love
CSS
回答数1
2021/04/13 19:05

ホームページで動画の上にテキストを表示させたい。

ホームページデザイン勉強中の者です。こんな感じの、動画とテキストを重ねて、PCでもスマホでもバランスよく見えるトップページを作成したいです！ https://sp.elle.co.jp/beauty/chanel/2103/ 質問１：wordpress等のCMSでは作成不可能でしょうか？質問２：不可能な場合、HTMLとCSSを勉強して作成することになると思うのですが、ヒントを教えていただければ幸いです。

ベストアンサー
takechi98
CSS
回答数1
2021/04/05 19:58

CSS

カテゴリ 一覧

カテゴリ
一覧