CSSなどのことはほぼ分からないのですが、詳しい方がいましたら是非お力になっていただきたいと思っております。お願いします。

スティンガー3を使用しております。


header.php を変更したときに思ったようにならなかったので追加したコードを削除したところでおかしくなったと思います。変更内容はトップページ以外、ヘッダー画像をでないようにしようとしていました。

現象は、ヘッダーの画像を横並びに配置していたのですが、縦に二つ並ぶようになりました。

この現象と同時に気がついた異変がまだありまして、h2の装飾を子テーマを使って変更していたんですが、これの装飾がなくなりました。(現在は戻ってはいますが、子テーマで変更しようとしても反映されず、親テーマを変更すると反映されます。)

抜粋記事の枠の大きさなどわかりやすいところを子テーマを使い変更してみましたところ、きちんと反映されました。

ヘッダー画像が回り込まなくなったことと、子テーマで変更できなくなったものがあることの関係は分からないんですが、かれこれ半日以上調べていたのですが完全にいき詰まったのでこちらに質問させていただきました。

もしわかる方がいましたらお力を貸していただきたいので宜しくお願いいたします。


http://arromanches-ngy.sakura.ne.jp/wp/?p=99


問題のサイトになります。トップ画像の下にある「広告のソースコード」という文字がトップ画像の右上に来るはずなんですが・・・。(CSSに関しては一度きちんと横並びになっていましたので問題ないと思います。)

このQ&Aに関連する最新のQ&A

A 回答 (4件)

サイトのどこにおいても良いように書き換えた。


サーバーのどこかに置いてください。

★HTMLとCSSの基本を身につけましょう。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』であって、デザインのためではありません。
★スタイルシートの
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
は、絶対にひつような知識。これがないとDIVをデザインのために書いたり、煩雑なHTML/CSSになる。

頑張ってください。

<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;line-height:1.8em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;}
div.header h1,div.header h2{width:49%;display:inline-block;position:relative;}
div.header h1 img,div.header h2 img{width:90%;height:auto;}
div.header div.nav{width:100%;line-height:2em;text-align:center;}
div.header div.nav a{text-decoration:none;font-weight:bold;color:black;}
div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;}
div.header div.nav ul li{display:inline-block;width:13%;position:relative;margin-left:1px;font-weight:bold;}
div.header div.nav ul li+li:before{content:"|";position:absolute;left:-1px;top:0;}
div.header div.nav ul li ul{position:absolute;top:2em;width:100%;display:none;z-index:10;}
div.header div.nav ul li:hover ul{display:block;}
div.header div.nav ul li ul li{font-weight:normal;width:100%;}
div.header div.nav ul li ul li:before{content:"";}
div.section h2,div.section p,div.section div.section,div.section div.aside{width:auto;margin:0 300px 0 0;min-width:0;border-color:gray;border-style:dotted;}
div.section{min-height:800px;}
div.section div.section{min-height:0;}
div.section div p{width:auto;margin:0;}
div.section div.nav{position:absolute;width:295px;top:0;right:0;font-size:0.95em;}
div.section div.nav h4{line-height:33px;border-bottom:ridge 5px rgb(255,100,100);}
div.section div.nav h4:before{content:url(/wp/wp-content/uploads/2014/07/icon_sidebar1.png);position:relative;top:10px;}
div.section div.nav ul{list-style-type:none;line-height:1.8em;}
div.section div.aside{font-size:0.95em;}
div.section div.aside h4{line-height:3em;margin:1em 2em;text-align:center;font-size:1.5em;}
div.section div.aside dl{margin-left:170px;line-height:1.6em;position:relative;}
div.section div.aside dt{position:relative;font-widght:bold;}
div.section div.aside dd{min-height:2em;margin-left:0;text-indent:1em;}
div.section div.aside dd a{position:absolute;background-color:rgb(255,200,200);width:8em;text-decoration:none;display:block;right:10px;}
div.section div.aside dt a:before{content:"";background-image:url(/wp/wp-content/themes/stinger3ver20140327/images/no-img.png);position:absolute;top:0;left:-160px;width:110px;height:110px;display:block;background-size:cover;}
div.section h2{border-width:1px 1px 0 1px;}
div.section div.section,div.section * p{border-width:0 1px;}
div.section * p{border:none;}
div.section div.aside{border-width:0 1px 1px 1px;}
div.section div.aside h4{border-style:dotted;border-width:1px 0px;border-color:gray;background-color:rgb(200,200,200);}
div.section h2,div.section p,div.section div.section{background-color:white;}
div.section * p{background-color:transparent;}
div.header div.nav ul li ul li{background-color:rgb(255,240,240);}
body{background-image:url(/wp/wp-content/uploads/2014/07/04-polish-wood.png);}
div.section div.aside dl a{text-decoration:none;}
div.section div.aside dl a:hover{text-decoration:underline;}
div.section div.aside{background-color:rgb(255,225,225);}
-->
</style>
    • good
    • 0
