質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4715閲覧

cssでボタンを2列に表示したい

retoruto1257

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/05/10 15:54

編集2016/05/10 16:39

課題でHTMLでボタンの動きについて書いています。 htmlは出来たのですが、cssでボタンの位置を指定するコマンドなど全然学ばずにしていてよく分かりません。
プログラムのどこがおかしいのか教えてくださいお願いします。
以下が書いたhtmlとcssのプログラムです
html

<html>  <head>  <meta charset="UTF-8">  <script src="../jquery-1.10.2.min.js"></script> <title> Light's three primary colors</title> <link rel="stylesheet" href="newtest1.css">    <script> $(document).ready(function(){   $("#btn1").click(function(){  $("#btn1").css("background","#0000FF");  $("#btn2").css("background","#E0E0E0");  $("#btn3").css("background","#E0E0E0");  $("#btn4").css("background","#0000FF");  $("#btn5").css("background","#0000FF");  $("#btn6").css("background","#E0E0E0");  $("#btn7").css("background","#0000FF");  $("#footer").text("blue"); });  $("#btn2").click(function(){  $("#btn1").css("background","#E0E0E0");  $("#btn2").css("background","#FF0000");  $("#btn3").css("background","#E0E0E0");   $("#btn4").css("background","#FF0000");   $("#btn5").css("background","#E0E0E0");  $("#btn6").css("background","#FF0000");  $("#btn7").css("background","#FF0000");  $("#footer").text("red");  });   $("#btn3").click(function(){  $("#btn1").css("background","#E0E0E0");  $("#btn2").css("background","#E0E0E0");  $("#btn3").css("background","#8FBC8F");  $("#btn4").css("background","#E0E0E0");  $("#btn5").css("background","#8FBC8F");  $("#btn6").css("background","#8FBC8F");   $("#btn7").css("background","#8FBC8F");  $("#footer").text("green");  });  $("#btn4").click(function(){  $("#btn1").css("background","#E0E0E0");  $("#btn2").css("background","#E0E0E0");  $("#btn3").css("background","#E0E0E0");  $("#btn4").css("background","#DA70D6");  $("#btn5").css("background","#E0E0E0");  $("#btn6").css("background","#E0E0E0");  $("#btn7").css("background","#E0E0E0");  $("#footer").text("blueviolet");  });   $("#btn5").click(function(){  $("#btn1").css("background","#E0E0E0");  $("#btn2").css("background","#E0E0E0");  $("#btn3").css("background","#E0E0E0");  $("#btn4").css("background","#E0E0E0");  $("#btn5").css("background","#87CEEB");  $("#btn6").css("background","#E0E0E0");  $("#btn7").css("background","#E0E0E0");  $("#footer").text("skyblue");  });  $("#btn6").click(function(){   $("#btn1").css("background","#E0E0E0");  $("#btn2").css("background","#E0E0E0");  $("#btn3").css("background","#E0E0E0");   $("#btn4").css("background","#E0E0E0");  $("#btn5").css("background","#E0E0E0");  $("#btn6").css("background","#FFFF00");  $("#btn7").css("background","#E0E0E0");  $("#footer").text("yellow");  });  $("#btn7).click(function(){   $("#btn1").css("background","#E0E0E0");  $("#btn2").css("background","#E0E0E0");  $("#btn3").css("background","#E0E0E0");  $("#btn4").css("background","#E0E0E0");  $("#btn5").css("background","#E0E0E0");  $("#btn6").css("background","#E0E0E0");  $("#btn7").css("background","#FFFFFF");  $("#footer").text("white");  });  });    </script> </head>  <body>    <div id="main"> <div id="header"> <p>Light's three primary colors</p> </div>  <div id="block1"> <p> <input id="btn1" class="btn" type="button" value="blue"></p>  </div> <div id="block2">  <p><input id="btn2" class="btn" type="button" value="red"></p> </div> <div id="block3"> <p><input id="btn3" class="btn" type="button" value="green"></p> </div> <div id="block4"> <p><input id="btn4" class="btn" type="button" value="blueviolet"></p> </div> 

 <div id="block5"> 

<p><input id="btn5" class="btn" type="button" value="skyblue"></p> </div> <div id="block6">  <p><input id="btn6" class="btn" type="button" value="yellow"></p> </div>  <div id="block7">  <p><input id="btn7" class="btn" type="button" value="white"></p>  </div>    <div id="footer"></div> </div> </body> </html>

入力したcss
*{
margin:0;
padddig:0;
}

#main{
clean:both;
postition:absolite;
left:50%;
top:50%;
width:300px;
height:200px;
margin-left:-140px;
margin-top:-75px;
}

#hearder,#footer{
clear:both;
wight:300px;
text-align:center;
}

#block1,#block2,#block3#block4,#block5,#block6,#block7{
width:150p;
float:left;
text-align:justify;
text-justify:auto;
}

btn{
height:50px;
width:100px;
background: #EEE;
background: 7px solid #DDD;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
color; #111;
margin:2px 10px 0px 0px;
overflow: hidden;
outline:0px none black;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/10 16:38 編集

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、コード中に不要な水平線が混じっているため、それも削除されたほうが可読性が上がります。HTMLがなければどこをどうしたいかがわかりませんので、それも質問文に追記してください。
guest

回答2

0

ベストアンサー

掲示されているCSSコードが実際に書いているものと全く同じだと仮定すると、
誤字脱字・スペルミス・構文ミス等のケアレスミスが多すぎます。
そこを全て直してなお2列にならないのであれば、再度質門してください。

【修正すべき箇所】
・idセレクタの#が抜けている(#main, #header, #block1)
・classセレクタの.が抜けている(.btn)
・セレクタ名のスペルミス(hearder→header)
・プロパティのスペルミス多数(構文チェッカーにかければ分かります)

投稿2016/05/10 17:46

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

HTMLのソースが無いんで検証は出来ませんけど
とりあえずcssの完全に間違ってるところと間違っている可能性のあるところだけチェックしておきますね^^
見落としてたらごめんなさい...

css

1*{ 2margin:0; 3padddig:0; 4} 5 6main{ 7/*#*/ 8clean:both; 9 /*clear*/ 10postition:absolite; 11 /*position*/ 12left:50%; 13top:50%; 14width:300px; 15height:200px; 16margin-left:-140px; 17margin-top:-75px; 18} 19 20hearder,#footer{ 21 22clear:both; 23wight:300px; 24 /*width*/ 25text-align:center; 26} 27 28block1,#block2,#block3#block4,#block5,#block6,#block7{ 29/*#block1 ?*/ 30 31width:150p; 32 /*px*/ 33float:left; 34text-align:justify; 35text-justify:auto; 36} 37 38btn{ 39height:50px; 40width:100px; 41background: #EEE; 42background: 7px solid #DDD; 43-webkit-border-radius:100px; 44-moz-border-radius:100px; 45border-radius:100px; 46color; #111; 47/*:;*/ 48margin:2px 10px 0px 0px; 49overflow: hidden; 50outline:0px none black; 51}

w3cとか色々cssをチェックするサービスがあるんで 利用するようにするといいですよ
https://jigsaw.w3.org/css-validator/validator.html.ja

投稿2016/05/10 16:30

編集2016/05/10 16:34
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gzrita

2016/05/10 16:45 編集

横から失礼致します。 恐らく`btn`部分についても . が頭に必要な予感がします。 それと #main #header #block1 については 頭の#が見出しに変換されているだけかと思うので、CSSの修正は必要なさそうです。 kei344さんが既に指摘されていますが、 CSSはコード用のタグで囲んで頂いてHTML側も追記頂ければ、 より良い回答が得られると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問