• 締切済み

この2つのソースを50ページに配置したいのですが?

(1)head内 ----------- <link href="css/navi.css " rel="stylesheet" type="text/css"> ---------- (2)body内 ----------- <div class="nv"> <ul> <li><a href="purchase.shtml">1</a></li> <li><a href="torihiki.shtml">2</a></li> </ul></div> ------------ この(1)(2)のソースを50枚のページに入力したいのですが、少しでも速い方法ないでしょうか?

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.6

>それであっても50ページ×2回の貼り付け作業は同じですよね。  いえ、ファイルを開く必要すらないです。数百ページあっても一瞬で完了します。 ただし、その前提として No.2>>EmEditor( http://jp.emeditor.com/ )を使用して No.5>>既存のページの挿入箇所が正規表現で特定できるのでしたら、  です。 EmEditorは1ヶ月試用出来ますからお試しを

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

ウェブサイトの不定期な一括更新を想定していましたが、そうではなく、一度きりと言うことでしたら、既存のページの挿入箇所が正規表現で特定できるのでしたら、No.1のように置換すれば良いです。 (\t\t\t</p>\n)(\n\t\t</div>\n\t\t<div class="section">) ↓ \1\t\t\t<div class="nav">\n\t\t\t\t<ul>\n\t\t\t\t\t<li><a href=""></a></li>\n・・・【中略】・・・\n\t\t\t\t</ul>\n\t\t\t\t</div>\2 のように置換します。 これは、HTMLが   <div class="header"> ・・・・・・    </p>           ↓ここから   </div>   <div class="section"> ↑ここまで ・・・・・ にマッチしますから   <div class="header"> ・・・・・・    </p>    <div class="nav">     <ul>      <li><a href=""></a></li> ・・・【中略】・・・     </ul>    </div>   </div>   <div class="section"> ・・・・・ に置換することをしめしています。\1,\2は後方参照と言ってマッチした部分を再利用する仕組みです。 ★EmEditorのファイルから置換において、すべてのHTMLにおいて、挿入したい部分が同じ形をしていないとなりません。

gfkdfs
質問者

補足

それであっても50ページ×2回の貼り付け作業は同じですよね。 結局、貼り付け作業は100回しなければならづ、これより早い方法は無いってことが分かりました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

>コピペと手間は、それ程変らないかも・・?  数ページなら。  ページ数が増えると地獄になります。そもそもファイルをすべて際アップロードしなければなりません。includeだと、それだけアップロードすればよい。

gfkdfs
質問者

補足

ですから手間は一緒ですよね。 ページは50ページと記載しています。 includeであってもこのタグを50回×2の100回貼り付けなければなりませんし、その後アップーロードしなければなりません。 ×2とはhead内と、body内です。 但し、変更が生じた場合は便利でしょうがね・・

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

>これを使う場合は、head内と、body内の2箇所に入れる必要がありますよね? 新着情報 人気コンテンツの案内 なども、そうしておくととても楽です。  例だと、HTMLの一部を部品としてあげておいて、それだけ書き換えれば良いのですから・・ .htaccessに AddHandler server-parsed html と書いておくと、拡張子htmlでSSIとして動作します。 ★サーバーでSSIが許可されてないと使えません。 ★PHPも同様、html拡張子でPHPとして動作させられます。  PHPのインクルードは、ほとんどのサーバーで許可されている。

gfkdfs
質問者

補足

<!--#include file="ssi/Sitemap.htm" --> これを使う場合は、head内と、body内の2箇所に入れる必要がありますよね? コピペと手間は、それ程変らないかも・・? これについてのご返事がないので・・

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>そのような機能ありましたかね? たとえばもEmEditor( http://jp.emeditor.com/ )だと添付図のとおり  SEDを使えば一瞬ですが、誰にも扱えるとは・・ 最も楽なのはSSIです。HTML内に <!--#include file="ssi/Sitemap.htm" --> のように書いておくだけです。

gfkdfs
質問者

補足

<!--#include file="ssi/Sitemap.htm" --> これを使う場合は、head内と、body内の2箇所に入れる必要がありますよね? コピペと手間は、それ程変らないかも・・?

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

思いつく方法をいくつか ・テキストエディタで置換する。  高機能テキストエディタは、ファイルから置換でファイルを開かなくても正規表現を使って多くのファイル内の特定の部分を置換できます。 ・Perl,Rubyなどテキスト処理が得意なアプリで書き換えてしまう。  50程度なら、単にコピーペーストでも良いかと [以下サーバー側] ・Perlスクリプトで・・・(上と同じ) ・ページ自体を動的に書き出す。CGIやPHPなど ・SSI Server SideIncludes ---PHPでも同様

gfkdfs
質問者

お礼

有り難うございます。 テキストエディタの件よくわかりません。テキストエディタは使いますがそのような機能ありましたかね? 最後の3つは無理です。

関連するQ&A

  • HTML、CSS

    FC2(無料サーバー)でホームページを作っているのですが、FC2の広告(Powered by…という下に一行だけ出るもの)が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体  --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • iPhoneでのナビゲーションバーの挙動について

    Twitter Bootstrap(version2.2.2)を使いホームページの作成をしようとしています。プログレッシブデザインにしてPCとスマホで表示させたいです。 ナビゲーションバーでドロップダウンメニューを使いたいのですが、PCでは思うどうりに、ドロップダウンメニューのリンクがクリックできるのですが、iPhone(iOS6.0.2)ではクリックしようとするとドロップダウンではなく(そのメニューは消え)表示上ではその下のナビゲーションバー自体をクリックしてしまいます。どのように改善したら良いのでしょうか? HTMLは以下のようなものです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST SITE</title> <link href="./css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./css/bootstrap-responsive.css" rel="stylesheet"> </head> <body style="padding-top:20px"> <div class="container"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR01 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP1-1</a></li> <li><a href="http://www.example.com/">DROP1-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP1-3</a></li> <li><a href="http://www.example.com/">DROP1-4</a></li> </ul> </li> </ul> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR02 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP2-1</a></li> <li><a href="http://www.example.com/">DROP2-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP2-3</a></li> <li><a href="http://www.example.com/">DROP2-4</a></li> </ul> </li> </ul> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>

    • 締切済み
    • CSS
  • CSSについて初歩的ですがわかりません

    こんにちは。CSSPLAYと言うサイトでCSSをDLしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか? 参考URL=http://www.cssplay.co.uk/menus/pro_drop13.html <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <link rel=stylesheet type="text/css" href="1.css"> <style> body {text-align:center;} .end {clear:both;} .box {width:85%; margin:0 auto 0 auto; text-align:center;} .main {width:80%; float:left;} .side {width:20%; float:left;} .top {width:80%; margin:0 auto 0 auto; text-align:center;} .top1 {width:20%; float:left;} .top2 {width:80%; float:left;} </style> </head> <body><div class="box"> <div class="top"> <div class="top1"> トップ </div> <div class="top2"> <div> <span class="preload1"></span> <span class="preload2"></span> <ul class="prodrop4"> <li class="top"><a href="./index.html" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub1"> <li><a href="../menu/" class="fly">Digital SLR Cameras</a></li> <li><a href="../boxes/">Interchangeable Lenses</a></li> <li><a href="../mozilla/">Flash Guns and Accessories</a></li> <li><a href="../ie/">Professional Tripods</a></li> <li><a href="../opacity/">Filters &amp; Lens Hoods</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul></div> </div><div class="end"></div> </div> <div class="side"> サイド </div><!-- サイドここまで --> <div class="main"> メイン </div><!-- メインここまで --> <div class="end"></div> </div></body> </html> 文字制限で入りきらないので、メニューのほうは参考URLからみてください・・・ すいません

  • プルダウンメニューの設置について

    【質問内容】 画像のすぐ上にドロップダウンメニューを設置したいのですが、 マウスオンすると下部の画像の表示位置が下がってしまいます。 この画像表示位置を動かないようにするにはどうすればいいのでしょうか? 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navi_continer"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 1</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <img src="shingo/images/1.TOP.jpg" width="150" height="150" alt="#" /> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 2</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> <li><a href="#">サブメニュー 4</a></li> </ul> </li> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 3</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> 【css】 @charset "utf-8"; #navi_continer { position: relative; z-index:100; width: 300px; height:30px; } #navi { position: absolute; top: 10px; left: 10px; width: 150px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:1px solid #000099; } #navi li.navi_menu_on{ border:1px solid #000099; } ご教授お願いします。

  • 以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに

    以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに変更したところ ヘッダー フッターが崩れてしまいます。ie6.0 ie7.0 にて(ie8.0 firefox3)では問題なく表示されます。 というか、cssが聞かないのです。 utf-8に戻すと直るのですが、なにか設定が必要なのでしょうか。 メールフォームcgiの関係でeuc-8にする必要があるのです。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>タイトル</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="description" content="テキスト。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> <body> <div id="bodybox"> <div id="container"> <!-- main --> <div id="main"> </div><!-- /main --> <div id="header"> <div class="head-box"> <h1>テキストテキストテキスト</h1> <p class="oooo"><a href="../"></p> <p class="top-inquiry"><a href="../inquiry/"><span>問合せ</span></a></p> <ul class="top-navi"> <li><a href="../">HOME</a></li> <li><a href="../cy/">テキスト</a></li> </ul> </div> </div><!-- /header --> </div><!-- /container --> </div><!-- /bodybox --> <div id="footer"> <div id="footer-in" class="clearfix"> <div class="fnavibox"> <ul class="fnavi clearfix"> <li><a href="../index.html">テキスト</a></li> <li class="last"><a href="../works/">テキスト</a></li> </ul> <ul class="fnavi clearfix"> <li><a href="/">HOME</a></li> </ul> </div> <!-- /fnavibox --> <div class="banerbox"> <p class="fbox"><img src="../common/images/img-tel1.jpg" alt="" /></p> <p class="fbox-r"><a href="../inquiry/"><img src="../common/images/btn-toi.jpg" alt="テキスト" /></a></p> </div><!-- /banerbox" --> </div> <!-- /footer-in --> <div id="footer-in2" class="clearfix"> <div class="addressbox"> <p class="name">テキスト</p></p> </div><!-- /addressbox --> <!-- /footer-in --> <div id="footer-in3"> <p class="copyright">

  • float+IE8で形が崩れます。

    float+IE8で形が崩れます。 Webクリエイターの模試をやっていたら以下の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"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>模擬</title> </head> <body> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">1</a></li> <li><a href="summer.html">2</a></li> <li><a href="autumn.html">3</a></li> <li><a href="winter.html">4</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body> </html> を以下のcssと関連付けるものがあったのですが、 @charset "Shift_JIS"; body{ border:solid 1px #993366; width:800px; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } IE8で見るとまったく形が崩れてしまいます。 何故でしょうか? これをIE6などで見るときちんとした形になると思うのですが、同じように表示するにはどうしたらよいのでしょうか? なかなかうまくいきません。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 「横並び」にする方法→HTML&CSS

    HTMLでは、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>KUJIRA cafeへようこそ</title> <link rel="stylesheet" type="text/css "href="css/style.css"> </head> <body> <div class="wrapper"> <!-- ヘッダー --> <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> CSSでは #nav li {     display:inline;     list-style-type: none;     padding-right: 30px; } と書きましたが「横並び」になりません。何が間違っているのでしょうか? 非常に困っております。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • NNでだけリストの一番上の項目がずれます。

    IE、Opera、Firefox では問題なく表示されますが、Netscapeでだけ、リストの最初の項目の位置がずれます。 どうやら、CSSの li {margin: 0; padding: 4px;} が反映されていないようです。 <div id="xxx"><a name="aaa" />   <!-- Menu -->   <div class="navi">     <ul>       <li><a href="#aaa">ホーム</a></li>       <li><a href="#bbb">あいう</a></li>       <li><a href="#ccc">えおか</a></li>     </ul>   </div>   <!-- Content -->   <div class="content">中身</div> </div> 「ホーム」がずれます。 正しく反映させる方法はありますでしょうか?

  • jQueryプラグインのメガドロップダウンメニュー

    jQueryプラグインのメガドロップダウンメニューについて 当方プログラミング初心者です。 至らない点ばかりですが、どうかご容赦ください。。。 この度、仕事でこのメガドロップダウンメニューを使用することになりました。 サンプルサイトです→(1)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/# (2)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/ 使用したいのは、 (1)にあるサンプル(オンマウスすると車の写真などが出てくる) スタイルは(2)にある、白色のバー なのですが、どうもうまくいきません・・・ 上記サイトからダウンロードしたもの ・jquery.js ・jquery.dcmegamenu.1.3.3.js ・dcmegamenu.css ・white.css その他素材などが、指定した名前のフォルダに入っています。 英語が読めないので、わからない単語は調べたりしてなんとかメニューとして形にはできたのですが バーの色は黒いままだし、まずドロップダウンしません。 今、この状態のまま詰まってしまっています・・・ たぶんめちゃくちゃになってしまっていると思うのですが、 どこが悪いのかわかりません・・・>< ★HTML(ヘッド) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ~~~ <head> <link rel="stylesheet" href="css/white.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.js"></script> <link rel="stylesheet" href="css/dcmegamenu.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.dcmegamenu.1.3.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $("mega-menu").dcMegaMenu({ rowItems: "3", speed: "fast" }); }); </script> </head> ★HTML(ボディ) <div class="dcjq-mega-menu demo-container"> <ul id="mega-menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a> <ul> <li id="menu-item-1"><a href="#">Coupe</a> <ul> <li><a href="#">Citroen C4</a></li> <li><a href="#">Honda CR-Z</a></li> <li><a href="#">BMW 3 Series</a></li> <li><a href="#">Volvo C30</a></li> </ul> </li> <li id="menu-item-2"><a href="#">Saloon</a> <ul> <li><a href="#">Volkswagen Passat</a></li> <li><a href="#">Volvo S40</a></li> <li><a href="#">Vauxhall Insignia</a></li> <li><a href="#">Mitsubishi Lancer</a></li> </ul> </li> ~~~~~~~~省略 <li id="menu-item-6"><a href="#">High Performance Cars</a> <ul> <li><a href="#">Lamborghini Gallardo</a></li> <li><a href="#">Ferrari F430</a></li> <li><a href="#">Aston Martin Vantage</a></li> <li><a href="#">Porsche 911 Turbo</a></li> </ul> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Us</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> 名前はまだサンプル通りです。 ★CSS(1)(dcmegamenu.css) http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/dcmegamenu.css ★CSS(2)(white.css) http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/skins/white.css つっこみ所だらけかと思います・・・すみません・・・ どこが悪いのでしょうか・・・? 私のような初心者にはまだまだ早いプログラミングなのかもしれませんが、 どうか、お力添えをお願いできれば、、、、お願いします。

  • リストタグを用いた段組みメニューの不具合(IE6)

    数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。 リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。 他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。 以下がhtmlとcssです。 【html】 <div class="test"> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="search_clear"></div> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> </div> 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、 何卒宜しくお願い致します。

    • ベストアンサー
    • HTML