プロが教える店舗＆オフィスのセキュリティ対策術

cssでリストを横並びのセンタリング

解決済

  • 質問者：yuma_osamura
  • 質問日時：
  • 回答数：4件

現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？
さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。

現在のHTML

<!-- ヘッダ開始 -->
<div id="header">

<h1>サイトタイトル</h1>

<p class="catch"><strong>サイト説明</strong></p>

<div class="opening">

<h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2>

</div>


<ul class="nl clearFix">
<li class="active"><a href="#">１</a></li>
<li><a href="#">２</a></li>
<li><a href="#">３</a></li>
<li><a href="#">４</a></li>
<li><a href="#">５</a></li>
<li><a href="#">６</a></li>
<li><a href="#">７</a></li>
</ul>

<hr class="none">

</div>
<!-- ヘッダ終了 -->




現在のcss

/* --- ヘッダメニュー --- */
#header ul.nl {
width: 100%; /* IE 6のために幅の指定が必要 */
margin: 0 auto;
padding: 0;
background-color: #ffffff; /* ヘッダメニューの背景色 */
list-style-type: none;
text-align: center;
}
/* メニュー項目 */
#header ul.nl li {
width: 124px; /* 項目の幅 */
float: left;
line-height: 100%;
}

/* 最初の項目と最後の項目 */
#header ul.nl li.first,
#header ul.nl li.last {
width: 125px; /* 項目の幅 */
}


わかりにくいと思いますが、上のように配置したいのです。

まだイマイチ理解しきれていないのですが、回答していただければと思います。

↓HPの現状。
http://dateme.web.fc2.com/top.html

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1

  • 回答者： naokita
  • 回答日時：

どこをHTML5に移行ですか？　今、CSSを調整するのは無意味なのでは？


またやり直す事になるので、HTML.verをどちらかに決定してからの方が良いと思いますよ・・・
---------------------------------

今のままでは、それぞれ不具合が起こしそうですが・・・
センターリングの応急処置なら、

width: 100%; /* IE 6のために幅の指定が必要 */
　　↓　↓　
width: 869px;

など「（リスト幅124px×リスト項目数）+1px」のようにwidth幅を固定すればセンターになるでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

わかりづらくてすみません(汗)
なるほど、そうすればよいのですか！
早速やってみます！

通報する
お礼日時：2012/02/11 16:00

No.2

  • 回答者： ORUKA1951
  • 回答日時：

HTML5は、文書構造をきちんと示すことか望まれます。

HTML4.01で、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
と書かれていた部分が、多くの人に理解してもらえなくて、<p class="catch"><strong>サイト説明</strong></p><div class="opening">などの変なマークアップがされていたことの反省から出発しています。ですからこの様なマークアップでHTML5はありえません。

<body>
　　<header>
　　　　<hgroup>
　　　　　　<h1>サイトタイトル</h1>
　　　　　　<h2>サイト説明<//h2>
　　　　</hgroup>
　　　　<nav>
　　　　　　<ul>
　　　　　　　　<li><a href="#" class="curent">１</a></li>
　　　　　　　　<li><a href="#">２</a></li>
　　　　　　　　<li><a href="#">３</a></li>
　　　　　　　　<li><a href="#">４</a></li>
　　　　　　　　<li><a href="#">５</a></li>
　　　　　　　　<li><a href="#">６</a></li>
　　　　　　　　<li><a href="#">７</a></li>
　　　　　　</ul>
　　　　</nav>
　　<header>
とかになるはず、さらに言うともしこのnavがサイト全体のナビゲーションなら、ここではなくfooterに入るべきものですね。このページ内の目次ならここでよい。

そのうえでスタイルシートを書きますが、デザインのためにidやclass名は一切不要なはずです。だって、そのためにHTML5で新しい要素が加わったのですから。
    • good
    • 0
    • 件
通報する
この回答へのお礼

そ、そうだったのですね！
ありがとうございます！

通報する
お礼日時：2012/02/11 16:00

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

中央に配置するためには、display:inline-block;とtext-align:center;です。

HTMLには<!-- -->を追加。

いずれにしても、HTML5としてとてもたくさんの間違いがあります。
HTML5には、Transitionalはありません。199年勧告のHTML4.01以来、Transitionalは非推奨で、XHTML1.1,XHTML2(中止)、HTML5では予告どおり、廃止です。
★→「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。--HTML4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
★HTML5は<img />ではありません。<img>です。
★<div>は原則使いません。使っても文書構造を示すclass/idと併用します。clearFix、sideなんてつけない。他のデザインに変更するときclearしなかったり、側に置かないときどうします？？。

　そうするとHTML5+CSSだと下のサンプルのように極めてシンプルになります。そして、それぞれが何を指定しているか一目瞭然でしょう。
　スマートホン、firefox,Opera,GoogleChromeなどHTML5対応のブラウザ向けですが、IEにも対応させてあります。ウィンドウ巾もスマホ用に640pxまで縮められます。もちろん幅広ウィンドウでもOK。それでもこんなに簡単になります。

★HTML5に挑戦する前に、資料の豊富なHTML4.01strictをしっかり身につけるほうが良いです。それが出来たら「HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」を読む。
　下記、HTMLをHTML4.01にするときは、<header>などを<div class="header">のようにdiv+classにして、スタイルシートを書き換える。

