XHTML、CSS、JavaScriptのコードデザインに関する本・Web

2023/10/19 18:38

このQ&Aのポイント

XHTML、CSS、JavaScriptのコードデザインに関する本・Webを探しています。
実用的な準初心者向けの情報を求めています。
CSSとJavaScriptの設計についての合理的な手法やポイントを学びたいです。

ベストアンサー

XHTML、CSS、Javascriptのコードデザインに関する本・W

2010/10/20 23:11

XHTML、CSS、Javascriptのコードデザインに関する本・Web ごく基礎的なXHTML、CSS、JavaScriptについて勉強したのですが、より実用的な準初心者向けな情報を探しています。 CSSで実現すべきかJavaScriptで実現すべきか迷ったりしてます。また作成過程においても Javascriptでダイナミックにテキストなどのコンテンツを表示させていると、そのコンテンツに対するCSSの適用やJavascriptの適用は難しくどのように設計しているのかなども知りたいです。静的ではないので、出力結果ごとに画面イメージを書いていく感じかな・・・と想像していますが。。ケースバイケースの部分は多いかと思いますがそれでも、定石と言われるような手法・ポイントはあると思いますので少しでも合理的な手法を学びたいなぁと思っています。よろしくお願いします

sarusearch
お礼率73% (101/137)

HTML
回答数1
ありがとう数4

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

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

ベストアンサー

LOHA
ベストアンサー率52% (203/388)

2010/10/21 02:31 回答No.1

準初心者向きどうかはわかりませんが、「プロとして恥ずかしくないWEBデザインの大原則」とかどうでしょうか。サイトの構成・配色、ディレクトリの構成、CSS、Javascript、Flashなど、Webサイト制作に関する基本的なネタが網羅的に書かれています。＞CSSで実現すべきかJavaScriptで実現すべきか迷ったりしてます。基本的にデザインは全てcssで行うのが良いでしょう。あとは、例えばロールオーバーのボタンであれば、IE6までを対象とするならJavaScript一択なように、ブラウザの問題によってどちらを使うかが限定されることもありますね。＞Javascriptでダイナミックにテキストなどのコンテンツを表示させていると、そのコンテンツに対するCSSの適用やJavascriptの適用は難しくどのように設計しているのかなども知りたいです。 classなどを上手く使って統一的なスタイルが決まっているところにコンテンツを流し込むようにすると想像しやすいかと思います。

質問者

お礼 2010/11/05 23:20

ありがとうございます。やり方自体は色々見るのですが実際に構築すると箇所によりベストプラクティスのようなものがあるのではと思っておりました。本を含め参考にさせていただきます。

関連するQ&A

