手書きのホームページ

添付ファイルのように、手書きでホームページのデザイン
を行い、それをトップページにするには、index.htmlでどの
ようなHTMLを打てばいいでしょうか。

また、「書評」や「日記」などにカーソルを持って行ってクリ
ックすれば、それぞれのページに飛ぶようにする、つまり
ちょうどボタンを押すような感じでいい場所にリンクを貼る
方法もわかれば教えてください。

初歩的なHTMLは理解しております。

No.4 ベストアンサー 回答者： DrFell 回答日時： 2012/11/09 06:35

初歩的なｈｔｍｌでできるのは2つの方法。

●1つ目
図のようにリンクしたい部品の数だけイメージを別々に保存し、普通に画像にリンクを貼る方法。
リンクを貼らない場所は全体で1つの壁紙とする。

●2つ目
クリカップルマップ で1つの画像に座標指定でリンクを複数指定する方法
http://www.tagindex.com/html_tag/img/img_map.html
http://park16.wakwak.com/~html-css/map/map1.html

フリーの補助ソフトもあったと記憶していますが、古い補助ソフトが今時のOSで動くかは試してみないとなんともいえません。有料ならたぶんほとんどのオーサリングソフトにクリカップルマップ を視覚的に作成する機能が付いていると思います。

この回答へのお礼

紛らわしい質問にも関わらず、ありがとうございました。
ご紹介いただいたクリッカブルマップという手法が
ドンピシャでした。大変お世話になりました。

お礼日時：2012/11/09 12:30

No.10 回答者： ORUKA1951 回答日時： 2012/11/09 14:00

　No.5,No.6です。

　クリッカブメマップを使用しなくても、No.5のソースだけで、スタイルシート
だけでできます。
　スタイルシートで行う方法だと、検索エンジンに対しても的確に内容を伝えら
れますし、後から画像を差し替えた場合もHTML--を書き直さなく ても良いです。

No.9 回答者： taloo 回答日時： 2012/11/09 11:29

書かれている文字をそのままキーボードでタイプすれば良いです。

<style>
ul{width: 618px;}
li {list-style-type: none;float: left; width: 200px; border: 1px solid black; margin: 2px; text-align: center;}
</style>

<h1>全部手書きのHP</h1>
<ul>
<li><a href="nikki.html">日記</a></li>
<li><a href="shohyou.html">書評</a></li>
<li><a href="page3.html">　　</a></li>
<li><a href="zakki.html">雑記</a></li>
<li><a href="event.html">イベント</a></li>
<li><a href="page6.html">　　</a></li>
<li><a href="page7.html">　　</a></li>
<li><a href="page8.html">　　</a></li>
<li><a href="page9.html">　　</a></li>
</ul>


>初歩的なHTMLは理解しております。
理解できてるなら、質問する必要はないのではないですか？

そういう意味ではなくて、
画像をそのまま表示したいのであれば、手書きした紙をスキャナでスキャンして、パソコンに取り込んでください。
それを<img>で指定すれば良いです。

No.8 回答者： tsubuyuki 回答日時： 2012/11/09 09:30

http://park16.wakwak.com/~html-css/map/map1.html


クリッカブルマップによるリンクの貼り方です。

１枚絵でもできますし、組み合わせてもＯＫです。

この回答へのお礼

ありがとうございました。
いただいた方法でバッチリでしたが、
No.4の方が早かったのでそちらを
ベストアンサーとさせていただきます。

お世話になりました。

お礼日時：2012/11/09 12:34

No.7 回答者： CalmTrip 回答日時： 2012/11/09 09:13

　手書き＜例: 世界地図--添付＞の、各Area＜Asia、Europe等＞ クリックで、Jumpする 例です。

<AREA shape="～～は、下記「画像内に複数リンクを設定する」を参照ください。
http://www.tagindex.com/html_tag/img/img_map.html


