CSS
- 付属画像の1794×400の画像の下の
付属画像の1794×400の画像の下の1794 ×200の高さを200pxにして表示させたいのですが、高さを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>
- 付属画像がwebの表示画像ですが、その画像の赤い丸
付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように 灰色のリストの右側の真ん中に3行ほど文字を入れたいです。 コードは以下でです。 回答よろしくお願いいたします。 <!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>
- CSSに美的センスは必要?
CSSを勉強中の人が「CSSを使ってどのように装飾するか以前に、どのようなデザインにしたいかを考える美的センスが必要ということに気付いた」と言っています。この意見に賛成ですか、反対ですか。
- 締切済み
- CSS
- NKM_Chitose
- 回答数2
- セレクトボックスの矢印を大きな▼の緑色の矢印にした
同じような質問ですいません。 入力フォームとセレクトボックスの横幅と縦幅を変更せずに セレクトボックスの矢印を大きな▼の緑色の矢印にしたいです。 何度も同じ質問してすみません。レスポンシブ対応が上手くいかなかったので、少しコードを整理しました。(前回と少し違うコードになります)。 付属画像のような感じにしたいです。 コードは以下にあります。回答よろしくお願いいたします。 <!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> ◎◎入力フォームとセレクトボックスのcss(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;/* レスポンシブ対応中央 */
- 決済フォームのセレクトボックスの矢印
決済フォームのセレクトボックスの矢印を(付属画像のように三角の大きい目立つデザインにしたいです。 付属画像の緑色のフォームは自分のコードの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> ◎◎cssのコード(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; }
- 文字の囲みボックスが中央に配置されません。
文字の囲みボックスが中央に配置されません。text-align: center; をCSSのボックスのコードに追加しても、なぜか真ん中に行きません。 どうしたらよいでしょうか?回答よろしくお願いいたします。 付属画像のように真ん中に配置したいです。 コードは下にあります。 ◎HTMLのコード <!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> ◎◎cssのコード(high coin) /* 電話の際の注意事項ボックスのデザイン, */ .box_css{ width:100px; margin: 5em; border: solid 3px #f83c02; background-color: rgb(255, 255, 255); text-align: center; }
- 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」があります。 なぜ反映されないか、ご教鞭ください。 宜しくお願いします。
- スクロールボックスを中央に配置したいのですが上手く
スクロールボックスを中央に配置したいのですが上手くいきません。自分のコードは下にあります。 試してみたこと。 下記のURLを参考に https://h110.info/html_box_size/ cssのスタイルシートに 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; }
- レスポンシブのサイトにbootstrapは使うか?
主にレスポンシブのためにbootstrapを使うと思いますが、こだわりだすと普通のcssよりも融通がきかないです。 レスポンシブ部分を自分で作るのは難しいでしょうか? スマホとpcで分けたいのですが、境界線をどこに設定すればいいですか?。
- ベストアンサー
- CSS
- inudaisukidesu
- 回答数3
- 入力フォームの上の文字の位置を変更したいです
入力フォームを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; }
- セレクトボックス内の文字の文字の大きさを変更したい
セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス(緑色)は自分のコードの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; /* 行の高さ */
- パラメーターでのブラウザのキャッシュクリアについて
ブラウザでユーザーに最新の更新状況を見てもらうために、ユーザー自身がブラウザのキャッシュクリアをせずともパラメーターを画像や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/
- Cookieと削除動作との関係
あるQ&Aサイトにて、自分で投稿した質問内容を削除する時、"質問を取り消しました"というページが表示されますよね。 質問(投稿)内容が www.example.com/ question/12345 ・・・① 取り消し完了ページが www.example.com/ your_question/deleted/finish ・・・② とそれぞれ分けています。 今見ているページが①のリンクだとして、 もし、第三者が直接②のリンクに直接アクセスすると、 自分で投稿したリンク①は削除されるのでしょうか? ありえないと思いますが、回答と解説をよろしくお願いします。 Cookieと関係しているのでしょうか?
- ベストアンサー
- CSS
- noname#248589
- 回答数1
- cssだけで3段階に連動するプルダウンメニュー
cssだけで3段階に連動するプルダウンメニューは可能でしょうか。2段階なら可能でした。 西村文宏氏によるホームページ作成講座によると2段階のプルダウンメニューなcssだけでjacascriptを使わずに可能です。 http://guide.withabout.net/guide/gp332/23955/2step-pulldown.html
- 締切済み
- CSS
- semboku_love
- 回答数1
- ホームページで動画の上にテキストを表示させたい。
ホームページデザイン勉強中の者です。 こんな感じの、動画とテキストを重ねて、PCでもスマホでもバランスよく見えるトップページを作成したいです! https://sp.elle.co.jp/beauty/chanel/2103/ 質問1:wordpress等のCMSでは作成不可能でしょうか? 質問2:不可能な場合、HTMLとCSSを勉強して作成することになると思うのですが、ヒントを教えていただければ幸いです。
- ameba ownd アメーバオウンド CSS
アメーバオウンドにてアコーディオンを使ったサイトを作りたいのですが、どうしても反映されません。 他のサイトのテンプレをそのまま貼り付けるだけ、でも反映されず… だれか助けていただけないでしょうか? ちなみにその一例が下記になります。 【HTML】 <div class="qa-list mts"> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> <dl class="qa"> <dt>ここに質問が入ります</dt> <dd> <p>ここに回答が入ります</p> </dd> </dl> </div> 【CSS】 .qa-list dl { position: relative; margin: 30px 0 0; cursor: pointer; border: 1px solid #DDD; } .qa-list dl:first-child { margin-top: 0; } .qa-list dl::after { position: absolute; top: 27px; right: 26px; display: block; width: 7px; height: 7px; margin: auto; content: ''; transform: rotate(135deg); border-top: 2px solid #000; border-right: 2px solid #000; } .qa-list .open::after { transform: rotate(-45deg); } .qa-list dl dt { position: relative; margin: 0; padding: 20px 20px 20px 60px; font-weight: bold; background: #DDD; } .qa-list dl dt::before { font-size: 22px; line-height: 1; position: absolute; top: 20px; left: 20px; display: block; content: 'Q.'; color: #3285bf; } .qa-list dl dd::before { font-size: 22px; line-height: 1; position: absolute; left: 20px; display: block; content: 'A.'; font-weight: bold; color: #3285bf; } .qa-list dl dd { position: relative; margin: 0; padding: 20px 20px 20px 60px; } .qa-list dl dd p { margin: 30px 0 0; } .qa-list dl dd p:first-child{ margin-top: 0; } @media screen and (max-width: 767px) { .qa-list dl { margin: 10px 0 0; } .qa-list dl:after { top: 20px; right: 20px; width: 7px; height: 7px; } .qa-list dl dt { padding: 16px 16px 16px 50px; font-size: 14px; } .qa-list dl dt::before { font-size: 14px; top: 20px; left: 20px; } .qa-list dl dd::before { font-size: 14px; left: 20px; margin-top: 5px; } .qa-list dl dd { margin: 0; padding: 16px 16px 16px 50px; font-size: 14px; } .qa-list dl dd p { margin: 30px 0 0; } .qa-list dl dd p:first-child{ margin-top: 0; } } ご指摘いただけると幸いです。 よろしくお願い致します。
- 締切済み
- CSS
- Android2222
- 回答数1