html・CSS・JavaScriptを学ぶ本は？
お世話になっています。かなり前に、HTMLとCSSを独学で勉強したのですが、完全に忘れてしまったので、また、勉強のやり直しをしています。以前使用していた本は「ＨＴＭＬ／ＸＨＴＭＬ＆スタイルシートレッスンブックステップバイステップ形式でマスターできる」「速習Webデザイン改訂新版 HTML & スタイルシート」「スタイルシートサンプル＆リファレンス」「HTML　コンパクトリファレンス」なのですが、HTML5の本も出てきているのですが、まだこれらで勉強できますか？あと、JavaScriptなのですが、ネットで調べるといきなり「日付を表示してみよう」というものが多いので、超初心者向けの入門書を教えてください。よろしくお願いします。
- ベストアンサー
- CSS
リンクに関する制御について【XHTML&CSS&JavaScript】
【XHTML&CSS】リンク制御について Webサイトにおいて、現在リンクの制御の方法をどうしたらいいのかわかりません。（JavaScriptについては初心者です。） XHTMLのソース上においてリンクを以下のように記述し、 <ul> <li><a href="../link/test1.html">テスト1</a></li> <li><a href="../link/test2.html">テスト2</a></li> <li><a href="../link/test3.html">テスト3</a></li> <li><a href="../link/test4.html">テスト4</a></li> </ul> 上記のようにリストを作成するが、テスト1からテスト3まではリンク先のファイルが存在するが、テスト4についてはファイルが存在しない。この状態では、通常であればテスト4は"404 Not Found「ページが存在しません。」などのエラーが表示されます。これをCSSまたは、JavaScriptなどで制御して、リンク先のファイル（test4.html）を探しに行って存在しない場合、リンク先へ遷移させないようにはするにはどうしたら実現可能でしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
javascriptとcssでフォントサイズを切り替えたい
javascriptとcssでフォントサイズを大中小で切り替えたいと思い、いろいろとサイトをまわりながら以下のようなものを作成しました。しかし、どうもうまく動いてくれません。 ●●●●●javascript●●●●● function fontChange(str){ var targetFile; switch(str){ case "small": targetFile="../css/font_small.css"; break; case "medium": targetFile="../css/font_medium.css"; break; case "big": targetFile="../css/font_big.css"; break; default: alert("error"); break; } //フォント用CSSのファイル名をクッキーの値として保存 //フォント切り替え機能をサイト全体適用するためpathに/（ルート）を指定 document.cookie="fontstyle="+targetFile+";path=/;"; window.location.reload(); //ページをリロードして設定を反映。 } //以下はページが読み込まれる際必ず実行される処理 var name="fontstyle"; var cookie=document.cookie; //クッキーを取得 if(-1==cookie.indexOf(name)){ //クッキーがなければmediumを指定（デフォルト） var file='../css/font_medium.css'; }else{ var pos_s=cookie.indexOf(name)+name.length+1; //クッキーの値の開始位置 var pos_e=cookie.indexOf(";",pos_s); //クッキーの値の終了位置 if(-1==pos_e){ //末尾にセミコロンがあるか？ var file=cookie.slice(pos_s); //無い }else{ var file=cookie.slice(pos_s,pos_e); //有る } } //クッキーの値に対応するCSSを読み込む。 document.write('<link rel="stylesheet" href="'+file+'" type="text/css" />'); ●●●●●css●●●●● 各種用意しました ●●●●●XHTML●●●●● <ul> <li onclick="fontChange('big')">大</li> <li onclick="fontChange('medium')">中</li> <li onclick="fontChange('small')">小</li> </ul> ちなみにこちらのサイトを参考にいたしました。 http://ks-product.com/arc/2007/01/0701082109.html また、XHTML内の<li onclick～>というのをCSSにして<li id="●●">にしたいと思っているのですが、その際CSSにはどのように記載すればよろしいのでしょうか？長々と大変申し訳ありませんが、よろしくお願いいたします！
- ベストアンサー
- JavaScript
ホームページをCMSで作るか自分でHTML(XHTML)やCSSで一か
ホームページをCMSで作るか自分でHTML(XHTML)やCSSで一から作るか迷っています。 HP製作の発注は考えていません。条件１．私は建築業の個人事業主であり、新築・リフォーム関係の　　サイトを作成しようとしている。２．製作会社に頼まない ※（マンパワーを建築業に注ぎ、HP製作は発注するという意見の方が多いですが、　　HP製作３年リースで月に4万円程度も出せないのが現状）３．サイトの更新は自分でやる。ソースコードをいじるのは問題ない。４．自サーバを構築・運用してあり、CMSの設置は技術知識的に可能。５．HTML CSSの知識はそれなりにあり、Dreamweaverを使うのは慣れている。６．CMSはSEO対策に有効とあるが、広告記載の金を出せば、いくらでも　　上位にもってくるすべはあると思うし、上位にもってくる重要性よりも、　　コンテンツの内容・オリジナル性を重視したい。迷っていること１．CMS(Movable Type/wordpress)でやるか？２．自分でHTML(XHTML)とCSSを使い、Dreamweaver CS3で一から自分でやるか？　　※wordpressを設置し、やってみたがwordpressの概念やカスタマイズ方法の操作知識を　　覚えるのが大変で、デフォルトでブログ形式（投稿）になっているwordpressの仕様を　　ブログ形式じゃないものに変えていくほうがめんどくさい。　　 ※１．２いずれにしても、どんなサイトにするか（サイトの概観や雛形（レイアウト））　や画像を用意するなど、サイト作成前に設計することは同じだと思っています。以上の条件で、どちらでやっていくべきか、また同じ考え的な方がいましたら、理由とご意見を頂戴したいと思います。
- ベストアンサー
- ホームページ作成ソフト
JavascriptでのロールオーバーはSEOには不利なのですか？
素人な質問ですが宜しくお願いします。 CSS+XHTMLでサイトを作成していますが、いつも、ロールオーバーボタンで悩んでいます。 CSSでももちろん実現は出来るのですが、Javascriptを用いたものはやはりSEO対策としては不利なのでしょうか？例えばメニューとかであれば、リスト+Javascriptロールオーバーとすれば同じ効果が得られるものではないのでしょうか？ HTML本文でのJavascriptの呼び出しソース自体が不利ということでしょうか？ロールオーバーって共通パーツ以外にいろんな所で使うので、その都度CSSで設定する必要があり、javascriptで実現した方が簡単な気がするのですが・・・（「慣れ」かもしれませんが・・・。）どうか、よきアドバイスお願いいたします。
- ベストアンサー
- HTML
グローバルナビゲーションって、どうやって作るんですか。
グローバルナビゲーションって、サイトのページ全部に表示されていて、ページ移動のときも再読み込みされてないふうに視覚的にみえますよね。あれはどのようにして、作られているのでしょうか。いろんな技術を使って実現できると思うのですが、できるだけ多くの手法を知りたいです。・html ・css ・php ・javascript などを使った、たくさんの手法を教えてください。よろしくお願いします。上記以外の言語でもかまいません。
- 締切済み
- CSS
HTML5＋CSS3　でしかできないこと
長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。言語も html css javascript jquery php　など、色々楽しみながら勉強してきました。ほんの数年前から、HTML５＋CSS３　が登場しましたが、様子を見ていると、どんどん独創的なサイトが出てきています。スマートフォン用のサイトも作れるようになりたいな、と思っていましたがようやく重い腰を上げて作業に取り掛かろうと思っています。そこで質問なのですが、HTML5＋CSS3で作られたサイトでまるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。例えば、リンクタグをブロック要素化することが簡単になったとか、角が丸い四角形を充てることができるようになったとか、電話番号をタップすると「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。しかし、「HTML5+CSS3で作られたサイト全体」で見ると、いまいちピンと来ないのです。そこで、お詳しい方に是非、以下のような形で教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML５で作られていますが（section タグや　header タグがありますね） XHTML+CSSでサイトを長年作ってきた人間からすると、どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるものでどれがHTML5+CSS3によるものなのかわかりません。また、一番驚いたのが、サイトの構成です。サイト全体の横幅が無く全画面表示になっており、３カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを分かりやすく教えてもらえたらとても有難いです。サンプルサイト付きで、なるべく詳しく教えて頂いた方にポイントを付与させていただきたいと考えております＾＾どうぞ宜しくお願い致します！
- ベストアンサー
- その他（インターネット・Webサービス）
XHTML+CSSによるデザインをしています。
XHTML+CSSによるデザインをしています。 divボックスによる３段組レイアウトをして、左サイドバーの中にdivボックスを、縦に複数設置しようとしたら、２個目のボックスが表示されずメインボックスと右サイドバーが詰まってレイアウトが崩れてしまいました。コーディングミスをご指摘いただけるのでしたらお願いします。 <div id="wrap"> <div id="header"> <div id="header_top"> <div id="logo"> <img src="image/logo.jpg" alt="" /> </div> <div id="header_right"> <div id="logo2"> Lost Book World </div> <div id="header_right_txt"> Yu </div> </div> </div> <div id="header_bottom"> <a href=".html"><img src="image/navi_global01.jpg" alt="" /></a><a href=".html"><img src="image/navi_global02.jpg" alt="" /></a><a href=".html"><img src="image/navi_global03.jpg" alt="" /></a><a href=".html"><img src="image/navi_globa4.jpg" alt=" /></a><a href=".html"><img src="image/navi_global05.jpg" alt="" /></a> </div> </div> <div id="inner"> <div id="largeWrap"> <div id="mainWrap"> </div> <div class="sideAlphaWrap"> <div id="form_nv"> <img src="image/form-n.jpg" alt="" /><a href=""><img src="image/form-gen.jpg" alt="" /></a> </div> <div id="form"> </form> </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> <br /> <div id="form_nv"> <div id="form"> ああああ </div> <div id="form_bottom"> <img src="image/kakumaru-bottom.jpg" alt="" /> </div> </div> <div class="clear"><hr /></div> </div> <div class="sideBetaWrap"> 右サイドバー </div> <div class="clear"><hr /></div> </div> <div class="footer"> <p>ヘッダー<br /> Copyright © 2004-2010 abc co.,Ltd., All rights reserved.</p> </div> </div>
- ベストアンサー
- HTML
期間限定で読み込むcssファイルを変えたい
いつもお世話になっています。今現在、以下のようなJavascriptで３カ月ごとに読み込む外部cssを変えています。 web // ＊以下CSS切り替え document.write ('<link rel="stylesheet" type="text/css" href="' + (function () { switch ((new Date).getMonth () + 1) { case 3 : case 4 : case 5 : return 'css/back_spring.css'; // 3-5 月は back_spring.css を適用 case 6 : case 7 : case 8 : return 'css/back_summer.css'; // 6-8 月は back_summer.css を使用 case 9 : case 10 : case 11 : return 'css/back_autumn.css'; // 9-11 月は back_autumn.css を使用 case 12 : case 1 : case 2 : return 'css/back_winter.css'; // 12-2 月は back_winter.css を使用 default : return 'css/back_default.css'; // その他は back_default.css を適用 } } )() +'">'); これをさらに 12/10～12/25はback_xmas.css 12/31～1/7はback_new_year.css というように細分化したいのですが、javascriptの知識が少ないためどのように手をつければよいかわかりません。どなたかアドバイスをお願いします！
- ベストアンサー
- JavaScript
英訳お願いしますm. .m
以下の文の英訳をお願いしたいのですが..... わかる方いましたらすみませんが、よろしくお願いします。 ”本文↓” 本研究では，上記４つの手法の詳細が示されている。更に提案手法を船舶の主要目設計に適用し、ケーススタディを行うことでその妥当性と有効性を示す。
- 締切済み
- 英語