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

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

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

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

CSS

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

Q&A

解決済

1回答

1803閲覧

css外部ファイル化について

ITnewperson

総合スコア27

HTML

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

CSS

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

0グッド

0クリップ

投稿2015/07/19 14:03

お世話になっております。
先日数値の出力にご教授頂いた方々ありがとうございます。

主題の通り、cssの外部ファイル化について教えていただきたいです。
ボタンの色とfont-famiry(メイリオ)のみうまく認識してくれません。
どのコードが間違っているか教えていただけないでしょうか?

以下がcssの外部ファイルコードです。

<html> <head> @charset "UTF-8"; @import url("style.css") ; .button{ background:#D7EEFF; border:1px solid #DDD; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; color:#111; width:100px; cursor:pointer; font-weight:bold; } body { font:20px sans-serif; margin:10px; } table { font-family:"メイリオ"; font-size:30; width: 100%; } .num-button { width: 100%; padding: 6px; } input { cursor:pointer; } * { margin: 0; padding: 0; border: 0; } #text{ background:#F5F5F5; /*灰色*/ } #title{font-family:"メイリオ"; font-size:30; } #Numtitle{font-family:"メイリオ"; font-size:45; } #menu { margin-top: 60px; } </head> </html> ---------------css外部ファイルここまで--------------- 以下が内部ファイルです。 <html> <head> <title></title> <style type="text/css"> @import url("style.css") ; </style> <script type="text/javascript"> function onBlur(text) { text.style.backgroundColor = "#D7EEFF";<!--水色 --> } </script> <!-- 数値の連結 --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function(){ $('input[type=button]').click(function(){ if ($('#text').val().length < 4) { $('#text').val($('#text').val() + $(this).val()); } }); }); </script> </head> <body onkeydown="return false;"> <div id="Numtitle">暗証番号を入力してください。</div> <form method ="post" action="BalanceInquiry3.jsp"> <div id="title">暗証番号:<input type="text" id="text" name="pass" value=""onblur="onBlur(this)" tabindex="1" title="4桁の暗証番号を入力してください。" ></div><br> <br><table> <div> <tr> <td><input type="button" value="7" id="7" tabindex="2" class="num-button" ></td> <td><input type="button" value="8" id="8" tabindex="3" class="num-button" ></td> <td><input type="button" value="9" id="9" tabindex="4" class="num-button" ></td> </tr> <tr> <td><input type="button" value="4" id="4" tabindex="5" class="num-button" ></td> <td><input type="button" value="5" id="5" tabindex="6"class="num-button" ></td> <td><input type="button" value="6" id="6" tabindex="7" class="num-button" ></td> </tr> <tr> <td><input type="button" value="1" id="1" tabindex="8" class="num-button" ></td> <td><input type="button" value="2" id="2" tabindex="9" class="num-button" ></td> <td><input type="button" value="3" id="3" tabindex="10" class="num-button" ></td> </tr> <tr> <td colspan="3"><input type="button" value="0" tabindex="11" name="zero"class="num-button"></td> </tr> </div> </table> </div> <div id="menu"> <table border="1"> <tr> <td width="33.3%;"><input type="submit" value="戻る" class="button" name="Back" tabindex="12"onclick="history.back()"></td> <td width="33.3%;"><input type="reset" value="訂正" class="button" name="Correction" tabindex="13"></td> <td width="33.3%;"><input type="submit" value="確認" class="button" name="Check" tabindex="14"></td> <td width="33.3%;"><input type="submit" value="メインメニュー"class="button" name="Back" tabindex="15" onclick="location.href='Mainmenu.jsp'"></td> </tr> </table> </div> </form> </body> </html> よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

CSSファイルに<html><head></head></html>は不要です。
CSSファイルに@import url("style.css") ; の記述は不要でしょう。
メイリオは正しく反映されていましたが、もしうまくいかない場合は
font-family: メイリオ,Meiryo;
でいかがでしょうか?

投稿2015/07/19 14:16

rik

総合スコア1151

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

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

ITnewperson

2015/07/20 01:12

回答ありがとうございます。 上手く動作しました。<html><head></head></html>は不要だったんですね。 本当に勉強不足です。rikさんいつもありがとうございます。 今後もよろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問