掲示板/総合質問板/過去ログ/一覧/ 外部jsファイルにスタイルシートを適用させたい

0 名前： ジョニー ： 2007/03/19（月） 15:57 ［URL］ ID:REVXC8Bu sub-VV: http://romug.web.fc2.com/
このサイトを運営しているのですが、左メニュー（外部jsファイル）の文字を小さくしたいのです。

とりあえずjsファイルの方に、<div class>等を当ててみたのですが、どうにも上手く行きません。
jsの記述も見よう見真似ですので、もしかしたらどこか違ってるかもしれません。

「外部呼出しでも、ちゃんとリンク色とかは適用されてるんだから、文字サイズだってどうにかなるはず」
と、勝手に考えたのですが、どうすれば良いのでしょうか？

【js】http://romug.web.fc2.com/menu.js
【css】http://romug.web.fc2.com/default.css

1 名前：モノ ◆7YMtX/NYmu ： 2007/03/19（月） 15:57 ID:TeHw2026 sub-Cl: jsにCSSを、というより、そこから出力されるもの(今回はHTML)に対してCSSを適用するということです。

Javascriptで出力されるであろうHTMLは、
自分できちんと把握していますか？
</li>と<li>の間に<br>が入るのはHTMLの文法上エラーとなります。
（すくなくとも、文法チェックでチェックした際に、
重大なエラーが出ない程度のHTMLであったほうがよけいな問題を起こさずすむと思います)

2 名前： ジョニー ： 2007/03/19（月） 15:57 ID:REVXC8Bu sub-VV: すみませんでした。
それはメインの記事部分の事ですよね。
ええと、ではそのことについてもお聞きしてもよろしいでしょうか。

記事部分のテキストを、TABLE枠から離して、枠の中央辺りに書きたいのです。
cellpadding cellspacingなどで設定できますか？
それを使うと、サブタイトル部分も枠から離れてしまい、何が何だか分からなくなってしまいました。

どうかお願いします。

3 名前：匿名： 2007/03/19（月） 15:57 ID:mP6Wsu7G sub-99: > 左メニュー（外部jsファイル）の文字を小さくしたいのです。
> とりあえずjsファイルの方に、<div class>等を当ててみたのですが、どうにも上手く行きません。

CSS、jsファイルを見てみましたが、
左メニューだけ文字を小さくしようとした形跡が見つけられませんでした。
body及びtdに12pxの指定をしているのは判りましたが、左メニューはどのサイズで出そうとしてらっしゃいますか？

4 名前：モノ ◆7YMtX/NYmu ： 2007/03/19（月） 15:57 ID:TeHw2026 sub-Cl: > それはメインの記事部分の事ですよね。

いいえ、提示されたjsファイルのソースを見て>>1のように回答しました。
Javascriptそのものについてはわかりませんが、
出力されるであろうHTMLについて私でもわかる部分があったので。

あとついでなので、cssファイルの書き方も、
このサイト内を読んで適切な書き方をした方がいいと思います。

メイン記事のほうは親切な方の回答をお待ち下さい。
(私自身今作業して検証する余裕がないので)

5 名前： にゃにゃ ： 2007/03/19（月） 15:57 ID:MEqRMSEk sub-Tp: どの程度の範囲に適用させるかにもよりますけど、jsファイルの中に直接スタイルを記述する方法でもいけるかと。

<span style="font-size:10px">├<A HREF="psp_music1.html">PSPで音楽を再生しよう</A></span><BR>

CSSでページ全体を12pxに指定しているので、それ以上小さいサイズにすると読みづらくなってしまいそうですね。
（私が目が悪いせいかもしれませんが）

6 名前： ジョニー ： 2007/03/19（月） 15:57 ID:REVXC8Bu sub-VV: レスありがとうございます。

>>3
js、cssをいじりましたが、変化が無かった為、元に戻してしまいました。
一応報告しておくと、jsの部分を<DIV class="menu">とかでくくり、cssの方で設定してみました。
・・・DIVとか、ホント分からなくて、もしかしたら根本的にアホやってたかもしれません。すみません。

>>4
ええと、<LI></LI>内には<BR>は記述していないと思います。
<LI>～～～</LI><BR>は多々ありますが、もしかしてこれのことでしょうか？

>>5
なるほど！そういう方法がありましたか。
その方法も一考してみます。ありがとうございます。

7 名前：モノ ◆7YMtX/NYmu ： 2007/03/19（月） 15:57 ID:TeHw2026 sub-Cl

私の目がおかしいのでしょうか。
>>0で提示されたjsファイルの中には

document.write('<li><a href="index.html">HOME</a></li><BR>');
document.write('<li><a href="about.html">ABOUT</a></li><BR>');

といった記述がたくさん見られる(3/16 8:30の段階で)のですが、
これは出力されたら

<li><a href="index.html">HOME</a></li><BR>
<li><a href="about.html">ABOUT</a></li><BR>

