###前提・実現したいこと
macのテキストエディタでhtmlを書き、アップロードしました。
しかし、cssファイルが反映されずにいます。
具体的には、cssファイルを反映させてトップページを2段組レイアウトにしたいのです。
よくイラストサイトにあるタイプの、ページ半分にメニュー(リンク)があり、半分に選んだリンク先のページが表示されるデザインです。
初心者中の初心者です。細かいことまで、説明いただけると(回答いただく中にある専門用語の意味など)大変ありがたいです。
###該当のソースコード
cssファイルです。
*{ margin:0; padding:0; border:none; font-size:11px; font-family:Verdana,san-serif; color:#000000; line-height:1.6em; } br{line-height:normal;letter-spacing:normal;} img.p{border:1px solid #000;} textarea{border:1px solid #000;background-color:transparent;font-size:xx-small;color:#000;} input,option{border:1px solid #000;background-color:transparent;font-size:xx-small;color:#000;margin:1px;} a{text-decoration:none;} a:link,a:active,a:visited{color:#000;} a:hover{color:red;} p.text{padding:0;margin:0 10px 5px;text-align:left;} p.top{padding:0;margin:10px 30px 10px;} h1{ font-size:24pt; margin:5px 10px; text-align:center; color:#000000; } h2{margin:10px 5px;} h3{ margin:10px 20px; border-bottom:1px solid #000000; } div.title{ font-size:12px; margin:5px 10px 2px; border-bottom:1px solid #dddddd; } div.menu{padding:5px 10px;text-align:right;font-weight:bold;}
htmlファイルです。以下がトップページのファイルです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <title></title> <link rel="STYLESHEET" href="style.css" type="text/css"> </head> <body> <h3>||| last up</h3> <p class="top"> 88/88 サイトオープンみたいなサイトの更新情報を。<br> </p> <h3>||| about this site</h3> <p class="top"> ここにサイト説明をおきます。<br> <br> <br> ここに注意点を書きましょう。<br> <br> <br> *<br> 例えば管理人の情報とかとか。<br> <br> *<br> <br> *<br> 当サイトは全てのページで検索避け済み。的なことを書いてもいいかも<br> <br> <br> *<br> <br> メールフォームを置いてもいいかもしれません。<br> <br> <br> <br> <br> <br> </p> <div style="margin-top:1000px;"></div> </body> </html>
以下はページの半分に表示したい(これが反映されずにいます)メニューのhtmlファイルです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <title></title> <link rel="STYLESHEET" href="style.css" type="text/css"> <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = ""; } else { id.style.display = "none"; } window.event.cancelBubble = true; } // --> </script> </head> <base target="t"> <body> <h1>サイトネーム</h1> <div class="menu"> <a href=“pict.html”>pict</a><br> <a href=“mail.html”>mail</a><br> <a href="bkm.html">bookmark</a><br> <a href="index.html" target="_top">index</a><br> <br> <a href="main.html" target="_top">all reset</a> </div> <br> <p style="text-align:right;"> <span onclick="expand(chip2);" style="text-align:center;"> <img src="image.gif"><br> <br> </p> <div id="chip2" style="display:none;"> <p class="top"> <b>sitename </b>R/N<br> <b>url </b>example.com<br> </p> </div> </body> </html>
###試したこと
cssに間違いがないかの確認。しかし、全く解決していません・・
###補足情報(言語/FW/ツール等のバージョンなど)
使用しているブラウザはsafariです。
回答1件
あなたの回答
tips
プレビュー