HTMLとCSSの次に覚えることは何でしょうか?

2023/10/24 11:52

このQ&Aのポイント

HTMLとCSSの次の学習ポイントは何ですか? Webサイト作成の勉強中です。
Webサイト作成に役立つ次のスキルを知りたいです。要点をまとめてください。
トップページに写真のスライドショーや問い合わせフォームを作成したいです。具体的な方法を教えてください。

ベストアンサー

HTMLとCSSの次に覚えることは何でしょうか?

2012/10/14 17:57

現在、Webサイトを作成するための勉強をしております。次のサイトを参考にし、HTMLとCSSの役割や違いを知ることはできました。 http://homepage.shichihuku.com/003.html そこで、次へのレベルアップのためには、何を覚えていったらよいのでしょうか？どんなWebサイトにするかによって、覚えるべきことは異なるのかもしれませんが、まず初心者が覚えていくのに良いものがあれば、教えて下さい。ちなみに、これから作ろうとしているWebサイトのトップページには、写真のスライドショー（3枚くらい）を掲載したいと思っております。これは無料のFlash作成ソフトでも可能でしょうか？また、問い合わせフォームを作りたいのですが、これはPHPで作るのでしょうか？それともジャバスクリプトで作るのでしょうか？どのような回答でも、私にとっては参考になりますので、ご回答をして頂けるとありがたいです！！

noname#233083

CSS
回答数6
ありがとう数6

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/16 01:03 回答No.6

No.1です。　最初にウェブページを公開して早いもので17年経ってしまいました。ちょうどHTML2.0の時代で、その後のブラウザ戦争やHTML3.2の酷い時代も経験してきています。そのため、なぜHTML4.01が作られることになったかや、その目的も理解しているつもりです。『HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきである ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』 ★2.2.1 HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 ) 　は、ぜひ読んでおいてください。　要は、単にIE5.5/6やスマホに対応させるレベルではなく、それ以上に【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　さらに検索エンジンへの対策を目指せば、どうしても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/html5-diff/#new-elements )」名をdivのclass名にし、その意味や使い方も参考にしています。・・将来HTML5が一般的になったとき楽ですから・・　トップページに表示する画像--たぶんサイトのコンテンツカテゴリーを表現するためのものだと思いますが、いわゆるトップページにおけるナビゲーションと考えています。各ページにおけるサイトマップ的なナビゲーションとは異なり、それ自体がそのページの主題、すなわちHTML5で言うところのsectionに当たるものです。 HTML5の基本構造 <body> 　<header></header> 　<section></section><--- ここに入る　<ffoter></footer> </body> 　ここに、ナビゲーションとしてマークアップします。 <div class="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-collection.html ) 　ここで、flashやvideo,canvasなどだけに依存して、それらが利用できない訪問者を追い返すことだけは避けなければなりません。　タダ、忘れないでほしいのは!!!これは自戒でもあるのですが!!!! そのような画像や効果を見るために、たずねてきてくれるわけではない ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ということです。本当に充実しなければならないのはコンテンツです。世界中探してもここにしか、これだけ充実した情報はないよ---といわれるくらいに。この世界、ちょっと古い言い回しですが「ロングテール ( http://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%B3%E3%82%B0%E3%83%86%E3%83%BC%E3%83%AB )」の世界です。

質問者

お礼 2012/10/20 00:26

ありがとうございます！！

その他の回答 (5)

shockatz
ベストアンサー率80% (153/191)

2012/10/15 21:46 回答No.5

