こういう動きのサイトを作りたい場合↓
http://madebytung.com/
何から勉強すればいいでしょうか。
htmlの初歩の初歩ぐらいは理解してますが
最近のweb業界のことは全くわかっていない初心者です。
No.3ベストアンサー
- 回答日時:
一昔前はFlashというソフトを利用して動きのあるサイトが作成されていましたが、
iPhoneはFlashで作成したサイトは見られない仕様であったため(ジョブズの意向?!)、
Flashは急速に廃れました。
今ではこのような動きのあるサイトはJavaScriptで作成するのが一般的です。
書店に行くと「HTML5〜」というタイトルの本がたくさんあると思いますが、
Webアプリの可能性を追求する上でJavaScriptは絶対に外せないため
HTML5 = HTML5 + JavaScript と捉えてもいいでしょう。
###
まずはJavaScriptの基本を学びましょう。
そしてJavaScriptで動きを表現する際に便利な
jQueryというライブラリを勉強してみるといいです。
とりあえず今のWeb業界では上記が一般的な見地です。
早速にありがとうございます!
JavaScriptの基本、jQuery。
何から取りかかれば良いのかがわからなかったため
その単語を教えていただけて有難いです。
早速とりかかってみます!
No.6
- 回答日時:
う~ん。
二か所の
<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のような代替スタイルシート対応のブラウザで訪問して、メニューの「表示」から「スタイルシート」に進み、色々なスタイルを選択してみるとそれがわかる。もちろん印刷プレビューで印刷イメージを確認してもよい。
No.5
- 回答日時:
じゃあスタイルシートを書いてみます。
★ これは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>
No.4
- 回答日時:
今では、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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
(HP作成)メニューバーのプル...
-
フレームページのドロップダウ...
-
画像を縦に4つ並べたい場合
-
画像がかなり大ので全体的に1/...
-
html <li>の中の文字一部に色を...
-
疑似クラス :activeが効きません
-
リストマーカーをボックス内に...
-
nth-childが効かない…。原因は...
-
リスト(ul / li)タグの左イン...
-
<ul>~</ul>が二つ続くと間に改...
-
エクセルVBAでブックのデータを...
-
<table>の高さ固定。情報増加時...
-
HTML5のfooterに見出しを付けて...
-
画像にリンクを張ると画像がず...
-
inline-blockでliが横並びにな...
-
【ヒトの神秘】美男美女から何...
-
ウインドウを小さくするとbody...
-
Macで画像の切り抜きできないの?
-
ワードにコピペ、画像が表示さ...
-
htmlの文字が縦書きになる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報