12/02/01 15:38:11.47 PQVRaNv/
助けて下さい！
少し前からＨＰ制作の手伝いをやってるんですが、htmlだけのHPにCSSつけたら
mainエリアの行間が大きく開いて間の抜けた文章になり、客に怒られてしまいました。
社長に聞いても「俺は知らん、技術のことは俺に聞くな！」と逃げられてます、
今は技術者がどんどん辞め、隣の県の大手企業に常駐してる人しか残ってません。
cssにline-height: 1.5;と書いてるんですけど、スゲー行間が広くて間抜けで
困り果ててます。
CSSのコード
#main {
margin: 0px;
padding: 0px;
background-color: #FFFFEE;
float: left;
width: 298px;
}
#main p {
font-size: 14px;
font-color: #999999;
line-height: 1.5;
}
888:887です
12/02/01 15:39:40.65 PQVRaNv/
自分は大学生なんですが、金がないんでソフト会社でバイトしてます、
C言語しかできなかったんですが、なりゆきで中途新人の面倒をおしつけられ
ＨＰまでやらされることになりました、時給800円(交通費でないし実質600円くらい)で
何でも押し付けられるのはバカバカしく、辞めるつもりなんですが、
途中で放りだすのやなんで、仕上げて辞めたいです、お願いしますm(_ _)m
889:Name_Not_Found
12/02/01 15:44:24.38 S6LFyvPG
>>887
1.5とか普通だけどなー
いやならもっと値を小さく
line-heightを単位なしで書いたときは
書体の大きさに対する係数だから
例えば書体が14pxのときline-heightが1.5なら
14x1.5=21で、一文字が14pxに対して行の高さが21pxになる
890:８７６
12/02/01 16:52:12.54
>>877>>878>>879>>886
回答ありがとうございます！
引き続き恐縮ですが質問させてください。
macでもaptanaを使っています。インストールから日本語化まで完了しています。
これからようやく制作と思ったのですが、ワークスペースを変更しなくてはいけなくなりました。
ワークスペースを今のところ（Documentフォルダ）からXAMPPに変更したいのです。
サイトを拝見して作業を進めてみるとaptanaが起動しなくなります。
「指定されたワークスペースが作成できないため、製品を起動できませんでした。指定されたワークスペース・ディレクトリーは無効または読み取り専用のいずれかです。」
とでます。しかしワークスペースを変更しないとブラウザでテストができないので困っています。
よい質問先が見つからずこちらにレスさせていただきましたが、もしこちらのスレがスレ値でしたらできれば誘導をお願いします。
891:Name_Not_Found
12/02/01 16:55:05.72
・line-heightで行間を決めるのはわかっている
・1.5で広すぎる
・どうすればいい？
馬鹿ですか？
892:Name_Not_Found
12/02/01 16:56:20.91
A. 馬鹿です
893:８７６
12/02/01 17:00:17.86
言葉足らずでしたので追記。
ワークスペースの変更方法はAptanaの
「ファイル」→
「ワークスペースの切り替え,その他」→
「参照」→
「XAMPPフォルダを選択,Open」→
Aptanaが再起動し、「指定されたワークスペースが...
となります。
894:Name_Not_Found
12/02/01 18:05:15.20 S6LFyvPG
>>888
どうせいろいろ押し付けてもらえてるのなら
自分がいなくなると困る状況なり案件なりを作ってしまえばいいのに
上手く立ち回れば、金銭的には幸せになれるかもよ？
895:Name_Not_Found
12/02/01 19:08:01.84
>>887
htmlの該当<p>見せてみろ
元が１行おきとか、そんなアホじゃねーのか
896:887です
12/02/01 19:10:02.67 PQVRaNv/
>>889>>891
レスありがとう御座いますm(_ _)m
でも、よく意味がわかりません(汗)
htmlもCSSも勉強したことないんです、テキストもないんです、
去年の１１月に現場で憶えたんです。
line-heightの値を小さくすればいいんですかね？
>>894
頭がいい人ならできるかもですが、無理ですよ、俺はバカなんです。
コンピューターだけは好きでＣ言語で遊ぶのは趣味なんですけど、
仕事だと偉い人から難しい話をされるのが辛くて・・・ホント限界です。
このバイトは友達に誘われたんですけよ、最初は社長が別人みたいに優しくって
「卒業したらウチの社員になってもらうから」って言うんでドンドンと
仕事を引き受けてたら、事務所は遠くに引越しするし、社員は辞めるわで
もう不安で一杯、最近の社長はヤクザみたいな話し方をするんで逃げたいんです、
でも途中で放り出すのは嫌なんです、そういうの気持ち悪いんです、
バカで済みません＞＜
897:Name_Not_Found
12/02/01 19:23:02.11
>>896
line-heightの1.5は通常、読みやすい行間とされている。
そうしているのにハタから見ても間抜けと思われる様な
行間になっているということは、他に原因があると思われる。
CSSはさっきので全部か?
898:Name_Not_Found
12/02/01 19:26:13.48
>>887の
font-color
そんなものは存在しない。
正しくは
color
899:887です
12/02/01 19:32:48.65 PQVRaNv/
>>895
元がダメなんですかね？
最初はリンク(href)だったんですが、混乱したので試しに今は<P>にしてあります。
↓HTMLです。
</head>
<body>
<div id="box">
<div id="top">
<br><a href="../index.htm"><I> トップページに戻る</I></a>
</div>
<div id="main">
<br><p><B>○当社の歴史○</B></p>
<p> ～創業期～ </p>
<p> ～本社設立～</p>
<p> ～戦中戦後～</p>
<p> ～事業拡大～</p>
<p> ～バブル崩壊～</p>
<p> ～そして現在～</p>
<br>
</div>
<div id="GArea">
<br><img src="../img/honnsha.JPG" width="480" height="350" alt="社屋">
</div>
<hr>
<div id="bottm">
</div>
</div>
</body>
900:Name_Not_Found
12/02/01 19:58:56.59
>>889
全角スペースは後々ドツボにはまる原因になるからやめとけ
pは段落をあらわすものだから、そのソースは不適切
メニュー的なものを想定しているなら一般的にはリストを使う
段落って日本語分かるよな?
文章の一塊だから、普通は固まりごとにマージンをとる
ブラウザのデフォルトスタイルでこれが設定されている
「間抜けな行間」っていうのはそのマージン
901:Name_Not_Found
12/02/01 20:08:11.29
>>889
>>900に補足しとく
「ブラウザのデフォルトスタイル」っていうのは
見た目のコントロールをするものを一切使っていない状態で
各要素に自動的に割り当てられるスタイルの事
わかりやすいのはこの状態↓
URLﾘﾝｸ(coliss.com)
デフォルトスタイルは使っているブラウザによって異なる
差異をなくすにはCSSできちんとスタイルを指定する
902:887です
12/02/01 20:33:39.61 PQVRaNv/
>>898>>900>>901
丁寧な回等ありがとう御座います
でも意味がよく分かりません、ちなみに俺は日本人です。
実家は代々農家なんで、菩提寺も過去帳もちゃんとしてます、
10代は余裕で遡れますよ、実家の近所は同じ苗字の家ばっかで
全部親戚、田畑も隣で仲良しだったんですが、
最近はアパートが建ちヨソ者が増えて、オヤジが怒ってます。
903:887です
12/02/01 20:40:31.05 PQVRaNv/
>>897
はったCSSはmainのとこだけです、もう全部はります。
body {
background-color: #EEEEEE;
text-align: center;
}
#box {
margin: 0px;
padding: 0px;
background-color: #FFFFEE;
border: 1px double #999999; /* 区切り線*/
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
width: 800px;
}
#top {
background-color: #FFFFEE;
border-bottom: 1px double #999999;
height: 50px;
margin-bottom: 0px;
text-align: left; /* 文字表示は左 */
}
904:887です
12/02/01 20:41:26.59 PQVRaNv/
#GArea {
background-color: #FFFFEE;
border-left: 1px double #999999;
border-right: 1px double #999999;
float: left; /* 左よせ */
width: 498px;
}
#main {
margin: 0px;
padding: 0px;
background-color: #FFFFEE; /* クリーム*/
float: left;
width: 298px;
}
#main p {
font-size: 14px;
font-color: #999999;
line-height: 1.3;
}
#bottm {
clear: both;
height: 4px;
}
p {
color: #330000;
font-size: 12px;
line-height: 150%;
padding: 5px;
text-align: left;
}
905:887です
12/02/01 20:41:50.63 PQVRaNv/
a {
color: #330000;
font-weight: bold;
text-decoration : none;
}
a:hover {
color: #CC0033;
text-decoration : underline;
}
以上です。
906:Name_Not_Found
12/02/01 20:50:56.72 S6LFyvPG
>>903
それだと
<p> ～創業期～ </p>
<p> ～本社設立～</p>
の<p>に適用されているスタイルは
#main p { 略 }
と
p { 略 }
が合わさって、あとデフォのスタイルも足すと
{
margin: 1em 0;
padding: 5px;
text-align: left;
font-size: 14px;
color: #330000;
line-height: 1.3;
}
こんなふうになってるはず
上下の1emと5pxが合わさって、すんごい間隔広がってる
<p>一個にして<br>で改行するか、marginとpaddingを0にすればいいよ
907:Name_Not_Found
12/02/01 21:05:34.01
>>902
もうあきらめろや
今の理解度じゃ
<b>○当社の歴史○</b>
<a href="ほげほげ">～創業期～</a><br>
<a href="はげはげ”>～本社設立～</a><br>
で精一杯だろ
本当の意味できっちりやりたいなら>>2を一通り読んでこい
908:Name_Not_Found
12/02/01 23:01:10.07
>>890
変更の方法はそれでよいですが、XAMPPのドキュメントフォルダはhtdocsフォルダです。
そこを指定してもだめでしたか？
ApatanaはWebサーバー機能を包括しています。ツールバーの「実行」ボタンの横にある▼を
クリックすると、ブラウザを選択できるはず。
ただし、IEとFirefoxだけすが、下記のサイトでブラウザの追加方法が紹介されています。
URLﾘﾝｸ(d.hatena.ne.jp)
各ブラウザによる確認だけでしたら、XAMPPをインストールする必要がありません。
また、PHPを実行する場合は、現バージョンではデバッガが実装されていないため、実行結果を
確認することができないようです。次バージョンを待つしかありません。
PHPの開発環境を構築するのであれば、ApatanaのベースであるEclipseをインストールして
ApatanaをEclipseのプラグインとしてインストールするとよいかと思います。
Eclipse URLﾘﾝｸ(mergedoc.sourceforge.jp)
PHPをダウンロード。XAMPPを含んでいます。
ページの下の方にXAMPPのインストールが記述されています。
Aptana Studio 3 Plugin URLﾘﾝｸ(www.aptana.com)
英文ですが,
Installing via Eclipseを参照のこと。
Eclipseの「ヘルプ」→「新規ソフトウェアのインストール」で記述されているURLをコピペして
追加、Aptana Studio 3と表示されたら、次へでインストールされます。
時間がかかりますのでのんびり待ちましょう。
インストール後は、若干UIが異なりますが、機能的にはApatanaと同等になります。
ワークスペースもxampp/htdocsがデフォルトになります。
なお、実行する前にxamppフォルダにあるApache_start.batを実行しておきましょう。