この回答へのお礼

詳しいご回答、ありがとうございました。

知識がないので参考にさせていただいて、勉強させてもらいます。

お礼日時:2014/07/20 21:20

そしてスタイルシートを遊びで書いてみました。


・・HTMLをどこかのサイトのデザインに合わせてスタイルシートを書くと言うのは、私にとっても、とても良い練習にもなるので・・

 こんな簡単な判りやすいものになるのです。細かいところは手を入れていませんが、多分あなたの期待に近いものじゃないかと・・。

★リキッドなのでスマホ以上の幅640pxがあればOK。
 ウィンドウを小さくしてみる。
★印刷(media:print)や携帯用(media:handheld)は書いてません。御随意に

<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;line-height:1.8em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;}
div.header h1,div.header h2{width:49%;display:inline-block;position:relative;}
div.header h1 img,div.header h2 img{width:90%;height:auto;}
div.header div.nav{width:100%;line-height:2em;text-align:center;}
div.header div.nav a{text-decoration:none;font-weight:bold;color:black;}
div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;}
div.header div.nav ul li{display:inline-block;width:13%;position:relative;margin-left:1px;font-weight:bold;}
div.header div.nav ul li+li:before{content:"|";position:absolute;left:-1px;top:0;}
div.header div.nav ul li ul{position:absolute;top:2em;width:100%;display:none;z-index:10;}
div.header div.nav ul li:hover ul{display:block;}
div.header div.nav ul li ul li{font-weight:normal;width:100%;}
div.header div.nav ul li ul li:before{content:"";}
div.section h2,div.section p,div.section div.section,div.section div.aside{width:auto;margin:0 300px 0 0;min-width:0;border-color:gray;border-style:dotted;}
div.section{min-height:800px;}
div.section div.section{min-height:0;}
div.section div p{width:auto;margin:0;}
div.section div.nav{position:absolute;width:295px;top:0;right:0;font-size:0.95em;}
div.section div.nav h4{line-height:33px;border-bottom:ridge 5px rgb(255,100,100);}
div.section div.nav h4:before{content:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-conten …);position:relative;top:10px;}
div.section div.nav ul{list-style-type:none;line-height:1.8em;}
div.section div.aside{font-size:0.95em;}
div.section div.aside h4{line-height:3em;margin:1em 2em;text-align:center;font-size:1.5em;}
div.section div.aside dl{margin-left:170px;line-height:1.6em;position:relative;}
div.section div.aside dt{position:relative;font-widght:bold;}
div.section div.aside dd{min-height:2em;margin-left:0;text-indent:1em;}
div.section div.aside dd a{position:absolute;background-color:rgb(255,200,200);width:8em;text-decoration:none;display:block;right:10px;}
div.section div.aside dt a:before{content:"";background-image:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-conten …);position:absolute;top:0;left:-160px;width:110px;height:110px;display:block;background-size:cover;}
div.section h2{border-width:1px 1px 0 1px;}
div.section div.section,div.section * p{border-width:0 1px;}
div.section * p{border:none;}
div.section div.aside{border-width:0 1px 1px 1px;}
div.section div.aside h4{border-style:dotted;border-width:1px 0px;border-color:gray;background-color:rgb(200,200,200);}
div.section h2,div.section p,div.section div.section{background-color:white;}
div.section * p{background-color:transparent;}
div.header div.nav ul li ul li{background-color:rgb(255,240,240);}
body{background-image:url(http://arromanches-ngy.sakura.ne.jp/wp/wp-conten …);}
div.section div.aside dl a{text-decoration:none;}
div.section div.aside dl a:hover{text-decoration:underline;}
div.section div.aside{background-color:rgb(255,225,225);}
/* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */
-->
</style>
    • good
    • 0

後半です。


 説明はは不要だと思います。
 HTMLにはプレゼンテーションに関する事は一切書かれていませんから、後は好きにデザインできます。デザインの重度も格段にましますから、ガラケーやプリンターなど端末に合わせてリキッドにするなり、メディアクウェリー使ってディスプレイによってスタイル帰るなり・・
 もちろん、HTML・・・この場合テンプレートのメンテナンス性もデザイン関係ないのでよくなりますよね。
★タブにも度したら
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
でチェックしておくとよいです。

__<div class="aside">
___<h4 class="kanren">関連記事</h4>
___<dl>
____<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=61">超初心者が超初心者に伝えるcss講座になってしまった一件</a></dt>
____<dd>記事一覧をブロック化からのリンク仕様</dd>
____<dd>今日もコツコツカスタマイズな1日。</dd>
____<dd>こういうことで、ほ</dd>
____<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=61">この記事を読む</a></dd>
____<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=39">サイドバーを色々とカスタム</a></dt>
____<dd>もう朝です・・・。いやぁ、それにしても時間の過ぎることの早いこと早いこと。</dd>
____<dd>他の先生方のように</dd>
____<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=39">この記事を読む</a></dd>
____<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=53">やっとみつけた!記事本文の公開日の装飾部分</a></dt>
____<dd>アロマンシェスウェブ担当のミツロックでございます。</dd>
____<dd>いやぁ、これだけのことにどんだけ時間を使う</dd>
____<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=53">この記事を読む</a></dd>
___ _<dt><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=25">記事一覧をカード型に分けてスッキリ</a></dt>
____<dd>こんばんわ。アロマンシェスのブログサイトに記念の初投稿させていただきますWEB担当ミツロックです。</dd>
____<dd><a href="http://arromanches-ngy.sakura.ne.jp/wp/?p=25">この記事を読む</a></dd>
__ </dl>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

【前回の一部訂正】
 div class="section">
  <h2>見出し</h2>
  <p class="breadcrumb list">ホーム &gt; BLOG &gt;</p>
                            ↑>を&gt;に

   <label></label>は削除
    • good
    • 0

 残念ですが、そのテンプレートでは細工は不可能です。

あなたでなくてもソースを見てうんざりするでしょう。
 スタイルシートを用いてデザインする最大の目的は、御存知のように「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」の分離です。
 そのためには、『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/ )』
 ところが、そのURLを
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
 でチェックされると分かるようにHTML自体無茶苦茶です。そうなるとブラウザによる補完が異なるため、ブラウザ間の表示差以前にデザインできないのです。

★タブは_に置換してあるので戻す。

<!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=Shift_JIS">
_<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" media="screen">
<!--
-->
_</style>
</head>
<body>
_<div class="header">
__<h1><a href="/"><img src="/wp/wp-content/uploads/2014/07/wp_header.png" width="473" height="343" alt="アロマンシェフブログ 少しだけほっと一息よろしいでしょうか?"></a></h1>
__<h2><a href="/"><img src="/wp/wp-content/uploads/2014/07/wp_header.png" width="473" height="343" alt="アロマンシェフブログ 少しだけほっと一息よろしいでしょうか?"></a></h2>
__<div class="nav">
___<ul>
____<li><a href="/wp/" title="トップページ">HOME</a></li>
____<li><a href="/HP">OFFICIAL-HP</a></li>
____<li><a href="/wp/Blog">BLOG</a>
_____<ul>
______<li><a href="/wp/?cat=4">店長</a></li>
______<li><a href="/Therapist">セラピスト</a></li>
_____</ul>
____</li>
____<li><a href="/wp/news">NEWS</a>
_____<ul>
______<li><a href="/Event">イベント</a></li>
_____</ul>
____</li>
____<li><a href="/Job">JOB OFFER</a></li>
____<li><a href="/Hotel">HOTEL-LIST</a></li>
____<li><a href="/wp/?cat=6">CUSTOM</a></li>
___</ul>
__</div>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p class="breadcrumb list">ホーム &gt; BLOG ></p>
__<div class="section">
___<h3>トップ画面以外でヘッダー画像を非表示に・・・が、悲劇が訪れた</h3>
___<p>公開日: 2014/07/19 : 最終更新日:2014/07/20 BLOG, カスタム 備忘録, ミツロック</p>
___<p>ウェブ担当とは名ばかりのミツロックでございます。この記事は、只今ミツロックが遭遇中の悲劇の備忘録です。</p>
___<p>そんなのこうこうこうやれば直るんじゃね~?ってわかる方いましたら是非コメントお願いします・・・。</p>
___<p>本日のカスタム内容は</p>
___<ol>
____<li>トップ画面を2分割に分ける ⇒ とりあえずは成功しました。</li>
____<li>トップ画面以外でヘッダー画像を非表示に ⇒ 悲劇が起こりました。</li>
___</ol>
___<p>という内容となっております。</p>
___<p>(1)トップ画面を(2)分割に分ける</p>
___<p>参考にさせていただいたサイトはこちら</p>
___<p>画面全体に画像を使っている方は、こちらの記事にあるステップ2のheader.phpに記述を加えるにある「広告用ソースコード」という言葉が変更後、上に出ればもうできたも同然(だと思います。)</p>
__</div>
__<div class="nav">
___<form method="get" id="searchform" action="/wp/">
____<p><label class="hidden" for="s"></label>
____<input value="" name="s" id="s" type="text">
____<input style="width: 48px; height: 48px;" src="/wp/wp-content/themes/stinger3ver20140327/images/wp_sarch" alt="検索" id="searchsubmit" value="Search" type="image"></p>
___</form>
___<div>
____<h4>アロマンシェスより一言</h4>
____<p>当店セラピスト、スタッフのブログです。</p>
____<p>ウェブ担当ミツロックのワードプレスにおけるカスタム備忘録も隅っこの方に書かせてもらってます。</p>
____<p>出張リクラゼーションサロンin名古屋「アロマンシェス」<img src="/wp/wp-content/uploads/2014/07/titlelogo01.png" alt=""></p>
___</div>
___<div>
____<h4>カテゴリ別一覧</h4>
____<ul>
_____<li><a href="/wp/?cat=3" >BLOG</a> (3)</li>
_____<li><a href="/wp/?cat=6" >カスタム 備忘録</a> (5)</li>
_____<li><a href="/wp/?cat=7" >ミツロック</a> (3)</li>
____</ul>
___</div>
___<div>
____<h4>アーカイブ</h4>
____<ul>
_____<li><a href="/wp/?m=201407">2014年7月</a></li>
____</ul>
___</div>
___<div>
____<h4 class="menu_underh2">メタ情報</h4>
____<ul>
_____<li><a href="/wp/wp-login.php">ログイン</a></li>
_____<li><a href="/wp/?feed=rss2">投稿の <abbr title="Really Simple Syndication">RSS</abbr></a></li>
____</ul>
___</div>
__</div>

以後は次に・・
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qweb制作者の方!HPをftpでupする際に遅延、もしくはきちんと反映

web制作者の方!HPをftpでupする際に遅延、もしくはきちんと反映されないことってありますか?
こんにちは。仕事でWEB制作をしてます。前々からちょっと疑問だったのですが
反映されておらずあがりきって(?)無かったりして、慌ててUPしなおし、改善する。ということがたま~にあります。

下記には該当しません。

01:閲覧者の環境で更新F5が押されておらずただ単に反映されてない。
02:別ファイルをUPした、などただ単に人為的ミス
03:TEST環境のサーバーを見てる。

WinSCPでSSHを利用したファイル転送をおこなってますが、
(今までFFFTPしか使ったことがなく、入社したときからすでにその環境だったのでよくはわかりませんが。。)
すでにWEB上では反映されているのにも関わらず、管理画面上の更新日時を見るとその時間に
なっていなかったりします。時計がずれていると言うわけでも
なさそうですがなにか関係ありますか?

ffftpを使用時にもこのようなことは過去に皆無ではなかったと思います。
一般的にみてこのようなことって経験ありますか?

原因や改善策をアドバイスいただけますと幸いです。
よろしくお願いいたします。

web制作者の方!HPをftpでupする際に遅延、もしくはきちんと反映されないことってありますか?
こんにちは。仕事でWEB制作をしてます。前々からちょっと疑問だったのですが
反映されておらずあがりきって(?)無かったりして、慌ててUPしなおし、改善する。ということがたま~にあります。

下記には該当しません。

01:閲覧者の環境で更新F5が押されておらずただ単に反映されてない。
02:別ファイルをUPした、などただ単に人為的ミス
03:TEST環境のサーバーを見てる。

WinSCPでSSHを利用したファイル転送をお...続きを読む

Aベストアンサー

2回目です。

■FTPでUPLOADしていて、ブラウザで更新できていることを確認できれば、ユーザからの苦情はないと思います。

■管理画面上の更新日時を見るとその時間になっていなかったりします。
管理画面のことは、わかりかねます。
どうしても、気になるのなら、SSHでLOGINして、UPLOADしたファイルのタイムスタンプを確認してみればよろしいかと。
あと、サーバーの時間を確認してみれば?普通はNTPデーモンによりどこかの標準時刻に同期させていると思います。

■FTPの結果確認は、FTPのLOGを表示してくれるほうがいいかもしれませんね。

QCSSでhタグのフォントの大きさを変更したいがfirefoxではその変更が反映されない

hタグのフォントの大きさを変更したいのですが、firefoxではその変更が反映されず困っています。IEでは変更が反映されます。よろしくお願いします。

Aベストアンサー

スタイルの閉じ忘れですね。

.index_counter {
font-size: 13px;
line-height: 1.3;
.index_hyo {
font-size: 14px;
line-height: 1.4;
}

cssファイルに上記のような記述があります。
.index_counterのほうが閉じられていないため、
それより下のスタイルが無効になってます。

QBLOGヘッダーのJPEGをSWFに変更したいです

BLOGヘッダーのバックグラウンドの画像をJPEGでなくフラッシュのswfを配置するには
どこをいじれば入いるか、HTMLに詳しい方いたら教えてください><切実です。



div#header {
float: left;
width : 850px;
height: 350px;
background: url(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg) no-repeat;
background-color: #808080;
margin: 0px;
padding: 0px;
text-align: left;
}




フラッシュは本文には


<iframe width="850" height="350" src="http://blog-imgs-43.fc2.com/s/e/v/xxxxxxxxx/xxxxxxxxx.swf" frameborder="0" allowfullscreen></iframe>

の形式でフラッシュを本文に貼るのは成功しています。
これをヘッダーに貼りたいのです。

よろしくお願いします!

BLOGヘッダーのバックグラウンドの画像をJPEGでなくフラッシュのswfを配置するには
どこをいじれば入いるか、HTMLに詳しい方いたら教えてください><切実です。



div#header {
float: left;
width : 850px;
height: 350px;
background: url(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg) no-repeat;
background-color: #808080;
margin: 0px;
padding: 0px;
text-align: left;
}




