CSS

全5327件中1~20件表示
  • htmlについて

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

    • ベストアンサー
    • 困ってます
    • dhtfyjh
    • CSS
    • 回答数 1
  • 文字の囲みボックスが中央に配置されません。

    文字の囲みボックスが中央に配置されません。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; }

    • 受付中
    • すぐに回答を!
    • hayosat
    • CSS
    • 回答数 1
  • 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
  • 入力ホームに送られた情報のみ文字の大きさ変更したい

    入力フォームに送られた、情報(文字)を付属画像の右側(青い確認画面)のように名前などの項目の左に表示される入力された情報の部分だけを標準の文字にしたいです。 付属画像の左側の緑色の確認画面が私の書いたWebで表示されたものです。確認画面の入力された文字のみを標準の大きさにしたいです。 あと、画像にあるメールアドレスの最後のスの文字がなぜか下にいってしまいます。右側の青い画像のようにしたいのですがどうしたらよいでしょうか? 画像の入力情報は適当な人の名前にしてあります。 コードは下にあります。字数の関係で、phpやhtmlの一部はカットしており、メールアドレスの項目に関する、HTML CSS等に限定して記載しています。 回答よろしくお願いします。 入力フォームのHTMLとCSS 確認画面のHTMLとCSS のコードになります。 ◎入力フォームのHTML phpなど一部カット <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <link rel="stylesheet" href="syoki.css"> </head> <body> <form action ="hpform1.php" method ="post"> <p class="px-num"> メールアドレス:※ </p> <input type="text" class="email" name="email" id="email" value=""/> </div> </form> </body></html> ◎入力フォームのCss 一部カット /* 入力フォームのスタイル */ #email { border: 2px solid #63e02d; padding: 0.5em; background-color: snow; width: 27.8em; height: 36px; font-size: 1em; line-height: 1.2; } ◎確認画面のhtml 一部カット <!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <link rel="stylesheet" href="kiyaku.css"> </head> <body> <form action ="hpform3.php" method ="post" name="doui_form" onsubmit="return false"> <label class="title" for="title">お申し込み内容の確認</label> </div> <div class="row"> <label class="col-sm-2 control-label" for="email">メールアドレス:<?php echo $email; ?></label> </div> </form> </html> ◎確認画面のcss 一部カット .title{ line-height: 80px;/* 文字の行間 *//* 下線からの余白を広げるための処置 */ font-size: 39px;/* 文字の大きさ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; transform: scale( 1 , 1.1 );/* 文字の大きさ調整 */ } /* 入力フォームの項目とそのしたので線のデザイン*/ .row{ line-height: 38px;/* 文字の行間 */ font-size: 26px;/* 文字の大きさ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; }

    • 受付中
    • すぐに回答を!
    • hayosat
    • CSS
    • 回答数 0
  • スクロールボックスを中央に配置したいのですが上手く

    スクロールボックスを中央に配置したいのですが上手くいきません。自分のコードは下にあります。 試してみたこと。 下記の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; }

    • ベストアンサー
    • すぐに回答を!
    • hayosat
    • CSS
    • 回答数 1
  • レスポンシブのサイトにbootstrapは使うか?

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

    • ベストアンサー
    • 困ってます
    • inudaisukidesu
    • CSS
    • 回答数 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; }

    • ベストアンサー
    • すぐに回答を!
    • hayosat
    • CSS
    • 回答数 1
  • セレクトボックス内の文字の文字の大きさを変更したい

    セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス(緑色)は自分のコードの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
  • パラメーターでのブラウザのキャッシュクリアについて

    ブラウザでユーザーに最新の更新状況を見てもらうために、ユーザー自身がブラウザのキャッシュクリアをせずともパラメーターを画像や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
  • Cookieと削除動作との関係

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

    • ベストアンサー
    • 困ってます
    • yukidaruma6l
    • CSS
    • 回答数 1
  • cssだけで3段階に連動するプルダウンメニュー

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

    • 受付中
    • すぐに回答を!
    • semboku_love
    • CSS
    • 回答数 1
  • ホームページで動画の上にテキストを表示させたい。

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

    • ベストアンサー
    • すぐに回答を!
    • takechi98
    • CSS
    • 回答数 1
  • 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; } } ご指摘いただけると幸いです。 よろしくお願い致します。

    • 締切済み
    • 困ってます
    • Android2222
    • CSS
    • 回答数 1
  • htmlの表を調整したい

    以下のようなコードの時、「c」がはみ出てしまいます。 訳あってrowspanは外せませんが、「2」と「b」を重ねて表示したいです。 どの様にしたらよいでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> </head> <body> <table border=""> <tbody> <tr> <td> 1 </td> <td rowspan="2"> 2 </td> <td> 3 </td> </tr> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> </tbody> </table> </body> </html>

    • ベストアンサー
    • 困ってます
    • madosel15
    • CSS
    • 回答数 1
  • htmlについて

    cssで以下のように書くと形が添付画像のように崩れてしまいます。 どこが作用しているのでしょうか? 他に必要な箇所があれば教えてください。すぐ用意します。 ilは5回出力しています。 .article-tag li{ text-align: center; display: inline-block; } .article-tag a{ font-weight: bold;/*太字に*/ font-size:16px; text-decoration: none;/*下線消す*/ background: skyblue;/*背景を水色に*/ padding:3% 0; color:white;/*文字を白に*/ border-radius: 20px;/*角を丸くする*/ font-family: 'Avenir','Arial';/*フォントをいい感じに*/ } <div class="article"><ul> <li> 14</li><div class="article-tag"> <li> <a href="article">ハンマー</a></li> <li> <a href="article">キャリー依頼</a></li> <li> <a href="article">apex</a></li> <li> <a href="article.php">フォートナイト</a></li> <li> <a href="article">ハンマー#キャリー依頼#apex#フォートナイト</a></li></li></div>

    • ベストアンサー
    • 困ってます
    • dhtfyjh
    • CSS
    • 回答数 3
  • htmlについて

    .article-tag li{ text-align: center; display: inline-block; } .article-tag a{ font-weight: bold;/*太字に*/ font-size:16px; text-decoration: none;/*下線消す*/ background: skyblue;/*背景を水色に*/ padding:3% 0; color:white;/*文字を白に*/ border-radius: 20px;/*角を丸くする*/ font-family: 'Avenir','Arial';/*フォントをいい感じに*/ }

    • ベストアンサー
    • 困ってます
    • dhtfyjh
    • CSS
    • 回答数 1
  • CSS スマホで横スクロールバーが出現する

    https://jdsasurf.jp/news/ トップページ以外どのページにもスマホで横スクロールが出現します。 トップページは出現しないのですが… body { overflow-x: hidden; } body { box-sizing : border-box; } と記述してもダメでした。 宜しくお願いします。

    • 締切済み
    • すぐに回答を!
    • nkmyr
    • CSS
    • 回答数 2
  • css calcの100%はどこの幅の事?

    幅を24分割したくてcalc(100% / 24)としましたが効きません。 ↓のようになってます。 <tr><td></td>~~</tr> tr { width : 100% } td { width : calc(100% / 24) } なぜでしょうか?

    • ベストアンサー
    • 困ってます
    • natyo4235
    • CSS
    • 回答数 1
  • <label><input>|後者の先頭を揃えたい

    いくつかの「label要素[input要素]」を、リスト要素等を使って単純な縦並びにするとします。すると、label要素の文字数が異なるため、input要素の先頭が揃いません。この状態から先頭を揃えた表示に変更したい場合、適切な改善方法(html要素変更やcss指定)を教えていただけませんか。 よろしくお願いします。

    • 締切済み
    • 暇なときにでも
    • noname#247225
    • CSS
    • 回答数 1
  • 【css】異なる種類の要素を横並びに表示する方法

    たとえば見出し要素<h1>とリスト要素<ul>を横並びに表示したい場合、cssでは何をどれに対して指定すれば良いのか教えていただけませんか。 よろしくお願いします。

    • 締切済み
    • 暇なときにでも
    • noname#247225
    • CSS
    • 回答数 1