<IMG src="map_world.jpg" border="0" width="480" height="231" usemap="#world">
<MAP name="world">
<AREA shape="rect" coords="1,8 289,70" href="#1eu" alt="ヨーロッパ>
<AREA shape="rect" coords="6,68 86,96" href="#1eu" alt="ヨーロッパ">
<AREA shape="rect" coords="293,16 457,127" href="#2na" alt="北米・中米">
<AREA shape="rect" coords="401,137 475,229" href="#3sa" alt="南米">
<AREA shape="rect" coords="1,99 80,131" href="#4af" alt="アフリカ">
<AREA shape="rect" coords="4,133 98,197" href="#4af" alt="アフリカ">
<AREA shape="rect" coords="206,141 240,159" href="#5oc" alt="オセアニア">
<AREA shape="rect" coords="179,162 273,218" href="#5oc" alt="オセアニア">
<AREA shape="rect" coords="89,73 205,125" href="#6as" alt="アジア">
<AREA shape="rect" coords="129,125 203,158" href="#6as" alt="アジア">
<AREA shape="rect" coords="203,75 230,105" href="#7jp" alt="日本">
<AREA shape="default" nohref>
</MAP>

この回答へのお礼

ありがとうございました。
ご紹介いただいた方法がズバリでしたが、
No.4の方が早かったのでそちらをベスト
アンサーとさせていただきます。

お世話になりました。

お礼日時：2012/11/09 12:32

No.6 回答者： ORUKA1951 回答日時： 2012/11/09 08:53

確認です。

手書とは
・テキストエディタで作成する--ウェブページでは普通こちらの意味---
・画像は筆書きのイラストを用意する
のどちらでしょう。質問からは汲み取れなかったのですが・・・

No.5 回答者： ORUKA1951 回答日時： 2012/11/09 08:26

　テキストエディタで作成できるということは、Webオーサリングツールを使いこなすためにも必須です。

ツールを使えば知らなくても良いというわけではまったくありません。それどころか、逆です。

HTML自体は、
<div class="nav" id="siteMap">
　<ul>
　　<li><a href="./diary">日記</a></li>
　　<li><a href="./bookReview">書評</a>
　　　<ol><-- 必要なら -->
　　　　<li><a href="./bookReview/book1">本1</a></li>
　　　　<li><a href="./bookReview/book2">本2</a></li>
　　　　<li><a href="./bookReview/book3">本3</a></li>
　　　</ol>
　　</li>
　　<li><a href="./newBooks">新刊情報</a></li>
　　<li><a href="./notebook">雑記帳</a></li>
　　<li><a href="./profile">自己紹介</a></li>
　　<li><a href="./contact">コンタクト</a></li>
　</ul>
<div>
だけでよいです。誰が見ても--あなたが十年後に見ても修正できる。HTMLには文書構造しか書いてはならない。
　書いてないから、「ボタンを押すような感じでいい場所にリンクを貼る」ことも、「横に並べてプルダウン」も、「縦に並べてポインターが乗れば説明を右に表示すること」など、もっと賑やかなデザインにすることも自由に出来るのです。オーサリングツールではとても難しいでしょう。

　今日は今から出張なので、帰ってきてからいくつかサンプルを・・・

この回答へのお礼

ご丁寧に有難うございました。

私の質問の主旨が紛らわしかったようで
申し訳ございません。「手書きのイラストに複数の
リンクを貼る」の意味で、いくつかのご回答いただ
いた中のクリッカブルマップという機能が使える
ようです。

お世話になりました。

お礼日時：2012/11/09 12:27

No.3 回答者： e_16 回答日時： 2012/11/09 02:22

初歩的なhtmlを理解してるんだったらテーブルの中に各項目のリンクを入れればいいだけですが？

これが理解できないんだったら、ホームページビルダーなどのソフトを使いましょう。

No.2 回答者： lbn0915 回答日時： 2012/11/09 00:20

全部一枚絵の画像にして、イメージマップを使えば良いんじゃないでしょうか？

初歩的なHTMLなので、詳細は省略いたします。

No.1 回答者： te2kun 回答日時： 2012/11/08 23:23

完全な手書きなら、それぞれを画像として扱い、その画像をクリックしたら、次のページに飛ぶようにしたらよいでしょう

手書き風フォントでよければ、そのフォントを使いページを作成すればよいでしょう

初歩的な知識があれば出来るものですから、タグは省略します

この回答への補足

早速、有難うございました。

手書き風フォントではなく完全な手書きで考えています。

少し言葉が足りなかったんですが、やはり完全な一枚紙で
描くのではなく、タイトルやボタンごとに、それぞれ
画像を描いて、組み合わせていくしかないでしょうか？

補足日時：2012/11/08 23:46