フラッシュは本文には


<iframe width="850"...続きを読む

Aベストアンサー

普通のブログではヘッダー画像をswfに、というのは出来ません。
wordpressとかで直にhtmlがいじれれば別ですが。

書いておられる
div#header {~
はCSSのソースです。
CSS上にフラッシュ(swfファイル)を設置して動かす事はできません。

swfは、あくまでもhtml上に設置する必要があります。
もしくは、jsファイル(Javascript)を解するか。
いずれにせよ、普通のブログ(アメブロとかの、無料でレンタルのタイプ)は、
セキュリティ的な問題でhtmlやjsファイルを直に編集できないようになっています。


本文には設置できた、と言う方法も、
ブログとは別のサーバに置いたswfファイルをインラインフレームで表示しているだけなので、厳密に言えば「ブログに設置できた」とは言えないですかね。
まぁ、youtubeの動画を貼り付けるようなモノと基本的にはまったく同じなので、別に問題ないといえばないですけど。

Qfloat横並びにしたブロックの中のul/liを縦並びにさせたい

float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。

(html)
<div class="base">
<div class="box1">
<a href="#"><img src="#" alt=""></a>
</div>
<div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div>
<div class="box3">
<ul class="list-y">
<li>ああああ</li>
<li>いいいい</li>
<li>うううう</li>
<li>ええええ</li>
<li>おおおお<a href="#">かかか</a></li>
</ul>
</div>
</div>

