Javascriptで中央ぞろえのページ作成と要素の操作

このQ&Aのポイント
  • Javascriptを使用して、中央ぞろえのページを作成する方法や要素の操作方法について説明します。
  • また、指定した条件に応じてタイトルや画像を表示する方法や、要素の背景色を変更する方法についても解説します。
  • さらに、ページの最終更新日時を自動的に取得する方法についても紹介します。
回答を見る
  • ベストアンサー

Javascriptにてページ作成

Javascriptを用いて、 1)以下を中央ぞろえ 2)太字・(HTMLでの)フォント6程度の「タイトル」 3)ページを開いた際の時間が30以下で「画像1」  30秒より後の場合は「画像2」を表示 4)3)の背景色を変更 5)最終更新日時を自動取得 といった条件を満たしたページを作成したいのです。 2)は検索して調べたところ、おおむね以下のような感じになると思います。 <script type="text/javascript"> <!-- dd = new Date(); mySeconds = dd.getSeconds(); myimg= '<img src="「画像1」" width= "x" height="y">'; myimg2= '<img src="「画像2」" width= "x" height="y">'; if(mySeconds<30){ document.write(myimg+"<br>"); }else{ document.write(myimg2+"<br>"); } document.write(dd.toLocaleString() +"<br>"); // --> </script> そして5)の日時自動取得は <script type="text/javascript"> <!-- document.write(document.lastModified); // --> </script> こんな感じになると思うのですが。 それ以外の条件を満たすJavascriptで、ぴんとくるものが見つかりません。 他の条件はHTMLで記述するべき(HTMLのほうが楽?)ことなのでしょうか? HTMLは基本的なことだけかじった程度の知識で、Javascroptというものに頭を悩ませています。 よろしくお願いします。

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

  • ベストアンサー
  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.1

基本的に静的要素はHTMLで各内容で、今回の内容なら 1)以下を中央ぞろえ 2)太字・(HTMLでの)フォント6程度の「タイトル」 はHTML+CSSで記述するべきです。 中央に記載したいのであれば、要素に対してtext-alignでcenterを指定するだけです。 タイトルであればHに対してスタイル定義を行います。 コンテンツを可変にする場合でも、デザインはCSSが基本。中身をJavaScriptで書き換えます。 デザインの随時変更だってCSSをJavaScriptで書き換えることになります。 >2)は検索して調べたところ、おおむね以下のような感じになると思います。 3じゃないかな? こういった条件分岐などの動的コンテンツはJavaScriptで作業することになるでしょう。 4)の背景色ですが、画像に背景色・・・? >HTMLは基本的なことだけかじった程度の知識で、Javascroptというものに頭を悩ませています。 そもそもJavaScriptはHTMLやCSSを理解していることが前提なんで、まずはそれをマスターするべき。 基本的にHTMLの要素を指定したりDOM掘ったりするのにHTML/CSSわからないとお話になりません。 順番が違います・・・。

mizohagi
質問者

お礼

回答ありがとうございました。 実はこれ、個人でできそうだったら試しに作ってみましょう、という授業内容だったのです。 背景色については、画像の背景ではなく、ページ全体の背景色かもしれないです。 HTMLの基礎的なことだけをやって、Javascript使って何かしろ、という授業には、私自身辟易としたのですが。 とりあえず、HTMLとCSSの方向から、もう一度挑戦してみます。

