教育・子育て

ホームページ仮③　TOPページとリンク

マんタ
2020/06/08 04:41

ハイｗ

本日はホームページ仮のTOPページとリンクを作れるところまで作っていこうと思います。

前のリンク関係の記事もちょこっと修正したので良かったらご覧ください

あくまで仮なので・・・・・・・・・・・・・・・・・・・・・・・

HTML/XMLとJavaScript

1ページ目　アクマデ作りかけ・・・

Content image

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;script type="text/javascript"src="script2.js"&gt;
&lt;/script&gt;
&lt;h1&gt;マんタの商店仮へようこそ。&lt;/h1&gt;
&lt;script type="text/javascript"&gt;
 &lt;!--
  window.status="訪問いただきありがとうございます";
 --&gt;
&lt;/script&gt;

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

&lt;div class="page"&gt;
&lt;p class="logo"&gt;&lt;a href="rent.html"&gt;&lt;/a&gt;&lt;a href="mori.html"&gt;&lt;/a&gt;&lt;/p&gt;

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

おなじく2ページ目

Content image

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;script type="text/javascript"src="script2.js"&gt;
&lt;/script&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="top.html"&gt;TOP&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="form.html"&gt;お茶注文&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="sab.html"&gt;プライズ商品注文&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;title&gt;おちゃ～～～注文書&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="mein"&gt;
&lt;noscript&gt;
&lt;p&gt;お茶一覧&lt;/p&gt;  
&lt;/noscript&gt;
&lt;form name="form1"onsubmit="return check()" onreset="return kakunin()"&gt;
&lt;table border="1" summary="数量"&gt;
&lt;caption&gt;お茶&lt;/caption&gt;
&lt;p&gt;&lt;img src="image/御茶.jpg " alt="御茶"/&gt;&lt;/p&gt;
&lt;tr&gt;
&lt;th&gt;ナンバー&lt;/th&gt;
&lt;th&gt;商品名&lt;/th&gt;
&lt;th&gt;単価&lt;/th&gt;
&lt;th&gt;数量&lt;/th&gt;
&lt;th&gt;小計&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="right"&gt;01&lt;/td&gt;
&lt;td&gt;ほうじ茶&lt;/td&gt;
&lt;td class="right"&gt;1000円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="na1" onchange="ocha1()"&gt;
&lt;option value="Hou0"selected&gt;0&lt;/option&gt;
&lt;option value="Hou1"&gt;1&lt;/option&gt;
&lt;option value="Hou2"&gt;2&lt;/option&gt;
&lt;option value="Hou3"&gt;3&lt;/option&gt;
&lt;option value="Hou1"&gt;4&lt;/option&gt;
&lt;option value="Hou2"&gt;5&lt;/option&gt;
&lt;option value="Hou3"&gt;6&lt;/option&gt;
&lt;option value="Hou1"&gt;7&lt;/option&gt;
&lt;option value="Hou2"&gt;8&lt;/option&gt;
&lt;option value="Hou3"&gt;9&lt;/option&gt;
&lt;option value="Hou4"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum1"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="right"&gt;02&lt;/td&gt;
&lt;td&gt;麦茶&lt;/td&gt;
&lt;td class="right"&gt;300円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="na2" onchange="ocha2()"&gt;
&lt;option value="m0"selected&gt;0&lt;/option&gt;
&lt;option value="m1"&gt;1&lt;/option&gt;
&lt;option value="m2"&gt;2&lt;/option&gt;
&lt;option value="m3"&gt;3&lt;/option&gt;
&lt;option value="m4"&gt;4&lt;/option&gt;
&lt;option value="m5"&gt;5&lt;/option&gt;
&lt;option value="m6"&gt;6&lt;/option&gt;
&lt;option value="m7"&gt;7&lt;/option&gt;
&lt;option value="m8"&gt;8&lt;/option&gt;
&lt;option value="m9"&gt;9&lt;/option&gt;
&lt;option value="m10"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum2"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="right"&gt;03&lt;/td&gt;
&lt;td&gt;ジャスミン茶&lt;/td&gt;
&lt;td class="right"&gt;500円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="na3" onchange="ocha3()"&gt;
&lt;option value="jas0"selected&gt;0&lt;/option&gt;
&lt;option value="jas1"&gt;1&lt;/option&gt;
&lt;option value="jas2"&gt;2&lt;/option&gt;
&lt;option value="jas3"&gt;3&lt;/option&gt;
&lt;option value="jas4"&gt;4&lt;/option&gt;
&lt;option value="jas5"&gt;5&lt;/option&gt;
&lt;option value="jas6"&gt;6&lt;/option&gt;
&lt;option value="jas7"&gt;7&lt;/option&gt;
&lt;option value="jas8"&gt;8&lt;/option&gt;
&lt;option value="jas9"&gt;9&lt;/option&gt;
&lt;option value="jas10"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum3"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;合計&lt;/th&gt;
&lt;td class="right"&gt;&lt;input name="gou" type="text" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;税(10%)&lt;/th&gt;
&lt;td class="right"&gt;&lt;input name="zei" type="text" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="2" class="right"&gt;届け先&lt;/th&gt;
&lt;td class="right"&gt;&lt;select name="otodoke" onchange="kei4()"&gt;
&lt;option value="sentaku"&gt;地域選択&lt;/option&gt;
&lt;option value="hokkaidou"&gt;北海道&lt;/option&gt;
&lt;option value="touhoku"&gt;東北&lt;/option&gt;
&lt;option value="kantou"&gt;関東&lt;/option&gt;
&lt;option value="chuubu"&gt;中部&lt;/option&gt;
&lt;option value="kansai"&gt;関西&lt;/option&gt;
&lt;option value="chuugoku"&gt;中国&lt;/option&gt;
&lt;option value="shikoku"&gt;四国&lt;/option&gt;
&lt;option value="kyuusyu"&gt;九州&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;th class="right"&gt;送料&lt;/th&gt;
&lt;td class="right"&gt;&lt;input type="text" name="sou" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;総合計&lt;/th&gt;
&lt;td class="right"&gt;&lt;input type="text" name="All" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;お客様情報入力欄。&lt;/p&gt;
&lt;table summary="お客様情報入力欄"&gt;
&lt;tr&gt;
&lt;th class="left"&gt;支払方法(必須デス)&lt;/th&gt;
&lt;td&gt;
&lt;label for="dai"&gt;&lt;input id="dai" type="radio" name="shiharai" value="daibiki"&gt;代金引換&lt;/label&gt;
&lt;label for="gin"&gt;&lt;input id="gin" type="radio" name="shiharai" value="furikomi"&gt;銀行振込&lt;/label&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;お名前(必須デス)&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="namae" size="40" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;郵便番号(必須デス)&lt;/th&gt;
&lt;td&gt;(例:604-8225)&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;半角で入力
〒&lt;input type="text" name="yuubin" size="10" maxlength="8" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;ご住所(必須デス)&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="jusyo" size="60" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;電話番号(必須デス)&lt;/th&gt;
&lt;td&gt;(例:012-345-6789)半角で入力
&lt;input type="text" name="denwa" size="20" maxlength="13" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;メールアドレス&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="mail" size="40" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;備考&lt;/th&gt;
&lt;td&gt;&lt;textarea name="memo" cols="50" rows="5"&gt;ご意見ご要望をご記入ください。&lt;/textarea&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;入力漏れ・入力ミス確認!!!!「注文」ボタンをクリックしてください。&lt;/p&gt;
&lt;p&gt;&lt;input type="submit" value="注文"&gt;&lt;input type="reset" value="リセット"&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

