現在、無料cssテンプレートを使用して自社サイトを作成しています。
http://web-zen.sakura.ne.jp/index.html
左側のバナー関連が縦長になってしまい、しかし上司にはバナーの数を
減らす事はできないと言われ大変困っております。
そこで、バナーそのものの縦の長さを変更できないか質問してみます。
関係ありそうなcssのファイルの内容は、以下のとおりです。
@charset "UTF-8";
/* ---------------------
* FONTSIZE MODEL *
* ---------------------
* 63% ->10pxに相当
* 70% ->11pxに相当
* 75% ->12pxに相当
* 82% ->13pxに相当
* 88% ->14pxに相当
* 94% ->15pxに相当
* 100% ->16pxに相当
* 107% ->17pxに相当
* 113% ->18pxに相当
* 119% ->19pxに相当
* 125% ->20pxに相当
* --------------------- */
/* ========BASIC======== */
html {
overflow-y:scroll;
}
body {
margin:0;
padding:0;
line-height:1.6;
letter-spacing:1px;
font-family:Verdana, Helvetica, sans-serif;
font-size:13px;
color:#fff;
background:#FFF;
}
br {
letter-spacing:normal;
}
a {
color:#d1d1d1;
text-decoration:none;
}
a:hover {
color:#666;
}
img {
border:0;
vertical-align:bottom;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
}
/* ========TEMPLATE LAYOUT======== */
#top {
width:780px;
margin:0 auto;
}
#contents {
float:left;
width:780px;
}
#side {
float:left;
width:220px;
background:#181818;
padding:10px 0;
}
#main {
float:right;
width:540px;
padding:10px 0;
}
#footer {
width:540px;
margin-left:240px;
}
/* ========SIDE CUSTOMIZE======== */
#side h1 {
margin:0;
font-size:24px;
}
#side h1 a {
color:#fff;
}
#side h1 a:hover {
color:#ddd;
}
#side div.section {
margin:0 10px;
}
/* ========MENU CUSTOMIZE======== */
#menu ul {
margin:0 auto;
padding:10px 0;
}
#menu li {
color:#333;
text-align:center;
list-style-type:none;
}
#menu li a {
display:block;
width:220px;
color:#f1f1f1;
line-height:60px;
}
#menu li a:hover {
color:#f1f1f1;
background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat;
}
/* ========MAIN CONTENTS CUSTOMIZE======== */
#main #pr p {
margin:0;
padding:5px 0;
}
#main #icatch {
margin-bottom:10px;
}
#main a {
color:#d1d1d1;
}
#main a:hover {
color:#f1f1f1;
text-decoration:underline;
}
#main h2 {
margin-bottom:8px;
padding:0 0 0 10px;
font-size:15px;
font-weight:bold;
line-height:35px;
border:1px solid #3e3e3e;
background:#181818;
}
#main h3 {
clear:both;
margin:20px 0 8px 0;
padding:0 0 0 5px;
font-size:14px;
border-left:5px solid #3e3e3e;
}
#main h4 {
margin-bottom:2px;
font-size:14px;
border-bottom:2px solid #f1f1f1;
}
#main h5 {
margin-bottom:2px;
padding:2px 5px;
font-size:13px;
background:#3e3e3e;
}
#main h6 {
margin-bottom:2px;
font-size:13px;
border-bottom:2px solid #3e3e3e;
}
#main p {
margin:0 0 1em 0;
}
#main dt {
margin-bottom:3px;
}
#main dd {
padding:0;
margin:0 0 0.5em 1em;
padding:3px;
color:#ddd;
background:#181818;
}
/* INFORMATION CUSTOMIZE */
* html body #main dl.information dd div {
display:inline-block;
}
#main dl.information dt {
float:left;
width:10em;
margin:0;
padding:0;
color:#fff;
}
#main dl.information dd {
margin:0 0 0.5em 10em;
padding:0;
color:#fff;
background:transparent;
}
#main table {
width:100%;
border-collapse: collapse;
}
#main table th {
padding:5px;
font-size:12px;
text-align:left;
border:1px solid #ddd;
background:#181818;
}
#main table td {
padding:5px;
font-size:12px;
text-align:left;
border:1px solid #ddd;
}
/* ========PAGETOP CUSTOMIZE========= */
#pageTop {
padding:10px 0;
text-align:right;
font-size:11px;
}
#pageTop a{
padding:0 0 0 12px;
background:url("../images/bg_pagetop.gif") 0 60% no-repeat;
}
/* ========FOOTMENU CUSTOMIZE======== */
#footMenu ul {
margin:0;
padding:10px 0 0 0;
text-align:right;
border-top:1px solid #b4b4b4;
}
#footMenu li {
display:inline;
margin:0 0 0 10px;
list-style:none;
}
#footMenu li a {
padding-left:10px;
background: url("../images/bg_footmenu.gif") 0 50% no-repeat;
}
よろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
#menu li a {
display:block;
width:220px;
color:#f1f1f1;
/*line-height:60px;*/
padding: 4px 0;
}
line-height: の値を小さくすればいいんですけど、padding の方がおすすめで、4px の値を調整してください。
これで、リンク同士の幅が小さくなり、サイドメニュー全体が短くなります。
ご回答ありがとうございます。
サイドメニュー という名称なのですね。勉強になりました。
無事、60の数値を25にした所 縦幅の間隔が狭くなり質問した事項が解決できました。
この度はご回答下さりありがとうございました。
No.1
- 回答日時:
スタイルシートが、そんなに長大でしかも分かりづらいと・・勘弁してになっちゃいます。
バナーは多分ナビゲーションだと想像して回答します。
もちろんサイズの変更はできますが、本文の長短に関わらず本文を一定以上のサイズを確保するほうが良いです。
スタイルシートを拝見してHTMLも、失礼ながら相当酷いもののように見受けられます。多分誰もメンテナンスできないし、あなた自身も数年も経たないうちに訳がわからなくなるでしょう。idやclassはむろんdivもきちんと理解して使わないと・・
左側のバナーの背景色を、任意の色に変更したいです。 - HTML - 教えて!goo( http://oshiete.goo.ne.jp/qa/7953557.html )
とあわせて回答します。
font要素は、強く非推奨です。久しぶりに拝見しました。
⇒FONT要素とBASEFONT要素は推奨しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
HTMLには文書構造しか書きません。そのためプレゼンテーション(表現)に関わるfontなどは使えなくなったのです。
⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
下記サンプルをごらんになると分かるように、HTMLには文書構造しか書かれていませんから、将来誰がメンテナンスすることになっても簡単に手が付けられるでしょう。
もちろん、Lynxでも利用できます。---検索エンジン対策
『Lynx などのテキスト ブラウザを使用して、サイトを確認します( http://support.google.com/webmasters/bin/answer. … )』
ごく簡単な5カラム
・・例示されたHTMLは複雑怪奇で私ごときで手に負えるものではありません。・・・
[ header ]
[ section本文 ]この内部に本文と目次と付属記事がある
[ footer ]
という文書構造のHTMLがあると考えます。【下記サンプル】
★goTop.gif,goBooks.gif,goProducts.gif,goContactUs.gifと言う画像を./images/bannerに3:1の比で作成してください。
★写真は、01.jpg(4:3),02.jpg(3:4),03.jpg(1:1)を用意して./images/photoにおいてください。
★背景画像は白っぽい写真を用意して./images/backgroundにsky.jpgで保存して置いてください。
※HTML中のhttp:はhtt:に置換してあるので戻すこと
※タブは_に置換してあるので戻すこと。
※文字コードはUTF-8です。
※Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )でチェック済みです。
ご確認ください。
※スタイルシートは文字数制限があるので
左側のバナーの背景色を、任意の色に変更したいです。 - HTML - 教えて!goo( http://oshiete.goo.ne.jp/qa/7953557.html )
への回答として、後ほど
・・640px以上のウィンドウでリキッドデザインで表示されるように計画しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=UTF-8">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
/* スタイルシートは次回 */
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<div class="section">
___<h3>見出し</h3>
___<p>ここに記事が入る</p>
___<ol class="products">
____<li><img src="./images/photo/01.jpg" width="480" height="360" alt="EOA1203:電子レンジ">
_____<ol>
______<li class="name">EOA1203</li>
______<li class="price">\50,000-</li>
______<li class="specification">W:450,H300,D400</li>
_____</ol>
____</li>
____<li><img src="./images/photo/02.jpg" width="480" height="640" alt="EOA1204:電子レンジ">
_____<ol>
______<li class="name">EOA1204</li>
______<li class="price">\55,000-</li>
______<li class="specification">W:450,H300,D400</li>
_____</ol>
____</li>
____<li><img src="./images/photo/03.jpg" width="480" height="480" alt="EOA1205:電子レンジ">
_____<ol>
______<li class="name">EOA1205</li>
______<li class="price">\60,000-</li>
______<li class="specification">W:450,H300,D400</li>
_____</ol>
____</li>
___</ol>
__</div>
__<div class="nav">
___<h3>バナーでのナビゲーション</h3>
___<ol>
____<li><a href="/"><img src="./images/banner/goTop.gif" width="180" height="60" alt="トップへ"></a></li>
____<li><a href="/books"><img src="./images/banner/goBooks.gif" width="180" height="60" alt="書籍へ"></a></li>
____<li><a href="/product"><img src="./images/banner/goProducts.gif" width="180" height="60" alt="製品へ"></a></li>
____<li><a href="/contact"><img src="./images/banner/goContactUs.gif" width="180" height="60" alt="質問"></a></li>
___</ol>
__</div>
__<div class="aside">
___<h3>新着情報</h3>
___<p>記事・・・・・・・・</p>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2012-08-10 12:00:00 (JST)</dd>
__</dl>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
ご回答ありがとうございます。本日はこれ以上更新作業ができないので、ご指南・アドバイス頂いた事項はまた明日以降急ピッチで進めて行こうと思います。
HTMLにFONT属性などを使ったらだめ
という知識は初めて知りました(参考にしているサイトが初心者向けのページだからかな? 有益な知識として、今後に生かしてゆこうと思います。
独力で上司から文句言われないサイト製作できる自信がないので
(苦笑)、また壁にぶつかった際はご指南いただければ幸いです。 ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSS、width100%でもできる余白
-
cssで「下よせ」ってどうやって...
-
CSS(0の単位)について
-
ページを拡大縮小でborderが消...
-
<div>と<div>の間の10px程の...
-
floatした画像の下揃えについて
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
定義リスト dl dd dt
-
余分な縦スクロールバーが出て...
-
heaerとfooterに背景画像が難し...
-
Flexslider2のカーセルスライダ...
-
CSSでボックスのheightが0になる
-
【スタイルシート?】同行内で...
-
テーブル内の文字が揃わない
-
【CSSについて】リストをフロー...
-
リストを全体的に右寄せにしたい。
-
CSSで余白とパディングに”0”を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報