電子書籍の厳選無料作品が豊富！

おしえて

動きのあるサイトの作り方がしりたい

解決済

  • 質問者：code
  • 質問日時：
  • 回答数：6件

こういう動きのサイトを作りたい場合↓
http://madebytung.com/

何から勉強すればいいでしょうか。
htmlの初歩の初歩ぐらいは理解してますが
最近のweb業界のことは全くわかっていない初心者です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.3ベストアンサー

  • 回答者： narative_h
  • 回答日時：

一昔前はFlashというソフトを利用して動きのあるサイトが作成されていましたが、


iPhoneはFlashで作成したサイトは見られない仕様であったため（ジョブズの意向？！）、
Flashは急速に廃れました。

今ではこのような動きのあるサイトはJavaScriptで作成するのが一般的です。

書店に行くと「HTML5〜」というタイトルの本がたくさんあると思いますが、
Webアプリの可能性を追求する上でJavaScriptは絶対に外せないため
HTML5 = HTML5 + JavaScript　と捉えてもいいでしょう。

###

まずはJavaScriptの基本を学びましょう。

そしてJavaScriptで動きを表現する際に便利な
jQueryというライブラリを勉強してみるといいです。

とりあえず今のWeb業界では上記が一般的な見地です。
    • good
    • 3
    • 件
通報する
この回答へのお礼

早速にありがとうございます！
JavaScriptの基本、jQuery。
何から取りかかれば良いのかがわからなかったため
その単語を教えていただけて有難いです。
早速とりかかってみます！

通報する
お礼日時：2016/04/08 16:00

No.6

  • 回答者： ORUKA1951
  • 回答日時：

う～ん。


二か所の
<p><a href="#Top">閉じる</a></p>
は、
<p><a href="#Top">トップへ</a></p>
のほうが良いですね。

そしてスタイルシートの最後の部分を
section:target a[href="#Top"]{position:absolute;bottom:0;right:0;width:6em;text-indent:-4em;overflow:hidden;}
section:target a[href="#Top"]:after{content:"　閉じる";}

この方が本来の姿でしょう。

このように文書構造とプレゼンテーションを分けると・・HTMLは弄らずにユーザーエージェント(ブラウザとかスマホとか携帯電話とか、印刷機とかスクリーンリーダー)ごとにデザイン変えられるし、気が変わったらスタイルシートだけ書き直せば、サイト全体を一挙にデザイン変えられる。
　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　のページをIEやfirefoxのような代替スタイルシート対応のブラウザで訪問して、メニューの「表示」から「スタイルシート」に進み、色々なスタイルを選択してみるとそれがわかる。もちろん印刷プレビューで印刷イメージを確認してもよい。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： ORUKA1951
  • 回答日時：

じゃあスタイルシートを書いてみます。


★ これはscreenメディアだけに適用されますから、携帯電話(フィーチャーホン/ガラケー)や印刷には適用されません。同じことをjavascriptでしようとすると検索エンジンには内容がわからない。

＞こういう動きのサイトを作りたい
　は初心者が良くハマるドツボですよ。ユーザーも検索エンジンも、それがどのようにインタラクティブで華やかでも一切評価してくれません。せいぜい面白いねという程度。
　重要なのは、内容です。あなたが頻繁に訪問するサイトは実はとてもシンプルだったレするのでは・・。ひれどころかシンプルで内容が充実しているページがお気に入りだったりする。

★タブは＿に置換してあるので戻してください。

<style media="screen">
<!--
*{margin:0;padding:0;line-height:1.6em;}
html,body{margin:0;padding:0;}
header,section,footer{
＿width:80%;max-width:960px;min-width:420px;
＿margin:0 auto;padding:10px 20px;
}
blockquote{
＿margin:0 1em;
＿border:solid 1px black;
＿border-radius:10px;
＿padding:20px;
}
header h1{
＿background-color:rgb(100,255,255);
}
header nav ul{
＿transition-property: background-color,height;
＿transition-duration:1s;transition-timing-function:ease-in-out;
＿height:0;
＿overflow:hidden;
}
header:hover nav ul{
＿height:30px;
＿overflow:visible;
}
header nav h2{
＿height:30px;
}
header:hover nav h2{
＿visibility:hidden;
}
header nav ul{text-align:center;}
header nav ul li{
＿list-style-type:none;
＿display:inline-block;
＿width:5em;
}
header nav ul li a{
＿display:block;text-decoration:one;
＿transform: rotateZ(0deg);
＿transition-property:transform,background-color;
＿transition-duration:1s;
＿transition-timing-function:ease-in-out;
＿background-color:rgb(255,255,0);
}
header nav ul li a:hover{
＿transform: rotateZ(360deg);
＿background-color:rgb(255,160,0);
}
section{position:relative;}
section section h2{
＿font-size:30px;height:40px;line-height:40px;
＿background-color:lime;
}
section section{
＿height:30px;
＿overflow:hidden;
＿transition-property:height;
＿transition-duration:1s;
}
section section#Q:target{height:250px;}
section section#A:target{height:500px;}
section:target a[href="#Top"]{position:absolute;bottom:0;right:0;}