そして、3ページ目

Content image

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;
&lt;script type="text/javascript"src="script3.js"&gt;
&lt;/script&gt;

&lt;h1&gt;マ　んタの  商店　ホーム　（仮）3ページめ！！！ &gt; &lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="top.html"&gt;TOP&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="form.html"&gt;お茶注文&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="sab.html"&gt;プライズ商品注文&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;title&gt;プライズ景品～～～注文書（仮）&lt;/title&gt;

&lt;p&gt;&lt;strong&gt;あくまでこれはサンプルなので注文できませんｗｗｗ&lt;/strong&gt;&lt;/p&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="mein"&gt;
&lt;noscript&gt;
&lt;p&gt;プライズ景品一覧&lt;/p&gt;  
&lt;/noscript&gt;
&lt;form name="form1"onsubmit="return check()" onreset="return kakunin()"&gt;
&lt;table border="1"align="center" summary="数量"&gt;
&lt;caption&gt;プライズ景品&lt;/caption&gt;
&lt;p&gt;&lt;img src="image/商品1.jpg " alt="商品1"/&gt;&lt;/p&gt;
&lt;tr&gt;
&lt;th&gt;ナンバー&lt;/th&gt;
&lt;th&gt;商品名&lt;/th&gt;
&lt;th&gt;単価&lt;/th&gt;
&lt;th&gt;数量&lt;/th&gt;
&lt;th&gt;小計&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="right"&gt;01&lt;/th&gt;
&lt;td&gt;ラブライブサンシャイン国木田花丸EXQフィギア&lt;/td&gt;
&lt;td class="right"&gt;2000円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="kai1" onchange="fu1()"&gt;
&lt;option value="k0"selected&gt;0&lt;/option&gt;
&lt;option value="k1"&gt;1&lt;/option&gt;
&lt;option value="k4"&gt;2&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum1"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="right"&gt;02&lt;/th&gt;
&lt;td&gt;ラブライブサンシャイン黒澤ルビィEXQフィギア&lt;/td&gt;
&lt;td class="right"&gt;1500円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="kai2" onchange="fu2()"&gt;
&lt;option value="ku0"selected&gt;0&lt;/option&gt;
&lt;option value="ku1"&gt;1&lt;/option&gt;
&lt;option value="ku2"&gt;2&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum2"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="right"&gt;03&lt;/th&gt;
&lt;td&gt;転スラEXQフィギア　リムルテンペスト&lt;/td&gt;
&lt;td class="right"&gt;100円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="kai3" onchange="fu3()"&gt;
&lt;option value="re0"selected&gt;0&lt;/option&gt;
&lt;option value="re1"&gt;1&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum3"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="right"&gt;04&lt;/th&gt;
&lt;td&gt;缶バッチランダム袋&lt;/td&gt;
&lt;td class="right"&gt;300円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="kai4" onchange="fu4()"&gt;
&lt;option value="kan0"selected&gt;0&lt;/option&gt;
&lt;option value="kan1"&gt;1&lt;/option&gt;
&lt;option value="kan2"&gt;2&lt;/option&gt;
&lt;option value="kan3"&gt;3&lt;/option&gt;
&lt;option value="kan4"&gt;4&lt;/option&gt;
&lt;option value="kan5"&gt;5&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum4"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;th class="right"&gt;05&lt;/th&gt;
&lt;td&gt;懐中時計缶ランダム&lt;/td&gt;
&lt;td class="right"&gt;1000円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="kai5" onchange="fu5()"&gt;
&lt;option value="jas0"selected&gt;0&lt;/option&gt;
&lt;option value="jas1"&gt;1&lt;/option&gt;
&lt;option value="jas1"&gt;2&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum5"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;th class="right"&gt;06&lt;/th&gt;
&lt;td&gt;ヌイグルミセット&lt;/td&gt;
&lt;td class="right"&gt;3000円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="kai6" onchange="fu6()"&gt;
&lt;option value="jas0"selected&gt;0&lt;/option&gt;
&lt;option value="jas1"&gt;1&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum6"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;合計&lt;/th&gt;
&lt;td class="right"&gt;&lt;input name="gou" type="text" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;税(10%)&lt;/th&gt;
&lt;td class="right"&gt;&lt;input name="zei" type="text" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="2" class="right"&gt;届け先&lt;/th&gt;
&lt;td class="right"&gt;&lt;select name="otodoke" onchange="kei4()"&gt;
&lt;option value="sentaku"&gt;地域選択&lt;/option&gt;
&lt;option value="hokkaidou"&gt;北海道&lt;/option&gt;
&lt;option value="touhoku"&gt;東北&lt;/option&gt;
&lt;option value="kantou"&gt;関東&lt;/option&gt;
&lt;option value="chuubu"&gt;中部&lt;/option&gt;
&lt;option value="kansai"&gt;関西&lt;/option&gt;
&lt;option value="chuugoku"&gt;中国&lt;/option&gt;
&lt;option value="shikoku"&gt;四国&lt;/option&gt;
&lt;option value="kyuusyu"&gt;九州&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;th class="right"&gt;送料&lt;/th&gt;
&lt;td class="right"&gt;&lt;input type="text" name="sou" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;総合計&lt;/th&gt;
&lt;td class="right"&gt;&lt;input type="text" name="All" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;お客様情報入力欄。&lt;/p&gt;
&lt;table summary="お客様情報入力欄"align="center"&gt;
&lt;tr&gt;
&lt;th class="left"&gt;支払方法(必須デス)&lt;/th&gt;
&lt;td&gt;
&lt;label for="dai"&gt;&lt;input id="dai" type="radio" name="shiharai" value="daibiki"&gt;代金引換&lt;/label&gt;
&lt;label for="gin"&gt;&lt;input id="gin" type="radio" name="shiharai" value="furikomi"&gt;銀行振込&lt;/label&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;お名前(必須デス)&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="namae" size="40" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;郵便番号(必須デス)&lt;/th&gt;
&lt;td&gt;(例:604-8225)半角で入力
〒&lt;input type="text" name="yuubin" size="10" maxlength="8" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;ご住所(必須デス)&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="jusyo" size="60" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;電話番号(必須デス)&lt;/th&gt;
&lt;td&gt;(例:012-345-6789)半角で入力
&lt;input type="text" name="denwa" size="20" maxlength="13" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;メールアドレス&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="mail" size="40" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;備考&lt;/th&gt;
&lt;td&gt;&lt;textarea name="memo" cols="50" rows="5"&gt;ご意見ご要望をご記入ください。&lt;/textarea&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;入力漏れ・入力ミス確認!!!!「注文」ボタンをクリックしてください。&lt;/p&gt;
&lt;p&gt;&lt;input type="submit" value="注文"&gt;&lt;input type="reset" value="リセット"&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