関連するQ&A

  • JavaScript - 月ごとに画像変化

    <script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> ("["と"]"は画像の端)という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。

  • javascriptの下に空白ができる

    いつもお世話になっております。 ランダムに画像が表示されるjavascriptを作っており、無事に表示はされるのですが、そのランダム画像の下にテーブルを配置し、別の画像(javascriptを使っていない固定画像)をぴったりくっつけたいのですが、3ピクセルくらいの空白ができてしまいます。 Opera、Firedoxでは空白ができず、IEでのみできます。 何が悪いのでしょうか? 下記にタグを書かせていただきます。 <Script language="JavaScript"><!-- myImg = new Array() myImg[0] = "img1.jpg"; myImg[1] = "img2.jpg"; myImg[2] = "img3.jpg"; //--></Script> </HEAD> <BODY background="img/back.gif"> <SCRIPT language="JavaScript"><!-- i = Math.floor(Math.random()*);document.write("<img src="+myImg[i]+">");//--></SCRIPT> <table width="700" border="0"cellpadding="0" cellspacing="0"><th align="left" valign="top" scope="col"><img src="number1.gif" width="151" height="40" /> number1.gifがぴったりくっつけたい画像です。 以前FLASHを使用したページでも上記のようなことが起こり、教えて頂いて解決したので、(→ http://oshiete1.goo.ne.jp/qa4010291.html です。)同じようにやってみたのですが、ダメでした。 環境はWindows XP、使用ソフトはDreamweaver8です。 申し訳ありませんが、お助けいただけるとありがたいです。 よろしくお願いします。

  • frameとJavaScriptの共存

    <html><head><title> INDEX.HTML </title></head> <frameset rows="70%,*"><frame src="./main.html" name="MAIN"><frame src="./menu.html" name="MENU"></frameset></html> の中に下記のJavaScriptを埋め込みたいのですが どうすればいいのでしょうか? <SCRIPT Language="JavaScript"> <!-- document.write("<img src='http:/xxx/acclog.cgi?"); document.write("referrer="+document.referrer+"&"); document.write("width="+screen.width+"&"); document.write("height="+screen.height+"&"); document.write("color="+screen.colorDepth+"'>"); // --> </SCRIPT> Java Scriptを埋め込んだらフレームが正常に働かなくなりました。 どのようにすればいいのでしょうか?アクセス解析なのでindex.html に設置したいのですがいいアドバイスよろしくお願いします。

    • ベストアンサー
    • HTML
  • JavaScriptについて

    サイト作成中なのですが、JavaScriptのところでつまづいています。 ボタンをクリックすると別窓で画像が出てきて表示されるというJavaScriptを作ると、ボタンは表示されていたのですが、ボタンを押しても画像が表示されません。つまり押しても何も反応がありません。 恐らく画像の保存場所が違うのではないかとにらんでみたのですが見当違いかな?? タグは以下の通りです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> function cl(){ popwin=window.open(",'img','width=150,height=150'); popwin.document.write('<IMG SRC="image3.jpg">'); } </SCRIPT> </BODY> クリックしてください。 <FROM> <INPUT type="button" VALUE="クリック" onClick="cl()"> </FROM> </BODY> </HTML> 私はここの部分で間違えてると思いました。 popwin.document.write('<IMG SRC="***.jpg">'); デスクトップに置いてるmyhomepageにimageというフォルダを置いてそこに画像を保存しています。 その場合、<IMG SRC="image/***.jpg">かなと思い実行してみましたがダメでした。。 JavaScriptのときは何か特別なファルダを作る必要が あるんでしょうか?? JavaScriptに関しては最近はじめたばかりでチンプン カンプンなのでわかりやすく説明していただけるとありがたいです。 ちなみに上記のタグは説明本通り記載しました。 よろしくお願いいたします。

  • html内かscript内で画像出力。どちらが軽い

    ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg~5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか? <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>

  • ページは表示されたけれど、エラーが出ます。

    過去の質問を調べたのですが、見つけられなかったので、質問させてください。 自社サイトのページを開くと、ステータスバーに 「ページが表示されましたが、エラーがあります。」と表示されました。 エラーの詳細は下記のとおりです。 ライン:18 文字:51 エラー:')'がありません コード:0 ソースに問題があるのかと思ったのですが、 下記がそのソースです。 <SCRIPT language="javascript" type="text/javascript" src="../js/common_lib.js"></SCRIPT> <SCRIPT type="text/javascript" src="../js/css_junction2.js"></SCRIPT> <SCRIPT language="JavaScript"> <!-- document.write("<img src='http://700700.jp/acc/acclog.cgi?"); document.write("referrer="+document.referrer+"&"); document.write("width="+screen.width+"&"); document.write("height="+screen.height+"&"); document.write("color="+screen.colorDepth+"' alt="">"); // --> </SCRIPT> どこをどう直せばよいのかよくわからないので、 もしお分かりの方がいらっしゃいましたら、 お教えいただけますでしょうか? よろしくお願いいたします。

  • 複数のランダム表示について

    現在、外部のjsを読み込み、 ランダムではなく下記の方法で 4バナー表示をしております。 【index.html】 <script type="text/javascript" src="js/banner.js"></script> 【banner.js】 document.write("<ul class=\"banner\">"); document.write("<li><a href=\"http://1.jp/\" target=\"_blank\"><img src=\"http://1.jp/img/1画像.jpg\" alt=\"1\" width=\"200\" height=\"80\" /></a><br />1テキスト</li>"); document.write("<li><a href=\"http://2.jp/\" target=\"_blank\"><img src=\"http://2.jp/img/2画像.jpg\" alt=\"2\" width=\"200\" height=\"80\" /></a><br />2テキスト</li>"); document.write("<li><a href=\"http://3.jp/\" target=\"_blank\"><img src=\"http://3.jp/img/3画像.jpg\" alt=\"3\" width=\"200\" height=\"80\" /></a><br />3テキスト</li>"); document.write("<li><a href=\"http://4.jp/\" target=\"_blank\"><img src=\"http://4.jp/img/4画像.jpg\" alt=\"4\" width=\"200\" height=\"80\" /></a><br />4テキスト</li>"); document.write("</ul>"); 【ブラウザ】 1画像.jpg 1テキスト -------- 2画像.jpg 2テキスト -------- 3画像.jpg 3テキスト -------- 4画像.jpg 4テキスト 教えて頂きたいのは、下記のように ランダム表示で4つのバナーを表示させたいのですが どうしたらいいか分かりません。 【ブラウザ】 4画像.jpg 4テキスト -------- 2画像.jpg 2テキスト -------- 1画像.jpg 1テキスト -------- 3画像.jpg 3テキスト 詳しい方おりましたらお教え頂けないでしょうか? よろしくお願いします。

  • 一つのページで二つ動かすのはできないですか

    画像を次々に変えていくJavaScriptを一つのページで2個使いたいのですが、二つ使うと、表示されません。これでは無理なのでしょうか? 無理だったら、他に何かいい方法があれば教えてください。 これを使いました。よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- num = 18; nme = "img" exp = "gif" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',500)"> <BR><BR> <IMG src="img1.gif" name="img" border="0"> </BODY> </HTML>

  • 小窓の出し方について教えて下さい。(2)

    http://oshiete1.goo.ne.jp/kotaeru.php3?q=568520 先ほどご回答を頂き、小窓の開き方は解決致しました。 ↓ <script type="text/javascript"><!-- function subwin(imgsrc,imgalt){ sub1=window.open("","subwin","width=230,height=160,resizable=1"); sub1.document.open(); sub1.document.write("<html><head><title>"+imgalt+"</title></head>"); sub1.document.write("<body style='margin: 0;'>") sub1.document.write("<img src='"+imgsrc+"' alt='"+imgalt+"'>"); sub1.document.write("</body></html>"); sub1.document.close(); } //--></script> body内の、呼び出し部分は、 <a href="#" onClick="subwin('画像ファイルのURL','画像ファイルの説明'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> が、クリックして開く小窓に表示させるHTMLファイルで開かせたい 画像が同じページにあります。(大きさは横500縦600) もう1つ教えて頂いた↓ <script type="text/javascript"><!-- function subwin(file){ window.open(file,"subwin","resizable=1, width=230, height=160"); } //--></script> 以上をhead内に記述して、呼び出し部分は <a href="#" onClick="subwin('読み出すHTMLファイルのURL'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> のwidth=230, height=160をwidth=500, height=600にして上記ソースに加えると(?) 全部の小窓がwidth=500, height=600になってしまいます。 width=230, height=160の画像で開かせる小窓と width=500, height=600のHTMLで開かせたい小窓を 同じページに加えるには、どうしたらよいのでしょうか? ご回答宜しくお願い致します。

  • javascriptを外部化するべきか

    短いjavascriptは外部化するべきでしょうか?それともそのままHTML内に書き込みますか? このぐらいの長さです。(画像をクリックしたら大きい画像が新しい窓で表示) <script type="text/javascript"> <!-- function imgwin(img){ window.open(""+img, "imgwindow", "width=870,height=585"); } //--> </script>

専門家に質問してみよう