マックで作った画像をJ-phoneでアニメーションさせたい、と調べたところ、どうもHTMLが書けないと無理みたいなんですが、そもそもHTMLがなにかってこともわかりません。ちなみに一応アントラージュでHTML書式を選んで、公式サイトにあったとおりに書いて画像をてん付してみたり、人のアニメーションのソースを書き換えてみたりしてみたんですが、HTMLと画像がそのまま表示されてしまいました…。
たぶん根本的なところがまちがっているせいだと思うので、このさい勉強しようと思うのですが、こんなド素人にでもわかりやすいHTML入門のおすすめテキスト、サイトなどありましたら教えてください。よろしくお願いします。(用語などで意味不明のところがあったらすみません)

このQ&Aに関連する最新のQ&A

A 回答 (4件)

HTML鳩丸倶楽部


http://www.ne.jp/asahi/minazuki/bakera/html/hato …
仕様書に沿ったリファレンスや本格的に勉強するには避けて通れないSGMLのに関するリソースが若干あります。

初めてのWebドキュメント作り
http://www.asahi-net.or.jp/%7Esd5a-ucd/www/
初心者がHTMLに対して正確な知識を貯蓄していくには最適だと思われる解説があります。

HTML 4.01 Specification(ja)
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
「初めてのWebドキュメント作り」の作者の方が代表でHTML4.01の仕様書を翻訳したものです。

HTML 4.01 Specification
http://www.w3.org/TR/1999/REC-html401-19991224/
HTML4.01の正式な仕様書です。英語。

とほほのWWW入門
http://wakusei.cplaza.ne.jp/twn/
正しいHTMLの解説に関しては若干怪しい部分もありますが、わかりやすさでは一番人気があるのかもしれません。
    • good
    • 0
この回答へのお礼

アドバイスありがとうございました。基本から、上級にいたるまでの、正確なHTMLを勉強するために役立ちそうなところを広く教えていただいて、とても助かりました。とくに「初めてのWebドキュメント作り」は、たいへんシンプルで分かりやすく、かつ的確で、初心者に最適ですね(これが家族用に作られたものとは…!)。教えていただかなかったら、たぶんここは見つけられなかったと思います。他の方たちに教えていただいたところなどでなんとなく輪郭がつかめてきたところで見たので、すっと理解できたというのはあると思いますが、ここを見ながら初めてWeb文書を作ってみました。タイトルが表示できただけなんですが、うれしくてしばらくながめてました。これは本当にはまってしまいそうです(笑)。本当にありがとうございました。あと、お礼が遅くなって本当にすみませんでした。

お礼日時:2001/04/14 00:41

こんにちは。


私がHTMLの『H』も知らない、超々初心者だったころ、初めに勉強させて頂いたサイトが、参考URLのサイトさんです。
一度覗いてみられてください♪
後、同じような質問で、どなたかが回答していらっしゃったところも、覗いてみたらすごく良かったので、トップの検索から探してみてください(すみません、サイト名を忘れてしまいました…)。

慣れればすごく楽しいので、頑張ってくださいね!

参考URL:http://www.geocities.co.jp/SiliconValley-SanJose …
    • good
    • 0
この回答へのお礼

