教育・子育て

ホームページ制作の見直し①

マんタ's icon'
  • マんタ
  • 2020/06/11 07:12

今日はとりあえず少し見やすいようにページを整頓していきます。

というかなんか見にくいのでちょっと調整・・・・・

ちょっと時間がかかってしまいましたが・・・

こんかいは追加した部分だけ載せておきます

<div class="main">
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
javaスクリプトが入るところ
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
</div>
<div class="menu">
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
メニューリストが入る
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
<br>
<br>
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
動作や説明注文記入欄
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

</div>

こんな感じです

表示すると

Content image

今回変わった部分は上の方ｗｗｗ

よくみると青い太めの戦が入っていますｗｗｗ

また、それぞれ文字の上にマウスを持って行くとピンク色が付きますね。

これはCSS（スタイルシートで設定できます）

今回追加した部分がこちら

.main{
float:center
width:500px
}
.manu{
float:center
width:160px
}
.menu ul{
border-top:10px solid #003366;
border-left:1px solid #003366;
border-right:1px solid #003366;
border-bottom:1px solid #003366;
margin:0;
padding:0;
}
.menu li{
list-style-image:none;
list-style-type:none;
margin:0;
line-height:130%;
text-align:center
}
.menu a{
display:block;
width:100%;
color:#003366
}
.menu a:hover{
background-color:#ff00ff
}
.serect{
background-color:#ff00ff
}

他のページも見ていきます。

とその前に他のページにも先ほどと同じものを記入しておきます。

<div class="main">
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～




～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

</div>
<div class="menu">
<br>
<br>
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～


～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～>

 

Content image
Content image

ちょっと見ずらいのですが・・・・・

 

最後にtopページのプログラムを載せておくので良ければ参考にしてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<div class="main">
<script type="text/javascript"src="script3.js">
</script>
<h1 align="center">マんタの商店仮へようこそ。</h1>
</div>
<div class="menu">
<ul class="list-centered">
<br>
<br>

<li class="select"><a href="top.html" >TOP</a></li>
<li><a href="form.html">お茶注文</a></li>
<li><a href="sab.html">プライズ商品注文</a></li>
</ul>
<p><img src="image/表紙.jpg" alt="表紙"/></p>
</div>
<h1 onmouseover="window.status'訪問いただきありがとうございます'"><a id="pagetop" name="pagetop"></h1>
</head>
<body>
<div class="page">
<p class="logo"><a href="rent.html"></a><a href="mori.html"></a></p>

<script type="text/javascript">  
<!--
 function tojiru(){
  window.close();
  }
-->
</script>
<p><input type="button"value="閉じる"onclick="tojiru()"></p>
</div>
</body>
</html>

JavaScriptのプログラムも載せておきます

function ocha1(){
   document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
 function ocha2(){
   document.form1.sum2.value=300*document.form1.na2.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.yusou.value);
   }
 function ocha3(){
   document.form1.sum3.value=500*document.form1.na3.selectedIndex;
   document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
   document.form1.zei.value=parseInt(document.form1.gou.value)*0.1
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
 function kei4(){
   switch(document.form1.otodoke.selectedIndex){
    case 0:document.form1.sou.value=0;break;
    case 1:document.form1.sou.value=700;break;
    case 2:document.form1.sou.value=600;break;
    case 3:document.form1.sou.value=500;break;
    case 4:document.form1.sou.value=500;break;
    case 5:document.form1.sou.value=450;break;
    case 6:document.form1.sou.value=500;break;
    case 7:document.form1.sou.value=600;break;
    case 8:document.form1.sou.value=700;break;
    }
   document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
   }
  function check(){
 if(document.form1.shiharai[0].checked==false&&document.form1.shiharai[1].checked==false){
  alert("支払方法を選択してください。");
  return false;
  }  
 else if(document.form1.namae.value==""){
  alert("お名前を入力してください。");
  document.form1.namae.focus();
  return false;
  }
 else if(document.form1.yuubin.value==""){
  alert("郵便番号を入力してください。");
  document.form1.yuubin.focus();
  return false;
  }
 else if(document.form1.jusyo.value==""){
  alert("ご住所を入力してください。");
  document.form1.jusyo.focus();
  return false;
  }
 else if(document.form1.denwa.value==""){
  alert("電話番号を入力してください。");
  document.form1.denwa.focus();
  return false;
  }
 else if(document.form1.mail.value==""){
  alert("メールアドレスを入力してください。");
  document.form1.mail.focus();
  return false;
  }
 else{
  return true;
  }
 }
function kakunin(){
 if(confirm("入力した内容をクリアしますか?")==true){
  return true;
  }
 else{
  return false;
  }
 }

 

ここまでご覧いただきありがとうございました。

BYマんタ

 

JavaScript XHTMLCSS ホームページ topic-education-parenting
Article tip 0人がサポートしています
獲得ALIS: Article like 64.65 ALIS Article tip 0.00 ALIS
マんタ's icon'
  • マんタ
  • @25kit6
桜はあっという間に散っていった・・・ソロソロツバメが出てくるけどまだ小さすぎて撮影が…
投稿者の人気記事
コメントする
コメントする
こちらもおすすめ！
Eye catch
クリプト

「ハッシュ」とは何なのか、必ず理解させます

Like token Tip token
0.10 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
ビジネス

海外企業と契約するフリーランス広報になった経緯をセルフインタビューで明かす！

Like token Tip token
16.10 ALIS
Eye catch
他カテゴリ

テレビ番組で登録商標が「言えない」のか考察してみる

Like token Tip token
26.20 ALIS
Eye catch
他カテゴリ

BCAAは本当に必要なのか？徹底的調査

Like token Tip token
1.20 ALIS
Eye catch
教育・子育て

【科学（化学）】進化に必要だった猛毒のガス～酸素～

Like token Tip token
25.63 ALIS
Eye catch
他カテゴリ

オランダ人が語る大麻大国のオランダ

Like token Tip token
46.20 ALIS
Eye catch
クリプト

約２年間ブロックチェ－ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

続・NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
6.37 ALIS
Eye catch
トラベル

無料案内所という職業

Like token Tip token
84.20 ALIS
Eye catch
他カテゴリ

防犯意識 マーキング 下書き供養④

Like token Tip token
24.07 ALIS