ん～～～

出来ればこんな感じのホームページを作りたいのですが商標権とか販売士の資格がないのでちょっと考え中（　＾ω＾）・・・

表示するとこんな感じ

で、最後にスタイルシートのプログラムを（CSS)載せておきます。

ホームページのデザインを決めるプログラムですｗｗｗ

h1{
color:#333333;
font-weight:bold;
font-size:200%;
text-align:center
}
h2{
color:blue;
font-weight:bold;
font-size:10%;
text-align:center
}
address{
color:#003366;
font-weight:bold;
font-size:20%;
text-align:right;
border-top:5px solid #003366;
clear:both;
}
p{
font-size:150%;
line-hight:20%;
text-align:center
}
strong{
font-size:150%;
line-hight:20%;
text-align:center
}
body{
margin:0;
padding:0;
background-repeat: repeat-x;
background-attachment: fixed;
background-position: right bottom
color:#333333;
}
.logo{
background-color:#003366;
margin:0;
}
.page{
width:70px;
}
.photo{
float:right;
margin-left:1px;
}
.top{
clear:both;
text-align:right;
}
ul li{
list-style-image:url(../image/list.gif);
font-weight:bold;
font-size:120%;
margin-left:10px;
margin-bottom:10px;
}
.list-centered {
 text-align: center;
}
.list-centered li {
 display: inline-block;
}table{
background-color:collapse;
boder:1px solid #003366;
width:650px;
font-size:90%;
}
th{
background-color:#ccccff;
font-size:110%;
boder:1px solid #003366;
padding:20px
}
td{
boder:1px solid #003366;
font-size:110%;
width:20px;
padding:10px
}

