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

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

ただいまの
回答率

90.48%

  • HTML

    9290questions

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

  • CSS

    6016questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 962

retoruto1257

score 1

課題で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;
}

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/11 01:00 編集

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

    キャンセル

回答 2

checkベストアンサー

+3

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

*{ 
margin:0; 
padddig:0; 
}

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

hearder,#footer{

clear:both; 
wight:300px;
 /*width*/
text-align:center; 
}

block1,#block2,#block3#block4,#block5,#block6,#block7{
/*#block1 ?*/

width:150p;
 /*px*/
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; 
}


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/11 01:37 編集

    main は #main ではなく main 要素(<main>) の可能性も。
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/main

    HTMLが無いとわからない箇所ですが・・・。

    追記:
    予想が外れました、#main ですね。

    キャンセル

  • 2016/05/11 01:43 編集

    横から失礼致します。

    恐らく`btn`部分についても . が頭に必要な予感がします。
    それと #main #header #block1 については
    頭の#が見出しに変換されているだけかと思うので、CSSの修正は必要なさそうです。

    kei344さんが既に指摘されていますが、
    CSSはコード用のタグで囲んで頂いてHTML側も追記頂ければ、
    より良い回答が得られると思います。

    キャンセル

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    9290questions

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

  • CSS

    6016questions

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