- ベストアンサー
CSSでリストを横並びのセンタリング方法
- HTMLからHTML5に移行中で、リストを横並びにしたいが、センタリングする方法がわからない。
- 既存のHTMLコードとCSSの一部を紹介し、目的の配置を実現するための方法を教えてください。
- 具体的な回答をお待ちしております。
- yuma_osamura
- お礼率85% (63/74)
- CSS
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
中央に配置するためには、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-html401j/conform.html#h-4.1 )」 ★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/html5-diff/ )」を読む。 下記、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.js"></script> <![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>
その他の回答 (3)
- tracer
- ベストアンサー率41% (255/621)
センタリングしたいとのことですが、とりあえず、HTML5とかCSS3とか横並びにしてるとか、一切何も関係ないですよ。単純にセンタリングしたい要素(ul)の幅が100%なのでセンタリングしようがないというだけです。 ulに幅とmargin:0 auto;を設定するだけの話です。 ie6対応したいなら、ul自体にtext-align:centerですね。
お礼
なるほど、わかりました！ さっそくやってみます！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML5は、文書構造をきちんと示すことか望まれます。HTML4.01で、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より と書かれていた部分が、多くの人に理解してもらえなくて、<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で新しい要素が加わったのですから。
お礼
そ、そうだったのですね！ ありがとうございます！
- naokita
- ベストアンサー率57% (1008/1745)
どこをHTML5に移行ですか？ 今、CSSを調整するのは無意味なのでは？ またやり直す事になるので、HTML.verをどちらかに決定してからの方が良いと思いますよ・・・ --------------------------------- 今のままでは、それぞれ不具合が起こしそうですが・・・ センターリングの応急処置なら、 width: 100%; /* IE 6のために幅の指定が必要 */ ↓ ↓ width: 869px; など「（リスト幅124px×リスト項目数）+1px」のようにwidth幅を固定すればセンターになるでしょう。
お礼
わかりづらくてすみません(汗) なるほど、そうすればよいのですか！ 早速やってみます！
お礼
まだまだ理解できていない未熟者ですので、そんなに間違いがあるとはかなり驚きです。 回答、ありがとうございましたっ！