#3です。 jQueryはJavascriptのライブラリ（使いやすいように手順をまとめたもの）ですので、Javascriptを停めているユーザには、いっさい効果を与えることはできません。その場合は、タグ<noscript></noscript>に、代換のコンテンツを記述しておきます。最近、Ajax等の利用が多いので、Javascriptを停止している閲覧者は昔に比べると少なくなりましたが。 jQueryを使わずにスライドショーを見せるのでしたら、Flashにより制作することになります。ただこの場合は、タブレット利用者に効果を見せることができなくなりますので、そちらの問題もあります。 html5ですと、Canvasオブジェクトを使って画像スライドショーを制作することもできますが、対応ブラウザが少なく。。これも難しいですね。いずれも完璧はなく一長一短。多数派対応ならば、やはりJavaScriptということになるでしょう。あ、フォームの件を忘れておりました。フォームの表示とすごく単純な送信だけならhtmlとCSSで出来ますが、検証（必須項目モレや入力文字種違いへの指摘など）のためにはJavascriptが必要です。また、これを使って正しくメールを送信するためには、phpなどのサーバサイドプログラムが必要になります。

質問者

お礼 2012/10/20 00:24

ありがとうございます。とても参考になりました。

b0a0a
ベストアンサー率49% (156/313)

2012/10/15 02:59 回答No.4

No.3の回答に反応して＞Javascriptは手早く勉強できるのですが、開発環境が貧弱なのと、正直あまり面白くないので、当面は言語としてよりも、jQueryプラグインを使って「表層マスター」をしていくことを薦めます。言語を一生懸命学習するというよりも、他の分野にあわせて、適当に覚えていっている人がほとんどです。自分はここに対して完全に真反対の意見です！！！自分は中学からJavaScriptをやっています上のような考えは昔の考えですあなたがデザイナーでしかたなくJavaScriptを弄らなければいけない立場なら別ですがそうではなくWEBクリエイターのつもりなら、間違いなくJavaScriptの高い能力は必要ですしプラグインに頼り切るような表面的な知識でなくせっかくなら言語の魅力を感じて基礎からしっかり勉強していって欲しいと私は思います表面的な知識しか無くテンプレに従ってばかりではそりゃあ面白くもありません

質問者

お礼 2012/10/15 17:07

ありがとうございます。やはり、色々な意見があるのですね。自分の進路を見極めながら、きちんと検討したいと思います。

shockatz
ベストアンサー率80% (153/191)

2012/10/14 23:14 回答No.3

#1さんの意見はまるで原理主義（笑他人の意見にイチャモンつけるつもりは毛頭ないですが、現実に、最新のHTML5からバグだらけのIE6までが混在するブラウザ環境で、教条的HTML仕様にどれだけ拘ってもほとんど無意味ではないかと思います。ということで、次の道ですが、 ■Flash ■Javascript ■サーバサイドのうちのいずれかです（その３つくらいしかありませんが。。）この３つとも、スクリプトを使い、サイトの内容を変化させるという意味で、十分で奥深い機能を持つものです。あなたの置かれている状況がいまひとつわからないのですが、仕事がらみ（Webデザイナや社内Web）ならphpなどのサーバサイドは必須だし、趣味でデザインから派手にやりたいのならFlash、現在のHTML/CSSによる構築が好きならばJavascriptを薦めます。 Flashはオワコンだなどと言われていますが、デザイン的な表現力は高く、Javascript互換のオブジェクト指向言語も駆使できるし、何より結果が目に見えて出るので、興味を持って学習できるでしょう。 Javascriptは手早く勉強できるのですが、開発環境が貧弱なのと、正直あまり面白くないので、当面は言語としてよりも、jQueryプラグインを使って「表層マスター」をしていくことを薦めます。言語を一生懸命学習するというよりも、他の分野にあわせて、適当に覚えていっている人がほとんどです。ご質問の、Webサイトのトップページに入れるスライドショーは、スライダー用のjQueryプラグインを使えば実現できます。 "jQuery slider"と検索すればいっぱい出てきますよ。

質問者

お礼 2012/10/15 17:03

ありがとうございます。一つ、教えてほしいことがありますので、補足致しました。回答を頂ければ、ありがたいです。

質問者

補足 2012/10/15 17:04