ということになると思っていました。
だから、>>1にて
> </li>と<li>の間に<br>が入るのはHTMLの文法上エラーとなります。
と返信しました。
<li>と</li>の間ではありません。
</li>と<li>の間です。

8 名前： にゃにゃ ： 2007/03/19（月） 15:57 ID:MEqRMSEk sub-Tp: 失礼しました。
CSSで設定した方がいいですよね。

jsファイルの記述を確認すると、CSSへの参照が記述されていないのでいくらCSSに設定をしても参照させることはできないと思いますよ。
>>1でモノさんもおっしゃっているようにHTMLの記述が正しくない

jsファイルに<html><head><body>を追加し、<head>の中にCSSへのリンクを入れておけば<div class～>などを使用してスタイルを設定できると思います。

>>2について
レイアウトにテーブルを使用しているようですが、CSSに切り替えてみてはどうでしょう？
テーブルをネストさせるより、スタイルの幅が広がるかもしれませんよ。
ジョニーさんのサイトであれば、ヘッダー、メニュー、メイン、フッターくらいのカラムに分けて考えていけば、そんなに複雑にはならないと思いますし。
http://www.geocities.jp/multi_column/

9 名前： ジョニー ： 2007/03/19（月） 15:57 ID:REVXC8Bu sub-VV: >>7
あ、</LI>と<LI>の間ですか。
何かタグの文法上、不要なんじゃないかなとは思ってましたが、表示に関して不具合が発生しなかったので、ほうっておいてしまいました。
早急に削除いたします。

>>8
あ、成程。jsの方にもcssへの記述をしなきゃいけないんですね。勉強になりました。
スタイルの件ですが、早速試してみることにしました。どうもありがとうございます。

10 名前： ジョニー ： 2007/03/19（月） 15:57 ID:REVXC8Bu sub-VV: もはやスレッドのタイトルとはあまり関係ないのですが、にゃにゃさんの言うようにもう一度再構築してみました。
http://romug.web.fc2.com/test/

すると、さらに新たな疑問が幾つか浮上しました。
・カラム分けしているDIVにボーダーを追加したい（ border:1px; border-color:#000;とか書いてみましたが、駄目でした）
・記事の部分等を端から離したい（margin等で設定してみましたが、何故か上手くいきませんでした）
・メニュー部分の文字を小さくしたい（本題、jsにcss呼び出しの記述を書いてみましたが、駄目でした）

http://romug.web.fc2.com/test/menu.js
http://romug.web.fc2.com/test/menu.css
http://romug.web.fc2.com/test/default.css

何も分からない無知で大変申し訳ございませんが、返答いただければ幸いです。

11 名前： key-child ： 2007/03/19（月） 15:57 ID:3N.1.4A3 sub-bK

> jsの方にもcssへの記述をしなきゃいけないんですね。
メニューの部分のみ出力しているなら、必要ないはず。html側に書きましょう。

> </li>と<li>の間に<br>
br要素もそうですが、その前にリストの形になっていません。
liタグが不必要なら削除しましょう。必要ならリストの形になるように出力しましょう。
http://www.tagindex.com/html_tag/list/ul.html

メニュー例

<div>
<h2>PSP MENU<h2>
<ul>
 <li>画像
  <ul>
   <li>PSPで画像を見よう</li>
   <li>画像をPSP用にリサイズしよう</li>
  </ul>
 </li>
</ul>
</div>

12 名前： ジョニー ： 2007/03/19（月） 15:57 ID:REVXC8Bu sub-VV: >>11
<LI>タグを削除しました。
アドバイスどうもありがとうございます。

その後色々試行錯誤したのですが、文字を枠から離す事がどうしても出来ません。
あと、枠線をつけることも出来ませんでした。
paddingやらなにやら試してみたのですが、どうしても上手くいきませんでした。

どうかお願いします。

13 名前：アヤ： 2007/03/19（月） 15:57 ID:I/L72zbC sub-0y

えと、枠から離したいのは記事部分でいいんでしょうか？
それだったら

#boxC {
 width:625px;
 float:left;
 padding:10px;　数値は任意
}

な感じでいいんじゃないかと。
他部分に指定する場合も似たようなものだと思いますよ。
参考　http://www.tagindex.com/stylesheet/box/padding.html

あと、borderですが、>>10の書き方は間違いです。
borderの太さを指定するのは「border-width」です。
参考　http://www.tagindex.com/stylesheet/box/border_width.html

14 名前：アヤ： 2007/03/19（月） 15:57 ID:I/L72zbC sub-0y: わー。新スレッド立ってましたね。

http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=560

15 名前： ジョニー ： 2007/03/19（月） 15:57 ［URL］ ID:REVXC8Bu sub-VV: アヤさん、どうもありがとうございます。
大分内容から離れてきたのでスタイル板に新スレッドを立ててしまったのです、どうもすみません。
あちらの方の内容とも吟味してやってみたいと思います。

皆様どうもありがとうございました。