.rowitem{
background-color:#ccccff;
}
caption{
font-weight:bold;
}
.point a:link{
color:#336699;
}
.point a:visited{
color:#666666;
}
.point a:hover{
color:#cc6699;
}
a img{
border:0;
}

Content image

TOPをクリックするとTOPに

お茶注文をクリックするとお茶注文ページに

プライズ商品注文をクリックするとプライズ商品注文ページにとぶわけです。

3つの中でそれぞれのページにとべます。

まだまだ作成途中ですが…

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

BYマんタ

ホームページ仮 JavaScript HTML CSS topic-education-parenting

1人がサポートしています

獲得ALIS:

280.20 ALIS

2.00 ALIS

マんタ
@25kit6

桜はあっという間に散っていった・・・ソロソロツバメが出てくるけどまだ小さすぎて撮影が…

投稿者の人気記事

雨が辛いｗｗｗ

Like token

Tip token

今度はチョコレート味ｗｗｗ

Like token

Tip token

川沿いの　お散歩・・・

Like token

Tip token

コメントする

コメントする

こちらもおすすめ！

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

676.97 ALIS 120.79 ALIS

他カテゴリ

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

66.13 ALIS 46.20 ALIS

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

144.63 ALIS 159.32 ALIS

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

780.31 ALIS 947.13 ALIS

Eye catch

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

1.08k ALIS 61.20 ALIS

教育・子育て

【科学】アリストテレスにデカルトにニュートンに…みな光に取り憑かれた～光学の発展～

141.70 ALIS 22.75 ALIS

他カテゴリ

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

133.78 ALIS 24.07 ALIS

他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの？『柔道編』　【元警察官が本音で回答】

827.50 ALIS 114.82 ALIS

他カテゴリ

ALISのシステム概観

0.00 ALIS 5.00 ALIS

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

217.65 ALIS 6.37 ALIS

スーパーコンピュータ「京」でマイニングしたら

1.28k ALIS 1.06k ALIS

他カテゴリ

機械学習を体験してみよう！（難易度低）

447.19 ALIS 69.82 ALIS