-->
</style>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： ORUKA1951
  • 回答日時：

今では、flashはむろん、極力jquery--すなわち、javascriptを使わずに、動的なサイトを構築する方向になっています。


いくつか理由がありますが、
・検索エンジンが利用できない
・javascriptを利用できない端末で機能しない
・javascriptを停止しているブラウザでは動作しない
・・・
＞htmlの初歩の初歩ぐらいは理解してますが
　いや、失礼ですが、それはされていないと思います。そもそも、htmlではなく、HTMLですから・・

　HTMLは1999年(15年前)のHTML4.01の勧告以来、強く言われてきたのは「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )」すなわち、HTMLは文書の構造をマークアップするもので、プレゼンテーションはスタイルシートに任せる。ということ
　HTMLの最大の目的であり,それゆえに、ここまで普及したのは「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

サンプル上げておきますが、このようにHTMLでは文書構造だけをマークアップしておきます。一目見てわかるように検索エンジンだけでなく、メンテナンスも容易です。
★タブは＿に置換してあるので戻す。
　また、:は全角の：に置換してあるので戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
＿<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
/* ここに書くスタイルシートは後で示す */
-->
</style>
</head>
<body>
＿<header id="Top">
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<h2>目次</h2>
＿＿＿<ul>
＿＿＿＿<li><a href="#Top">Top</a></li>
＿＿＿＿<li><a href="#Q">質問</a></li>
＿＿＿＿<li><a href="#A">回答</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<section id="Q">
＿＿＿<h2>質問</h2>
＿＿＿<p>こういう動きのサイトを作りたい場合↓</p>
＿＿＿<p><a href="http：//madebytung.com/">Tung - Graphic Design and Art Direction</a></p>
＿＿＿<p>何から勉強すればいいでしょうか。</p>
＿＿＿<p>
＿＿＿＿<abbr title="Hyper Text Markup Language">HTML</abbr>の初歩の初歩ぐらいは理解してますが、最近のweb業界のことは全くわかっていない初心者です。
＿＿＿</p>
＿＿＿<p><a href="#Top">閉じる</a></p>
＿＿</section>
＿＿<section id="A">
＿＿＿<h2>回答</h2>
＿＿＿<p>
＿＿＿＿今では、flashはむろん、極力jquery--javascriptを使わずに、動的なサイトを構築する方向になっています。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿いくつか理由がありますが、
＿＿＿</p>
＿＿＿<ul>
＿＿＿＿<li>検索エンジンが利用できない</li>
＿＿＿＿<li>javascriptを利用できない端末で機能しない</li>
＿＿＿＿<li>javascriptを停止しているブラウザでは動作しない</li>
＿＿＿＿<li>・・・</li>
＿＿＿</ul>
＿＿＿<p>
＿＿＿＿<abbr title="Hyper Text Markup Language">HTML</abbr>は1999年(15年前)のHTML4.01の勧告以来、強く言われてきたのは<a href="http：//www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4"><q cite="http：//www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4">構造とプレゼンテーションの分離</q></a>、すなわち、「HTMLは文書の構造をマークアップするもので、プレゼンテーションはスタイルシートに任せる。」ということです。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿これは、<abbr title="Hyper Text Markup Language">HTML</abbr>の最大の目的である。
＿＿＿</p>
＿＿＿<a href="http：//www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1">
＿＿＿＿<blockquote>
＿＿＿＿＿<p>
＿＿＿＿＿＿HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
＿＿＿＿＿</p>
＿＿＿＿</blockquote>
＿＿＿</a>
＿＿＿<p>
＿＿＿＿に基づいているのです。これこそ、HTMLがここまで普及した―最大の―要因なのですから。
＿＿＿</p>
＿＿＿<p><a href="#Top">閉じる</a></p>
＿＿</section>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： nitto3
  • 回答日時：

ＨＴＭＬの初歩の初歩で十分だね。


業界は関係ない。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
業界は関係ない、の言葉に勇気をもらいました。

通報する
お礼日時：2016/04/08 16:36

No.1

  • 回答者： zircon3
  • 回答日時：

とりあえずこの画面上で右クリックして「ソースを表示」といったメニューを選んでみましょう。


そうするとこのページのHTMLが表示されます。

その意味を理解できるようHTML（つまりはタグの種類と要素）を勉強しましょう。
そうすると「こういう技術を使っているのか」というのが見えて来ます。

参考まで。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
チンプンカンですが、ソースを確認することからはじめてみます。

通報する
お礼日時：2016/04/08 16:37

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報