手書きのホームページ

質問

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

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

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

回答No.4

DrFell · ベストアンサー

初歩的なｈｔｍｌでできるのは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で動くかは試してみないとなんともいえません。有料ならたぶんほとんどのオーサリングソフトにクリカップルマップ を視覚的に作成する機能が付いていると思います。

お礼

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

回答No.10

ORUKA1951

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

回答No.9

神崎 渉瑠（@taloo）

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

<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

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

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

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

お礼

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

お世話になりました。

回答No.7

Calm Trip（@CalmTrip）

手書き＜例: 世界地図--添付＞の、各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の方が早かったのでそちらをベスト
アンサーとさせていただきます。

お世話になりました。

回答No.6

ORUKA1951

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

回答No.5

ORUKA1951

テキストエディタで作成できるということは、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には文書構造しか書いてはならない。
　書いてないから、「ボタンを押すような感じでいい場所にリンクを貼る」ことも、「横に並べてプルダウン」も、「縦に並べてポインターが乗れば説明を右に表示すること」など、もっと賑やかなデザインにすることも自由に出来るのです。オーサリングツールではとても難しいでしょう。

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

お礼

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

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

お世話になりました。

回答No.3

e_16

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

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

回答No.2

noname#214300

全部一枚絵の画像にして、イメージマップを使えば良いんじゃないでしょうか？
初歩的なHTMLなので、詳細は省略いたします。

回答No.1

te2kun

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

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

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

補足

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

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

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