(css)
ul{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
display: block;
}

li {
margin: 0;
padding: 0;
display: inline;
}

.base {
width: 618px;
height: 100px;
margin: 0;
padding: 8px 10px 0 10px;
text-align: left;
line-height: 1.5em;
background-image: url(../images/content_bg.gif);
background-repeat: repeat-y;
}

.base .box1 {
width: 130px;
height: 97px;
margin: 0;
padding: 0;
float: left;
outline: solid 2px black;
}

.base .box2 {
width: 2px;
height: 100px;
margin: 0 5px 0 10px;
padding: 0;
float: left;
border-right: dotted 2px #ccc;
}

.base .box3 {
margin-left: 157px;
padding: 0;
font-weight: bold;
text-align: left;
}

.list-y{
clear: both;
}

CSSに疎いのでよろしくお願いいたします。

float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。

(html)
<div class="base">
<div class="box1">
<a href="#"><img src="#" alt=""></a>
</div>
<div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div>
<div class="box3">
<ul class="list-y">
<li>ああああ</li>
<li>いいいい</li>
<li>うううう</li>
<li>ええええ</li>
<li>おおおお<a href="#">...続きを読む

Aベストアンサー

liの中の
display: inline;
を削る

Q横並びのボタンの背景を片方だけCSSで変更したい

