- ベストアンサー
テキストの揃え方について
- CSSを使用してテキストの揃え方を調整する方法について質問しています。
- 質問者は、ホームページのテキストを中央揃えにする方法と、左揃えにする方法を知りたいと考えています。
- 現在のCSSでは、テキストを左揃えにすることができず、ウィンドウの左端に配置されてしまいます。CSSレベル2の書き方で実現する方法を教えてください。
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
CSSを期待通り適用させるためにはHTMLが正しくないと。 CSSより先にHTMLをきちんと学んでください。そのほうが断然早道です楽です。 HTMLは文書構造だけをマークアップするものです。そのためHTMLは誰(機械を含めて)にでもわかるし、それに基づいてCSSが書けます。 自分で書かれた質問を読み返されても、さっぱりわからないと思います。 たとえば、下のような説明だとどうでしょう。 header内に見出しとナビゲーションがあり、5項目からなるナビゲーションは横並びに配置します。 本文(section)の見出しは画像で表示して、その下に人気記事(.popular)と新着情報(.news)からなる本文記事を左右二コマの段組にしたい。 記事のフッター(footer)はその下に ページ全体は画面中央に表示することにし、スマホや幅広ディスプレイに対応させるため最小400px、最大640pxにまとめたい。 これだとHTMLを示されなくてもスタイルシートが書けます。 [HTML4.01]だと <body> <div class="header"> <h1>ページタイトル</h1> <div class="nav"> <ol> <li><a href="link01.html">リンク01</a></li> ・・・【中略】・・・ </ol> </div> </div> <div class="section"> <h2><img src="gazou01.jpg" alt="画像01" width="400" height="300"></h2> <div class="section popular"> <h3>人気記事</h3> <p>記事</p> </div> <div class="section news"> <h3>新着情報</h3> <p>記事</p> </div> </div> <div class="footer"> <h2>文書情報</h2> <//div> </body> [HTML5]だと <body> <header> <h1>ページタイトル</h1> <nav> <ol> <li><a href="link01.html">リンク01</a></li> ・・・【中略】・・・ </ol> </nav> </header> <section> <h2><img src="gazou01.jpg" alt="画像01" width="400" height="300"></h2> <section class="popular"> <h3>人気記事</h3> <p>記事</p> </section> <section class="news"> <h3>新着情報</h3> <p>記事</p> </section> </section> <footer> <h2>文書情報</h2> </footer> </body> その上で、スタイルシートを書きます。 ★されたいことが読み取れないのであくまでサンプルです。 ★HTMLは4.01strict、CSSは2.1です。2.1が現在のウェブ標準です。 Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) で検証済み ★タブは＿に置換してあるので戻すこと。 <!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>サンプル0</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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,p,ol,ul,li{margin:0;line-height:1.6em;} div.header,div.section,div.footer{ width:100%;min-width:400px;max-width:640px; margin:0 auto; position:relative; } div.header div.nav ol,div.header div.nav ol li{ list-style:none; margin:0;padding:0; text-align:center; line-height:2em; } div.header div.nav ol{display:block;} div.header div.nav ol li{ display:inline-block;width:17%; position:relative; } div.header div.nav ol li a{ display:block;width:100%;height:100%; } div.section h2{height:300px;} div.section h2 img{display:block;width:100%;height:100%;} div.section div.section{ width:50%;margin:0; min-width:0; min-height:300px; } div.section div.news{ position:absolute;top:300px;right:0; height:auto; overflow:auto; } /* わかりやすいように色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:white;} div.section div.section{background-color:silver;} div.section div.news{background-color:lime;} div.footer{background-color:fuchsia;} div.header div.nav ol li a{background-color:yellow;} div.header div.nav ol li a:hover{background-color:red;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ページタイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="link01.html">リンク01</a></li> ＿＿＿＿<li><a href="link02.html">リンク02</a></li> ＿＿＿＿<li><a href="link03.html">リンク03</a></li> ＿＿＿＿<li><a href="link04.html">リンク04</a></li> ＿＿＿＿<li><a href="link05.html">リンク05</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2><img src="gazou01.jpg" alt="画像01" width="400" height="300"></h2> ＿＿<div class="section popular"> ＿＿＿<h3>人気記事</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section news"> ＿＿＿<h3>人気記事</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
IDの使い方、セレクタの利用方法が間違っている・・・ 質問の説明文が？？なので、何をしたいのか方向性によるけど、例を挙げておきます。 <div id="nav"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> <p><img src="gazou01.jpg" alt="画像01" width="400" height="300"></p> <div>左枠</div> <div>右枠</div> <p>下枠</p> </div> body { text-align: center;} body,#nav ul,#nav li { margin: 0; padding: 0;} #nav { margin: 0 auto; width: 400px;} #nav li { float: left; width: 80px; list-style: none;} #nav li a { width: 100%; display: block; padding: 15px 0;} #nav p { clear: left;} #nav div{ float: left; width: 200px; text-align: left;}
お礼
ご回答ありがとうございます。 試行錯誤しても分からず、こちらで質問させていただいたら分かるかもしれないと思ったのですが、難しいようです。 解決せずにとても残念ですが、もう少し自分で考えてみたいと思います。 ありがとうございました。
お礼
ご回答ありがとうございます。 丁寧にご説明いただいたことは分かるのですが、プログラムをよくご存じの方だからでしょうか。 なぜ、このように長い文章・プログラムが必要になるのか分かりませんでした。 簡潔にご説明いただくことは難しいでしょうか。 試行錯誤しても分からず、こちらで質問させていただいたら分かるかもしれないと思ったのですが、難しいようです。 解決せずにとても残念ですが、もう少し自分で考えてみたいと思います。 ありがとうございました。