私は友人のために小さなプロジェクトに取り組んでいます。最近、Codecademy で jQuery を学びましたが、これを Web ページに組み込むのはこれが初めてです。しかし、それは機能せず、その理由はわかりません。また、下のリンクの画像のようにテキスト ボックスを中央に配置する方法などを教えていただける場合は、お知らせください。
ここに私のindex.htmlがあります:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script> type="text/javascript" src="script.js"</script>
<script></script>
</head>
<body>
<div id="content">
<form>
DNA: <input type="text" name="dna" placeholder="DNA"><br>
mRNA: <input type="text" name="mrna" placeholder="mRNA"><br>
tRNA: <input type="text" name="trna" placeholder="tRNA"<br>
Amino Acids: <input type="text" name="aminoAcids" placeholder="Amino Acids"<br>
</form>
<button id="button" type="button">Tanslate</button>
</div>
</body>
</html>
ここに私のstylesheet.cssがあります:
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#content {
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#button{
opacity: 0.7;
display: inline-block;
height:25px;
width:300px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 30px auto;
}
input[type="text"] {
display:/*block;*/ inline-block;
height:20px;
padding:4px 6px;
margin-bottom:10px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
script.js は次のとおりです。
$(document).ready(function() {
$('#button').mouseenter(function() {
$('#button').fadeTo('slow', 1);
});
$('#button').mouseleave(function() {
$('#button').fadeTo('slow', 0.7);
});
});