初歩的な質問で申し訳ありません。今独学でサイト制作を勉強しています。

ul.liで横並びにしているボタンの片方だけ背景の色を変えたいのですが、CSSがul.liに指定されていて一つだけかえられません。
こちらの変更のタグを教えていただけますと幸いです。
現在

<div class="xxx">
<ul>
<li>
<a href="#1">ボタン1</a>
</li>
<li>
<a href="#2">ボタン2</a>
</li>
</ul>

CSS
.xxx ul{padding-top:20px;}
.xxx ul li{background:#DC34BA;color:#FFF;padding:5px 10px;min-width:120px;text-align:center;display:inline-block;margin-right:10px;}

宜しくお願い致します、

Aベストアンサー

本当はcssを2個準備するけど、臨時にhtml側に書いた。

下の例はボタン1の背景を赤にした。
<div class="xxx">
<ul>
<li style="background:#ff0000;">
<a href="#1">ボタン1</a>
</li>
<li>
<a href="#2">ボタン2</a>
</li>
</ul>

---------------------------------------------------------
cssでやるのなら、classを2個作る
<ul>
<li class="a1">
<a href="#1">ボタン1</a>
</li>
<li class="a2">
<a href="#2">ボタン2</a>
</li>
</ul>

.xxx ul{padding-top:20px;}

.a1 ul li{background:#ff0000;color:#FFF;padding:5px 10px;min-width:120px;text-align:center;display:inline-block;margin-right:10px;}

.a2 ul li{background:#DC34BA;color:#FFF;padding:5px 10px;min-width:120px;text-align:center;display:inline-block;margin-right:10px;}

本当はcssを2個準備するけど、臨時にhtml側に書いた。

下の例はボタン1の背景を赤にした。
<div class="xxx">
<ul>
<li style="background:#ff0000;">
<a href="#1">ボタン1</a>
</li>
<li>
<a href="#2">ボタン2</a>
</li>
</ul>

---------------------------------------------------------
cssでやるのなら、classを2個作る
<ul>
<li class="a1">
<a href="#1">ボタン1</a>
</li>
<li class="a2">
<a href="#2">ボタン2</a>
</li>
</ul>

.xxx ul{padding-top:20px;}

.a1 ul li{background:#ff0000;color:...続きを読む


人気Q&Aランキング

おすすめ情報