アドバイスありがとうございます。どうも検索のしかたが悪かったみたいで、他に似た質問がすでにされていたとはしりませんでした。それなのに答えていただいて恐縮です…。教えていただいたサイトにさっそく行ってみたところ、ほんとにほんとに初心者にやさしいサイトでうれしかったです。じつは、HTMLってホームページを作るときに使うものなの?!などと驚いたくらいのビギナーなのです。おはずかしい(^^;
あたたかいはげましありがとうございます。すいすいかけるようになるまでがんばります!

お礼日時:2001/04/05 23:59

HTMLははまると面白いですからがんばってください!


私がいつも手元に置いておく書籍をひとつ。
アンク著の「HTMLタグ辞典」という本が翔泳社から1,500円で発売されています。
オールカラーで見やすいし、用途別にインデックスがついているので気になることをサッと引けます。重宝してますよ。(真っ青なインパクトのある表紙で本当に辞典サイズです)
また姉妹品で同著から「StyleSheet辞典」というものも発売されています。(これは真っ赤)HTMLを学んで更なるレベルアップをはかりたくなったらこれをどうぞ。
(参考URLはHTML参考本のリストです)

参考URL:http://www.dicre.com/soft/htmlbooks.html
    • good
    • 0
この回答へのお礼

具体的な情報ありがとうございます。近々、コンピューター関係の本を揃えている書店に行くつもりですので、おすすめの辞典さがしてみます。とてもよさそうな本ですね(お値段も手頃でうれしい)。参考本のリストもありがとうございました。目的を達するついでにおぼえておこうかな、くらいの気持ちだったんですが、はまると面白い、と言われると燃えちゃいますね(笑)。おすすめいただいた赤い辞典の方に行けるようがんばります。ありがとうございました。

お礼日時:2001/04/06 00:08

とりあえず定番中の定番、「とほほのWWW入門」をご紹介します。

(参考URL)
最近はここより人気のあるHTML入門サイトも増えてきたようですが、私が覚えたのがここだったもので…。
あとテキストはそれこそ星の数ほど出ていますので、お近くの書店でぱらぱらとめくってみて、取っつきやすい手頃なのを求められるのが良いですよ。
ここで具体的な書名を紹介しても、必ず手にはいるとは限らないので。

参考URL:http://wakusei.cplaza.ne.jp/twn/www.htm
    • good
    • 0
この回答へのお礼

アドバイスありがとうございます。おすすめいただいたサイトにさっそく行ってみました。
大変しっかりしたサイトですごく勉強になりました。コンピューターは以前から使っていたのですが、専門用語はあまりわからず、特にネットを始めたのが最近で、ネット関係の用語がさっぱりわからないまま過ごしていたので、HTML以外でも、そうだったのか!と納得することが多くて助かりました。この世界も奥が深いんですね。このサイトはこれからも役にたってくれそうでうれしいです。どうもありがとうございました。

お礼日時:2001/04/06 00:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q【AMP HTML】AMP HTMLってなんですか?HTML 4.0、4.1→HTML 5→AM

【AMP HTML】AMP HTMLってなんですか?

HTML 4.0、4.1→HTML 5→AMP HTML??

Aベストアンサー

AMP HTML(AMP(Accelerated Mobile Pages) HTML)とは、Googleがモバイル端末でのブラウザの表示速度を高速化する為に作成したHTML仕様です。
https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html
スマホやタブレット等のモバイル端末用のウェブサイトはリッチになりましたが、その分重く、表示に時間がかかるようになった事から高速表示が可能なAMP HTMLを作成しました。

Qhtml初心者です。画像サイズについて。 テーブルの中に、文字と、画像リンクを貼っているのですが画像

html初心者です。画像サイズについて。
テーブルの中に、文字と、画像リンクを貼っているのですが画像と文字がズレます!泣
画像というより、文字が下にずれます。

文字<a href=”リンク先”><IMG src=”画像URL” width=”30” height=”40” border=”0”>

3×3のテーブルの中に、上記のコードが9つあります。画像アイコンは2種類で、もう一つは
width=”25” height=”20” border=”0”>です。
アイコンの横と幅が二つそれぞれ違うのでズレてるようです。しかし双方を同じくらいのサイズにしようとするとこうなります。ちなみにフリー素材を拾ってきました。
同じサイズにするにはどうすれば…
ペイントでピクセル値をいじっても、元のサイズが双方違うから結局一緒ですよね?
元が同じサイズの画像をとるしかないでしょうか?

Aベストアンサー

単純にスタイルシートで指定すればよい
img[src=”画像URL”]{height:80px;width:auto;}
位置は、position:relative:top:5px;とかで好きに変えればよい。

そもそも、tableを使って配置するのは問題ですが、それはおいておいて・・

alignなんて16年前から非推奨の代表ですから、そんなもの使わない。

Qhtml5で画像が好きなところにはれません

html5で画像が好きなところにはれません
ワイド ハイトはで左づめになるのはできるのですが
問題のタグ
<body>
<img src="画像url" usemap="#画像url">
<map name="画像url">
<area shape="rect" coords="0,0,500,500"
href="画像" alt="画像">
</map>
</body>

Aベストアンサー

あせりすぎです。
まず、わかりやすいHTML4.01strictを徹底的に身につけましょう。HTML4.01では基本的にブロック要素と行内要素しかありませんが、HTML5では
メタデータ・コンテンツ
フロー・コンテンツ
セクショニング・コンテンツ
ヘッディング・コンテンツ
フレージング・コンテンツ
エンベッディッド・コンテンツ
インタラクティブ・コンテンツ
と分けて考えます。それぞれがどのコンテンツに含まれるかがきちんと決まっています。

 HTML4.01でも
<body>
<img src="画像url" usemap="#画像url">
<map name="画像url">
<area shape="rect" coords="0,0,500,500"
href="画像" alt="画像">
</map>
</body>
この様な書き方は認められていません。
 IMG要素は行内要素ですから、bodyには含むことができません。
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
 と書かれています(7.5.1 BODY要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-BODY )
 これは、
BLOCKは、要素であり、開始タグも終了タグも省略できる(0 0)が、ブロック要素%blockとスクリプト(script)をひとつ以上(+) INSとDEL要素を含むことができる--文書の本文を示す
 と読みます。

MAP要素については、
→13.6.1 クライアント側イメージマップ: MAP要素とAREA要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#edef-MAP )
を参照。
 ブロック要素には、
P
%heading; h1~h6 、%list;  ul,ol 、%preformatted 、DL 、
DIV 、NOSCRIPT 、BLOCKQUOTE 、FORM 、HR 、TABLE 、FIELDSET
ADDRESS
要素があります。

よって、HTML5であっても最低限・・

<body>
  <p><img src="画像url" usemap="#画像url"></p>
  <p>
   <map name="画像url">
    <area shape="rect" coords="0,0,500,500" href="画像" alt="画像">
   </map>
  </p>
</body>
 でなければなりません。

 その後、それぞれのブロック要素について配置をしていきます。スタイルシートで行内要素とブロック要素は変更できますが、そのためにはHTMLをちゃんと書いておかなければなりません。

★HTML4.01strictを身につけていれば、HTML5だろうと
 HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff )
 を読むだけで理解できるでしょう。

 いずれにしてもHTMLは文書構造をマークアップするもので、プレゼンテーション--デザインのためのものではありません。そのもっとも基本的な部分を、しっかりおさらいをしてください。それからでも遅くない---というか、そのほうがはるかに早く上達できるでしょう。
