複数のdivを横並びさせる時一つだけセンタリングする方法はありますか?
widthを狭めてもカラム落ちや片方に寄らせずに
l--口----------l3カラム l--------------l
l---------------l左右可変l--------------l
l-----------------------------------------l
l-----------------------------------------l
margin: 0 auto;で指定しても左の画像に寄ったり離れたりしてしまいます。
body{
width:1500px;}
#3カラム{margin-left: 0 auto;
margin-right: 0 auto;
width:500px;
~~
}
#左画像{width:100px;
margin-left:10px;
z-index:2;
}
No.1ベストアンサー
- 回答日時:
>複数のdivを横並びさせる
これ意味不明です。DIVは「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」であって、デザインのためじゃありません。HTML5では「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )--他に適切な要素がないときの最後の手段として使用すること」となります。
プレゼンテーション(表現)をスタイルシートで行なう最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。そこや、「スタイルシートは・・・HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、・・・その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」書かれているように。
ここ、HTML/スタイルシート書く時に最も重要な根幹に関わる部分です。しっかり読んで復習しておきましょう。
例えば、ナビゲーションリストとして次のようにマークアップされているものとしたら、HTMLには一切手を加えないでスタイルシートで
・複数のdivを横並びさせる時一つだけ中央
・ウィンドウトップ(または最下段)に固定して横並び
・左または右に縦に配置
・画像の上にボタン的に配置
・ディスプレイ幅に合わせて中央に横並び
など、自由自在にHTMLに頼らずにデザインできます。先でデザインの変更もHTMLには無関係にできますよ。
<div class="header">
<h1>ページタイトル</h1>
<div class="nav"><!-- ナビゲーションだよ!!HTML5ではnav -->
<ol><!-- 序列リストだよ -->
<li><a href=""></a></li><!-- リストの項目とリンクだよ -->
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
</div>
</div>
ちなみにHTML5だと
<header>
<h1>ページタイトル</h1>
<nav>
<ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
</nav>
</header>
さて、ここで「3つのリンクを横並びさせる時一つだけ中央」とデザインしたければ
div.nav{
width:100%;
min-width:470px;/* スマホ縦置き用 */
max-width:1000px;/* 幅広ディスプレイ用 */
line-height:40px;/* ボタンの高さ */
position:relative;/* 子孫の位置やサイズの基準とする */
margin:0 auto;
height:40px;
}
div.nav ol{
list-style:none;/* リストとは表示しない */
margin:0;padding:0;/* ブラウザのもつスタイルを消す */
}
div.nav ol li{
margin:0;paading:0;/* ブラウザのもつスタイルを消す */
top:0;left:0;width:100%;/* div.nav内に */
text-align:left;
position:relative;
}
div.nav ol li+li{
text-align:center;/* 二つ目は中央 */
}
div.nav ol li+li+li{
text-align:right;/* 三つ目は中央 */
}
div.nav ol li a{
display:inline-block;/* ブロック */
width:25%;min-width:200px;max-width:300px;/* サイズを指定 */
text-align:center;
background-color:yellow;
position:relative;
z-index:100;
}
div.nav ol li+li a{top:-40px;}
div.nav ol li+li+li a{top:-80px;}
とHTML見なくても書ける。他にもいろいろ方法はあります。
他のデザインも考えて見ましょう。(HTMLは触らず)
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
全体サンプル
★タブは_に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
のDATAでチェック済みHTML4.01strict+CSS2.1
★スマホから幅広ディスプレイまで対応
印刷には適用されない(印刷プレビューで確認)
<!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">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
/* ここに上記をコピペ */
body{background-color:gray;}
div.header,div.section,div.footer{background-color:silver;]
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<div class="nav"><!-- ナビゲーションだよ!!HTML5ではnav -->
___<ol><!-- 序列リストだよ -->
____<li><a href="/">Top</a></li><!-- リストの項目とリンクだよ -->
____<li><a href="/Products">Products</a></li>
____<li><a href="/Contact">Contact</a></li>
___</ol>
__</div>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</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>
この回答への補足
ORUKA1951さん、
html5.jsが重いと聞いていてhtml5でしか使えないタグは使いたくなかったので
div、ol、liで細かく説明しもらってとても助かりました。
ol、liは使い勝手が良いんですね。
どうもありがとうございました。参考にさせてもらいます。
ORUKA1951さん、
html5.jsが重いと聞いていてhtml5でしか使えないタグは使いたくなかったので
div、ol、liで細かく説明しもらってとても助かりました。
ol、liは使い勝手が良いんですね。
どうもありがとうございました。参考にさせてもらいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数行にまたがる括弧を表示し...
-
divタグ内のコンテンツが重なっ...
-
ol要素の番号とリスト項目の離...
-
HTMLで組織図を作成する方法
-
リストマーカーをボックス内に...
-
HTMLのdlとul どちらが正しいと...
-
<table>の高さ固定。情報増加時...
-
navの横並びにsnsアイコンを付...
-
ulタグやliタグの中でbrタグ...
-
アコーディオンメニューがかく...
-
「olタグ」内に「hタグ要素」...
-
左メニューをCSSで固定したい
-
<ul><li></li></ul>にするメリ...
-
HTML5のfooterに見出しを付けて...
-
CSS質問:大手サイトを見ると何...
-
レスポンシブWebデザインでリン...
-
横並びのリストで左端がはみ出る
-
li 長さ指定
-
ページを開いているときのリン...
-
3番目のBoxだけずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報