<!DOCTYPE html>
<html lang="ja">
<head>
＿<meta charset="utf-8">
＿<meta name="description" content="オリジナル又は版権イラストを中心としたさいと。">
＿<meta name="keyword" content="伊達眼鏡,イラスト,テニスの王子様,BASARA">
＿<!-- utf8で記述し、charsetは書かない -->
＿<!-- Content-Style-Type,Content-Script-Typeは書かない -->
＿<title>伊達眼鏡</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
<![endif]-->
<style type="text/css">
<!--
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
＿display:block;
}
body header,body section,body footer{
＿width:90%;
＿min-width:640px;max-width:900px;
＿margin:0 auto;
}
body>section{padding-top:42px;position:relative;}
section nav{line-height:40px;width:100%;text-align:center;position:absolute;top:0;}
section nav ul,section nav ul li{list-style:none;margin:0;padding:0;text-align:center;}
section nav ul{display:block;}
section nav ul li{display:inline-block;width:13.5%;border:solid 1px blue;}
section nav ul li a{display:block;color:transparent;}
section nav ul li a:hover,section nav ul li a:focus{background-color:aqua;}
section nav ul li a:active{background-color:lime;}
section section{margin-right:21%;}
section aside{position:absolute;top:45px;right:0;width:20%;background-color:silver;}
body>section>section>h2{background-color:silver;color:red;margin-right:21%;}
section.news dl,section.news dl dt,section.news dl dd{display:block;padding:0;}
section.news dl dt{width:8em;float:left;line-height:2em;}
section.news dl dd{border-bottom: 1px dotted #C0C0C0;margin-right:21%;}
-->
＿</style>
</head>
<body>
＿<header id="top">
＿＿<h1>伊達眼鏡</h1>
＿＿<p>イラストや漫画を中心に活動しております。</p>
＿＿<p>また、いずれはゲーム製作が出来たらな…、と思っております。</p>
＿＿<p><img src=".jpg" title="表示されなかった画像の説明的な" alt="画像の代わりに表示するテキスト" width="900" height="260"></p>
＿</header>
＿<section>
＿<h2>本文記事</h2>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li class="curent"><a href="#">Home</a></li><!--
＿＿＿＿--><li><a href="">利用規約</a></li><!--
＿＿＿＿--><li><a href="">イラスト</a></li><!--
＿＿＿＿--><li><a href="">漫画</a></li><!--
＿＿＿＿--><li><a href="">掲示板</a></li><!--
＿＿＿＿--><li><a href="">相互サイト</a></li><!--
＿＿＿＿--><li><a href="">メール</a></li>
＿＿＿</ul>
＿＿</nav>
＿＿<section class="news" id="News">
＿＿＿<h2>新着情報</h2>
＿＿＿<dl>
＿＿＿＿<dt>2010/04/03</dt>
＿＿＿＿<dd>サンプルテキスト、サンプルテキスト。サンプルテキスト、サンプルテキスト。</dd>
＿＿＿＿<dt>2010/03/25</dt>
＿＿＿＿<dd>サンプルテキスト、サンプルテキスト。サンプルテキスト、サンプルテキスト。</dd>
＿＿＿</dl>
＿＿</section>
＿＿<aside>
＿＿＿<details>
＿＿＿＿<summary>オリジナル（例）</summary>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="">テニプリ</a></li>
＿＿＿＿＿<li>テキスト２</li>
＿＿＿＿＿<li>テキスト３</li>
＿＿＿＿＿<li>テキスト４</li>
＿＿＿＿＿<li>テキスト５</li>
＿＿＿＿</ul>
＿＿＿</details>
＿＿</aside>
＿</section>
＿<footer>
＿＿<nav>
＿＿＿<ul class="nl">
＿＿＿＿<li><a href="type1_design1_top.html">ホーム</a></li>
＿＿＿＿<li><a href="type1_design1_low.html">サービス内容</a></li>
＿＿＿＿<li><a href="#">制作実績</a></li>
＿＿＿＿<li><a href="#">料金表</a></li>
＿＿＿＿<li><a href="#">会社案内</a></li>
＿＿＿＿<li><a href="#">お問い合わせ</a></li>
＿＿＿</ul>
＿＿</nav>
＿＿<p><img src="/counter_img.php?id=50" style="visibility:hidden" alt="inserted by FC2 system" width="0" height="0"></p>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

まだまだ理解できていない未熟者ですので、そんなに間違いがあるとはかなり驚きです。
回答、ありがとうございましたっ！

通報する
お礼日時：2012/02/11 15:58

No.4

  • 回答者： tracer
  • 回答日時：

センタリングしたいとのことですが、とりあえず、HTML5とかCSS3とか横並びにしてるとか、一切何も関係ないですよ。

単純にセンタリングしたい要素(ul)の幅が100%なのでセンタリングしようがないというだけです。

ulに幅とmargin:0 auto;を設定するだけの話です。
ie6対応したいなら、ul自体にtext-align:centerですね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど、わかりました！
さっそくやってみます！

通報する
お礼日時：2012/02/11 15:57

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報