注) HTML4.01にも色々ありますが、あくまでここで言うものはHTML4.01strictです。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』

とにかくHTML4.01strictをしっかり身につけること。書いたらvaidatorでチェックしては指摘されたところを直す・・その繰り返しです。
★Another HTML Lint ( http://www.htmllint.net/ )
 でHTML4.01strictで作成チェックすること・・・

 下記サンプルはHTML5+CSS3ですが、未対応のブラウザが多いので現状はHTML4.01で作成する必要があります。そのときは、HTML5の新しい要素はdivにclass名をつけます。
<header>→<div class="header">

[例] タブは_に置換してありますから戻すこと。
<!doctype html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<style media="screen">
<!--
section figure{position:relative;}
section>figure.main img{
_display:block;
_width:40%;
_height:auto;
_margin:0 auto;
_border-radius:20px;
_box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>本文見出し</h2>
__<p>画像を横幅の40%幅(縦横比変更なし)で中央に角丸影つきで配置する。</p>
__<figure class="main">
___<img src="[url]" width="480" height="360" alt="">
__</figure>
_</section>
_<section>
__<h2>A smaller heading</h2>
__<p>
__</p>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>

あせりすぎです。
まず、わかりやすいHTML4.01strictを徹底的に身につけましょう。HTML4.01では基本的にブロック要素と行内要素しかありませんが、HTML5では
メタデータ・コンテンツ
フロー・コンテンツ
セクショニング・コンテンツ
ヘッディング・コンテンツ
フレージング・コンテンツ
エンベッディッド・コンテンツ
インタラクティブ・コンテンツ
と分けて考えます。それぞれがどのコンテンツに含まれるかがきちんと決まっています。

 HTML4.01でも
<body>
<img src="画像url" usemap="#画像url">
<map name="...続きを読む

QHTML5のアニメーション設定について

http://wpexplorer-demos.com/total/
トップにあるイメージスライダーの中に画像やテキストがアニメーションしています。
HTMLの364行辺りに以下のがあります。アニメ関連の設定だと思います。
調べたところ、durationinは「アニメーションが完了するまでの時間を指定」の意味だとわかりましたが、ほかのは検索しても分かりませんでした。
どんなものか、教えてください。
宜しくお願いします。

data-ls="slidedelay:3500;transition2d:5;"

durationin:500;
delayin:600;
easingin:easeInOutExpo;
fadein:false;
durationout:500;
fadeout:false;
slidedirection:bottom;
slideoutdirection:bottom;
delayout:100;

Aベストアンサー

HTML5ではなく、CSS3・・・スタイルシートです。ただしウェブ標準とは違う。
スライドショー自体はjQuery使用してます。
CSS3のアニメーションは
 ⇒CSS Animations( http://www.w3.org/TR/css3-animations/ )
時間的変化は
 ⇒CSS Transitions( http://www.w3.org/TR/css3-transitions/ )

Qヤフオク出品画像で背景画像を外部から呼び出し 正しいHTMLは?

外部から通常画像を呼び出すときは分かるのですが、
背景(テーブル背景)の呼び出しに失敗します。


まず、通常画像を呼び出しの場合はこうですよね。
<img src="http://www.〇〇〇〇〇/△△△△.jpg" width="△△" height="△△">
これは簡単に成功します。


なのに、テーブル背景にするとき
<table width="△△" height="△△" border="△" align="center"
background="http://www.〇〇〇〇〇/△△△△.jpg" class="△△">
にしているのに、
ヤフオクの画面上では表示されません。


根本的なHTMLの原因があるのでしょうか?
それともヤフオクでは背景画像への指定はもともとできないのでしょうか。
お分かりの方、良ければHTMLも含め、宜しくお願いいたします。

Aベストアンサー

私は利用者ではないですが、ググったら以下のURLにすぐ行き当たりました。

http://help.yahoo.co.jp/help/jp/auct/sell/sell-15.html
http://www.auclinks.com/tag/yahoo_tag.php

公式コンテンツである上記より下記の方が詳しく説明されている様ですが(使用できるタグの種類のリストが何故か食い違っていて、?でしたが、何せユーザではないのでそこらへんの事情はわかりかねます)下記サイトの解説によると、background属性は使用不可の様です。


このカテゴリの人気Q&Aランキング

おすすめ情報