現在、Webサイトを作成するための勉強をしております。
次のサイトを参考にし、HTMLとCSSの役割や違いを知ることはできました。
http://homepage.shichihuku.com/003.html
そこで、次へのレベルアップのためには、何を覚えていったらよいのでしょうか?
どんなWebサイトにするかによって、覚えるべきことは異なるのかもしれませんが、まず初心者が覚えていくのに良いものがあれば、教えて下さい。
ちなみに、これから作ろうとしているWebサイトのトップページには、写真のスライドショー(3枚くらい)を掲載したいと思っております。これは無料のFlash作成ソフトでも可能でしょうか?
また、問い合わせフォームを作りたいのですが、これはPHPで作るのでしょうか?それともジャバスクリプトで作るのでしょうか?
どのような回答でも、私にとっては参考になりますので、ご回答をして頂けるとありがたいです!!
No.6ベストアンサー
- 回答日時:
No.1です。
最初にウェブページを公開して早いもので17年経ってしまいました。ちょうどHTML2.0の時代で、その後のブラウザ戦争やHTML3.2の酷い時代も経験してきています。そのため、なぜHTML4.01が作られることになったかや、その目的も理解しているつもりです。
『HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきである ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
★2.2.1 HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
は、ぜひ読んでおいてください。
要は、単にIE5.5/6やスマホに対応させるレベルではなく、それ以上に
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )]より
さらに検索エンジンへの対策を目指せば、どうしてもHTML4.01strictに行き着いてしまうのです。(transitinalやframesetじゃない)
しつもんにありました
『これから作ろうとしているWebサイトのトップページには、写真のスライドショー(3枚くらい)を掲載したいと思っております。』
について、「どんな環境からもWebの情報を利用できるように」を達成するためには、いくつかのアプローチがあります。あなたのサイトの主たるコンテンツ、想定される訪問者も重要な判断基準になりますから、あくまで一般的なアドバイスしか出来ません。
今後も増え続けるであろうi-phoneを考えるとfashは避けます。なんといってもユーザーがアプリケーションをインストールしなければならないという根本的な問題もあります。
まず、率直なHTMLを作成します。私は現在はHTML4.01strictです。数年前まではXHTML1.1、そのまえはHTML1.0でしたが、HTML5の形が見えてきた数年前からはHTML4.01strictに戻しました。その際に、「HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」名をdivのclass名にし、その意味や使い方も参考にしています。・・将来HTML5が一般的になったとき楽ですから・・
トップページに表示する画像--たぶんサイトのコンテンツカテゴリーを表現するためのものだと思いますが、いわゆるトップページにおけるナビゲーションと考えています。各ページにおけるサイトマップ的なナビゲーションとは異なり、それ自体がそのページの主題、すなわちHTML5で言うところのsectionに当たるものです。
HTML5の基本構造
<body>
<header></header>
<section></section><--- ここに入る
<ffoter></footer>
</body>
ここに、ナビゲーションとしてマークアップします。
<div class="nav"><!-- HTML5の<nav> -->
<h2>メニュー</h2>
<ol>
<li><a href=""><img src="サムネイル" width="" height="" alt="リンクタイトル"></a></li>
<li><a href=""><img src="サムネイル" width="" height="" alt="リンクタイトル"></a></li>
<li><a href=""><img src="サムネイル" width="" height="" alt="リンクタイトル"></a></li>
</ol>
</div>
これをCSS2.1をつかって、マウスオーバーで画像を入れ替えるものをまず作ります。携帯電話やスタイルシートを利用できない端末には、単純なサムネイルを利用したナビゲーションです。画像も見ない検索エンジンにはリンクタイトルとリンクが理解されればよい。
画像の置き換え方法は、contentプロパティで追加するなり、背景画像として表示するなりします。HTML5に対応したブラウザ用にCSS3のTransitions モジュールを使用してスライドショーとしても良いでしょう。わざわざvideoやcanvasは要らないでしょう。
幸いトップページは印刷は想定しなくて良いのである意味楽です。(印刷用スタイルシートを用意しなくて良い)
その上で、javascript/jQueryを利用してフェードアウトやスライド効果を持たせても良いでしょう。javascriptを利用できないユーザー、さらにはスタイルシートを利用できないユーザーにもまったく問題なく利用できるでしょう。
★画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) - かちびと.net ( http://kachibito.net/web-design/224-image-jquery … )
ここで、flashやvideo,canvasなどだけに依存して、それらが利用できない訪問者を追い返すことだけは避けなければなりません。
タダ、忘れないでほしいのは!!!これは自戒でもあるのですが!!!!
そのような画像や効果を見るために、たずねてきてくれるわけではない
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
ということです。本当に充実しなければならないのはコンテンツです。世界中探してもここにしか、これだけ充実した情報はないよ---といわれるくらいに。この世界、ちょっと古い言い回しですが「ロングテール ( http://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%B3% … )」の世界です。
No.5
- 回答日時:
#3です。
jQueryはJavascriptのライブラリ(使いやすいように手順をまとめたもの)ですので、Javascriptを停めているユーザには、いっさい効果を与えることはできません。
その場合は、タグ<noscript></noscript>に、代換のコンテンツを記述しておきます。
最近、Ajax等の利用が多いので、Javascriptを停止している閲覧者は昔に比べると少なくなりましたが。
jQueryを使わずにスライドショーを見せるのでしたら、Flashにより制作することになります。
ただこの場合は、タブレット利用者に効果を見せることができなくなりますので、そちらの問題もあります。
html5ですと、Canvasオブジェクトを使って画像スライドショーを制作することもできますが、対応ブラウザが少なく。。これも難しいですね。
いずれも完璧はなく一長一短。多数派対応ならば、やはりJavaScriptということになるでしょう。
あ、フォームの件を忘れておりました。
フォームの表示とすごく単純な送信だけならhtmlとCSSで出来ますが、検証(必須項目モレや入力文字種違いへの指摘など)のためにはJavascriptが必要です。
また、これを使って正しくメールを送信するためには、phpなどのサーバサイドプログラムが必要になります。
No.4
- 回答日時:
No.3の回答に反応して
>Javascriptは手早く勉強できるのですが、開発環境が貧弱なのと、正直あまり面白くないので、当面は言語としてよりも、jQueryプラグインを使って「表層マスター」をしていくことを薦めます。
言語を一生懸命学習するというよりも、他の分野にあわせて、適当に覚えていっている人がほとんどです。
自分はここに対して完全に真反対の意見です!!!
自分は中学からJavaScriptをやっています
上のような考えは昔の考えです
あなたがデザイナーでしかたなくJavaScriptを弄らなければいけない立場なら別ですが
そうではなくWEBクリエイターのつもりなら、間違いなくJavaScriptの高い能力は必要ですし
プラグインに頼り切るような表面的な知識でなく
せっかくなら言語の魅力を感じて基礎からしっかり勉強していって欲しいと私は思います
表面的な知識しか無くテンプレに従ってばかりではそりゃあ面白くもありません
No.3
- 回答日時:
#1さんの意見はまるで原理主義(笑
他人の意見にイチャモンつけるつもりは毛頭ないですが、現実に、最新のHTML5からバグだらけのIE6までが混在するブラウザ環境で、教条的HTML仕様にどれだけ拘ってもほとんど無意味ではないかと思います。
ということで、次の道ですが、
■Flash
■Javascript
■サーバサイド
のうちのいずれかです(その3つくらいしかありませんが。。)
この3つとも、スクリプトを使い、サイトの内容を変化させるという意味で、十分で奥深い機能を持つものです。
あなたの置かれている状況がいまひとつわからないのですが、仕事がらみ(Webデザイナや社内Web)ならphpなどのサーバサイドは必須だし、趣味でデザインから派手にやりたいのならFlash、現在のHTML/CSSによる構築が好きならばJavascriptを薦めます。
Flashはオワコンだなどと言われていますが、デザイン的な表現力は高く、Javascript互換のオブジェクト指向言語も駆使できるし、何より結果が目に見えて出るので、興味を持って学習できるでしょう。
Javascriptは手早く勉強できるのですが、開発環境が貧弱なのと、正直あまり面白くないので、当面は言語としてよりも、jQueryプラグインを使って「表層マスター」をしていくことを薦めます。
言語を一生懸命学習するというよりも、他の分野にあわせて、適当に覚えていっている人がほとんどです。
ご質問の、Webサイトのトップページに入れるスライドショーは、スライダー用のjQueryプラグインを使えば実現できます。
"jQuery slider"と検索すればいっぱい出てきますよ。
この回答への補足
「jQuery slider」というのは、とても便利そうですね。
これは使う方向で検討したいと思いますが、こちらもクライアントユーザー側でJavascriptを無効にしていたら、スライドショーは非対応になってしまうのでしょうか?
というよりも、クライアントユーザー側でJavascriptを無効にしていたら、全てのJavascriptによる機能は非対応になってしまうのでしょうか?それとも一部の機能は、Javascriptを無効にしていても、対応可能なのでしょうか?
No.2
- 回答日時:
他の人が言うようにそのサイトの内容はは古いかもしれませんが概要はちゃんとしてるので、
そのサイトの内容があらかたわかっているのであれば別にもうHTMLとCSSに集中して勉強しなくていいと思います
もちろんあなたがスマホ向けの高品質なページを用意しなくてはならず
どうしても最新のCSSとHTML5を使う必要があるのなら
そのサイトだけでは微塵も足らず、再勉強に注力した方がいいでしょう
JavaScriptの勉強のしかたもだいぶ変わってきます
しかし本当に総合的に、普通にゆっくりレベルアップしていきたいのなら
実際にモノを作りながら必要な具体的な要素ごとの説明をさっと調べていくやり方で大丈夫だと思います
それで次はまあJavaScriptでしょうね
これもjQueryとかライブラリを使っていくのが最近主流ですが
ゆっくりレベルアップしていきたいのなら
自分がライブラリを作れるようになるくらいまではライブラリに頼らないほうがいいでしょう
それから次にサーバーサイドですが、『これは本当にPHPにするのか良く考えた方がいいです』
クライアントサイドはJavaScript一択ですが、サーバーサイドはたくさんあります
それこそ最近はJavaScript(Node.js)でもできます
現実的にNode.js可の受注や企業は現在めったにないと思います
ですが5年後どうなってるかわかりませんし
そのあたりはよく考えてください
ありがとうございます。
JavaScript(Node.js)という、比較的新しい技術もあるのですね。
これは、今の僕には難しいですが、忘れないようにしておきます。
No.1
- 回答日時:
ちゃんとしたサイトで勉強のしなおしをお勧めします。
そのサイトでの説明はtransitinalですが、もう12年も前のHTML4.01の勧告以来、非推奨です。
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
たとえば、
<div align="center">
なんてありえません。一般的に、alignは非推奨ですがそれ以上にbodyのalign属性はつけてはなりません。
#main_spc,#sub_spcのようなclass名はつけるべきではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より
多分、仕様書すら読んでいない方が書かれたサイトだと思います。まず仕様書をお読みください。正確です。
★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
カスケーディングスタイルシートですが、このスタイルシートの最も重要なカスケーディングについて、まったく説明されていません。
まもなくHTML5が登場しますが、それはHTML4.01strictの改訂です。HTMLには徹底して文書構造しか記述しません。
<body>
<header>
文書のヘッダ
</header>
<section>
本文記事
<section>
</section>
</section>
<footer>
文書のフッタ
<nav>
ナビゲーション
</nav>
</footer>
</body>
のようになります。HTML4.01では、下記のように書くべきとされていたものです。
<body>
<div class="header">
文書のヘッダ
</div>
<div class="section">
本文記事
<div class="section">
</div>
</div>
<div class="footer">
文書のフッタ
<div class="nav">
ナビゲーション
</div>
</div>
</body>
そのサイトのマークアップやIDの使い方と違うでしょう。
>次へのレベルアップのためには、何を覚えていったらよいのでしょうか?
今習い始めたのでしたら、脇道にそれたらダメです。ネット上のマニュアルサイトは不正確なものが多すぎます。
わからなくもないのです。--仕様書を読んでいないから--知らないから書ける。知っていれば「仕様書を読みなさい」ですむはずです。
HTML4.01の仕様書は他の仕様書に比較しても秀逸でしょう。W3Cはこれが最後のHTMLの仕様書にするつもりでしたから。
一度通読して、あとは必要なときにいつでも参照できるようにブックマークしておく。
【引用】____________ここから
・最初から最後まで通読する。
本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に
技術的で特殊な内容になっていく。
・ 必要な情報に直接アクセスする。
できるだけ素早くシンタクスやセマンティクスに関する情報を得るために、
オンライン版の仕様書には次の特徴を持たせた。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[About the HTML 4 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
1) HTML4.01stroctでHTMLを書く。
このときデザインは考えず文書構造だけをマークアップする。
2) それを優れたデザインのサイトを参考にスタイルシートでデザインしていく。
デザインできなかったら、HTMLで文書構造がきちんとマークアップされていなかった
はずです。(1)に戻って書き直す。
3) そのHTMLを、まったく異なったデザインにしてみる。HTMLには手を加えずに
その繰り返しが一番早いです。そのときにネット上にたくさんある検証サイトで文法を検証してみる。
★Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html )
★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
flashは可能な限り使わないほうが良いです。いずれvideoやcanvasがHTML5で使えるようになります。i-phone(apple)はflashをサポートしないと明言しています。HTMLで画像リストを作成し、jjavascriptが利用できるユーザーにはjavascript--jQueryなどでスライドショートして利用できるようにするのがベストです。
問合せフォームは、PHPでも構いませんがサイト全体をPHPで管理するのでなければCGIのほうが良いでしょう。
この回答への補足
ありがとうございます。一度、すぐには理解できないと思いますが、仕様書を読んでみます。
また、スライドショーはjavascriptかjQueryで対応しようと思いますが、javascriptを無効にしているユーザーには、どうのような対応をしたら良いのでしょうか?
全てのユーザーにスライドショーを可能にする方法はないのでしょうか?
無ければ、最も多くのユーザーにスライドショーを可能にする方法がありましたら、教えて下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
h1のテキストサイズよりh2の方...
-
htmlのolやulなどlistにtitleや...
-
<!-- #BeginLibraryItemとは
-
1時間30分を簡単に表したいで...
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
div要素が重なってします
-
<div id="container">の使いか...
-
ヘッダーを左右に二分割する方...
-
html リストのマークについて
-
CSS セレクタ 孫要素まで見て子...
-
HTML文について… 昨日習い始め...
-
ローカルとWeb上で見え方が違う...
-
MySQL使用スレッド掲示板の仕組...
-
HTML5をCSSでレイアウトする場合
-
1サイト内にHTML5とXHTMLが混在...
-
HTMLの禁則処理解除について
-
htmlの文字が縦書きになる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報