「jQuery slider」というのは、とても便利そうですね。これは使う方向で検討したいと思いますが、こちらもクライアントユーザー側でJavascriptを無効にしていたら、スライドショーは非対応になってしまうのでしょうか？というよりも、クライアントユーザー側でJavascriptを無効にしていたら、全てのJavascriptによる機能は非対応になってしまうのでしょうか？それとも一部の機能は、Javascriptを無効にしていても、対応可能なのでしょうか？

b0a0a
ベストアンサー率49% (156/313)

2012/10/14 22:16 回答No.2

他の人が言うようにそのサイトの内容はは古いかもしれませんが概要はちゃんとしてるので、そのサイトの内容があらかたわかっているのであれば別にもうHTMLとCSSに集中して勉強しなくていいと思いますもちろんあなたがスマホ向けの高品質なページを用意しなくてはならずどうしても最新のCSSとHTML5を使う必要があるのならそのサイトだけでは微塵も足らず、再勉強に注力した方がいいでしょう JavaScriptの勉強のしかたもだいぶ変わってきますしかし本当に総合的に、普通にゆっくりレベルアップしていきたいのなら実際にモノを作りながら必要な具体的な要素ごとの説明をさっと調べていくやり方で大丈夫だと思いますそれで次はまあJavaScriptでしょうねこれもjQueryとかライブラリを使っていくのが最近主流ですがゆっくりレベルアップしていきたいのなら自分がライブラリを作れるようになるくらいまではライブラリに頼らないほうがいいでしょうそれから次にサーバーサイドですが、『これは本当にPHPにするのか良く考えた方がいいです』クライアントサイドはJavaScript一択ですが、サーバーサイドはたくさんありますそれこそ最近はJavaScript（Node.js）でもできます現実的にNode.js可の受注や企業は現在めったにないと思いますですが５年後どうなってるかわかりませんしそのあたりはよく考えてください

質問者

お礼 2012/10/15 16:55

ありがとうございます。 JavaScript（Node.js）という、比較的新しい技術もあるのですね。これは、今の僕には難しいですが、忘れないようにしておきます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/14 18:57 回答No.1

ちゃんとしたサイトで勉強のしなおしをお勧めします。そのサイトでの説明はtransitinalですが、もう12年も前のHTML4.01の勧告以来、非推奨です。 HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) 　たとえば、 <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-html401j/struct/global.html#h-7.5.4 )より　多分、仕様書すら読んでいない方が書かれたサイトだと思います。まず仕様書をお読みください。正確です。 ★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) 　カスケーディングスタイルシートですが、このスタイルシートの最も重要なカスケーディングについて、まったく説明されていません。　まもなく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-html401j/about.html#h-1.1 )］より 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_input ) 　flashは可能な限り使わないほうが良いです。いずれvideoやcanvasがHTML5で使えるようになります。i-phone(apple)はflashをサポートしないと明言しています。HTMLで画像リストを作成し、jjavascriptが利用できるユーザーにはjavascript--jQueryなどでスライドショートして利用できるようにするのがベストです。　問合せフォームは、PHPでも構いませんがサイト全体をPHPで管理するのでなければCGIのほうが良いでしょう。

質問者

お礼 2012/10/15 16:49

ありがとうございます。他にも教えてほしいことがあります。補足を確認頂ければ幸いで御座います。

質問者

補足 2012/10/15 16:48

ありがとうございます。一度、すぐには理解できないと思いますが、仕様書を読んでみます。また、スライドショーはjavascriptかjQueryで対応しようと思いますが、javascriptを無効にしているユーザーには、どうのような対応をしたら良いのでしょうか？全てのユーザーにスライドショーを可能にする方法はないのでしょうか？無ければ、最も多くのユーザーにスライドショーを可能にする方法がありましたら、教えて下さい。

HTMLとCSSの次に覚えることは何でしょうか?

HTMLとCSSの次に覚えることは何でしょうか?